packages/styles/scss/base/forms/_toggle.scss

   1 @use 'sass:math';
   2
   3 $toggle-width: em(40) !default;
   4 $toggle-width-button: em(24) !default;
   5
   6 .toggle-label {
   7         max-block-size: $toggle-width-button;
   8 }
   9
  10 .toggle-container {
  11         &#{&} {
  12                 // specificity issue with flex helpers
  13                 position: relative;
  14                 z-index: 0; // Create stacking context
  15                 display: inline-flex;
  16                 inline-size: $toggle-width;
  17                 min-block-size: $toggle-width-button;
  18                 max-block-size: $toggle-width-button;
  19                 border-radius: #{math.div($toggle-width, 2)};
  20                 background-color: var(--background-norm);
  21                 flex-shrink: 0;
  22         }
  23
  24         &::before {
  25                 content: '';
  26                 position: absolute;
  27                 inset-block: 0;
  28                 inset-inline-start: 0;
  29                 z-index: 2;
  30                 inline-size: #{$toggle-width-button};
  31                 transform: translateX(0);
  32                 border-radius: $toggle-width-button;
  33                 background-color: var(--field-norm);
  34                 transition:
  35                         transform 0.25s easing(ease-out-back),
  36                         background-color 0.25s easing(ease-out-cubic);
  37         }
  38
  39         &::after {
  40                 content: '';
  41                 position: absolute;
  42                 inset-block: 0;
  43                 inset-inline-start: 0;
  44                 inline-size: $toggle-width;
  45                 z-index: 1;
  46                 border-radius: #{math.div($toggle-width, 2)};
  47                 border: 1px solid var(--field-norm);
  48                 transition: 0.15s easing(ease-out-cubic);
  49         }
  50
  51         & > .toggle-container-text {
  52                 position: absolute;
  53                 inset-block: 0;
  54                 z-index: 2;
  55                 display: inline-flex;
  56                 border-radius: $toggle-width-button;
  57                 inline-size: $toggle-width-button;
  58
  59                 &:first-child {
  60                         z-index: 3;
  61                         inset-inline-start: 0;
  62                         color: var(--text-norm);
  63                 }
  64
  65                 &:last-child {
  66                         z-index: 1;
  67                         inset-inline-end: 0;
  68                         color: var(--interaction-norm-contrast);
  69                 }
  70
  71                 .toggle-container-img {
  72                         margin: auto;
  73                         opacity: 0;
  74                         transition: opacity 0.15s easing(ease-out-cubic);
  75                 }
  76
  77                 .toggle-container-loader {
  78                         position: absolute;
  79                         inset: 0;
  80                         z-index: 1;
  81                         display: flex;
  82                         color: var(--interaction-norm-contrast);
  83                         animation: 0.25s easing(ease-out-cubic) forwards anime-toggle-container-loader-fade-in;
  84
  85                         @keyframes anime-toggle-container-loader-fade-in {
  86                                 from {
  87                                         opacity: 0;
  88                                 }
  89
  90                                 to {
  91                                         opacity: 1;
  92                                 }
  93                         }
  94                 }
  95
  96                 .circle-loader {
  97                         margin: auto;
  98                         font-size: em(16);
  99                 }
 100         }
 101
 102         // will be done later
 103         // &--with-icons {
 104
 105         // }
 106
 107         /**
 108          * states
 109          */
 110         // checked
 111         &--checked {
 112                 .toggle-container-text {
 113                         &:first-child {
 114                                 z-index: 1;
 115                         }
 116
 117                         &:last-child {
 118                                 z-index: 3;
 119
 120                                 .toggle-container-img {
 121                                         opacity: 1;
 122                                 }
 123                         }
 124                 }
 125
 126                 &::before {
 127                         transform: translateX(#{$toggle-width - $toggle-width-button});
 128                         background-color: var(--interaction-norm);
 129                         @at-root {
 130                                 [dir='rtl'] & {
 131                                         transform: translateX(-#{$toggle-width - $toggle-width-button});
 132                                 }
 133                         }
 134                 }
 135         }
 136
 137         // disabled
 138         &--disabled {
 139                 cursor: default;
 140                 opacity: 0.5;
 141
 142                 // disabled but not loading
 143                 &:not(.toggle-container--loading) {
 144                         box-shadow: none;
 145                         background-color: var(--background-strong);
 146
 147                         &::before {
 148                                 background-color: var(--field-norm);
 149                         }
 150
 151                         &.toggle-container--checked {
 152                                 &::before {
 153                                         background-color: var(--interaction-norm);
 154                                 }
 155                         }
 156                 }
 157
 158                 // disabled loading
 159                 &.toggle-container--loading {
 160                         .toggle-container-text .toggle-container-img {
 161                                 opacity: 0;
 162                         }
 163
 164                         &:not(.toggle-container--checked) {
 165                                 &::before {
 166                                         background-color: var(--field-hover);
 167                                 }
 168                         }
 169
 170                         &.toggle-container--checked {
 171                                 &::before {
 172                                         background-color: var(--interaction-norm-hover);
 173                                 }
 174                         }
 175                 }
 176         }
 177
 178         &:not(.toggle-container--disabled) {
 179                 &:hover {
 180                         &::before {
 181                                 background-color: var(--field-hover);
 182                         }
 183                 }
 184
 185                 @at-root {
 186                         .toggle-container:has(:hover) & {
 187                                 &::before {
 188                                         background-color: var(--field-hover);
 189                                 }
 190                         }
 191                 }
 192
 193                 @supports not selector(:focus-visible:has(a, b)) {
 194                         &:focus-within {
 195                                 &::after {
 196                                         border-color: var(--focus-outline);
 197                                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 198                                 }
 199                         }
 200                 }
 201
 202                 @supports selector(:focus-visible:has(a, b)) {
 203                         &:has(*:focus-visible) {
 204                                 &::after {
 205                                         border-color: var(--focus-outline);
 206                                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 207                                 }
 208                         }
 209                 }
 210
 211                 &.toggle-container--checked:hover {
 212                         &::before {
 213                                 background-color: var(--interaction-norm-hover);
 214                         }
 215                 }
 216
 217                 @at-root {
 218                         .toggle-container:has(:hover) .toggle-container--checked.toggle-container--checked {
 219                                 &::before {
 220                                         background-color: var(--interaction-norm-hover);
 221                                 }
 222                         }
 223                 }
 224
 225                 &.toggle-container--loading {
 226                         .toggle-container-text .toggle-container-img {
 227                                 opacity: 0;
 228                         }
 229
 230                         &:not(.toggle-container--checked) {
 231                                 &::before {
 232                                         background-color: var(--field-hover);
 233                                 }
 234                         }
 235
 236                         &.toggle-container--checked {
 237                                 &::before {
 238                                         background-color: var(--interaction-norm-hover);
 239                                 }
 240                         }
 241                 }
 242         }
 243
 244         /**
 245          * Sizes
 246          */
 247         &--small {
 248                 margin-block-start: 0.25em;
 249                 font-size: 0.8em;
 250
 251                 .toggle-container-img {
 252                         inline-size: rem(13);
 253                         block-size: rem(13);
 254                 }
 255         }
 256 }