packages/styles/scss/base/forms/_checkbox.scss

   1 .checkbox {
   2         &-container {
   3                 // position: relative; exported inside the component to enable increase-surface-click
   4                 display: inline-flex;
   5         }
   6
   7         &-input {
   8                 &#{&} {
   9                         // Specificity fail for width
  10                         position: absolute;
  11                         cursor: pointer;
  12                         inset: 0;
  13                         inline-size: 100%;
  14                         block-size: 100%;
  15                         z-index: 1;
  16                         opacity: 0;
  17                         margin: 0;
  18                 }
  19         }
  20
  21         &-fakecheck {
  22                 display: inline-flex;
  23                 min-inline-size: rem(20);
  24                 inline-size: rem(20);
  25                 block-size: rem(20);
  26                 margin-block: auto;
  27                 border-radius: var(--border-radius-sm);
  28                 border: 1px solid var(--field-norm);
  29                 background-color: var(--field-background-color);
  30                 color: var(--field-text-color);
  31                 transition: 0.15s easing(ease-out-cubic);
  32
  33                 &-img {
  34                         margin: auto;
  35                         transform: scale(0);
  36                         transition: 0.15s transform easing(ease-out-back);
  37                 }
  38         }
  39
  40         &-input:hover + &-fakecheck {
  41                 border-color: var(--interaction-norm);
  42                 background-color: var(--field-hover-background-color);
  43                 color: var(--field-hover-text-color);
  44         }
  45
  46         @supports not selector(:focus-visible) {
  47                 &-input:focus + &-fakecheck {
  48                         border-color: var(--interaction-norm);
  49                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  50                         background-color: var(--field-focus-background-color);
  51                         color: var(--field-focus-text-color);
  52                 }
  53
  54                 &-input:focus:hover + &-fakecheck {
  55                         border-color: var(--interaction-norm-hover);
  56                 }
  57         }
  58
  59         @supports selector(:focus-visible) {
  60                 &-input:focus-visible + &-fakecheck {
  61                         border-color: var(--interaction-norm);
  62                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  63                         background-color: var(--field-focus-background-color);
  64                         color: var(--field-focus-text-color);
  65                 }
  66
  67                 &-input:focus-visible:hover + &-fakecheck {
  68                         border-color: var(--interaction-norm-hover);
  69                 }
  70         }
  71
  72         &-input[aria-invalid='true'] + &-fakecheck {
  73                 border-color: var(--signal-danger);
  74                 background-color: var(--field-background-color);
  75                 color: var(--signal-danger);
  76         }
  77
  78         &-input[disabled] + &-fakecheck {
  79                 border-color: var(--field-disabled);
  80                 background-color: var(--field-disabled-background-color);
  81                 color: var(--field-disabled-text-color);
  82         }
  83
  84         /*
  85          * Checked state
  86          */
  87         &-input:checked + &-fakecheck {
  88                 border-color: var(--interaction-norm);
  89                 background-color: var(--interaction-norm);
  90                 color: var(--interaction-norm-contrast);
  91         }
  92
  93         &-input:checked:hover + &-fakecheck {
  94                 border-color: var(--interaction-norm-hover);
  95                 background-color: var(--interaction-norm-hover);
  96                 color: var(--interaction-norm-contrast);
  97         }
  98
  99         @supports not selector(:focus-visible) {
 100                 &-input:checked:focus + &-fakecheck {
 101                         border-color: var(--interaction-norm);
 102                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 103                         background-color: var(--interaction-norm);
 104                         color: var(--interaction-norm-contrast);
 105                 }
 106
 107                 &-input:checked:focus:hover + &-fakecheck {
 108                         border-color: var(--interaction-norm-hover);
 109                 }
 110         }
 111
 112         @supports selector(:focus-visible) {
 113                 &-input:checked:focus-visible + &-fakecheck {
 114                         border-color: var(--interaction-norm);
 115                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 116                         background-color: var(--interaction-norm);
 117                         color: var(--interaction-norm-contrast);
 118                 }
 119
 120                 &-input:checked:focus-visible:hover + &-fakecheck {
 121                         border-color: var(--interaction-norm-hover);
 122                         background-color: var(--interaction-norm-hover);
 123                 }
 124         }
 125
 126         &-input:checked[aria-invalid='true'] + &-fakecheck {
 127                 border-color: var(--signal-danger);
 128                 background-color: var(--signal-danger);
 129                 color: var(--signal-danger-contrast);
 130         }
 131
 132         &-input:checked[disabled] + &-fakecheck,
 133         &-input:checked[disabled]:indeterminate + &-fakecheck {
 134                 border-color: var(--field-disabled);
 135                 background-color: var(--field-disabled);
 136                 color: var(--interaction-norm-contrast);
 137         }
 138
 139         &-input:checked:indeterminate + &-fakecheck {
 140                 border-color: var(--field-norm);
 141                 background-color: var(--field-background-color);
 142                 color: var(--field-text-color);
 143         }
 144
 145         &-input:checked + &-fakecheck &-fakecheck-img,
 146         &-input:indeterminate + &-fakecheck &-fakecheck-img {
 147                 transform: scale(1);
 148                 transition-delay: 0.1s;
 149         }
 150 }