diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index cf7a2540edfba..7d1c22f36a2d0 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1,26 +1,3 @@ -.kui--codeFont { - font-family: "Roboto Mono", monospace; } - -.kui--fontSizeSmall, .kuiKeyPad { - font-size: 14px; - font-size: 0.875rem; - line-height: 24px; } - -.kuiTitle--small, .kuiText { - font-size: 16px; - font-size: 1rem; - line-height: 24px; } - -.kuiTitle { - font-size: 24px; - font-size: 1.5rem; - line-height: 36px; } - -.kuiTitle--large { - font-size: 32px; - font-size: 2rem; - line-height: 48px; } - /** * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126). * @@ -63,6 +40,9 @@ html { body { line-height: 1; } +*:focus { + outline: none; } + a { text-decoration: none; } a:hover { @@ -134,6 +114,12 @@ table { -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; } +.kui--flexAlignItemsCenter { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .kui--textAlignRight { text-align: right !important; } @@ -146,12 +132,181 @@ table { .kui--verticalAlignMiddle { vertical-align: middle !important; } +.kui--fontSizeSmall { + font-size: 14px; + font-size: 0.875rem; + line-height: 24px; } + +.kui--codeFont { + font-family: "Roboto Mono", monospace; } + .kui--subduedText { color: #666; } .kui--bottomShadow { box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); } +.kui--margin { + margin: 16px !important; } + +.kui--marginLarge { + margin: 24px !important; } + +.kui--marginSmall { + margin: 8px !important; } + +.kui--padding { + padding: 16px !important; } + +.kui--paddingLarge { + padding: 24px !important; } + +.kui--paddingSmall { + padding: 8px !important; } + +.kui--marginTopBottom { + margin-top: 16px !important; + margin-bottom: 16px !important; } + +.kui--marginTopBottomSmall { + margin-top: 8px !important; + margin-bottom: 8px !important; } + +.kui--marginTopBottomLarge { + margin-top: 24px !important; + margin-bottom: 24px !important; } + +.kui--marginTop { + margin-top: 16px !important; } + +.kui--marginBottom { + margin-bottom: 16px !important; } + +.kui--marginTopSmall { + margin-top: 8px !important; } + +.kui--marginBottomSmall { + margin-bottom: 8px !important; } + +.kui--marginTopLarge { + margin-top: 24px !important; } + +.kui--marginBottomLarge { + margin-bottom: 24px !important; } + +.kui--marginLeftRight { + margin-left: 16px !important; + margin-right: 16px !important; } + +.kui--marginLeftRightSmall { + margin-left: 8px !important; + margin-right: 8px !important; } + +.kui--marginLeftRightLarge { + margin-left: 24px !important; + margin-right: 24px !important; } + +.kui--marginLeft { + margin-left: 16px !important; } + +.kui--marginRight { + margin-right: 16px !important; } + +.kui--marginLeftSmall { + margin-left: 8px !important; } + +.kui--marginRightSmall { + margin-right: 8px !important; } + +.kui--marginLeftLarge { + margin-left: 24px !important; } + +.kui--marginRightLarge { + margin-right: 24px !important; } + +.kui--paddingTopBottom { + padding-top: 16px !important; + padding-bottom: 16px !important; } + +.kui--paddingTopBottomSmall { + padding-top: 8px !important; + padding-bottom: 8px !important; } + +.kui--paddingTopBottomLarge { + padding-top: 24px !important; + padding-bottom: 24px !important; } + +.kui--paddingTop { + padding-top: 16px !important; } + +.kui--paddingBottom { + padding-bottom: 16px !important; } + +.kui--paddingTopSmall { + padding-top: 8px !important; } + +.kui--paddingBottomSmall { + padding-bottom: 8px !important; } + +.kui--paddingTopLarge { + padding-top: 24px !important; } + +.kui--paddingBottomLarge { + padding-bottom: 24px !important; } + +.kui--paddingLeftRight { + padding-left: 16px !important; + padding-right: 16px !important; } + +.kui--paddingLeftRightSmall { + padding-left: 8px !important; + padding-right: 8px !important; } + +.kui--paddingLeftRightLarge { + padding-left: 24px !important; + padding-right: 24px !important; } + +.kui--paddingLeft { + padding-left: 16px !important; } + +.kui--paddingRight { + padding-right: 16px !important; } + +.kui--paddingLeftSmall { + padding-left: 8px !important; } + +.kui--paddingRightSmall { + padding-right: 8px !important; } + +.kui--paddingLeftLarge { + padding-left: 24px !important; } + +.kui--paddingRightLarge { + padding-right: 24px !important; } + +.kuiAvatar { + border-radius: 50%; + width: 24px; + height: 24px; + display: inline-block; + position: relative; } + .kuiAvatar:after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 50%; + content: ""; + pointer-events: none; + border: 1px solid rgba(0, 0, 0, 0.1); } + .kuiAvatar--small { + width: 16px; + height: 16px; } + .kuiAvatar--large { + width: 64px; + height: 64px; } + .kuiHeader { background: #FFF; border-bottom: 1px solid #D9D9D9; } @@ -241,9 +396,57 @@ table { .kuiHeaderItem__button:focus { background: #e6f2f6; } +.kuiHeaderAlert { + text-align: left; + min-width: 300px; + position: relative; + margin: 0 -16px; + padding: 16px; + border-top: 1px solid #D9D9D9; } + .kuiHeaderAlert:hover .kuiHeaderAlert__dismiss { + opacity: 1; } + .kuiHeaderAlert__dismiss { + opacity: 0; + position: absolute; + right: 16px; + top: 16px; + transition: opacity 250ms ease-in; + cursor: pointer; } + .kuiHeaderAlert__title { + font-weight: 500; + font-size: 16px; + font-size: 1rem; + line-height: 24px; + padding-right: 24px; } + .kuiHeaderAlert__text { + font-size: 12px; + font-size: 0.75rem; + line-height: 24px; + margin-bottom: 8px; } + .kuiHeaderAlert__action { + font-size: 12px; + font-size: 0.75rem; + line-height: 24px; + color: #0079a5; } + .kuiHeaderAlert__action:focus { + outline: solid 6px #e6f2f6; } + .kuiHeaderAlert__date { + font-size: 12px; + font-size: 0.75rem; + line-height: 24px; + color: #666; + text-align: right; } + +.kuiHeaderProfile { + text-align: left; + padding-bottom: 16px; } + .kuiIcon { display: inline-block; fill: #3F3F3F; } + .kuiIcon:focus { + opacity: 1; + background: #e6f2f6; } .kuiIcon--medium { width: 16px; height: 16px; } @@ -271,7 +474,10 @@ table { -ms-flex-wrap: wrap; flex-wrap: wrap; width: 288px; - text-align: center; } + text-align: center; + font-size: 14px; + font-size: 0.875rem; + line-height: 24px; } .kuiKeyPad__item { padding: 16px; height: 96px; @@ -293,6 +499,14 @@ table { -webkit-transform: translateY(4px); transform: translateY(4px); } +.kuiLink { + color: #0079a5; } + .kuiLink:hover { + color: #005472; } + .kuiLink:focus { + background: #e6f2f6; + outline: solid 3px #e6f2f6; } + .kuiPopMenu { position: relative; } .kuiPopMenu.isOpen .kuiPopMenu__body { @@ -358,9 +572,23 @@ table { left: auto; } .kuiTitle { + font-size: 24px; + font-size: 1.5rem; + line-height: 36px; color: #000; font-weight: 300; } + .kuiTitle--small { + font-size: 16px; + font-size: 1rem; + line-height: 24px; } + .kuiTitle--large { + font-size: 32px; + font-size: 2rem; + line-height: 48px; } .kuiText { + font-size: 16px; + font-size: 1rem; + line-height: 24px; color: #3F3F3F; font-weight: 400; } diff --git a/ui_framework/doc_site/src/views/header/header.html b/ui_framework/doc_site/src/views/header/header.html index a37152915ce64..16f79c4a9da48 100644 --- a/ui_framework/doc_site/src/views/header/header.html +++ b/ui_framework/doc_site/src/views/header/header.html @@ -35,17 +35,81 @@ -
+
+
+
+
+
+
+
+
+

John Username

+
+
+ Edit profile +
+
+ Log out +
+
+
+
+
+ + + +

Here's a notification title

+

I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat.

+
+
+ Download your thing here +
+
+ Nov. 14, 02:14PM. +
+
+
+
+ + + +

Here's a really long notification title with nonsense beneath it.

+

Walk the cow through a warm room, and then bring it to my plate.

+
+
+ Download your thing here +
+
+ Nov. 14, 02:14PM. +
+
+
+
+ + + +

Here's a notification title

+

Only usable on grilled cheese sandwiches. That is the only application of Kraft Singles as far as I'm concerned.

+
+
+ Download your thing here +
+
+ Nov. 14, 02:14PM. +
+
+
+
diff --git a/ui_framework/doc_site/src/views/icon/icons.js b/ui_framework/doc_site/src/views/icon/icons.js index 75abb6202d28e..d3a9a4ca1a862 100644 --- a/ui_framework/doc_site/src/views/icon/icons.js +++ b/ui_framework/doc_site/src/views/icon/icons.js @@ -15,5 +15,13 @@ export default () => (   + +   + + + +   + +
); diff --git a/ui_framework/src/components/avatar/_avatar.scss b/ui_framework/src/components/avatar/_avatar.scss new file mode 100644 index 0000000000000..d65f0c4716066 --- /dev/null +++ b/ui_framework/src/components/avatar/_avatar.scss @@ -0,0 +1,17 @@ +@include component('kuiAvatar') { + border-radius: 50%; + width: $kuiSizeL; + height: $kuiSizeL; + display: inline-block; + @include innerBorder('dark', 50%); + + @include modifier('small') { + width: $kuiSize; + height: $kuiSize; + } + + @include modifier('large') { + width: $kuiSize * 4; + height: $kuiSize * 4; + } +} diff --git a/ui_framework/src/components/avatar/_index.scss b/ui_framework/src/components/avatar/_index.scss new file mode 100644 index 0000000000000..50653a8266821 --- /dev/null +++ b/ui_framework/src/components/avatar/_index.scss @@ -0,0 +1 @@ +@import 'avatar'; diff --git a/ui_framework/src/components/header/_header_alert.scss b/ui_framework/src/components/header/_header_alert.scss new file mode 100644 index 0000000000000..dde942e5346cd --- /dev/null +++ b/ui_framework/src/components/header/_header_alert.scss @@ -0,0 +1,49 @@ +@include component('kuiHeaderAlert') { + text-align: left; + min-width: 300px; + position: relative; + margin: 0 (-$kuiSize); + padding: $kuiSize; + border-top: $kuiBorderThin; + + &:hover { + @include child('dismiss') { + opacity: 1; + } + } + + @include child('dismiss') { + opacity: 0; + position: absolute; + right: $kuiSize; + top: $kuiSize; + transition: opacity $kuiAnimSpeedNormal ease-in; + cursor: pointer; + } + + @include child('title') { + font-weight: $kuiFontWeightMedium; + @include kuiFontSizeM; + padding-right: $kuiSizeL; // Accounts for the dismiss button. + } + + @include child('text') { + @include kuiFontSizeXS; + margin-bottom: $kuiSizeS; + } + + @include child('action') { + @include kuiFontSizeXS; + color: $kuiLinkColor; + + &:focus { + outline: solid $kuiFontSizeXS / 2 $kuiFocusBackgroundColor; + } + } + + @include child('date') { + @include kuiFontSizeXS; + color: $kuiColorDarkShade; + text-align: right; + } +} diff --git a/ui_framework/src/components/header/_header_profile.scss b/ui_framework/src/components/header/_header_profile.scss new file mode 100644 index 0000000000000..15acda198291c --- /dev/null +++ b/ui_framework/src/components/header/_header_profile.scss @@ -0,0 +1,4 @@ +@include component('kuiHeaderProfile') { + text-align: left; + padding-bottom: $kuiSize; +} diff --git a/ui_framework/src/components/header/_index.scss b/ui_framework/src/components/header/_index.scss index 676004b385df9..5ab76db662dd3 100644 --- a/ui_framework/src/components/header/_index.scss +++ b/ui_framework/src/components/header/_index.scss @@ -10,3 +10,5 @@ $kuiHeaderChildSize: $kuiSizeXXL + $kuiSizeL; @import 'header'; @import 'header_breadcrumb'; @import 'header_item'; +@import 'header_alert'; +@import 'header_profile'; diff --git a/ui_framework/src/components/icon/_icon.scss b/ui_framework/src/components/icon/_icon.scss index 0ce4284a37b66..3fcdf6f72d6cd 100644 --- a/ui_framework/src/components/icon/_icon.scss +++ b/ui_framework/src/components/icon/_icon.scss @@ -2,6 +2,11 @@ display: inline-block; fill: $kuiTextColor; + &:focus { + opacity: 1; // We often hide icons on hover. Make sure they appear on focus. + background: $kuiFocusBackgroundColor; + } + @include modifier('medium') { @include size($kuiSizeM); } diff --git a/ui_framework/src/components/icon/assets/cross.svg b/ui_framework/src/components/icon/assets/cross.svg new file mode 100644 index 0000000000000..5bfa0af621181 --- /dev/null +++ b/ui_framework/src/components/icon/assets/cross.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui_framework/src/components/icon/assets/help.svg b/ui_framework/src/components/icon/assets/help.svg new file mode 100644 index 0000000000000..caf8395d4fdf1 --- /dev/null +++ b/ui_framework/src/components/icon/assets/help.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui_framework/src/components/icon/icon.js b/ui_framework/src/components/icon/icon.js index 43b783ac03cec..94544112d4bda 100644 --- a/ui_framework/src/components/icon/icon.js +++ b/ui_framework/src/components/icon/icon.js @@ -14,6 +14,8 @@ import '!!svg-sprite!./assets/apps.svg'; import '!!svg-sprite!./assets/logo.svg'; import '!!svg-sprite!./assets/search.svg'; import '!!svg-sprite!./assets/user.svg'; +import '!!svg-sprite!./assets/help.svg'; +import '!!svg-sprite!./assets/cross.svg'; const humanizeCamelCase = str => ( // Put spaces between words in camel-cased strings. @@ -32,6 +34,8 @@ const typeToIconMap = { kibanaLogo: 'logo', search: 'search', user: 'user', + help: 'help', + cross: 'cross', }; export const TYPES = Object.keys(typeToIconMap); diff --git a/ui_framework/src/components/index.scss b/ui_framework/src/components/index.scss index 6957b7b915ef9..8155abd9f0270 100644 --- a/ui_framework/src/components/index.scss +++ b/ui_framework/src/components/index.scss @@ -1,21 +1,10 @@ -// -------------------------------------------------------------------------------------- -// Kibana UI framework -// -------------------------------------------------------------------------------------- -// This libray will eventually contain all styles used throughout Kibana. Currently it -// only covers a portion of the components. The processed css from this library currently -// loads on top of other CSS (itself generated from LESS files) contained in /ui/*/*.less -// files. This includes some base LESS files (including bootstrap) that can be found in -// /ui/styles/. Over time, those components will be replaced with the SASS files -// contained here. Until then, know that styling here may run into conflict with -// global styles (like those on naked selectors) contained there. -// -// When possible, if making changes to those legacy components, please think about -// instead adding them to this library and deprecating that dependency. // Components +@import './avatar/index'; @import './header/index'; @import './icon/index'; @import './key_pad/index'; +@import './link/index'; @import './pop_menu/index'; @import './typography/index'; diff --git a/ui_framework/src/components/key_pad/_key_pad.scss b/ui_framework/src/components/key_pad/_key_pad.scss index 66e9dbdb36fba..855ba4e47b7cd 100644 --- a/ui_framework/src/components/key_pad/_key_pad.scss +++ b/ui_framework/src/components/key_pad/_key_pad.scss @@ -6,7 +6,7 @@ flex-wrap: wrap; width: $kuiKeyPadSize * 3; // Default to grid of 3 text-align: center; - @extend %kuiFontSizeS; + @include kuiFontSizeS; @include child('item') { padding: $kuiSize; diff --git a/ui_framework/src/components/link/_index.scss b/ui_framework/src/components/link/_index.scss new file mode 100644 index 0000000000000..a00815179371a --- /dev/null +++ b/ui_framework/src/components/link/_index.scss @@ -0,0 +1,2 @@ +@import './link'; + diff --git a/ui_framework/src/components/link/_link.scss b/ui_framework/src/components/link/_link.scss new file mode 100644 index 0000000000000..6cea3fc3c2e88 --- /dev/null +++ b/ui_framework/src/components/link/_link.scss @@ -0,0 +1,12 @@ +@include component('kuiLink') { + color: $kuiLinkColor; + + &:hover { + color: darken($kuiLinkColor, 10%); + } + + &:focus { + background: $kuiFocusBackgroundColor; + outline: solid 3px $kuiFocusBackgroundColor; + } +} diff --git a/ui_framework/src/components/typography/_typography.scss b/ui_framework/src/components/typography/_typography.scss index db672c0b086af..9e1e377fc4e55 100644 --- a/ui_framework/src/components/typography/_typography.scss +++ b/ui_framework/src/components/typography/_typography.scss @@ -1,19 +1,19 @@ @include component('kuiTitle') { - @extend %kuiFontSizeL; + @include kuiFontSizeL; color: $kuiTitleColor; font-weight: $kuiFontWeightLight; @include modifier('small') { - @extend %kuiFontSizeM; + @include kuiFontSizeM; } @include modifier('large') { - @extend %kuiFontSizeXL; + @include kuiFontSizeXL; } } @include component('kuiText') { - @extend %kuiFontSizeM; + @include kuiFontSizeM; color: $kuiTextColor; font-weight: $kuiFontWeightRegular; } diff --git a/ui_framework/src/global_styling/mixins/_helpers.scss b/ui_framework/src/global_styling/mixins/_helpers.scss new file mode 100644 index 0000000000000..8a64b8b3931f7 --- /dev/null +++ b/ui_framework/src/global_styling/mixins/_helpers.scss @@ -0,0 +1,26 @@ +// Helper mixins + +// Useful border shade when dealing with images of unknown color. +@mixin innerBorder($type: 'dark', $borderRadius: 0, $alpha: .1) { + + $color: rgba(0, 0, 0, $alpha); + + @if $type == 'light' { + $color: rgba(255, 255, 255, $alpha); + } + + position: relative; + + &:after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: $borderRadius; + content: ""; + pointer-events: none; + border: 1px solid $color; + } +} + diff --git a/ui_framework/src/global_styling/mixins/_index.scss b/ui_framework/src/global_styling/mixins/_index.scss index d25a6adc5b862..349584e8d5870 100644 --- a/ui_framework/src/global_styling/mixins/_index.scss +++ b/ui_framework/src/global_styling/mixins/_index.scss @@ -2,3 +2,4 @@ @import 'naming'; @import 'responsive'; @import 'size'; +@import 'helpers'; diff --git a/ui_framework/src/global_styling/mixins/_namespace.scss b/ui_framework/src/global_styling/mixins/_namespace.scss index afd2d825c8f3a..9e9d5cea8eb00 100644 --- a/ui_framework/src/global_styling/mixins/_namespace.scss +++ b/ui_framework/src/global_styling/mixins/_namespace.scss @@ -23,6 +23,10 @@ $stateSeparator: '.is'; @return true; } + @if str-index($selector, ":"){ + @return true; + } + @return false; } @@ -50,6 +54,11 @@ $stateSeparator: '.is'; $stateStart: str-index($selector, $stateSeparator) - 1; @return str-slice($selector, 0, $stateStart); } + + @if str-index($selector, ":"){ + $psuedoStart: str-index($selector, ":") - 1; + @return str-slice($selector, 0, $psuedoStart); + } } // Components are top level selectors diff --git a/ui_framework/src/global_styling/reset/_reset.scss b/ui_framework/src/global_styling/reset/_reset.scss index ae5464a27e28b..d1a809763540f 100644 --- a/ui_framework/src/global_styling/reset/_reset.scss +++ b/ui_framework/src/global_styling/reset/_reset.scss @@ -46,6 +46,10 @@ body { line-height: 1; } +*:focus { + outline: none; +} + a { text-decoration: none; &:hover { diff --git a/ui_framework/src/global_styling/utilities/_flex.scss b/ui_framework/src/global_styling/utilities/_flex.scss index 28387590dbbcd..c2d0afa76ea6a 100644 --- a/ui_framework/src/global_styling/utilities/_flex.scss +++ b/ui_framework/src/global_styling/utilities/_flex.scss @@ -22,3 +22,7 @@ @include utility('flexBasisOneThird') { flex-basis: 33.33%; } + +@include utility('flexAlignItemsCenter') { + align-items: center; +} diff --git a/ui_framework/src/global_styling/utilities/_index.scss b/ui_framework/src/global_styling/utilities/_index.scss index 9f3adb68d814a..e7b593bdf5dfc 100644 --- a/ui_framework/src/global_styling/utilities/_index.scss +++ b/ui_framework/src/global_styling/utilities/_index.scss @@ -1,3 +1,4 @@ @import 'flex'; @import 'typography'; @import 'shadow'; +@import 'spacing'; diff --git a/ui_framework/src/global_styling/utilities/_spacing.scss b/ui_framework/src/global_styling/utilities/_spacing.scss new file mode 100644 index 0000000000000..25e6d410a9f16 --- /dev/null +++ b/ui_framework/src/global_styling/utilities/_spacing.scss @@ -0,0 +1,185 @@ +// Margin +@include utility('margin') { + margin: $kuiSize !important; +} + +@include utility('marginLarge') { + margin: $kuiSizeL !important; +} + +@include utility('marginSmall') { + margin: $kuiSizeS !important; +} + +// Full padding +@include utility('padding') { + padding: $kuiSize !important; +} + +@include utility('paddingLarge') { + padding: $kuiSizeL !important; +} + +@include utility('paddingSmall') { + padding: $kuiSizeS !important; +} + +// Vertical margins +@include utility('marginTopBottom') { + margin-top: $kuiSize !important; + margin-bottom: $kuiSize !important; +} + +@include utility('marginTopBottomSmall') { + margin-top: $kuiSizeS !important; + margin-bottom: $kuiSizeS !important; +} + +@include utility('marginTopBottomLarge') { + margin-top: $kuiSizeL !important; + margin-bottom: $kuiSizeL !important; +} + +@include utility('marginTop') { + margin-top: $kuiSize !important; +} + +@include utility('marginBottom') { + margin-bottom: $kuiSize !important; +} + +@include utility('marginTopSmall') { + margin-top: $kuiSizeS !important; +} + +@include utility('marginBottomSmall') { + margin-bottom: $kuiSizeS !important; +} + +@include utility('marginTopLarge') { + margin-top: $kuiSizeL !important; +} + +@include utility('marginBottomLarge') { + margin-bottom: $kuiSizeL !important; +} + +// Horizontal Margins +@include utility('marginLeftRight') { + margin-left: $kuiSize !important; + margin-right: $kuiSize !important; +} + +@include utility('marginLeftRightSmall') { + margin-left: $kuiSizeS !important; + margin-right: $kuiSizeS !important; +} + +@include utility('marginLeftRightLarge') { + margin-left: $kuiSizeL !important; + margin-right: $kuiSizeL !important; +} + +@include utility('marginLeft') { + margin-left: $kuiSize !important; +} + +@include utility('marginRight') { + margin-right: $kuiSize !important; +} + +@include utility('marginLeftSmall') { + margin-left: $kuiSizeS !important; +} + +@include utility('marginRightSmall') { + margin-right: $kuiSizeS !important; +} + +@include utility('marginLeftLarge') { + margin-left: $kuiSizeL !important; +} + +@include utility('marginRightLarge') { + margin-right: $kuiSizeL !important; +} + +// Vertical padding +@include utility('paddingTopBottom') { + padding-top: $kuiSize !important; + padding-bottom: $kuiSize !important; +} + +@include utility('paddingTopBottomSmall') { + padding-top: $kuiSizeS !important; + padding-bottom: $kuiSizeS !important; +} + +@include utility('paddingTopBottomLarge') { + padding-top: $kuiSizeL !important; + padding-bottom: $kuiSizeL !important; +} + +@include utility('paddingTop') { + padding-top: $kuiSize !important; +} + +@include utility('paddingBottom') { + padding-bottom: $kuiSize !important; +} + +@include utility('paddingTopSmall') { + padding-top: $kuiSizeS !important; +} + +@include utility('paddingBottomSmall') { + padding-bottom: $kuiSizeS !important; +} + +@include utility('paddingTopLarge') { + padding-top: $kuiSizeL !important; +} + +@include utility('paddingBottomLarge') { + padding-bottom: $kuiSizeL !important; +} + +// Horizontal padding +@include utility('paddingLeftRight') { + padding-left: $kuiSize !important; + padding-right: $kuiSize !important; +} + +@include utility('paddingLeftRightSmall') { + padding-left: $kuiSizeS !important; + padding-right: $kuiSizeS !important; +} + +@include utility('paddingLeftRightLarge') { + padding-left: $kuiSizeL !important; + padding-right: $kuiSizeL !important; +} + +@include utility('paddingLeft') { + padding-left: $kuiSize !important; +} + +@include utility('paddingRight') { + padding-right: $kuiSize !important; +} + +@include utility('paddingLeftSmall') { + padding-left: $kuiSizeS !important; +} + +@include utility('paddingRightSmall') { + padding-right: $kuiSizeS !important; +} + +@include utility('paddingLeftLarge') { + padding-left: $kuiSizeL !important; +} + +@include utility('paddingRightLarge') { + padding-right: $kuiSizeL !important; +} diff --git a/ui_framework/src/global_styling/utilities/_typography.scss b/ui_framework/src/global_styling/utilities/_typography.scss index d7fa32bd9563d..4e63a33a7ca0d 100644 --- a/ui_framework/src/global_styling/utilities/_typography.scss +++ b/ui_framework/src/global_styling/utilities/_typography.scss @@ -15,11 +15,11 @@ } @include utility('fontSizeSmall') { - @extend %kuiFontSizeS; + @include kuiFontSizeS; } @include utility('codeFont') { - @extend %kuiCodeFont; + @include kuiCodeFont; } @include utility('subduedText') { diff --git a/ui_framework/src/global_styling/variables/_colors.scss b/ui_framework/src/global_styling/variables/_colors.scss index 552fd0ccf75a8..e90d3aab3d993 100644 --- a/ui_framework/src/global_styling/variables/_colors.scss +++ b/ui_framework/src/global_styling/variables/_colors.scss @@ -33,3 +33,13 @@ $kuiTextColor: $kuiColorDarkestShade; $kuiTitleColor: $kuiColorFullShade; $kuiLinkColor: $kuiColorPrimary; $kuiFocusBackgroundColor: tint($kuiColorPrimary, 90%); + +// Dark theme overides +// $kuiColorEmptyShade: #222; +// $kuiColorLightestShade: #3F3F3F; +// $kuiColorLightShade: #666; +// $kuiColorMediumShade: #999; +// $kuiColorDarkShade: #D9D9D9; +// $kuiColorDarkestShade: #F5F5F5; +// $kuiColorFullShade: #FFF; +// $kuiFocusBackgroundColor: #3F3F3F; diff --git a/ui_framework/src/global_styling/variables/_typography.scss b/ui_framework/src/global_styling/variables/_typography.scss index d93847a63d36a..c67557c1152f8 100644 --- a/ui_framework/src/global_styling/variables/_typography.scss +++ b/ui_framework/src/global_styling/variables/_typography.scss @@ -42,48 +42,48 @@ $kuiFontWeightMedium: 500; // Our base fonts -%kuiFont { +@mixin kuiFont { font-family: $kuiFontFamily; font-weight: $kuiFontWeightRegular; } -%kuiCodeFont { +@mixin kuiCodeFont { font-family: $kuiCodeFontFamily; } // Font sizing extends, using rem mixin -%kuiFontSize { +@mixin kuiFontSize { @include fontSize($kuiFontSize); line-height: $kuiLineHeight; } -%kuiFontSizeXS { +@mixin kuiFontSizeXS { @include fontSize($kuiFontSizeXS); line-height: $kuiLineHeight; } -%kuiFontSizeS { +@mixin kuiFontSizeS { @include fontSize($kuiFontSizeS); line-height: $kuiLineHeight; } -%kuiFontSizeM { +@mixin kuiFontSizeM { @include fontSize($kuiFontSizeM); line-height: $kuiLineHeight; } -%kuiFontSizeL { +@mixin kuiFontSizeL { @include fontSize($kuiFontSizeL); line-height: $kuiLineHeight * 1.5; } -%kuiFontSizeXL { +@mixin kuiFontSizeXL { @include fontSize($kuiFontSizeXL); line-height: $kuiLineHeight * 2; } -%kuiFontSizeXXL { +@mixin kuiFontSizeXXL { @include fontSize($kuiFontSizeXXL); line-height: $kuiLineHeight * 3; }