From 6123ae6cd6ce415470ddc690b3d3387cfad9548a Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Mon, 7 Mar 2016 10:13:09 -0800 Subject: [PATCH] Change $global-breakpoint to be a number derived from the width of the container and gutters, and rename $grid-column-gutter to $global-gutter so it can be moved to the global CSS file --- scss/_global.scss | 6 +++++- scss/components/_media-query.scss | 6 +++--- scss/components/_visibility.scss | 4 ++-- scss/grid/_block-grid.scss | 2 +- scss/grid/_grid.scss | 24 ++++++++++-------------- scss/util/_util.scss | 2 +- testing/src/assets/scss/_settings.scss | 6 +++--- testing/src/assets/scss/app.scss | 2 +- 8 files changed, 26 insertions(+), 26 deletions(-) diff --git a/scss/_global.scss b/scss/_global.scss index 5907042b..5de2f79a 100755 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -58,6 +58,10 @@ $global-width: 580px !default; /// @type Length $global-width-small: 95% !default; +/// Gutter for grid elements. +/// @type length +$global-gutter: 16px !default; + /// Color for the container background /// @type Color $container-background-color: $white !default; @@ -72,4 +76,4 @@ $global-rounded: 500px !default; /// Global media query to switch from desktop to mobile styles. /// @type String -$global-breakpoint: '(max-width: 580px)'; +$global-breakpoint: $global-width + $global-gutter; diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss index 9d625476..3af84630 100755 --- a/scss/components/_media-query.scss +++ b/scss/components/_media-query.scss @@ -6,7 +6,7 @@ /// @group media-query //// -@media only screen and #{$global-breakpoint} { +@media only screen and (max-width: #{$global-breakpoint}) { table.body img { width: auto !important; height: auto !important; @@ -28,8 +28,8 @@ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; - padding-left: $grid-column-gutter !important; - padding-right: $grid-column-gutter !important; + padding-left: $global-gutter !important; + padding-right: $global-gutter !important; } //If it's collapsed make it so. diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss index b1810103..09400bf0 100644 --- a/scss/components/_visibility.scss +++ b/scss/components/_visibility.scss @@ -12,13 +12,13 @@ mso-hide:all; overflow:hidden; - @media only screen and #{$global-breakpoint} { + @media only screen and (max-width: #{$global-breakpoint}) { display: block; } } .show-for-large { - @media only screen and #{$global-breakpoint} { + @media only screen and (max-width: #{$global-breakpoint}) { display: none; width:0; mso-hide:all; diff --git a/scss/grid/_block-grid.scss b/scss/grid/_block-grid.scss index b46c749f..0a38192a 100755 --- a/scss/grid/_block-grid.scss +++ b/scss/grid/_block-grid.scss @@ -12,7 +12,7 @@ $block-grid-max: 8 !default; /// Gutter between elements in a block grid. /// @type Number -$block-grid-gutter: $grid-column-gutter !default; +$block-grid-gutter: $global-gutter !default; .block-grid { width: 100%; diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss index 9417b570..b74a5589 100755 --- a/scss/grid/_grid.scss +++ b/scss/grid/_grid.scss @@ -18,13 +18,9 @@ $wrapper-padding-top: 10px !default; /// @type Number $column-padding-bottom: 10px !default; -/// Default gutter for the grid system -/// @type Number -$grid-column-gutter: 16px !default; - /// Default padding for the right of a sub-column. /// @type Number -$sub-column-padding-right: $grid-column-gutter / 2 !default; +$sub-column-padding-right: $global-gutter / 2 !default; /// Body background color. /// @type Length @@ -67,14 +63,14 @@ td.column, th.columns, th.column { margin: 0 auto; - padding-left: $grid-column-gutter; + padding-left: $global-gutter; } td.columns.last, td.column.last, th.columns.last, th.column.last { - padding-right: $grid-column-gutter; + padding-right: $global-gutter; } //makes sure nested tables are 100% width @@ -91,18 +87,18 @@ th.column { td.large-#{$i}, th.large-#{$i} { width: -zf-grid-calc-px($i, $grid-column-count, $global-width); - padding-left: $grid-column-gutter / 2; - padding-right: $grid-column-gutter / 2; + padding-left: $global-gutter / 2; + padding-right: $global-gutter / 2; } td.large-#{$i}.first, th.large-#{$i}.first { - padding-left: $grid-column-gutter; + padding-left: $global-gutter; } td.large-#{$i}.last, th.large-#{$i}.last { - padding-right: $grid-column-gutter; + padding-right: $global-gutter; } //Collapsed logic @@ -111,7 +107,7 @@ th.column { th.large-#{$i} { padding-right: 0; padding-left: 0; - width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $grid-column-gutter; + width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter; } //Gotta give it that extra love for the first and last columns. @@ -119,7 +115,7 @@ th.column { th.large-#{$i}.first, td.large-#{$i}.last, th.large-#{$i}.last { - width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($grid-column-gutter * 1.5); + width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5); } } } @@ -147,7 +143,7 @@ th.column { th.large-offset-#{$i}.first, th.large-offset-#{$i}.last { //1.5 takes in effect a whole empty cell. - padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $grid-column-gutter * 2; + padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2; } } diff --git a/scss/util/_util.scss b/scss/util/_util.scss index afa2abae..faabca54 100755 --- a/scss/util/_util.scss +++ b/scss/util/_util.scss @@ -18,5 +18,5 @@ /// @param {number} $containerWidth - Width of the surrounding container, in pixels. /// @returns {number} A pixel width value. @function -zf-grid-calc-px($columnNumber, $totalColumns, $containerWidth) { - @return ($containerWidth / $totalColumns * $columnNumber - $grid-column-gutter); + @return ($containerWidth / $totalColumns * $columnNumber - $global-gutter); } diff --git a/testing/src/assets/scss/_settings.scss b/testing/src/assets/scss/_settings.scss index 8d6d0e7c..eabf960a 100644 --- a/testing/src/assets/scss/_settings.scss +++ b/testing/src/assets/scss/_settings.scss @@ -41,15 +41,15 @@ $global-breakpoint: '(max-width: 580px)'; $grid-column-count: 12; $wrapper-padding-top: 10px; $column-padding-bottom: 10px; -$grid-column-gutter: 16px; -$sub-column-padding-right: $grid-column-gutter / 2; +$global-gutter: 16px; +$sub-column-padding-right: $global-gutter / 2; $body-background-color: $light-gray; // 3. Block Grid // ------------- $block-grid-max: 8; -$block-grid-gutter: $grid-column-gutter; +$block-grid-gutter: $global-gutter; // 4. Thumbnial // ------------ diff --git a/testing/src/assets/scss/app.scss b/testing/src/assets/scss/app.scss index 00eb7f06..78e107f0 100644 --- a/testing/src/assets/scss/app.scss +++ b/testing/src/assets/scss/app.scss @@ -1,7 +1,7 @@ @import 'settings'; @import '../../../../scss/foundation'; -@media only screen and #{$global-breakpoint} { +@media only screen and (max-width: #{$global-breakpoint}) { .small-float-center { margin: 0 auto; float: none; -- 2.47.2