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

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

@include nb-install-component() {

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

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

    border-color: nb-theme(form-control-border-color);
    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: 1.75rem;
      line-height: 1;
    }
  }

  @include nb-for-theme(cosmic) {
    .btn-icon {
      border-color: nb-theme(form-control-border-color);

      &.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 media-breakpoint-down(xs) {
    .btn-icon {
      width: 3.5rem;
      height: 3.5rem;
    }

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