@stackoverflow/stacks 1.3.5 → 1.4.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 +1401 -1034
- package/dist/css/stacks.min.css +1 -1
- package/lib/css/atomic/gap.less +44 -0
- package/lib/css/atomic/grid.less +0 -35
- package/lib/css/components/_styles-template.less +75 -0
- package/lib/css/components/activity-indicator.less +23 -33
- package/lib/css/components/avatars.less +71 -82
- package/lib/css/components/award-bling.less +29 -0
- package/lib/css/components/badges.less +199 -230
- package/lib/css/components/breadcrumbs.less +23 -30
- package/lib/css/components/buttons.less +4 -2
- package/lib/css/components/cards.less +18 -36
- package/lib/css/components/labels.less +66 -66
- package/lib/css/components/links.less +4 -4
- package/lib/css/components/menu.less +27 -38
- package/lib/css/components/navigation.less +114 -117
- package/lib/css/components/notices.less +77 -77
- package/lib/css/components/page-titles.less +39 -36
- package/lib/css/components/pagination.less +44 -47
- package/lib/css/components/post-summary.less +62 -55
- package/lib/css/components/tags.less +177 -211
- package/lib/css/components/toggle-switches.less +5 -4
- package/lib/css/components/topbar.less +10 -4
- package/lib/css/components/uploader.less +43 -53
- package/lib/css/components/user-cards.less +5 -1
- package/lib/css/stacks-static.less +2 -0
- package/package.json +12 -12
|
@@ -7,14 +7,14 @@
|
|
|
7
7
|
// visit https://stackoverflow.design/
|
|
8
8
|
//
|
|
9
9
|
.construct-notice-component() {
|
|
10
|
-
background: var(--
|
|
11
|
-
border-color: var(--
|
|
10
|
+
background: var(--_no-bg, var(--black-050));
|
|
11
|
+
border-color: var(--_no-bc, var(--bc-medium));
|
|
12
12
|
border-style: solid;
|
|
13
|
-
color: var(--
|
|
13
|
+
color: var(--_no-fc, var(--fc-medium));
|
|
14
14
|
font-size: var(--fs-body1);
|
|
15
15
|
|
|
16
16
|
code {
|
|
17
|
-
background: var(--
|
|
17
|
+
background: var(--_no-code-bg, transparent);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
& &--btn {
|
|
@@ -23,142 +23,142 @@
|
|
|
23
23
|
|
|
24
24
|
&:focus,
|
|
25
25
|
&:hover {
|
|
26
|
-
background: var(--
|
|
26
|
+
background: var(--_no-btn-focus-bg, var(--black-100));
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
&:active {
|
|
30
|
-
background: var(--
|
|
30
|
+
background: var(--_no-btn-active-bg, var(--black-150));
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
&:not(&__important) {
|
|
35
|
-
.dark-mode({ --
|
|
36
|
-
.highcontrast-mode({ --
|
|
37
|
-
.highcontrast-dark-mode({ --
|
|
35
|
+
.dark-mode({ --_no-bc: var(--_no-bg); });
|
|
36
|
+
.highcontrast-mode({ --_no-bc: currentColor; });
|
|
37
|
+
.highcontrast-dark-mode({ --_no-bc: currentColor; });
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
&__important {
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
41
|
+
--_no-bc: var(--_no-bg);
|
|
42
|
+
--_no-bg: var(--black-700);
|
|
43
|
+
--_no-fc: var(--white);
|
|
44
|
+
--_no-btn-focus-bg: var(--black-800);
|
|
45
|
+
--_no-btn-active-bg: var(--black-900);
|
|
46
46
|
|
|
47
|
-
.highcontrast-mode({ --
|
|
47
|
+
.highcontrast-mode({ --_no-bc: var(--_no-bg); });
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
&__danger {
|
|
51
|
-
--
|
|
52
|
-
--
|
|
53
|
-
--
|
|
54
|
-
--
|
|
51
|
+
--_no-bc: var(--red-200);
|
|
52
|
+
--_no-bg: var(--red-050);
|
|
53
|
+
--_no-btn-focus-bg: var(--red-100);
|
|
54
|
+
--_no-btn-active-bg: var(--red-200);
|
|
55
55
|
}
|
|
56
56
|
&__danger:not(&__important) {
|
|
57
57
|
.highcontrast-mode({
|
|
58
|
-
--
|
|
58
|
+
--_no-bg: var(--red-200);
|
|
59
59
|
});
|
|
60
60
|
}
|
|
61
61
|
&__danger&__important {
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
--
|
|
65
|
-
--
|
|
62
|
+
--_no-bc: var(--_no-bg);
|
|
63
|
+
--_no-bg: var(--red-500);
|
|
64
|
+
--_no-btn-focus-bg: var(--red-600);
|
|
65
|
+
--_no-btn-active-bg: var(--red-700);
|
|
66
66
|
|
|
67
67
|
.dark-mode({
|
|
68
|
-
--
|
|
69
|
-
--
|
|
68
|
+
--_no-bg: var(--red-400);
|
|
69
|
+
--_no-fc: var(--black-900);
|
|
70
70
|
});
|
|
71
71
|
.highcontrast-dark-mode({
|
|
72
|
-
--
|
|
73
|
-
--
|
|
72
|
+
--_no-bg: var(--red-500);
|
|
73
|
+
--_no-fc: var(--white);
|
|
74
74
|
});
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
&__info {
|
|
78
|
-
--
|
|
79
|
-
--
|
|
80
|
-
--
|
|
81
|
-
--
|
|
82
|
-
--
|
|
78
|
+
--_no-bc: var(--theme-secondary-150);
|
|
79
|
+
--_no-bg: var(--theme-secondary-050);
|
|
80
|
+
--_no-btn-focus-bg: var(--theme-secondary-100);
|
|
81
|
+
--_no-btn-active-bg: var(--theme-secondary-150);
|
|
82
|
+
--_no-code-bg: var(--theme-secondary-150);
|
|
83
83
|
}
|
|
84
84
|
&__info:not(&__important) {
|
|
85
85
|
.highcontrast-mode({
|
|
86
|
-
--
|
|
86
|
+
--_no-bg: var(--theme-secondary-100);
|
|
87
87
|
});
|
|
88
88
|
.highcontrast-dark-mode({
|
|
89
|
-
--
|
|
89
|
+
--_no-bg: var(--theme-secondary-100);
|
|
90
90
|
});
|
|
91
91
|
}
|
|
92
92
|
&__info&__important {
|
|
93
|
-
--
|
|
94
|
-
--
|
|
95
|
-
--
|
|
96
|
-
--
|
|
93
|
+
--_no-bc: var(--_no-bg);
|
|
94
|
+
--_no-bg: var(--theme-secondary-400);
|
|
95
|
+
--_no-btn-focus-bg: var(--theme-secondary-500);
|
|
96
|
+
--_no-btn-active-bg: var(--theme-secondary-600);
|
|
97
97
|
|
|
98
98
|
.dark-mode({
|
|
99
|
-
--
|
|
100
|
-
--
|
|
99
|
+
--_no-bg: var(--theme-secondary-300);
|
|
100
|
+
--_no-fc: var(--black-900);
|
|
101
101
|
});
|
|
102
102
|
.highcontrast-dark-mode({
|
|
103
|
-
--
|
|
104
|
-
--
|
|
103
|
+
--_no-bg: var(--theme-secondary-400);
|
|
104
|
+
--_no-fc: var(--white);
|
|
105
105
|
});
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
&__success {
|
|
109
|
-
--
|
|
110
|
-
--
|
|
111
|
-
--
|
|
112
|
-
--
|
|
109
|
+
--_no-bc: var(--green-200);
|
|
110
|
+
--_no-bg: var(--green-050);
|
|
111
|
+
--_no-btn-focus-bg: var(--green-100);
|
|
112
|
+
--_no-btn-active-bg: var(--green-200);
|
|
113
113
|
}
|
|
114
114
|
&__success:not(&__important) {
|
|
115
115
|
.highcontrast-mode({
|
|
116
|
-
--
|
|
116
|
+
--_no-bg: var(--green-200);
|
|
117
117
|
});
|
|
118
118
|
}
|
|
119
119
|
&__success&__important {
|
|
120
|
-
--
|
|
121
|
-
--
|
|
122
|
-
--
|
|
123
|
-
--
|
|
124
|
-
--
|
|
120
|
+
--_no-bc: var(--_no-bg);
|
|
121
|
+
--_no-bg: var(--green-400);
|
|
122
|
+
--_no-fc: var(--black-900);
|
|
123
|
+
--_no-btn-focus-bg: var(--green-500);
|
|
124
|
+
--_no-btn-active-bg: var(--green-600);
|
|
125
125
|
|
|
126
126
|
.dark-mode({
|
|
127
|
-
--
|
|
128
|
-
--
|
|
127
|
+
--_no-bg: var(--green-500);
|
|
128
|
+
--_no-fc: var(--white);
|
|
129
129
|
});
|
|
130
130
|
.highcontrast-mode({
|
|
131
|
-
--
|
|
132
|
-
--
|
|
131
|
+
--_no-bg: var(--green-500);
|
|
132
|
+
--_no-fc: var(--white);
|
|
133
133
|
});
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
&__warning {
|
|
137
|
-
--
|
|
138
|
-
--
|
|
139
|
-
--
|
|
140
|
-
--
|
|
141
|
-
--
|
|
137
|
+
--_no-bc: var(--yellow-300);
|
|
138
|
+
--_no-bg: var(--yellow-050);
|
|
139
|
+
--_no-btn-focus-bg: var(--yellow-200);
|
|
140
|
+
--_no-btn-active-bg: var(--yellow-300);
|
|
141
|
+
--_no-code-bg: var(--yellow-200);
|
|
142
142
|
}
|
|
143
143
|
&__warning:not(&__important) {
|
|
144
144
|
.highcontrast-mode({
|
|
145
|
-
--
|
|
145
|
+
--_no-bg: var(--yellow-200);
|
|
146
146
|
});
|
|
147
147
|
}
|
|
148
148
|
&__warning&__important {
|
|
149
|
-
--
|
|
150
|
-
--
|
|
151
|
-
--
|
|
152
|
-
--
|
|
153
|
-
--
|
|
149
|
+
--_no-bc: var(--_no-bg);
|
|
150
|
+
--_no-bg: var(--yellow-400);
|
|
151
|
+
--_no-btn-focus-bg: var(--yellow-500);
|
|
152
|
+
--_no-btn-active-bg: var(--yellow-600);
|
|
153
|
+
--_no-fc: var(--black-900);
|
|
154
154
|
|
|
155
155
|
.dark-mode({
|
|
156
|
-
--
|
|
157
|
-
--
|
|
156
|
+
--_no-bg: var(--yellow-600);
|
|
157
|
+
--_no-fc: var(--white);
|
|
158
158
|
});
|
|
159
159
|
.highcontrast-mode({
|
|
160
|
-
--
|
|
161
|
-
--
|
|
160
|
+
--_no-bg: var(--yellow-700);
|
|
161
|
+
--_no-fc: var(--white);
|
|
162
162
|
});
|
|
163
163
|
}
|
|
164
164
|
}
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
// This would reduce the amount of CSS we ship to the client and simplify our codebase
|
|
169
169
|
.s-banner {
|
|
170
170
|
.construct-notice-component();
|
|
171
|
-
--
|
|
171
|
+
--_no-x-offset: 0;
|
|
172
172
|
// When we use .s-banner, we need to adjust the padding-top on
|
|
173
173
|
// the body tag. This class correctly adjusts the body padding ONLY if
|
|
174
174
|
// the notice is one line. If it wraps to multiple lines, more classes or
|
|
@@ -188,12 +188,12 @@
|
|
|
188
188
|
}
|
|
189
189
|
// If you want to hide and reveal the banner
|
|
190
190
|
&[aria-hidden="true"] {
|
|
191
|
-
--
|
|
191
|
+
--_no-x-offset: -50px; // TODO convert to su vars
|
|
192
192
|
visibility: hidden;
|
|
193
193
|
opacity: 0;
|
|
194
194
|
}
|
|
195
195
|
&[aria-hidden="false"] {
|
|
196
|
-
--
|
|
196
|
+
--_no-x-offset: 49px; // TODO convert to su vars
|
|
197
197
|
visibility: visible;
|
|
198
198
|
opacity: 1;
|
|
199
199
|
}
|
|
@@ -211,8 +211,8 @@
|
|
|
211
211
|
position: fixed;
|
|
212
212
|
width: 100%;
|
|
213
213
|
z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
|
|
214
|
-
-webkit-transform: translate3d(0, var(--
|
|
215
|
-
transform: translate3d(0, var(--
|
|
214
|
+
-webkit-transform: translate3d(0, var(--_no-x-offset), 0);
|
|
215
|
+
transform: translate3d(0, var(--_no-x-offset), 0);
|
|
216
216
|
}
|
|
217
217
|
|
|
218
218
|
// Notice
|
|
@@ -11,50 +11,53 @@
|
|
|
11
11
|
// ----------------------------------------------------------------------------
|
|
12
12
|
|
|
13
13
|
.s-page-title {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
14
|
+
--_pt-ai: flex-end;
|
|
15
|
+
--_pt-fd: row;
|
|
16
|
+
--_pt-actions-ml: var(--su8);
|
|
17
|
+
--_pt-actions-mt: unset;
|
|
18
|
+
--_pt-breadcrums-mb: var(--su8);
|
|
19
|
+
|
|
20
|
+
// CONTEXTUAL STYLES
|
|
21
|
+
#stacks-internals #screen-sm({
|
|
22
|
+
--_pt-breadcrums-mb: var(--su2);
|
|
23
|
+
});
|
|
22
24
|
#stacks-internals #screen-md({
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
--_pt-ai: flex-start;
|
|
26
|
+
--_pt-fd: column;
|
|
27
|
+
--_pt-actions-ml: 0;
|
|
28
|
+
--_pt-actions-mt: var(--su8);
|
|
25
29
|
});
|
|
26
30
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
margin-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
line-height: var(--lh-sm);
|
|
33
|
-
font-weight: normal;
|
|
31
|
+
// CHILD ELEMENTS
|
|
32
|
+
& &--actions {
|
|
33
|
+
margin-left: var(--_pt-actions-ml);
|
|
34
|
+
margin-top: var(--_pt-actions-mt);
|
|
35
|
+
flex-shrink: 0;
|
|
34
36
|
}
|
|
35
|
-
|
|
36
|
-
.s-page-title--description {
|
|
37
|
+
& &--description {
|
|
37
38
|
color: var(--fc-light);
|
|
38
|
-
margin-top: var(--su4);
|
|
39
|
-
margin-bottom: 0;
|
|
40
39
|
font-size: var(--fs-body2);
|
|
40
|
+
margin-bottom: 0;
|
|
41
|
+
margin-top: var(--su4);
|
|
41
42
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
margin-left: 0;
|
|
50
|
-
});
|
|
43
|
+
& &--header {
|
|
44
|
+
color: var(--fc-dark);
|
|
45
|
+
font-size: var(--fs-headline1);
|
|
46
|
+
font-weight: normal;
|
|
47
|
+
line-height: var(--lh-sm);
|
|
48
|
+
margin: 0;
|
|
49
|
+
margin-bottom: 0; // TODO: investigate why this exists. I assume it's so margin-bottom isn't overrode, but 🤷♂️
|
|
51
50
|
}
|
|
52
|
-
|
|
53
51
|
.s-breadcrumbs {
|
|
54
|
-
margin-bottom: var(--
|
|
55
|
-
|
|
56
|
-
#stacks-internals #screen-sm({
|
|
57
|
-
margin-bottom: var(--su2);
|
|
58
|
-
});
|
|
52
|
+
margin-bottom: var(--_pt-breadcrums-mb);
|
|
59
53
|
}
|
|
54
|
+
|
|
55
|
+
align-items: var(--_pt-ai);
|
|
56
|
+
flex-direction: var(--_pt-fd);
|
|
57
|
+
|
|
58
|
+
border-bottom: 1px solid var(--bc-medium);
|
|
59
|
+
display: flex;
|
|
60
|
+
justify-content: space-between;
|
|
61
|
+
padding-bottom: var(--su16);
|
|
62
|
+
width: 100%;
|
|
60
63
|
}
|
|
@@ -1,55 +1,52 @@
|
|
|
1
|
-
//
|
|
2
|
-
// STACK OVERFLOW
|
|
3
|
-
// PAGINATION
|
|
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
|
-
// TABLE OF CONTENTS
|
|
10
|
-
// • BASE STYLE
|
|
11
|
-
//
|
|
12
|
-
// ============================================================================
|
|
13
|
-
// $ BASE STYLE
|
|
14
|
-
// ----------------------------------------------------------------------------
|
|
15
1
|
.s-pagination {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
margin-right: var(--su2);
|
|
25
|
-
padding: 0 var(--su8);
|
|
26
|
-
background-color: transparent;
|
|
27
|
-
border-radius: var(--br-sm);
|
|
28
|
-
border: 1px solid var(--bc-medium);
|
|
29
|
-
font-size: var(--fs-body1);
|
|
30
|
-
line-height: var(--lh-xl);
|
|
31
|
-
color: var(--fc-medium);
|
|
2
|
+
& &--item {
|
|
3
|
+
--_pa-item-bg: transparent;
|
|
4
|
+
--_pa-item-bc: var(--bc-medium);
|
|
5
|
+
--_pa-item-fc: var(--fc-medium);
|
|
6
|
+
// hover
|
|
7
|
+
--_pa-item-bg-hover: var(--black-100);
|
|
8
|
+
--_pa-item-bc-hover: var(--bc-darker);
|
|
9
|
+
--_pa-item-fc-hover: var(--fc-dark);
|
|
32
10
|
|
|
33
|
-
|
|
11
|
+
.highcontrast-mode({ text-decoration: none; });
|
|
34
12
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
13
|
+
// MODIFIERS
|
|
14
|
+
&.is-selected {
|
|
15
|
+
--_pa-item-bg: var(--theme-primary-color);
|
|
16
|
+
--_pa-item-bc: transparent;
|
|
17
|
+
--_pa-item-fc: var(--white);
|
|
18
|
+
}
|
|
19
|
+
&&__clear {
|
|
20
|
+
--_pa-item-bg: transparent;
|
|
21
|
+
--_pa-item-bc: transparent;
|
|
22
|
+
--_pa-item-fc: inherit;
|
|
23
|
+
}
|
|
24
|
+
// override hover styles to match base styles
|
|
25
|
+
&.is-selected,
|
|
26
|
+
&&__clear {
|
|
27
|
+
--_pa-item-bc-hover: var(--_pa-item-bc);
|
|
28
|
+
--_pa-item-bg-hover: var(--_pa-item-bg);
|
|
29
|
+
--_pa-item-fc-hover: var(--_pa-item-fc);
|
|
30
|
+
}
|
|
46
31
|
|
|
47
|
-
|
|
48
|
-
&,
|
|
32
|
+
// INTERACTION
|
|
49
33
|
&:hover {
|
|
50
|
-
color:
|
|
51
|
-
border-color:
|
|
52
|
-
|
|
34
|
+
background-color: var(--_pa-item-bg-hover);
|
|
35
|
+
border-color: var(--_pa-item-bc-hover);
|
|
36
|
+
color: var(--_pa-item-fc-hover);
|
|
53
37
|
}
|
|
38
|
+
|
|
39
|
+
background-color: var(--_pa-item-bg);
|
|
40
|
+
border: 1px solid var(--_pa-item-bc);
|
|
41
|
+
color: var(--_pa-item-fc);
|
|
42
|
+
|
|
43
|
+
border-radius: var(--br-sm);
|
|
44
|
+
font-size: var(--fs-body1);
|
|
45
|
+
line-height: var(--lh-xl);
|
|
46
|
+
padding: 0 var(--su8);
|
|
54
47
|
}
|
|
48
|
+
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-wrap: wrap;
|
|
51
|
+
gap: var(--su4);
|
|
55
52
|
}
|
|
@@ -334,59 +334,34 @@
|
|
|
334
334
|
background-color: var(--red-600);
|
|
335
335
|
}
|
|
336
336
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
337
|
+
.s-post-summary--meta-tags {
|
|
338
|
+
// TODO: remove rule for `a`, `.post-tag` once Core replaces `.post-tag` with `.s-tag`
|
|
339
|
+
a,
|
|
340
|
+
.post-tag,
|
|
341
|
+
.s-tag {
|
|
342
|
+
&,
|
|
343
|
+
&:hover,
|
|
344
|
+
&:active,
|
|
345
|
+
&:focus {
|
|
346
|
+
background-color: var(--black-075);
|
|
347
|
+
}
|
|
345
348
|
}
|
|
346
|
-
|
|
347
349
|
}
|
|
348
350
|
}
|
|
349
351
|
|
|
350
352
|
.s-post-summary__ignored {
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
.s-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
color: var(--black-
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
&.has-answers {
|
|
364
|
-
color: var(--black-600);
|
|
365
|
-
border: 1px solid var(--black-075);
|
|
366
|
-
background-color: var(--black-075);
|
|
367
|
-
|
|
368
|
-
.has-accepted-answer {
|
|
369
|
-
color: var(--black-600);
|
|
370
|
-
background-color: var(--black-075);
|
|
371
|
-
border-color: var(--black-075);
|
|
372
|
-
}
|
|
353
|
+
.s-post-summary--meta-tags {
|
|
354
|
+
// TODO: remove rule for `a`, `.post-tag` once Core replaces `.post-tag` with `.s-tag`
|
|
355
|
+
a,
|
|
356
|
+
.post-tag,
|
|
357
|
+
.s-tag {
|
|
358
|
+
&,
|
|
359
|
+
&:hover,
|
|
360
|
+
&:active,
|
|
361
|
+
&:focus {
|
|
362
|
+
background-color: var(--black-050);
|
|
373
363
|
}
|
|
374
364
|
}
|
|
375
|
-
|
|
376
|
-
.s-post-summary--stats-item__emphasized {
|
|
377
|
-
color: var(--black-500);
|
|
378
|
-
}
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
// TODO: remove rule for `a` once Core replaces `.post-tag` with `.s-tag`
|
|
382
|
-
.s-post-summary--meta-tags > a,
|
|
383
|
-
.s-post-summary--meta-tags > .s-tag {
|
|
384
|
-
&,
|
|
385
|
-
&:hover,
|
|
386
|
-
&:active,
|
|
387
|
-
&:focus {
|
|
388
|
-
background-color: var(--black-050);
|
|
389
|
-
}
|
|
390
365
|
}
|
|
391
366
|
}
|
|
392
367
|
|
|
@@ -411,15 +386,47 @@
|
|
|
411
386
|
color: var(--black-600);
|
|
412
387
|
}
|
|
413
388
|
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
389
|
+
.s-post-summary--meta-tags {
|
|
390
|
+
// TODO: remove rule for `a`, `.post-tag` once Core replaces `.post-tag` with `.s-tag`
|
|
391
|
+
a,
|
|
392
|
+
.post-tag,
|
|
393
|
+
.s-tag {
|
|
394
|
+
&,
|
|
395
|
+
&:hover,
|
|
396
|
+
&:active,
|
|
397
|
+
&:focus {
|
|
398
|
+
border-color: transparent;
|
|
399
|
+
color: var(--black-600);
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.s-post-summary--stats {
|
|
405
|
+
color: var(--black-500);
|
|
406
|
+
|
|
407
|
+
.s-post-summary--stats-item {
|
|
408
|
+
|
|
409
|
+
&.is-warm,
|
|
410
|
+
&.is-hot,
|
|
411
|
+
&.is-supernova {
|
|
412
|
+
color: var(--black-500);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
&.has-answers {
|
|
416
|
+
color: var(--black-500);
|
|
417
|
+
background-color: transparent;
|
|
418
|
+
border-color: var(--black-300);
|
|
419
|
+
|
|
420
|
+
&.has-accepted-answer {
|
|
421
|
+
color: var(--black-600);
|
|
422
|
+
background-color: var(--black-075);
|
|
423
|
+
border-color: transparent;
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.s-post-summary--stats-item__emphasized {
|
|
429
|
+
color: var(--black-500);
|
|
423
430
|
}
|
|
424
431
|
}
|
|
425
432
|
|