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

    ::ng-deep ul {
      // make same size as card header
      border-color: transparent;
      padding-bottom: 1px;
      .tab-link {
        padding: 1.25rem 2rem;
      }
    }
  }

  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: 100%;
    max-width: 300px;
  }

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

    .value {
      position: relative;
      margin: 0;

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

      &.humidity::before {
        position: absolute;
        content: '%';
        top: 3px;
        right: -1.6rem;
        font-size: 0.7em;
      }
    }

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

        &::before {
          display: none;
        }
      }

      .desc {
        display: none;
      }
    }
  }

  nb-radio-group {
    display: flex;
    justify-content: space-between;
  }

  nb-radio {
    flex: 0 0 auto;
    width: calc(3.5rem + 2px);
    height: calc(3.5rem + 2px);

    ::ng-deep {
      .outer-circle,
      .inner-circle {
        display: none;
      }

      label {
        padding: 0;
      }

      .text {
        border: 1px solid transparent;
        font-size: 2.5rem;
        padding: 0.5rem;
        margin: 0;
        color: nb-theme(text-hint-color);
      }

      input:checked ~ .text {
        border-color: nb-theme(color-primary-default);
        border-radius: nb-theme(card-border-radius);
        color: nb-theme(text-primary-color);
      }
    }
  }
}