beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Housekeeping for grid module

Browse source 
Part 1/2: Variables moved and flavor files updated. Screen media queries are still not done.
This commit is contained in:
Angelos Chalaris 2017-03-30 13:33:23 +03:00
parent 17de1b1d2f
commit 7b22333c59
6 changed files with 164 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
dist/mini-default.css vendored
View file

@ -165,8 +165,8 @@ a {
a:hover, a:focus, a:active {
opacity: 0.75; }
/*
Definitions for the grid system.
/*
Definitions for the grid system.
*/
.container {
margin: 0 auto;

4
dist/mini-sucroa.css vendored
View file

@ -167,8 +167,8 @@ a {
a:hover, a:focus, a:active {
opacity: 0.75; }
/*
Definitions for the grid system.
/*
Definitions for the grid system.
*/
.container {
margin: 0 auto;

5
docs/v2/DEVLOG.md
View file

@ -889,3 +889,8 @@
- Started code cleanup and updating.
- Updated `core` by moving all of the variable definitions and defaults at the top of the module's file.
- Updated both flavor files to deal with the indentation and column problems (only for the `core` module so far). Readability is a lot better, but consistency is a little bit worse. For all intents and purposes, this is the way to go for this release, as the previous styling was impossible to read for the most part in many setups.
## 20170330
- Updated `grid` by moving variable definitions and defaults to the top of the module.
- Updated flavor files, dealing with indentation and readability.

46
src/flavors/mini-default.scss
View file

@ -106,7 +106,7 @@ $apply-link-underline: true; // Should an underline be applied to all
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a>
// elements use fade-out instead of a different
// color (`true`/`false`) [11]
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
// Notes:
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
// element's font sizing.
@ -132,28 +132,28 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state o
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
// Variables for grid elements
$use-four-step-grid: false; // Should the old 4-step grid system be used
// instead of the new (`true`/`false`) [1]
$include-parent-layout: true !default; // Should the classes for rows defining the column
// layout of children be included (`true`/`false`) [2]
$grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
$grid-row-name: 'row'; // Class name for the grid's rows
$grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2]
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
$grid-column-count: 12; // Number of columns in the grid (integer value only)
$grid-column-padding: 0 4px; // Padding for the columns of the grid
//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
$use-four-step-grid: false; // Should the old 4-step grid system be used
// instead of the new (`true`/`false`) [1]
$include-parent-layout: true; // Should the classes for rows defining the column
// layout of children be included (`true`/`false`) [2]
$grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
$grid-row-name: 'row'; // Class name for the grid's rows
$grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2]
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
$grid-column-count: 12; // Number of columns in the grid (integer value only)
$grid-column-padding: 0 4px; // Padding for the columns of the grid
//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
// Notes:
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.

42
src/flavors/mini-sucroa.scss
View file

@ -134,28 +134,26 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state o
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
// Variables for grid elements
$use-four-step-grid: false; // Should the old 4-step grid system be used
// instead of the new (`true`/`false`) [1]
$include-parent-layout: true !default; // Should the classes for rows defining the column
// layout of children be included (`true`/`false`) [2]
$grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
$grid-row-name: 'row'; // Class name for the grid's rows
$grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2]
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
$grid-column-count: 12; // Number of columns in the grid (integer value only)
$grid-column-padding: 0 4px; // Padding for the columns of the grid
//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
$use-four-step-grid: false; // Should the old 4-step grid system be used
// instead of the new (`true`/`false`) [1]
$include-parent-layout: true; // Should the classes for rows defining the column
// layout of children be included (`true`/`false`) [2]
$grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
$grid-row-name: 'row'; // Class name for the grid's rows
$grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2]
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
$grid-column-count: 12; // Number of columns in the grid (integer value only)
$grid-column-padding: 0 4px; // Padding for the columns of the grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
// Notes:
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.

224
src/mini/_grid.scss
View file

