packages/styles/scss/base/_interactive.scss

   1 %interactive {
   2         outline: none; // be careful of a11y
   3         color: inherit;
   4         transition:
   5                 0.15s easing(ease-out-quint),
   6                 background-position 0s;
   7
   8         @supports selector(:focus-visible:has(a, b)) {
   9                 // had to do this because of Safari
  10                 outline: unset;
  11         }
  12
  13         &.link-focus.link-focus:focus,
  14         &.link-focus.link-focus:focus-visible {
  15                 outline: none;
  16         }
  17
  18         &:not([class*='bg-']) {
  19                 background-color: var(--interaction-default);
  20         }
  21
  22         &:hover {
  23                 background-color: var(--interaction-default-hover);
  24                 color: inherit;
  25         }
  26
  27         &:active,
  28         &.is-active,
  29         &.active,
  30         &[aria-expanded='true'] {
  31                 background-color: var(--interaction-default-active);
  32                 color: inherit;
  33         }
  34
  35         &[disabled],
  36         &.is-disabled {
  37                 pointer-events: none;
  38
  39                 &:not([aria-busy='true']) {
  40                         opacity: 0.5;
  41                 }
  42         }
  43 }
  44
  45 /*
  46  * Interactive gives only default colors on every states
  47  * Default focus states
  48  */
  49 .interactive {
  50         @extend %interactive;
  51
  52         @supports not selector(:focus-visible:has(a, b)) {
  53                 &:focus,
  54                 &:focus-within {
  55                         border-color: var(--focus-outline);
  56                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  57                         color: inherit;
  58
  59                         &:hover {
  60                                 background-color: var(--interaction-default-hover);
  61                         }
  62                 }
  63         }
  64
  65         @supports selector(:focus-visible:has(a, b)) {
  66                 &:focus-visible,
  67                 &:has(*:focus-visible) {
  68                         border-color: var(--focus-outline);
  69                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  70                         color: inherit;
  71
  72                         &:hover {
  73                                 background-color: var(--interaction-default-hover);
  74                         }
  75                 }
  76         }
  77 }
  78
  79 /*
  80  * Interactive gives only default colors on every states
  81  * Focus states as pseudo element (dropdown options, minicalendar,...)
  82  */
  83 .interactive-pseudo {
  84         @extend %interactive;
  85
  86         &::after {
  87                 content: '';
  88                 position: absolute;
  89                 inset: 0;
  90                 z-index: 1;
  91                 border-radius: var(--border-radius-sm);
  92                 border: 1px solid transparent;
  93                 pointer-events: none;
  94                 transition: 0.15s easing(ease-out-quad);
  95         }
  96
  97         &[class*='rounded']::after {
  98                 border-radius: inherit;
  99         }
 100
 101         @supports not selector(:focus-visible:has(a, b)) {
 102                 &:focus,
 103                 &:focus-within {
 104                         &::after {
 105                                 border-color: var(--focus-outline);
 106                                 box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 107                         }
 108
 109                         &:hover {
 110                                 background-color: transparent;
 111
 112                                 &::after {
 113                                         background-color: var(--interaction-default-hover);
 114                                 }
 115                         }
 116
 117                         &:active {
 118                                 background-color: transparent;
 119                         }
 120                 }
 121         }
 122
 123         @supports selector(:focus-visible:has(a, b)) {
 124                 &:focus-visible,
 125                 &:has(*:focus-visible) {
 126                         &::after {
 127                                 border-color: var(--focus-outline);
 128                                 box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 129                         }
 130
 131                         &:hover {
 132                                 background-color: transparent;
 133
 134                                 &::after {
 135                                         background-color: var(--interaction-default-hover);
 136                                 }
 137                         }
 138
 139                         &:active {
 140                                 background-color: transparent;
 141                         }
 142                 }
 143         }
 144 }
 145
 146 /*
 147  * Interactive gives only default colors on every states
 148  * Focus states as pseudo element with inset to deal with overflow-hidden
 149  */
 150 .interactive-pseudo-inset {
 151         @extend %interactive;
 152         @extend .interactive-pseudo;
 153
 154         &::after {
 155                 inset: $focus-ring-size;
 156         }
 157 }
 158
 159 .interactive-pseudo-protrude {
 160         @extend %interactive;
 161         @extend .interactive-pseudo;
 162
 163         &::after {
 164                 inset: -$focus-ring-size;
 165         }
 166 }
 167
 168 .interactive--no-background {
 169         &:hover,
 170         &:focus,
 171         &:focus-visible,
 172         &:focus-within,
 173         &:active,
 174         &.is-active,
 175         &.active,
 176         &[aria-expanded='true'] {
 177                 background-color: inherit;
 178
 179                 &:hover::after {
 180                         background-color: inherit;
 181                 }
 182         }
 183 }