From 20f94355862a0b333b1fc165bb5deb23d06e6813 Mon Sep 17 00:00:00 2001 From: Brent Miller Date: Mon, 21 Dec 2020 15:24:30 -0600 Subject: [PATCH] Brandon's design changes --- kss-config.json | 3 +- scss/_index.scss | 1 + scss/_mixins.scss | 75 +++++++++++++++++-- scss/components/_chain_spacing.scss | 6 +- scss/index.scss | 1 + styleguide/index.html | 8 ++- styleguide/item-1-1-1.html | 10 ++- styleguide/item-1-1-10.html | 10 ++- styleguide/item-1-1-2.html | 10 ++- styleguide/item-1-1-3.html | 10 ++- styleguide/item-1-1-4.html | 10 ++- styleguide/item-1-1-5.html | 10 ++- styleguide/item-1-1-6.html | 10 ++- styleguide/item-1-1-7.html | 10 ++- styleguide/item-1-1-8.html | 10 ++- styleguide/item-1-1-9.html | 10 ++- styleguide/item-1-1.html | 10 ++- styleguide/item-1-2-1.html | 10 ++- styleguide/item-1-2-2.html | 10 ++- styleguide/item-1-2.html | 10 ++- styleguide/item-1-3-1.html | 10 ++- styleguide/item-1-3-2.html | 10 ++- styleguide/item-1-3-3.html | 10 ++- styleguide/item-1-3-4.html | 10 ++- styleguide/item-1-3-5.html | 10 ++- styleguide/item-1-3.html | 10 ++- styleguide/item-1.html | 10 ++- styleguide/item-2-1.html | 10 ++- styleguide/item-2-2.html | 10 ++- styleguide/item-2-3.html | 10 ++- styleguide/item-2-4.html | 10 ++- styleguide/item-2.html | 10 ++- styleguide/item-3-1.html | 10 ++- styleguide/item-3.html | 10 ++- styleguide/item-4-1.html | 10 ++- styleguide/item-4-2.html | 10 ++- styleguide/item-4-3.html | 10 ++- styleguide/item-4.html | 10 ++- styleguide/item-5-1.html | 10 ++- styleguide/item-5-2.html | 10 ++- styleguide/item-5.html | 10 ++- styleguide/item-6.html | 10 ++- styleguide/item-7-1.html | 10 ++- styleguide/item-7-2.html | 10 ++- styleguide/item-7-3.html | 12 +++- styleguide/item-7.html | 28 +++++++- styleguide/item-8.html | 10 ++- styleguide/item-9-1.html | 10 ++- styleguide/item-9.html | 10 ++- styleguide/section-1.html | 50 +++++++------ styleguide/section-2.html | 18 +++-- styleguide/section-3.html | 12 +++- styleguide/section-4.html | 16 +++-- styleguide/section-5.html | 14 ++-- styleguide/section-6.html | 10 ++- styleguide/section-7.html | 108 ++++++++++++++++++++++++++-- styleguide/section-8.html | 10 ++- styleguide/section-9.html | 14 ++-- 58 files changed, 645 insertions(+), 151 deletions(-) diff --git a/kss-config.json b/kss-config.json index eee01c3..d5cdd93 100644 --- a/kss-config.json +++ b/kss-config.json @@ -3,9 +3,10 @@ "source": [ "scss/" ], + "homepage": "./scss/homepage.md", "destination": "styleguide/", "builder": "michelangelo/kss_styleguide/custom-template/", "css": [ "css/index.css" ] -} \ No newline at end of file +} diff --git a/scss/_index.scss b/scss/_index.scss index f59f7ec..cf0b1e3 100644 --- a/scss/_index.scss +++ b/scss/_index.scss @@ -58,3 +58,4 @@ img { @import './links'; @import 'components/figure_caption'; @import 'components/chain_spacing'; + diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 4abcebf..bccbb2e 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -1,7 +1,9 @@ +@import "colors"; + // @mixin block-margin-bottom // // For most purposes, margins should be retrieved from $spacers (using map-get) in _breakpoints.scss -// However, @mixin block-margin-bottom is a convenience mix-in to add to parent element styles for block components that +// However, @mixin block-margin-bottom is a convenience mixin to add to parent element styles for block components that // require a unified margin bottom, // // Styleguide 7.3.0 @@ -18,7 +20,7 @@ // @mixin link-color-active-hover // // Mixin to add hover and active styles to text color -// +// // - Params: // - `$color-prop`: Color to lighten (defaults to $ui-primary-font-color) // @@ -51,10 +53,35 @@ } } +// @mixin block-internal-spacing +// +// For most purposes, margins should be retrieved from $spacers (using map-get) in _breakpoints.scss +// However, @mixin block-internal-spacing is a convenience mixin that controls the internal spacing of items in a block +// +// Styleguide 7.4.0 + +@mixin block-internal-spacing { + margin-bottom: map-get($spacers, 'sm'); + + @media screen and (min-width: map-get($grid-breakpoints, 'md')){ + margin-bottom: map-get($spacers, 'sm'); + } + + &:last-child { + margin-bottom: 0; + } +} + // @mixin container-vertial-spacing -// -// Mixin to add vertical spaing to the elements in a container block // +// **Deprecated**

