noctemyth 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/noctemyth-skelton.css +3126 -5336
- package/dist/css/noctemyth-skelton.css.map +1 -1
- package/dist/css/noctemyth-skelton.min.css +3126 -5336
- package/dist/css/noctemyth-skelton.min.css.map +1 -1
- package/dist/css/noctemyth-utilities.css +38455 -77487
- package/dist/css/noctemyth-utilities.css.map +1 -1
- package/dist/css/noctemyth-utilities.min.css +38455 -77487
- package/dist/css/noctemyth-utilities.min.css.map +1 -1
- package/dist/css/noctemyth.css +22250 -37070
- package/dist/css/noctemyth.css.map +1 -1
- package/dist/css/noctemyth.min.css +5326 -22994
- package/dist/css/noctemyth.min.css.map +1 -1
- package/package.json +8 -8
- package/src/backgrounds/dot.scss +39 -15
- package/src/backgrounds/gingham.scss +35 -18
- package/src/backgrounds/rhombus.scss +58 -19
- package/src/backgrounds/stripe.scss +30 -9
- package/src/backgrounds/zigzag.scss +43 -18
- package/src/base/dub.scss +15 -2
- package/src/base/element.scss +1 -1
- package/src/components/accordion.scss +254 -88
- package/src/components/badge.scss +215 -63
- package/src/components/blockquote.scss +74 -25
- package/src/components/breadcrumbs.scss +66 -15
- package/src/components/button.scss +204 -76
- package/src/components/card.scss +204 -47
- package/src/components/dialogue.scss +209 -140
- package/src/components/div.scss +1 -1
- package/src/components/footer.scss +28 -5
- package/src/components/hamburger.scss +89 -50
- package/src/components/header.scss +71 -5
- package/src/components/heading.scss +6 -6
- package/src/components/image.scss +1 -0
- package/src/components/input.scss +141 -69
- package/src/components/label.scss +51 -3
- package/src/components/link.scss +72 -9
- package/src/components/list.scss +2 -2
- package/src/components/loader.scss +18 -7
- package/src/components/main.scss +1 -1
- package/src/components/message.scss +142 -23
- package/src/components/modal.scss +26 -7
- package/src/components/nav.scss +655 -279
- package/src/components/paragraph.scss +1 -1
- package/src/components/progress.scss +40 -15
- package/src/components/section.scss +1 -1
- package/src/components/span.scss +1 -1
- package/src/css-variables/color.scss +582 -465
- package/src/css-variables/components/dialogue.scss +2 -2
- package/src/css-variables/miscellaneous.scss +1 -1
- package/src/functions/color.scss +13 -0
- package/src/functions/index.scss +1 -0
- package/src/functions/string.scss +12 -0
- package/src/layouts/centering.scss +1 -1
- package/src/layouts/columns.scss +3 -2
- package/src/layouts/container.scss +1 -1
- package/src/mixins/color.scss +0 -32
- package/src/mixins/element.scss +2 -2
- package/src/mixins/responsive.scss +2 -1
- package/src/utilities/color.scss +2 -6
- package/src/variables/color.scss +949 -909
- package/src/variables/components/dialogue.scss +2 -2
- package/src/variables/miscellaneous.scss +1 -1
package/src/components/link.scss
CHANGED
|
@@ -2,27 +2,90 @@
|
|
|
2
2
|
@use "../variables/index.scss" as variables;
|
|
3
3
|
@use "../mixins/index.scss" as mixins;
|
|
4
4
|
|
|
5
|
-
.link {
|
|
5
|
+
:where(.link) {
|
|
6
|
+
--#{variables.$prefix}link-color-fore: var(
|
|
7
|
+
--#{variables.$prefix}color-default-link-fore,
|
|
8
|
+
var(--#{variables.$prefix}color-default-fore)
|
|
9
|
+
);
|
|
10
|
+
--#{variables.$prefix}link-color-visited-fore: var(
|
|
11
|
+
--#{variables.$prefix}color-default-link-visited-fore,
|
|
12
|
+
var(--#{variables.$prefix}color-default-visited-fore)
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
--#{variables.$prefix}link-color-selection-fore: var(
|
|
16
|
+
--#{variables.$prefix}color-default-link-selection-fore,
|
|
17
|
+
var(--#{variables.$prefix}color-default-selection-fore)
|
|
18
|
+
);
|
|
19
|
+
--#{variables.$prefix}link-color-selection-back: var(
|
|
20
|
+
--#{variables.$prefix}color-default-link-selection-back,
|
|
21
|
+
var(--#{variables.$prefix}color-default-selection-back)
|
|
22
|
+
);
|
|
23
|
+
|
|
6
24
|
@include mixins.element();
|
|
7
|
-
color: var(--#{variables.$prefix}color-
|
|
8
|
-
text-decoration:
|
|
25
|
+
color: var(--#{variables.$prefix}link-color-fore);
|
|
26
|
+
text-decoration: none;
|
|
27
|
+
touch-action: manipulation;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
|
|
30
|
+
&::selection {
|
|
31
|
+
color: var(--#{variables.$prefix}link-color-selection-fore);
|
|
32
|
+
background-color: var(--#{variables.$prefix}link-color-selection-back);
|
|
33
|
+
}
|
|
34
|
+
|
|
9
35
|
&:hover {
|
|
10
|
-
text-decoration:
|
|
36
|
+
text-decoration: underline;
|
|
11
37
|
}
|
|
38
|
+
|
|
12
39
|
:focus:not(:focus-visible) {
|
|
13
40
|
outline: none;
|
|
14
41
|
}
|
|
42
|
+
|
|
15
43
|
&:visited {
|
|
16
|
-
color: var(--#{variables.$prefix}color-
|
|
44
|
+
color: var(--#{variables.$prefix}link-color-visited-fore);
|
|
17
45
|
}
|
|
46
|
+
|
|
18
47
|
@if (not variables.$is-skelton) {
|
|
19
48
|
@each $color in variables.$colors {
|
|
20
49
|
$colorName: map.get($color, "name");
|
|
21
50
|
&.is-#{$colorName} {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
51
|
+
--#{variables.$prefix}link-color-fore: var(
|
|
52
|
+
--#{variables.$prefix}color-#{$colorName}-link-fore,
|
|
53
|
+
var(--#{variables.$prefix}color-#{$colorName}-fore)
|
|
54
|
+
);
|
|
55
|
+
--#{variables.$prefix}link-color-visited-fore: var(
|
|
56
|
+
--#{variables.$prefix}color-#{$colorName}-link-visited-fore,
|
|
57
|
+
var(--#{variables.$prefix}color-#{$colorName}-visited-fore)
|
|
58
|
+
);
|
|
59
|
+
--#{variables.$prefix}link-color-selection-fore: var(
|
|
60
|
+
--#{variables.$prefix}color-#{$colorName}-link-selection-fore,
|
|
61
|
+
var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
|
|
62
|
+
);
|
|
63
|
+
--#{variables.$prefix}link-color-selection-back: var(
|
|
64
|
+
--#{variables.$prefix}color-#{$colorName}-link-selection-back,
|
|
65
|
+
var(--#{variables.$prefix}color-#{$colorName}-selection-back)
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@each $semanticColor in variables.$semanticColors {
|
|
71
|
+
$colorName: map.get($semanticColor, "name");
|
|
72
|
+
&.is-#{$colorName} {
|
|
73
|
+
--#{variables.$prefix}link-color-fore: var(
|
|
74
|
+
--#{variables.$prefix}color-#{$colorName}-link-fore,
|
|
75
|
+
var(--#{variables.$prefix}color-#{$colorName}-fore)
|
|
76
|
+
);
|
|
77
|
+
--#{variables.$prefix}link-color-visited-fore: var(
|
|
78
|
+
--#{variables.$prefix}color-#{$colorName}-link-visited-fore,
|
|
79
|
+
var(--#{variables.$prefix}color-#{$colorName}-visited-fore)
|
|
80
|
+
);
|
|
81
|
+
--#{variables.$prefix}link-color-selection-fore: var(
|
|
82
|
+
--#{variables.$prefix}color-#{$colorName}-link-selection-fore,
|
|
83
|
+
var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
|
|
84
|
+
);
|
|
85
|
+
--#{variables.$prefix}link-color-selection-back: var(
|
|
86
|
+
--#{variables.$prefix}color-#{$colorName}-link-selection-back,
|
|
87
|
+
var(--#{variables.$prefix}color-#{$colorName}-selection-back)
|
|
88
|
+
);
|
|
26
89
|
}
|
|
27
90
|
}
|
|
28
91
|
}
|
package/src/components/list.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@use "../mixins/index.scss" as mixins;
|
|
2
2
|
|
|
3
|
-
.list {
|
|
3
|
+
:where(.list) {
|
|
4
4
|
@include mixins.element();
|
|
5
5
|
display: block;
|
|
6
6
|
list-style: none;
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
&.is-style-disc {
|
|
11
11
|
list-style: disc;
|
|
12
12
|
}
|
|
13
|
-
.list-item {
|
|
13
|
+
> :where(.list-item) {
|
|
14
14
|
display: list-item;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
@@ -2,7 +2,11 @@
|
|
|
2
2
|
@use "../variables/index.scss" as variables;
|
|
3
3
|
@use "../mixins/index.scss" as mixins;
|
|
4
4
|
|
|
5
|
-
.loader {
|
|
5
|
+
:where(.loader) {
|
|
6
|
+
--#{variables.$prefix}loader-color-fore: var(
|
|
7
|
+
--#{variables.$prefix}color-default-loader-fore
|
|
8
|
+
);
|
|
9
|
+
|
|
6
10
|
@include mixins.element();
|
|
7
11
|
@include mixins.animation() {
|
|
8
12
|
animation-iteration-count: infinite;
|
|
@@ -10,11 +14,9 @@
|
|
|
10
14
|
animation-timing-function: linear;
|
|
11
15
|
aspect-ratio: 1;
|
|
12
16
|
border-radius: 50%;
|
|
13
|
-
background: var(--#{variables.$prefix}color-
|
|
14
|
-
mask:
|
|
15
|
-
|
|
16
|
-
var(--#{variables.$prefix}color-default-back)
|
|
17
|
-
),
|
|
17
|
+
background: var(--#{variables.$prefix}loader-color-fore);
|
|
18
|
+
mask:
|
|
19
|
+
conic-gradient(#0000 10%, var(--#{variables.$prefix}color-default-back)),
|
|
18
20
|
linear-gradient(var(--#{variables.$prefix}color-default-back) 0 0)
|
|
19
21
|
content-box;
|
|
20
22
|
mask-composite: subtract;
|
|
@@ -56,7 +58,16 @@
|
|
|
56
58
|
@each $color in variables.$colors {
|
|
57
59
|
$colorName: map.get($color, "name");
|
|
58
60
|
&.is-#{$colorName} {
|
|
59
|
-
|
|
61
|
+
--#{variables.$prefix}loader-color-fore: var(
|
|
62
|
+
--#{variables.$prefix}color-#{$colorName}-loader-fore
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@each $semanticColor in variables.$semanticColors {
|
|
68
|
+
$colorName: map.get($semanticColor, "name");
|
|
69
|
+
&.is-#{$colorName} {
|
|
70
|
+
--#{variables.$prefix}loader-color-fore: var(
|
|
60
71
|
--#{variables.$prefix}color-#{$colorName}-loader-fore
|
|
61
72
|
);
|
|
62
73
|
}
|
package/src/components/main.scss
CHANGED
|
@@ -2,51 +2,170 @@
|
|
|
2
2
|
@use "../variables/index.scss" as variables;
|
|
3
3
|
@use "../mixins/index.scss" as mixins;
|
|
4
4
|
|
|
5
|
-
.message {
|
|
5
|
+
:where(.message) {
|
|
6
|
+
//#region local css variables
|
|
7
|
+
--#{variables.$prefix}message-color-fore: var(
|
|
8
|
+
--#{variables.$prefix}color-default-message-fore
|
|
9
|
+
);
|
|
10
|
+
--#{variables.$prefix}message-color-back: var(
|
|
11
|
+
--#{variables.$prefix}color-default-message-back
|
|
12
|
+
);
|
|
13
|
+
--#{variables.$prefix}message-color-border: var(
|
|
14
|
+
--#{variables.$prefix}color-default-message-border
|
|
15
|
+
);
|
|
16
|
+
--#{variables.$prefix}message-color-selection-fore: var(
|
|
17
|
+
--#{variables.$prefix}color-default-message-selection-fore,
|
|
18
|
+
var(--#{variables.$prefix}color-default-selection-fore)
|
|
19
|
+
);
|
|
20
|
+
--#{variables.$prefix}message-color-selection-back: var(
|
|
21
|
+
--#{variables.$prefix}color-default-message-selection-back,
|
|
22
|
+
var(--#{variables.$prefix}color-default-selection-back)
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
--#{variables.$prefix}message-header-color-fore: var(
|
|
26
|
+
--#{variables.$prefix}color-default-message-header-fore
|
|
27
|
+
);
|
|
28
|
+
--#{variables.$prefix}message-header-color-back: var(
|
|
29
|
+
--#{variables.$prefix}color-default-message-header-back
|
|
30
|
+
);
|
|
31
|
+
--#{variables.$prefix}message-header-color-border: var(
|
|
32
|
+
--#{variables.$prefix}color-default-message-header-border
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
--#{variables.$prefix}message-body-color-fore: var(
|
|
36
|
+
--#{variables.$prefix}color-default-message-body-fore
|
|
37
|
+
);
|
|
38
|
+
--#{variables.$prefix}message-body-color-back: var(
|
|
39
|
+
--#{variables.$prefix}color-default-message-body-back
|
|
40
|
+
);
|
|
41
|
+
--#{variables.$prefix}message-body-color-border: var(
|
|
42
|
+
--#{variables.$prefix}color-default-message-body-border
|
|
43
|
+
);
|
|
44
|
+
//#endregion local css variables
|
|
45
|
+
|
|
6
46
|
@include mixins.element();
|
|
7
47
|
display: block;
|
|
8
|
-
background-color: var(--#{variables.$prefix}color-
|
|
9
|
-
border-color: var(--#{variables.$prefix}color-
|
|
48
|
+
background-color: var(--#{variables.$prefix}message-color-back);
|
|
49
|
+
border-color: var(--#{variables.$prefix}message-color-border);
|
|
10
50
|
border-radius: var(--#{variables.$prefix}border-radius-medium);
|
|
11
51
|
border-style: solid;
|
|
12
52
|
border-width: var(--#{variables.$prefix}border-width-thin);
|
|
13
|
-
color: var(--#{variables.$prefix}color-
|
|
14
|
-
|
|
53
|
+
color: var(--#{variables.$prefix}color-message-fore);
|
|
54
|
+
|
|
55
|
+
&::selection {
|
|
56
|
+
color: var(--#{variables.$prefix}message-color-selection-fore);
|
|
57
|
+
background-color: var(--#{variables.$prefix}message-color-selection-back);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
> :where(.message-header) {
|
|
15
61
|
@include mixins.element();
|
|
16
|
-
background-color: var(--#{variables.$prefix}
|
|
17
|
-
border-radius: var(--#{variables.$prefix}border-radius-medium)
|
|
18
|
-
|
|
62
|
+
background-color: var(--#{variables.$prefix}message-header-color-back);
|
|
63
|
+
border-radius: var(--#{variables.$prefix}border-radius-medium)
|
|
64
|
+
var(--#{variables.$prefix}border-radius-medium) 0 0;
|
|
65
|
+
color: var(--#{variables.$prefix}message-header-color-fore);
|
|
19
66
|
display: block;
|
|
20
67
|
font-size: var(--#{variables.$prefix}font-size-medium);
|
|
21
68
|
font-weight: var(--#{variables.$prefix}font-weight-semibold);
|
|
22
69
|
padding: 0.5rem;
|
|
23
70
|
}
|
|
24
|
-
|
|
71
|
+
> :where(.message-body) {
|
|
25
72
|
@include mixins.element();
|
|
26
|
-
background-color: var(--#{variables.$prefix}
|
|
27
|
-
border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
|
|
28
|
-
|
|
73
|
+
background-color: var(--#{variables.$prefix}message-body-color-back);
|
|
74
|
+
border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
|
|
75
|
+
var(--#{variables.$prefix}border-radius-medium);
|
|
76
|
+
color: var(--#{variables.$prefix}message-body-color-fore);
|
|
29
77
|
display: block;
|
|
30
78
|
padding: 0.5rem;
|
|
79
|
+
|
|
31
80
|
&:first-child {
|
|
32
81
|
border-radius: var(--#{variables.$prefix}border-radius-medium);
|
|
33
82
|
}
|
|
34
83
|
}
|
|
84
|
+
|
|
35
85
|
@if (not variables.$is-skelton) {
|
|
36
86
|
@each $color in variables.$colors {
|
|
37
87
|
$colorName: map.get($color, "name");
|
|
38
88
|
&.is-#{$colorName} {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
89
|
+
--#{variables.$prefix}message-color-fore: var(
|
|
90
|
+
--#{variables.$prefix}color-#{$colorName}-message-fore
|
|
91
|
+
);
|
|
92
|
+
--#{variables.$prefix}message-color-back: var(
|
|
93
|
+
--#{variables.$prefix}color-#{$colorName}-message-back
|
|
94
|
+
);
|
|
95
|
+
--#{variables.$prefix}message-color-border: var(
|
|
96
|
+
--#{variables.$prefix}color-#{$colorName}-message-border
|
|
97
|
+
);
|
|
98
|
+
--#{variables.$prefix}message-color-selection-fore: var(
|
|
99
|
+
--#{variables.$prefix}color-#{$colorName}-message-selection-fore,
|
|
100
|
+
var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
|
|
101
|
+
);
|
|
102
|
+
--#{variables.$prefix}message-color-selection-back: var(
|
|
103
|
+
--#{variables.$prefix}color-#{$colorName}-message-selection-back,
|
|
104
|
+
var(--#{variables.$prefix}color-#{$colorName}-selection-back)
|
|
105
|
+
);
|
|
106
|
+
|
|
107
|
+
--#{variables.$prefix}message-header-color-fore: var(
|
|
108
|
+
--#{variables.$prefix}color-#{$colorName}-message-header-fore
|
|
109
|
+
);
|
|
110
|
+
--#{variables.$prefix}message-header-color-back: var(
|
|
111
|
+
--#{variables.$prefix}color-#{$colorName}-message-header-back
|
|
112
|
+
);
|
|
113
|
+
--#{variables.$prefix}message-header-color-border: var(
|
|
114
|
+
--#{variables.$prefix}color-#{$colorName}-message-header-border
|
|
115
|
+
);
|
|
116
|
+
|
|
117
|
+
--#{variables.$prefix}message-body-color-fore: var(
|
|
118
|
+
--#{variables.$prefix}color-#{$colorName}-message-body-fore
|
|
119
|
+
);
|
|
120
|
+
--#{variables.$prefix}message-body-color-back: var(
|
|
121
|
+
--#{variables.$prefix}color-#{$colorName}-message-body-back
|
|
122
|
+
);
|
|
123
|
+
--#{variables.$prefix}message-body-color-border: var(
|
|
124
|
+
--#{variables.$prefix}color-#{$colorName}-message-body-border
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
@each $semanticColor in variables.$semanticColors {
|
|
130
|
+
$colorName: map.get($semanticColor, "name");
|
|
131
|
+
&.is-#{$colorName} {
|
|
132
|
+
--#{variables.$prefix}message-color-fore: var(
|
|
133
|
+
--#{variables.$prefix}color-#{$colorName}-message-fore
|
|
134
|
+
);
|
|
135
|
+
--#{variables.$prefix}message-color-back: var(
|
|
136
|
+
--#{variables.$prefix}color-#{$colorName}-message-back
|
|
137
|
+
);
|
|
138
|
+
--#{variables.$prefix}message-color-border: var(
|
|
139
|
+
--#{variables.$prefix}color-#{$colorName}-message-border
|
|
140
|
+
);
|
|
141
|
+
--#{variables.$prefix}message-color-selection-fore: var(
|
|
142
|
+
--#{variables.$prefix}color-#{$colorName}-message-selection-fore,
|
|
143
|
+
var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
|
|
144
|
+
);
|
|
145
|
+
--#{variables.$prefix}message-color-selection-back: var(
|
|
146
|
+
--#{variables.$prefix}color-#{$colorName}-message-selection-back,
|
|
147
|
+
var(--#{variables.$prefix}color-#{$colorName}-selection-back)
|
|
148
|
+
);
|
|
149
|
+
|
|
150
|
+
--#{variables.$prefix}message-header-color-fore: var(
|
|
151
|
+
--#{variables.$prefix}color-#{$colorName}-message-header-fore
|
|
152
|
+
);
|
|
153
|
+
--#{variables.$prefix}message-header-color-back: var(
|
|
154
|
+
--#{variables.$prefix}color-#{$colorName}-message-header-back
|
|
155
|
+
);
|
|
156
|
+
--#{variables.$prefix}message-header-color-border: var(
|
|
157
|
+
--#{variables.$prefix}color-#{$colorName}-message-header-border
|
|
158
|
+
);
|
|
159
|
+
|
|
160
|
+
--#{variables.$prefix}message-body-color-fore: var(
|
|
161
|
+
--#{variables.$prefix}color-#{$colorName}-message-body-fore
|
|
162
|
+
);
|
|
163
|
+
--#{variables.$prefix}message-body-color-back: var(
|
|
164
|
+
--#{variables.$prefix}color-#{$colorName}-message-body-back
|
|
165
|
+
);
|
|
166
|
+
--#{variables.$prefix}message-body-color-border: var(
|
|
167
|
+
--#{variables.$prefix}color-#{$colorName}-message-body-border
|
|
168
|
+
);
|
|
50
169
|
}
|
|
51
170
|
}
|
|
52
171
|
}
|
|
@@ -2,24 +2,32 @@
|
|
|
2
2
|
@use "../variables/index.scss" as variables;
|
|
3
3
|
@use "../mixins/index.scss" as mixins;
|
|
4
4
|
|
|
5
|
-
.modal {
|
|
5
|
+
:where(.modal) {
|
|
6
|
+
--#{variables.$prefix}modal-color-back: var(
|
|
7
|
+
--#{variables.$prefix}color-default-back
|
|
8
|
+
);
|
|
9
|
+
|
|
6
10
|
@include mixins.element();
|
|
7
11
|
align-items: center;
|
|
8
|
-
background-color: oklch(
|
|
12
|
+
background-color: oklch(
|
|
13
|
+
from var(--#{variables.$prefix}modal-color-back) l c h / 0.75
|
|
14
|
+
);
|
|
15
|
+
border: none;
|
|
9
16
|
display: none;
|
|
10
17
|
flex-direction: column;
|
|
11
|
-
height:
|
|
18
|
+
height: 100%;
|
|
12
19
|
justify-content: center;
|
|
13
20
|
left: 0;
|
|
14
21
|
overflow: hidden;
|
|
15
22
|
position: fixed;
|
|
16
23
|
top: 0;
|
|
17
|
-
width:
|
|
24
|
+
width: 100%;
|
|
18
25
|
z-index: var(--#{variables.$prefix}z-index-modal);
|
|
26
|
+
overscroll-behavior-block: contain;
|
|
19
27
|
&.is-active {
|
|
20
28
|
display: flex;
|
|
21
29
|
}
|
|
22
|
-
|
|
30
|
+
> .modal-content {
|
|
23
31
|
@include mixins.element();
|
|
24
32
|
max-height: 100%;
|
|
25
33
|
max-width: 100%;
|
|
@@ -32,9 +40,20 @@
|
|
|
32
40
|
}
|
|
33
41
|
@if (not variables.$is-skelton) {
|
|
34
42
|
@each $color in variables.$colors {
|
|
35
|
-
|
|
43
|
+
$colorName: map.get($color, "name");
|
|
44
|
+
&.is-#{$colorName} {
|
|
45
|
+
--#{variables.$prefix}modal-color-back: var(
|
|
46
|
+
--#{variables.$prefix}color-#{$colorName}-back
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@each $semanticColor in variables.$semanticColors {
|
|
52
|
+
$colorName: map.get($semanticColor, "name");
|
|
36
53
|
&.is-#{$colorName} {
|
|
37
|
-
|
|
54
|
+
--#{variables.$prefix}modal-color-back: var(
|
|
55
|
+
--#{variables.$prefix}color-#{$colorName}-back
|
|
56
|
+
);
|
|
38
57
|
}
|
|
39
58
|
}
|
|
40
59
|
}
|