Skip to content

Commit

Permalink
feat: State class loop mixin
Browse files Browse the repository at this point in the history
  • Loading branch information
zastrow committed Jan 25, 2021
1 parent ee905da commit 7b8ee42
Show file tree
Hide file tree
Showing 9 changed files with 108 additions and 25 deletions.
1 change: 1 addition & 0 deletions _sparkle-settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ $settings: (
'loop-mq': true,
'print-classes': true,
'system-color': true,
'system-color-states': true,
'system-grid': true,
'system-spacing': true,
'system-font-family': true,
Expand Down
36 changes: 36 additions & 0 deletions systems/color/_mixin.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
@mixin sparkle-loop-states {
@if settings(system-color-states) {
&,
&\:hover:hover,
&\:active:active,
&\:focus:focus {
@content;
}
}
@else {
@content;
}

@if settings(system-color-states) and settings(loop-mq) {
// This is a variation on the loop-mq mixin
@each $key, $val in $media-queries {
// Checks that the media query is a number
@if $val != $val + "" {
@media (min-width: #{$val}) {
&\@#{$key},
&\@#{$key}\:hover:hover,
&\@#{$key}\:active:active,
&\@#{$key}\:focus:focus {
@content;
}
}
}
}
}
@else if settings(loop-mq) {
@include loop-mq {
@content;
}
}
}

50 changes: 50 additions & 0 deletions systems/color/_test.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
@import 'true';
$sparkle-show-docs: false;

@import 'mixin';

$settings: (
'loop-mq': true,
'system-color-states': true
);

$media-queries: (
'sm': 40rem,
);

$colors: (
'primary': deeppink,
);



@include describe('The color function and state mixin') {
@include it('outputs the media-query properties and state classes of the loop.') {
@include assert {
@include output {
.test {
@include sparkle-loop-states {
color: deeppink;
}
}
}
@include expect {
.test,
.test\:hover:hover,
.test\:active:active,
.test\:focus:focus {
color: deeppink;
}

@media (min-width: 40rem) {
.test\@sm,
.test\@sm\:hover:hover,
.test\@sm\:active:active,
.test\@sm\:focus:focus {
color: deeppink;
}
}
}
}
}
}
9 changes: 4 additions & 5 deletions systems/color/background/_utility.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../mixin';

@if settings('utility-background-color') {
@if $sparkle-show-docs {
/* ---
Expand Down Expand Up @@ -34,11 +36,8 @@
*/
}

.#{settings(prefix)}-background-color-#{$key},
.#{settings(prefix)}-background-color-#{$key}\:hover:hover,
.#{settings(prefix)}-background-color-#{$key}\:active:active,
.#{settings(prefix)}-background-color-#{$key}\:focus:focus {
@include loop-mq {
.#{settings(prefix)}-background-color-#{$key} {
@include sparkle-loop-states {
background-color: $val;
}
}
Expand Down
9 changes: 4 additions & 5 deletions systems/color/border/_utility.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../mixin';

@if settings('utility-border-color') {
@if $sparkle-show-docs {
/* ---
Expand Down Expand Up @@ -32,11 +34,8 @@
</tr>
*/
}
.#{settings(prefix)}-border-color-#{$key},
.#{settings(prefix)}-border-color-#{$key}\:hover:hover,
.#{settings(prefix)}-border-color-#{$key}\:active:active,
.#{settings(prefix)}-border-color-#{$key}\:focus:focus {
@include loop-mq {
.#{settings(prefix)}-border-color-#{$key} {
@include sparkle-loop-states {
border-color: $val;
}
}
Expand Down
9 changes: 4 additions & 5 deletions systems/color/foreground/_utility.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../mixin';

@if settings('utility-foreground-color') {
@if $sparkle-show-docs {
/* ---
Expand Down Expand Up @@ -32,11 +34,8 @@
</tr>
*/
}
.#{settings(prefix)}-color-#{$key},
.#{settings(prefix)}-color-#{$key}\:hover:hover,
.#{settings(prefix)}-color-#{$key}\:active:active,
.#{settings(prefix)}-color-#{$key}\:focus:focus {
@include loop-mq {
.#{settings(prefix)}-color-#{$key} {
@include sparkle-loop-states {
color: $val;
}
}
Expand Down
9 changes: 4 additions & 5 deletions systems/color/outline/_utility.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../mixin';

@if settings('utility-outline-color') {
@if $sparkle-show-docs {
/* ---
Expand Down Expand Up @@ -33,11 +35,8 @@
*/
}

.#{settings(prefix)}-outline-#{$key},
.#{settings(prefix)}-outline-#{$key}\:hover:hover,
.#{settings(prefix)}-outline-#{$key}\:active:active,
.#{settings(prefix)}-outline-#{$key}\:focus:focus {
@include loop-mq {
.#{settings(prefix)}-outline-#{$key} {
@include sparkle-loop-states {
outline-color: $val;
}
}
Expand Down
9 changes: 4 additions & 5 deletions systems/color/text-decoration/_utility.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../mixin';

@if settings('utility-text-decoration-color') {
@if $sparkle-show-docs {
/* ---
Expand Down Expand Up @@ -34,11 +36,8 @@
</tr>
*/
}
.#{settings(prefix)}-decoration-color-#{$key},
.#{settings(prefix)}-decoration-color-#{$key}\:hover:hover,
.#{settings(prefix)}-decoration-color-#{$key}\:active:active,
.#{settings(prefix)}-decoration-color-#{$key}\:focus:focus {
@include loop-mq {
.#{settings(prefix)}-decoration-color-#{$key} {
@include sparkle-loop-states {
text-decoration-color: $val;
}
}
Expand Down
1 change: 1 addition & 0 deletions test/test.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
@import "../systems/color/border/test";
@import "../systems/color/outline/test";
@import "../systems/color/text-decoration/test";
@import "../systems/color/test";
@import "../systems/z-index/test";
@import "../systems/font/family/test";
@import "../systems/font/size/test";
Expand Down

0 comments on commit 7b8ee42

Please sign in to comment.