+// +// For most purposes, margins should be retrieved from $spacers (using map-get) in _breakpoints.scss +// However, @mixin container-vertial-spacing is a convenience mixin that controls the internal spacing of items in a block.

+// **Deprecated due to misspelling - Please use container-vertical-spacing (see next entry)** +// +// Styleguide 7.5.0 + @mixin container-vertial-spacing { > * { margin-bottom: map-get($spacers, 'lg'); @@ -67,10 +94,36 @@ } } +// @mixin container-vertical-spacing +// +// For most purposes, margins should be retrieved from $spacers (using map-get) in _breakpoints.scss +// However, @mixin container-vertical-spacing is a convenience mixin that controls the internal spacing of items in a block.

+// **Replaces the deprecated mixin container-vertial-spacing above** +// +// Styleguide 7.6.0 + +@mixin container-vertical-spacing { + > * { + margin-bottom: map-get($spacers, 'lg'); + } + + @media screen and (min-width: map-get($grid-breakpoints, 'md')) { + > * { + margin-bottom: map-get($spacers, 'md'); + } + } +} + +// Misc +// +// Styleguide 10.0.0 + // @mixin container-hr-separator // // Mixin to add style to the HR element used as separator // +// Styleguide 10.1.0 + @mixin container-hr-separator { > hr { background-color: $border-rule-color; // $ui-light-gray; @@ -79,3 +132,17 @@ margin-top: 0; } } + +// hr +// +// Styling for HR element

+// Same styling as @mixin container-hr-separator +// +// Styleguide 10.2.0 +hr { + background-color: $border-rule-color; // $ui-light-gray; + border: 0; + height: 1px; + margin-top: 0; +} + diff --git a/scss/components/_chain_spacing.scss b/scss/components/_chain_spacing.scss index 00213b3..94c2ac1 100644 --- a/scss/components/_chain_spacing.scss +++ b/scss/components/_chain_spacing.scss @@ -1,13 +1,11 @@ .chain-container { .chain-col { - @include container-vertial-spacing; - @include container-hr-separator; + @include container-vertical-spacing; } } .layout-section { - @include container-vertial-spacing; - @include container-hr-separator; + @include container-vertical-spacing; } // Used to remove the extra margin on layouts when the class diff --git a/scss/index.scss b/scss/index.scss index 03f08f3..b33d240 100644 --- a/scss/index.scss +++ b/scss/index.scss @@ -61,3 +61,4 @@ img { @import './links'; @import 'components/figure_caption'; @import 'components/chain_spacing'; + diff --git a/styleguide/index.html b/styleguide/index.html index cb71480..4e31ea8 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -13,7 +13,7 @@ - +