thingsboard/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss

/**
 * Copyright © 2016-2022 The Thingsboard Authors
 *
 * Licensed 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.
 */
:host {
  .tb-layout-fixed-container {
    width: 100%;
    min-width: 368px;
    padding: 8px 8px 8px 0;
    min-height: 48px;
  }

  .tb-hint-group {
    padding: 0;
    margin-top: -14px;
    display: block;
  }

  .tb-layout-preview {
    width: 120%;
    background-color: rgba(243,246,251,255);
    padding: 35px;

    &-container {
      width: 75%;

      button.tb-fixed-layout-button {
        background-color: transparent;
        color: #000000;
        cursor: pointer;

        .mat-icon {
          color: rgba(0, 0, 0, 0.38);
        }

        &:hover {
          background-color: #d3d3d3;
        }
      }

      div {
        transition-duration: 0.5s;
        transition-property: max-width;
        position: relative;

        .mat-icon-button {
          align-self: end;
        }
      }

      .tb-layout-preview-element {
        position: absolute;
        z-index: 99;

        .mat-icon {
          font-size: 20px;
          width: 20px;
          height: 20px;
          line-height: 20px;
          color: rgba(255, 255, 255, 0.76);

          &:hover {
            transform: rotate(180deg);
            transition: transform 0.5s;
          }
        }
      }

      &-main {
        min-width: 25%;
      }

      /* remove arrows from input for Chrome, Safari, Edge, Opera */
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      /* remove arrows from input for Firefox */
      input[type=number] {
        -moz-appearance: textfield;
      }

      .tb-layout-preview-input {
        margin: 80px 0 0;
        color: white;

        input {
          border: 1px solid #778899;
          background-color: transparent;
          color: white;
          border-radius: 4px;
          text-align: center;
          outline: none;
          width: 37px;
          height: 28px;
          font-size: 14px;

          &:invalid {
            outline: 2px solid #b71c1c;
            border: 1px solid transparent;
            background-color: rgba(255, 5, 5, 0.2);
          }
        }
      }
    }
  }
}

:host ::ng-deep {
  .mat-slider-wrapper {
    .mat-slider-thumb-container {
      .mat-slider-thumb-label {
        width: 35px;
        height: 35px;
      }
    }
  }

  .mat-button-toggle-group {
    width: 100%;
    min-width: 354px;
    border: 2px solid rgba(0, 0, 0, 0.06);

    .mat-button-toggle-checked  {
      background: rgba(0, 0, 0, 0.06);
    }

    .mat-button-toggle {
      border: none !important;
    }
  }

  /* Make mat-slider tooltip always visible */
  .mat-slider-thumb-label {
    transform: rotate(45deg) !important;
    border-radius: 50% 50% 0 !important;
  }

  .mat-slider-thumb {
    transform: scale(0) !important;
  }

  .mat-slider-thumb-label-text {
    opacity: 1 !important;
  }
}

::ng-deep {
  /* Alarm tooltip with side-to-side movement */
  .tb-layout-error-tooltip-right {
    background-color: #b71c1c !important;
    margin: 5px 0 0 105px;
    width: 160px;
    text-align: center;
  }

  .tb-layout-error-tooltip-main {
    background-color: #b71c1c !important;
    margin: 5px 105px 0 0;
    width: 160px;
    text-align: center;
  }

  .tb-layout-button-tooltip {
    margin: 30px 40px -35px -50px;
  }
}