switcher.component.scss 2.2 KB

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