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 @@ - +