wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Standardize on "responsive" helper mixin

Browse source
This commit is contained in:
Adam Wathan 2017-08-02 12:30:14 -04:00
parent 487cbef751
commit a085162cd8
2 changed files with 10 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/utilities/backgrounds.less
View file

@ -22,7 +22,7 @@
.bg-overlay-soft { background-color: rgba(0,0,0,0.5); }
.bg-overlay-dark { background-color: rgba(0,0,0,0.75); }
.generate-responsive-versions({
.responsive({
&bg-light { .bg-light; }
&bg-light-soft { .bg-light-soft; }
&bg-light-softer { .bg-light-softer; }

30
src/utilities/misc.less
View file

@ -1,24 +1,3 @@
.screen-sm(@ruleset) { @media (min-width: @screen-sm) { @ruleset(); }}
.screen-md(@ruleset) { @media (min-width: @screen-md) { @ruleset(); }}
.screen-lg(@ruleset) { @media (min-width: @screen-lg) { @ruleset(); }}
.screen-xl(@ruleset) { @media (min-width: @screen-xl) { @ruleset(); }}
.responsive(@ruleset) {
.screen-sm({ .sm\: { @ruleset(); }});
.screen-md({ .md\: { @ruleset(); }});
.screen-lg({ .lg\: { @ruleset(); }});
.screen-xl({ .xl\: { @ruleset(); }});
}
.generate-responsive-versions(@ruleset; @i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 3);
.generate-responsive-version(@ruleset, @name, @screen-width);
.generate-responsive-versions(@ruleset, @i + 1);
}
.generate-responsive-version(@ruleset, @screen, @min-width) {
@prefix: ~"@{screen}\:";
@ -27,6 +6,15 @@
}
}
.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);
}
.no-focus {
&:focus, &:active {
outline: none;