@ -1,18 +1,33 @@
/*
Definitions for the grid system.
/*
Definitions for the grid system.
*/
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
$use-four-step-grid: false !default; // Flag for the grid system choice
$include-parent-layout: false !default; // Flag for rows defining column layouts
$grid-container-name: 'container' !default; // Class name for the grid system container
$grid-container-side-padding: 20px !default; // Padding for the grid container (left and right only)
$use-four-step-grid: false !default; // Flag for the grid system choice (`true`/`false`).
$include-parent-layout: false !default; // Flag for rows defining column layouts (`true`/`false`).
$grid-container-name: 'container' !default; // Class name for the grid system container.
$grid-container-side-padding: 20px !default; // Padding for the grid container (left and right only).
$grid-row-name: 'row' !default; // Class name for the grid system rows.
$grid-row-parent-layout-prefix: 'cols' !default; // Class name prefix for the grid's row parents.
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns.
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets.
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only).
$grid-column-padding: 0 4px !default; // Padding for the columns of the grid.
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority.
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority.
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty.
$grid-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid (four-step-grid-only).
$grid-small-breakpoint: 768px !default; // Small screen breakpoint for grid (four-step-grid-only).
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid.
$grid-medium-breakpoint: 1024px !default; // Medium screen breakpoint for grid.
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
// Fluid grid system container definition.
.#{$grid-container-name} {
margin: 0 auto;
padding: 0 $grid-container-side-padding;
}
// Grid row definition.
$grid-row-name: 'row' !default; // Class name for the grid system rows
.#{$grid-row-name} {
box-sizing: border-box;
// Old syntax
@ -21,22 +36,13 @@ $grid-row-name: 'row' !default; // Class name for the grid system ro
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
flex-flow: row wrap;
}
$grid-row-parent-layout-prefix: 'cols' !default; // Class name prefix for the grid's row parents
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only)
$grid-column-padding: 0 4px !default; // Padding for the columns of the grid
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty
$grid-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid
// Basic definitions for rows defining column layouts.
@if $include-parent-layout {
@if $use-four-step-grid {
@ -44,9 +50,9 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
@media (min-width: #{$grid-small-breakpoint}){
@ -54,9 +60,9 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
}
@ -65,9 +71,9 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
}
@ -76,9 +82,9 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
}
@ -88,9 +94,9 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
@media (min-width: #{$grid-medium-breakpoint}){
@ -98,9 +104,9 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
}
@ -109,9 +115,9 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
}
@ -120,15 +126,15 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
// Legacy grid system definitions.
@if $use-four-step-grid {
// Grid column generic definitions for extra small screens.
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-'],
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-'],
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-column-offset-suffix}-'] {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
@ -140,9 +146,9 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
flex-basis: 0;
}
}
@else {
@ -152,21 +158,21 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$i},
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix}-#{$i} > * {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
@ -175,9 +181,9 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
}
}
// Grid column specific definitions for offset columns.
@for $i from 0 through ($grid-column-count - 1) {
@ -192,33 +198,31 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
}
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial;
order: initial;
order: initial;
}
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999;
order: -999;
order: -999;
}
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-lst-suffix} {
-webkit-order: 999;
order: 999;
order: 999;
}
}
$grid-small-breakpoint: 768px !default; // Small screen breakpoint for grid
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid
// Legacy grid system definitions.
@if $use-four-step-grid {
// Small screen breakpoint.
@media (min-width: #{$grid-small-breakpoint}){
// Grid column generic definitions for small screens.
.#{$grid-column-prefix}-#{$grid-small-prefix},
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
.#{$grid-column-prefix}-#{$grid-small-prefix},
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
@ -230,9 +234,9 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
flex-basis: 0;
}
}
@else {
@ -242,21 +246,21 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i},
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-#{$i} > * {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
@ -265,7 +269,7 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
}
@ -282,30 +286,30 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial;
order: initial;
order: initial;
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999;
order: -999;
order: -999;
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999;
order: 999;
order: 999;
}
}
}
// Non-legacy grid system definitions.
@else {
// Grid column generic definitions for small screens.
.#{$grid-column-prefix}-#{$grid-small-prefix},
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
.#{$grid-column-prefix}-#{$grid-small-prefix},
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
@ -317,9 +321,9 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
flex-basis: 0;
}
}
@else {
@ -329,21 +333,21 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i},
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-#{$i} > * {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
@ -352,7 +356,7 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
}
@ -369,32 +373,30 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial;
order: initial;
order: initial;
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999;
order: -999;
order: -999;
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999;
order: 999;
order: 999;
}
}
// The rest is mixed definitions.
$grid-medium-breakpoint: 1024px !default; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid
// Medium screen breakpoint.
@media (min-width: #{$grid-medium-breakpoint}){
// Grid column generic definitions for medium screens.
.#{$grid-column-prefix}-#{$grid-medium-prefix},
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
.#{$grid-column-prefix}-#{$grid-medium-prefix},
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'] {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
@ -406,9 +408,9 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
flex-basis: 0;
}
}
@else {
@ -418,21 +420,21 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i},
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-#{$i} > * {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
@ -441,7 +443,7 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
}
@ -458,31 +460,29 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
}
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial;
order: initial;
order: initial;
}
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999;
order: -999;
order: -999;
}
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999;
order: 999;
order: 999;
}
}
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
// Large screen breakpoint.
@media (min-width: #{$grid-large-breakpoint}){
// Grid column generic definitions for large screens.
.#{$grid-column-prefix}-#{$grid-large-prefix},
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],
.#{$grid-column-prefix}-#{$grid-large-prefix},
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'] {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
@ -494,9 +494,9 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
flex-basis: 0;
}
}
@else {
@ -506,21 +506,21 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i},
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-#{$i} > * {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
@ -529,7 +529,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
}
@ -546,14 +546,14 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
}
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial;
order: initial;
order: initial;
}
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999;
order: -999;
order: -999;
}
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999;
order: 999;
order: 999;
}
}
}