1 | @import "mixins/settings.global";
|
2 | @import "mixins/objects.grid";
|
3 | @import "mixins/utilities.alignment";
|
4 |
|
5 | .o-modal {
|
6 | display: block;
|
7 | position: fixed;
|
8 | top: 50%;
|
9 | left: 50%;
|
10 | width: $modal-width;
|
11 | transform: translate(-50%, -50%);
|
12 | border: $modal-border;
|
13 | border-radius: $modal-border-radius;
|
14 | background-color: $modal-background-color;
|
15 | overflow: hidden;
|
16 | z-index: $modal-z-index;
|
17 |
|
18 | .c-card {
|
19 | background-color: transparent;
|
20 | box-shadow: none;
|
21 | }
|
22 |
|
23 | .c-card__body {
|
24 | position: relative;
|
25 | }
|
26 | }
|
27 |
|
28 | .o-modal--ghost {
|
29 | background-color: $modal-ghost-background-color;
|
30 | color: $modal-ghost-color;
|
31 |
|
32 | .c-heading {
|
33 | color: $modal-ghost-heading-color;
|
34 | }
|
35 | }
|
36 |
|
37 | .o-modal--full {
|
38 | top: 1em;
|
39 | left: 1em;
|
40 | width: calc(100% - 2em);
|
41 | height: calc(100% - 2em);
|
42 | transform: none;
|
43 |
|
44 | .c-card__body {
|
45 | position: absolute;
|
46 | top: 2.5em;
|
47 | bottom: 3.5em;
|
48 | width: 100%;
|
49 | overflow-x: hidden;
|
50 | overflow-y: auto;
|
51 | }
|
52 |
|
53 | .c-card__footer {
|
54 | position: absolute;
|
55 | bottom: 0;
|
56 | width: 100%;
|
57 | }
|
58 | }
|