diff --git a/core/styleguide/css/styleguide-custom.scss b/core/styleguide/css/styleguide-custom.scss index 9ecd0bfe8..f5ec12db0 100644 --- a/core/styleguide/css/styleguide-custom.scss +++ b/core/styleguide/css/styleguide-custom.scss @@ -485,56 +485,3 @@ $max-width: rem(1130); pre[class*="language-"] { border-radius: 0; } - -/** - * * Color Containers - */ -.colorset { - display: flex; - flex-wrap: wrap; -} - -.colorset--color { - flex: 0 1 20%; - flex-direction: column; - - border: 1px $gray-light solid; - padding: 5px; -} - -.sg-label--color{ - display: block; - color: $gray; -} -.sg-label--block{ - display: inline-block; - margin-right: .25em; - background: $gray-light; - padding: 4px; - font-size: 10px; - border-radius: 5px; -} - - -/* - Flexbox Grid - */ - -.sg-grid{ - display: flex; - flex-direction: row; - - .sg-grid-1of2{ - max-width: 50%; - flex-basis: 50%; - - } -} - -code.sg-codesample{ - background-color: $gray-light; - display: block; - margin-bottom: 1em; - border-radius: 0.5em; - -} diff --git a/core/styleguide/css/styleguide-specific.css b/core/styleguide/css/styleguide-specific.css deleted file mode 100755 index 65e0b9ab5..000000000 --- a/core/styleguide/css/styleguide-specific.css +++ /dev/null @@ -1,84 +0,0 @@ -/*------------------------------------* $PATTERN LAB-SPECIFIC STYLES -\*------------------------------------*/ -/** - * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab. - * This is helpful for displaying demo styles for grids, animations, color swatches, etc - * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements - * These styles will not be your production CSS. - */ -/* Style Guide Interface Colors */ -/* Typography */ -/* Defaults */ -/* Dimensions */ -/* Breakpoints */ -.demo { - overflow: hidden; - margin-bottom: 1rem; } - -.demo .gi, .demo .demo-block { - background: #ddd; - color: #808080; - text-align: center; - margin-bottom: 0.5em; - padding: 1em !important; } - .demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) { - color: #ddd; - background: #808080; } - .demo .gi .gi, .demo .demo-block .gi { - background: rgba(0, 0, 0, 0.1); - color: #ddd; } - .demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) { - background: rgba(0, 0, 0, 0.3); } - -.demo-animate { - background: #ddd; - padding: 1em; - margin-bottom: 1em; - text-align: center; } - -.animate-move { - position: relative; } - .animate-move .demo-shape { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 20px; - background: #808080; } - .animate-move:hover > .demo-shape { - left: 100%; - margin-left: -20px; } - -.sg-colors { - overflow: hidden; } - .sg-colors li { - overflow: hidden; - border: 1px solid #ddd; - padding: 0.3em; - margin: 0 0.2em 0.2em 0; } - @media all and (min-width: 30em) { - .sg-colors li { - float: left; - width: 5em; } } - -.sg-swatch { - display: block; - height: 1.5em; - width: 50%; } - @media all and (max-width: 30em) { - .sg-swatch { - float: left; - margin-right: 0.3em; } } - @media all and (min-width: 30em) { - .sg-swatch { - width: 100%; - height: 4em; - margin-bottom: 0.2em; } } - -.sg-label { - line-height: 1; } - -.sg-annotation-toggle { - display: none; } - -/*# sourceMappingURL=styleguide-specific.css.map */ \ No newline at end of file diff --git a/core/styleguide/css/styleguide-specific.scss b/core/styleguide/css/styleguide-specific.scss deleted file mode 100755 index dbbf1e931..000000000 --- a/core/styleguide/css/styleguide-specific.scss +++ /dev/null @@ -1,160 +0,0 @@ -/*------------------------------------*\ - $PATTERN LAB-SPECIFIC STYLES -\*------------------------------------*/ -/** - * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab. - * This is helpful for displaying demo styles for grids, animations, color swatches, etc - * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements - * These styles will not be your production CSS. - */ - - -/* Style Guide Interface Colors */ -$sg-primary : #222; -$sg-secondary : #808080; -$sg-tertiary : #ddd; -$sg-quaternary : #fff; -$sg-quinary : #999; -$sg-tint : rgba(255,255,255,0.05); -$sg-tint-2 : rgba(255,255,255,0.25); -$sg-tone : rgba(0,0,0,0.1); -$sg-tone-2 : rgba(0,0,0,0.3); - -/* Typography */ -$sg-font-size-norm : 100%; -$sg-font-size-sm : 70%; -$sg-font-size-large : 120%; - -/* Defaults */ -$sg-space : 1em; -$sg-doublespace : $sg-space*2; -$sg-pad : 1em; -$sg-pad-half : $sg-pad/2; - -/* Dimensions */ -$offset-top: 2em; - -/* Breakpoints */ -$sg-bp-small : 24em; -$sg-bp-small-2 : 30em; -$sg-bp-med : 48em; -$sg-bp-large : 72em; -$sg-bp-xl : 80em; - -$animate-quick: 0.2s; - - -// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles -.demo { - overflow: hidden; - margin-bottom: 1rem; -} - -.demo .gi, .demo .demo-block { - background: $sg-tertiary; - color: $sg-secondary; - text-align: center; - margin-bottom: $sg-pad-half; - padding: 1em !important; - - &:nth-of-type(2n) { - color: $sg-tertiary; - background: $sg-secondary; - } - - .gi { - background: $sg-tone; - color: $sg-tertiary; - - &:nth-of-type(2n) { - background: $sg-tone-2; - } - } -} - -//Demo box for animation -.demo-animate { - background: #ddd; - padding: $sg-pad; - margin-bottom: $sg-space; - text-align: center; -} - -//Animate Demo to show -.animate-move { - position: relative; - - .demo-shape { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 20px; - background: $sg-secondary; - } - - &:hover { - > .demo-shape { - left: 100%; - margin-left: -20px; - } - } -} - -// Style Guide color swatches -.sg-colors { - overflow: hidden; - - li { - overflow: hidden; - border: 1px solid $sg-tertiary; - padding: 0.3em; - margin: 0 0.2em 0.2em 0; - - @media all and (min-width: $sg-bp-small-2) { - float: left; - width: 5em; - } - } -} - -.sg-swatch { - display: block; - height: 1.5em; - width: 50%; - - @media all and (max-width: $sg-bp-small-2) { - float: left; - margin-right: 0.3em; - } - - @media all and (min-width: $sg-bp-small-2) { - width: 100%; - height: 4em; - margin-bottom: 0.2em; - } - -} - -.sg-label { - line-height: 1; -} - -.sg-annotation-toggle { - display: none; -} -.sg-code-head { - color: $sg-quaternary; -} -.sg-code { - display: none !important; - color: lighten(#e6db74, 10); - background-color: #272822; - pre { - border-color: $sg-quaternary; - font-size: rem(18); - font-family: Consolas, Monaco, 'Andale Mono', monospace; - margin-bottom: 0; - padding-bottom: 0; - } -} diff --git a/source/css/_tools.styleguide.scss b/source/css/_tools.styleguide.scss new file mode 100644 index 000000000..ae7ca5b23 --- /dev/null +++ b/source/css/_tools.styleguide.scss @@ -0,0 +1,216 @@ +/*------------------------------------*\ + $PATTERN LAB-SPECIFIC STYLES +\*------------------------------------*/ +/** + * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab. + * This is helpful for displaying demo styles for grids, animations, color swatches, etc + * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements + * These styles will not be your production CSS. + */ + + +/* Style Guide Interface Colors */ +$sg-primary : #222; +$sg-secondary : #808080; +$sg-tertiary : #ddd; +$sg-quaternary : #fff; +$sg-quinary : #999; +$sg-tint : rgba(255,255,255,0.05); +$sg-tint-2 : rgba(255,255,255,0.25); +$sg-tone : rgba(0,0,0,0.1); +$sg-tone-2 : rgba(0,0,0,0.3); + +/* Typography */ +$sg-font-size-norm : 100%; +$sg-font-size-sm : 70%; +$sg-font-size-large : 120%; + +/* Defaults */ +$sg-space : 1em; +$sg-doublespace : $sg-space*2; +$sg-pad : 1em; +$sg-pad-half : $sg-pad/2; + +/* Dimensions */ +$offset-top: 2em; + +/* Breakpoints */ +$sg-bp-small : 24em; +$sg-bp-small-2 : 30em; +$sg-bp-med : 48em; +$sg-bp-large : 72em; +$sg-bp-xl : 80em; + +$animate-quick: 0.2s; + + +// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles +.demo { + overflow: hidden; + margin-bottom: 1rem; +} + +.demo .gi, .demo .demo-block { + background: $sg-tertiary; + color: $sg-secondary; + text-align: center; + margin-bottom: $sg-pad-half; + padding: 1em !important; + + &:nth-of-type(2n) { + color: $sg-tertiary; + background: $sg-secondary; + } + + .gi { + background: $sg-tone; + color: $sg-tertiary; + + &:nth-of-type(2n) { + background: $sg-tone-2; + } + } +} + +//Demo box for animation +.demo-animate { + background: #ddd; + padding: $sg-pad; + margin-bottom: $sg-space; + text-align: center; +} + +//Animate Demo to show +.animate-move { + position: relative; + + .demo-shape { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 20px; + background: $sg-secondary; + } + + &:hover { + > .demo-shape { + left: 100%; + margin-left: -20px; + } + } +} + + + +// Style Guide color swatches +.sg-colors { + overflow: hidden; + + li { + overflow: hidden; + border: 1px solid $sg-tertiary; + padding: 0.3em; + margin: 0 0.2em 0.2em 0; + + @media all and (min-width: $sg-bp-small-2) { + float: left; + width: 5em; + } + } +} + +.sg-swatch { + display: block; + height: 1.5em; + width: 50%; + + @media all and (max-width: $sg-bp-small-2) { + float: left; + margin-right: 0.3em; + } + + @media all and (min-width: $sg-bp-small-2) { + width: 100%; + height: 4em; + margin-bottom: 0.2em; + } + +} + +.sg-label { + line-height: 1; +} + +.sg-annotation-toggle { + display: none; +} +.sg-code-head { + color: $sg-quaternary; +} +.sg-code { + display: none !important; + color: lighten(#e6db74, 10); + background-color: #272822; + pre { + border-color: $sg-quaternary; + font-size: rem(18); + font-family: Consolas, Monaco, 'Andale Mono', monospace; + margin-bottom: 0; + padding-bottom: 0; + } +} + + +/** + * * Color Containers + */ +.colorset { + display: flex; + flex-wrap: wrap; +} + +.colorset--color { + flex: 0 1 20%; + flex-direction: column; + + border: 1px $gray-light solid; + padding: 5px; +} + +.sg-label--color{ + display: block; + color: $gray; +} +.sg-label--block{ + display: inline-block; + margin-right: .25em; + background: $gray-light; + padding: 4px; + font-size: 10px; + border-radius: 5px; +} + + +/* + Flexbox Grid + */ + +.sg-grid{ + display: flex; + flex-direction: row; + + .sg-grid-1of2{ + max-width: 50%; + flex-basis: 50%; + + } +} + +code.sg-codesample{ + background-color: $gray-light; + display: block; + margin-bottom: 1em; + border-radius: 0.5em; + +} diff --git a/source/css/dev.scss b/source/css/dev.scss index 8ad84cbdf..3fcf4753e 100644 --- a/source/css/dev.scss +++ b/source/css/dev.scss @@ -11,4 +11,5 @@ $tests: true; @import "tools.mq-tests"; -@import "tools.sg-updates" +@import "tools.sg-updates"; +@import "tools.styleguide"