Move responsive mixins; support disabling responsiveness

This commit is contained in:
Adam Wathan 2017-08-06 07:56:53 -04:00
parent 82833d2631
commit ecd66cd2a6
3 changed files with 24 additions and 24 deletions

View File

@ -1,5 +1,6 @@
@import "generators/_helpers";
@import "generators/_matching";
@import "generators/_responsive";
@import "generators/_utility-variants";
@import "generators/backgrounds";

View File

@ -0,0 +1,23 @@
.generate-responsive-variants(@ruleset, @screen, @min-width) {
@prefix: ~"@{screen}\:";
@media (min-width: @min-width) {
.@{prefix} { @ruleset(); };
}
}
.responsive(@ruleset; @i: 1) when (@i <= length(@screens)) and not (@screens = none) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-responsive-variants(@ruleset, @name, @screen-width);
.responsive(@ruleset, @i + 1);
}
.screen(@screen, @ruleset) {
.extract-match(@screens; @screen);
@media (min-width: @__match) {
@ruleset();
}
}

View File

@ -1,27 +1,3 @@
.generate-responsive-version(@ruleset, @screen, @min-width) {
@prefix: ~"@{screen}\:";
@media (min-width: @min-width) {
.@{prefix} { @ruleset(); };
}
}
.responsive(@ruleset; @i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-responsive-version(@ruleset, @name, @screen-width);
.responsive(@ruleset, @i + 1);
}
.screen(@screen, @ruleset) {
.extract-match(@screens; @screen);
@media (min-width: @__match) {
@ruleset();
}
}
.no-focus {
&:focus, &:active {
outline: none;