@stackoverflow/stacks 2.5.8 → 2.6.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 +46 -55
- package/dist/css/stacks.min.css +1 -1
- package/lib/components/badge/badge.less +269 -258
- package/lib/components/button/button.less +5 -3
- package/lib/components/input_textarea/input_textarea.less +150 -150
- package/lib/components/link/link.less +136 -136
- package/lib/components/sidebar-widget/sidebar-widget.less +34 -73
- package/package.json +2 -2
|
@@ -1,150 +1,150 @@
|
|
|
1
|
-
.s-input,
|
|
2
|
-
.s-textarea {
|
|
3
|
-
--_in-bc: var(--bc-darker);
|
|
4
|
-
--_in-bg: var(--white);
|
|
5
|
-
--_in-br: var(--br-md);
|
|
6
|
-
--_in-c: unset;
|
|
7
|
-
--_in-fc: var(--fc-dark);
|
|
8
|
-
--_in-fs: var(--fs-body1);
|
|
9
|
-
--_in-o: unset;
|
|
10
|
-
--_in-px: 0.7em;
|
|
11
|
-
--_in-py: 0.6em;
|
|
12
|
-
--_in-placeholder-fc: var(--black-300);
|
|
13
|
-
|
|
14
|
-
// CONTEXTUAL STYLES
|
|
15
|
-
@supports (-webkit-overflow-scrolling: touch) {
|
|
16
|
-
--_in-fs: var(--su-static16); // 16px — Increase font size for mobile safari. This keeps our inputs from zooming the page while focused.
|
|
17
|
-
--_in-px: 0.55em;
|
|
18
|
-
--_in-py: 0.36em;
|
|
19
|
-
|
|
20
|
-
&::-webkit-input-placeholder {
|
|
21
|
-
line-height: normal !important;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.highcontrast-mode({
|
|
26
|
-
--_in-bc: var(--black);
|
|
27
|
-
--_in-placeholder-fc: var(--black-400);
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
// MODIFIERS
|
|
31
|
-
fieldset[disabled] &,
|
|
32
|
-
&[disabled],
|
|
33
|
-
&[readonly],
|
|
34
|
-
.is-readonly & {
|
|
35
|
-
--_in-c: not-allowed;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
fieldset[disabled] &,
|
|
39
|
-
&[disabled] {
|
|
40
|
-
--_in-o: var(--_o-disabled-static);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
&[readonly],
|
|
44
|
-
.is-readonly & {
|
|
45
|
-
.highcontrast-mode({
|
|
46
|
-
--_in-fc: var(--fc-medium);
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
--_in-bg: var(--black-150);
|
|
50
|
-
--_in-bc: var(--bc-light);
|
|
51
|
-
--_in-fc: var(--black-400);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.validation-states(
|
|
55
|
-
in,
|
|
56
|
-
{ .highcontrast-mode({ --_in-bc: var(--red-400); }); },
|
|
57
|
-
{ .highcontrast-mode({ --_in-bc: var(--green-400); }); },
|
|
58
|
-
{ .highcontrast-mode({ --_in-bc: var(--yellow-500); }); }
|
|
59
|
-
);
|
|
60
|
-
|
|
61
|
-
// Sizes
|
|
62
|
-
&&__sm {
|
|
63
|
-
.size-styles(sm; in; @styles: fs);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
&&__md {
|
|
67
|
-
@supports (-webkit-overflow-scrolling: touch) {
|
|
68
|
-
--_in-fs: calc(var(--su-static16) + var(--su-static1)); // 17px
|
|
69
|
-
--_in-py: 0.4em;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.size-styles(md; in; @styles: br, fs);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
&&__lg {
|
|
76
|
-
.size-styles(lg; in; @styles: br, fs);
|
|
77
|
-
--_in-px: 0.6em;
|
|
78
|
-
--_in-py: 0.45em;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
&&__xl {
|
|
82
|
-
.size-styles(xl; in; @styles: br, fs);
|
|
83
|
-
--_in-px: 0.5em;
|
|
84
|
-
--_in-py: 0.4em;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
// CHILD ELEMENTS
|
|
88
|
-
.webkit-autofill();
|
|
89
|
-
|
|
90
|
-
&::placeholder,
|
|
91
|
-
&::-webkit-input-placeholder {
|
|
92
|
-
color: var(--_in-placeholder-fc);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
&::placeholder {
|
|
96
|
-
opacity: 1;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
&&__creditcard,
|
|
100
|
-
&&__search {
|
|
101
|
-
--_in-pl: var(--su-static32);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
// INTERACTION
|
|
105
|
-
// Note: We're applying the focus styles both on `:focus` and `:focus-within` since this component can sometimes be used on the parent of an input such as in our tag selector in Core.
|
|
106
|
-
&:focus,
|
|
107
|
-
&:focus-within {
|
|
108
|
-
.focus-styles();
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
@scrollbar-styles();
|
|
112
|
-
background-color: var(--_in-bg);
|
|
113
|
-
border: var(--su-static1) solid var(--_in-bc);
|
|
114
|
-
border-radius: var(--_in-br);
|
|
115
|
-
color: var(--_in-fc);
|
|
116
|
-
cursor: var(--_in-c);
|
|
117
|
-
font-size: var(--_in-fs);
|
|
118
|
-
opacity: var(--_in-o);
|
|
119
|
-
padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
|
|
120
|
-
|
|
121
|
-
-webkit-appearance: none; // Removes shadows we don't want in mobile Safari
|
|
122
|
-
font-family: inherit;
|
|
123
|
-
margin: 0; // A guard against Core's default margins
|
|
124
|
-
width: 100%;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.s-input {
|
|
128
|
-
.input-states({
|
|
129
|
-
padding-right: var(--su32);
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
&&__md {
|
|
133
|
-
--_in-py: 0.5em;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.s-textarea {
|
|
138
|
-
.input-states({
|
|
139
|
-
padding-right: var(--su48);
|
|
140
|
-
});
|
|
141
|
-
|
|
142
|
-
&&__md {
|
|
143
|
-
--_in-py: 0.72em;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
~ .s-input-icon {
|
|
147
|
-
right: 1.5em;
|
|
148
|
-
top: 1.5em;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
1
|
+
.s-input,
|
|
2
|
+
.s-textarea {
|
|
3
|
+
--_in-bc: var(--bc-darker);
|
|
4
|
+
--_in-bg: var(--white);
|
|
5
|
+
--_in-br: var(--br-md);
|
|
6
|
+
--_in-c: unset;
|
|
7
|
+
--_in-fc: var(--fc-dark);
|
|
8
|
+
--_in-fs: var(--fs-body1);
|
|
9
|
+
--_in-o: unset;
|
|
10
|
+
--_in-px: 0.7em;
|
|
11
|
+
--_in-py: 0.6em;
|
|
12
|
+
--_in-placeholder-fc: var(--black-300);
|
|
13
|
+
|
|
14
|
+
// CONTEXTUAL STYLES
|
|
15
|
+
@supports (-webkit-overflow-scrolling: touch) {
|
|
16
|
+
--_in-fs: var(--su-static16); // 16px — Increase font size for mobile safari. This keeps our inputs from zooming the page while focused.
|
|
17
|
+
--_in-px: 0.55em;
|
|
18
|
+
--_in-py: 0.36em;
|
|
19
|
+
|
|
20
|
+
&::-webkit-input-placeholder {
|
|
21
|
+
line-height: normal !important;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.highcontrast-mode({
|
|
26
|
+
--_in-bc: var(--black);
|
|
27
|
+
--_in-placeholder-fc: var(--black-400);
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
// MODIFIERS
|
|
31
|
+
fieldset[disabled] &,
|
|
32
|
+
&[disabled],
|
|
33
|
+
&[readonly],
|
|
34
|
+
.is-readonly & {
|
|
35
|
+
--_in-c: not-allowed;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
fieldset[disabled] &,
|
|
39
|
+
&[disabled] {
|
|
40
|
+
--_in-o: var(--_o-disabled-static);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&[readonly],
|
|
44
|
+
.is-readonly & {
|
|
45
|
+
.highcontrast-mode({
|
|
46
|
+
--_in-fc: var(--fc-medium);
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
--_in-bg: var(--black-150);
|
|
50
|
+
--_in-bc: var(--bc-light);
|
|
51
|
+
--_in-fc: var(--black-400);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.validation-states(
|
|
55
|
+
in,
|
|
56
|
+
{ .highcontrast-mode({ --_in-bc: var(--red-400); }); },
|
|
57
|
+
{ .highcontrast-mode({ --_in-bc: var(--green-400); }); },
|
|
58
|
+
{ .highcontrast-mode({ --_in-bc: var(--yellow-500); }); }
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
// Sizes
|
|
62
|
+
&&__sm {
|
|
63
|
+
.size-styles(sm; in; @styles: fs);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&&__md {
|
|
67
|
+
@supports (-webkit-overflow-scrolling: touch) {
|
|
68
|
+
--_in-fs: calc(var(--su-static16) + var(--su-static1)); // 17px
|
|
69
|
+
--_in-py: 0.4em;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.size-styles(md; in; @styles: br, fs);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&&__lg {
|
|
76
|
+
.size-styles(lg; in; @styles: br, fs);
|
|
77
|
+
--_in-px: 0.6em;
|
|
78
|
+
--_in-py: 0.45em;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&&__xl {
|
|
82
|
+
.size-styles(xl; in; @styles: br, fs);
|
|
83
|
+
--_in-px: 0.5em;
|
|
84
|
+
--_in-py: 0.4em;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// CHILD ELEMENTS
|
|
88
|
+
.webkit-autofill();
|
|
89
|
+
|
|
90
|
+
&::placeholder,
|
|
91
|
+
&::-webkit-input-placeholder {
|
|
92
|
+
color: var(--_in-placeholder-fc);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&::placeholder {
|
|
96
|
+
opacity: 1;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&&__creditcard,
|
|
100
|
+
&&__search {
|
|
101
|
+
--_in-pl: var(--su-static32);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// INTERACTION
|
|
105
|
+
// Note: We're applying the focus styles both on `:focus` and `:focus-within` since this component can sometimes be used on the parent of an input such as in our tag selector in Core.
|
|
106
|
+
&:focus,
|
|
107
|
+
&:focus-within {
|
|
108
|
+
.focus-styles();
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@scrollbar-styles();
|
|
112
|
+
background-color: var(--_in-bg);
|
|
113
|
+
border: var(--su-static1) solid var(--_in-bc);
|
|
114
|
+
border-radius: var(--_in-br);
|
|
115
|
+
color: var(--_in-fc);
|
|
116
|
+
cursor: var(--_in-c);
|
|
117
|
+
font-size: var(--_in-fs);
|
|
118
|
+
opacity: var(--_in-o);
|
|
119
|
+
padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
|
|
120
|
+
|
|
121
|
+
-webkit-appearance: none; // Removes shadows we don't want in mobile Safari
|
|
122
|
+
font-family: inherit;
|
|
123
|
+
margin: 0; // A guard against Core's default margins
|
|
124
|
+
width: 100%;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.s-input {
|
|
128
|
+
.input-states({
|
|
129
|
+
padding-right: var(--su32);
|
|
130
|
+
});
|
|
131
|
+
|
|
132
|
+
&&__md {
|
|
133
|
+
--_in-py: 0.5em;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.s-textarea {
|
|
138
|
+
.input-states({
|
|
139
|
+
padding-right: var(--su48);
|
|
140
|
+
});
|
|
141
|
+
|
|
142
|
+
&&__md {
|
|
143
|
+
--_in-py: 0.72em;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
~ .s-input-icon {
|
|
147
|
+
right: 1.5em;
|
|
148
|
+
top: 1.5em;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
@@ -1,136 +1,136 @@
|
|
|
1
|
-
// TODO we *really* shouldn't be apply styles directly onto `<a>` like this, but
|
|
2
|
-
// it's tech debt that'll take some doing in consumer's code to pay down.
|
|
3
|
-
a {
|
|
4
|
-
&:visited {
|
|
5
|
-
// We're target these specific selectors to avoid affecting the visited state of stacks components
|
|
6
|
-
// not specified here. See for https://github.com/StackExchange/Stacks/pull/1740#discussion_r1698389312
|
|
7
|
-
// TODO remove .post-tag, .badge, .badge-tag reference once core no longer requires them
|
|
8
|
-
&:not([class*="s-"]):not(.post-tag):not(.badge):not(.badge-tag),
|
|
9
|
-
&.s-link,
|
|
10
|
-
&.s-sidebarwidget--action,
|
|
11
|
-
&.s-user-card--link {
|
|
12
|
-
&:hover {
|
|
13
|
-
color: var(--_li-fc-hover-visited);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
color: var(--_li-fc-visited);
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
a,
|
|
22
|
-
.s-link {
|
|
23
|
-
--_li-fc: var(--theme-link-color, var(--theme-secondary-400));
|
|
24
|
-
--_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
|
|
25
|
-
--_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
|
|
26
|
-
--_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));
|
|
27
|
-
|
|
28
|
-
// CONTEXTUAL STYLES
|
|
29
|
-
.highcontrast-mode({
|
|
30
|
-
text-decoration: underline;
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
// STATES
|
|
34
|
-
&.s-link {
|
|
35
|
-
// MODIFIERS
|
|
36
|
-
&__dropdown {
|
|
37
|
-
&:after {
|
|
38
|
-
border-width: var(--su-static4); // this needs to come before any below border modifications
|
|
39
|
-
border-bottom-width: 0;
|
|
40
|
-
border-color: currentColor transparent;
|
|
41
|
-
border-style: solid;
|
|
42
|
-
border-top-width: var(--su-static4);
|
|
43
|
-
content: "";
|
|
44
|
-
pointer-events: none;
|
|
45
|
-
position: absolute;
|
|
46
|
-
right: 0;
|
|
47
|
-
top: calc(50% - var(--su-static2));
|
|
48
|
-
z-index: var(--zi-active);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
padding-right: 0.9em;
|
|
52
|
-
position: relative;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&__underlined {
|
|
56
|
-
text-decoration: underline !important;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&__visited { // TODO can we get rid of this? It's only in 3 places in Core and seems to me it doesn't even serve a purpose.
|
|
60
|
-
--_li-fc: var(--theme-link-color-visited, var(--purple-500));
|
|
61
|
-
--_li-fc-hover: var(--theme-link-color-hover, var(--purple-600));
|
|
62
|
-
--_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
|
|
63
|
-
--_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
// VARIANTS
|
|
67
|
-
&__danger,
|
|
68
|
-
&__grayscale,
|
|
69
|
-
&__inherit,
|
|
70
|
-
&__muted {
|
|
71
|
-
--_li-fc-hover-visited: var(--_li-fc-hover);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
&__danger {
|
|
75
|
-
--_li-fc: var(--red-400);
|
|
76
|
-
--_li-fc-hover: var(--red-500);
|
|
77
|
-
--_li-fc-visited: var(--red-600);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
&__grayscale {
|
|
81
|
-
--_li-fc: var(--black-500);
|
|
82
|
-
--_li-fc-hover: var(--black-600);
|
|
83
|
-
--_li-fc-visited: var(--black-400);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
&__inherit {
|
|
87
|
-
--_li-fc: inherit !important;
|
|
88
|
-
--_li-fc-hover: inherit !important;
|
|
89
|
-
--_li-fc-visited: inherit !important;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
&__muted {
|
|
93
|
-
--_li-fc: var(--black-400);
|
|
94
|
-
--_li-fc-hover: var(--black-500);
|
|
95
|
-
--_li-fc-visited: var(--black-600);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
// MODIFIERS
|
|
100
|
-
fieldset[disabled] & {
|
|
101
|
-
box-shadow: none !important;
|
|
102
|
-
opacity: var(--_o-disabled-static);
|
|
103
|
-
pointer-events: none;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
// INTERACTION
|
|
107
|
-
&:active,
|
|
108
|
-
&:hover {
|
|
109
|
-
--_li-fc: var(--_li-fc-hover);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
color: var(--_li-fc);
|
|
113
|
-
cursor: pointer;
|
|
114
|
-
text-decoration: none;
|
|
115
|
-
user-select: auto;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.s-link {
|
|
119
|
-
button& {
|
|
120
|
-
&:focus {
|
|
121
|
-
outline: revert;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
appearance: none;
|
|
125
|
-
background: transparent;
|
|
126
|
-
border: 0;
|
|
127
|
-
font-family: inherit;
|
|
128
|
-
line-height: inherit;
|
|
129
|
-
padding: 0;
|
|
130
|
-
user-select: auto;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
p & {
|
|
134
|
-
text-decoration: underline;
|
|
135
|
-
}
|
|
136
|
-
}
|
|
1
|
+
// TODO we *really* shouldn't be apply styles directly onto `<a>` like this, but
|
|
2
|
+
// it's tech debt that'll take some doing in consumer's code to pay down.
|
|
3
|
+
a {
|
|
4
|
+
&:visited {
|
|
5
|
+
// We're target these specific selectors to avoid affecting the visited state of stacks components
|
|
6
|
+
// not specified here. See for https://github.com/StackExchange/Stacks/pull/1740#discussion_r1698389312
|
|
7
|
+
// TODO remove .post-tag, .badge, .badge-tag reference once core no longer requires them
|
|
8
|
+
&:not([class*="s-"]):not(.post-tag):not(.badge):not(.badge-tag),
|
|
9
|
+
&.s-link,
|
|
10
|
+
&.s-sidebarwidget--action,
|
|
11
|
+
&.s-user-card--link {
|
|
12
|
+
&:hover {
|
|
13
|
+
color: var(--_li-fc-hover-visited);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
color: var(--_li-fc-visited);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
a,
|
|
22
|
+
.s-link {
|
|
23
|
+
--_li-fc: var(--theme-link-color, var(--theme-secondary-400));
|
|
24
|
+
--_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
|
|
25
|
+
--_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
|
|
26
|
+
--_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));
|
|
27
|
+
|
|
28
|
+
// CONTEXTUAL STYLES
|
|
29
|
+
.highcontrast-mode({
|
|
30
|
+
text-decoration: underline;
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
// STATES
|
|
34
|
+
&.s-link {
|
|
35
|
+
// MODIFIERS
|
|
36
|
+
&__dropdown {
|
|
37
|
+
&:after {
|
|
38
|
+
border-width: var(--su-static4); // this needs to come before any below border modifications
|
|
39
|
+
border-bottom-width: 0;
|
|
40
|
+
border-color: currentColor transparent;
|
|
41
|
+
border-style: solid;
|
|
42
|
+
border-top-width: var(--su-static4);
|
|
43
|
+
content: "";
|
|
44
|
+
pointer-events: none;
|
|
45
|
+
position: absolute;
|
|
46
|
+
right: 0;
|
|
47
|
+
top: calc(50% - var(--su-static2));
|
|
48
|
+
z-index: var(--zi-active);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
padding-right: 0.9em;
|
|
52
|
+
position: relative;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&__underlined {
|
|
56
|
+
text-decoration: underline !important;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&__visited { // TODO can we get rid of this? It's only in 3 places in Core and seems to me it doesn't even serve a purpose.
|
|
60
|
+
--_li-fc: var(--theme-link-color-visited, var(--purple-500));
|
|
61
|
+
--_li-fc-hover: var(--theme-link-color-hover, var(--purple-600));
|
|
62
|
+
--_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
|
|
63
|
+
--_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// VARIANTS
|
|
67
|
+
&__danger,
|
|
68
|
+
&__grayscale,
|
|
69
|
+
&__inherit,
|
|
70
|
+
&__muted {
|
|
71
|
+
--_li-fc-hover-visited: var(--_li-fc-hover);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&__danger {
|
|
75
|
+
--_li-fc: var(--red-400);
|
|
76
|
+
--_li-fc-hover: var(--red-500);
|
|
77
|
+
--_li-fc-visited: var(--red-600);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&__grayscale {
|
|
81
|
+
--_li-fc: var(--black-500);
|
|
82
|
+
--_li-fc-hover: var(--black-600);
|
|
83
|
+
--_li-fc-visited: var(--black-400);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&__inherit {
|
|
87
|
+
--_li-fc: inherit !important;
|
|
88
|
+
--_li-fc-hover: inherit !important;
|
|
89
|
+
--_li-fc-visited: inherit !important;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&__muted {
|
|
93
|
+
--_li-fc: var(--black-400);
|
|
94
|
+
--_li-fc-hover: var(--black-500);
|
|
95
|
+
--_li-fc-visited: var(--black-600);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// MODIFIERS
|
|
100
|
+
fieldset[disabled] & {
|
|
101
|
+
box-shadow: none !important;
|
|
102
|
+
opacity: var(--_o-disabled-static);
|
|
103
|
+
pointer-events: none;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// INTERACTION
|
|
107
|
+
&:active,
|
|
108
|
+
&:hover {
|
|
109
|
+
--_li-fc: var(--_li-fc-hover);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
color: var(--_li-fc);
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
text-decoration: none;
|
|
115
|
+
user-select: auto;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.s-link {
|
|
119
|
+
button& {
|
|
120
|
+
&:focus {
|
|
121
|
+
outline: revert;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
appearance: none;
|
|
125
|
+
background: transparent;
|
|
126
|
+
border: 0;
|
|
127
|
+
font-family: inherit;
|
|
128
|
+
line-height: inherit;
|
|
129
|
+
padding: 0;
|
|
130
|
+
user-select: auto;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
p & {
|
|
134
|
+
text-decoration: underline;
|
|
135
|
+
}
|
|
136
|
+
}
|