From 478833093697d03803cab3a87968718ac535208e Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 14 Aug 2017 10:16:02 -0700 Subject: [PATCH] Update uiFramework build task and webpack config to support themed CSS files. (#13487) - Add theme toggle to UI Framework header. --- tasks/ui_framework.js | 50 +- ui_framework/dist/ui_framework_theme_dark.css | 2238 +++++++++++++++++ ...ework.css => ui_framework_theme_light.css} | 0 .../src/components/guide_nav/guide_nav.js | 58 +- ui_framework/doc_site/src/index.js | 23 +- ui_framework/doc_site/src/main.scss | 3 - ui_framework/doc_site/src/services/index.js | 6 + .../doc_site/src/services/theme/theme.js | 23 + ui_framework/doc_site/src/theme_dark.scss | 2 + ui_framework/doc_site/src/theme_light.scss | 3 + ui_framework/doc_site/webpack.config.js | 8 + .../components/expression/expressionItem.js | 25 + .../expression/expressionItemButton.js | 35 + .../expression/expressionItemPopover.js | 98 + .../src/components/expression/index.js | 3 + ui_framework/src/global_styling/core.scss | 4 + .../global_styling/theme_dark_variables.scss | 14 + .../global_styling/theme_light_variables.scss | 2 + .../src/global_styling/variables/_colors.scss | 23 +- ui_framework/src/index.scss | 11 - ui_framework/src/theme_dark.scss | 8 + ui_framework/src/theme_light.scss | 8 + .../src/themes/light_theme/_index.scss | 0 23 files changed, 2574 insertions(+), 71 deletions(-) create mode 100644 ui_framework/dist/ui_framework_theme_dark.css rename ui_framework/dist/{ui_framework.css => ui_framework_theme_light.css} (100%) delete mode 100644 ui_framework/doc_site/src/main.scss create mode 100644 ui_framework/doc_site/src/services/theme/theme.js create mode 100644 ui_framework/doc_site/src/theme_dark.scss create mode 100644 ui_framework/doc_site/src/theme_light.scss create mode 100644 ui_framework/src/components/expression/expressionItem.js create mode 100644 ui_framework/src/components/expression/expressionItemButton.js create mode 100644 ui_framework/src/components/expression/expressionItemPopover.js create mode 100644 ui_framework/src/components/expression/index.js create mode 100644 ui_framework/src/global_styling/core.scss create mode 100644 ui_framework/src/global_styling/theme_dark_variables.scss create mode 100644 ui_framework/src/global_styling/theme_light_variables.scss delete mode 100644 ui_framework/src/index.scss create mode 100644 ui_framework/src/theme_dark.scss create mode 100644 ui_framework/src/theme_light.scss delete mode 100644 ui_framework/src/themes/light_theme/_index.scss diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js index 49e0105fab12b..85b473f11f5a7 100644 --- a/tasks/ui_framework.js +++ b/tasks/ui_framework.js @@ -83,30 +83,34 @@ module.exports = function (grunt) { } function uiFrameworkCompile() { - const src = 'ui_framework/src/index.scss'; - const dest = 'ui_framework/dist/ui_framework.css'; - - return new Promise(resolve => { - sass.render({ - file: src, - }, function (error, result) { - if (error) { - grunt.log.error(error); - } - - postcss([postcssConfig]) - .process(result.css, { from: src, to: dest }) - .then(result => { - grunt.file.write(dest, result.css); - - if (result.map) { - grunt.file.write(`${dest}.map`, result.map); - } - - resolve(); - }); + const compileTheme = name => { + const src = `ui_framework/src/${name}.scss`; + const dest = `ui_framework/dist/ui_framework_${name}.css`; + + return new Promise(resolve => { + sass.render({ + file: src, + }, function (error, result) { + if (error) { + grunt.log.error(error); + } + + postcss([postcssConfig]) + .process(result.css, { from: src, to: dest }) + .then(result => { + grunt.file.write(dest, result.css); + + if (result.map) { + grunt.file.write(`${dest}.map`, result.map); + } + + resolve(); + }); + }); }); - }); + }; + + return Promise.all([compileTheme('theme_light'), compileTheme('theme_dark')]); } function uiFrameworkWatch() { diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css new file mode 100644 index 0000000000000..7e76a5876e99b --- /dev/null +++ b/ui_framework/dist/ui_framework_theme_dark.css @@ -0,0 +1,2238 @@ +@-webkit-keyframes kuiAnimFadeIn { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@keyframes kuiAnimFadeIn { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +/** + * Set scroll bar appearance on Chrome. + */ +/** + * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126). + * + */ +*, *:before, *:after { + box-sizing: border-box; } + +/** + * 1. Inheriting the font will allow some browser defaults to take effect, e.g. Chrome applies + * `font: 11px system-ui` to the button element. We can't hardcode the font-family here because + * that will disrupt components which rely upon a different inherited font-family, e.g. code + * blocks. + */ +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: inherit; + /* 1 */ + font-family: inherit; + /* 1 */ + vertical-align: baseline; } + +em { + font-style: italic; } + +strong { + font-weight: 500; } + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } + +html { + font-family: "Roboto", Helvetica, Arial, sans-serif; + font-weight: 400; + font-size: 16px; + color: #F5F5F5; + height: 100%; + background-color: #333; + -webkit-font-smoothing: antialiased; } + +body { + line-height: 1; } + +*:focus { + outline: none; } + +a { + text-decoration: none; } + a:hover { + text-decoration: none; } + a:focus { + text-decoration: none; + outline: none; } + +button { + background: none; + border: none; + padding: 0; + margin: 0; + outline: none; + font-size: 16px; } + button:hover { + cursor: pointer; } + +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; } + +.kui--flex { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.kui--flexRow { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } + +.kui--flexWrap { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + +.kui--flexGrow1 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; } + +.kui--flexShrink1 { + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; } + +.kui--flexBasisOneThird { + -webkit-flex-basis: 33.33%; + -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; } + +.kui--textAlignLeft { + text-align: left !important; } + +.kui--textAlignCenter { + text-align: center !important; } + +.kui--verticalAlignMiddle { + vertical-align: middle !important; } + +.kui--fontSizeSmall { + font-size: 14px; + font-size: 0.875rem; + line-height: 18px; } + +.kui--codeFont { + font-family: "Roboto Mono", monospace; } + +.kui--subduedText { + color: #D9D9D9; } + +.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; } + +.kuiButton { + display: inline-block; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + height: 40px; + text-decoration: none; + border: solid 1px transparent; + border-radius: 4px; + padding: 0 12px; + min-width: 112px; + text-align: center; + font-family: "Roboto", Helvetica, Arial, sans-serif; + transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1); + whitespace: nowrap; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2); + /** + * 1. Apply margin to all but last item in the flex. + */ } + .kuiButton.kuiButton--small { + height: 32px; } + .kuiButton .kuiButton__content { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .kuiButton .kuiButton__content > * + * { + margin-left: 8px; + /* 1 */ } + .kuiButton:hover, .kuiButton:focus { + text-decoration: underline; + background-color: rgba(77, 161, 192, 0.1); } + .kuiButton:focus { + -webkit-animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1); + animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } + .kuiButton.kuiButton--reverse .kuiButton__content { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + .kuiButton.kuiButton--reverse .kuiButton__content > * + * { + margin-left: 0; + margin-right: 8px; } + +.kuiButton--primary { + color: #4da1c0; + border-color: #4da1c0; } + .kuiButton--primary .kuiButton__icon { + fill: #4da1c0; } + .kuiButton--primary:hover, .kuiButton--primary:focus { + background-color: rgba(77, 161, 192, 0.1); } + .kuiButton--primary.kuiButton--fill { + background-color: #4da1c0; + color: #F5F5F5; + border-color: #4da1c0; } + .kuiButton--primary.kuiButton--fill:hover, .kuiButton--primary.kuiButton--fill:focus { + background-color: #4095b4; + border-color: #4095b4; } + .kuiButton--primary.kuiButton--fill .kuiButton__icon { + fill: #F5F5F5; } + +.kuiButton--secondary { + color: #00A69B; + border-color: #00A69B; } + .kuiButton--secondary .kuiButton__icon { + fill: #00A69B; } + .kuiButton--secondary:hover, .kuiButton--secondary:focus { + background-color: rgba(0, 166, 155, 0.1); } + .kuiButton--secondary.kuiButton--fill { + background-color: #00A69B; + color: #F5F5F5; + border-color: #00A69B; } + .kuiButton--secondary.kuiButton--fill:hover, .kuiButton--secondary.kuiButton--fill:focus { + background-color: #008d83; + border-color: #008d83; } + .kuiButton--secondary.kuiButton--fill .kuiButton__icon { + fill: #F5F5F5; } + +.kuiButton--warning { + color: #E5830E; + border-color: #E5830E; } + .kuiButton--warning .kuiButton__icon { + fill: #E5830E; } + .kuiButton--warning:hover, .kuiButton--warning:focus { + background-color: rgba(229, 131, 14, 0.1); } + .kuiButton--warning.kuiButton--fill { + background-color: #E5830E; + color: #F5F5F5; + border-color: #E5830E; } + .kuiButton--warning.kuiButton--fill:hover, .kuiButton--warning.kuiButton--fill:focus { + background-color: #cd750d; + border-color: #cd750d; } + .kuiButton--warning.kuiButton--fill .kuiButton__icon { + fill: #F5F5F5; } + +.kuiButton--danger { + color: #bf4d4d; + border-color: #bf4d4d; } + .kuiButton--danger .kuiButton__icon { + fill: #bf4d4d; } + .kuiButton--danger:hover, .kuiButton--danger:focus { + background-color: rgba(191, 77, 77, 0.1); } + .kuiButton--danger.kuiButton--fill { + background-color: #bf4d4d; + color: #F5F5F5; + border-color: #bf4d4d; } + .kuiButton--danger.kuiButton--fill:hover, .kuiButton--danger.kuiButton--fill:focus { + background-color: #b24040; + border-color: #b24040; } + .kuiButton--danger.kuiButton--fill .kuiButton__icon { + fill: #F5F5F5; } + +.kuiButton--disabled { + color: #313131; + border-color: #313131; } + .kuiButton--disabled .kuiButton__icon { + fill: #313131; } + .kuiButton--disabled:hover, .kuiButton--disabled:focus { + background-color: rgba(49, 49, 49, 0.1); + cursor: not-allowed; } + .kuiButton--disabled.kuiButton--fill { + background-color: #313131; + color: #F5F5F5; + border-color: #313131; } + .kuiButton--disabled.kuiButton--fill:hover, .kuiButton--disabled.kuiButton--fill:focus { + background-color: #242424; + border-color: #242424; } + .kuiButton--disabled.kuiButton--fill .kuiButton__icon { + fill: #F5F5F5; } + +@-webkit-keyframes kuiButtonFocus { + 50% { + -webkit-transform: translateY(2px); + transform: translateY(2px); } } + +@keyframes kuiButtonFocus { + 50% { + -webkit-transform: translateY(2px); + transform: translateY(2px); } } + +.kuiCallOut { + padding: 16px; + border-left: 2px solid transparent; } + +.kuiCallOut--info { + border-color: #4da1c0; + background-color: #17303a; } + .kuiCallOut--info .kuiCallOutHeader__icon { + fill: #cae3ec; } + .kuiCallOut--info .kuiCallOutHeader__title { + color: #cae3ec; } + +.kuiCallOut--success { + border-color: #00A69B; + background-color: #00322f; } + .kuiCallOut--success .kuiCallOutHeader__icon { + fill: #b3e4e1; } + .kuiCallOut--success .kuiCallOutHeader__title { + color: #b3e4e1; } + +.kuiCallOut--warning { + border-color: #E5830E; + background-color: #452704; } + .kuiCallOut--warning .kuiCallOutHeader__icon { + fill: #f7dab7; } + .kuiCallOut--warning .kuiCallOutHeader__title { + color: #f7dab7; } + +.kuiCallOut--danger { + border-color: #bf4d4d; + background-color: #391717; } + .kuiCallOut--danger .kuiCallOutHeader__icon { + fill: #eccaca; } + .kuiCallOut--danger .kuiCallOutHeader__title { + color: #eccaca; } + +/** + * 1. Align icon with first line of title text if it wraps. + * 2. If content exists under the header, space it appropriately. + * 3. Apply margin to all but last item in the flex. + */ +.kuiCallOutHeader { + font-size: 16px; + font-size: 1rem; + line-height: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: baseline; + -webkit-align-items: baseline; + -ms-flex-align: baseline; + align-items: baseline; + /* 1 */ } + .kuiCallOutHeader + * { + margin-top: 8px; + /* 1 */ } + .kuiCallOutHeader > * + * { + margin-left: 8px; + /* 3 */ } + +/** + * 1. Vertically center icon with first line of title. + */ +.kuiCallOutHeader__icon { + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-transform: translateY(2px); + transform: translateY(2px); + /* 1 */ } + +.kuiForm__error { + font-size: 14px; + font-size: 0.875rem; + line-height: 18px; + list-style: disc; + margin-left: 32px; } + +.kuiForm__errors { + margin-bottom: 16px; } + +.kuiFormRow { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + max-width: 400px; } + .kuiFormRow + * { + margin-top: 24px; } + .kuiFormRow.kuiFormRow--withIcon input { + padding-left: 40px; } + .kuiFormRow.kuiFormRow--dropdown input { + padding-left: 12px; + padding-right: 40px; } + .kuiFormRow.kuiFormRow--select .kuiFormRow__icon { + left: auto; + right: 12px; } + .kuiFormRow .kuiFormRow__label { + font-size: 12px; + padding-bottom: 8px; + cursor: pointer; + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); + font-weight: 500; + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; } + .kuiFormRow .kuiFormRow__helpText { + font-size: 12px; + padding: 8px 0; + color: #D9D9D9; } + .kuiFormRow .kuiFormRow__error { + font-size: 12px; + padding: 8px 0; + color: #bf4d4d; } + .kuiFormRow .kuiFormRow__error + * { + padding-top: 0; } + .kuiFormRow .kuiFormRow__icon { + position: absolute; + top: 32px; + left: 12px; } + .kuiFormRow input:focus + label, + .kuiFormRow select:focus + label, + .kuiFormRow textarea:focus + label { + color: #4da1c0; } + .kuiFormRow.kuiFormRow--invalid .kuiFormRow__label { + color: #bf4d4d !important; } + .kuiFormRow.kuiFormRow--invalid input[type="text"], + .kuiFormRow.kuiFormRow--invalid input[type="password"], + .kuiFormRow.kuiFormRow--invalid input[type="number"], + .kuiFormRow.kuiFormRow--invalid input[type="search"], + .kuiFormRow.kuiFormRow--invalid select, + .kuiFormRow.kuiFormRow--invalid textarea { + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #bf4d4d !important; } + +.kuiCheckbox { + position: relative; + height: 24px; + margin-top: 8px; } + .kuiCheckbox .kuiCheckbox__label { + position: absolute; + padding-left: 32px; + line-height: 24px; + display: block; + font-weight: 400; + z-index: 2; + font-size: 14px; + cursor: pointer; } + .kuiCheckbox .kuiCheckbox__square { + position: absolute; + height: 24px; + width: 24px; + border-radius: 4px; + border: 1px solid #444; + background: #262626; + z-index: 0; } + .kuiCheckbox .kuiCheckbox__check { + height: 100%; + width: 100%; } + .kuiCheckbox .kuiCheckbox__input { + position: absolute; + opacity: 0; } + .kuiCheckbox .kuiCheckbox__input:checked ~ .kuiCheckbox__square .kuiCheckbox__check { + background-color: #F5F5F5; + -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat; + mask: url("../src/components/icon/assets/check.svg") center center no-repeat; } + .kuiCheckbox .kuiCheckbox__input:focus ~ .kuiCheckbox__square { + background-color: #275160; + border-color: #4da1c0; } + .kuiCheckbox .kuiCheckbox__input:checked:focus ~ .kuiCheckbox__square .kuiCheckbox__check { + background-color: #F5F5F5; + -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat; + mask: url("../src/components/icon/assets/check.svg") center center no-repeat; } + +.kuiFieldNumber { + border: none; + font-size: 14px; + font-family: "Roboto", Helvetica, Arial, sans-serif; + padding: 12px; + color: #F5F5F5; + min-width: 256px; + background: #262626; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626; + transition: box-shadow 250ms ease-in, background 250ms ease-in; + max-width: 400px; + border-radius: 0; } + .kuiFieldNumber:focus { + background: #222; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; } + +.kuiFieldPassword { + border: none; + font-size: 14px; + font-family: "Roboto", Helvetica, Arial, sans-serif; + padding: 12px; + color: #F5F5F5; + min-width: 256px; + background: #262626; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626; + transition: box-shadow 250ms ease-in, background 250ms ease-in; + max-width: 400px; + border-radius: 0; } + .kuiFieldPassword:focus { + background: #222; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; } + +.kuiFieldSearch { + border: none; + font-size: 14px; + font-family: "Roboto", Helvetica, Arial, sans-serif; + padding: 12px; + color: #F5F5F5; + min-width: 256px; + background: #262626; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626; + transition: box-shadow 250ms ease-in, background 250ms ease-in; + max-width: 400px; + border-radius: 0; } + .kuiFieldSearch:focus { + background: #222; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; } + +.kuiFieldText { + border: none; + font-size: 14px; + font-family: "Roboto", Helvetica, Arial, sans-serif; + padding: 12px; + color: #F5F5F5; + min-width: 256px; + background: #262626; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626; + transition: box-shadow 250ms ease-in, background 250ms ease-in; + max-width: 400px; + border-radius: 0; } + .kuiFieldText:focus { + background: #222; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; } + +.kuiRange { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin: 8px 0; + width: 100%; } + .kuiRange:focus::-webkit-slider-thumb { + border: 2px solid #4da1c0; } + .kuiRange:focus::-moz-range-thumb { + border: 2px solid #4da1c0; } + .kuiRange:focus::-ms-thumb { + border: 2px solid #4da1c0; } + .kuiRange:focus::-webkit-slider-runnable-track { + background-color: #4da1c0; } + .kuiRange::-webkit-slider-runnable-track { + cursor: pointer; + height: 2px; + transition: all 250ms ease-in; + width: 100%; + background: #444; + border: 0 solid #444; + border-radius: 4px; } + .kuiRange::-webkit-slider-thumb { + background: #222; + border: 2px solid #F5F5F5; + border-radius: 50%; + cursor: pointer; + height: 16px; + width: 16px; + -webkit-appearance: none; + margin-top: -7px; } + .kuiRange::-moz-range-track { + cursor: pointer; + height: 2px; + transition: all 250ms ease-in; + width: 100%; + background: #444; + border: 0 solid #444; + border-radius: 4px; } + .kuiRange::-moz-range-thumb { + background: #222; + border: 2px solid #F5F5F5; + border-radius: 50%; + cursor: pointer; + height: 16px; + width: 16px; } + .kuiRange::-ms-track { + cursor: pointer; + height: 2px; + transition: all 250ms ease-in; + width: 100%; + background: transparent; + border-color: transparent; + border-width: 8px 0; + color: transparent; } + .kuiRange::-ms-fill-lower { + background: #444; + border: 0 solid #444; + border-radius: 8px; } + .kuiRange::-ms-fill-upper { + background: #444; + border: 0 solid #444; + border-radius: 8px; } + .kuiRange::-ms-thumb { + background: #222; + border: 2px solid #F5F5F5; + border-radius: 50%; + cursor: pointer; + height: 16px; + width: 16px; + margin-top: 0; } + +.kuiSelect { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + font-size: 14px; + font-family: "Roboto", Helvetica, Arial, sans-serif; + padding: 12px; + color: #F5F5F5; + min-width: 256px; + background: #262626; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626; + transition: box-shadow 250ms ease-in, background 250ms ease-in; + max-width: 400px; + border-radius: 0; } + .kuiSelect:focus { + background: #222; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; } + .kuiSelect::-ms-expand { + display: none; } + +.kuiSwitch { + position: relative; + display: inline-block; + height: 24px; + cursor: pointer; + /** + * 1. The label is our main clickable area. It sits above the actual switch. + */ + /** + * 1. The input is "hidden" but still focusable. + */ + /** + * 1. Accounts for the border on the body. + */ + /** + * 1. Mask is used to color the svg. Text color is used so works regardless of theme. + */ + /** + * The thumb is slightly scaled when in use. + */ + /** + * When input is not checked, we shift around the positioning of sibling/child selectors. + */ } + .kuiSwitch .kuiSwitch__label { + position: absolute; + left: 0; + padding-left: 60px; + z-index: 2; + line-height: 24px; + font-size: 14px; + cursor: pointer; } + .kuiSwitch .kuiSwitch__input { + position: absolute; + opacity: 0; + z-index: -1; } + .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body { + background: #222; } + .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body .kuiSwitch__thumb { + border-color: #4da1c0; + background-color: #4da1c0; } + .kuiSwitch .kuiSwitch__body { + width: 52px; + height: 24px; + background: #262626; + border: 1px solid #444; + display: inline-block; + position: relative; + border-radius: 24px; + vertical-align: middle; } + .kuiSwitch .kuiSwitch__thumb { + position: absolute; + width: 24px; + height: 24px; + display: inline-block; + background-color: #222; + left: 28px; + top: -1px; + border-radius: 50%; + border: 1px solid #444; + transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); + transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); + transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); + z-index: 1; } + .kuiSwitch .kuiSwitch__track { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + overflow: hidden; + border-radius: 24px; } + .kuiSwitch .kuiSwitch__icon { + position: absolute; + right: -40px; + top: 0; + bottom: 0; + width: 48px; + transition: left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), right 250ms cubic-bezier(0.34, 1.61, 0.7, 1); + -webkit-mask: url("../src/components/icon/assets/cross.svg") center center no-repeat; + mask: url("../src/components/icon/assets/cross.svg") center center no-repeat; + background-color: #F5F5F5; } + .kuiSwitch .kuiSwitch__icon--checked { + right: auto; + left: -8px; + background-color: #F5F5F5; + -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat; + mask: url("../src/components/icon/assets/check.svg") center center no-repeat; } + .kuiSwitch:hover .kuiSwitch__thumb { + -webkit-transform: scale(1.05); + transform: scale(1.05); } + .kuiSwitch:active .kuiSwitch__thumb { + -webkit-transform: scale(0.95); + transform: scale(0.95); } + .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__thumb { + left: -1px; } + .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon { + right: -8px; } + .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon.kuiSwitch__icon--checked { + right: auto; + left: -40px; } + +.kuiTextArea { + border: none; + font-size: 14px; + font-family: "Roboto", Helvetica, Arial, sans-serif; + padding: 12px; + color: #F5F5F5; + min-width: 256px; + background: #262626; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626; + transition: box-shadow 250ms ease-in, background 250ms ease-in; + max-width: 400px; + border-radius: 0; } + .kuiTextArea:focus { + background: #222; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; } + +.kuiHeader { + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: #222; + border-bottom: 1px solid #444; } + +.kuiHeader__notification { + display: inline-block; + border-radius: 4px; + background: #DD0A73; + color: #222; + font-size: 12px; + line-height: 16px; + height: 16px; + min-width: 16px; + vertical-align: middle; } + +.kuiHeaderAlert { + text-align: left; + min-width: 300px; + position: relative; + margin: 0 -16px; + padding: 16px; + border-top: 1px solid #444; } + .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: 18px; + margin-bottom: 8px; } + +.kuiHeaderAlert__action { + font-size: 12px; + font-size: 0.75rem; + line-height: 18px; + color: #4da1c0; } + .kuiHeaderAlert__action:focus { + outline: solid 6px #275160; } + +.kuiHeaderAlert__date { + font-size: 12px; + font-size: 0.75rem; + line-height: 18px; + color: #D9D9D9; + text-align: right; } + +/** + * 1. Override KeyPadMenu. + */ +.kuiHeaderPopover { + top: calc(100% - 16px) !important; + /* 1 */ } + +.kuiHeaderProfile { + text-align: left; + padding-bottom: 16px; } + +.kuiHeaderLogo { + position: relative; + height: 64px; + padding: 16px 24px; + display: inline-block; + vertical-align: middle; } + .kuiHeaderLogo:hover { + text-decoration: underline; } + .kuiHeaderLogo:focus { + text-decoration: underline; + background: #275160; } + +.kuiHeaderLogo__icon { + height: 32px; + width: 24px; + opacity: 1; } + +.kuiHeaderBreadcrumbs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.kuiHeaderBreadcrumb { + display: inline-block; + height: 64px; + line-height: 64px; + padding: 0 16px; + position: relative; + color: #F5F5F5; } + .kuiHeaderBreadcrumb:not(:last-child):after { + position: absolute; + top: 24px; + right: -3px; + content: ""; + width: 1px; + height: 16px; + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + background: #444; } + .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):hover { + text-decoration: underline; } + .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):focus { + text-decoration: underline; + background: #275160; } + .kuiHeaderBreadcrumb.kuiHeaderBreadcrumb-isActive { + color: #555; } + +.kuiHeaderBreadcrumb__text { + white-space: nowrap; + max-width: 150px; + display: block; + text-overflow: ellipsis; + overflow: hidden; } + +.kuiHeaderBreadcrumb--collapsed { + color: #444; } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .kuiHeaderBreadcrumb { + display: none; } + .kuiHeaderBreadcrumb:nth-last-child(-n+4) { + display: inline-block; } } + +@media only screen and (min-width: 769px) and (max-width: 991px) { + .kuiHeaderBreadcrumb { + display: none; } + .kuiHeaderBreadcrumb:nth-last-child(-n+2) { + display: inline-block; } } + +@media only screen and (max-width: 768px) { + .kuiHeaderBreadcrumb { + display: none; } } + +.kuiHeaderSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.kuiHeaderSection--left { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; } + +.kuiHeaderSection--right { + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; } + +.kuiHeaderSectionItem { + position: relative; } + .kuiHeaderSectionItem:hover { + background: #333; } + .kuiHeaderSectionItem:after { + position: absolute; + content: ""; + width: 1px; + top: 16px; + bottom: 0; + background: #444; + left: 0; } + +.kuiHeaderSectionItem__button { + height: 64px; + min-width: 64px; + text-align: center; } + .kuiHeaderSectionItem__button:focus { + background: #275160; } + +.kuiHeaderSectionItem--borderRight:after { + left: auto; + right: 0; } + +.kuiIcon { + display: inline-block; + vertical-align: middle; + fill: #F5F5F5; } + .kuiIcon:focus { + opacity: 1; + background: #275160; } + +.kuiIcon--basic { + fill: #F5F5F5; } + +.kuiIcon--medium { + width: 16px; + height: 16px; } + +.kuiIcon--large { + width: 24px; + height: 24px; } + +.kuiIcon--xLarge { + width: 32px; + height: 32px; } + +.kuiIcon--xxLarge { + width: 40px; + height: 40px; } + +/** + * Dial menu is a phone like dial comprised of an svg icon and a title. + */ +/** + * 1. Default to grid of 3. + */ +.kuiKeyPadMenu { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 288px; + /* 1 */ } + +/** + * 1. If this class is applied to a button, we need to override the Chrome default font. + */ +.kuiKeyPadMenuItem { + display: block; + padding: 16px; + height: 96px; + width: 96px; + color: #D9D9D9; + border: 1px solid #444; + border-color: transparent; + border-radius: 4px; + font-family: "Roboto", Helvetica, Arial, sans-serif; + /* 1 */ } + .kuiKeyPadMenuItem:hover, .kuiKeyPadMenuItem:focus { + border-color: #444; } + .kuiKeyPadMenuItem:hover .kuiKeyPadMenuItem__icon, .kuiKeyPadMenuItem:focus .kuiKeyPadMenuItem__icon { + -webkit-transform: translateY(0); + transform: translateY(0); } + .kuiKeyPadMenuItem:focus { + background: #275160; } + .kuiKeyPadMenuItem:focus .kuiKeyPadMenuItem__label { + text-decoration: underline; } + +.kuiKeyPadMenuItem__inner { + width: 100%; + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } + +.kuiKeyPadMenuItem__icon { + transition: -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms; + transition: transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms; + transition: transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms; + -webkit-transform: translateY(4px); + transform: translateY(4px); + margin-bottom: 8px; } + +.kuiKeyPadMenuItem__label { + font-size: 14px; + font-size: 0.875rem; + line-height: 18px; + text-align: center; } + +.kuiLink { + color: #4da1c0; } + .kuiLink:hover { + text-decoration: underline; } + .kuiLink:focus { + text-decoration: underline; + background: #275160; } + .kuiLink:hover { + color: #3985a1; } + .kuiLink:focus { + background: #275160; + outline: solid 3px #275160; } + +.kuiLoadingKibana { + position: relative; + display: inline-block; } + .kuiLoadingKibana:before, .kuiLoadingKibana:after { + position: absolute; + content: ""; + width: 90%; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + border-radius: 50%; + opacity: 0.2; + -webkit-transform-origin: -50% -50%; + transform-origin: -50% -50%; + z-index: 1; } + .kuiLoadingKibana:before { + box-shadow: 0 0 8px #FFF; + -webkit-animation: 1s kuiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s kuiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + .kuiLoadingKibana:after { + background-color: #FFF; + -webkit-animation: 1s kuiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s kuiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +/** + * 1. Requires pixel math for animation. + */ +.kuiLoadingKibana--medium:before, .kuiLoadingKibana--medium:after { + height: 3px; + /* 1 */ + bottom: -4px; } + +.kuiLoadingKibana--medium .kuiLoadingKibana__icon { + z-index: 999; + -webkit-animation: 1s kuiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s kuiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +/** + * 1. Requires pixel math for animation. + */ +.kuiLoadingKibana--large:before, .kuiLoadingKibana--large:after { + height: 6px; + /* 1 */ + bottom: -8px; } + +.kuiLoadingKibana--large .kuiLoadingKibana__icon { + -webkit-animation: 1s kuiLoadingKibanaBounceLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s kuiLoadingKibanaBounceLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +.kuiLoadingKibana--xLarge:before, .kuiLoadingKibana--xLarge:after { + height: 8px; + bottom: -12px; } + +.kuiLoadingKibana--xLarge .kuiLoadingKibana__icon { + -webkit-animation: 1s kuiLoadingKibanaBounceXLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s kuiLoadingKibanaBounceXLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +@-webkit-keyframes kuiLoadingKibanaBounceMedium { + 50% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); } } + +@keyframes kuiLoadingKibanaBounceMedium { + 50% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); } } + +@-webkit-keyframes kuiLoadingKibanaBounceLarge { + 50% { + -webkit-transform: translateY(-12px); + transform: translateY(-12px); } } + +@keyframes kuiLoadingKibanaBounceLarge { + 50% { + -webkit-transform: translateY(-12px); + transform: translateY(-12px); } } + +@-webkit-keyframes kuiLoadingKibanaBounceXLarge { + 50% { + -webkit-transform: translateY(-16px); + transform: translateY(-16px); } } + +@keyframes kuiLoadingKibanaBounceXLarge { + 50% { + -webkit-transform: translateY(-16px); + transform: translateY(-16px); } } + +@-webkit-keyframes kuiLoadingKibanaPulsateAndFade { + 0% { + opacity: 0; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: 0.1; } + 100% { + opacity: 0; } } + +@keyframes kuiLoadingKibanaPulsateAndFade { + 0% { + opacity: 0; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: 0.1; } + 100% { + opacity: 0; } } + +@-webkit-keyframes kuiLoadingKibanaPulsate { + 0% { + opacity: 0.15; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: 0.05; } + 100% { + opacity: 0.15; } } + +@keyframes kuiLoadingKibanaPulsate { + 0% { + opacity: 0.15; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: 0.05; } + 100% { + opacity: 0.15; } } + +.kuiLoadingChart { + height: 32px; + z-index: 500; + overflow: hidden; + display: inline-block; } + +.kuiLoadingChart__bar { + height: 100%; + width: 8px; + display: inline-block; + float: left; + margin-bottom: -16px; + margin-left: 2px; + -webkit-animation: kuiLoadingChart 1s infinite; + animation: kuiLoadingChart 1s infinite; } + .kuiLoadingChart__bar:nth-child(1) { + background-color: #4da1c0; } + .kuiLoadingChart__bar:nth-child(2) { + background-color: #00A69B; + -webkit-animation-delay: .1s; + animation-delay: .1s; } + .kuiLoadingChart__bar:nth-child(3) { + background-color: #DD0A73; + -webkit-animation-delay: .2s; + animation-delay: .2s; } + .kuiLoadingChart__bar:nth-child(4) { + background-color: #F5F5F5; + -webkit-animation-delay: .3s; + animation-delay: .3s; } + +.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(1) { + background-color: #444; } + +.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(2) { + background-color: #3a3a3a; } + +.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(3) { + background-color: #303030; } + +.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(4) { + background-color: #252525; } + +.kuiLoadingChart--medium { + height: 16px; } + .kuiLoadingChart--medium > div { + width: 2px; + margin-left: 2px; + margin-bottom: 8px; } + +.kuiLoadingChart--large { + height: 24px; } + .kuiLoadingChart--large > div { + width: 4px; + margin-left: 2px; + margin-bottom: 12px; } + +.kuiLoadingChart--xLarge { + height: 32px; } + .kuiLoadingChart--xLarge > div { + width: 8px; + margin-left: 4px; + margin-bottom: 16px; } + +@-webkit-keyframes kuiLoadingChart { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); } + 50% { + -webkit-transform: translateY(66%); + transform: translateY(66%); } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes kuiLoadingChart { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); } + 50% { + -webkit-transform: translateY(66%); + transform: translateY(66%); } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); } } + +.kuiLoadingSpinner { + display: inline-block; + width: 32px; + height: 32px; + border-radius: 50%; + border: solid 2px #444; + border-top-color: #4da1c0; + -webkit-animation: kuiLoadingSpinner .6s infinite linear; + animation: kuiLoadingSpinner .6s infinite linear; } + +.kuiLoadingSpinner--small { + width: 8px; + height: 8px; + border-width: 1px; } + +.kuiLoadingSpinner--medium { + width: 16px; + height: 16px; + border-width: 1px; } + +.kuiLoadingSpinner--large { + width: 24px; + height: 24px; } + +.kuiLoadingSpinner--xLarge { + width: 32px; + height: 32px; } + +@-webkit-keyframes kuiLoadingSpinner { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + to { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); } } + +@keyframes kuiLoadingSpinner { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + to { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); } } + +.kuiModalOverlay { + position: fixed; + z-index: 6000; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: rgba(34, 34, 34, 0.9); + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding-bottom: 10vh; + -webkit-animation: kuiAnimFadeIn 150ms ease-in; + animation: kuiAnimFadeIn 150ms ease-in; } + +.kuiModal { + box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); + background-color: #222; + border: 1px solid #444; + border-radius: 4px; + z-index: 8000; + padding: 32px; + min-width: 50%; + -webkit-animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); + animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); } + +.kuiModalHeader { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + +.kuiModalHeader__title { + font-size: 24px; + font-size: 1.5rem; + line-height: 36px; } + +.kuiModalBody { + padding: 32px 0; } + +.kuiModalFooter { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } + .kuiModalFooter > * + * { + margin-left: 16px; } + +@-webkit-keyframes kuiModal { + 0% { + opacity: 0; + -webkit-transform: translateY(32px); + transform: translateY(32px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes kuiModal { + 0% { + opacity: 0; + -webkit-transform: translateY(32px); + transform: translateY(32px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +.kuiPage { + padding: 24px; } + +@media only screen and (max-width: 768px) { + .kuiPage { + padding: 24px 0; } } + +.kuiPageBody { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 400px; } + +@media only screen and (max-width: 768px) { + .kuiPageBody { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } } + +.kuiPageContent { + padding: 24px; + background: #222; + border: 1px solid #444; + border-radius: 4px; + width: 100%; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); } + +.kuiPageContent--verticalCenter { + -webkit-align-self: center; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; } + +.kuiPageContent--horizontalCenter { + width: auto; + margin: auto; } + +@media only screen and (max-width: 768px) { + .kuiPageContent { + border-radius: 0; + border: none; } } + +.kuiPageContentHeader { + margin-bottom: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + +@media only screen and (max-width: 768px) { + .kuiPageContentHeader { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } } + +.kuiPageContentHeaderSection + .kuiPageContentHeaderSection { + margin-left: 32px; } + +@media only screen and (max-width: 768px) { + .kuiPageContentHeaderSection { + width: 100%; } + .kuiPageContentHeaderSection + .kuiPageContentHeaderSection { + margin-left: 0; + margin-top: 16px; } } + +.kuiPageSideBar { + width: 192px; + margin-right: 24px; } + +@media only screen and (max-width: 768px) { + .kuiPageSideBar { + width: 100%; } } + +.kuiPageHeader { + margin-bottom: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + +@media only screen and (max-width: 768px) { + .kuiPageHeader { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 0 24px; + margin-bottom: 0; } } + +.kuiPageHeaderSection + .kuiPageHeaderSection { + margin-left: 32px; } + +@media only screen and (max-width: 768px) { + .kuiPageHeaderSection { + width: 100%; } + .kuiPageHeaderSection + .kuiPageHeaderSection { + margin-left: 0; + margin-top: 16px; } } + +.kuiPopover { + display: inline-block; + position: relative; } + .kuiPopover.kuiPopover-isOpen .kuiPopover__body { + opacity: 1; + visibility: visible; + z-index: 2000; + margin-top: 8px; } + +.kuiPopover__body { + box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); + background-color: #222; + position: absolute; + min-width: 256px; + top: 100%; + left: 50%; + border: 1px solid #444; + border-radius: 4px 0 4px 4px; + padding: 16px; + -webkit-transform: translateX(-50%) translateY(8px) translateZ(0); + transform: translateX(-50%) translateY(8px) translateZ(0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, margin-top cubic-bezier(0.34, 1.61, 0.7, 1) 350ms; + -webkit-transform-origin: center top; + transform-origin: center top; + opacity: 0; + visibility: hidden; + margin-top: 24px; } + .kuiPopover__body:before { + position: absolute; + content: ""; + top: -16px; + height: 0; + width: 0; + left: 50%; + margin-left: -16px; + border-left: 16px solid transparent; + border-right: 16px solid transparent; + border-bottom: 16px solid #444; } + .kuiPopover__body:after { + position: absolute; + content: ""; + top: -15px; + right: 0; + height: 0; + left: 50%; + margin-left: -16px; + width: 0; + border-left: 16px solid transparent; + border-right: 16px solid transparent; + border-bottom: 16px solid #222; } + +.kuiPopover--anchorLeft .kuiPopover__body { + left: 0; + -webkit-transform: translateX(0%) translateY(8px) translateZ(0); + transform: translateX(0%) translateY(8px) translateZ(0); } + .kuiPopover--anchorLeft .kuiPopover__body:before, .kuiPopover--anchorLeft .kuiPopover__body:after { + right: auto; + left: 16px; + margin: 0; } + +.kuiPopover--anchorRight .kuiPopover__body { + left: 100%; + -webkit-transform: translateX(-100%) translateY(8px) translateZ(0); + transform: translateX(-100%) translateY(8px) translateZ(0); } + .kuiPopover--anchorRight .kuiPopover__body:before, .kuiPopover--anchorRight .kuiPopover__body:after { + right: 16px; + left: auto; } + +.kuiSideNav__mobileToggle { + display: none; + border-bottom: 1px solid #444; + padding: 16px 24px; + width: 100%; + text-align: left; + /** + * 1. This toggle also works with KUI link, but we need the outline + * that comes with the focus state. + */ } + .kuiSideNav__mobileToggle:focus { + outline: none; } + +.kuiSideNav__mobileIcon { + fill: #4da1c0; } + +.kuiSideNav__mobileWrap { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.kuiSideNav__mobileTitle { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + color: #4da1c0; } + +@media only screen and (max-width: 768px) { + /** + * 1. Animation doesn't work against height. Need max-height instead. + * We set a value larger than what is needed to fake "auto". + */ + .kuiSideNav-isOpenMobile .kuiSideNav__content { + visibility: visible; + opacity: 1; + margin: 24px; + max-height: 5000px; + /* 1 */ + transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .kuiSideNav__mobileToggle { + display: block; } + .kuiSideNav__content { + visibility: hidden; + opacity: 0; + max-height: 0; + margin: 0 24px; } } + +.kuiSideNavItem { + font-size: 14px; + font-size: 0.875rem; + line-height: 18px; + display: block; + width: 100%; + text-align: left; + padding: 4px 8px; + color: #D9D9D9; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border: 1px solid #444; + border-color: transparent; } + .kuiSideNavItem.kuiSideNavItem-isSelected { + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); + color: #00A69B; + border-left: 2px solid #444; + border-left-color: #00A69B; + background-color: #222; } + .kuiSideNavItem:hover { + text-decoration: underline; } + .kuiSideNavItem:focus { + background-color: #275160; } + .kuiSideNavItem:focus:not(.kuiSideNavItem-isSelected) { + border: solid 1px #18323c; } + +.kuiSideNavTitle { + font-size: 16px; + font-size: 1rem; + line-height: 24px; + font-weight: 500; + margin-bottom: 8px; + margin-top: 16px; + /** + * 1. Only want the first title to have margin. Since buttons exist in nav + * we need to use first of type. + */ } + .kuiSideNavTitle:first-of-type { + margin-top: 0; + /* 1 */ } + +/** + * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed. + */ +/** + * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from + * specifying a column width, e.g. the checkbox column. + */ +.kuiTable { + font-size: 14px; + font-size: 0.875rem; + line-height: 18px; + width: 100%; + border: none; + border-collapse: collapse; + background-color: #222; } + +.kuiTable--compressed .kuiTableHeaderCell, +.kuiTable--compressed .kuiTableRowCell__content { + padding: 8px; } + +.kuiTableHeaderCell { + text-align: left; + max-width: 20px; + /* 1 */ + padding: 12px; + color: #FFF; } + +.kuiTableHeaderCell__content { + display: inline-block; } + +.kuiTableHeaderCell--alignRight { + text-align: right; } + +.kuiTableRow:hover { + background-color: rgba(77, 161, 192, 0.05); } + +.kuiTableRow.kuiTableRow-isSelected { + background-color: rgba(255, 255, 0, 0.05); } + +.kuiTableRowCell { + text-align: left; + max-width: 20px; + /* 1 */ + color: #F5F5F5; + border-top: 1px solid #444; + border-bottom: 1px solid #444; } + +/** + * 1. Vertically align all children. + * 2. Truncate text with an ellipsis. The padding on this div allows the ellipsis to show. If + * the padding was on the cell, the ellipsis would be cropped. + */ +.kuiTableRowCell__content { + white-space: nowrap; + /* 2 */ + overflow: hidden; + /* 2 */ + text-overflow: ellipsis; + /* 2 */ + padding: 12px; + /* 2 */ } + .kuiTableRowCell__content > * { + vertical-align: middle; + /* 1 */ } + +.kuiTableRowCell--alignRight .kuiTableRowCell__content { + text-align: right; } + +.kuiTableRowCell--wrapText .kuiTableRowCell__content { + white-space: normal; } + +.kuiTabs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + border-bottom: 1px solid #444; } + +.kuiTab { + font-size: 16px; + font-size: 1rem; + line-height: 24px; + position: relative; + cursor: pointer; + padding: 12px 16px; + color: #D9D9D9; + background-color: #222; + transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .kuiTab:hover:not(.kuiTab-isSelected) { + color: #F5F5F5; + text-decoration: underline; } + .kuiTab:focus { + background-color: #275160; + text-decoration: underline; } + .kuiTab.kuiTab-isSelected { + cursor: default; + color: #00A69B; } + .kuiTab.kuiTab-isSelected:after { + position: absolute; + bottom: -1px; + left: 0; + content: ' '; + width: 100%; + height: 2px; + background-color: #00A69B; + -webkit-animation: kuiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); + animation: kuiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + +.kuiTab__content { + display: block; + transition: -webkit-transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1); + transition: transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1); + transition: transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1); + -webkit-transform: translateY(0); + transform: translateY(0); } + +@-webkit-keyframes kuiTab { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); } + 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); } } + +@keyframes kuiTab { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); } + 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); } } + +/** + * 1. Allow list to expand as items are added, but cap it at the screen height. + */ +.kuiGlobalToastList { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + position: fixed; + z-index: 5000; + bottom: 0; + right: 0; + width: 320px; + overflow-x: hidden; + overflow-y: scroll; + max-height: 100vh; + /* 1 */ } + .kuiGlobalToastList::-webkit-scrollbar { + width: 16px; + height: 16px; } + .kuiGlobalToastList::-webkit-scrollbar-thumb { + background-color: rgba(217, 217, 217, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .kuiGlobalToastList::-webkit-scrollbar-track { + background-color: transparent; } + +.kuiGlobalToastListItem { + margin-bottom: 12px; + -webkit-animation: 0.5s kuiShowToast; + animation: 0.5s kuiShowToast; + opacity: 1; + /** + * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push + * items to the bottom instead. + */ } + .kuiGlobalToastListItem:first-child { + margin-top: auto; + /* 1 */ } + .kuiGlobalToastListItem.kuiGlobalToastListItem-isDismissed { + transition: opacity 250ms; + opacity: 0; } + +@-webkit-keyframes kuiShowToast { + from { + -webkit-transform: translateX(30px); + transform: translateX(30px); + opacity: 0; } + to { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; } } + +@keyframes kuiShowToast { + from { + -webkit-transform: translateX(30px); + transform: translateX(30px); + opacity: 0; } + to { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; } } + +.kuiToast { + box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); + position: relative; + padding: 12px; + background-color: #222; + border: 1px solid #444; } + +/** + * 1. Fit button to icon. + */ +.kuiToast__closeButton { + position: absolute; + top: 4px; + right: 4px; + line-height: 0; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + .kuiToast__closeButton svg { + fill: #4d4d4d; } + .kuiToast__closeButton:hover svg { + fill: #FFF; } + .kuiToast__closeButton:focus { + background-color: #275160; } + .kuiToast__closeButton:focus svg { + fill: #4da1c0; } + +.kuiToast--info { + border-top: 2px solid #4da1c0; } + +.kuiToast--success { + border-top: 2px solid #00A69B; } + +.kuiToast--warning { + border-top: 2px solid #E5830E; } + +.kuiToast--danger { + border-top: 2px solid #bf4d4d; } + +/** + * 1. Align icon with first line of title text if it wraps. + * 2. Apply margin to all but last item in the flex. + */ +.kuiToastHeader { + font-size: 16px; + font-size: 1rem; + line-height: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: baseline; + -webkit-align-items: baseline; + -ms-flex-align: baseline; + align-items: baseline; + /* 1 */ } + .kuiToastHeader > * + * { + margin-left: 8px; + /* 2 */ } + +/** + * 1. Vertically center icon with first line of title. + */ +.kuiToastHeader__icon { + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + fill: #FFF; + -webkit-transform: translateY(2px); + transform: translateY(2px); + /* 1 */ } + +.kuiToastHeader__title { + color: #FFF; + font-weight: 300; } + +.kuiToastHeader--withBody { + margin-bottom: 9px; } + +.kuiTitle { + font-size: 24px; + font-size: 1.5rem; + line-height: 36px; + color: #FFF; + 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: #F5F5F5; + font-weight: 400; } + +.kuiText--small { + font-size: 14px; + font-size: 0.875rem; + line-height: 18px; } + +.kuiVerticalRhythm { + margin-bottom: 12px; } + +.kuiVerticalRhythm--xSmall { + margin-bottom: 9px; } + +.kuiVerticalRhythm--small { + margin-bottom: 9px; } + +.kuiVerticalRhythm--large { + margin-bottom: 18px; } + +.kuiVerticalRhythm--xLarge { + margin-bottom: 24px; } + +.kuiVerticalRhythm--xxLarge { + margin-bottom: 36px; } diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework_theme_light.css similarity index 100% rename from ui_framework/dist/ui_framework.css rename to ui_framework/dist/ui_framework_theme_light.css diff --git a/ui_framework/doc_site/src/components/guide_nav/guide_nav.js b/ui_framework/doc_site/src/components/guide_nav/guide_nav.js index 512d0430d9fd3..eda077cf2330a 100644 --- a/ui_framework/doc_site/src/components/guide_nav/guide_nav.js +++ b/ui_framework/doc_site/src/components/guide_nav/guide_nav.js @@ -9,6 +9,11 @@ import { import classNames from 'classnames'; +import { + getTheme, + applyTheme, +} from '../../services'; + export class GuideNav extends Component { constructor(props) { super(props); @@ -21,9 +26,23 @@ export class GuideNav extends Component { search: '', nextRoute, previousRoute, + theme: getTheme(), }; this.onSearchChange = this.onSearchChange.bind(this); + this.onToggleTheme = this.onToggleTheme.bind(this); + } + + onToggleTheme() { + if (getTheme() === 'light') { + applyTheme('dark'); + } else { + applyTheme('light'); + } + + this.setState({ + theme: getTheme(), + }); } onSearchChange(event) { @@ -52,6 +71,30 @@ export class GuideNav extends Component { } renderPagination() { + let hideChromeButton; + + if (this.props.isSandbox) { + hideChromeButton = ( + + ); + } + + const themeButton = ( + + ); + const previousClasses = classNames('guideNavPaginationButton', { 'guideNavPaginationButton-isDisabled': !this.state.previousRoute, }); @@ -78,23 +121,10 @@ export class GuideNav extends Component { ); - let hideChromeButton; - - if (this.props.isSandbox) { - hideChromeButton = ( - - ); - } - return (
{hideChromeButton} + {themeButton} {previousButton} {nextButton}
diff --git a/ui_framework/doc_site/src/index.js b/ui_framework/doc_site/src/index.js index 40131dbcc5205..8a0386242e9c8 100644 --- a/ui_framework/doc_site/src/index.js +++ b/ui_framework/doc_site/src/index.js @@ -1,5 +1,3 @@ -require('./main.scss'); - import 'babel-polyfill'; import React from 'react'; import ReactDOM from 'react-dom'; @@ -21,8 +19,29 @@ import { NotFoundView } from './views/not_found/not_found_view'; import { Routes, + registerTheme, } from './services'; +// Set up themes + +import themeLight from '!style/useable!css!postcss!sass!./theme_light.scss'; +import uiFrameworkThemeLight from '!style/useable!css!../../dist/ui_framework_theme_light.css'; + +registerTheme('light', [ + themeLight, + uiFrameworkThemeLight, +]); + +import themeDark from '!style/useable!css!postcss!sass!./theme_dark.scss'; +import uiFrameworkThemeDark from '!style/useable!css!../../dist/ui_framework_theme_dark.css'; + +registerTheme('dark', [ + themeDark, + uiFrameworkThemeDark, +]); + +// Set up app + const store = configureStore(); const browserHistory = useRouterHistory(createHashHistory)({ queryKey: false, diff --git a/ui_framework/doc_site/src/main.scss b/ui_framework/doc_site/src/main.scss deleted file mode 100644 index 7472366bdd57d..0000000000000 --- a/ui_framework/doc_site/src/main.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "../../dist/ui_framework.css"; -@import "../../src/global_styling/variables/_index.scss"; -@import "./components/guide_components"; diff --git a/ui_framework/doc_site/src/services/index.js b/ui_framework/doc_site/src/services/index.js index eaf038ac29727..5eac545b82c4b 100644 --- a/ui_framework/doc_site/src/services/index.js +++ b/ui_framework/doc_site/src/services/index.js @@ -6,4 +6,10 @@ export { default as JsInjector } from './js_injector/js_injector'; export { default as Routes } from './routes/routes'; +export { + registerTheme, + applyTheme, + getTheme, +} from './theme/theme'; + export { default as Slugify } from './string/slugify'; diff --git a/ui_framework/doc_site/src/services/theme/theme.js b/ui_framework/doc_site/src/services/theme/theme.js new file mode 100644 index 0000000000000..39bd3c2288fd3 --- /dev/null +++ b/ui_framework/doc_site/src/services/theme/theme.js @@ -0,0 +1,23 @@ +let activeTheme; +const themes = {}; + +export function registerTheme(theme, cssFiles) { + themes[theme] = cssFiles; + + if (!activeTheme) { + applyTheme(theme); + } +} + +export function applyTheme(newTheme) { + if (activeTheme) { + themes[activeTheme].forEach(cssFile => cssFile.unuse()); + } + + activeTheme = newTheme; + themes[activeTheme].forEach(cssFile => cssFile.use()); +} + +export function getTheme() { + return activeTheme; +} diff --git a/ui_framework/doc_site/src/theme_dark.scss b/ui_framework/doc_site/src/theme_dark.scss new file mode 100644 index 0000000000000..bc01f657d8203 --- /dev/null +++ b/ui_framework/doc_site/src/theme_dark.scss @@ -0,0 +1,2 @@ +@import "../../src/global_styling/theme_dark_variables"; +@import "./components/guide_components"; diff --git a/ui_framework/doc_site/src/theme_light.scss b/ui_framework/doc_site/src/theme_light.scss new file mode 100644 index 0000000000000..5412befb0525a --- /dev/null +++ b/ui_framework/doc_site/src/theme_light.scss @@ -0,0 +1,3 @@ +@import "../../src/global_styling/theme_light_variables"; +@import "./components/guide_components"; + diff --git a/ui_framework/doc_site/webpack.config.js b/ui_framework/doc_site/webpack.config.js index dc0c471d0a825..7716637c70c8b 100644 --- a/ui_framework/doc_site/webpack.config.js +++ b/ui_framework/doc_site/webpack.config.js @@ -40,6 +40,14 @@ module.exports = { test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass'], exclude: /node_modules/ + }, { + test: /\.css$/, + loaders: ['style', 'css'], + exclude: /node_modules/ + }, { + test: /\.useable\.css$/, + loaders: ['style/useable', 'css'], + exclude: /node_modules/ }, { test: /\.html$/, loader: 'html', diff --git a/ui_framework/src/components/expression/expressionItem.js b/ui_framework/src/components/expression/expressionItem.js new file mode 100644 index 0000000000000..a1e35b625b980 --- /dev/null +++ b/ui_framework/src/components/expression/expressionItem.js @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const KuiExpressionItem = ({ + children, + className, + ...rest +}) => { + const classes = classNames('kuiExpressionItem', className); + + return ( +
+ {children} +
+ ); +}; + +KuiExpressionItem.propTypes = { + children: PropTypes.node, + className: PropTypes.string +}; diff --git a/ui_framework/src/components/expression/expressionItemButton.js b/ui_framework/src/components/expression/expressionItemButton.js new file mode 100644 index 0000000000000..9afbfa390707f --- /dev/null +++ b/ui_framework/src/components/expression/expressionItemButton.js @@ -0,0 +1,35 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const KuiExpressionItemButton = ({ + className, + description, + value, + isActive, + onClick, + ...rest +}) => { + const classes = classNames('kuiExpressionItem__button', className, { + 'kuiExpressionItem__button--isActive': isActive + }); + + return ( + + ); +}; + +KuiExpressionItemButton.propTypes = { + className: PropTypes.string, + description: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + isActive: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired, +}; diff --git a/ui_framework/src/components/expression/expressionItemPopover.js b/ui_framework/src/components/expression/expressionItemPopover.js new file mode 100644 index 0000000000000..3a506583250d4 --- /dev/null +++ b/ui_framework/src/components/expression/expressionItemPopover.js @@ -0,0 +1,98 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +const POPOVER_ALIGN = [ + 'left', + 'right', +]; + +/* +With some modification copy-pasted from +https://stackoverflow.com/questions/32553158/detect-click-outside-react-component +*/ +const outsideClickNotifier = WrappedComponent => class extends React.Component { + constructor(props) { + super(props); + + this.handleClickOutside = this.handleClickOutside.bind(this); + } + + componentDidMount() { + document.addEventListener('mousedown', this.handleClickOutside); + } + + componentWillUnmount() { + document.removeEventListener('mousedown', this.handleClickOutside); + } + + handleClickOutside(event) { + if (!this.wrapperRef) { + return; + } + + if (!this.props.isVisible) { + return; + } + + if ((this.wrapperRef !== event.target) && !this.wrapperRef.contains(event.target)) { + this.props.onOutsideClick(); + } + } + + render() { + const { onOutsideClick, ...rest } = this.props; //eslint-disable-line no-unused-vars + return this.wrapperRef = node} {...rest} />; + } + + static propTypes = { + onOutsideClick: PropTypes.func.isRequired, + isVisible: PropTypes.bool.isRequired, + }; +}; + +let KuiExpressionItemPopover = ({ + className, + title, + isVisible, + children, + rootRef, + align = 'left', + ...rest +}) => { + const classes = classNames('kuiExpressionItem__popover', className, { + 'kuiExpressionItem__popover--isHidden': !isVisible, + 'kuiExpressionItem__popover--alignRight': align === 'right' + }); + return ( +
+
+ {title} +
+
+ {children} +
+
+ ); +}; + +KuiExpressionItemPopover.propTypes = { + className: PropTypes.string, + title: PropTypes.string.isRequired, + isVisible: PropTypes.bool.isRequired, + children: PropTypes.node, + align: PropTypes.oneOf(POPOVER_ALIGN), + //only for outsideClickNotifier + rootRef: PropTypes.func.isRequired, +}; + +KuiExpressionItemPopover = outsideClickNotifier(KuiExpressionItemPopover); + +export { + POPOVER_ALIGN, + KuiExpressionItemPopover +}; diff --git a/ui_framework/src/components/expression/index.js b/ui_framework/src/components/expression/index.js new file mode 100644 index 0000000000000..a206b71bdc14e --- /dev/null +++ b/ui_framework/src/components/expression/index.js @@ -0,0 +1,3 @@ +export { KuiExpressionItem } from './expressionItem'; +export { KuiExpressionItemButton } from './expressionItemButton'; +export { KuiExpressionItemPopover } from './expressionItemPopover'; diff --git a/ui_framework/src/global_styling/core.scss b/ui_framework/src/global_styling/core.scss new file mode 100644 index 0000000000000..e32b58ef58569 --- /dev/null +++ b/ui_framework/src/global_styling/core.scss @@ -0,0 +1,4 @@ +// Core +@import 'mixins/index'; +@import 'reset/index'; +@import 'utilities/index'; diff --git a/ui_framework/src/global_styling/theme_dark_variables.scss b/ui_framework/src/global_styling/theme_dark_variables.scss new file mode 100644 index 0000000000000..2cee29694e8c7 --- /dev/null +++ b/ui_framework/src/global_styling/theme_dark_variables.scss @@ -0,0 +1,14 @@ +// Dark theme overides + +$kuiColorEmptyShade: #222; +$kuiColorLightestShade: #333; +$kuiColorLightShade: #444; +$kuiColorMediumShade: #555; +$kuiColorDarkShade: #D9D9D9; +$kuiColorDarkestShade: #F5F5F5; +$kuiColorFullShade: #FFF; +$kuiColorPrimary: #4da1c0; +$kuiColorDanger: #bf4d4d; + +// Configuration +@import 'variables/index'; diff --git a/ui_framework/src/global_styling/theme_light_variables.scss b/ui_framework/src/global_styling/theme_light_variables.scss new file mode 100644 index 0000000000000..2869d11f876a4 --- /dev/null +++ b/ui_framework/src/global_styling/theme_light_variables.scss @@ -0,0 +1,2 @@ +// Configuration +@import 'variables/index'; diff --git a/ui_framework/src/global_styling/variables/_colors.scss b/ui_framework/src/global_styling/variables/_colors.scss index 841ca00b0bff1..bd35426211707 100644 --- a/ui_framework/src/global_styling/variables/_colors.scss +++ b/ui_framework/src/global_styling/variables/_colors.scss @@ -29,13 +29,13 @@ // Core $kuiColorPrimary: #0079a5 !default; -$kuiColorSecondary: #00A69B; -$kuiColorAccent: #DD0A73; -$kuiColorHighlight: #FFFF00; +$kuiColorSecondary: #00A69B !default; +$kuiColorAccent: #DD0A73 !default; +$kuiColorHighlight: #FFFF00 !default; // Status -$kuiColorDanger: #A30000; -$kuiColorWarning: #E5830E; +$kuiColorDanger: #A30000 !default; +$kuiColorWarning: #E5830E !default; // Grays $kuiColorEmptyShade: #FFF !default; @@ -46,19 +46,6 @@ $kuiColorDarkShade: #666 !default; $kuiColorDarkestShade: #3F3F3F !default; $kuiColorFullShade: #000 !default; - -// Dark theme overides -// $kuiColorEmptyShade: #222; -// $kuiColorLightestShade: #333; -// $kuiColorLightShade: #444; -// $kuiColorMediumShade: #555; -// $kuiColorDarkShade: #D9D9D9; -// $kuiColorDarkestShade: #F5F5F5; -// $kuiColorFullShade: #FFF; -// $kuiColorPrimary: tint($kuiColorPrimary, 30%); -// $kuiColorDanger: tint($kuiColorDanger, 30%); - - // Every color below must be based mathmatically on the set above. $kuiTextColor: $kuiColorDarkestShade; diff --git a/ui_framework/src/index.scss b/ui_framework/src/index.scss deleted file mode 100644 index ec4b0ad6f37ec..0000000000000 --- a/ui_framework/src/index.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Configuration -@import 'global_styling/variables/index'; -@import 'themes/light_theme/index'; - -// Core -@import 'global_styling/mixins/index'; -@import 'global_styling/reset/index'; -@import 'global_styling/utilities/index'; - -// Components -@import 'components/index'; diff --git a/ui_framework/src/theme_dark.scss b/ui_framework/src/theme_dark.scss new file mode 100644 index 0000000000000..554ba27f1e63c --- /dev/null +++ b/ui_framework/src/theme_dark.scss @@ -0,0 +1,8 @@ +// Variables +@import 'global_styling/theme_dark_variables'; + +// Global styling +@import 'global_styling/core'; + +// Components +@import 'components/index'; diff --git a/ui_framework/src/theme_light.scss b/ui_framework/src/theme_light.scss new file mode 100644 index 0000000000000..b43435834f1bf --- /dev/null +++ b/ui_framework/src/theme_light.scss @@ -0,0 +1,8 @@ +// Variables +@import 'global_styling/theme_light_variables'; + +// Global styling +@import 'global_styling/core'; + +// Components +@import 'components/index'; diff --git a/ui_framework/src/themes/light_theme/_index.scss b/ui_framework/src/themes/light_theme/_index.scss deleted file mode 100644 index e69de29bb2d1d..0000000000000