@stackoverflow/stacks 2.8.6 → 3.0.0-beta.1
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/README.md +6 -1
- package/dist/css/stacks.css +61 -237
- package/dist/css/stacks.min.css +1 -1
- package/dist/js/stacks.js +0 -14
- package/dist/js/stacks.min.js +1 -1
- package/lib/atomic/border.less +2 -20
- package/lib/components/activity-indicator/activity-indicator.less +16 -11
- package/lib/components/avatar/avatar.less +9 -11
- package/lib/components/badge/badge.less +1 -1
- package/lib/components/block-link/block-link.less +1 -1
- package/lib/components/button/button.less +1 -1
- package/lib/components/button-group/button-group.less +1 -1
- package/lib/components/card/card.less +1 -1
- package/lib/components/checkbox_radio/checkbox_radio.less +1 -1
- package/lib/components/link-preview/link-preview.less +5 -5
- package/lib/components/modal/modal.less +1 -1
- package/lib/components/notice/notice.less +1 -1
- package/lib/components/pagination/pagination.less +1 -1
- package/lib/components/popover/popover.less +0 -98
- package/lib/components/popover/popover.ts +0 -6
- package/lib/components/popover/tooltip.ts +0 -12
- package/lib/components/post-summary/post-summary.less +1 -1
- package/lib/components/progress-bar/progress-bar.less +2 -2
- package/lib/components/prose/prose.less +2 -2
- package/lib/components/skeleton/skeleton.less +1 -1
- package/lib/components/tag/tag.less +4 -4
- package/lib/components/topbar/topbar.less +3 -3
- package/lib/components/uploader/uploader.less +3 -3
- package/lib/exports/constants-helpers.less +2 -3
- package/lib/exports/mixins.less +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
.s-activity-indicator {
|
|
2
|
-
--_ai-translucent: var(--translucent-secondary);
|
|
3
2
|
--_ai-bg: var(--theme-secondary-400);
|
|
4
3
|
--_ai-fc: var(--white);
|
|
4
|
+
--_ai-min-size: var(--su-static16);
|
|
5
|
+
--_ai-p: 0 calc(var(--su-static4) - var(--su-static1));
|
|
5
6
|
|
|
6
7
|
.highcontrast-mode({
|
|
7
8
|
--_ai-bg: var(--theme-secondary-500);
|
|
@@ -10,7 +11,6 @@
|
|
|
10
11
|
// VARIANTS
|
|
11
12
|
&&__danger {
|
|
12
13
|
--_ai-bg: var(--red-400);
|
|
13
|
-
--_ai-translucent: var(--translucent-error);
|
|
14
14
|
|
|
15
15
|
.highcontrast-mode({
|
|
16
16
|
--_ai-bg: var(--red-500);
|
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
|
|
20
20
|
&&__success {
|
|
21
21
|
--_ai-bg: var(--green-400);
|
|
22
|
-
--_ai-translucent: var(--translucent-success);
|
|
23
22
|
|
|
24
23
|
.highcontrast-mode({
|
|
25
24
|
--_ai-bg: var(--green-500);
|
|
@@ -29,7 +28,6 @@
|
|
|
29
28
|
&&__warning {
|
|
30
29
|
--_ai-bg: var(--yellow-400);
|
|
31
30
|
--_ai-fc: var(--_black-static);
|
|
32
|
-
--_ai-translucent: var(--translucent-warning);
|
|
33
31
|
|
|
34
32
|
.highcontrast-mode({
|
|
35
33
|
--_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
|
|
@@ -37,17 +35,24 @@
|
|
|
37
35
|
});
|
|
38
36
|
}
|
|
39
37
|
|
|
38
|
+
&&__sm {
|
|
39
|
+
--_ai-min-size: calc(var(--su-static8) + var(--su-static2));
|
|
40
|
+
--_ai-p: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
40
43
|
background-color: var(--_ai-bg);
|
|
41
|
-
box-shadow: 0 0 0 var(--su-static4) var(--_ai-translucent);
|
|
42
44
|
color: var(--_ai-fc);
|
|
45
|
+
min-width: var(--_ai-min-size);
|
|
46
|
+
min-height: var(--_ai-min-size);
|
|
47
|
+
padding: var(--_ai-p);
|
|
43
48
|
|
|
44
49
|
border-radius: 1000px;
|
|
45
|
-
display: inline-
|
|
50
|
+
display: inline-flex;
|
|
46
51
|
font-size: var(--fs-fine);
|
|
47
|
-
font-weight:
|
|
48
|
-
line-height: 1.1;
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
+
font-weight: 600;
|
|
53
|
+
line-height: 1.1;
|
|
54
|
+
text-align: center;
|
|
55
|
+
align-items: center;
|
|
56
|
+
justify-content: center;
|
|
52
57
|
text-transform: uppercase;
|
|
53
58
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
.s-avatar {
|
|
2
2
|
--_av-size: var(--su-static16);
|
|
3
3
|
--_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars
|
|
4
|
-
--_av-br: var(--br-sm);
|
|
5
4
|
--_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
|
|
6
5
|
--_av-scale-badge: 1;
|
|
7
6
|
|
|
@@ -18,14 +17,8 @@
|
|
|
18
17
|
|
|
19
18
|
// MODIFIERS
|
|
20
19
|
// Sizes
|
|
21
|
-
&&__32,
|
|
22
|
-
&&__48 {
|
|
23
|
-
--_av-br: var(--br-md);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
20
|
&&__96,
|
|
27
21
|
&&__128 {
|
|
28
|
-
--_av-br: calc(var(--br-lg) + var(--br-sm));
|
|
29
22
|
--_av-scale-badge: 3;
|
|
30
23
|
}
|
|
31
24
|
|
|
@@ -49,7 +42,6 @@
|
|
|
49
42
|
|
|
50
43
|
&&__64 {
|
|
51
44
|
--_av-size: var(--su-static64);
|
|
52
|
-
--_av-br: var(--br-lg);
|
|
53
45
|
--_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
|
|
54
46
|
--_av-scale-badge: 2.4;
|
|
55
47
|
}
|
|
@@ -74,7 +66,6 @@
|
|
|
74
66
|
}
|
|
75
67
|
|
|
76
68
|
& &--image {
|
|
77
|
-
border-radius: var(--_av-br);
|
|
78
69
|
display: block;
|
|
79
70
|
height: var(--_av-size);
|
|
80
71
|
width: var(--_av-size);
|
|
@@ -95,8 +86,15 @@
|
|
|
95
86
|
user-select: none;
|
|
96
87
|
}
|
|
97
88
|
|
|
98
|
-
|
|
99
|
-
|
|
89
|
+
& &--indicator {
|
|
90
|
+
box-shadow: 0 0 0 var(--su-static2) var(--white);
|
|
91
|
+
bottom: 100%;
|
|
92
|
+
left: 100%;
|
|
93
|
+
position: absolute;
|
|
94
|
+
transform: translate(-50%, 60%);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
background-color: var(--_av-bg);
|
|
100
98
|
height: var(--_av-size);
|
|
101
99
|
width: var(--_av-size);
|
|
102
100
|
|
|
@@ -388,7 +388,7 @@
|
|
|
388
388
|
& &--badge {
|
|
389
389
|
opacity: var(--_bu-badge-o);
|
|
390
390
|
display: inline-block;
|
|
391
|
-
border-radius: var(--br-
|
|
391
|
+
border-radius: var(--br-md);
|
|
392
392
|
padding: var(--su2) calc(var(--su4) - var(--su1));
|
|
393
393
|
font-size: var(--fs-caption);
|
|
394
394
|
line-height: var(--lh-xs);
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
// --_bu-py values set below to ensure btn-group height matches same-sized button height
|
|
24
24
|
// See https://github.com/StackEng/StackOverflow/pull/18992#pullrequestreview-1947490680
|
|
25
25
|
.s-btn {
|
|
26
|
-
--_bu-br: var(--br-
|
|
26
|
+
--_bu-br: var(--br-md);
|
|
27
27
|
--_bu-bc-hover: transparent;
|
|
28
28
|
--_bu-px: calc(var(--su12) - var(--su1)); // 11px
|
|
29
29
|
--_bu-py: calc(var(--su6) + 0.65px); // 6.65px
|
|
@@ -66,8 +66,8 @@
|
|
|
66
66
|
background: var(--_lp-footer-bg);
|
|
67
67
|
flex-direction: var(--_lp-footer-fd);
|
|
68
68
|
|
|
69
|
-
border-bottom-left-radius: var(--br-
|
|
70
|
-
border-bottom-right-radius: var(--br-
|
|
69
|
+
border-bottom-left-radius: var(--br-md);
|
|
70
|
+
border-bottom-right-radius: var(--br-md);
|
|
71
71
|
border-top: var(--su-static1) solid var(--bc-medium);
|
|
72
72
|
display: flex;
|
|
73
73
|
font-size: var(--fs-caption);
|
|
@@ -78,8 +78,8 @@
|
|
|
78
78
|
& &--header {
|
|
79
79
|
background: var(--_lp-header-bg);
|
|
80
80
|
border-bottom: var(--su-static1) solid var(--bc-medium);
|
|
81
|
-
border-top-left-radius: var(--br-
|
|
82
|
-
border-top-right-radius: var(--br-
|
|
81
|
+
border-top-left-radius: var(--br-md);
|
|
82
|
+
border-top-right-radius: var(--br-md);
|
|
83
83
|
display: flex;
|
|
84
84
|
padding: var(--su12) var(--su8);
|
|
85
85
|
}
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
border: var(--su-static1) solid var(--bc-medium);
|
|
145
|
-
border-radius: var(--br-
|
|
145
|
+
border-radius: var(--br-md);
|
|
146
146
|
box-shadow: var(--bs-sm);
|
|
147
147
|
text-align: left;
|
|
148
148
|
}
|
|
@@ -5,18 +5,6 @@
|
|
|
5
5
|
--_po-d: none;
|
|
6
6
|
--_po-wmn: 12rem;
|
|
7
7
|
--_po-w: 100%;
|
|
8
|
-
// arrow
|
|
9
|
-
--_po-arrow-fc: var(--white);
|
|
10
|
-
--_po-arrow-b: unset;
|
|
11
|
-
--_po-arrow-l: unset;
|
|
12
|
-
--_po-arrow-r: unset;
|
|
13
|
-
--_po-arrow-t: unset;
|
|
14
|
-
--_po-arrow-ps: calc(var(--su6) * -1); // ps suffix used for placement, not positioning value
|
|
15
|
-
--_po-arrow-after-b: unset;
|
|
16
|
-
--_po-arrow-after-l: unset;
|
|
17
|
-
--_po-arrow-after-r: unset;
|
|
18
|
-
--_po-arrow-after-t: unset;
|
|
19
|
-
--_po-arrow-after-bs: unset;
|
|
20
8
|
// content
|
|
21
9
|
// --_po-topbar-height assumes the topbar height based on topbar styles
|
|
22
10
|
--_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
|
|
@@ -27,7 +15,6 @@
|
|
|
27
15
|
--_po-bg: var(--black-200);
|
|
28
16
|
--_po-bc: var(--bc-light);
|
|
29
17
|
--_po-bs: var(--bs-lg);
|
|
30
|
-
--_po-arrow-fc: var(--black-200);
|
|
31
18
|
});
|
|
32
19
|
|
|
33
20
|
// MODIFIERS
|
|
@@ -41,91 +28,6 @@
|
|
|
41
28
|
}
|
|
42
29
|
|
|
43
30
|
// CHILD ELEMENTS
|
|
44
|
-
// Arrow
|
|
45
|
-
&[data-popper-placement^="top"] > &--arrow,
|
|
46
|
-
& &--arrow__bc,
|
|
47
|
-
& &--arrow__bl,
|
|
48
|
-
& &--arrow__br {
|
|
49
|
-
--_po-arrow-b: var(--_po-arrow-ps);
|
|
50
|
-
--_po-arrow-after-b: var(--su-static1);
|
|
51
|
-
--_po-arrow-after-bs: 2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
|
|
52
|
-
.highcontrast-mode({ --_po-arrow-after-bs: 1px 1px 0 0 var(--bc-medium); });
|
|
53
|
-
}
|
|
54
|
-
&[data-popper-placement^="bottom"] > &--arrow,
|
|
55
|
-
& &--arrow__tc,
|
|
56
|
-
& &--arrow__tl,
|
|
57
|
-
& &--arrow__tr {
|
|
58
|
-
--_po-arrow-t: var(--_po-arrow-ps);
|
|
59
|
-
--_po-arrow-after-t: var(--su-static1);
|
|
60
|
-
--_po-arrow-after-bs: -1px -1px 1px 0 hsla(0, 0%, 0%, 0.12);
|
|
61
|
-
.highcontrast-mode({ --_po-arrow-after-bs: -1px -1px 0 0 var(--bc-medium); });
|
|
62
|
-
}
|
|
63
|
-
&[data-popper-placement^="left"] > &--arrow,
|
|
64
|
-
& &--arrow__rc,
|
|
65
|
-
& &--arrow__rt,
|
|
66
|
-
& &--arrow__rb {
|
|
67
|
-
--_po-arrow-r: var(--_po-arrow-ps);
|
|
68
|
-
--_po-arrow-after-r: var(--su-static1);
|
|
69
|
-
--_po-arrow-after-bs: 2px -2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px -2px 2px -1px hsla(0, 0%, 0%, 0.1);
|
|
70
|
-
.highcontrast-mode({ --_po-arrow-after-bs: 1px -1px 0 0 var(--bc-medium); });
|
|
71
|
-
}
|
|
72
|
-
&[data-popper-placement^="right"] > &--arrow,
|
|
73
|
-
& &--arrow__lc,
|
|
74
|
-
& &--arrow__lt,
|
|
75
|
-
& &--arrow__lb {
|
|
76
|
-
--_po-arrow-l: var(--_po-arrow-ps);
|
|
77
|
-
--_po-arrow-after-l: var(--su-static1);
|
|
78
|
-
--_po-arrow-after-bs: -2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), -2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
|
|
79
|
-
.highcontrast-mode({ --_po-arrow-after-bs: -1px 1px 0 0 var(--bc-medium); });
|
|
80
|
-
}
|
|
81
|
-
& &--arrow__tc,
|
|
82
|
-
& &--arrow__bc {
|
|
83
|
-
--_po-arrow-l: calc(50% - var(--su6));
|
|
84
|
-
}
|
|
85
|
-
& &--arrow__lc,
|
|
86
|
-
& &--arrow__rc {
|
|
87
|
-
--_po-arrow-t: calc(50% - var(--su6));
|
|
88
|
-
}
|
|
89
|
-
& &--arrow__tr,
|
|
90
|
-
.s-popover--arrow__br {
|
|
91
|
-
--_po-arrow-r: var(--su12);
|
|
92
|
-
}
|
|
93
|
-
& &--arrow__rb,
|
|
94
|
-
& &--arrow__lb {
|
|
95
|
-
--_po-arrow-b: var(--su12);
|
|
96
|
-
}
|
|
97
|
-
& &--arrow {
|
|
98
|
-
&,
|
|
99
|
-
&:before,
|
|
100
|
-
&:after {
|
|
101
|
-
display: block;
|
|
102
|
-
height: var(--su12);
|
|
103
|
-
position: absolute;
|
|
104
|
-
width: var(--su12);
|
|
105
|
-
z-index: -1;
|
|
106
|
-
}
|
|
107
|
-
&:before, // This renders our border
|
|
108
|
-
&:after {
|
|
109
|
-
content: '';
|
|
110
|
-
transform: rotate(45deg);
|
|
111
|
-
}
|
|
112
|
-
&:after { // This renders our foreground color
|
|
113
|
-
bottom: var(--_po-arrow-after-b);
|
|
114
|
-
box-shadow: var(--_po-arrow-after-bs);
|
|
115
|
-
left: var(--_po-arrow-after-l);
|
|
116
|
-
right: var(--_po-arrow-after-r);
|
|
117
|
-
top: var(--_po-arrow-after-t);
|
|
118
|
-
|
|
119
|
-
background: currentColor;
|
|
120
|
-
border-radius: calc(var(--su-static1) * 1.5);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
bottom: var(--_po-arrow-b);
|
|
124
|
-
color: var(--_po-arrow-fc);
|
|
125
|
-
left: var(--_po-arrow-l);
|
|
126
|
-
right: var(--_po-arrow-r);
|
|
127
|
-
top: var(--_po-arrow-t);
|
|
128
|
-
}
|
|
129
31
|
// Close btn
|
|
130
32
|
& &--close {
|
|
131
33
|
float: right; // Use floats for title wrapping
|
|
@@ -231,12 +231,6 @@ export abstract class BasePopoverController extends Stacks.StacksController {
|
|
|
231
231
|
offset: [0, 10], // The entire popover should be 10px away from the element
|
|
232
232
|
},
|
|
233
233
|
},
|
|
234
|
-
{
|
|
235
|
-
name: "arrow",
|
|
236
|
-
options: {
|
|
237
|
-
element: ".s-popover--arrow",
|
|
238
|
-
},
|
|
239
|
-
},
|
|
240
234
|
],
|
|
241
235
|
});
|
|
242
236
|
}
|
|
@@ -137,22 +137,10 @@ export class TooltipController extends BasePopoverController {
|
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
const arrow = popover.querySelector(".s-popover--arrow");
|
|
141
|
-
|
|
142
140
|
// clear and set the content of the popover
|
|
143
141
|
popover.innerHTML = "";
|
|
144
142
|
popover.appendChild(content);
|
|
145
143
|
|
|
146
|
-
// create the arrow if necessary
|
|
147
|
-
if (arrow) {
|
|
148
|
-
popover.appendChild(arrow);
|
|
149
|
-
} else {
|
|
150
|
-
popover.insertAdjacentHTML(
|
|
151
|
-
"beforeend",
|
|
152
|
-
`<div class="s-popover--arrow"></div>`
|
|
153
|
-
);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
144
|
this.scheduleUpdate();
|
|
157
145
|
|
|
158
146
|
return popover;
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
// COMPONENT-SPECIFIC CONSTANTS
|
|
3
3
|
@pr-circle-circumference: (2 * pi() * 14); // 2πr, r = 14.
|
|
4
4
|
// COMPONENT-SPECIFIC CUSTOM PROPERTIES
|
|
5
|
-
--_pr-bar: var(--br-
|
|
5
|
+
--_pr-bar: var(--br-md);
|
|
6
6
|
--_pr-bg: var(--black-300);
|
|
7
7
|
--_pr-h: unset;
|
|
8
8
|
--_pr-size: unset;
|
|
9
9
|
--_pr-w: 100%;
|
|
10
10
|
--_pr-hmn: var(--su-static4);
|
|
11
|
-
--_pr-bar-bar: var(--br-
|
|
11
|
+
--_pr-bar-bar: var(--br-md);
|
|
12
12
|
--_pr-bar-bg: var(--green-400);
|
|
13
13
|
--_pr-bar-hmn: var(--su-static4);
|
|
14
14
|
--_pr-label-ai: unset;
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
padding: var(--su2) var(--su4);
|
|
82
82
|
color: var(--black-600);
|
|
83
83
|
background-color: var(--black-200);
|
|
84
|
-
border-radius: var(--br-
|
|
84
|
+
border-radius: var(--br-md);
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
|
|
@@ -316,7 +316,7 @@
|
|
|
316
316
|
box-shadow: var(--_pr-kbd-bs);
|
|
317
317
|
|
|
318
318
|
background-color: var(--black-200);
|
|
319
|
-
border-radius: var(--br-
|
|
319
|
+
border-radius: var(--br-md);
|
|
320
320
|
color: var(--black-600);
|
|
321
321
|
display: inline-block;
|
|
322
322
|
font-family: var(--ff-sans);
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
--_ta-bg-hover: var(--theme-tag-hover-background-color, var(--black-200));
|
|
9
9
|
--_ta-fc-hover: var(--theme-tag-hover-color, var(--black-600));
|
|
10
10
|
// Other
|
|
11
|
-
--_ta-br: var(--br-
|
|
11
|
+
--_ta-br: var(--br-md);
|
|
12
12
|
--_ta-fs: var(--fs-caption);
|
|
13
13
|
--_ta-lh: 1.846153846;
|
|
14
14
|
--_ta-pl: var(--_ta-px);
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
--_ta-lh: 1.733333333;
|
|
42
42
|
}
|
|
43
43
|
&&__lg {
|
|
44
|
-
--_ta-br: calc(var(--br-
|
|
44
|
+
--_ta-br: calc(var(--br-md) + var(--su-static1));
|
|
45
45
|
--_ta-fs: var(--fs-subheading);
|
|
46
46
|
--_ta-lh: 1.684210526;
|
|
47
47
|
--_ta-px: var(--su6);
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
align-items: center;
|
|
130
130
|
align-self: stretch;
|
|
131
131
|
background-color: transparent;
|
|
132
|
-
border-radius: var(--br-
|
|
132
|
+
border-radius: var(--br-md);
|
|
133
133
|
color: inherit;
|
|
134
134
|
cursor: pointer;
|
|
135
135
|
display: flex;
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
align-self: center;
|
|
149
|
-
border-radius: calc(var(--br-
|
|
149
|
+
border-radius: calc(var(--br-md) - var(--su-static1));
|
|
150
150
|
display: inline-flex;
|
|
151
151
|
margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
|
|
152
152
|
max-width: calc(var(--su-static16) + var(--su-static2));
|
|
@@ -198,7 +198,7 @@
|
|
|
198
198
|
color: var(--_tb-item-fc);
|
|
199
199
|
|
|
200
200
|
align-items: center;
|
|
201
|
-
border-radius: var(--br-
|
|
201
|
+
border-radius: var(--br-md);
|
|
202
202
|
display: inline-flex;
|
|
203
203
|
padding: 0 calc(var(--su12) - var(--su2));
|
|
204
204
|
position: relative;
|
|
@@ -217,7 +217,7 @@
|
|
|
217
217
|
background-color: var(--_tb-logo-bg);
|
|
218
218
|
|
|
219
219
|
align-items: center;
|
|
220
|
-
border-radius: var(--br-
|
|
220
|
+
border-radius: var(--br-md);
|
|
221
221
|
display: flex;
|
|
222
222
|
height: 100%;
|
|
223
223
|
padding: 0 var(--su8);
|
|
@@ -323,7 +323,7 @@
|
|
|
323
323
|
color: var(--_tb-notice-fc);
|
|
324
324
|
text-decoration: var(--_tb-notice-td);
|
|
325
325
|
|
|
326
|
-
border-radius: var(--br-
|
|
326
|
+
border-radius: var(--br-md);
|
|
327
327
|
display: inline-flex;
|
|
328
328
|
flex-shrink: 0;
|
|
329
329
|
font-size: var(--fs-fine);
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
-webkit-mask-image: var(--_up-bg-b-image);
|
|
70
70
|
mask-image: var(--_up-bg-b-image);
|
|
71
71
|
background-color: var(--_up-bg-bc-hc-state, var(--_up-bg-bc-hc, var(--_up-bg-bc)));
|
|
72
|
-
border-radius: var(--br-
|
|
72
|
+
border-radius: var(--br-md);
|
|
73
73
|
content: '';
|
|
74
74
|
display: block;
|
|
75
75
|
inset: 0;
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
|
|
79
79
|
align-items: center;
|
|
80
80
|
background-color: var(--_up-bg);
|
|
81
|
-
border-radius: var(--br-
|
|
81
|
+
border-radius: var(--br-md);
|
|
82
82
|
display: flex;
|
|
83
83
|
flex-direction: column;
|
|
84
84
|
justify-content: center;
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
background-color: var(--white);
|
|
130
|
-
border-radius: var(--br-
|
|
130
|
+
border-radius: var(--br-md);
|
|
131
131
|
box-shadow: var(--bs-md);
|
|
132
132
|
max-height: var(--su-static128);
|
|
133
133
|
max-width: 100%;
|
|
@@ -31,10 +31,9 @@ body {
|
|
|
31
31
|
--zi-modals: 9000; // Modals
|
|
32
32
|
|
|
33
33
|
// Border Radius
|
|
34
|
-
--br-
|
|
35
|
-
--br-md: calc(var(--su-static6));
|
|
36
|
-
--br-lg: calc(var(--su-static8));
|
|
34
|
+
--br-md: calc(var(--su-static4) + var(--su-static6)); // 10px;);
|
|
37
35
|
--br-circle: 50%;
|
|
36
|
+
--br-pill: 1000px;
|
|
38
37
|
|
|
39
38
|
// Transition easings
|
|
40
39
|
--te-smooth-slow: cubic-bezier(0.25, 0.46, 0.45, 0.94); // easeOutQuad
|
package/lib/exports/mixins.less
CHANGED
|
@@ -242,7 +242,7 @@
|
|
|
242
242
|
|
|
243
243
|
// md
|
|
244
244
|
& when (@size = md) and (@style = br) {
|
|
245
|
-
--_@{prefix}-br: calc(var(--br-
|
|
245
|
+
--_@{prefix}-br: calc(var(--br-md) + var(--su-static1));
|
|
246
246
|
}
|
|
247
247
|
& when (@size = md) and (@style = fs) {
|
|
248
248
|
--_@{prefix}-fs: var(--fs-body3);
|
|
@@ -250,7 +250,7 @@
|
|
|
250
250
|
|
|
251
251
|
// lg
|
|
252
252
|
& when (@size = lg) and (@style = br) {
|
|
253
|
-
--_@{prefix}-br: calc(var(--br-
|
|
253
|
+
--_@{prefix}-br: calc(var(--br-md) + var(--su-static1));
|
|
254
254
|
}
|
|
255
255
|
& when (@size = lg) and (@style = fs) {
|
|
256
256
|
--_@{prefix}-fs: var(--fs-title);
|
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": "
|
|
4
|
+
"version": "3.0.0-beta.1",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
7
7
|
"lib",
|