@stackoverflow/stacks 1.4.2 → 1.5.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 +2012 -458
- package/dist/css/stacks.min.css +1 -1
- package/lib/css/atomic/flex.less +53 -2
- package/lib/css/components/activity-indicator.less +3 -3
- package/lib/css/components/badges.less +9 -9
- package/lib/css/components/expandable.less +69 -59
- package/lib/css/components/modals.less +95 -120
- package/lib/css/components/popovers.less +132 -181
- package/lib/css/components/spinner.less +54 -104
- package/lib/css/components/toggle-switches.less +69 -120
- package/lib/css/components/user-cards.less +91 -144
- package/package.json +6 -6
|
@@ -1,145 +1,94 @@
|
|
|
1
|
-
//
|
|
2
|
-
// STACK OVERFLOW
|
|
3
|
-
// TOGGLE SWITCHES
|
|
4
|
-
//
|
|
5
|
-
// This CSS comes from Stacks, our CSS & Pattern library for rapidly building
|
|
6
|
-
// Stack Overflow. For documentation of all these classes and how to contribute,
|
|
7
|
-
// visit https://stackoverflow.design/
|
|
8
|
-
//
|
|
9
|
-
// ============================================================================
|
|
10
|
-
// $ BASE STYLE
|
|
11
|
-
// ----------------------------------------------------------------------------
|
|
12
1
|
.s-toggle-switch {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
position: relative;
|
|
41
|
-
display: block;
|
|
42
|
-
content: "";
|
|
43
|
-
width: 50%;
|
|
44
|
-
height: 100%;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
&:after {
|
|
48
|
-
left: 0;
|
|
49
|
-
border-radius: 50%;
|
|
50
|
-
background: @white;
|
|
51
|
-
transition: left 0.1s ease;
|
|
52
|
-
|
|
53
|
-
.highcontrast-mode({
|
|
54
|
-
background: var(--white);
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
&:before {
|
|
59
|
-
display: none;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
&:checked + .s-toggle-switch--indicator {
|
|
64
|
-
background: var(--green-400);
|
|
65
|
-
|
|
66
|
-
&:after {
|
|
67
|
-
left: 50%;
|
|
2
|
+
--_ts-bg: var(--black-300);
|
|
3
|
+
--_ts-bg-ps: left center;
|
|
4
|
+
--_ts-bs-color: transparent;
|
|
5
|
+
// multiple
|
|
6
|
+
--_ts-multiple-bg: unset;
|
|
7
|
+
--_ts-multiple-fc: var(--black-500);
|
|
8
|
+
|
|
9
|
+
// TODO split single and multiple toggle into two seperate components
|
|
10
|
+
&&__multiple {
|
|
11
|
+
input[type="radio"] {
|
|
12
|
+
&:checked {
|
|
13
|
+
+ label {
|
|
14
|
+
&.s-toggle-switch--label-off {
|
|
15
|
+
--_ts-multiple-bg: var(--black-500);
|
|
16
|
+
--_ts-multiple-fc: var(--white);
|
|
17
|
+
.dark-mode({ --_ts-multiple-bg: var(--black-350); });
|
|
18
|
+
}
|
|
19
|
+
&:not(.s-toggle-switch--label-off) {
|
|
20
|
+
--_ts-multiple-bg: var(--green-400);
|
|
21
|
+
--_ts-multiple-fc: @white;
|
|
22
|
+
.highcontrast-mode({ --_ts-multiple-fc: var(--white); });
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
&:focus + label {
|
|
26
|
+
--_ts-bs-color: var(--focus-ring-success);
|
|
27
|
+
&.s-toggle-switch--label-off { --_ts-bs-color: var(--focus-ring-muted); }
|
|
28
|
+
}
|
|
68
29
|
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
&:focus + .s-toggle-switch--indicator {
|
|
72
|
-
box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
&:checked:focus + .s-toggle-switch--indicator {
|
|
76
|
-
box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
30
|
|
|
80
|
-
&.s-toggle-switch__multiple {
|
|
81
|
-
display: flex;
|
|
82
|
-
align-items: stretch;
|
|
83
|
-
|
|
84
|
-
// First hide the radio buttons
|
|
85
|
-
input[type="radio"] {
|
|
86
|
-
position: absolute;
|
|
87
31
|
left: -999em;
|
|
88
|
-
opacity: 0;
|
|
89
32
|
margin: 0;
|
|
33
|
+
opacity: 0;
|
|
34
|
+
position: absolute;
|
|
90
35
|
}
|
|
91
|
-
|
|
92
|
-
// Next modifications to option cells
|
|
93
36
|
label {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
37
|
+
background-color: var(--_ts-multiple-bg);
|
|
38
|
+
box-shadow: 0 0 0 var(--su-static4) var(--_ts-bs-color);
|
|
39
|
+
color: var(--_ts-multiple-fc);
|
|
40
|
+
|
|
98
41
|
border-radius: 1000px;
|
|
99
|
-
|
|
42
|
+
cursor: pointer;
|
|
100
43
|
font-size: var(--fs-body1);
|
|
101
44
|
font-weight: 400;
|
|
102
45
|
line-height: 1;
|
|
46
|
+
margin: 0;
|
|
47
|
+
padding: 0.5em 0.7em;
|
|
103
48
|
text-align: center;
|
|
104
49
|
white-space: nowrap;
|
|
105
|
-
|
|
106
|
-
|
|
50
|
+
width: 100%;
|
|
107
51
|
-webkit-touch-callout: none;
|
|
108
52
|
-webkit-user-select: none;
|
|
109
53
|
user-select: none;
|
|
110
54
|
}
|
|
111
55
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
&.s-toggle-switch--label-off {
|
|
116
|
-
background-color: var(--black-500);
|
|
117
|
-
color: var(--white);
|
|
118
|
-
|
|
119
|
-
.dark-mode({
|
|
120
|
-
background-color: var(--black-350);
|
|
121
|
-
// color: var(--black);
|
|
122
|
-
});
|
|
123
|
-
}
|
|
56
|
+
align-items: stretch;
|
|
57
|
+
display: flex;
|
|
58
|
+
}
|
|
124
59
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
60
|
+
input[type="checkbox"], // TODO DEPRECATED: drop support for nested input[type="checkbox"]
|
|
61
|
+
input[type="checkbox"]& {
|
|
62
|
+
&:checked {
|
|
63
|
+
--_ts-bg: var(--green-400);
|
|
64
|
+
--_ts-bg-ps: right center;
|
|
129
65
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
});
|
|
133
|
-
}
|
|
66
|
+
&:focus {
|
|
67
|
+
--_ts-bs-color: var(--focus-ring-success);
|
|
134
68
|
}
|
|
69
|
+
}
|
|
70
|
+
&:focus {
|
|
71
|
+
--_ts-bs-color: var(--focus-ring-muted);
|
|
72
|
+
outline: none;
|
|
73
|
+
}
|
|
74
|
+
&[disabled] {
|
|
75
|
+
cursor: default;
|
|
76
|
+
}
|
|
135
77
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
78
|
+
background-color: var(--_ts-bg);
|
|
79
|
+
background-position: var(--_ts-bg-ps);
|
|
80
|
+
box-shadow: 0 0 0 var(--su-static4) var(--_ts-bs-color);
|
|
139
81
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
82
|
+
appearance: none;
|
|
83
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); // The white dot within the toggle
|
|
84
|
+
background-size: contain;
|
|
85
|
+
background-repeat: no-repeat;
|
|
86
|
+
border-radius: 1000px;
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
height: var(--su-static24);
|
|
89
|
+
margin: 0; // guard against production adding 5px of margin to these
|
|
90
|
+
transition: background-position 0.2s ease;
|
|
91
|
+
vertical-align: top;
|
|
92
|
+
width: calc(var(--su-static48) - var(--su-static4));
|
|
144
93
|
}
|
|
145
94
|
}
|
|
@@ -1,173 +1,120 @@
|
|
|
1
|
-
//
|
|
2
|
-
// STACK OVERFLOW
|
|
3
|
-
// USER CARDS
|
|
4
|
-
//
|
|
5
|
-
// This CSS comes from Stacks, our CSS & Pattern library for rapidly building
|
|
6
|
-
// Stack Overflow. For documentation of all these classes and how to contribute,
|
|
7
|
-
// visit https://stackoverflow.design/
|
|
8
|
-
//
|
|
9
|
-
// ============================================================================
|
|
10
|
-
// $ BASE
|
|
11
|
-
// ----------------------------------------------------------------------------
|
|
12
|
-
|
|
13
1
|
.s-user-card {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
2
|
+
--_uc-ai: center;
|
|
3
|
+
--_uc-bg: unset;
|
|
4
|
+
--_uc-bar: unset;
|
|
5
|
+
--_uc-d: grid;
|
|
6
|
+
--_uc-fc: unset;
|
|
7
|
+
--_uc-g: var(--su4) var(--su8);
|
|
8
|
+
--_uc-p: var(--su8);
|
|
9
|
+
--_uc-info-ai: unset;
|
|
10
|
+
--_uc-info-fd: column;
|
|
11
|
+
--_uc-link-fs: var(--fs-caption);
|
|
12
|
+
--_uc-link-ws: unset;
|
|
13
|
+
--_uc-rep-fc: unset;
|
|
14
|
+
--_uc-time-fc: var(--black-500);
|
|
15
|
+
--_uc-time-ws: unset;
|
|
16
|
+
--_uc-type-fc: var(--theme-primary-400);
|
|
17
|
+
|
|
18
|
+
// MODIFIERS
|
|
19
|
+
&&__deleted {
|
|
20
|
+
--_uc-fc: var(--black-500);
|
|
21
|
+
}
|
|
22
|
+
&&__highlighted {
|
|
23
|
+
--_uc-bg: var(--theme-secondary-050);
|
|
24
|
+
--_uc-bar: var(--br-md);
|
|
25
|
+
--_uc-time-fc: var(--black-600);
|
|
26
|
+
--_uc-type-fc: var(--black-700);
|
|
39
27
|
}
|
|
40
28
|
|
|
41
|
-
//
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
29
|
+
// VARIANTS
|
|
30
|
+
&&__minimal,
|
|
31
|
+
&&__small {
|
|
32
|
+
--_uc-d: flex;
|
|
33
|
+
--_uc-g: var(--su4);
|
|
34
|
+
--_uc-p: 0;
|
|
35
|
+
--_uc-info-ai: center;
|
|
36
|
+
--_uc-info-fd: row;
|
|
45
37
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
38
|
+
}
|
|
39
|
+
&&__full {
|
|
40
|
+
--_uc-ai: flex-start;
|
|
41
|
+
--_uc-link-fs: var(--fs-body2);
|
|
42
|
+
}
|
|
43
|
+
&&__minimal {
|
|
44
|
+
--_uc-link-ws: nowrap;
|
|
45
|
+
--_uc-rep-fc: var(--black-600);
|
|
46
|
+
--_uc-time-ws: nowrap;
|
|
49
47
|
}
|
|
50
48
|
|
|
51
|
-
//
|
|
52
|
-
|
|
53
|
-
|
|
49
|
+
// CHILD ELEMENTS
|
|
50
|
+
& &--location,
|
|
51
|
+
& &--role {
|
|
52
|
+
font-size: var(--fs-caption);
|
|
54
53
|
color: var(--black-500);
|
|
55
54
|
}
|
|
55
|
+
& &--awards {
|
|
56
|
+
li {
|
|
57
|
+
font-size: var(--fs-caption);
|
|
58
|
+
}
|
|
56
59
|
|
|
57
|
-
|
|
58
|
-
// ---------------------------------------------------------------------------
|
|
59
|
-
&.s-user-card__small {
|
|
60
|
-
display: flex;
|
|
60
|
+
.list-reset;
|
|
61
61
|
align-items: center;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
.s-user-card--info {
|
|
66
|
-
flex-direction: row;
|
|
67
|
-
align-items: center;
|
|
68
|
-
}
|
|
62
|
+
display: flex;
|
|
63
|
+
gap: var(--su6);
|
|
69
64
|
}
|
|
65
|
+
& &--info {
|
|
66
|
+
align-items: var(--_uc-info-ai);
|
|
67
|
+
flex-direction: var(--_uc-info-fd);
|
|
70
68
|
|
|
71
|
-
// $$ A minimal presentation
|
|
72
|
-
// ---------------------------------------------------------------------------
|
|
73
|
-
&.s-user-card__minimal {
|
|
74
69
|
display: flex;
|
|
75
|
-
align-items: center;
|
|
76
70
|
gap: var(--su4);
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.s-user-card--link {
|
|
84
|
-
white-space: nowrap;
|
|
85
|
-
}
|
|
71
|
+
}
|
|
72
|
+
& &--link {
|
|
73
|
+
font-size: var(--_uc-link-fs);
|
|
74
|
+
white-space: var(--_uc-link-ws);
|
|
86
75
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
76
|
+
align-items: center;
|
|
77
|
+
flex-wrap: wrap;
|
|
78
|
+
min-width: 0; // Allow things to wrap
|
|
79
|
+
overflow-wrap: break-word;
|
|
80
|
+
}
|
|
81
|
+
& &--rep {
|
|
82
|
+
color: var(--_uc-rep-fc);
|
|
90
83
|
|
|
91
|
-
|
|
92
|
-
flex-direction: row;
|
|
93
|
-
align-items: center;
|
|
94
|
-
}
|
|
84
|
+
font-weight: 700;
|
|
95
85
|
}
|
|
86
|
+
& &--tags {
|
|
87
|
+
align-items: center;
|
|
88
|
+
min-width: 0; // Allow things to wrap
|
|
89
|
+
flex-wrap: wrap;
|
|
90
|
+
}
|
|
91
|
+
& &--time {
|
|
92
|
+
color: var(--_uc-time-fc);
|
|
93
|
+
white-space: var(--_uc-time-ws);
|
|
96
94
|
|
|
97
|
-
.s-user-card--type {
|
|
98
|
-
grid-column: ~"1 / 3";
|
|
99
95
|
font-size: var(--fs-caption);
|
|
100
|
-
|
|
101
|
-
|
|
96
|
+
grid-column: ~"1 / 3";
|
|
97
|
+
grid-row: ~"1 / 2";
|
|
98
|
+
}
|
|
99
|
+
& &--type {
|
|
102
100
|
a {
|
|
103
101
|
color: inherit;
|
|
104
102
|
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
103
|
|
|
108
|
-
|
|
109
|
-
// Optional element used for displaying time since an action happened
|
|
110
|
-
// ---------------------------------------------------------------------------
|
|
111
|
-
.s-user-card--time {
|
|
112
|
-
grid-column: ~"1 / 3";
|
|
113
|
-
grid-row: ~"1 / 2";
|
|
114
|
-
color: var(--black-500);
|
|
115
|
-
font-size: var(--fs-caption);
|
|
116
|
-
}
|
|
104
|
+
color: var(--_uc-type-fc);
|
|
117
105
|
|
|
118
|
-
// $ USER INFO CONTAINER
|
|
119
|
-
// An optional container for extra meta info that applies a
|
|
120
|
-
// vertical grid layout
|
|
121
|
-
// ---------------------------------------------------------------------------
|
|
122
|
-
.s-user-card--info {
|
|
123
|
-
display: flex;
|
|
124
|
-
flex-direction: column;
|
|
125
|
-
gap: var(--su4);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
// $ USER LINK
|
|
129
|
-
// Styles the link to the user's profile appropriately
|
|
130
|
-
// ---------------------------------------------------------------------------
|
|
131
|
-
.s-user-card--link {
|
|
132
|
-
min-width: 0; // Allow things to wrap
|
|
133
|
-
font-size: var(--fs-caption);
|
|
134
|
-
align-items: center;
|
|
135
|
-
flex-wrap: wrap;
|
|
136
|
-
overflow-wrap: break-word;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
// $ AWARDS CONTAINER
|
|
140
|
-
// A container for reputation and various awards
|
|
141
|
-
// ---------------------------------------------------------------------------
|
|
142
|
-
.s-user-card--awards {
|
|
143
|
-
.list-reset;
|
|
144
|
-
display: flex;
|
|
145
|
-
align-items: center;
|
|
146
|
-
gap: var(--su6);
|
|
147
|
-
|
|
148
|
-
li {
|
|
149
106
|
font-size: var(--fs-caption);
|
|
107
|
+
grid-column: ~"1 / 3";
|
|
150
108
|
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.s-user-card--rep {
|
|
154
|
-
font-weight: 700;
|
|
155
|
-
}
|
|
156
109
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
color: var(--black-500);
|
|
164
|
-
}
|
|
110
|
+
align-items: var(--_uc-ai);
|
|
111
|
+
background-color: var(--_uc-bg);
|
|
112
|
+
border-radius: var(--_uc-bar);
|
|
113
|
+
color: var(--_uc-fc);
|
|
114
|
+
display: var(--_uc-d);
|
|
115
|
+
gap: var(--_uc-g);
|
|
165
116
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
.s-user-card--tags {
|
|
170
|
-
min-width: 0; // Allow things to wrap
|
|
171
|
-
align-items: center;
|
|
172
|
-
flex-wrap: wrap;
|
|
117
|
+
grid-template-columns: auto 1fr;
|
|
118
|
+
line-height: 1;
|
|
119
|
+
padding: var(--_uc-p);
|
|
173
120
|
}
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/StackExchange/Stacks.git"
|
|
7
7
|
},
|
|
8
|
-
"version": "1.
|
|
8
|
+
"version": "1.5.0",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"lib"
|
|
@@ -38,16 +38,16 @@
|
|
|
38
38
|
"@highlightjs/cdn-assets": "^11.6.0",
|
|
39
39
|
"@stackoverflow/stacks-editor": "^0.8.2",
|
|
40
40
|
"@stackoverflow/stacks-icons": "^3.1.0",
|
|
41
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
42
|
-
"@typescript-eslint/parser": "^5.40.
|
|
41
|
+
"@typescript-eslint/eslint-plugin": "^5.41.0",
|
|
42
|
+
"@typescript-eslint/parser": "^5.40.1",
|
|
43
43
|
"backstopjs": "^6.1.3",
|
|
44
|
-
"concurrently": "^7.
|
|
44
|
+
"concurrently": "^7.5.0",
|
|
45
45
|
"css-loader": "^6.7.1",
|
|
46
|
-
"cssnano": "^5.1.
|
|
46
|
+
"cssnano": "^5.1.14",
|
|
47
47
|
"docsearch.js": "^2.6.3",
|
|
48
48
|
"eleventy-plugin-highlightjs": "^1.1.0",
|
|
49
49
|
"eleventy-plugin-nesting-toc": "^1.3.0",
|
|
50
|
-
"eslint": "^8.
|
|
50
|
+
"eslint": "^8.26.0",
|
|
51
51
|
"eslint-config-prettier": "^8.5.0",
|
|
52
52
|
"eslint-plugin-no-unsanitized": "^4.0.1",
|
|
53
53
|
"jquery": "^3.6.1",
|