@stackoverflow/stacks 0.69.0 → 0.72.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/stacks.css +1895 -730
- package/dist/css/stacks.min.css +1 -1
- package/dist/js/stacks.js +80 -31
- package/dist/js/stacks.min.js +1 -1
- package/lib/css/atomic/_stacks-borders.less +18 -0
- package/lib/css/atomic/_stacks-flex.less +2 -2
- package/lib/css/atomic/_stacks-grid.less +1 -0
- package/lib/css/atomic/_stacks-misc.less +8 -4
- package/lib/css/atomic/_stacks-typography.less +1 -1
- package/lib/css/base/_stacks-configuration-dynamic.less +10 -43
- package/lib/css/components/_stacks-activity-indicator.less +26 -2
- package/lib/css/components/_stacks-avatars.less +9 -0
- package/lib/css/components/_stacks-badges.less +20 -9
- package/lib/css/components/_stacks-breadcrumbs.less +2 -0
- package/lib/css/components/_stacks-button-groups.less +11 -0
- package/lib/css/components/_stacks-buttons.less +143 -42
- package/lib/css/components/_stacks-cards.less +9 -13
- package/lib/css/components/_stacks-code-blocks.less +1 -1
- package/lib/css/components/_stacks-inputs.less +73 -9
- package/lib/css/components/_stacks-link-previews.less +10 -7
- package/lib/css/components/_stacks-links.less +29 -9
- package/lib/css/components/_stacks-menu.less +4 -4
- package/lib/css/components/_stacks-modals.less +1 -1
- package/lib/css/components/_stacks-navigation.less +43 -0
- package/lib/css/components/_stacks-notices.less +40 -3
- package/lib/css/components/_stacks-page-titles.less +1 -1
- package/lib/css/components/_stacks-pagination.less +4 -2
- package/lib/css/components/_stacks-popovers.less +22 -6
- package/lib/css/components/_stacks-post-summary.less +45 -1
- package/lib/css/components/_stacks-progress-bars.less +11 -3
- package/lib/css/components/_stacks-prose.less +18 -4
- package/lib/css/components/_stacks-tables.less +10 -6
- package/lib/css/components/_stacks-tags.less +18 -0
- package/lib/css/components/_stacks-toggle-switches.less +12 -0
- package/lib/css/components/_stacks-topbar.less +440 -0
- package/lib/css/components/_stacks-uploader.less +22 -0
- package/lib/css/components/_stacks-widget-static.less +15 -3
- package/lib/css/exports/_stacks-constants-colors.less +692 -220
- package/lib/css/exports/_stacks-constants-helpers.less +0 -2
- package/lib/css/exports/_stacks-mixins.less +26 -0
- package/lib/css/stacks-dynamic.less +0 -1
- package/lib/css/stacks-static.less +15 -0
- package/lib/ts/controllers/s-tooltip.ts +4 -0
- package/package.json +10 -10
|
@@ -21,38 +21,9 @@
|
|
|
21
21
|
@body-font-color: var(--theme-body-font-color);
|
|
22
22
|
@body-type-face: var(--theme-body-font-family);
|
|
23
23
|
@body-background: var(--white);
|
|
24
|
-
@body-site-width: 1060px;
|
|
25
|
-
|
|
26
|
-
// Links
|
|
27
|
-
@link-color: var(--theme-secondary-400);
|
|
28
|
-
@link-color-hover: var(--theme-secondary-350);
|
|
29
|
-
@link-color-visited: var(--theme-secondary-500);
|
|
30
|
-
|
|
31
|
-
// Button Default
|
|
32
|
-
@button-color: var(--theme-secondary-400);
|
|
33
|
-
@button-background-color: transparent;
|
|
34
|
-
@button-hover-color: var(--theme-secondary-500);
|
|
35
|
-
@button-hover-background-color: var(--theme-secondary-050);
|
|
36
|
-
@button-active-background-color: var(--theme-secondary-100);
|
|
37
|
-
@button-selected-color: var(--theme-secondary-900);
|
|
38
|
-
@button-selected-background-color: var(--theme-secondary-150);
|
|
39
|
-
|
|
40
|
-
// Button Filled
|
|
41
|
-
@button-filled-color: var(--theme-secondary-700);
|
|
42
|
-
@button-filled-background-color: var(--theme-secondary-050);
|
|
43
|
-
@button-filled-border-color: var(--theme-secondary-350);
|
|
44
|
-
@button-filled-hover-color: var(--theme-secondary-800);
|
|
45
|
-
@button-filled-hover-background-color: var(--theme-secondary-100);
|
|
46
|
-
@button-filled-active-background-color: var(--theme-secondary-150);
|
|
47
|
-
@button-filled-active-border-color: var(--theme-secondary-350);
|
|
48
|
-
@button-filled-selected-color: var(--theme-secondary-900);
|
|
49
|
-
@button-filled-selected-background-color: var(--theme-secondary-300);
|
|
50
|
-
@button-filled-selected-border-color: var(--theme-secondary-500);
|
|
51
|
-
|
|
52
|
-
// Button Outline
|
|
53
|
-
@button-outlined-border-color: var(--theme-secondary-300);
|
|
54
|
-
@button-outlined-selected-border-color: var(--theme-secondary-400);
|
|
24
|
+
@body-site-width: 1060px; // DEPRECATED will be removed in a future release
|
|
55
25
|
|
|
26
|
+
// DEPRECATED will be removed in a future release
|
|
56
27
|
// Button Muted
|
|
57
28
|
@button-muted-color: var(--black-500);
|
|
58
29
|
@button-muted-hover-color: var(--black-600);
|
|
@@ -61,10 +32,12 @@
|
|
|
61
32
|
@button-muted-selected-color: var(--black-700);
|
|
62
33
|
@button-muted-selected-background-color: var(--black-075);
|
|
63
34
|
|
|
35
|
+
// DEPRECATED will be removed in a future release
|
|
64
36
|
// Button Muted Outlined
|
|
65
37
|
@button-muted-outlined-border-color: var(--black-300);
|
|
66
38
|
@button-muted-outlined-selected-border-color: var(--black-400);
|
|
67
39
|
|
|
40
|
+
// DEPRECATED will be removed in a future release
|
|
68
41
|
// Button Muted Filled
|
|
69
42
|
@button-muted-filled-color: var(--black-700);
|
|
70
43
|
@button-muted-filled-background-color: var(--black-100);
|
|
@@ -74,6 +47,7 @@
|
|
|
74
47
|
@button-muted-filled-selected-color: var(--black-800);
|
|
75
48
|
@button-muted-filled-selected-background-color: var(--black-350);
|
|
76
49
|
|
|
50
|
+
// DEPRECATED will be removed in a future release
|
|
77
51
|
// Button Danger
|
|
78
52
|
@button-danger-color: var(--red-600);
|
|
79
53
|
@button-danger-hover-color: var(--red-700);
|
|
@@ -82,10 +56,12 @@
|
|
|
82
56
|
@button-danger-selected-color: var(--red-900);
|
|
83
57
|
@button-danger-selected-background-color: var(--red-200);
|
|
84
58
|
|
|
59
|
+
// DEPRECATED will be removed in a future release
|
|
85
60
|
// Button Danger Outlined
|
|
86
61
|
@button-danger-outlined-border-color: var(--red-500);
|
|
87
62
|
@button-danger-outlined-selected-border-color: var(--red-600);
|
|
88
63
|
|
|
64
|
+
// DEPRECATED will be removed in a future release
|
|
89
65
|
// Button Danger Filled
|
|
90
66
|
@button-danger-filled-color: @white;
|
|
91
67
|
@button-danger-filled-background-color: var(--red-500);
|
|
@@ -96,16 +72,7 @@
|
|
|
96
72
|
@button-danger-filled-selected-background-color: var(--red-800);
|
|
97
73
|
@button-danger-filled-number-color: var(--black-900);
|
|
98
74
|
|
|
99
|
-
//
|
|
100
|
-
@button-primary-color: @white;
|
|
101
|
-
@button-primary-background-color: var(--theme-secondary-400);
|
|
102
|
-
@button-primary-hover-color: @white;
|
|
103
|
-
@button-primary-hover-background-color: var(--theme-secondary-500);
|
|
104
|
-
@button-primary-active-background-color: var(--theme-secondary-700);
|
|
105
|
-
@button-primary-selected-color: var(--white);
|
|
106
|
-
@button-primary-selected-background-color: var(--theme-secondary-700);
|
|
107
|
-
@button-primary-number-color: var(--theme-secondary-900);
|
|
108
|
-
|
|
75
|
+
// DEPRECATED will be removed in a future release
|
|
109
76
|
// Tags
|
|
110
77
|
@tags-border: transparent;
|
|
111
78
|
@tags-background: var(--powder-100);
|
|
@@ -114,7 +81,7 @@
|
|
|
114
81
|
@tags-hover-background: var(--powder-200);
|
|
115
82
|
@tags-hover-color: var(--powder-800);
|
|
116
83
|
@tags-selected-border: transparent;
|
|
117
|
-
@tags-selected-background: var(--powder-
|
|
84
|
+
@tags-selected-background: var(--powder-300);
|
|
118
85
|
@tags-selected-color: var(--powder-900);
|
|
119
86
|
|
|
120
87
|
@tags-moderator-border: var(--red-100);
|
|
@@ -127,7 +94,7 @@
|
|
|
127
94
|
@tags-moderator-selected-background: var(--red-200);
|
|
128
95
|
@tags-moderator-selected-color: var(--red-800);
|
|
129
96
|
|
|
130
|
-
@tags-required-border: var(--
|
|
97
|
+
@tags-required-border: var(--bc-darker);
|
|
131
98
|
@tags-required-background: var(--black-075);
|
|
132
99
|
@tags-required-color: var(--black-700);
|
|
133
100
|
@tags-required-hover-border: var(--black-300);
|
|
@@ -13,9 +13,33 @@
|
|
|
13
13
|
|
|
14
14
|
.s-activity-indicator {
|
|
15
15
|
display: inline-block;
|
|
16
|
-
width: @su12;
|
|
16
|
+
min-width: @su12;
|
|
17
17
|
height: @su12;
|
|
18
|
+
padding-left: @su4;
|
|
19
|
+
padding-right: @su4;
|
|
20
|
+
line-height: 1.1; // Custom line-height to satisfy 1x screens
|
|
18
21
|
background-color: var(--theme-secondary-400);
|
|
19
22
|
box-shadow: 0 0 0 @su4 var(--focus-ring);
|
|
20
|
-
border-radius:
|
|
23
|
+
border-radius: 1000px;
|
|
24
|
+
font-size: @fs-fine;
|
|
25
|
+
font-weight: 600;
|
|
26
|
+
color: @white;
|
|
27
|
+
text-transform: uppercase;
|
|
28
|
+
|
|
29
|
+
.highcontrast-mode({ color: var(--white); });
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.s-activity-indicator__success {
|
|
33
|
+
background-color: var(--green-500);
|
|
34
|
+
box-shadow: 0 0 0 @su4 var(--focus-ring-success);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.s-activity-indicator__warning {
|
|
38
|
+
background-color: var(--yellow-600);
|
|
39
|
+
box-shadow: 0 0 0 @su4 var(--focus-ring-warning);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.s-activity-indicator__danger {
|
|
43
|
+
background-color: var(--red-500);
|
|
44
|
+
box-shadow: 0 0 0 @su4 var(--focus-ring-error);
|
|
21
45
|
}
|
|
@@ -26,6 +26,15 @@
|
|
|
26
26
|
background-size: 100%;
|
|
27
27
|
vertical-align: bottom; // Make our avatars play more nicely with text next to it.
|
|
28
28
|
|
|
29
|
+
.highcontrast-mode({
|
|
30
|
+
background-color: var(--black);
|
|
31
|
+
box-shadow: 0 0 0 1px var(--black);
|
|
32
|
+
|
|
33
|
+
.s-avatar--letter {
|
|
34
|
+
color: var(--white);
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
|
|
29
38
|
.s-avatar--letter {
|
|
30
39
|
display: block; // Make sure we're treating the letter as a block-level element
|
|
31
40
|
color: @white; // Force a light appearance of text rendering
|
|
@@ -20,10 +20,6 @@
|
|
|
20
20
|
border-color: @border;
|
|
21
21
|
background-color: @background;
|
|
22
22
|
color: @color;
|
|
23
|
-
|
|
24
|
-
.s-tag--dismiss {
|
|
25
|
-
background-color: transparent;
|
|
26
|
-
}
|
|
27
23
|
}
|
|
28
24
|
|
|
29
25
|
// ===========================================================================
|
|
@@ -46,7 +42,7 @@
|
|
|
46
42
|
vertical-align: middle;
|
|
47
43
|
white-space: nowrap;
|
|
48
44
|
|
|
49
|
-
.badge-styles(var(--
|
|
45
|
+
.badge-styles(var(--bc-medium), var(--black-050), var(--black-700));
|
|
50
46
|
|
|
51
47
|
a&:hover {
|
|
52
48
|
text-decoration: none;
|
|
@@ -93,6 +89,14 @@
|
|
|
93
89
|
.s-badge__bronze {
|
|
94
90
|
.badge-styles(var(--bronze-darker), var(--bronze-lighter), var(--black-700));
|
|
95
91
|
}
|
|
92
|
+
.s-badge__gold,
|
|
93
|
+
.s-badge__silver,
|
|
94
|
+
.s-badge__bronze {
|
|
95
|
+
.highcontrast-mode({
|
|
96
|
+
border-color: currentColor;
|
|
97
|
+
color: var(--black-900);
|
|
98
|
+
});
|
|
99
|
+
}
|
|
96
100
|
|
|
97
101
|
// $$ Number Counts
|
|
98
102
|
// ---------------------------------------------------------------------------
|
|
@@ -101,15 +105,19 @@
|
|
|
101
105
|
}
|
|
102
106
|
.s-badge__votes {
|
|
103
107
|
.badge-styles(var(--black-150), var(--white), var(--black-700));
|
|
108
|
+
|
|
109
|
+
.highcontrast-mode({ border-color: currentColor; });
|
|
104
110
|
}
|
|
105
111
|
.s-badge__answered {
|
|
106
112
|
.badge-styles(transparent, var(--green-400), var(--white));
|
|
107
113
|
}
|
|
108
114
|
.s-badge__rep {
|
|
109
115
|
.badge-styles(var(--green-400), var(--white), var(--green-500));
|
|
116
|
+
.highcontrast-mode({ border-color: currentColor; });
|
|
110
117
|
}
|
|
111
118
|
.s-badge__rep-down {
|
|
112
119
|
.badge-styles(var(--red-400), var(--white), var(--red-500));
|
|
120
|
+
.highcontrast-mode({ border-color: currentColor; });
|
|
113
121
|
}
|
|
114
122
|
.s-badge__important {
|
|
115
123
|
.badge-styles(transparent, var(--red-600), var(--white));
|
|
@@ -118,10 +126,12 @@
|
|
|
118
126
|
// $$ Users
|
|
119
127
|
// ---------------------------------------------------------------------------
|
|
120
128
|
.s-badge__admin {
|
|
121
|
-
.badge-styles(
|
|
129
|
+
.badge-styles(var(--theme-primary-200), var(--theme-primary-075), var(--theme-primary-800));
|
|
130
|
+
.highcontrast-mode({ border-color: currentColor; });
|
|
122
131
|
}
|
|
123
132
|
.s-badge__moderator {
|
|
124
|
-
.badge-styles(
|
|
133
|
+
.badge-styles(var(--theme-secondary-200), var(--theme-secondary-075), var(--theme-secondary-800));
|
|
134
|
+
.highcontrast-mode({ border-color: currentColor; });
|
|
125
135
|
|
|
126
136
|
&:before {
|
|
127
137
|
--s-badge-moderator-icon: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
|
|
@@ -150,7 +160,7 @@
|
|
|
150
160
|
}
|
|
151
161
|
|
|
152
162
|
&.s-badge__xs:before {
|
|
153
|
-
--s-badge-moderator-icon: url("data:image/svg+xml,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='
|
|
163
|
+
--s-badge-moderator-icon: url("data:image/svg+xml,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
|
|
154
164
|
|
|
155
165
|
width: 7px;
|
|
156
166
|
height: 9px;
|
|
@@ -159,7 +169,8 @@
|
|
|
159
169
|
}
|
|
160
170
|
.s-badge__staff {
|
|
161
171
|
// Staff badges are always "Stack Overflow Orange"
|
|
162
|
-
.badge-styles(
|
|
172
|
+
.badge-styles(var(--orange-300), var(--orange-100), var(--orange-900));
|
|
173
|
+
.highcontrast-mode({ border-color: currentColor; });
|
|
163
174
|
}
|
|
164
175
|
|
|
165
176
|
// $$ Award Count
|
|
@@ -48,6 +48,17 @@
|
|
|
48
48
|
z-index: @zi-selected;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
+
.highcontrast-mode({
|
|
52
|
+
&.is-selected {
|
|
53
|
+
background-color: var(--black-400);
|
|
54
|
+
color: var(--white);
|
|
55
|
+
|
|
56
|
+
.s-btn--number {
|
|
57
|
+
color: var(--black);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
|
|
51
62
|
&:active {
|
|
52
63
|
z-index: @zi-active;
|
|
53
64
|
}
|
|
@@ -16,13 +16,11 @@
|
|
|
16
16
|
// $ BASE STYLE
|
|
17
17
|
// ----------------------------------------------------------------------------
|
|
18
18
|
& {
|
|
19
|
-
#stacks-internals #load-config();
|
|
20
|
-
|
|
21
19
|
.s-btn {
|
|
22
20
|
position: relative;
|
|
23
21
|
display: inline-block;
|
|
24
22
|
padding: 0.8em;
|
|
25
|
-
color:
|
|
23
|
+
color: var(--theme-button-color);
|
|
26
24
|
border: 1px solid transparent;
|
|
27
25
|
border-radius: @br-sm;
|
|
28
26
|
background-color: transparent;
|
|
@@ -36,6 +34,14 @@
|
|
|
36
34
|
cursor: pointer;
|
|
37
35
|
user-select: none;
|
|
38
36
|
|
|
37
|
+
.highcontrast-mode({
|
|
38
|
+
border-color: currentColor;
|
|
39
|
+
|
|
40
|
+
&:not(.s-btn__link):not(.s-btn__unset) {
|
|
41
|
+
text-decoration: none;
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
|
|
39
45
|
button &,
|
|
40
46
|
button[type="submit"] &,
|
|
41
47
|
button[type="reset"] & {
|
|
@@ -53,13 +59,13 @@
|
|
|
53
59
|
&:hover,
|
|
54
60
|
&:focus,
|
|
55
61
|
&:active {
|
|
56
|
-
color:
|
|
57
|
-
background:
|
|
62
|
+
color: var(--theme-button-hover-color);
|
|
63
|
+
background: var(--theme-button-hover-background-color);
|
|
58
64
|
text-decoration: none;
|
|
59
65
|
}
|
|
60
66
|
|
|
61
67
|
&:active {
|
|
62
|
-
background:
|
|
68
|
+
background: var(--theme-button-active-background-color);
|
|
63
69
|
}
|
|
64
70
|
|
|
65
71
|
&:focus {
|
|
@@ -74,8 +80,8 @@
|
|
|
74
80
|
}
|
|
75
81
|
|
|
76
82
|
&.is-selected {
|
|
77
|
-
color:
|
|
78
|
-
background:
|
|
83
|
+
color: var(--theme-button-selected-color);
|
|
84
|
+
background: var(--theme-button-selected-background-color);
|
|
79
85
|
box-shadow: none;
|
|
80
86
|
|
|
81
87
|
&:focus {
|
|
@@ -152,6 +158,8 @@
|
|
|
152
158
|
font-size: @fs-caption;
|
|
153
159
|
line-height: @lh-xs;
|
|
154
160
|
background-color: currentColor;
|
|
161
|
+
|
|
162
|
+
.highcontrast-mode({ opacity: 0.8; });
|
|
155
163
|
}
|
|
156
164
|
|
|
157
165
|
.s-btn--number {
|
|
@@ -161,7 +169,8 @@
|
|
|
161
169
|
|
|
162
170
|
.s-btn__primary:not(.is-selected) .s-btn--number,
|
|
163
171
|
.s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--number {
|
|
164
|
-
.dark-mode({ color:
|
|
172
|
+
.dark-mode({ color: var(--white); });
|
|
173
|
+
.highcontrast-mode({ color: var(--black); });
|
|
165
174
|
}
|
|
166
175
|
|
|
167
176
|
// ============================================================================
|
|
@@ -172,10 +181,10 @@
|
|
|
172
181
|
// Style which applies only a border.
|
|
173
182
|
// ----------------------------------------------------------------------------
|
|
174
183
|
.s-btn__outlined {
|
|
175
|
-
border-color:
|
|
184
|
+
border-color: var(--theme-button-outlined-border-color);
|
|
176
185
|
|
|
177
186
|
&.is-selected {
|
|
178
|
-
border-color:
|
|
187
|
+
border-color: var(--theme-button-outlined-selected-border-color);
|
|
179
188
|
}
|
|
180
189
|
}
|
|
181
190
|
|
|
@@ -183,30 +192,36 @@
|
|
|
183
192
|
// Adds in background-colors, background-images, and/or box-shadows.
|
|
184
193
|
// ----------------------------------------------------------------------------
|
|
185
194
|
.s-btn__filled {
|
|
186
|
-
color:
|
|
187
|
-
background-color:
|
|
188
|
-
border-color:
|
|
189
|
-
box-shadow: inset 0 1px 0 0
|
|
195
|
+
color: var(--theme-button-filled-color);
|
|
196
|
+
background-color: var(--theme-button-filled-background-color);
|
|
197
|
+
border-color: var(--theme-button-filled-border-color);
|
|
198
|
+
box-shadow: inset 0 1px 0 0 hsla(0, 0, 100%, 0.7);
|
|
190
199
|
|
|
191
200
|
.dark-mode({ box-shadow: none; });
|
|
192
201
|
|
|
193
202
|
&:hover,
|
|
194
203
|
&:focus,
|
|
195
204
|
&:active {
|
|
196
|
-
color:
|
|
197
|
-
background-color:
|
|
205
|
+
color: var(--theme-button-filled-hover-color);
|
|
206
|
+
background-color: var(--theme-button-filled-hover-background-color);
|
|
198
207
|
}
|
|
199
208
|
|
|
200
209
|
&:active {
|
|
201
|
-
background-color:
|
|
202
|
-
border-color:
|
|
210
|
+
background-color: var(--theme-button-filled-active-background-color);
|
|
211
|
+
border-color: var(--theme-button-filled-active-border-color);
|
|
203
212
|
box-shadow: none;
|
|
204
213
|
}
|
|
205
214
|
|
|
215
|
+
&:focus {
|
|
216
|
+
.highcontrast-mode({
|
|
217
|
+
box-shadow: 0 0 0 @su4 var(--focus-ring);
|
|
218
|
+
});
|
|
219
|
+
}
|
|
220
|
+
|
|
206
221
|
&.is-selected {
|
|
207
|
-
color:
|
|
208
|
-
background-color:
|
|
209
|
-
border-color:
|
|
222
|
+
color: var(--theme-button-filled-selected-color);
|
|
223
|
+
background-color: var(--theme-button-filled-selected-background-color);
|
|
224
|
+
border-color: var(--theme-button-filled-selected-border-color);
|
|
210
225
|
box-shadow: none;
|
|
211
226
|
}
|
|
212
227
|
}
|
|
@@ -215,8 +230,15 @@
|
|
|
215
230
|
// Creates a gray button style.
|
|
216
231
|
// ----------------------------------------------------------------------------
|
|
217
232
|
.s-btn__muted {
|
|
233
|
+
#stacks-internals #load-config();
|
|
218
234
|
color: @button-muted-color;
|
|
219
235
|
|
|
236
|
+
.highcontrast-mode({
|
|
237
|
+
&.s-btn__filled {
|
|
238
|
+
border-color: transparent;
|
|
239
|
+
}
|
|
240
|
+
});
|
|
241
|
+
|
|
220
242
|
&:hover,
|
|
221
243
|
&:focus,
|
|
222
244
|
&:active {
|
|
@@ -255,10 +277,20 @@
|
|
|
255
277
|
color: @button-muted-filled-color;
|
|
256
278
|
background-color: @button-muted-filled-background-color;
|
|
257
279
|
border-color: transparent;
|
|
258
|
-
box-shadow: inset 0 1px 0 0
|
|
280
|
+
box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
|
|
259
281
|
|
|
260
282
|
.dark-mode({ box-shadow: none; });
|
|
261
283
|
|
|
284
|
+
.highcontrast-mode({
|
|
285
|
+
background-color: var(--black-400);
|
|
286
|
+
border-color: transparent;
|
|
287
|
+
color: var(--white);
|
|
288
|
+
|
|
289
|
+
.s-btn--number {
|
|
290
|
+
color: var(--black);
|
|
291
|
+
}
|
|
292
|
+
});
|
|
293
|
+
|
|
262
294
|
&:hover,
|
|
263
295
|
&:focus,
|
|
264
296
|
&:active {
|
|
@@ -273,6 +305,7 @@
|
|
|
273
305
|
|
|
274
306
|
&:focus {
|
|
275
307
|
box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
|
|
308
|
+
.highcontrast-mode({ box-shadow: 0 0 0 @su4 var(--focus-ring-muted); });
|
|
276
309
|
}
|
|
277
310
|
|
|
278
311
|
&.is-selected {
|
|
@@ -280,6 +313,14 @@
|
|
|
280
313
|
background-color: @button-muted-filled-selected-background-color;
|
|
281
314
|
box-shadow: none;
|
|
282
315
|
|
|
316
|
+
.highcontrast-mode({
|
|
317
|
+
background-color: var(--black-700);
|
|
318
|
+
|
|
319
|
+
.s-btn--number {
|
|
320
|
+
color: var(--black);
|
|
321
|
+
}
|
|
322
|
+
});
|
|
323
|
+
|
|
283
324
|
&:focus {
|
|
284
325
|
box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
|
|
285
326
|
}
|
|
@@ -291,8 +332,15 @@
|
|
|
291
332
|
// $ DANGER BUTTONS & STYLES
|
|
292
333
|
// ============================================================================
|
|
293
334
|
.s-btn__danger {
|
|
335
|
+
#stacks-internals #load-config();
|
|
294
336
|
color: @button-danger-color;
|
|
295
337
|
|
|
338
|
+
.highcontrast-mode({
|
|
339
|
+
&.s-btn__filled {
|
|
340
|
+
border-color: transparent;
|
|
341
|
+
}
|
|
342
|
+
});
|
|
343
|
+
|
|
296
344
|
&:hover,
|
|
297
345
|
&:focus,
|
|
298
346
|
&:active {
|
|
@@ -306,6 +354,7 @@
|
|
|
306
354
|
|
|
307
355
|
&:focus {
|
|
308
356
|
box-shadow: 0 0 0 @su4 var(--focus-ring-error);
|
|
357
|
+
.highcontrast-mode({ box-shadow: 0 0 0 @su4 var(--focus-ring-error); });
|
|
309
358
|
}
|
|
310
359
|
|
|
311
360
|
&.is-selected {
|
|
@@ -331,10 +380,22 @@
|
|
|
331
380
|
color: @button-danger-filled-color;
|
|
332
381
|
background-color: @button-danger-filled-background-color;
|
|
333
382
|
border-color: transparent;
|
|
334
|
-
box-shadow: inset 0 1px 0 0
|
|
383
|
+
box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
|
|
335
384
|
|
|
336
385
|
.dark-mode({ box-shadow: none; });
|
|
337
386
|
|
|
387
|
+
.highcontrast-mode({
|
|
388
|
+
color: var(--white);
|
|
389
|
+
|
|
390
|
+
&:focus {
|
|
391
|
+
box-shadow: 0 0 0 @su4 var(--focus-ring-error);
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.s-btn--number {
|
|
395
|
+
color: var(--black);
|
|
396
|
+
}
|
|
397
|
+
});
|
|
398
|
+
|
|
338
399
|
&:hover,
|
|
339
400
|
&:focus,
|
|
340
401
|
&:active {
|
|
@@ -359,6 +420,11 @@
|
|
|
359
420
|
&:focus {
|
|
360
421
|
box-shadow: 0 0 0 @su4 var(--focus-ring-error);
|
|
361
422
|
}
|
|
423
|
+
.highcontrast-mode({
|
|
424
|
+
.s-btn--number {
|
|
425
|
+
color: var(--black);
|
|
426
|
+
}
|
|
427
|
+
});
|
|
362
428
|
}
|
|
363
429
|
|
|
364
430
|
.s-btn--number {
|
|
@@ -371,31 +437,49 @@
|
|
|
371
437
|
// $ PRIMARY STYLE
|
|
372
438
|
// ============================================================================
|
|
373
439
|
.s-btn__primary {
|
|
374
|
-
color:
|
|
375
|
-
background-color:
|
|
376
|
-
box-shadow: inset 0 1px 0 0
|
|
440
|
+
color: var(--theme-button-primary-color);
|
|
441
|
+
background-color: var(--theme-button-primary-background-color);
|
|
442
|
+
box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
|
|
377
443
|
|
|
378
|
-
.dark-mode({
|
|
444
|
+
.dark-mode({
|
|
445
|
+
box-shadow: none;
|
|
446
|
+
|
|
447
|
+
&:not(.is-selected) {
|
|
448
|
+
color: var(--black);
|
|
449
|
+
}
|
|
450
|
+
});
|
|
451
|
+
.highcontrast-mode({
|
|
452
|
+
&:not(.is-selected) {
|
|
453
|
+
border-color: transparent;
|
|
454
|
+
color: var(--white);
|
|
455
|
+
}
|
|
456
|
+
});
|
|
379
457
|
|
|
380
458
|
&:hover,
|
|
381
459
|
&:focus,
|
|
382
460
|
&:active {
|
|
383
|
-
color:
|
|
384
|
-
background-color:
|
|
461
|
+
color: var(--theme-button-primary-hover-color);
|
|
462
|
+
background-color: var(--theme-button-primary-hover-background-color);
|
|
385
463
|
}
|
|
386
464
|
|
|
387
465
|
&:active {
|
|
388
|
-
background-color:
|
|
466
|
+
background-color: var(--theme-button-primary-active-background-color);
|
|
389
467
|
box-shadow: none;
|
|
390
468
|
}
|
|
391
469
|
|
|
470
|
+
&:focus {
|
|
471
|
+
.highcontrast-mode({
|
|
472
|
+
box-shadow: 0 0 0 @su4 var(--focus-ring);
|
|
473
|
+
});
|
|
474
|
+
}
|
|
475
|
+
|
|
392
476
|
&.is-selected {
|
|
393
|
-
color:
|
|
394
|
-
background-color:
|
|
477
|
+
color: var(--theme-button-primary-selected-color);
|
|
478
|
+
background-color: var(--theme-button-primary-selected-background-color);
|
|
395
479
|
}
|
|
396
480
|
|
|
397
481
|
.s-btn--number {
|
|
398
|
-
color:
|
|
482
|
+
color: var(--theme-button-primary-number-color);
|
|
399
483
|
}
|
|
400
484
|
}
|
|
401
485
|
|
|
@@ -403,22 +487,25 @@
|
|
|
403
487
|
// $ MISC STYLES
|
|
404
488
|
// ============================================================================
|
|
405
489
|
.s-btn__google {
|
|
406
|
-
border-color: var(--
|
|
490
|
+
border-color: var(--bc-medium);
|
|
407
491
|
background-color: var(--white);
|
|
408
492
|
color: var(--black-700);
|
|
409
493
|
|
|
410
494
|
&:hover,
|
|
411
495
|
&:focus {
|
|
412
|
-
border-color: var(--
|
|
496
|
+
border-color: var(--bc-darker);
|
|
413
497
|
background-color: var(--black-025);
|
|
414
498
|
color: var(--black-800);
|
|
415
499
|
}
|
|
416
500
|
|
|
417
501
|
&:active {
|
|
418
|
-
border-color: var(--black-200);
|
|
419
502
|
background-color: var(--black-050);
|
|
420
503
|
color: var(--black-900);
|
|
421
504
|
}
|
|
505
|
+
|
|
506
|
+
&:focus {
|
|
507
|
+
box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
|
|
508
|
+
}
|
|
422
509
|
}
|
|
423
510
|
|
|
424
511
|
.s-btn__facebook {
|
|
@@ -426,6 +513,8 @@
|
|
|
426
513
|
background-color: #385499;
|
|
427
514
|
color: #fff;
|
|
428
515
|
|
|
516
|
+
.highcontrast-mode({ border-color: transparent; });
|
|
517
|
+
|
|
429
518
|
&:hover,
|
|
430
519
|
&:focus {
|
|
431
520
|
background-color: darken(#385499, 5%);
|
|
@@ -442,6 +531,8 @@
|
|
|
442
531
|
background-color: var(--black-750);
|
|
443
532
|
color: var(--white);
|
|
444
533
|
|
|
534
|
+
.highcontrast-mode({ border-color: transparent; });
|
|
535
|
+
|
|
445
536
|
&:hover,
|
|
446
537
|
&:focus {
|
|
447
538
|
background-color: var(--black-800);
|
|
@@ -452,11 +543,16 @@
|
|
|
452
543
|
background-color: var(--black-900);
|
|
453
544
|
color: var(--white);
|
|
454
545
|
}
|
|
546
|
+
|
|
547
|
+
&:focus {
|
|
548
|
+
box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
|
|
549
|
+
}
|
|
455
550
|
}
|
|
456
551
|
|
|
457
552
|
.s-btn__unset,
|
|
458
553
|
.s-btn__unset:hover,
|
|
459
|
-
.s-btn__unset:active
|
|
554
|
+
.s-btn__unset:active,
|
|
555
|
+
.s-btn__unset:focus {
|
|
460
556
|
padding: 0;
|
|
461
557
|
border: none;
|
|
462
558
|
outline: none;
|
|
@@ -469,10 +565,6 @@
|
|
|
469
565
|
user-select: auto;
|
|
470
566
|
}
|
|
471
567
|
|
|
472
|
-
.s-btn__unset:focus {
|
|
473
|
-
color: unset;
|
|
474
|
-
}
|
|
475
|
-
|
|
476
568
|
.s-btn__link {
|
|
477
569
|
display: inline;
|
|
478
570
|
padding: 0;
|
|
@@ -491,6 +583,15 @@
|
|
|
491
583
|
&:focus,
|
|
492
584
|
&[disabled] {
|
|
493
585
|
background: none;
|
|
586
|
+
box-shadow: none;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
&.s-btn__dropdown {
|
|
590
|
+
padding-right: 0.9em;
|
|
591
|
+
|
|
592
|
+
&:after {
|
|
593
|
+
right: 0;
|
|
594
|
+
}
|
|
494
595
|
}
|
|
495
596
|
}
|
|
496
597
|
|