Skip to content

Commit e8dc475

Browse files
DiogoRibeiro7DiogoRibeiro7
authored
Update Sass files to use color.mix and module system (#289)
1 parent 61adbba commit e8dc475

19 files changed

+124
-108
lines changed

‎_sass/minimal-mistakes.scss‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
1-
/*!
1+
/*!\
22
* Minimal Mistakes Jekyll Theme 4.24.0 by Michael Rose
33
* Copyright 2013-2020 Michael Rose - mademistakes.com | @mmistakes
44
* Licensed under MIT (https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE)
5-
*/
5+
*/
66

77
/* Variables */
8-
@import "minimal-mistakes/variables";
8+
@forward "minimal-mistakes/variables";
99

1010
/* Mixins and functions */
11-
@import "minimal-mistakes/vendor/breakpoint/breakpoint";
11+
@forward "minimal-mistakes/vendor/breakpoint/breakpoint";
1212
@include breakpoint-set("to ems", true);
13-
@import "minimal-mistakes/vendor/magnific-popup/magnific-popup"; // Magnific Popup
14-
@import "minimal-mistakes/vendor/susy/susy";
15-
@import "minimal-mistakes/mixins";
13+
@forward "minimal-mistakes/vendor/magnific-popup/magnific-popup";
14+
@forward "minimal-mistakes/vendor/susy/susy";
15+
@forward "minimal-mistakes/mixins";
1616

1717
/* Core CSS */
18-
@import "minimal-mistakes/reset";
19-
@import "minimal-mistakes/base";
20-
@import "minimal-mistakes/forms";
21-
@import "minimal-mistakes/tables";
22-
@import "minimal-mistakes/animations";
18+
@forward "minimal-mistakes/reset";
19+
@forward "minimal-mistakes/base";
20+
@forward "minimal-mistakes/forms";
21+
@forward "minimal-mistakes/tables";
22+
@forward "minimal-mistakes/animations";
2323

2424
/* Components */
25-
@import "minimal-mistakes/buttons";
26-
@import "minimal-mistakes/notices";
27-
@import "minimal-mistakes/masthead";
28-
@import "minimal-mistakes/navigation";
29-
@import "minimal-mistakes/footer";
30-
@import "minimal-mistakes/search";
31-
@import "minimal-mistakes/syntax";
25+
@forward "minimal-mistakes/buttons";
26+
@forward "minimal-mistakes/notices";
27+
@forward "minimal-mistakes/masthead";
28+
@forward "minimal-mistakes/navigation";
29+
@forward "minimal-mistakes/footer";
30+
@forward "minimal-mistakes/search";
31+
@forward "minimal-mistakes/syntax";
3232

3333
/* Utility classes */
34-
@import "minimal-mistakes/utilities";
34+
@forward "minimal-mistakes/utilities";
3535

3636
/* Layout specific */
37-
@import "minimal-mistakes/page";
38-
@import "minimal-mistakes/archive";
39-
@import "minimal-mistakes/sidebar";
40-
@import "minimal-mistakes/print";
37+
@forward "minimal-mistakes/page";
38+
@forward "minimal-mistakes/archive";
39+
@forward "minimal-mistakes/sidebar";
40+
@forward "minimal-mistakes/print";

‎_sass/minimal-mistakes/_buttons.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
/* ==========================================================================
23
BUTTONS
34
========================================================================== */
@@ -56,7 +57,7 @@
5657
}
5758

