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

/**
 * Copyright © 2016-2024 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.
 */
@use '@angular/material' as mat;
@import '../theme.scss';
@import '../scss/constants.scss';

$tb-warn: mat.m2-get-color-from-palette(map-get($tb-theme, warn), text);

: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;
  }

  .tb-layout-preview {
    width: 100%;
    background-color: rgba(mat.m2-get-color-from-palette($tb-primary, 50), 0.6);
    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: rgba(211, 211, 211, 0.6);
        }
      }

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

        .mat-mdc-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;

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

          &:invalid {
            outline: 2px solid $tb-warn;
            border: 1px solid transparent;
            background-color: rgba($tb-warn, 0.2);
          }
        }
      }
    }
  }

  .tb-layout-breakpoints {
    .tb-form-table-header-cell, .tb-form-table-row-cell {
      &.tb-icon {
        width: 29px;
        min-width: 29px;
        max-width: 29px;
        display: flex;
        place-content: center;
      }

      &.tb-breakpoint {
        flex: 1 1 15%;
        width: 15%;
        min-width: 100px;
      }

      &.tb-size {
        flex: 1 1 85%;
        width: 200px;
      }

      &.tb-actions {
        width: 96pxpx;
        min-width: 96px;
        max-width: 96px;
        display: flex;
        justify-content: end;
      }
    }

    .mat-divider {
      margin-top: 6px;
      margin-bottom: 6px;
    }
  }

  .tb-add-breakpoint-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    padding: 8px;
    border: 2px dashed rgba(0, 0, 0, 0.08);
    border-radius: 10px;
  }
}

:host ::ng-deep {
  .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;
    }
    .mat-button-toggle-label-content {
      .mat-pseudo-checkbox {
        display: none;
      }
    }
  }
}

:host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
  .mat-mdc-dialog-content {
    width: 550px;
    max-width: 100%;
    padding: 16px;
  }
}

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

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