// // Helper // —————————————-
.clearfix {
@include clearfix();
}
// hides every element even on screenreaders .hidden {
display: none !important; visibility: hidden !important;
}
.show {
display: inherit !important; visibility: inherit !important;
}
@mixin hidden-element ($size) {
.hidden-#{$size} { display: none !important; }
}
@mixin visible-element ($size) {
.visible-#{$size} { display: initial !important; } .visible-#{$size}-block { display: block !important; } .visible-#{$size}-inline { display: inline !important; } .visible-#{$size}-inline-block { display: inline-block !important; }
}
@mixin visible-default-element ($size) {
.visible-#{$size} { display: none !important; } .visible-#{$size}-block { display: none !important; } .visible-#{$size}-inline { display: none !important; } .visible-#{$size}-inline-block { display: none !important; }
}
// default @include visible-default-element('xs'); @include visible-default-element('s'); @include visible-default-element('m'); @include visible-default-element('l'); @include visible-default-element('xl');
@media (max-width: #{$grid-extra-small-max}px) {
@include visible-element('xs'); @include hidden-element('xs');
}
@media (max-width: #{$grid-small-max}px) and (min-width: #{$grid-small-min}px) {
@include visible-element('s'); @include hidden-element('s');
}
@media (max-width: #{$grid-medium-max}px) and (min-width: #{$grid-medium-min}px) {
@include visible-element('m'); @include hidden-element('m');
}
@media (max-width: #{$grid-large-max}px) and (min-width: #{$grid-large-min}px) {
@include visible-element('l'); @include hidden-element('l');
}
@media (min-width: #{$grid-extra-large-min}px) {
@include visible-element('xl'); @include hidden-element('xl');
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
// spacer helper for layouts @for $i from 1 through 18 {
.offset-top-#{$i} { margin-top: building-units($i); } .offset-right-#{$i} { margin-right: building-units($i); } .offset-bottom-#{$i} { margin-bottom: building-units($i); } .offset-left-#{$i} { margin-left: building-units($i); }
}
@mixin offset($size) {
@for $i from 1 through 18 { .offset-#{$size}-top-#{$i} { margin-top: building-units($i); } .offset-#{$size}-right-#{$i} { margin-right: building-units($i); } .offset-#{$size}-bottom-#{$i} { margin-bottom: building-units($i); } .offset-#{$size}-left-#{$i} { margin-left: building-units($i); } }
}
// default @include offset('l');
// down-sizing @media screen and (max-width: #{$grid-medium-max}px) {
@include offset('m');
}
@media screen and (max-width: #{$grid-small-max}px) {
@include offset('s');
}
// up-sizing @media screen and (min-width: #{$grid-extra-large-min}px) {
@include offset('xl');
}
// vertical centering helper .h-ctr {
display: table; margin-left: auto; margin-right: auto;
}
.v-ctr {
display: table; height: 100%; > div { display: table-cell; vertical-align: middle; }
}
%separator {
position: relative; > * { display: block; position: absolute; bottom: 0; width: 100%; }
}
// Content Separator @mixin separator() {
@for $i from 1 through 18 { .cont-sep-#{$i} { @extend %separator; height: building-units($i); } }
}
@include separator();