webapp/src/app/@theme/components/theme-switcher/theme-switcher.component.scss

   1 @import '../../styles/themes';
   2 @import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
   3 @import '~bootstrap/scss/mixins/breakpoints';
   4 @import '~@nebular/theme/styles/global/bootstrap/breakpoints';
   5
   6 @include nb-install-component() {
   7   display: flex;
   8   flex-direction: column;
   9   align-items: center;
  10   width: 50%;
  11
  12   .theme-switch {
  13     display: flex;
  14     justify-content: space-between;
  15     align-items: center;
  16     cursor: pointer;
  17     margin: 0;
  18
  19     & > span {
  20       font-size: 1.125rem;
  21       font-weight: nb-theme(font-weight-bold);
  22       transition: opacity 0.3s ease;
  23
  24       &.light {
  25         color: nb-theme(color-fg-text);
  26         padding-right: 10px;
  27       }
  28
  29       &.cosmic {
  30         color: nb-theme(color-fg);
  31         padding-left: 10px;
  32       }
  33
  34       @include nb-for-theme(cosmic) {
  35         &.light {
  36           color: nb-theme(color-fg);
  37         }
  38
  39         &.cosmic {
  40           color: nb-theme(color-white);
  41         }
  42       }
  43
  44       &:active {
  45         opacity: 0.78;
  46       }
  47     }
  48   }
  49
  50   .switch {
  51     position: relative;
  52     display: inline-block;
  53     width: 4rem;
  54     height: 1.75rem;
  55     margin: 0;
  56
  57     input {
  58       display: none;
  59
  60       &:checked + .slider::before {
  61         transform: translateX(2.25rem);
  62       }
  63     }
  64
  65     .slider {
  66       position: absolute;
  67       top: 0;
  68       left: 0;
  69       right: 0;
  70       bottom: 0;
  71       border-radius: 1.75rem;
  72       background-color: nb-theme(layout-bg);
  73     }
  74
  75     .slider::before {
  76       position: absolute;
  77       content: '';
  78       height: 1.75rem;
  79       width: 1.75rem;
  80       border-radius: 50%;
  81       background-color: nb-theme(color-success);
  82       transition: 0.2s;
  83
  84       box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
  85
  86       @include nb-for-theme(cosmic) {
  87         @include btn-hero-primary-gradient();
  88       }
  89     }
  90   }
  91
  92   @include media-breakpoint-down(is) {
  93     .light, .cosmic {
  94       display: none;
  95     }
  96   }
  97
  98   @include media-breakpoint-down(xs) {
  99       align-items: flex-end;
 100   }
 101 }