From b6d7fd54b23f325e17a3fe03d8135a3441df521c Mon Sep 17 00:00:00 2001 From: Brandon Ferrua Date: Wed, 1 Nov 2017 15:13:47 -0700 Subject: [PATCH] feat(grids): Add top level gutter classes (#2900) --- ui/utilities/grid/_deprecate.scss | 110 +++++++++++ ui/utilities/grid/_doc.scss | 2 +- ui/utilities/grid/_index.scss | 318 +++++++++++++++++------------- 3 files changed, 291 insertions(+), 139 deletions(-) create mode 100644 ui/utilities/grid/_deprecate.scss diff --git a/ui/utilities/grid/_deprecate.scss b/ui/utilities/grid/_deprecate.scss new file mode 100644 index 0000000000..cf48961711 --- /dev/null +++ b/ui/utilities/grid/_deprecate.scss @@ -0,0 +1,110 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +@include deprecate('4.0.0', 'Use .slds-{size}-nowrap instead') { + + .slds-nowrap_small, + .slds-nowrap--small { + @include mq-small-min { + @include flex-item(expand); + @include flex-wrap(false); + } + } + + .slds-nowrap_medium, + .slds-nowrap--medium { + @include mq-medium-min { + @include flex-item(expand); + @include flex-wrap(false); + } + } + + .slds-nowrap_large, + .slds-nowrap--large { + @include mq-large-min { + @include flex-item(expand); + @include flex-wrap(false); + } + } +} + + +@include deprecate('4.0.0', 'Use spacing utilities instead instead of .slds-col--padded-*') { + + .slds-col_padded, + .slds-col--padded { + padding: { + right: $spacing-small; + left: $spacing-small; + } + } + + .slds-col_padded-medium, + .slds-col--padded-medium { + padding: { + right: $spacing-medium; + left: $spacing-medium; + } + } + + .slds-col_padded-large, + .slds-col--padded-large { + padding: { + right: $spacing-large; + left: $spacing-large; + } + } + + .slds-col_padded-around, + .slds-col--padded-around { + padding: $spacing-small; + } + + .slds-col_padded-around-medium, + .slds-col--padded-around-medium { + padding: $spacing-medium; + } + + .slds-col_padded-around-large, + .slds-col--padded-around-large { + padding: $spacing-large; + } +} + +@include deprecate('4.0.0', 'Use .slds-col--rule- instead of .slds-col-rule--*') { + + .slds-col-rule { + @include mq-large-min { + + &_top, + &--top { + border-top: 1px solid $color-border-separator; + } + + &_right, + &--right { + border-right: 1px solid $color-border-separator; + } + + &_bottom, + &--bottom { + border-bottom: 1px solid $color-border-separator; + } + + &_left, + &--left { + border-left: 1px solid $color-border-separator; + } + } + } +} + +@include deprecate('4.0.0', 'Use slds-align_absolute-center instead') { + + .slds-align-content-center { + + flex: 1; + align-self: center; + justify-content: center; + } +} diff --git a/ui/utilities/grid/_doc.scss b/ui/utilities/grid/_doc.scss index b3ea001eab..df29dc4f9e 100644 --- a/ui/utilities/grid/_doc.scss +++ b/ui/utilities/grid/_doc.scss @@ -28,7 +28,7 @@ * * @utility * @name grid - * @selector [class*='slds-grid'] + * @selector [class*='slds-grid'], [class*='slds-wrap'], [class*='slds-nowrap'], [class*='slds-gutters'], .slds-col, [class*='slds-col-'], .slds-has-flexi-truncate, .slds-no-flex, .slds-no-space, [class*='slds-grow'], [class*='slds-shrink'], [class*='slds-container'] * @support dev-ready * @layout responsive */ diff --git a/ui/utilities/grid/_index.scss b/ui/utilities/grid/_index.scss index f330a60b8e..219ffdaec3 100644 --- a/ui/utilities/grid/_index.scss +++ b/ui/utilities/grid/_index.scss @@ -1,6 +1,8 @@ // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license +@import 'deprecate'; + /** * @summary Initializes grid * @@ -64,7 +66,8 @@ * @modifier */ .slds-wrap { - @include flex-wrap(true); + flex-wrap: wrap; + align-items: flex-start; } /** @@ -74,35 +77,9 @@ * @modifier */ .slds-nowrap { - @include flex-item(expand); - @include flex-wrap(false); -} - -@include deprecate('4.0.0', 'Use .slds-{size}-nowrap instead') { - - .slds-nowrap_small, - .slds-nowrap--small { - @include mq-small-min { - @include flex-item(expand); - @include flex-wrap(false); - } - } - - .slds-nowrap_medium, - .slds-nowrap--medium { - @include mq-medium-min { - @include flex-item(expand); - @include flex-wrap(false); - } - } - - .slds-nowrap_large, - .slds-nowrap--large { - @include mq-large-min { - @include flex-item(expand); - @include flex-wrap(false); - } - } + flex: 1 1 auto; + flex-wrap: nowrap; + align-items: stretch; } /** @@ -126,6 +103,141 @@ } } +/** + * @summary Apply 12px gutters to each grid column when you add this class to an `slds-grid` element + * @selector .slds-gutters + * @modifier + */ +.slds-gutters { + margin-right: ($spacing-small * -1); + margin-left: ($spacing-small * -1); + + .slds-col { + padding-right: $spacing-small; + padding-left: $spacing-small; + } +} + +/** + * @summary Apply 2px gutters to each grid column when you add this class to an `slds-grid` element + * @selector .slds-gutters_xxx-small + * @modifier + */ +.slds-gutters_xxx-small { + margin-right: ($spacing-xxx-small * -1); + margin-left: ($spacing-xxx-small * -1); + + .slds-col { + padding-right: $spacing-xxx-small; + padding-left: $spacing-xxx-small; + } +} + +/** + * @summary Apply 4px gutters to each grid column when you add this class to an `slds-grid` element + * @selector .slds-gutters_xx-small + * @modifier + */ +.slds-gutters_xx-small { + margin-right: ($spacing-xx-small * -1); + margin-left: ($spacing-xx-small * -1); + + .slds-col { + padding-right: $spacing-xx-small; + padding-left: $spacing-xx-small; + } +} + +/** + * @summary Apply 8px gutters to each grid column when you add this class to an `slds-grid` element + * @selector .slds-gutters_x-small + * @modifier + */ +.slds-gutters_x-small { + margin-right: ($spacing-x-small * -1); + margin-left: ($spacing-x-small * -1); + + .slds-col { + padding-right: $spacing-x-small; + padding-left: $spacing-x-small; + } +} + +/** + * @summary Apply 12px gutters to each grid column when you add this class to an `slds-grid` element + * @selector .slds-gutters_small + * @modifier + */ +.slds-gutters_small { + margin-right: ($spacing-small * -1); + margin-left: ($spacing-small * -1); + + .slds-col { + padding-right: $spacing-small; + padding-left: $spacing-small; + } +} + +/** + * @summary Apply 16px gutters to each grid column when you add this class to an `slds-grid` element + * @selector .slds-gutters_medium + * @modifier + */ +.slds-gutters_medium { + margin-right: ($spacing-medium * -1); + margin-left: ($spacing-medium * -1); + + .slds-col { + padding-right: $spacing-medium; + padding-left: $spacing-medium; + } +} + +/** + * @summary Apply 24px gutters to each grid column when you add this class to an `slds-grid` element + * @selector .slds-gutters_large + * @modifier + */ +.slds-gutters_large { + margin-right: ($spacing-large * -1); + margin-left: ($spacing-large * -1); + + .slds-col { + padding-right: $spacing-large; + padding-left: $spacing-large; + } +} + +/** + * @summary Apply 48px gutters to each grid column when you add this class to an `slds-grid` element + * @selector .slds-gutters_x-large + * @modifier + */ +.slds-gutters_xx-large { + margin-right: ($spacing-xx-large * -1); + margin-left: ($spacing-xx-large * -1); + + .slds-col { + padding-right: $spacing-xx-large; + padding-left: $spacing-xx-large; + } +} + +/** + * @summary Apply 32px gutters to each grid column when you add this class to an `slds-grid` element + * @selector .slds-gutters_xx-large + * @modifier + */ +.slds-gutters_x-large { + margin-right: ($spacing-x-large * -1); + margin-left: ($spacing-x-large * -1); + + .slds-col { + padding-right: $spacing-x-large; + padding-left: $spacing-x-large; + } +} + /** * @summary Normalizes the 0.75rem of padding when nesting a grid in a region with `.slds-p-horizontal_small` * @@ -134,10 +246,8 @@ */ .slds-grid_pull-padded, .slds-grid--pull-padded { - margin: { - right: ($spacing-small * -1); - left: ($spacing-small * -1); - } + margin-right: ($spacing-small * -1); + margin-left: ($spacing-small * -1); } /** @@ -148,10 +258,8 @@ */ .slds-grid_pull-padded-xxx-small, .slds-grid--pull-padded-xxx-small { - margin: { - right: ($spacing-xxx-small * -1); - left: ($spacing-xxx-small * -1); - } + margin-right: ($spacing-xxx-small * -1); + margin-left: ($spacing-xxx-small * -1); } /** @@ -162,10 +270,8 @@ */ .slds-grid_pull-padded-xx-small, .slds-grid--pull-padded-xx-small { - margin: { - right: ($spacing-xx-small * -1); - left: ($spacing-xx-small * -1); - } + margin-right: ($spacing-xx-small * -1); + margin-left: ($spacing-xx-small * -1); } /** @@ -176,10 +282,8 @@ */ .slds-grid_pull-padded-x-small, .slds-grid--pull-padded-x-small { - margin: { - right: ($spacing-x-small * -1); - left: ($spacing-x-small * -1); - } + margin-right: ($spacing-x-small * -1); + margin-left: ($spacing-x-small * -1); } /** @@ -190,10 +294,8 @@ */ .slds-grid_pull-padded-small, .slds-grid--pull-padded-small { - margin: { - right: ($spacing-small * -1); - left: ($spacing-small * -1); - } + margin-right: ($spacing-small * -1); + margin-left: ($spacing-small * -1); } /** @@ -204,10 +306,8 @@ */ .slds-grid_pull-padded-medium, .slds-grid--pull-padded-medium { - margin: { - right: ($spacing-medium * -1); - left: ($spacing-medium * -1); - } + margin-right: ($spacing-medium * -1); + margin-left: ($spacing-medium * -1); } /** @@ -218,12 +318,33 @@ */ .slds-grid_pull-padded-large, .slds-grid--pull-padded-large { - margin: { - right: ($spacing-large * -1); - left: ($spacing-large * -1); - } + margin-right: ($spacing-large * -1); + margin-left: ($spacing-large * -1); +} + +/** + * @summary Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_x-large` + * + * @selector .slds-grid_pull-padded-large + * @modifier + */ +.slds-grid_pull-padded-x-large, +.slds-grid--pull-padded-x-large { + margin-right: ($spacing-x-large * -1); + margin-left: ($spacing-x-large * -1); } +/** + * @summary Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_xx-large` + * + * @selector .slds-grid_pull-padded-large + * @modifier + */ +.slds-grid_pull-padded-xx-large, +.slds-grid--pull-padded-xx-large { + margin-right: ($spacing-xx-large * -1); + margin-left: ($spacing-xx-large * -1); +} /** * @summary Initializes a grid column @@ -234,7 +355,7 @@ .slds-col, [class*="slds-col_padded"], [class*="slds-col--padded"] { - @include flex-item(expand); + flex: 1 1 auto; } /** @@ -370,77 +491,6 @@ list-style: none; } - -@include deprecate('4.0.0', 'Use spacing utilities instead instead of .slds-col--padded-*') { - - .slds-col_padded, - .slds-col--padded { - padding: { - right: $spacing-small; - left: $spacing-small; - } - } - - .slds-col_padded-medium, - .slds-col--padded-medium { - padding: { - right: $spacing-medium; - left: $spacing-medium; - } - } - - .slds-col_padded-large, - .slds-col--padded-large { - padding: { - right: $spacing-large; - left: $spacing-large; - } - } - - .slds-col_padded-around, - .slds-col--padded-around { - padding: $spacing-small; - } - - .slds-col_padded-around-medium, - .slds-col--padded-around-medium { - padding: $spacing-medium; - } - - .slds-col_padded-around-large, - .slds-col--padded-around-large { - padding: $spacing-large; - } -} - -@include deprecate('4.0.0', 'Use .slds-col--rule- instead of .slds-col-rule--*') { - - .slds-col-rule { - @include mq-large-min { - - &_top, - &--top { - border-top: 1px solid $color-border-separator; - } - - &_right, - &--right { - border-right: 1px solid $color-border-separator; - } - - &_bottom, - &--bottom { - border-bottom: 1px solid $color-border-separator; - } - - &_left, - &--left { - border-left: 1px solid $color-border-separator; - } - } - } -} - /** * @summary Columns align in the center to the main axis and expand in each direction * @@ -579,14 +629,6 @@ align-self: flex-end; } -.slds-align-content-center { - @include deprecate('4.0.0') { - flex: 1; - align-self: center; - justify-content: center; - } -} - /** * @summary Bumps grid item(s) away from the other grid items to sit at the top, taking up the remaining white-space of the grid container *