Skip to content

Commit c2b6beb

Browse files
aaronshekeyaaronshekey
authored
Use CSS variables for s-step and s-full (#903)
1 parent 650aa20 commit c2b6beb

File tree

4 files changed

+78
-81
lines changed

4 files changed

+78
-81
lines changed

‎lib/css/atomic/_stacks-width-height.less‎

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -42,18 +42,18 @@
4242
// $$ STATIC
4343
.ws0,
4444
.w0 { width: 0 !important; }
45-
.ws1 { width: @s-step !important; }
46-
.ws2 { width: @s-step * 2 !important; }
47-
.ws3 { width: @s-step * 3 !important; }
48-
.ws4 { width: @s-step * 4 !important; }
49-
.ws5 { width: @s-step * 5 !important; }
50-
.ws6 { width: @s-step * 6 !important; }
51-
.ws7 { width: @s-step * 7 !important; }
52-
.ws8 { width: @s-step * 8 !important; }
53-
.ws9 { width: @s-step * 9 !important; }
54-
.ws10 { width: @s-step * 10 !important; }
55-
.ws11 { width: @s-step * 11 !important; }
56-
.ws12 { width: @s-full !important; }
45+
.ws1 { width: var(--s-step) !important; }
46+
.ws2 { width: calc(var(--s-step) * 2) !important; }
47+
.ws3 { width: calc(var(--s-step) * 3) !important; }
48+
.ws4 { width: calc(var(--s-step) * 4) !important; }
49+
.ws5 { width: calc(var(--s-step) * 5) !important; }
50+
.ws6 { width: calc(var(--s-step) * 6) !important; }
51+
.ws7 { width: calc(var(--s-step) * 7) !important; }
52+
.ws8 { width: calc(var(--s-step) * 8) !important; }
53+
.ws9 { width: calc(var(--s-step) * 9) !important; }
54+
.ws10 { width: calc(var(--s-step) * 10) !important; }
55+
.ws11 { width: calc(var(--s-step) * 11) !important; }
56+
.ws12 { width: var(--s-full) !important; }
5757

5858
// $$ SPACING UNITS
5959
.w2 { width: var(--su-static2) !important; }
@@ -73,21 +73,21 @@
7373
// $ MAX-WIDTH
7474
// ----------------------------------------------------------------------------
7575
.wmx0 { max-width: 0 !important; }
76-
.wmx1 { max-width: @s-step !important; }
77-
.wmx2 { max-width: @s-step * 2 !important; }
76+
.wmx1 { max-width: var(--s-step) !important; }
77+
.wmx2 { max-width: calc(var(--s-step) * 2) !important; }
7878
.wmx25 { max-width: 25% !important; }
79-
.wmx3 { max-width: @s-step * 3 !important; }
80-
.wmx4 { max-width: @s-step * 4 !important; }
81-
.wmx5 { max-width: @s-step * 5 !important; }
79+
.wmx3 { max-width: calc(var(--s-step) * 3) !important; }
80+
.wmx4 { max-width: calc(var(--s-step) * 4) !important; }
81+
.wmx5 { max-width: calc(var(--s-step) * 5) !important; }
8282
.wmx50 { max-width: 50% !important; }
83-
.wmx6 { max-width: @s-step * 6 !important; }
84-
.wmx7 { max-width: @s-step * 7 !important; }
83+
.wmx6 { max-width: calc(var(--s-step) * 6) !important; }
84+
.wmx7 { max-width: calc(var(--s-step) * 7) !important; }
8585
.wmx75 { max-width: 75% !important; }
86-
.wmx8 { max-width: @s-step * 8 !important; }
87-
.wmx9 { max-width: @s-step * 9 !important; }
88-
.wmx10 { max-width: @s-step * 10 !important; }
89-
.wmx11 { max-width: @s-step * 11 !important; }
90-
.wmx12 { max-width: @s-full !important; }
86+
.wmx8 { max-width: calc(var(--s-step) * 8) !important; }
87+
.wmx9 { max-width: calc(var(--s-step) * 9) !important; }
88+
.wmx10 { max-width: calc(var(--s-step) * 10) !important; }
89+
.wmx11 { max-width: calc(var(--s-step) * 11) !important; }
90+
.wmx12 { max-width: var(--s-full) !important; }
9191
#stacks-internals #responsify('.wmx100', { max-width: 100% !important; });
9292
#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; });
9393
#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; });
@@ -96,21 +96,21 @@
9696
// $ MIN-WIDTH
9797
// ----------------------------------------------------------------------------
9898
.wmn0 { min-width: 0 !important; }
99-
.wmn1 { min-width: @s-step !important; }
100-
.wmn2 { min-width: @s-step * 2 !important; }
99+
.wmn1 { min-width: var(--s-step) !important; }
100+
.wmn2 { min-width: calc(var(--s-step) * 2) !important; }
101101
.wmn25 { min-width: 25% !important; }
102-
.wmn3 { min-width: @s-step * 3 !important; }
103-
.wmn4 { min-width: @s-step * 4 !important; }
104-
.wmn5 { min-width: @s-step * 5 !important; }
102+
.wmn3 { min-width: calc(var(--s-step) * 3) !important; }
103+
.wmn4 { min-width: calc(var(--s-step) * 4) !important; }
104+
.wmn5 { min-width: calc(var(--s-step) * 5) !important; }
105105
.wmn50 { min-width: 50% !important; }
106-
.wmn6 { min-width: @s-step * 6 !important; }
107-
.wmn7 { min-width: @s-step * 7 !important; }
106+
.wmn6 { min-width: calc(var(--s-step) * 6) !important; }
107+
.wmn7 { min-width: calc(var(--s-step) * 7) !important; }
108108
.wmn75 { min-width: 75% !important; }
109-
.wmn8 { min-width: @s-step * 8 !important; }
110-
.wmn9 { min-width: @s-step * 9 !important; }
111-
.wmn10 { min-width: @s-step * 10 !important; }
112-
.wmn11 { min-width: @s-step * 11 !important; }
113-
.wmn12 { min-width: @s-full !important; }
109+
.wmn8 { min-width: calc(var(--s-step) * 8) !important; }
110+
.wmn9 { min-width: calc(var(--s-step) * 9) !important; }
111+
.wmn10 { min-width: calc(var(--s-step) * 10) !important; }
112+
.wmn11 { min-width: calc(var(--s-step) * 11) !important; }
113+
.wmn12 { min-width: var(--s-full) !important; }
114114
#stacks-internals #responsify('.wmn100', { min-width: 100% !important; });
115115
#stacks-internals #responsify('.wmn-initial', { min-width: initial !important; });
116116

@@ -126,18 +126,18 @@
126126
// $$ STATIC
127127
.hs0,
128128
.h0 { height: 0 !important; }
129-
.hs1 { height: @s-step !important; }
130-
.hs2 { height: @s-step * 2 !important; }
131-
.hs3 { height: @s-step * 3 !important; }
132-
.hs4 { height: @s-step * 4 !important; }
133-
.hs5 { height: @s-step * 5 !important; }
134-
.hs6 { height: @s-step * 6 !important; }
135-
.hs7 { height: @s-step * 7 !important; }
136-
.hs8 { height: @s-step * 8 !important; }
137-
.hs9 { height: @s-step * 9 !important; }
138-
.hs10 { height: @s-step * 10 !important; }
139-
.hs11 { height: @s-step * 11 !important; }
140-
.hs12 { height: @s-full !important; }
129+
.hs1 { height: var(--s-step) !important; }
130+
.hs2 { height: calc(var(--s-step) * 2) !important; }
131+
.hs3 { height: calc(var(--s-step) * 3) !important; }
132+
.hs4 { height: calc(var(--s-step) * 4) !important; }
133+
.hs5 { height: calc(var(--s-step) * 5) !important; }
134+
.hs6 { height: calc(var(--s-step) * 6) !important; }
135+
.hs7 { height: calc(var(--s-step) * 7) !important; }
136+
.hs8 { height: calc(var(--s-step) * 8) !important; }
137+
.hs9 { height: calc(var(--s-step) * 9) !important; }
138+
.hs10 { height: calc(var(--s-step) * 10) !important; }
139+
.hs11 { height: calc(var(--s-step) * 11) !important; }
140+
.hs12 { height: var(--s-full) !important; }
141141

142142
// $$ SPACING UNITS
143143
.h2 { height: var(--su-static2) !important; }
@@ -157,18 +157,18 @@
157157
// $ MAX-HEIGHT
158158
// ----------------------------------------------------------------------------
159159
.hmx0 { max-height: 0 !important; }
160-
.hmx1 { max-height: @s-step !important; }
161-
.hmx2 { max-height: @s-step * 2 !important; }
162-
.hmx3 { max-height: @s-step * 3 !important; }
163-
.hmx4 { max-height: @s-step * 4 !important; }
164-
.hmx5 { max-height: @s-step * 5 !important; }
165-
.hmx6 { max-height: @s-step * 6 !important; }
166-
.hmx7 { max-height: @s-step * 7 !important; }
167-
.hmx8 { max-height: @s-step * 8 !important; }
168-
.hmx9 { max-height: @s-step * 9 !important; }
169-
.hmx10 { max-height: @s-step * 10 !important; }
170-
.hmx11 { max-height: @s-step * 11 !important; }
171-
.hmx12 { max-height: @s-full !important; }
160+
.hmx1 { max-height: var(--s-step) !important; }
161+
.hmx2 { max-height: calc(var(--s-step) * 2) !important; }
162+
.hmx3 { max-height: calc(var(--s-step) * 3) !important; }
163+
.hmx4 { max-height: calc(var(--s-step) * 4) !important; }
164+
.hmx5 { max-height: calc(var(--s-step) * 5) !important; }
165+
.hmx6 { max-height: calc(var(--s-step) * 6) !important; }
166+
.hmx7 { max-height: calc(var(--s-step) * 7) !important; }
167+
.hmx8 { max-height: calc(var(--s-step) * 8) !important; }
168+
.hmx9 { max-height: calc(var(--s-step) * 9) !important; }
169+
.hmx10 { max-height: calc(var(--s-step) * 10) !important; }
170+
.hmx11 { max-height: calc(var(--s-step) * 11) !important; }
171+
.hmx12 { max-height: var(--s-full) !important; }
172172
#stacks-internals #responsify('.hmx100', { max-height: 100% !important; });
173173
#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; });
174174
#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; });
@@ -177,18 +177,18 @@
177177
// $ MIN-HEIGHT
178178
// ----------------------------------------------------------------------------
179179
.hmn0 { min-height: 0 !important; }
180-
.hmn1 { min-height: @s-step !important; }
181-
.hmn2 { min-height: @s-step * 2 !important; }
182-
.hmn3 { min-height: @s-step * 3 !important; }
183-
.hmn4 { min-height: @s-step * 4 !important; }
184-
.hmn5 { min-height: @s-step * 5 !important; }
185-
.hmn6 { min-height: @s-step * 6 !important; }
186-
.hmn7 { min-height: @s-step * 7 !important; }
187-
.hmn8 { min-height: @s-step * 8 !important; }
188-
.hmn9 { min-height: @s-step * 9 !important; }
189-
.hmn10 { min-height: @s-step * 10 !important; }
190-
.hmn11 { min-height: @s-step * 11 !important; }
191-
.hmn12 { min-height: @s-full !important; }
180+
.hmn1 { min-height: var(--s-step) !important; }
181+
.hmn2 { min-height: calc(var(--s-step) * 2) !important; }
182+
.hmn3 { min-height: calc(var(--s-step) * 3) !important; }
183+
.hmn4 { min-height: calc(var(--s-step) * 4) !important; }
184+
.hmn5 { min-height: calc(var(--s-step) * 5) !important; }
185+
.hmn6 { min-height: calc(var(--s-step) * 6) !important; }
186+
.hmn7 { min-height: calc(var(--s-step) * 7) !important; }
187+
.hmn8 { min-height: calc(var(--s-step) * 8) !important; }
188+
.hmn9 { min-height: calc(var(--s-step) * 9) !important; }
189+
.hmn10 { min-height: calc(var(--s-step) * 10) !important; }
190+
.hmn11 { min-height: calc(var(--s-step) * 11) !important; }
191+
.hmn12 { min-height: var(--s-full) !important; }
192192
#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
193193
#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
194194
#stacks-internals #responsify('.hmx-screen', { min-height: 100vh !important; });

‎lib/css/components/_stacks-banners.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,6 @@
7575
.s-banner--container {
7676
position: relative;
7777
width: 100%;
78-
max-width: @s-step * 10;
78+
max-width: calc(var(--s-step) * 10);
7979
margin: 0 auto;
8080
}

‎lib/css/components/_stacks-topbar.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545

4646
// Wraps the content so the topbar stretches 100% w/ content at some value below that
4747
.s-topbar--container {
48-
width: @s-full; // wmx12; Consumers should use atomic classes to override this
48+
width: var(--s-full); // wmx12; Consumers should use atomic classes to override this
4949
max-width: 100%;
5050
height: 100%;
5151
display: flex;

‎lib/css/exports/_stacks-constants-helpers.less‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ body {
4949

5050
--default-transition-duration: 0.1s;
5151
--transition-time: var(--default-transition-duration);
52+
53+
// Sizing
54+
--s-full: 97.2307692rem; // Based on a pixel size of 1264px;
55+
--s-step: calc(var(--s-full) / 12);
5256
}
5357

5458
// ============================================================================
@@ -76,13 +80,6 @@ body {
7680
@su96: 96px;
7781
@su128: 128px;
7882

79-
80-
// ============================================================================
81-
// $ SIZING UNITS (su-)
82-
// ----------------------------------------------------------------------------
83-
@s-full: 97.2307692rem; // Based on a pixel size of 1264px;
84-
@s-step: (@s-full / 12);
85-
8683
// ============================================================================
8784
// $ SCROLLBAR STYLING
8885
// ----------------------------------------------------------------------------

0 commit comments

Comments
 (0)