metron-interface/metron-alerts/src/styles.scss

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* You can add global styles to this file, and also import other style files */
@import "vendor.scss";
@import "_variables.scss";
@import "slider.scss";
@import "metron-dialog.scss";
@import "../node_modules/pikaday-time/scss/pikaday.scss";
@import "hexagon";
@import "confirm-popover.scss";
@import "~ng-zorro-antd/layout/style/index.min.css"; /* Import styles of the component */
@import "~ng-zorro-antd/menu/style/index.min.css"; /* Import styles of the component */

body,
button {
    font-family: Roboto-Regular;
}

.mrow {
    @extend .row;
    @extend .mx-0;
}

.input {
  background: $input-background;
  border: 1px solid $input-border-color;
  color: $body-color;
  border-radius: 2px;

  &:focus {
    outline: none;
  }
  &::-webkit-input-placeholder {
    @include place-holder-text;
  }
  &:-moz-placeholder {
    @include place-holder-text;
  }

  &::-moz-placeholder {
    @include place-holder-text;
  }

  &:-ms-input-placeholder {
    @include place-holder-text;
  }
}

.table {
    thead tr th {
        font-size: 13px;
        border-top: none;
    }
    tbody tr td {
        font-size: 14px;
        cursor: pointer;
    }
    tr:last-child td {
      border-bottom: 1px solid $table-border-color;
    }
    td a {
      border: 1px solid transparent;
    }
}

form
{
  label
  {
    font-family: Roboto-Medium;
    font-size: 12px;
    color: $dusty-grey;
    margin: 0px 0px 2px 5px;
  }

  input.form-control
  {
    background: $mine-shaft-1;
  }
}

.form-control, select
{
  border: solid 1px $tundora;
  background-color: $mine-shaft;
  font-family: Roboto;
  font-size: 13px;
  color: $silver;
  height: 35px;

  &[readonly]
  {
    background: $tundora-1;
    border: 1px solid $tundora;
  }

  &:focus
  {
    background-color: $mine-shaft;
    border-color: $tundora;
    color: $silver;
  }
}

.fontawesome-checkbox
{
    display: none;
}

.fontawesome-checkbox ~label
{
    margin: 0px;
    display: inline-block;
    height: 13px;
    line-height: 13px;
    border: 1px solid $tundora;
    border-radius: 2px;
}

.fontawesome-checkbox ~label:before {
    font-family: "FontAwesome";
    font-style: normal;
    font-size: 12px;
    content: '\f0c8';
    color: $mine-shaft-2;
}

.fontawesome-checkbox:checked ~ label:before {
    content: '\f14a';
    color: $checkbox-checked-color;
}

.text-color-curious-blue-13 {
  color: $curious-blue;
  font-size: 13px;
}

.anchor {
  cursor: pointer;
}

.line-color-tundora {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid $tundora;
  margin: 1em 0;
  padding: 0;
}

.readonly-bg {
    background: $mine-shaft;
}

.background-tiber {
  background: $tiber
}
/* Navcontent Layout */
.nav-content {
  padding-right: 0px;

  .col-fixed-200 {
    @extend .readonly-bg;

    top: 0px;
    z-index: 1;
    height: 100%;
    width: 200px;
    position: absolute;
    padding: 15px;

    .title {
      font-size: 14px;
      color: $body-color;
    }
    .m-nav {
      padding-left: 5px;
    }
  }
  .col-offset-200{
    padding-left:215px;
    z-index:0;
  }
}

/* Buttons */

.metron-floating-button-bar-1x {
  @extend .pb-3;
  @extend .dialog1x;

  bottom: 0;
  position: fixed;
  background: $eden;
  border-top: 1px solid $blue-mine;
}

.metron-floating-button-bar-2x {
  @extend .pb-3;
  @extend .dialog2x;

  bottom: 0;
  position: fixed;
  background: $eden;
  border-top: 1px solid $blue-mine;
}

.metron-button-bar-1x {
  @extend .pb-3;
  @extend .dialog1x;

  background: $eden;
  border-top: 1px solid $blue-mine;
}

.metron-button-bar-2x {
  @extend .pb-3;
  @extend .dialog2x;

  background: $eden;
  border-top: 1px solid $blue-mine;
}


.btn-all_ports {
  background-color: $all-ports;
  border-color: $all-ports;
  color: white;
  font-size: 14px;
  min-width: 85px;
  width: 85px;
  cursor: pointer;
  &:focus
  {
    outline: none;
  }
}

.btn-mine_shaft_2 {
  background-color: $mine-shaft_2;
  border-color: $blue-chill;
  color: $piction-blue;
  font-size: 14px;
  min-width: 85px;
  cursor: pointer;
  &:focus
  {
    outline: none;
  }
}

.pika-select  {
  height: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0px 15px;
}

.tooltip-inner {
  opacity: 0.9;
  font-size: 11px;
  border-radius: 0px;
  border: 1px solid $silver-2;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid $tundora-1;
  margin: 0.3rem 0;
  padding: 0;
}

/** Custom Radio box **/
$background_color_1: #eee;
$background_color_2: #ccc;
$background_color_3: #2196F3;
.radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  input {
    position: absolute;
    opacity: 0;
    &:checked {
      &~.checkmark {
        background-color: $eastern-blue-2;
        &:after {
          display: block;
        }
      }
    }
  }
  &:hover {
    input {
      &~.checkmark {
        background-color: $eastern-blue-2;
      }
    }
  }
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 12px;
    width: 12px;
    background-color: $mine-shaft-2;
    border: 1px solid $tundora;
    border-radius: 50%;

    &:after {
      top: 2px;
      left: 2px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: $white;
      content: "";
      position: absolute;
      display: none;
    }
  }
}

.notransition * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;

  animation: none !important;
}

.dropdown-item.disabled {
  cursor: not-allowed;
  pointer-events: all;
}

.ant-layout {
  background: transparent;
  min-height: 100vh;
}

.ant-layout-sider-trigger { background: #3C3C3C; }

.cdk-overlay-pane {
  position: absolute;
  z-index: 1000;
}

.cdk-overlay-connected-position-bounding-box {
  display: flex;
  flex-direction: column;
  min-height: 1px;
  min-width: 1px;
  position: absolute;
  z-index: 1000;
}

.cdk-overlay-container {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.ant-menu-dark .ant-menu-sub {
  background: #2e2e2e;
}

.ant-menu.ant-menu-dark :not(ant-menu-submenu-open) .ant-menu-item-selected,
.ant-menu.ant-menu-dark .ant-menu-sub .ant-menu-item-selected {
  background-color: rgba(255, 255, 255, .1);
}

.ant-menu.ant-menu-dark .ant-menu-item-selected {
  background-color: transparent;
}

.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
  background-color: rgba(255, 255, 255, .1);
}

.ant-menu-dark .ant-menu-inline.ant-menu-sub {
  background: #2e2e2e;
  box-shadow: none;
}

.ant-menu-submenu-title {
  color: rgba(255,255,255,.65);
}

.ant-menu-submenu-arrow::before,
.ant-menu-submenu-arrow::after {
  background: rgba(255,255,255,.65);
}