@stackoverflow/stacks 3.0.0-beta.7 → 3.0.0-beta.8
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.s-input-icon {
|
|
2
2
|
--_ii-fc: unset;
|
|
3
|
-
--_ii-r:
|
|
3
|
+
--_ii-r: calc((var(--su-static8) + var(--su-static2))); // 10px
|
|
4
4
|
|
|
5
5
|
// MODIFIERS
|
|
6
6
|
.has-error & {
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
--_ii-r: auto;
|
|
33
33
|
|
|
34
34
|
color: var(--black-400);
|
|
35
|
-
left:
|
|
35
|
+
left: calc((var(--su-static8) + var(--su-static2))); // 10px
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
color: var(--_ii-fc);
|
|
39
39
|
right: var(--_ii-r);
|
|
40
40
|
|
|
41
|
-
margin-top: calc((var(--su-static8) + var(--su-
|
|
41
|
+
margin-top: calc((var(--su-static8) + var(--su-static2)) * -1); // -10px - Half the icon's height at 20px for centering
|
|
42
42
|
pointer-events: none;
|
|
43
43
|
position: absolute;
|
|
44
44
|
top: 50%;
|
|
@@ -3,18 +3,17 @@
|
|
|
3
3
|
--_mo-bg: fade(.set-black()[600], 50%); // Background remains fixed
|
|
4
4
|
--_mo-hmx: unset;
|
|
5
5
|
--_mo-wmx: unset;
|
|
6
|
-
--_mo-close-t: var(--su8);
|
|
7
6
|
--_mo-dialog-bg: var(--white);
|
|
8
7
|
--_mo-dialog-pt: var(--su24);
|
|
9
|
-
--_mo-
|
|
8
|
+
--_mo-dialog-ou: 0;
|
|
10
9
|
|
|
11
10
|
// CONTEXTUAL STYLES
|
|
12
11
|
.dark-mode({
|
|
13
|
-
--_mo-dialog-bg: var(--black-
|
|
12
|
+
--_mo-dialog-bg: var(--black-100);
|
|
14
13
|
});
|
|
15
14
|
|
|
16
|
-
.highcontrast-
|
|
17
|
-
--_mo-dialog-
|
|
15
|
+
.highcontrast-mode({
|
|
16
|
+
--_mo-dialog-ou: var(--su2) solid var(--black-500);
|
|
18
17
|
});
|
|
19
18
|
|
|
20
19
|
&[aria-hidden="false"] {
|
|
@@ -46,7 +45,6 @@
|
|
|
46
45
|
&.has-danger,
|
|
47
46
|
&&__danger {
|
|
48
47
|
--_mo-bg: darken(fade(.set-red()[600], 50%), 18%);
|
|
49
|
-
--_mo-header-fc: var(--red-500);
|
|
50
48
|
}
|
|
51
49
|
|
|
52
50
|
// CHILD ELEMENTS
|
|
@@ -61,16 +59,17 @@
|
|
|
61
59
|
margin: 0 !important;
|
|
62
60
|
}
|
|
63
61
|
|
|
64
|
-
padding: var(--
|
|
62
|
+
padding: var(--su6) !important; // [1]
|
|
65
63
|
position: absolute !important; // [1]
|
|
66
|
-
right: var(--
|
|
67
|
-
top: var(--
|
|
64
|
+
right: var(--su16);
|
|
65
|
+
top: var(--su16);
|
|
68
66
|
}
|
|
69
67
|
|
|
70
68
|
& &--dialog {
|
|
71
69
|
padding: var(--_mo-dialog-pt) var(--su24) var(--su24);
|
|
72
70
|
|
|
73
71
|
@scrollbar-styles();
|
|
72
|
+
position: relative;
|
|
74
73
|
backface-visibility: hidden;
|
|
75
74
|
background-color: var(--_mo-dialog-bg);
|
|
76
75
|
border-radius: var(--br-md);
|
|
@@ -83,6 +82,7 @@
|
|
|
83
82
|
transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s; // Transition out
|
|
84
83
|
visibility: hidden;
|
|
85
84
|
z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
|
|
85
|
+
outline: var(--_mo-dialog-ou);
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
& &--footer {
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
& &--header {
|
|
93
|
-
color: var(--
|
|
93
|
+
color: var(--fc-dark);
|
|
94
94
|
|
|
95
95
|
font-size: var(--fs-headline1);
|
|
96
96
|
font-weight: normal;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
.s-select {
|
|
2
|
-
--_se-arrow-
|
|
3
|
-
--_se-arrow-size: var(--su-static4); // Constant
|
|
2
|
+
--_se-arrow-fc: currentColor;
|
|
4
3
|
--_se-select-bc: var(--bc-darker);
|
|
5
4
|
--_se-select-bg: var(--white);
|
|
6
5
|
--_se-select-br: var(--br-md);
|
|
7
6
|
--_se-select-fc: var(--black);
|
|
8
7
|
--_se-select-px: 0.7em;
|
|
9
|
-
--_se-select-py:
|
|
8
|
+
--_se-select-py: var(--su-static8);
|
|
10
9
|
--_se-select-fs: var(--fs-body1);
|
|
10
|
+
--_se-select-lh: var(--lh-base);
|
|
11
11
|
|
|
12
12
|
// CONTEXTUAL STYLES
|
|
13
13
|
@supports (-webkit-overflow-scrolling: touch) {
|
|
@@ -23,30 +23,15 @@
|
|
|
23
23
|
|
|
24
24
|
.validation-states(se-select);
|
|
25
25
|
|
|
26
|
-
.is-disabled & {
|
|
27
|
-
--_se-arrow-bc: var(--bc-dark) transparent;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
26
|
&&__sm {
|
|
31
27
|
.size-styles(sm; se-select; @styles: fs);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
&&__md {
|
|
36
|
-
.size-styles(md; se-select; @styles: br, fs);
|
|
37
|
-
--_se-select-py: 0.5em;
|
|
28
|
+
--_se-select-lh: var(--lh-sm);
|
|
29
|
+
--_se-select-py: calc(var(--su6) - var(--su-static1) / 2);
|
|
38
30
|
}
|
|
39
31
|
|
|
40
32
|
&&__lg {
|
|
41
|
-
.size-styles(
|
|
42
|
-
--_se-select-
|
|
43
|
-
--_se-select-py: 0.45em;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&&__xl {
|
|
47
|
-
.size-styles(xl; se-select; @styles: br, fs);
|
|
48
|
-
--_se-select-px: 0.5em;
|
|
49
|
-
--_se-select-py: 0.4em;
|
|
33
|
+
.size-styles(md; se-select; @styles: fs);
|
|
34
|
+
--_se-select-lh: var(--lh-lg);
|
|
50
35
|
}
|
|
51
36
|
|
|
52
37
|
// CHILD ELEMENTS
|
|
@@ -55,26 +40,29 @@
|
|
|
55
40
|
.webkit-autofill();
|
|
56
41
|
}
|
|
57
42
|
|
|
58
|
-
&:
|
|
59
|
-
|
|
60
|
-
border-color: var(--_se-arrow-bc);
|
|
61
|
-
border-style: solid;
|
|
62
|
-
border-width: var(--_se-arrow-size);
|
|
43
|
+
&:after { // Chevron16UpDown icon
|
|
44
|
+
background-color: currentColor;
|
|
63
45
|
content: "";
|
|
46
|
+
height: var(--su-static16);
|
|
47
|
+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13.06 10 8 15.06 2.94 10 4 8.94l.53.53L8 12.94l3.47-3.47.53-.53zm0-4L12 7.06l-.53-.53L8 3.06 4.53 6.53 4 7.06 2.94 6 8 .94z'/%3E%3C/svg%3E");
|
|
48
|
+
mask-repeat: no-repeat;
|
|
49
|
+
mask-position: center;
|
|
50
|
+
mask-size: contain;
|
|
64
51
|
pointer-events: none;
|
|
65
52
|
position: absolute;
|
|
66
|
-
right: calc(var(--
|
|
53
|
+
right: calc(var(--su32) - var(--su-static24));
|
|
54
|
+
top: 50%;
|
|
55
|
+
transform: translateY(-50%);
|
|
56
|
+
width: var(--su-static16);
|
|
67
57
|
z-index: var(--zi-selected);
|
|
68
58
|
}
|
|
69
59
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
top: calc(50% + var(--su-static1));
|
|
73
|
-
}
|
|
60
|
+
.is-disabled & {
|
|
61
|
+
--_se-arrow-fc: var(--bc-dark);
|
|
74
62
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
63
|
+
&:after {
|
|
64
|
+
background-color: var(--_se-arrow-fc);
|
|
65
|
+
}
|
|
78
66
|
}
|
|
79
67
|
|
|
80
68
|
> select { // Menu
|
|
@@ -82,7 +70,8 @@
|
|
|
82
70
|
fieldset[disabled] &,
|
|
83
71
|
&[disabled] {
|
|
84
72
|
cursor: not-allowed;
|
|
85
|
-
|
|
73
|
+
--_se-select-fc: var(--black-300);
|
|
74
|
+
--_se-select-bg: var(--black-100);
|
|
86
75
|
}
|
|
87
76
|
|
|
88
77
|
&[readonly],
|
|
@@ -118,7 +107,7 @@
|
|
|
118
107
|
appearance: none;
|
|
119
108
|
font-family: inherit;
|
|
120
109
|
height: 100%; // Fill the height of its parent
|
|
121
|
-
line-height: var(--lh
|
|
110
|
+
line-height: var(--_se-select-lh);
|
|
122
111
|
outline: 0;
|
|
123
112
|
padding-right: var(--su32);
|
|
124
113
|
position: relative; // This prevents Firefox from requiring a second click to select options
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackoverflow/stacks",
|
|
3
3
|
"description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
|
|
4
|
-
"version": "3.0.0-beta.
|
|
4
|
+
"version": "3.0.0-beta.8",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
7
7
|
"lib",
|