Add typography helpers

This commit is contained in:
Jeremy Thomas
2017-07-24 20:22:16 +02:00
parent d7e49a4dc3
commit 3f8655c87d
23 changed files with 1343 additions and 2105 deletions

View File

@@ -1,32 +1,3 @@
// Display
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@each $display in $displays
.is-#{$display}
display: #{$display}
+mobile
.is-#{$display}-mobile
display: #{$display} !important
+tablet
.is-#{$display}-tablet
display: #{$display} !important
+tablet-only
.is-#{$display}-tablet-only
display: #{$display} !important
+touch
.is-#{$display}-touch
display: #{$display} !important
+desktop
.is-#{$display}-desktop
display: #{$display} !important
+desktop-only
.is-#{$display}-desktop-only
display: #{$display} !important
+widescreen
.is-#{$display}-widescreen
display: #{$display} !important
// Float
.is-clearfix
@@ -48,7 +19,7 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
.is-overlay
+overlay
// Text
// Typography
@each $size in $sizes
$i: index($sizes, $size)
@@ -97,6 +68,39 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
// Visibility
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@each $display in $displays
.is-#{$display}
display: #{$display}
+mobile
.is-#{$display}-mobile
display: #{$display} !important
+tablet
.is-#{$display}-tablet
display: #{$display} !important
+tablet-only
.is-#{$display}-tablet-only
display: #{$display} !important
+touch
.is-#{$display}-touch
display: #{$display} !important
+desktop
.is-#{$display}-desktop
display: #{$display} !important
+desktop-only
.is-#{$display}-desktop-only
display: #{$display} !important
+widescreen
.is-#{$display}-widescreen
display: #{$display} !important
+widescreen-only
.is-#{$display}-widescreen-only
display: #{$display} !important
+fullhd
.is-#{$display}-fullhd
display: #{$display} !important
.is-hidden
display: none !important
@@ -128,6 +132,14 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
.is-hidden-widescreen
display: none !important
+widescreen-only
.is-hidden-widescreen-only
display: none !important
+fullhd
.is-hidden-fullhd
display: none !important
// Other
.is-marginless