grav-theme-libretic/scss/nucleus/_flex.scss
2015-01-15 19:15:54 +01:00

151 lines
No EOL
2.4 KiB
SCSS

// Page Container
.g-container {
width: $large-desktop-container;
margin: 0 auto;
padding: 0;
@include breakpoint(desktop-range) {
width: $desktop-container;
}
@include breakpoint(tablet-range) {
width: $tablet-container;
}
@include breakpoint(large-mobile-range) {
width: $large-mobile-container;
}
@include breakpoint(small-mobile-range) {
width: $mobile-container;
}
}
// Grid Row and Column Setup
.g-grid {
@include display(flex);
@include flex-flow(row wrap);
list-style: none;
margin: 0;
padding: 0;
&.nowrap {
@include flex-flow(row);
}
}
.g-block {
@include flex(1);
min-width: 0;
min-height: 0;
@include breakpoint(mobile-only) {
@include flex(0 100%);
}
}
// Content Block Spacing
.g-content {
margin: $content-margin;
padding: $content-padding;
}
body [class*="size-"] {
@include breakpoint(mobile-only) {
@include flex(0 100%);
}
}
// Custom Size Modifiers
.size-1-2 {
@include flex(0 percentage(1/2));
}
.size-1-3 {
@include flex(0 percentage(1/3));
}
.size-1-4 {
@include flex(0 percentage(1/4));
}
.size-1-5 {
@include flex(0 percentage(1/5));
}
.size-1-6 {
@include flex(0 percentage(1/6));
}
.size-1-7 {
@include flex(0 percentage(1/7));
}
.size-1-8 {
@include flex(0 percentage(1/8));
}
.size-1-9 {
@include flex(0 percentage(1/9));
}
.size-1-10 {
@include flex(0 percentage(1/10));
}
.size-1-11 {
@include flex(0 percentage(1/11));
}
.size-1-12 {
@include flex(0 percentage(1/12));
}
// Fix for Firefox versions 27 and below
@include breakpoint(mobile-only) {
@supports not (flex-wrap: wrap) {
.g-grid {
display: block;
@include flex-wrap(inherit);
}
.g-block {
display: block;
@include flex(inherit);
}
}
}
// Reordering
.first-block {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
.last-block {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
// Fixed Grid Style
.fixed-blocks {
@include flex-flow(row wrap);
.g-block {
@include flex(inherit);
width: $fixed-block-full;
@include breakpoint(desktop-range) {
width: $fixed-block-desktop;
}
@include breakpoint(tablet-range) {
width: $fixed-block-tablet;
}
@include breakpoint(mobile-only) {
width: 100%;
}
}
}
// Fix for browsers that don't support flex-wrap
@supports not (flex-wrap: wrap) {
.fixed-blocks {
display: block;
@include flex-flow(inherit);
}
}