Skip to content

Commit 1bab49d

Browse files
thetthet
committed
fix(styles): Migrate using sass-migrator module.
1 parent 6a28f02 commit 1bab49d

File tree

16 files changed

+103
-92
lines changed

16 files changed

+103
-92
lines changed

‎_sass/_mixins.scss‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
1+
@use "sass:color";
2+
@use "settings";
3+
14
@mixin screen-size($media) {
25
@if $media == small {
3-
@media only screen and (max-width: $break-small) {
6+
@media only screen and (max-width: settings.$break-small) {
47
@content;
58
}
69
} @else if $media == small-medium {
7-
@media only screen and (max-width: $break-large - 1) {
10+
@media only screen and (max-width: settings.$break-large - 1) {
811
@content;
912
}
1013
} @else if $media == medium {
11-
@media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) {
14+
@media only screen and (min-width: settings.$break-small + 1) and (max-width: settings.$break-large - 1) {
1215
@content;
1316
}
1417
} @else if $media == medium-large {
15-
@media only screen and (min-width: $break-small + 1) {
18+
@media only screen and (min-width: settings.$break-small + 1) {
1619
@content;
1720
}
1821
} @else if $media == large {
19-
@media only screen and (min-width: $break-large) {
22+
@media only screen and (min-width: settings.$break-large) {
2023
@content;
2124
}
2225
}
@@ -158,7 +161,7 @@
158161
display: block;
159162

160163
&.success {
161-
background-color: $colour-success;
164+
background-color: settings.$colour-success;
162165
color: white;
163166

164167
a {
@@ -170,10 +173,10 @@
170173
}
171174
}
172175
&.notice {
173-
background-color: $colour-notice;
176+
background-color: settings.$colour-notice;
174177
}
175178
&.warning {
176-
background-color: $colour-warning;
179+
background-color: settings.$colour-warning;
177180
color: white;
178181

179182
a {
@@ -235,14 +238,14 @@
235238
background-color: #efefef;
236239

237240
&.success {
238-
background-color: $colour-success;
239-
color: darken($colour-success, 50%);
241+
background-color: settings.$colour-success;
242+
color: color.adjust(settings.$colour-success, $lightness: -50%);
240243
}
241244
&.notice {
242-
background-color: $colour-notice;
245+
background-color: settings.$colour-notice;
243246
}
244247
&.warning {
245-
background-color: $colour-warning;
248+
background-color: settings.$colour-warning;
246249
color: white;
247250
}
248251
}

‎_sass/_patterns.scss‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
11
// Each pattern comes with a mixin. They may also be included seperately
22
// in a project and applied on custom markup.
33

4-
@import "fonts";
5-
@import "settings";
6-
@import "mixins";
4+
@use "fonts";
5+
@use "settings";
6+
@use "mixins";
77

88
// Individual scss files are imported for each Pattern. These files may
99
// also be imported seperately in a project, but always require the Patterns
1010
// mixins
1111

12-
@import "components/avatar";
13-
@import "components/button";
14-
@import "components/button-bar";
15-
@import "components/form";
16-
@import "components/icon";
17-
@import "../src/pat/auto-scale/auto-scale";
18-
@import "../src/pat/auto-suggest/auto-suggest";
19-
@import "../src/pat/carousel/carousel";
20-
@import "../src/pat/checklist/checklist";
21-
@import "../src/pat/collapsible/collapsible";
22-
@import "../src/pat/colour-picker/colour-picker";
23-
@import "../src/pat/date-picker/date-picker";
24-
@import "../src/pat/datetime-picker/datetime-picker";
25-
@import "../src/pat/equaliser/equaliser";
26-
@import "../src/pat/expandable-tree/expandable-tree";
27-
@import "../src/pat/focus/focus";
28-
@import "../src/pat/gallery/gallery";
29-
@import "../src/pat/grid/grid";
30-
@import "../src/pat/image-crop/image-crop";
31-
@import "../src/pat/inject/inject";
32-
@import "../src/pat/inject/injection";
33-
@import "../src/pat/masonry/masonry";
34-
@import "../src/pat/menu/menu";
35-
@import "../src/pat/modal/modal";
36-
@import "../src/pat/notification/notification";
37-
@import "../src/pat/sortable/sortable";
38-
@import "../src/pat/stacks/stacks";
39-
@import "../src/pat/switch/switch";
40-
@import "../src/pat/syntax-highlight/syntax-highlight";
41-
@import "../src/pat/toggle/toggle";
42-
@import "../src/pat/tooltip/tooltip";
12+
@use "components/avatar";
13+
@use "components/button";
14+
@use "components/button-bar";
15+
@use "components/form";
16+
@use "components/icon";
17+
@use "../src/pat/auto-scale/auto-scale";
18+
@use "../src/pat/auto-suggest/auto-suggest";
19+
@use "../src/pat/carousel/carousel";
20+
@use "../src/pat/checklist/checklist";
21+
@use "../src/pat/collapsible/collapsible";
22+
@use "../src/pat/colour-picker/colour-picker";
23+
@use "../src/pat/date-picker/date-picker";
24+
@use "../src/pat/datetime-picker/datetime-picker";
25+
@use "../src/pat/equaliser/equaliser";
26+
@use "../src/pat/expandable-tree/expandable-tree";
27+
@use "../src/pat/focus/focus";
28+
@use "../src/pat/gallery/gallery";
29+
@use "../src/pat/grid/grid";
30+
@use "../src/pat/image-crop/image-crop";
31+
@use "../src/pat/inject/inject";
32+
@use "../src/pat/inject/injection";
33+
@use "../src/pat/masonry/masonry";
34+
@use "../src/pat/menu/menu";
35+
@use "../src/pat/modal/modal";
36+
@use "../src/pat/notification/notification";
37+
@use "../src/pat/sortable/sortable";
38+
@use "../src/pat/stacks/stacks";
39+
@use "../src/pat/switch/switch";
40+
@use "../src/pat/syntax-highlight/syntax-highlight";
41+
@use "../src/pat/toggle/toggle";
42+
@use "../src/pat/tooltip/tooltip";

‎_sass/components/_avatar.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../mixins";
2+
13
.pat-avatar {
2-
@include pat-avatar();
4+
@include mixins.pat-avatar();
35
}

‎_sass/components/_button.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
@use "../settings";
2+
13
@charset "UTF-8";
24

35
@mixin pat-button() {
4-
font-family: $body-font-family;
6+
font-family: settings.$body-font-family;
57
margin: 0 0.5em 0 0;
68
border: 1px solid rgba(0, 0, 0, 0.3);
79
cursor: default;
@@ -59,7 +61,7 @@
5961

6062
::-webkit-search-cancel-button {
6163
&:hover {
62-
color: $colour-accent;
64+
color: settings.$colour-accent;
6365
}
6466
&::after {
6567
content: "\e803";

‎_sass/components/_form.scss‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../mixins";
2+
@use "../settings";
3+
14
@charset "UTF-8";
25

36
form {
@@ -11,8 +14,8 @@ form {
1114

1215
.pat-message,
1316
.message {
14-
@include pat-message();
15-
@include box-sizing();
17+
@include mixins.pat-message();
18+
@include mixins.box-sizing();
1619

1720
display: block;
1821
clear: both;
@@ -30,9 +33,9 @@ form {
3033
-webkit-appearance: none;
3134
-moz-appearance: none;
3235
appearance: none;
33-
font-family: $body-font-family;
36+
font-family: settings.$body-font-family;
3437
display: inline-block;
35-
@include box-sizing();
38+
@include mixins.box-sizing();
3639
padding: 0.2em 0.5em;
3740
margin: -0.2em 0;
3841
background-color: rgba(0, 0, 0, 0.09);
@@ -57,7 +60,7 @@ form {
5760

5861
&::-webkit-search-cancel-button {
5962
&:hover {
60-
color: $colour-accent;
63+
color: settings.$colour-accent;
6164
}
6265
&::after {
6366
content: "\e803";
@@ -97,7 +100,7 @@ form {
97100
input[type="range"]::-webkit-slider-runnable-track {
98101
// width: 300px;
99102
height: 0.5em;
100-
background: $colour-base;
103+
background: settings.$colour-base;
101104
border: none;
102105
border-radius: 1em;
103106
}
@@ -108,7 +111,7 @@ form {
108111
height: 1.4em;
109112
width: 1.4em;
110113
border-radius: 50%;
111-
background: $colour-accent;
114+
background: settings.$colour-accent;
112115
margin-top: -0.45em;
113116
}
114117

@@ -125,7 +128,7 @@ form {
125128
height: 1.4em;
126129
width: 1.4em;
127130
border-radius: 50%;
128-
background: $colour-accent;
131+
background: settings.$colour-accent;
129132
}
130133

131134
/*hide the outline behind the border*/
@@ -139,7 +142,7 @@ form {
139142
height: 0.5em;
140143

141144
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
142-
background: $colour-base;
145+
background: settings.$colour-base;
143146

144147
/*leave room for the larger thumb to overflow with a transparent border */
145148
border-color: transparent;
@@ -166,7 +169,7 @@ form {
166169
height: 1.4em;
167170
width: 1.4em;
168171
border-radius: 50%;
169-
background: $colour-accent;
172+
background: settings.$colour-accent;
170173
}
171174

172175
input[type="range"]:focus::-ms-fill-lower {

‎src/pat/auto-suggest/_auto-suggest.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@charset "UTF-8";
2-
@import "../../../_sass/settings";
2+
@use "../../../_sass/settings";
33

44
/* @group Auto suggest */
55

@@ -478,7 +478,7 @@ disabled look for disabled choices in the results dropdown
478478
-moz-user-select: none;
479479
-ms-user-select: none;
480480
user-select: none;
481-
background-color: $colour-accent;
481+
background-color: settings.$colour-accent;
482482
font-size: 0.9em;
483483
font-weight: normal;
484484

@@ -513,7 +513,7 @@ disabled look for disabled choices in the results dropdown
513513
font-size: 1em;
514514
outline: none;
515515
&:before {
516-
content: "#{$glyph-close}";
516+
content: "#{settings.$glyph-close}";
517517
color: white;
518518
font: 1em fontello;
519519
}

‎src/pat/checklist/_checklist.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@charset "UTF-8";
2-
@import "../../../_sass/settings";
2+
@use "../../../_sass/settings";
33

44
.pat-checklist {
55
> br {
@@ -15,15 +15,15 @@
1515
&.checked:before,
1616
&.unchecked:before {
1717
font-family: fontello;
18-
content: "#{$glyph-checkbox}";
18+
content: "#{settings.$glyph-checkbox}";
1919
float: left;
2020
position: absolute;
2121
left: 0;
2222
top: 0em;
2323
}
2424

2525
&.checked:before {
26-
content: "#{$glyph-checkbox-active}";
26+
content: "#{settings.$glyph-checkbox-active}";
2727
}
2828

2929
input[type="checkbox"],
@@ -35,10 +35,10 @@
3535

3636
&.radio label {
3737
&:before {
38-
content: "#{$glyph-radio-button}";
38+
content: "#{settings.$glyph-radio-button}";
3939
}
4040
&.checked:before {
41-
content: "#{$glyph-radio-button-active}";
41+
content: "#{settings.$glyph-radio-button-active}";
4242
}
4343
}
4444

‎src/pat/collapsible/_collapsible.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@import "../../../_sass/settings";
2-
@import "../../../_sass/components/button";
1+
@use "../../../_sass/settings";
2+
@use "../../../_sass/components/button";
33

44
.pat-collapsible {
55
margin-bottom: 0.5em;
@@ -21,7 +21,7 @@
2121
}
2222

2323
> *:first-child {
24-
@include pat-button();
24+
@include button.pat-button();
2525

2626
font-weight: normal;
2727
width: 100%;

‎src/pat/colour-picker/_colour-picker.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@charset "UTF-8";
22

3-
@import "../../../node_modules/spectrum-colorpicker/spectrum";
3+
@use "../../../node_modules/spectrum-colorpicker/spectrum";
44

55
.checkNative,
66
.checkPattern {

‎src/pat/date-picker/_date-picker.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
@charset "UTF-8";
2-
@import "../../../node_modules/pikaday/scss/pikaday.scss";
2+
@use "../../../node_modules/pikaday/scss/pikaday.scss";

0 commit comments

Comments
 (0)