Add display responsive classes

This commit is contained in:
Jeremy Thomas
2016-05-07 13:31:31 +01:00
8 changed files with 44 additions and 8 deletions

View File

@@ -1,8 +1,31 @@
// Display
.is-flex
display: flex
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@each $display in $displays
.is-#{$display}
display: #{$display}
.is-#{$display}-mobile
+mobile
display: #{$display} !important
.is-#{$display}-tablet
+tablet
display: #{$display} !important
.is-#{$display}-tablet-only
+tablet-only
display: #{$display} !important
.is-#{$display}-touch
+touch
display: #{$display} !important
.is-#{$display}-desktop
+desktop
display: #{$display} !important
.is-#{$display}-desktop-only
+desktop-only
display: #{$display} !important
.is-#{$display}-widescreen
+widescreen
display: #{$display} !important
// Float
.is-clearfix
@@ -40,6 +63,10 @@
display: none !important
.is-hidden-tablet
+tablet
display: none !important
.is-hidden-tablet-only
+tablet-only
display: none !important
@@ -48,9 +75,17 @@
display: none !important
.is-hidden-desktop
+desktop
display: none !important
.is-hidden-desktop-only
+desktop-only
display: none !important
.is-hidden-widescreen
+widescreen
display: none !important
// Other
.is-disabled

View File

@@ -101,7 +101,7 @@
display: block
width: 100%
&.is-loading
color: transparent
color: transparent !important
pointer-events: none
&:after
@extend .loader

View File

@@ -9,6 +9,7 @@
display: inline-flex
font-size: $size-normal
height: 32px
justify-content: flex-start
line-height: 24px
padding-left: 8px
padding-right: 8px