packages/styles/scss/components/_dropdown.scss

   1 @use 'sass:map';
   2
   3 .dropdown {
   4         /*
   5                 The border is set on the parent, but the max height is set on a child container.
   6                 This breaks the available size computation because the parent element will be +2 pixels larger than the available max height.
   7                 This causes an infinite loop in the floating ui library. To prevent that, border size is subtracted in a calc in the max height set in .dropdown-content.
   8         */
   9         $border-size: 1;
  10
  11         --custom-max-width: 20em;
  12         --custom-max-height: 30em;
  13         --min-width: 10em;
  14         --max-width: min(var(--custom-max-width, 100vw), 100vw);
  15         --max-height: min(var(--custom-max-height, 100vh), 100vh);
  16         --selection-background-color: var(--interaction-norm);
  17         --selection-text-color: var(--interaction-norm-contrast);
  18
  19         position: fixed;
  20         z-index: map.get($z-indexes, 'modals');
  21
  22         // NOTE: Don't use logical properties. RTL positioning is done in JS.
  23         /* stylelint-disable */
  24         top: var(--top);
  25         left: var(--left);
  26         /* stylelint-enable */
  27         transform: scale(1);
  28         border-radius: var(--border-radius-md);
  29         box-shadow: var(--shadow-lifted);
  30         border: #{$border-size}px solid var(--border-norm);
  31         background-color: var(--background-norm);
  32         color: var(--text-norm);
  33         animation: 0.15s easing(ease-out-cubic) both anime-dropdown-in-mouse;
  34
  35         @keyframes anime-dropdown-in-mouse {
  36                 from {
  37                         transform: scale(0.75);
  38                         opacity: 0;
  39                 }
  40
  41                 to {
  42                         transform: scale(1);
  43                         opacity: 1;
  44                 }
  45         }
  46
  47         // Out animation
  48         &.is-dropdown-out {
  49                 animation-name: anime-dropdown-out-mouse;
  50
  51                 @keyframes anime-dropdown-out-mouse {
  52                         from {
  53                                 transform: scale(1);
  54                                 opacity: 1;
  55                         }
  56
  57                         to {
  58                                 transform: scale(0.75);
  59                                 opacity: 0;
  60                         }
  61                 }
  62         }
  63
  64         @include transform-origins;
  65
  66         @include media('touch', '<=small') {
  67                 &.adaptive-for-touch-screens {
  68                         inset: 0;
  69                         display: flex;
  70                         padding-block: 15%;
  71                         padding-inline: 25%;
  72                         overflow: hidden;
  73                         transform: none;
  74                         flex-flow: column nowrap;
  75                         justify-content: center;
  76                         align-items: center;
  77                         border-radius: initial;
  78                         box-shadow: none;
  79                         border: none;
  80                         background-color: var(--backdrop-norm);
  81                         animation-name: anime-dropdown-in-touch;
  82
  83                         @keyframes anime-dropdown-in-touch {
  84                                 from {
  85                                         opacity: 0;
  86                                 }
  87
  88                                 to {
  89                                         opacity: 1;
  90                                 }
  91                         }
  92
  93                         // Out animation
  94                         &.is-dropdown-out {
  95                                 animation-name: anime-dropdown-out-touch;
  96
  97                                 @keyframes anime-dropdown-out-touch {
  98                                         from {
  99                                                 opacity: 1;
 100                                         }
 101
 102                                         to {
 103                                                 opacity: 0;
 104                                         }
 105                                 }
 106                         }
 107                 }
 108         }
 109
 110         @include media('touch', '<=xsmall') {
 111                 &.adaptive-for-touch-screens {
 112                         padding-inline: 10%;
 113                 }
 114         }
 115
 116         /* Backdrop button, meant to override 'autoClose' option on mobile */
 117         &-backdrop {
 118                 display: none;
 119         }
 120
 121         @include media('touch', '<=small') {
 122                 &.adaptive-for-touch-screens &-backdrop {
 123                         position: absolute;
 124                         inset: 0;
 125                         z-index: 0;
 126                         display: block;
 127                         inline-size: 100%;
 128                         block-size: 100%;
 129                         margin: 0;
 130                         padding: 0;
 131                         border: none;
 132                         outline: none;
 133                         background: none;
 134                 }
 135         }
 136
 137         /* Scrollable frame inside the dropdown */
 138         &-content {
 139                 inline-size: var(--width);
 140                 block-size: var(--height);
 141                 min-inline-size: min(var(--min-width, 1.5em), 100vw);
 142                 min-block-size: min(var(--min-height, 1em), 100vh);
 143                 max-inline-size: calc(min(var(--available-width, var(--max-width)), var(--max-width)) - #{$border-size * 2}px);
 144                 max-block-size: calc(min(var(--available-height, var(--max-height)), var(--max-height)) - #{$border-size * 2}px);
 145                 overflow: auto;
 146                 border-radius: inherit;
 147                 background-color: var(--background-norm);
 148                 background-image: radial-gradient(farthest-side at 50% 0, var(--backdrop-norm), transparent),
 149                         radial-gradient(farthest-side at 50% 100%, var(--backdrop-norm), transparent);
 150                 background-position:
 151                         50% 0,
 152                         0 100%;
 153                 background-size: calc(100% - #{rem(20)}) rem(3);
 154                 background-repeat: no-repeat;
 155
 156                 &::before,
 157                 &::after {
 158                         content: '';
 159                         position: relative;
 160                         z-index: 1;
 161                         display: block;
 162                         block-size: rem(3);
 163                         flex: 0 0 rem(3);
 164                         background: var(--background-norm);
 165                 }
 166         }
 167
 168         @include media('touch', '<=small') {
 169                 &.adaptive-for-touch-screens &-content {
 170                         position: relative;
 171                         z-index: 1;
 172                         inline-size: 100%;
 173                         max-inline-size: initial;
 174                         max-block-size: initial;
 175                         border-radius: var(--border-radius-md);
 176                         box-shadow: var(--shadow-lifted);
 177                         transition: transform 0.1s ease-out;
 178                         animation: anime-dropdown-content-scale-in 0.15s ease-out both;
 179
 180                         @keyframes anime-dropdown-content-scale-in {
 181                                 from {
 182                                         transform: scale(0.8);
 183                                 }
 184
 185                                 to {
 186                                         transform: scale(1);
 187                                 }
 188                         }
 189                 }
 190
 191                 &.adaptive-for-touch-screens.is-dropdown-out &-content {
 192                         animation-name: anime-dropdown-content-scale-out;
 193
 194                         @keyframes anime-dropdown-content-scale-out {
 195                                 from {
 196                                         transform: scale(1);
 197                                 }
 198
 199                                 to {
 200                                         transform: scale(0.8);
 201                                 }
 202                         }
 203                 }
 204         }
 205
 206         &-item {
 207                 &-button,
 208                 &-link {
 209                         @extend .interactive-pseudo-inset;
 210
 211                         position: relative;
 212
 213                         &::after {
 214                                 z-index: 2;
 215                         }
 216
 217                         &,
 218                         &:hover,
 219                         &:focus-visible,
 220                         &:active {
 221                                 color: var(--text-norm);
 222                                 text-decoration: none;
 223                         }
 224                 }
 225
 226                 &--delete {
 227                         &,
 228                         &:hover,
 229                         &:focus {
 230                                 .dropdown-item-button {
 231                                         color: var(--signal-danger);
 232                                 }
 233                         }
 234                 }
 235
 236                 & [aria-current='true'],
 237                 & &--is-selected {
 238                         // Specificity -_-v
 239                         &,
 240                         &:hover,
 241                         &:focus,
 242                         &:active {
 243                                 background-color: var(--selection-background-color);
 244                                 color: var(--selection-text-color);
 245                                 pointer-events: none;
 246                         }
 247
 248                         @supports not selector(:focus-visible) {
 249                                 &:focus {
 250                                         z-index: 0;
 251                                         background-color: unset;
 252
 253                                         &::after {
 254                                                 background-color: var(--selection-background-color);
 255                                                 box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 256                                                 z-index: -1;
 257                                         }
 258                                 }
 259                         }
 260
 261                         @supports selector(:focus-visible) {
 262                                 &:focus-visible {
 263                                         z-index: 0;
 264                                         background-color: unset;
 265
 266                                         &::after {
 267                                                 background-color: var(--selection-background-color);
 268                                                 box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 269                                                 z-index: -1;
 270                                         }
 271                                 }
 272                         }
 273                 }
 274
 275                 // Used when the dropdown action item has a tooltip while being disabled
 276                 & &--fake-disabled {
 277                         & span {
 278                                 color: var(--text-norm);
 279                                 opacity: 0.5;
 280                                 font-weight: var(--font-weight-normal);
 281                         }
 282
 283                         &:hover {
 284                                 cursor: default;
 285                                 background-color: var(--background-norm);
 286                         }
 287                 }
 288
 289                 // Dropdown item container which contains several elements
 290                 // Created for specific use case in the mail composer
 291                 &-container {
 292                         @extend .interactive;
 293
 294                         &,
 295                         &:hover,
 296                         &:focus-visible,
 297                         &:active {
 298                                 color: var(--text-norm);
 299                                 text-decoration: none;
 300                         }
 301
 302                         &.active {
 303                                 background-color: var(--interaction-default-hover);
 304                         }
 305
 306                         &.dropdown-item--is-selected,
 307                         & .dropdown-item--is-selected {
 308                                 &,
 309                                 &:hover,
 310                                 &:focus,
 311                                 &:active {
 312                                         pointer-events: all;
 313                                 }
 314                         }
 315
 316                         .dropdown-item-button {
 317                                 background-color: transparent;
 318
 319                                 &:hover,
 320                                 &:focus,
 321                                 &:active {
 322                                         background-color: transparent;
 323                                 }
 324                         }
 325                 }
 326         }
 327
 328         &-item-hr {
 329                 block-size: 0;
 330                 box-sizing: content-box;
 331                 border-block-start: 1px solid var(--border-norm);
 332         }
 333
 334         &-search {
 335                 position: sticky;
 336                 inset-block-start: 0;
 337                 padding: 1rem;
 338                 background-color: var(--background-norm);
 339                 box-shadow: var(--shadow-norm);
 340                 z-index: 1;
 341
 342                 &-no-result {
 343                         color: var(--text-weak);
 344                         padding-block: rem(40);
 345                         padding-inline: rem(10);
 346                         letter-spacing: rem(0.25);
 347                 }
 348         }
 349
 350         &--is-searchable {
 351                 .dropdown-content::before {
 352                         content: none;
 353                 }
 354         }
 355 }