diff --git a/style_guides/scss_style_guide.md b/style_guides/scss_style_guide.md index 9d27e27fa6c33..2b34238312adb 100644 --- a/style_guides/scss_style_guide.md +++ b/style_guides/scss_style_guide.md @@ -13,4 +13,8 @@ Our style guide is an extension of [Sass Guidelines by Hugo Giraudel](https://sa ## Syntax and formatting The Sass Guidelines site recommends using RBG and HSL values to format colors, but we're using -hex values. \ No newline at end of file +hex values. + +## Dealing with extends + +Don't extend classes. The only time use should use an extend is when you are extending a placeholder. Even then, do it rarely and only for code maintainability. diff --git a/ui_framework/components/global_styles/mixins/_index.scss b/ui_framework/components/global_styles/mixins/_index.scss index b0085724cdc8b..addb915b9770e 100644 --- a/ui_framework/components/global_styles/mixins/_index.scss +++ b/ui_framework/components/global_styles/mixins/_index.scss @@ -1,2 +1,3 @@ @import 'naming'; @import 'responsive'; +@import 'typography'; diff --git a/ui_framework/components/global_styles/mixins/_typography.scss b/ui_framework/components/global_styles/mixins/_typography.scss new file mode 100644 index 0000000000000..f2b9afb822671 --- /dev/null +++ b/ui_framework/components/global_styles/mixins/_typography.scss @@ -0,0 +1,63 @@ +// Some mixins that help us deal with browser scaling of text more consistantly. +// Essentially, fonts across kui should scale agains the root html element, not +// against parent inheritance. + + +// Typography mixins + +@function convertToRem($size) { + @return #{$size / $kuiFontSize}rem; +} + +// Spit out rem and px. This helps out people who might be on older versions of IE (<11). + +@mixin fontSize($size: $kuiFontSize) { + font-size: $size; + font-size: convertToRem($size); +} + +%kuiFont { + font-family: $kuiFontFamily; + font-weight: $kuiFontWeightRegular; +} + +%kuiCodeFont { + font-family: $kuiCodeFontFamily; +} + +// Font sizing extends, using rem mixin + +%kuiFontSize { + @include fontSize($kuiFontSize); + line-height: $kuiLineHeight; +} + +%kuiFontSizeXS { + @include fontSize($kuiFontSizeXS); + line-height: $kuiLineHeight; +} + +%kuiFontSizeS { + @include fontSize($kuiFontSizeS); + line-height: $kuiLineHeight; +} + +%kuiFontSizeM { + @include fontSize($kuiFontSizeM); + line-height: $kuiLineHeight; +} + +%kuiFontSizeL { + @include fontSize($kuiFontSizeL); + line-height: $kuiLineHeight * 1.5; +} + +%kuiFontSizeXL { + @include fontSize($kuiFontSizeXL); + line-height: $kuiLineHeight * 2; +} + +%kuiFontSizeXXL { + @include fontSize($kuiFontSizeXXL); + line-height: $kuiLineHeight * 3; +} diff --git a/ui_framework/components/global_styles/variables/_font.scss b/ui_framework/components/global_styles/variables/_font.scss deleted file mode 100644 index 5ab03e25b8cc6..0000000000000 --- a/ui_framework/components/global_styles/variables/_font.scss +++ /dev/null @@ -1,16 +0,0 @@ -// Font - -$kuiFontFamily: Roboto, Helvetica, Arial, sans-serif; -$kuiCodeFontFamily: "Roboto Mono", monospace; - -$kuiLineHeight: 1.5; - -$kuiFontSize: $kuiSize; -$kuiFontSizeXS: $kuiSize; -$kuiFontSizeS: $kuiSize; -$kuiFontSizeM: $kuiSize; -$kuiFontSizeL: $kuiSize; -$kuiFontSizeXL: $kuiSize; -$kuiFontSizeXXL: $kuiSize; - - diff --git a/ui_framework/components/global_styles/variables/_index.scss b/ui_framework/components/global_styles/variables/_index.scss index b3227df05cf4f..910217b0ff819 100644 --- a/ui_framework/components/global_styles/variables/_index.scss +++ b/ui_framework/components/global_styles/variables/_index.scss @@ -10,7 +10,7 @@ @import 'size'; @import 'colors'; @import 'animations'; -@import 'font'; +@import 'typography'; @import 'borders'; @import 'shadows'; @import 'z_index'; diff --git a/ui_framework/components/global_styles/variables/_typography.scss b/ui_framework/components/global_styles/variables/_typography.scss new file mode 100644 index 0000000000000..67f83d34cacfd --- /dev/null +++ b/ui_framework/components/global_styles/variables/_typography.scss @@ -0,0 +1,25 @@ +// Font + +// Families +$kuiFontFamily: "Roboto", Helvetica, Arial, sans-serif; +$kuiCodeFontFamily: "Roboto Mono", monospace; + +// Font sizes +$kuiFontSize: $kuiSize; + +$kuiFontSizeXS: 12px; +$kuiFontSizeS: 14px; +$kuiFontSizeM: $kuiFontSize; +$kuiFontSizeL: 24px; +$kuiFontSizeXL: 32px; +$kuiFontSizeXXL: 48px; + +// Line height + +$kuiLineHeight: 1.5 * $kuiFontSize; + +// Font weights + +$kuiFontWeightLight: 300; +$kuiFontWeightRegular: 400; +$kuiFontWeightMedium: 500; diff --git a/ui_framework/components/global_styles/variables/_z_index.scss b/ui_framework/components/global_styles/variables/_z_index.scss index 7cebd9025cbf7..ecbc0867996ec 100644 --- a/ui_framework/components/global_styles/variables/_z_index.scss +++ b/ui_framework/components/global_styles/variables/_z_index.scss @@ -1,6 +1,5 @@ // Z-Index - $kuiZLevel0: 0; $kuiZLevel1: 1000; $kuiZLevel2: 2000; @@ -12,10 +11,8 @@ $kuiZLevel7: 7000; $kuiZLevel8: 8000; $kuiZLevel9: 9000; - - -$kuiZContent: 0; -$kuiZContentMenu: 2000; -$kuiZNavigation: 4000; -$kuiZMask: 6000; -$kuiZModal: 8000; +$kuiZContent: $kuiZLevel0; +$kuiZContentMenu: $kuiZLevel2; +$kuiZNavigation: $kuiZLevel4; +$kuiZMask: $kuiZLevel6; +$kuiZModal: $kuiZLevel8; diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index e69de29bb2d1d..89eb9f5a9957b 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -0,0 +1,49 @@ +/** + * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126). + * + */ +* { + border-box: box-sizing; } + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } + +body { + line-height: 1; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; } + +table { + border-collapse: collapse; + border-spacing: 0; }