packages/styles/scss/components/_modal.scss

   1 @use "sass:map";
   2
   3 $modal-width: 50% !default;
   4 $modal-max-width: rem(700) !default;
   5 $modal-breakpoint-width: 52em !default;
   6 $modal-breakpoint-height: 22em !default;
   7 $breakpoint-low-height-modal: em(500, 16) !default;
   8 $modal-max-height: 80% !default;
   9 $modal-wider-width: 70% !default;
  10 $modal-wider-max-width: rem(1000) !default;
  11 $modal-full-dimension: 98% !default;
  12 $modal-full-max-width: rem(1280) !default;
  13 $modal-intermediate-width: rem(480);
  14 $modal-smaller-width: 28em !default;
  15 $modal-tiny-width: em(288) !default;
  16
  17 /* overlay covers everything */
  18 .modal-overlay {
  19         position: fixed;
  20         inset: 0;
  21         background: var(--backdrop-norm);
  22         z-index: map.get($z-indexes, 'modals');
  23         animation: anime-modal-overlay-in ease 0.5s 1 normal;
  24 }
  25
  26 .modal-container {
  27         position: fixed;
  28         inset: 0;
  29         display: flex;
  30         justify-content: center;
  31         flex-direction: column;
  32         z-index: map.get($z-indexes, 'modals');
  33
  34         // -webkit-tap-highlight-color: rgb(255 255 255 / 0);
  35
  36         &.is-behind-backdrop {
  37                 z-index: map.get($z-indexes, 'modals') - 1;
  38         }
  39
  40         /* for very large inputs in modals, like rich text editor */
  41         .field-container--full {
  42                 inline-size: calc(100% - var(--label-width, #{$label-width}));
  43
  44                 @include media('<=#{em(1360, 16)}') {
  45                         inline-size: $field-container;
  46                 }
  47
  48                 @include media('<=#{em(830, 16)}') {
  49                         inline-size: calc(100% - var(--label-width, #{$label-width}));
  50                 }
  51
  52                 @include media('<=small') {
  53                         inline-size: 100%;
  54                 }
  55         }
  56 }
  57
  58 .modal-overlay--out {
  59         animation: anime-modal-overlay-out ease 0.5s 1 normal;
  60         animation-fill-mode: forwards;
  61 }
  62
  63 @keyframes anime-modal-overlay-in {
  64         from {
  65                 opacity: 0;
  66         }
  67
  68         to {
  69                 opacity: 1;
  70         }
  71 }
  72
  73 @keyframes anime-modal-overlay-out {
  74         from {
  75                 opacity: 1;
  76         }
  77
  78         to {
  79                 opacity: 0;
  80         }
  81 }
  82
  83 .modal {
  84         position: relative;
  85         inline-size: $modal-max-width;
  86         max-block-size: $modal-max-height;
  87         max-inline-size: $modal-max-width;
  88         background: var(--modal-background-color);
  89         color: var(--modal-text-color);
  90         padding: 0;
  91         overflow: hidden;
  92         border-radius: var(--border-radius-lg);
  93         box-shadow: var(--shadow-lifted);
  94         animation: anime-modal-in ease 0.15s 1 normal;
  95         animation-fill-mode: both;
  96         animation-delay: 0.1s; // stupid fix for Safari crazy display bug
  97         margin: auto;
  98         display: flex;
  99         flex-direction: column;
 100         cursor: default;
 101 }
 102
 103 @keyframes anime-modal-in {
 104         0% {
 105                 opacity: 0;
 106                 transform: scale(0.8);
 107         }
 108
 109         100% {
 110                 opacity: 1;
 111                 transform: scale(1);
 112         }
 113 }
 114
 115 @keyframes anime-modal-out {
 116         0% {
 117                 opacity: 1;
 118                 transform: scale(1);
 119         }
 120
 121         100% {
 122                 opacity: 0;
 123                 transform: scale(0.8);
 124         }
 125 }
 126
 127 .modal--out {
 128         animation: anime-modal-out ease 0.15s 1 normal;
 129         animation-fill-mode: both;
 130 }
 131
 132 .modal--auto {
 133         inline-size: auto;
 134 }
 135
 136 .modal--intermediate {
 137         inline-size: $modal-intermediate-width;
 138 }
 139
 140 .modal--smaller {
 141         inline-size: $modal-smaller-width;
 142 }
 143
 144 .modal--tiny {
 145         inline-size: $modal-tiny-width;
 146         border-radius: var(--border-radius-lg);
 147 }
 148
 149 .modal--wider {
 150         inline-size: $modal-wider-width;
 151         max-inline-size: $modal-wider-max-width;
 152 }
 153
 154 .modal--full {
 155         inline-size: $modal-full-dimension;
 156         max-inline-size: $modal-full-dimension;
 157         block-size: $modal-full-dimension;
 158         max-block-size: $modal-full-dimension;
 159         margin: 1%;
 160 }
 161
 162 .modal--height-auto {
 163         block-size: auto;
 164         max-block-size: $modal-full-dimension;
 165         margin-block: 1% 1%;
 166 }
 167
 168 .modal--no-outline {
 169         &#{&} {
 170                 &:focus:focus-visible {
 171                         outline: none;
 172                 }
 173         }
 174 }
 175
 176 .modal-close {
 177         position: absolute;
 178         inset-block-start: 0;
 179         inset-inline-end: 0;
 180         @extend .flex;
 181
 182         overflow: hidden;
 183         font-size: 1.25em;
 184         z-index: 1;
 185 }
 186
 187 // not defined, left this in case of
 188 // .modal-close:focus,
 189 // .modal-close:hover,
 190 // .modal-close:active {
 191 // }
 192 // .modal-close:hover,
 193 // .modal-close:active {
 194 // }
 195
 196 .modal-content {
 197         display: flex;
 198         flex-direction: column;
 199         flex: 1 1 auto;
 200         overflow: hidden;
 201         position: relative;
 202 }
 203
 204 .modal-header {
 205         padding-block: rem(30) rem(15);
 206         padding-inline: rem(30);
 207         flex: 0;
 208         flex-shrink: 0;
 209 }
 210
 211 .modal-title {
 212         font-size: rem(22);
 213         line-height: 1.5;
 214         margin-block-end: 0;
 215 }
 216
 217 .modal-footer {
 218         padding-block: rem(15) rem(30);
 219         padding-inline: rem(30);
 220         flex: 0;
 221         flex-shrink: 0;
 222
 223         [class*='button'] {
 224                 // only for Safari the ugly
 225                 min-block-size: rem(34);
 226         }
 227
 228         // single button on right
 229         [class*='button']:only-child {
 230                 margin-inline-start: auto;
 231         }
 232
 233         // for vertically displayed buttons
 234         &.flex-column {
 235                 [class*='button'] + [class*='button'] {
 236                         margin-block-start: 0.5em;
 237                 }
 238         }
 239 }
 240
 241 .modal-content-inner {
 242         position: relative;
 243         overflow: hidden auto;
 244         flex: 1 1 auto;
 245         padding-block: 0;
 246         padding-inline: rem(30);
 247         background: var(--modal-background-color) no-repeat;
 248
 249         & > p:first-child {
 250                 margin-block-start: 0;
 251         }
 252
 253         & > p:last-child {
 254                 margin-block-end: 0;
 255         }
 256 }
 257
 258 // adaptation for labels
 259 $label-shorter-width: 10em !default;
 260
 261 .modal--shorter-labels .label {
 262         inline-size: var(--label-shorter-width, $label-shorter-width);
 263 }
 264
 265 @include media('<=small') {
 266         .modal--shorter-labels .flex-column .label {
 267                 inline-size: 100%;
 268         }
 269 }
 270
 271 // modal with title visually hidden
 272 .modal-header--no-title {
 273         padding-block-start: rem(20);
 274 }
 275
 276 @include media('height<=#{$breakpoint-low-height-modal}') {
 277         .modal {
 278                 max-block-size: $modal-full-dimension;
 279         }
 280
 281         .modal-footer {
 282                 padding-block-end: rem(10);
 283         }
 284
 285         .modal-header {
 286                 padding-block: rem(10) rem(5);
 287         }
 288 }
 289
 290 // small viewports
 291 @include media('<=#{$modal-breakpoint-width}') {
 292         .modal:not(.modal--tiny) {
 293                 margin: 1%;
 294                 min-inline-size: 0;
 295                 inline-size: 98%;
 296                 max-inline-size: 98%;
 297                 max-block-size: 98%;
 298                 align-self: center;
 299         }
 300
 301         .modal--tiny {
 302                 max-inline-size: 95%;
 303                 max-block-size: 95%;
 304         }
 305 }
 306
 307 @include media('>xlarge') {
 308         .modal--full {
 309                 max-inline-size: $modal-full-max-width;
 310                 margin-inline: auto;
 311         }
 312 }