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

@import '../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {

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

    /deep/ ul {
      border: none;
    }
  }

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

  .slider-container {
    display: flex;
    flex: 1;
    -ms-flex: 1 1 auto;
    justify-content: center;
    align-items: center;
  }

  ngx-temperature-dragger {
    margin-top: -1.5rem;
    width: 80%;
    max-width: 300px;
  }

  .slider-value-container {
    display: flex;
    flex-direction: column;
    align-items: center;

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

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

      &.humidity::before {
        position: absolute;
        content: '%';
        bottom: 0.5rem;
        right: -2.5rem;
        color: nb-theme(color-fg);
        font-size: 2.5rem;
        font-weight: nb-theme(font-weight-light);
      }
    }

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

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

        &::before {
          display: none;
        }
      }

      .desc {
        display: none;
      }
    }
  }

  .btn-group {
    padding: 1.25rem;
    justify-content: center;
  }

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

    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    margin-bottom: 0;
    color: nb-theme(color-fg);

    &.active {
      border-color: nb-theme(color-fg-highlight);
      color: nb-theme(color-fg-highlight);
    }

    i {
      font-size: 2.25rem;
      line-height: 1;
    }
  }

  @include nb-for-theme(cosmic) {
    .btn-icon.active {
      color: nb-theme(color-fg-heading);
      border-color: nb-theme(color-fg-highlight);
      box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
      background-color: rgba(nb-theme(color-fg-highlight), 0.25);
    }
  }

  @include nb-for-theme(corporate) {
    .btn-icon.active {
      color: nb-theme(color-primary);
      border: none;
      background-color: nb-theme(layout-bg);
    }
  }

  @include media-breakpoint-down(is) {
    ngx-temperature-dragger {
      max-width: 250px;

      /deep/ .power-bg {
        width: 4rem;
        height: 4rem;
        font-size: 3rem;
      }
    }

    .slider-value-container .value {
      font-size: 3rem;
      &.humidity::before {
        right: -2rem;
        font-size: 2rem;
      }
    }
  }
  @include media-breakpoint-down(xs) {
    .btn-icon {
      width: 3.25rem;
      height: 3.25rem;
      i {
        font-size: 1.75rem;
      }
    }

    nb-tabset /deep/ ul {
      padding: 0 0.5rem;
      a {
        padding: 1.25rem 1rem;
      }
    }
  }
}