From 7b22333c59828554a8ddbee14b6c9e0aecfad68f Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 30 Mar 2017 13:33:23 +0300 Subject: [PATCH] Housekeeping for grid module Part 1/2: Variables moved and flavor files updated. Screen media queries are still not done. --- dist/mini-default.css | 4 +- dist/mini-sucroa.css | 4 +- docs/v2/DEVLOG.md | 5 + src/flavors/mini-default.scss | 46 +++---- src/flavors/mini-sucroa.scss | 42 +++---- src/mini/_grid.scss | 224 +++++++++++++++++----------------- 6 files changed, 164 insertions(+), 161 deletions(-) diff --git a/dist/mini-default.css b/dist/mini-default.css index 8a51b90..7290308 100644 --- a/dist/mini-default.css +++ b/dist/mini-default.css @@ -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; diff --git a/dist/mini-sucroa.css b/dist/mini-sucroa.css index f36923d..9b12805 100644 --- a/dist/mini-sucroa.css +++ b/dist/mini-sucroa.css @@ -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; diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index ebaf300..a9020de 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -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. diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index a3a22c3..2c346fb 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -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 // elements use fade-out instead of a different // color (`true`/`false`) [11] -//$link-hover-fore-color: #0288d1; // Text color for when hovered or focused +//$link-hover-fore-color: #0288d1; // Text color for 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. diff --git a/src/flavors/mini-sucroa.scss b/src/flavors/mini-sucroa.scss index 97436af..e54d768 100644 --- a/src/flavors/mini-sucroa.scss +++ b/src/flavors/mini-sucroa.scss @@ -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. diff --git a/src/mini/_grid.scss b/src/mini/_grid.scss index 51af9c6..90b54f4 100644 --- a/src/mini/_grid.scss +++ b/src/mini/_grid.scss @@ -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; } -} \ No newline at end of file +}