From 6163a03fd48a25edcbb700a7014837c021f0f947 Mon Sep 17 00:00:00 2001 From: Daniel Ruf Date: Sun, 8 Apr 2018 23:17:43 +0200 Subject: [PATCH 1/4] fix: use the right breakpoints in block-grid for gutter calculation --- scss/xy-grid/_classes.scss | 6 +++--- scss/xy-grid/_layout.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss index 3cc45a5b0c..c967c70bb0 100644 --- a/scss/xy-grid/_classes.scss +++ b/scss/xy-grid/_classes.scss @@ -188,7 +188,7 @@ @include -zf-each-breakpoint { @for $i from 1 through $xy-block-grid-max { .#{$-zf-size}-up-#{$i} { - @include xy-grid-layout($i, '.cell', false, $gutter-type: padding); + @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: padding, $breakpoint: $-zf-size); } } } @@ -203,7 +203,7 @@ @each $bp in -zf-breakpoints-less-than($-zf-size) { @if(map-has-key($grid-margin-gutters, $bp)) { .grid-margin-x.#{$bp}-up-#{$i} { - @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp); + @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size); } } } @@ -211,7 +211,7 @@ } @for $i from 1 through $xy-block-grid-max { .grid-margin-x.#{$-zf-size}-up-#{$i} { - @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size); + @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size); } } } diff --git a/scss/xy-grid/_layout.scss b/scss/xy-grid/_layout.scss index 3b7650e321..309abe9444 100644 --- a/scss/xy-grid/_layout.scss +++ b/scss/xy-grid/_layout.scss @@ -28,6 +28,6 @@ $size: percentage(1/$n); & > #{$selector} { - @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical); + @include xy-cell($size, $gutter-output: $gutter-output, $gutters: $gutters, $gutter-type: $gutter-type, $gutter-position: $gutter-position, $breakpoint: $breakpoint, $vertical: $vertical); } } From 0f6659c17a26ad43b7e51bd210fe2aa348dc9318 Mon Sep 17 00:00:00 2001 From: Daniel Ruf Date: Mon, 9 Apr 2018 23:52:54 +0200 Subject: [PATCH 2/4] chore: use short named mixin parameters --- scss/settings/_settings.scss | 44 ++++++++++++++++++++++++------------ scss/xy-grid/_layout.scss | 2 +- 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss index fb447f8956..7b015b2552 100644 --- a/scss/settings/_settings.scss +++ b/scss/settings/_settings.scss @@ -95,12 +95,10 @@ $global-menu-nested-margin: 1rem; $global-text-direction: ltr; $global-flexbox: true; $global-prototype-breakpoints: false; -$global-button-cursor: pointer; +$global-button-cursor: auto; $global-color-pick-contrast-tolerance: 0; $print-transparent-backgrounds: true; -@include add-foundation-colors; - // 2. Breakpoints // -------------- @@ -161,12 +159,7 @@ $header-small-font-color: $medium-gray; $paragraph-lineheight: 1.6; $paragraph-margin-bottom: 1rem; $paragraph-text-rendering: optimizeLegibility; -$code-color: $black; -$code-font-family: $font-family-monospace; -$code-font-weight: $global-weight-normal; -$code-background: $light-gray; -$code-border: 1px solid $medium-gray; -$code-padding: rem-calc(2 5 1); +$enable-code-inline: true; $anchor-color: $primary-color; $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); $anchor-text-decoration: none; @@ -186,9 +179,7 @@ $defnlist-term-margin-bottom: 0.3rem; $blockquote-color: $dark-gray; $blockquote-padding: rem-calc(9 20 0 19); $blockquote-border: 1px solid $medium-gray; -$cite-font-size: rem-calc(13); -$cite-color: $dark-gray; -$cite-pseudo-content: '\2014 \0020'; +$enable-cite-block: true; $keystroke-font: $font-family-monospace; $keystroke-color: $black; $keystroke-background: $light-gray; @@ -207,6 +198,17 @@ $subheader-font-weight: $global-weight-normal; $subheader-margin-top: 0.2rem; $subheader-margin-bottom: 0.5rem; $stat-font-size: 2.5rem; +$cite-color: $dark-gray; +$cite-font-size: rem-calc(13); +$cite-pseudo-content: '\2014 \0020'; +$code-color: $black; +$code-font-family: $font-family-monospace; +$code-font-weight: $global-weight-normal; +$code-background: $light-gray; +$code-border: 1px solid $medium-gray; +$code-padding: rem-calc(2 5 1); +$code-block-padding: 1rem; +$code-block-margin-bottom: 1.5rem; // 6. Abide // -------- @@ -224,6 +226,8 @@ $input-error-font-weight: $global-weight-bold; $accordion-background: $white; $accordion-plusminus: true; +$accordion-plus-content: '\002B'; +$accordion-minus-content: '\2013'; $accordion-title-font-size: rem-calc(12); $accordion-item-color: $primary-color; $accordion-item-background-hover: $light-gray; @@ -279,6 +283,7 @@ $breadcrumbs-item-separator-color: $medium-gray; // ---------- $button-font-family: inherit; +$button-font-weight: null; $button-padding: 0.85em 1em; $button-margin: 0 0 $global-margin 0; $button-fill: solid; @@ -287,6 +292,7 @@ $button-background-hover: scale-color($button-background, $lightness: -15%); $button-color: $white; $button-color-alt: $black; $button-radius: $global-radius; +$button-border: 1px solid transparent; $button-hollow-border-width: 1px; $button-sizes: ( tiny: 0.6rem, @@ -299,6 +305,7 @@ $button-opacity-disabled: 0.25; $button-background-hover-lightness: -20%; $button-hollow-hover-lightness: -50%; $button-transition: background-color 0.25s ease-out, color 0.25s ease-out; +$button-responsive-expanded: false; // 12. Button Group // ---------------- @@ -316,7 +323,11 @@ $callout-background: $white; $callout-background-fade: 85%; $callout-border: 1px solid rgba($black, 0.25); $callout-margin: 0 0 1rem 0; -$callout-padding: 1rem; +$callout-sizes: ( + small: 0.5rem, + default: 1rem, + large: 3rem, +); $callout-font-color: $body-font-color; $callout-font-color-alt: $body-background; $callout-radius: $global-radius; @@ -475,7 +486,6 @@ $menu-simple-margin: 1rem; $menu-item-color-active: $white; $menu-item-background-active: get-color(primary); $menu-icon-spacing: 0.25rem; -$menu-item-background-hover: $light-gray; $menu-state-back-compat: true; $menu-centered-back-compat: true; $menu-icons-back-compat: true; @@ -545,6 +555,8 @@ $pagination-ellipsis-color: $black; $pagination-mobile-items: false; $pagination-mobile-current-item: false; $pagination-arrows: true; +$pagination-arrow-previous: '\00AB'; +$pagination-arrow-next: '\00BB'; // 28. Progress Bar // ---------------- @@ -766,6 +778,8 @@ $switch-paddle-background: $white; $switch-paddle-offset: 0.25rem; $switch-paddle-radius: $global-radius; $switch-paddle-transition: all 0.25s ease-out; +$switch-opacity-disabled: .5; +$switch-cursor-disabled: not-allowed; // 50. Table // --------- @@ -808,7 +822,7 @@ $tab-content-padding: 1rem; // 52. Thumbnail // ------------- -$thumbnail-border: solid 4px $white; +$thumbnail-border: 4px solid $white; $thumbnail-margin-bottom: $global-margin; $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); diff --git a/scss/xy-grid/_layout.scss b/scss/xy-grid/_layout.scss index 309abe9444..3b7650e321 100644 --- a/scss/xy-grid/_layout.scss +++ b/scss/xy-grid/_layout.scss @@ -28,6 +28,6 @@ $size: percentage(1/$n); & > #{$selector} { - @include xy-cell($size, $gutter-output: $gutter-output, $gutters: $gutters, $gutter-type: $gutter-type, $gutter-position: $gutter-position, $breakpoint: $breakpoint, $vertical: $vertical); + @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical); } } From 8febe20fb1b8244e023caf69243d88b3f680d3cc Mon Sep 17 00:00:00 2001 From: Daniel Ruf Date: Tue, 10 Apr 2018 00:00:51 +0200 Subject: [PATCH 3/4] chore: revert settings file --- scss/settings/_settings.scss | 44 ++++++++++++------------------------ 1 file changed, 15 insertions(+), 29 deletions(-) diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss index 7b015b2552..fb447f8956 100644 --- a/scss/settings/_settings.scss +++ b/scss/settings/_settings.scss @@ -95,10 +95,12 @@ $global-menu-nested-margin: 1rem; $global-text-direction: ltr; $global-flexbox: true; $global-prototype-breakpoints: false; -$global-button-cursor: auto; +$global-button-cursor: pointer; $global-color-pick-contrast-tolerance: 0; $print-transparent-backgrounds: true; +@include add-foundation-colors; + // 2. Breakpoints // -------------- @@ -159,7 +161,12 @@ $header-small-font-color: $medium-gray; $paragraph-lineheight: 1.6; $paragraph-margin-bottom: 1rem; $paragraph-text-rendering: optimizeLegibility; -$enable-code-inline: true; +$code-color: $black; +$code-font-family: $font-family-monospace; +$code-font-weight: $global-weight-normal; +$code-background: $light-gray; +$code-border: 1px solid $medium-gray; +$code-padding: rem-calc(2 5 1); $anchor-color: $primary-color; $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); $anchor-text-decoration: none; @@ -179,7 +186,9 @@ $defnlist-term-margin-bottom: 0.3rem; $blockquote-color: $dark-gray; $blockquote-padding: rem-calc(9 20 0 19); $blockquote-border: 1px solid $medium-gray; -$enable-cite-block: true; +$cite-font-size: rem-calc(13); +$cite-color: $dark-gray; +$cite-pseudo-content: '\2014 \0020'; $keystroke-font: $font-family-monospace; $keystroke-color: $black; $keystroke-background: $light-gray; @@ -198,17 +207,6 @@ $subheader-font-weight: $global-weight-normal; $subheader-margin-top: 0.2rem; $subheader-margin-bottom: 0.5rem; $stat-font-size: 2.5rem; -$cite-color: $dark-gray; -$cite-font-size: rem-calc(13); -$cite-pseudo-content: '\2014 \0020'; -$code-color: $black; -$code-font-family: $font-family-monospace; -$code-font-weight: $global-weight-normal; -$code-background: $light-gray; -$code-border: 1px solid $medium-gray; -$code-padding: rem-calc(2 5 1); -$code-block-padding: 1rem; -$code-block-margin-bottom: 1.5rem; // 6. Abide // -------- @@ -226,8 +224,6 @@ $input-error-font-weight: $global-weight-bold; $accordion-background: $white; $accordion-plusminus: true; -$accordion-plus-content: '\002B'; -$accordion-minus-content: '\2013'; $accordion-title-font-size: rem-calc(12); $accordion-item-color: $primary-color; $accordion-item-background-hover: $light-gray; @@ -283,7 +279,6 @@ $breadcrumbs-item-separator-color: $medium-gray; // ---------- $button-font-family: inherit; -$button-font-weight: null; $button-padding: 0.85em 1em; $button-margin: 0 0 $global-margin 0; $button-fill: solid; @@ -292,7 +287,6 @@ $button-background-hover: scale-color($button-background, $lightness: -15%); $button-color: $white; $button-color-alt: $black; $button-radius: $global-radius; -$button-border: 1px solid transparent; $button-hollow-border-width: 1px; $button-sizes: ( tiny: 0.6rem, @@ -305,7 +299,6 @@ $button-opacity-disabled: 0.25; $button-background-hover-lightness: -20%; $button-hollow-hover-lightness: -50%; $button-transition: background-color 0.25s ease-out, color 0.25s ease-out; -$button-responsive-expanded: false; // 12. Button Group // ---------------- @@ -323,11 +316,7 @@ $callout-background: $white; $callout-background-fade: 85%; $callout-border: 1px solid rgba($black, 0.25); $callout-margin: 0 0 1rem 0; -$callout-sizes: ( - small: 0.5rem, - default: 1rem, - large: 3rem, -); +$callout-padding: 1rem; $callout-font-color: $body-font-color; $callout-font-color-alt: $body-background; $callout-radius: $global-radius; @@ -486,6 +475,7 @@ $menu-simple-margin: 1rem; $menu-item-color-active: $white; $menu-item-background-active: get-color(primary); $menu-icon-spacing: 0.25rem; +$menu-item-background-hover: $light-gray; $menu-state-back-compat: true; $menu-centered-back-compat: true; $menu-icons-back-compat: true; @@ -555,8 +545,6 @@ $pagination-ellipsis-color: $black; $pagination-mobile-items: false; $pagination-mobile-current-item: false; $pagination-arrows: true; -$pagination-arrow-previous: '\00AB'; -$pagination-arrow-next: '\00BB'; // 28. Progress Bar // ---------------- @@ -778,8 +766,6 @@ $switch-paddle-background: $white; $switch-paddle-offset: 0.25rem; $switch-paddle-radius: $global-radius; $switch-paddle-transition: all 0.25s ease-out; -$switch-opacity-disabled: .5; -$switch-cursor-disabled: not-allowed; // 50. Table // --------- @@ -822,7 +808,7 @@ $tab-content-padding: 1rem; // 52. Thumbnail // ------------- -$thumbnail-border: 4px solid $white; +$thumbnail-border: solid 4px $white; $thumbnail-margin-bottom: $global-margin; $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); From f542435e88e2a7f6ac8d2b2c4ff9e9c5f2c9e971 Mon Sep 17 00:00:00 2001 From: Daniel Ruf Date: Tue, 10 Apr 2018 14:11:11 +0200 Subject: [PATCH 4/4] chore: document $breakpoint variable in xy-grid-layout, set null as default for $breakpoint --- scss/xy-grid/_layout.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/xy-grid/_layout.scss b/scss/xy-grid/_layout.scss index 3b7650e321..f8c962fcd0 100644 --- a/scss/xy-grid/_layout.scss +++ b/scss/xy-grid/_layout.scss @@ -14,6 +14,7 @@ /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters. /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`. /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. +/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation. /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths. @mixin xy-grid-layout( $n, @@ -22,7 +23,7 @@ $gutters: $grid-margin-gutters, $gutter-type: margin, $gutter-position: right left, - $breakpoint: $-zf-zero-breakpoint, + $breakpoint: null, $vertical: false ) { $size: percentage(1/$n);