Skip to content

Commit 8ec26e8

Browse files
ssddanbrownssddanbrown
committed
SASS: Updated to use modules and address deprecations
Changes the name of our spacing variables due to the prefixing -/_ meaning private in the use of new "use" rather than include. All now modular too, so all variables/mixins are accessed via their package. Also renamed variables file to vars for simpler/cleaner access/writing. eg. '$-m' is now 'vars.$m'
1 parent 617b2ed commit 8ec26e8

20 files changed

+649
-595
lines changed

‎resources/sass/_blocks.scss‎

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
@use "mixins";
2+
@use "vars";
3+
14
/**
25
* Card-style blocks
36
*/
47

58
.card {
6-
@include lightDark(background-color, #FFF, #222);
7-
box-shadow: $bs-card;
9+
@include mixins.lightDark(background-color, #FFF, #222);
10+
box-shadow: vars.$bs-card;
811
border-radius: 3px;
912
break-inside: avoid;
1013
.body, p.empty-text {
11-
padding-block: $-m;
14+
padding-block: vars.$m;
1215
}
1316
a, p {
1417
word-wrap: break-word;
@@ -17,9 +20,9 @@
1720
}
1821

1922
.card-title {
20-
padding: $-m $-m $-xs;
23+
padding: vars.$m vars.$m vars.$xs;
2124
margin: 0;
22-
font-size: $fs-m;
25+
font-size: vars.$fs-m;
2326
color: #222;
2427
fill: #222;
2528
font-weight: 400;
@@ -29,39 +32,39 @@
2932
}
3033
.card-footer-link, button.card-footer-link {
3134
display: block;
32-
padding: $-s $-m;
35+
padding: vars.$s vars.$m;
3336
line-height: 1;
3437
border-top: 1px solid;
3538
width: 100%;
3639
text-align: left;
37-
@include lightDark(border-color, #DDD, #555);
40+
@include mixins.lightDark(border-color, #DDD, #555);
3841
border-radius: 0 0 3px 3px;
3942
font-size: 0.9em;
40-
margin-top: $-xs;
43+
margin-top: vars.$xs;
4144
&:hover {
4245
text-decoration: none;
43-
@include lightDark(background-color, #f2f2f2, #2d2d2d);
46+
@include mixins.lightDark(background-color, #f2f2f2, #2d2d2d);
4447
}
4548
&:focus {
46-
@include lightDark(background-color, #eee, #222);
49+
@include mixins.lightDark(background-color, #eee, #222);
4750
outline: 1px dotted #666;
4851
outline-offset: -2px;
4952
}
5053
}
5154

5255
.card.border-card {
5356
border: 1px solid;
54-
@include lightDark(border-color, #ddd, #000);
57+
@include mixins.lightDark(border-color, #ddd, #000);
5558
}
5659

5760
.card.drag-card {
5861
border: 1px solid #DDD;
59-
@include lightDark(border-color, #ddd, #000);
60-
@include lightDark(background-color, #fff, #333);
62+
@include mixins.lightDark(border-color, #ddd, #000);
63+
@include mixins.lightDark(background-color, #fff, #333);
6164
border-radius: 4px;
6265
display: flex;
63-
padding: 0 0 0 ($-s + 28px);
64-
margin: $-s 0;
66+
padding: 0 0 0 (vars.$s + 28px);
67+
margin: vars.$s 0;
6568
position: relative;
6669
.drag-card-action {
6770
cursor: pointer;
@@ -73,30 +76,30 @@
7376
justify-content: center;
7477
width: 28px;
7578
flex-grow: 0;
76-
padding: 0 $-xs;
79+
padding: 0 vars.$xs;
7780
&:hover {
78-
@include lightDark(background-color, #eee, #2d2d2d);
81+
@include mixins.lightDark(background-color, #eee, #2d2d2d);
7982
}
8083
.svg-icon {
8184
margin-inline-end: 0px;
8285
}
8386
}
8487
.outline input {
85-
margin: $-s 0;
88+
margin: vars.$s 0;
8689
width: 100%;
8790
}
8891
.outline {
8992
position: relative;
9093
}
9194
.handle {
92-
@include lightDark(background-color, #eee, #2d2d2d);
95+
@include mixins.lightDark(background-color, #eee, #2d2d2d);
9396
left: 0;
9497
position: absolute;
9598
top: 0;
9699
bottom: 0;
97100
}
98101
> div {
99-
padding: 0 $-s;
102+
padding: 0 vars.$s;
100103
max-width: 80%;
101104
flex: 1;
102105
}
@@ -106,17 +109,17 @@
106109
display: flex;
107110
flex-direction: column;
108111
border: 1px solid #ddd;
109-
@include lightDark(border-color, #ddd, #000);
110-
margin-bottom: $-l;
112+
@include mixins.lightDark(border-color, #ddd, #000);
113+
margin-bottom: vars.$l;
111114
border-radius: 4px;
112115
overflow: hidden;
113116
min-width: 100px;
114-
color: $text-dark;
117+
color: vars.$text-dark;
115118
transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
116119
&:hover {
117-
color: $text-dark;
120+
color: vars.$text-dark;
118121
text-decoration: none;
119-
@include lightDark(box-shadow, $bs-card, $bs-card-dark);
122+
@include mixins.lightDark(box-shadow, vars.$bs-card, vars.$bs-card-dark);
120123
}
121124
h2 {
122125
width: 100%;
@@ -134,7 +137,7 @@
134137
border-bottom-width: 2px;
135138
}
136139
.grid-card-content, .grid-card-footer {
137-
padding: $-l;
140+
padding: vars.$l;
138141
}
139142
.grid-card-content + .grid-card-footer {
140143
padding-top: 0;
@@ -149,10 +152,10 @@
149152
}
150153

151154
.content-wrap.card {
152-
padding: $-m $-xxl;
155+
padding: vars.$m vars.$xxl;
153156
margin-inline-start: auto;
154157
margin-inline-end: auto;
155-
margin-bottom: $-l;
158+
margin-bottom: vars.$l;
156159
overflow: initial;
157160
min-height: 60vh;
158161
border-radius: 8px;
@@ -163,26 +166,26 @@
163166
width: 100%;
164167
}
165168
}
166-
@include smaller-than($xxl) {
169+
@include mixins.smaller-than(vars.$bp-xxl) {
167170
.content-wrap.card {
168-
padding: $-m $-xl;
171+
padding: vars.$m vars.$xl;
169172
}
170173
}
171-
@include smaller-than($m) {
174+
@include mixins.smaller-than(vars.$bp-m) {
172175
.content-wrap.card {
173-
padding: $-m $-l;
176+
padding: vars.$m vars.$l;
174177
}
175178
}
176-
@include smaller-than($s) {
179+
@include mixins.smaller-than(vars.$bp-s) {
177180
.content-wrap.card {
178-
padding: $-m $-m;
181+
padding: vars.$m vars.$m;
179182
}
180183
}
181184

182185
.sub-card {
183186
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
184187
border: 1.5px solid;
185-
@include lightDark(border-color, #E2E2E2, #444);
188+
@include mixins.lightDark(border-color, #E2E2E2, #444);
186189
border-radius: 4px;
187190
}
188191

@@ -194,7 +197,7 @@
194197
}
195198

196199
.fade-in-when-active {
197-
@include lightDark(opacity, 0.6, 0.7);
200+
@include mixins.lightDark(opacity, 0.6, 0.7);
198201
transition: opacity ease-in-out 120ms;
199202
&:hover, &:focus-within {
200203
opacity: 1 !important;
@@ -209,29 +212,29 @@
209212
*/
210213
.tag-item {
211214
display: inline-flex;
212-
margin-bottom: $-xs;
213-
margin-inline-end: $-xs;
215+
margin-bottom: vars.$xs;
216+
margin-inline-end: vars.$xs;
214217
border-radius: 4px;
215218
border: 1px solid;
216219
overflow: hidden;
217220
font-size: 0.85em;
218-
@include lightDark(border-color, #CCC, #666);
221+
@include mixins.lightDark(border-color, #CCC, #666);
219222
a, span, a:hover, a:active {
220223
padding: 4px 8px;
221-
@include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
224+
@include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
222225
transition: background-color ease-in-out 80ms;
223226
text-decoration: none;
224227
}
225228
a:hover {
226-
@include lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
229+
@include mixins.lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
227230
}
228231
svg {
229-
@include lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
232+
@include mixins.lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
230233
}
231234
.tag-value {
232235
border-inline-start: 1px solid;
233-
@include lightDark(border-color, #DDD, #666);
234-
@include lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
236+
@include mixins.lightDark(border-color, #DDD, #666);
237+
@include mixins.lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
235238
}
236239
}
237240

@@ -253,7 +256,7 @@
253256
.api-method {
254257
font-size: 0.75rem;
255258
background-color: #888;
256-
padding: $-xs;
259+
padding: vars.$xs;
257260
line-height: 1.3;
258261
opacity: 0.7;
259262
vertical-align: top;
@@ -271,7 +274,7 @@
271274

272275
.sticky-sidebar {
273276
position: sticky;
274-
top: $-m;
275-
max-height: calc(100vh - #{$-m});
277+
top: vars.$m;
278+
max-height: calc(100vh - #{vars.$m});
276279
overflow-y: auto;
277280
}

‎resources/sass/_buttons.scss‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "mixins";
2+
@use "vars";
3+
14
button {
25
background-color: transparent;
36
border: 0;
@@ -8,9 +11,9 @@ button {
811
text-decoration: none;
912
font-size: 0.85rem;
1013
line-height: 1.4em;
11-
padding: $-xs*1.3 $-m;
12-
margin-top: $-xs;
13-
margin-bottom: $-xs;
14+
padding: vars.$xs*1.3 vars.$m;
15+
margin-top: vars.$xs;
16+
margin-bottom: vars.$xs;
1417
display: inline-block;
1518
font-weight: 400;
1619
outline: 0;
@@ -30,12 +33,12 @@ button {
3033
color: #FFFFFF;
3134
}
3235
&:hover {
33-
@include lightDark(box-shadow, $bs-light, $bs-dark);
36+
@include mixins.lightDark(box-shadow, vars.$bs-light, vars.$bs-dark);
3437
filter: brightness(110%);
3538
}
3639
&:focus {
3740
outline: 1px dotted currentColor;
38-
outline-offset: -$-xs;
41+
outline-offset: -(vars.$xs);
3942
box-shadow: none;
4043
filter: brightness(90%);
4144
}
@@ -46,16 +49,16 @@ button {
4649

4750
.button.outline {
4851
background-color: transparent;
49-
@include lightDark(color, #666, #AAA);
52+
@include mixins.lightDark(color, #666, #AAA);
5053
fill: currentColor;
5154
border: 1px solid;
52-
@include lightDark(border-color, #CCC, #666);
55+
@include mixins.lightDark(border-color, #CCC, #666);
5356
&:hover, &:focus, &:active {
54-
@include lightDark(color, #444, #BBB);
57+
@include mixins.lightDark(color, #444, #BBB);
5558
border: 1px solid #CCC;
5659
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
5760
background-color: #F2F2F2;
58-
@include lightDark(background-color, #f8f8f8, #444);
61+
@include mixins.lightDark(background-color, #f8f8f8, #444);
5962
filter: none;
6063
}
6164
&:active {
@@ -67,12 +70,12 @@ button {
6770
}
6871

6972
.button + .button {
70-
margin-inline-start: $-s;
73+
margin-inline-start: vars.$s;
7174
}
7275

7376
.button.small {
7477
font-size: 0.75rem;
75-
padding: $-xs*1.2 $-s;
78+
padding: vars.$xs*1.2 vars.$s;
7679
}
7780

7881
.text-button {
@@ -119,22 +122,22 @@ button {
119122
.icon-button:hover {
120123
background-color: rgba(0, 0, 0, 0.05);
121124
border-radius: 4px;
122-
@include lightDark(border-color, #DDD, #444);
125+
@include mixins.lightDark(border-color, #DDD, #444);
123126
cursor: pointer;
124127
}
125128

126129
.button.svg {
127130
display: flex;
128131
align-items: center;
129-
padding: $-s $-m;
130-
padding-bottom: ($-s - 2px);
132+
padding: vars.$s vars.$m;
133+
padding-bottom: (vars.$s - 2px);
131134
width: 100%;
132135
svg {
133136
display: inline-block;
134137
width: 24px;
135138
height: 24px;
136139
bottom: auto;
137-
margin-inline-end: $-m;
140+
margin-inline-end: vars.$m;
138141
}
139142
}
140143

‎resources/sass/_codemirror.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "mixins";
2+
@use "vars";
3+
14
/**
25
* Custom CodeMirror BookStack overrides
36
*/
@@ -6,7 +9,7 @@
69
font-size: 12px;
710
border: 1px solid #ddd;
811
line-height: 1.4;
9-
margin-bottom: $-l;
12+
margin-bottom: vars.$l;
1013
}
1114

1215
.page-content .cm-editor,
@@ -42,9 +45,9 @@
4245
background-color: #EEE;
4346
border: 1px solid #DDD;
4447
border-start-end-radius: 4px;
45-
@include lightDark(background-color, #eee, #333);
46-
@include lightDark(border-color, #ddd, #444);
47-
@include lightDark(color, #444, #888);
48+
@include mixins.lightDark(background-color, #eee, #333);
49+
@include mixins.lightDark(border-color, #ddd, #444);
50+
@include mixins.lightDark(color, #444, #888);
4851
line-height: 0;
4952
cursor: pointer;
5053
z-index: 5;

0 commit comments

Comments
 (0)