5859
&:hover {
59-
@include yiq-contrasted(mix(#000, $color, 20%));
60+
@include yiq-contrasted(color.mix(#000, $color, 20%));
6061
}
6162
}
6263
}

‎_sass/minimal-mistakes/_navigation.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
/* ==========================================================================
23
NAVIGATION
34
========================================================================== */
@@ -91,7 +92,7 @@
9192
text-align: center;
9293
text-decoration: none;
9394
color: $muted-text-color;
94-
border: 1px solid mix(#000, $border-color, 25%);
95+
border: 1px solid color.mix(#000, $border-color, 25%);
9596
border-radius: 0;
9697

9798
&:hover {
@@ -140,7 +141,7 @@
140141
text-align: center;
141142
text-decoration: none;
142143
color: $muted-text-color;
143-
border: 1px solid mix(#000, $border-color, 25%);
144+
border: 1px solid color.mix(#000, $border-color, 25%);
144145
border-radius: $border-radius;
145146

146147
&:hover {
@@ -395,7 +396,7 @@
395396
&:hover {
396397
color: #fff;
397398
border-color: $gray;
398-
background-color: mix(white, #000, 20%);
399+
background-color: color.mix(white, #000, 20%);
399400

400401
&:before,
401402
&:after {
@@ -407,7 +408,7 @@
407408
/* selected*/
408409
input:checked + label {
409410
color: white;
410-
background-color: mix(white, #000, 20%);
411+
background-color: color.mix(white, #000, 20%);
411412

412413
&:before,
413414
&:after {

‎_sass/minimal-mistakes/_notices.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
/* ==========================================================================
23
NOTICE TEXT BLOCKS
34
========================================================================== */
@@ -17,7 +18,7 @@
1718
font-family: $global-font-family;
1819
font-size: $type-size-6 !important;
1920
text-indent: initial; /* override*/
20-
background-color: mix($background-color, $notice-color, $notice-background-mix);
21+
background-color: color.mix($background-color, $notice-color, $notice-background-mix);
2122
border-radius: $border-radius;
2223
box-shadow: 0 1px 1px rgba($notice-color, 0.25);
2324

@@ -46,19 +47,19 @@
4647
}
4748

4849
a {
49-
color: mix(#000, $notice-color, 10%);
50+
color: color.mix(#000, $notice-color, 10%);
5051

5152
&:hover {
52-
color: mix(#000, $notice-color, 50%);
53+
color: color.mix(#000, $notice-color, 50%);
5354
}
5455
}
5556

5657
@at-root #{selector-unify(&, "blockquote")} {
57-
border-left-color: mix(#000, $notice-color, 10%);
58+
border-left-color: color.mix(#000, $notice-color, 10%);
5859
}
5960

6061
code {
61-
background-color: mix($background-color, $notice-color, $code-notice-background-mix)
62+
background-color: color.mix($background-color, $notice-color, $code-notice-background-mix)
6263
}
6364

6465
pre code {

‎_sass/minimal-mistakes/_page.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
/* ==========================================================================
23
SINGLE PAGE/POST
34
========================================================================== */
@@ -347,7 +348,7 @@ body {
347348
margin-bottom: 8px;
348349
padding: 5px 10px;
349350
text-decoration: none;
350-
border: 1px solid mix(#000, $border-color, 25%);
351+
border: 1px solid color.mix(#000, $border-color, 25%);
351352
border-radius: $border-radius;
352353

353354
&:hover {

‎_sass/minimal-mistakes/_search.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
/* ==========================================================================
23
SEARCH
34
========================================================================== */
@@ -21,7 +22,7 @@
2122
transition: 0.2s;
2223

2324
&:hover {
24-
color: mix(#000, $primary-color, 25%);
25+
color: color.mix(#000, $primary-color, 25%);
2526
}
2627
}
2728

‎_sass/minimal-mistakes/_tables.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
/* ==========================================================================
23
TABLES
34
========================================================================== */
@@ -18,7 +19,7 @@ table {
1819

1920
thead {
2021
background-color: $border-color;
21-
border-bottom: 2px solid mix(#000, $border-color, 25%);
22+
border-bottom: 2px solid color.mix(#000, $border-color, 25%);
2223
}
2324

2425
th {
@@ -29,7 +30,7 @@ th {
2930

3031
td {
3132
padding: 0.5em;
32-
border-bottom: 1px solid mix(#000, $border-color, 25%);
33+
border-bottom: 1px solid color.mix(#000, $border-color, 25%);
3334
}
3435

3536
tr,

‎_sass/minimal-mistakes/_utilities.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
/* ==========================================================================
23
UTILITY CLASSES
34
========================================================================== */
@@ -416,7 +417,7 @@ body:hover .visually-hidden button {
416417
.navicon,
417418
.navicon:before,
418419
.navicon:after {
419-
background: mix(#000, $primary-color, 25%);
420+
background: color.mix(#000, $primary-color, 25%);
420421
}
421422

422423
&.close {
@@ -516,12 +517,12 @@ body:hover .visually-hidden button {
516517
========================================================================== */
517518

518519
.footnote {
519-
color: mix(#fff, $gray, 25%);
520+
color: color.mix(#fff, $gray, 25%);
520521
text-decoration: none;
521522
}
522523

523524
.footnotes {
524-
color: mix(#fff, $gray, 25%);
525+
color: color.mix(#fff, $gray, 25%);
525526

526527
ol,
527528
li,

‎_sass/minimal-mistakes/_variables.scss‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
/* ==========================================================================
23
Variables
34
========================================================================== */
@@ -59,16 +60,16 @@ $h-size-6: 1em !default; // ~16px
5960
========================================================================== */
6061

6162
$gray: #7a8288 !default;
62-
$dark-gray: mix(#000, $gray, 50%) !default;
63-
$darker-gray: mix(#000, $gray, 60%) !default;
64-
$light-gray: mix(#fff, $gray, 50%) !default;
65-
$lighter-gray: mix(#fff, $gray, 90%) !default;
63+
$dark-gray: color.mix(#000, $gray, 50%) !default;
64+
$darker-gray: color.mix(#000, $gray, 60%) !default;
65+
$light-gray: color.mix(#fff, $gray, 50%) !default;
66+
$lighter-gray: color.mix(#fff, $gray, 90%) !default;
6667

6768
$background-color: #fff !default;
6869
$code-background-color: #fafafa !default;
6970
$code-background-color-dark: $light-gray !default;
7071
$text-color: $dark-gray !default;
71-
$muted-text-color: mix(#fff, $text-color, 20%) !default;
72+
$muted-text-color: color.mix(#fff, $text-color, 20%) !default;
7273
$border-color: $lighter-gray !default;
7374
$form-background-color: $lighter-gray !default;
7475
$footer-background-color: $lighter-gray !default;
@@ -85,7 +86,7 @@ $warning-color: #d67f05 !default;
8586
$danger-color: #ee5f5b !default;
8687
$info-color: #3b9cba !default;
8788
$focus-color: $primary-color !default;
88-
$active-color: mix(#fff, $primary-color, 80%) !default;
89+
$active-color: color.mix(#fff, $primary-color, 80%) !default;
8990

9091
/* YIQ color contrast */
9192
$yiq-contrasted-dark-default: $dark-gray !default;
@@ -120,12 +121,12 @@ $youtube-color: #bb0000 !default;
120121
$xing-color: #006567 !default;
121122

122123
/* links */
123-
$link-color: mix(#000, $info-color, 20%) !default;
124-
$link-color-hover: mix(#000, $link-color, 25%) !default;
125-
$link-color-visited: mix(#fff, $link-color, 15%) !default;
124+
$link-color: color.mix(#000, $info-color, 20%) !default;
125+
$link-color-hover: color.mix(#000, $link-color, 25%) !default;
126+
$link-color-visited: color.mix(#fff, $link-color, 15%) !default;
126127
$masthead-link-color: $primary-color !default;
127-
$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
128-
$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
128+
$masthead-link-color-hover: color.mix(#000, $primary-color, 25%) !default;
129+
$navicon-link-color-hover: color.mix(#fff, $primary-color, 75%) !default;
129130

130131
/* notices */
131132
$notice-background-mix: 80% !default;

‎_sass/minimal-mistakes/skins/_air.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
/* ==========================================================================
23
Air skin
34
========================================================================== */
@@ -8,12 +9,12 @@ $text-color: #2a2a2a !default;
89
$muted-text-color: $color-secondary !default;
910
$primary-color: $color-primary !default;
1011
$accent-color: $color-accent !default;
11-
$border-color: mix(#fff, $text-color, 85%) !default;
12+
$border-color: color.mix(#fff, $text-color, 85%) !default;
1213
$footer-background-color: $primary-color !default;
1314
$link-color: $primary-color !default;
1415
$masthead-link-color: $text-color !default;
1516
$masthead-link-color-hover: $text-color !default;
16-
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
17+
$navicon-link-color-hover: color.mix(#fff, $text-color, 80%) !default;
1718

1819
.page__footer {
1920
color: #fff !important; // override

0 commit comments

Comments
 (0)