ngx-admin/src/app/pages/dashboard/temperature/temperature.component.scss

@import '../../../@theme/styles/variables';

@include nga-install-component() {

  nga-card {
    background-image: nga-theme(radial-gradient);
  }

  nga-tabset {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  nga-tab.content-active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    height: 100%;
  }

  .temperature-container {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
  }

  ngx-temperature-dragger {
    margin-top: -3.5rem;
    width: 80%;
  }

  .temperature {
    display: flex;
    flex-direction: column;
    align-items: center;

    .value {
      position: relative;
      color: nga-theme(color-fg-heading);
      font-family: nga-theme(font-secondary);
      font-size: 4rem;
      font-weight: nga-theme(font-weight-bolder);

      &::before {
        position: absolute;
        content: '°';
        top: 0;
        right: -1.25rem;
      }
    }

    .desc {
      color: nga-theme(color-fg);
      font-weight: nga-theme(font-weight-light);
    }

    &.off {
      .value {
        color: nga-theme(color-fg);
        letter-spacing: 0.25rem;
        padding-left: 0.5rem;

        &::before {
          display: none;
        }
      }

      .desc {
        display: none;
      }
    }
  }

  .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    border-color: nga-theme(form-control-border-color);
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2rem;

    &.active {
      border-color: nga-theme(color-fg-highlight);
      box-shadow: 0 2px 12px 0 rgba(nga-theme(color-fg-highlight), 0.25);
      background-color: rgba(nga-theme(color-fg-highlight), 0.25);
    }
  }
}