From 690f4714cbae9f2d52410ca56298f7490d40a001 Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Tue, 22 Jan 2019 13:26:49 -0800 Subject: [PATCH] KUI Dark mode (#28975) KUI now ouputs two files, one for dark, one for light. --- packages/kbn-ui-framework/Gruntfile.js | 45 +- packages/kbn-ui-framework/dist/kui_dark.css | 2889 +++++++++++++++++ .../dist/{ui_framework.css => kui_light.css} | 498 +-- .../doc_site/src/components/guide/_guide.scss | 10 +- .../components/guide_code/_guide_code.scss | 4 +- .../guide_code_viewer/_guide_code_viewer.scss | 10 +- .../src/components/guide_components.scss | 16 +- .../components/guide_demo/_guide_demo.scss | 9 +- .../src/components/guide_demo/guide_demo.js | 5 - .../src/components/guide_nav/_guide_nav.scss | 10 +- .../components/guide_page/_guide_page.scss | 8 +- .../src/components/guide_page/guide_page.js | 2 +- .../guide_section/_guide_section.scss | 4 +- .../kbn-ui-framework/doc_site/src/main.scss | 9 +- .../src/views/button/button_example.js | 4 - .../doc_site/src/views/form/form_example.js | 25 - .../doc_site/src/views/link/link_example.js | 5 - .../src/views/local_nav/local_nav_example.js | 36 - .../doc_site/src/views/modal/modal_example.js | 4 - .../doc_site/src/views/tabs/tabs_example.js | 7 - .../src/components/button/_button.scss | 49 +- .../src/components/button/_index.scss | 9 +- .../src/components/expression/_index.scss | 2 +- .../components/form/check_box/_check_box.scss | 17 - .../src/components/form/check_box/_index.scss | 7 + .../components/form/search_input/_index.scss | 2 + .../form/search_input/_search_input.scss | 2 - .../src/components/icon/_index.scss | 2 +- .../src/components/local_nav/_index.scss | 40 +- .../local_nav/_local_breadcrumbs.scss | 4 - .../local_nav/_local_date_picker.scss | 42 - .../components/local_nav/_local_dropdown.scss | 52 +- .../src/components/local_nav/_local_menu.scss | 22 - .../src/components/local_nav/_local_nav.scss | 6 - .../components/local_nav/_local_search.scss | 15 - .../src/components/local_nav/_local_tabs.scss | 13 - .../src/components/menu_button/_index.scss | 28 +- .../components/menu_button/_menu_button.scss | 4 + .../src/components/modal/_index.scss | 13 +- .../src/components/modal/_modal.scss | 20 +- .../src/components/modal/_modal_overlay.scss | 2 +- .../src/components/pager/_pager.scss | 2 +- .../panel_simple/_panel_simple.scss | 5 - .../src/components/popover/_mixins.scss | 6 - .../src/components/popover/_popover.scss | 14 +- .../src/components/table/_index.scss | 4 +- .../src/components/tabs/_index.scss | 10 +- .../src/components/tabs/_tabs.scss | 27 - .../components/tool_bar/_tool_bar_footer.scss | 2 +- .../components/tool_bar/_tool_bar_search.scss | 2 +- .../components/tool_bar/_tool_bar_text.scss | 2 +- .../src/components/typography/_index.scss | 2 +- .../components/typography/_typography.scss | 20 - .../global_styling/mixins/_global_mixins.scss | 46 +- .../src/global_styling/utilities/_index.scss | 0 .../src/global_styling/variables/_colors.scss | 16 +- .../src/global_styling/variables/_index.scss | 1 - .../global_styling/variables/_shadows.scss | 3 - packages/kbn-ui-framework/src/kui_dark.scss | 18 + .../src/{index.scss => kui_light.scss} | 2 - .../src/themes/light_theme/_index.scss | 0 src/ui/public/autoload/styles.js | 2 +- 62 files changed, 3182 insertions(+), 953 deletions(-) create mode 100644 packages/kbn-ui-framework/dist/kui_dark.css rename packages/kbn-ui-framework/dist/{ui_framework.css => kui_light.css} (83%) delete mode 100644 packages/kbn-ui-framework/src/global_styling/utilities/_index.scss delete mode 100644 packages/kbn-ui-framework/src/global_styling/variables/_shadows.scss create mode 100644 packages/kbn-ui-framework/src/kui_dark.scss rename packages/kbn-ui-framework/src/{index.scss => kui_light.scss} (91%) delete mode 100644 packages/kbn-ui-framework/src/themes/light_theme/_index.scss diff --git a/packages/kbn-ui-framework/Gruntfile.js b/packages/kbn-ui-framework/Gruntfile.js index 3012426bb318..8fb1032f30a6 100644 --- a/packages/kbn-ui-framework/Gruntfile.js +++ b/packages/kbn-ui-framework/Gruntfile.js @@ -104,9 +104,14 @@ module.exports = function (grunt) { Promise.all([uiFrameworkWatch(), uiFrameworkServerStart()]).then(done); }); - grunt.registerTask('compileCss', function () { + grunt.registerTask('compileCssLight', function () { const done = this.async(); - uiFrameworkCompile().then(done); + uiFrameworkCompileLight().then(done); + }); + + grunt.registerTask('compileCssDark', function () { + const done = this.async(); + uiFrameworkCompileDark().then(done); }); function uiFrameworkServerStart() { @@ -141,9 +146,36 @@ module.exports = function (grunt) { }); } - function uiFrameworkCompile() { - const src = 'src/index.scss'; - const dest = 'dist/ui_framework.css'; + function uiFrameworkCompileLight() { + const src = 'src/kui_light.scss'; + const dest = 'dist/kui_light.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(); + }); + }); + }); + } + + function uiFrameworkCompileDark() { + const src = 'src/kui_dark.scss'; + const dest = 'dist/kui_dark.css'; return new Promise(resolve => { sass.render({ @@ -175,7 +207,8 @@ module.exports = function (grunt) { grunt.util.spawn({ cmd: isPlatformWindows ? '.\\node_modules\\.bin\\grunt.cmd' : './node_modules/.bin/grunt', args: [ - 'compileCss', + 'compileCssLight', + 'compileCssDark', ], }, (error, result) => { if (error) { diff --git a/packages/kbn-ui-framework/dist/kui_dark.css b/packages/kbn-ui-framework/dist/kui_dark.css new file mode 100644 index 000000000000..a6ff66630647 --- /dev/null +++ b/packages/kbn-ui-framework/dist/kui_dark.css @@ -0,0 +1,2889 @@ +/** + * 2. Account for inner box-shadow style border when in group + * 3. Must supply both values to background-size or some browsers apply the single value to both directions + */ +/** + * 4. Override invalid state with focus state. + */ +/** + * 1. Enforce pointer when there's no href. + * 2. Allow these styles to be applied to a button element. + */ +/** + * 1. Override Bootstrap styles. + */ +/** + * 1. Links can't have a disabled attribute, so they can't support :disabled. + */ +/** + * 1. Links can't have a disabled attribute, so they can't support :enabled. + */ +/** + * 1. Links can't have a disabled attribute, so they can't support :enabled. + */ +/** + * 1. Links can't have a disabled attribute, so they can't support :enabled. + */ +/** + * Nothing fancy, just the basics so we can use this for both regular and static controls. + */ +/** + * 1. Prevent Firefox users from being able to resize textareas to smaller than the min-height. + */ +/** + * We specifically don't include Angular's ng-${state} classes here because we don't want to be tightly + * coupled with Angular. + */ +/** + * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg). + * 2. Make room on right side for the caret. + * 3. Prevent Firefox from showing dotted line around text on focus. + */ +/** + * 1. Setting to inline-block guarantees the same height when applied to both + * button elements and anchor tags. + * 2. Fit MicroButton inside of Table rows without pushing them taller. + */ +/** + * 1. Give Bar a consistent height for when it contains shorter children, and therefore can't + * depend on them to give it the desired height. + */ +/** + * 1. Put 10px of space between each child. + * 2. If there is only one section, align it to the right. If you wanted it aligned right, you + * wouldn't use the Bar in the first place. + * 3. Children in the middle should center their content. + * 4. Fix an IE bug which causes the last child to overflow the container. + * 5. Fixing this bug means we now need to align the children to the right. + */ +:focus:not([class^="eui"]) { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px #222, 0 0 0 2px #4DA1C0; + /* 3 */ } + +/** + * 1. Required for IE11. + */ +main { + display: block; + /* 1 */ } + +.kuiBar { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 30px; + /* 1 */ } + +.kuiBarSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; } + .kuiBarSection:not(:first-child):not(:last-child):not(:only-child) { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + /* 3 */ } + .kuiBarSection:first-child { + margin-left: 0; } + .kuiBarSection:last-child { + margin-right: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + /* 4 */ + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + /* 5 */ } + .kuiBarSection:only-child { + margin-left: auto; + /* 2 */ } + .kuiBarSection > * + * { + margin-left: 10px; + /* 1 */ } + +/** + * 1. Setting to inline-block guarantees the same height when applied to both + * button elements and anchor tags. + * 2. Links can be focused when they're "disabled" (since we're just faking this with a class), but + * at least make them look like they're not focused. + */ +.kuiButton { + display: inline-block; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + padding: 4px 12px 5px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + height: 30px; + text-decoration: none; + border: none; + border-radius: 4px; } + .kuiButton:disabled { + cursor: not-allowed; + opacity: .5; } + a.kuiButton.kuiButton-isDisabled { + cursor: not-allowed; + opacity: .5; } + .kuiButton:enabled:active { + -webkit-transform: translateY(1px); + transform: translateY(1px); } + a.kuiButton:not(.kuiButton-isDisabled):active { + /* 1 */ + -webkit-transform: translateY(1px); + transform: translateY(1px); } + +/** + * 1. Solves whitespace problems introduced by inline elements. + */ +.kuiButton__inner { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + /* 1 */ + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + /* 1 */ } + +.kuiButton--small { + font-size: 12px; + padding: 2px 8px 3px; + height: 22px; } + +.kuiButton--fullWidth { + width: 100%; + text-align: center; } + +.kuiButton--iconText .kuiButton__icon:first-child:not(:only-child) { + margin-right: 8px; } + +.kuiButton--iconText .kuiButton__icon:last-child:not(:only-child) { + margin-left: 8px; } + +.kuiButton--iconText.kuiButton--small .kuiButton__icon:first-child:not(:only-child) { + margin-right: 4px; } + +.kuiButton--iconText.kuiButton--small .kuiButton__icon:last-child:not(:only-child) { + margin-left: 4px; } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--basic { + color: #DDD; + background-color: #242424; } + .kuiButton--basic:not(a):enabled:focus { + color: #DDD; } + a.kuiButton--basic:not(.kuiButton-isDisabled):focus { + /* 1 */ + color: #DDD; } + .kuiButton--basic:enabled:hover { + background-color: #0b0b0b !important; + /* 1 */ } + a.kuiButton--basic:not(.kuiButton-isDisabled):hover { + /* 1 */ + background-color: #0b0b0b !important; + /* 1 */ } + .kuiButton--basic:enabled:active { + background-color: #0b0b0b !important; + /* 1 */ } + a.kuiButton--basic:not(.kuiButton-isDisabled):active { + /* 1 */ + background-color: #0b0b0b !important; + /* 1 */ } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--primary { + color: #FFF; + background-color: #4DA1C0; } + .kuiButton--primary:not(a):enabled:focus { + color: #FFF; } + a.kuiButton--primary:not(.kuiButton-isDisabled):focus { + /* 1 */ + color: #FFF; } + .kuiButton--primary:enabled:hover { + color: #FFF !important; + /* 1 */ + background-color: #3985a1; } + a.kuiButton--primary:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #3985a1; } + .kuiButton--primary:enabled:active { + color: #FFF !important; + /* 1 */ + background-color: #3985a1; } + a.kuiButton--primary:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #3985a1; } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--success { + color: #FFF; + background-color: #017D73; } + .kuiButton--success:not(a):enabled:focus { + color: #FFF; } + a.kuiButton--success:not(.kuiButton-isDisabled):focus { + /* 1 */ + color: #FFF; } + .kuiButton--success:enabled:hover { + color: #FFF !important; + /* 1 */ + background-color: #014a44; } + a.kuiButton--success:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #014a44; } + .kuiButton--success:enabled:active { + color: #FFF !important; + /* 1 */ + background-color: #014a44; } + a.kuiButton--success:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #014a44; } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--danger { + color: #BF4D4D; + border: solid 1px #BF4D4D; } + .kuiButton--danger:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #BF4D4D; + box-shadow: 0 0 0 1px #222, 0 0 0 2px #BF4D4D; + /* 3 */ + color: #BF4D4D; } + a.kuiButton--danger:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #BF4D4D; + box-shadow: 0 0 0 1px #222, 0 0 0 2px #BF4D4D; + /* 3 */ + color: #BF4D4D; } + .kuiButton--danger:enabled:hover { + color: #a03939 !important; + border: solid 1px #a03939; + background-color: rgba(191, 77, 77, 0.1); } + a.kuiButton--danger:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #a03939 !important; + border: solid 1px #a03939; + background-color: rgba(191, 77, 77, 0.1); } + .kuiButton--danger:enabled:active { + color: #a03939 !important; + border: solid 1px #a03939; + background-color: rgba(191, 77, 77, 0.1); } + a.kuiButton--danger:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #a03939 !important; + border: solid 1px #a03939; + background-color: rgba(191, 77, 77, 0.1); } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--warning { + color: #FFF; + background-color: #C06C4C; } + .kuiButton--warning:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #C06C4C; + box-shadow: 0 0 0 1px #222, 0 0 0 2px #C06C4C; + /* 3 */ + color: #FFF; } + a.kuiButton--warning:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #C06C4C; + box-shadow: 0 0 0 1px #222, 0 0 0 2px #C06C4C; + /* 3 */ + color: #FFF; } + .kuiButton--warning:enabled:hover { + color: #FFF !important; + /* 1 */ + background-color: #a15538; } + a.kuiButton--warning:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #a15538; } + .kuiButton--warning:enabled:active { + color: #FFF !important; + /* 1 */ + background-color: #a15538; } + a.kuiButton--warning:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #a15538; } + .kuiButton--warning:disabled { + background-color: #cd8b72; } + a.kuiButton--warning.kuiButton-isDisabled { + background-color: #cd8b72; } + +/** + * 1. Override Bootstrap. + * 2. Override either Bootstrap or Timelion styles. + */ +.kuiButton--hollow { + color: #4DA1C0 !important; + /* 2 */ + background-color: transparent; } + .kuiButton--hollow:enabled:hover { + color: #3985a1 !important; + /* 1 */ + text-decoration: underline; } + a.kuiButton--hollow:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #3985a1 !important; + /* 1 */ + text-decoration: underline; } + .kuiButton--hollow:enabled:active { + color: #3985a1 !important; + /* 1 */ + text-decoration: underline; } + a.kuiButton--hollow:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #3985a1 !important; + /* 1 */ + text-decoration: underline; } + +.kuiButton--secondary { + color: #4DA1C0 !important; + /* 2 */ + border: solid 1px #4DA1C0; } + .kuiButton--secondary:enabled:hover { + color: #3985a1 !important; + /* 1 */ + border: solid 1px #3985a1; + background-color: rgba(77, 161, 192, 0.1); + text-decoration: underline; } + a.kuiButton--secondary:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #3985a1 !important; + /* 1 */ + border: solid 1px #3985a1; + background-color: rgba(77, 161, 192, 0.1); + text-decoration: underline; } + .kuiButton--secondary:enabled:active { + color: #3985a1 !important; + /* 1 */ + border: solid 1px #3985a1; + background-color: rgba(77, 161, 192, 0.1); + text-decoration: underline; } + a.kuiButton--secondary:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #3985a1 !important; + /* 1 */ + border: solid 1px #3985a1; + background-color: rgba(77, 161, 192, 0.1); + text-decoration: underline; } + +.kuiButtonGroup { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .kuiButtonGroup .kuiButton + .kuiButton { + margin-left: 4px; } + +.kuiButtonGroup--united > .kuiButton:not(:first-child):not(:last-child) { + border-radius: 0; } + +.kuiButtonGroup--united > .kuiButton:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + +.kuiButtonGroup--united > .kuiButton:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.kuiButtonGroup--united > .kuiButton:only-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; } + +.kuiButtonGroup--united .kuiButton + .kuiButton { + margin-left: 2px; } + +.kuiButtonGroup--fullWidth { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + .kuiButtonGroup--fullWidth > .kuiButton { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + text-align: center; } + +.eui-textCenter > .kuiButtonGroup, +.text-center > .kuiButtonGroup { + display: inline-block; } + +.kuiCollapseButton { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + padding: 4px; + border: none; + line-height: 1; + font-size: 16px; + color: #DDD !important; + /* 1 */ + cursor: pointer; + opacity: 0.35; } + .kuiCollapseButton:hover { + opacity: 1; } + +.kuiExpression { + padding: 20px; + white-space: nowrap; } + +.kuiExpressionButton { + background-color: transparent; + padding: 5px 0px; + border: none; + border-bottom: dotted 2px #333; + font-size: 14px; + cursor: pointer; } + +.kuiExpressionButton__description { + color: #017D73; + text-transform: uppercase; } + +.kuiExpressionButton__value { + color: #DDD; + text-transform: lowercase; } + +.kuiExpressionButton-isActive { + border-bottom: solid 2px #017D73; } + +/** + * 1. Set inline-block so this wrapper shrinks to fit the input. + */ +.kuiAssistedInput { + display: inline-block; + /* 1 */ + position: relative; } + +/** + * 1. Vertically center the assistance, regardless of its height. + */ +.kuiAssistedInput__assistance { + position: absolute; + right: 12px; + top: 50%; + /* 1 */ + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + /* 1 */ } + +/** + * 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really + * ugly default appearance which we can't customize, so our best option is to give Firefox + * control over the checkbox's appearance. + * 2. Override default styles (possibly from Bootstrap). + */ +.kuiCheckBox { + -webkit-appearance: none; + /* 1 */ + background-color: #1b1b1b; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; + width: 16px; + height: 16px; + line-height: 1.5 !important; + /* 2 */ + margin: 0 !important; + /* 2 */ + font: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; + /* 2 */ + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; + /* 2 */ + font-size: 10px !important; + /* 2 */ + -webkit-transition: background-color 0.1s linear; + transition: background-color 0.1s linear; } + .kuiCheckBox:before { + position: relative; + left: 0.25em; + font-family: FontAwesome; + content: "\F00C"; + font-size: 1em; + opacity: 0; + color: #FFF; + -webkit-transition: opacity 0.1s linear; + transition: opacity 0.1s linear; } + .kuiCheckBox:checked { + border-color: #4DA1C0; + background-color: #4DA1C0; } + .kuiCheckBox:checked:before { + opacity: 1; } + .kuiCheckBox:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px #222, 0 0 0 2px #4DA1C0; + /* 3 */ } + .kuiCheckBox:disabled { + background-color: #1f1f1f !important; + border-color: #1f1f1f !important; + cursor: not-allowed !important; } + +.kuiCheckBoxLabel { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + font-weight: normal !important; + line-height: 1.5; } + +.kuiCheckBoxLabel__text { + font-size: 14px; + margin-left: 8px; } + +/** + * 1. Override Bootstrap. + */ +.kuiLabel { + font-size: 14px; + line-height: 1.5; + font-weight: bold; + margin-bottom: 0; + /* 1 */ } + +.kuiSearchInput { + width: 180px; + display: inline-block; + position: relative; + font-size: 14px; + line-height: 1.5; } + .kuiSearchInput.kuiSearchInput-isInvalid .kuiSearchInput__input { + border-color: #BF4D4D; } + +.kuiSearchInput__icon { + position: absolute; + top: 0.5em; + left: 0.7em; + font-size: 1em; + color: #494E51; } + +/** + * 1. Make space for search icon. + * 2. Expand to fill container. + */ +.kuiSearchInput__input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + padding: 4px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #DDD; + background-color: #1b1b1b; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; + -webkit-transition: border-color 0.1s linear; + transition: border-color 0.1s linear; + min-height: 32px; + /* 1 */ + padding-left: 28px; + /* 1 */ + width: 100%; + /* 2 */ } + .kuiSearchInput__input:invalid { + border-color: #BF4D4D; } + .kuiSearchInput__input:focus { + outline: none; + border-color: #4DA1C0; } + .kuiSearchInput__input:disabled { + opacity: 0.4; + cursor: not-allowed; } + +.kuiSearchInput--small { + width: 60px; } + +.kuiSearchInput--large { + width: 400px; } + +/** + * Avoid setting a width here, so that the width of the options can dynamically set the width. + */ +.kuiSelect { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + padding: 4px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #DDD; + background-color: #1b1b1b; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; + -webkit-transition: border-color 0.1s linear; + transition: border-color 0.1s linear; + min-height: 32px; + /* 1 */ + padding-right: 30px; + /* 2 */ + background-image: url('data:image/svg+xml;utf8,'); + /* 1 */ + background-size: 14px; + background-repeat: no-repeat; + background-position: calc(100% - 8px); + /* 2 */ } + .kuiSelect:invalid { + border-color: #BF4D4D; } + .kuiSelect:focus { + outline: none; + border-color: #4DA1C0; } + .kuiSelect:disabled { + opacity: 0.4; + cursor: not-allowed; } + .kuiSelect:-moz-focusring { + text-shadow: 0 0 0; + /* 3 */ } + .kuiSelect.kuiSelect-isInvalid { + border-color: #BF4D4D; } + .kuiSelect:focus { + -webkit-box-shadow: none; + box-shadow: none; + outline: none; + border-color: #4DA1C0; } + +.kuiSelect--small { + width: 60px; } + +.kuiSelect--medium { + width: 180px; } + +.kuiSelect--large { + width: 400px; } + +/** + * 1. Have the same spatial footprint as the regular input. + */ +.kuiStaticInput { + width: 180px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + padding: 4px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #DDD; + border: 1px solid transparent; + /* 1 */ + background-color: transparent; } + +.kuiTextArea { + width: 180px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + padding: 4px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #DDD; + background-color: #1b1b1b; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; + -webkit-transition: border-color 0.1s linear; + transition: border-color 0.1s linear; + min-height: 32px; + /* 1 */ } + .kuiTextArea:invalid { + border-color: #BF4D4D; } + .kuiTextArea:focus { + outline: none; + border-color: #4DA1C0; } + .kuiTextArea:disabled { + opacity: 0.4; + cursor: not-allowed; } + .kuiTextArea:focus { + -webkit-box-shadow: none; + box-shadow: none; + outline: none; + border-color: #4DA1C0; } + .kuiTextArea.kuiTextArea-isInvalid { + border-color: #BF4D4D; } + +.kuiTextArea--nonResizable { + resize: none; } + +.kuiTextArea--small { + width: 60px; } + +.kuiTextArea--large { + width: 400px; } + +.kuiTextInput { + width: 180px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + padding: 4px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #DDD; + background-color: #1b1b1b; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; + -webkit-transition: border-color 0.1s linear; + transition: border-color 0.1s linear; + min-height: 32px; + /* 1 */ } + .kuiTextInput:invalid { + border-color: #BF4D4D; } + .kuiTextInput:focus { + outline: none; + border-color: #4DA1C0; } + .kuiTextInput:disabled { + opacity: 0.4; + cursor: not-allowed; } + .kuiTextInput.kuiTextInput-isInvalid { + border-color: #BF4D4D; } + +.kuiTextInput--small { + width: 60px; } + +.kuiTextInput--large { + width: 400px; } + +/** + * 1. We may want to put elements in here which have different heights. + */ +.kuiFieldGroup { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + /* 1 */ } + +.kuiFieldGroup--alignTop { + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; } + +.kuiFieldGroupSection { + line-height: 1.5; } + .kuiFieldGroupSection + .kuiFieldGroupSection { + margin-left: 10px; } + +.kuiFieldGroupSection--wide { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + .kuiFieldGroupSection--wide > * { + width: 100%; } + +/** + * 1. Copied from FontAwesome's .fa class. We use a custom class to make it easier to migrate away + * from FontAwesome someday. When we do migrate away, we can just update this definition. + */ +.kuiIcon { + display: inline-block; + /* 1 */ + font: normal normal normal 14px/1 FontAwesome; + /* 1 */ + font-size: inherit; + /* 1 */ + text-rendering: auto; + /* 1 */ + -webkit-font-smoothing: antialiased; + /* 1 */ + -moz-osx-font-smoothing: grayscale; + /* 1 */ } + +.kuiIcon--info { + color: #4DA1C0; } + +.kuiIcon--success { + color: #017D73; } + +.kuiIcon--warning { + color: #C06C4C; } + +.kuiIcon--error { + color: #BF4D4D; } + +.kuiIcon--inactive { + color: #333; } + +.kuiIcon--basic { + color: #8A8A8A; } + +.kuiInfoPanel { + padding: 14px 20px 18px; + line-height: 1.5; + border: 2px solid; } + +/** + * 1. TODO: Pick a hex value instead of making these colors translucent. + */ +.kuiInfoPanel--info { + border-color: rgba(77, 161, 192, 0.25); + /* 1 */ } + +/** + * 1. TODO: Pick a hex value instead of making these colors translucent. + */ +.kuiInfoPanel--success { + border-color: rgba(1, 125, 115, 0.25); + /* 1 */ } + +/** + * 1. TODO: Pick a hex value instead of making these colors translucent. + */ +.kuiInfoPanel--warning { + border-color: rgba(192, 108, 76, 0.25); + /* 1 */ } + +/** + * 1. TODO: Pick a hex value instead of making these colors translucent. + */ +.kuiInfoPanel--error { + border-color: rgba(191, 77, 77, 0.25); + /* 1 */ } + +/** + * 1. Align with first line of title text if it wraps. + */ +.kuiInfoPanelHeader { + 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 */ } + +.kuiInfoPanelHeader__icon { + margin-right: 10px; + font-size: 14px; + line-height: 1.5; } + +.kuiInfoPanelHeader__title { + font-size: 14px; + line-height: 1.5; + font-weight: 700; } + +.kuiInfoPanelBody { + margin-top: 8px; } + .kuiInfoPanelBody > * + * { + margin-top: 8px; } + +.kuiInfoPanelBody__message { + font-size: 14px; + line-height: 1.5; } + +.kuiLink { + color: #4DA1C0; + text-decoration: none; + cursor: pointer; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* 2 */ + background-color: transparent; + /* 2 */ + border: none; + /* 2 */ + font-size: inherit; + /* 2 */ + line-height: inherit; + /* 2 */ } + .kuiLink:visited, .kuiLink:active { + color: #4DA1C0; } + .kuiLink:hover { + color: #3985a1; + text-decoration: underline; } + +/** + * 1. Breadcrumbs are placed in the top-left corner and need to be bumped over + * a bit. + */ +.kuiLocalBreadcrumbs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding-left: 10px; + /* 1 */ + height: 100%; } + +.kuiLocalBreadcrumb { + font-size: 14px; + margin: 0; + font-weight: normal; } + .kuiLocalBreadcrumb + .kuiLocalBreadcrumb { + margin-left: 6px; } + .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before { + content: '/'; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin-right: 4px; + color: #333; } + +/** + * 1. Make it a bit darker to contrast with the gray background. + */ +.kuiLocalBreadcrumb__link { + color: #4DA1C0; + text-decoration: none; + cursor: pointer; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* 2 */ + background-color: transparent; + /* 2 */ + border: none; + /* 2 */ + font-size: inherit; + /* 2 */ + line-height: inherit; + /* 2 */ + color: #4DA1C0; + /* 1 */ + font-size: 14px; } + .kuiLocalBreadcrumb__link:visited, .kuiLocalBreadcrumb__link:active { + color: #4DA1C0; } + .kuiLocalBreadcrumb__link:hover { + color: #3985a1; + text-decoration: underline; } + +.kuiLocalBreadcrumb__emphasis { + font-weight: 700; } + +.kuiDatePicker { + background-color: transparent; + border-collapse: collapse; + border-spacing: 0; + line-height: 1.5; } + +.kuiDatePickerNavigationCell { + padding: 0; } + +.kuiDatePickerNavigation { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-bottom: 4px; } + +/** + * 1. Override inherited styles. + */ +.kuiDatePickerNavigationButton { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border: none; + font-size: 14px; + color: #DDD; + padding: 3px 6px; + border-radius: 4px; } + .kuiDatePickerNavigationButton:hover, .kuiDatePickerNavigationButton:active { + cursor: pointer; + color: #242424; + background-color: #4DA1C0; } + .kuiDatePickerNavigationButton:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0; + /* 3 */ + color: #DDD; + /* 1 */ } + +.kuiDatePickerHeaderCell { + padding: 9px 0; + color: #DDD; + font-size: 14px; + font-weight: bold; + text-align: center; + line-height: 1.2; } + +.kuiDatePickerRowCell { + padding: 0; + text-align: center; + /** + * This state class exists to support weird angular-bootstrap datepicker functionality, + * in which you can't select a day on the "From" calendar if it falls after the selected day in + * the "To" calendar (and vice versa, you can't select a "To" day if it is before the "From" day). + */ } + .kuiDatePickerRowCell.kuiDatePickerRowCell-isBlocked { + cursor: not-allowed; } + .kuiDatePickerRowCell.kuiDatePickerRowCell-isBlocked .kuiDatePickerRowCellContent { + pointer-events: none; } + +/** + * 1. Override inherited styles. + */ +.kuiDatePickerRowCellContent { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + width: 100%; + border: 1px solid transparent; + color: #DDD; + font-size: 14px; + padding: 8px; + border-radius: 4px; + line-height: 1.2; } + .kuiDatePickerRowCellContent:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0; + /* 3 */ + color: #DDD; + /* 1 */ } + .kuiDatePickerRowCellContent:disabled { + pointer-events: none; + opacity: 0.5; } + .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isOtherMonth { + visibility: hidden; + pointer-events: none; } + .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent { + color: #4DA1C0; } + .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected { + background-color: #8A8A8A; + color: #DDD; } + .kuiDatePickerRowCellContent:hover, .kuiDatePickerRowCellContent:active { + cursor: pointer; + color: #242424; + background-color: #4DA1C0; } + +.kuiLocalDropdown { + position: relative; + padding: 10px 10px 14px; + background-color: #242424; + border-bottom: solid 1px #333; + border-top: solid 1px #333; + margin-bottom: 10px; + line-height: 20px; } + +.kuiLocalDropdownCloseButton { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + padding: 4px; + border: none; + line-height: 1; + font-size: 16px; + color: #DDD !important; + /* 1 */ + cursor: pointer; + opacity: 0.35; + position: absolute; + top: 1px; + right: 5px; } + .kuiLocalDropdownCloseButton:hover { + opacity: 1; } + +.kuiLocalDropdownPanels { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.kuiLocalDropdownPanel { + -webkit-box-flex: 1; + -webkit-flex: 1 1 0%; + -ms-flex: 1 1 0%; + flex: 1 1 0%; } + +.kuiLocalDropdownPanel--left { + margin-right: 30px; } + +.kuiLocalDropdownPanel--right { + margin-left: 30px; } + +/** + * 1. Override inherited styles. + */ +.kuiLocalDropdownTitle { + margin-top: 0; + /* 1 */ + margin-bottom: 12px; + font-size: 18px; + color: #DDD; } + +.kuiLocalDropdownSection { + margin-bottom: 16px; } + .kuiLocalDropdownSection:last-child { + margin-bottom: 0; } + +.kuiLocalDropdownHeader { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-bottom: 6px; } + +/** + * 1. Override inherited styles. + */ +.kuiLocalDropdownHeader__label { + font-size: 14px; + font-weight: 700; + margin-bottom: 0; + /* 1 */ + color: #DDD; } + +.kuiLocalDropdownHeader__actions { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.kuiLocalDropdownHeader__action { + color: #4DA1C0; + font-size: 12px; + text-decoration: none; + cursor: pointer; } + .kuiLocalDropdownHeader__action + .kuiLocalDropdownHeader__action { + margin-left: 10px; } + .kuiLocalDropdownHeader__action:hover, .kuiLocalDropdownHeader__action:active { + color: #3985a1; } + +.kuiLocalDropdownInput { + display: block; + width: 100%; + margin-bottom: 12px; + padding: 5px 15px; + font-size: 14px; + color: #DDD; + background-color: #1b1b1b; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; } + .kuiLocalDropdownInput:focus { + border-color: #4DA1C0; } + +.kuiLocalDropdownFormNote { + font-size: 14px; + color: #8A8A8A; } + +.kuiLocalDropdownWarning { + margin-bottom: 16px; + padding: 6px 10px; + font-size: 14px; + color: #DDD; + background-color: #222; + border-left: solid 2px #BF4D4D; } + +.kuiLocalDropdownHelpText { + margin-bottom: 16px; + font-size: 14px; + color: #8A8A8A; } + +.kuiLocalMenu { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + +.kuiLocalMenuItem { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + padding: 0 10px; + font-size: 14px; + background-color: transparent; + color: #DDD; + border: 0; + cursor: pointer; + border-right: solid 1px transparent; + border-left: solid 1px transparent; } + .kuiLocalMenuItem:hover, .kuiLocalMenuItem:focus { + background-color: #4DA1C0; + color: #242424; } + .kuiLocalMenuItem.kuiLocalMenuItem-isSelected { + background-color: #242424; + border-color: #333; + height: calc(100% + 1px); + z-index: 2; + color: #4DA1C0; } + .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:hover, .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:focus { + color: #4DA1C0; } + .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled { + opacity: 0.5; + cursor: not-allowed; } + .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { + background-color: transparent; + color: #DDD; } + +.kuiLocalMenuItem__icon { + margin-right: 5px; + margin-bottom: -1px; } + +/** + * 1. Match height of logo in side bar, but allow it to expand to accommodate + * dropdown. + */ +.kuiLocalNav { + 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-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 69px; + /* 1 */ + color: #DDD; + background-color: #222; + line-height: 1.5; + border-bottom: solid 1px #333; } + +/** + * 1. Allow row to expand if the content is so long that it wraps. + */ +.kuiLocalNavRow { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 29px; + /* 1 */ + line-height: 29px; + /* 1 */ } + +.kuiLocalNavRow__section { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + +/** + * 1. We make this row flex-start because it usually contains a search input, which may expand + * beyond the height of this container. We can't use `align-items: center`, because this would + * cause the search input to overflow both on the top and bottom; `align-items: flex-start` + * makes it only overflow on the bottom. But this means we need to manually center the content + * of this container using padding. + */ +.kuiLocalNavRow--secondary { + padding: 0 10px; + /* 1 */ + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + /* 1 */ } + +.kuiLocalNav__popover { + height: 100%; } + .kuiLocalNav__popover .kuiLocalNav__popoverAnchor { + height: 100%; } + +.kuiLocalSearch { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + margin-bottom: 8px; } + +.kuiLocalSearchInput { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + padding: 4px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #DDD; + background-color: #1b1b1b; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; + -webkit-transition: border-color 0.1s linear; + transition: border-color 0.1s linear; + min-height: 32px; + /* 1 */ + -webkit-box-flex: 1; + -webkit-flex: 1 1 100%; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + border-color: #FFF; + border-color: #333; + border-radius: 4px 0 0 4px; } + .kuiLocalSearchInput:invalid { + border-color: #BF4D4D; } + .kuiLocalSearchInput:focus { + outline: none; + border-color: #4DA1C0; } + .kuiLocalSearchInput:disabled { + opacity: 0.4; + cursor: not-allowed; } + .kuiLocalSearchInput:focus { + -webkit-box-shadow: none; + box-shadow: none; } + .kuiLocalSearchInput.kuiLocalSearchInput-isInvalid { + border-color: #BF4D4D; } + +.kuiLocalSearchInput--secondary { + height: 32px; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + border-radius: 0; + border-left-width: 0; } + +.kuiLocalSearchAssistedInput { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1 1 100%; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + position: relative; } + +/** + * 1. em used for right padding so documentation link and query string + * won't overlap if the user increases their default browser font size + * This is sized for the 'Options' link + */ +.kuiLocalSearchInput, +.kuiLocalSearchAssistedInput__input { + padding-right: 6em; + /* 1 */ } + +/** + * 1. Vertically center the assistance, regardless of its height. + */ +.kuiLocalSearchAssistedInput__assistance { + position: absolute; + right: 6px; + top: 50%; + /* 1 */ + z-index: 2; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + /* 1 */ } + +.kuiLocalSearchSelect { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + padding: 4px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #DDD; + background-color: #1b1b1b; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; + -webkit-transition: border-color 0.1s linear; + transition: border-color 0.1s linear; + min-height: 32px; + /* 1 */ + padding-right: 30px; + /* 2 */ + background-image: url('data:image/svg+xml;utf8,'); + /* 1 */ + background-size: 14px; + background-repeat: no-repeat; + background-position: calc(100% - 8px); + /* 2 */ + border-left-width: 0; + border-radius: 0; } + .kuiLocalSearchSelect:invalid { + border-color: #BF4D4D; } + .kuiLocalSearchSelect:focus { + outline: none; + border-color: #4DA1C0; } + .kuiLocalSearchSelect:disabled { + opacity: 0.4; + cursor: not-allowed; } + .kuiLocalSearchSelect:-moz-focusring { + text-shadow: 0 0 0; + /* 3 */ } + +/** + * 1. Override inherited styles. + */ +.kuiLocalSearchButton { + width: 43px; + height: 32px; + font-size: 14px; + line-height: 0; + /* 1 */ + color: #FFF; + background-color: #4DA1C0; + border: 0; + border-radius: 0 4px 4px 0; } + .kuiLocalSearchButton:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #333, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px #333, 0 0 0 2px #4DA1C0; + /* 3 */ } + +/** + * 1. We want the bottom border on selected tabs to be flush with the bottom of the container. + */ +.kuiLocalTabs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: end; + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; + height: 100%; } + +/** + * 1. Override inherited typographic styles. + */ +.kuiLocalTab { + padding: 5px 0 6px 0; + font-size: 18px; + color: #F5F5F5; + border-bottom: 2px solid transparent; + text-decoration: none; + cursor: pointer; + margin-top: 0 !important; + /* 1 */ + margin-bottom: 0 !important; + /* 1 */ + /** + * 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show + * a regular cursor instead of setting pointer-events: none. + */ } + .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) { + color: #4DA1C0; } + .kuiLocalTab.kuiLocalTab-isSelected { + color: #4DA1C0; + border-bottom-color: #4DA1C0; + cursor: default; } + .kuiLocalTab.kuiLocalTab-isDisabled { + opacity: 0.5; + cursor: default; + /* 1 */ } + .kuiLocalTab + .kuiLocalTab { + margin-left: 15px; } + +.kuiLocalTitle { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + padding-left: 10px; + font-size: 14px; + font-weight: bold; } + +/** + * 1. Allow class to be applied to `ul` and `ol` elements + */ +.kuiMenu { + padding-left: 0; + /* 1 */ } + +.kuiMenu--contained { + border: 1px solid #333; } + .kuiMenu--contained .kuiMenuItem { + padding: 6px 10px; } + +/** + * 1. Allow class to be applied to `li` elements + */ +.kuiMenuItem { + list-style: none; + /* 1 */ + padding: 6px 0; } + .kuiMenuItem + .kuiMenuItem { + border-top: 1px solid #333; } + +/** + * 1. Setting to inline-block guarantees the same height when applied to both + * button elements and anchor tags. + * 2. Disable for Angular. + * 3. Make the button just tall enough to fit inside an Option Layout. + */ +.kuiMenuButton { + display: inline-block; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + padding: 2px 10px; + /* 3 */ + font-size: 12px; + font-weight: 400; + line-height: 1.5; + text-decoration: none; + border: none; + border-radius: 4px; } + .kuiMenuButton:disabled { + cursor: default; + pointer-events: none; + /* 2 */ } + .kuiMenuButton:active:enabled { + -webkit-transform: translateY(1px); + transform: translateY(1px); } + .kuiMenuButton:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px #222, 0 0 0 2px #4DA1C0; + /* 3 */ } + +.kuiMenuButton--iconText .kuiMenuButton__icon:first-child { + margin-right: 4px; } + +.kuiMenuButton--iconText .kuiMenuButton__icon:last-child { + margin-left: 4px; } + +/** + * 1. Override Bootstrap. + * 2. Safari won't respect :enabled:hover/active on links. + */ +.kuiMenuButton--basic { + color: #DDD; + background-color: #222; } + .kuiMenuButton--basic:focus { + color: #DDD !important; + /* 1 */ } + .kuiMenuButton--basic:hover, .kuiMenuButton--basic:active { + /* 2 */ + color: #DDD !important; + /* 1 */ + background-color: #242424; } + .kuiMenuButton--basic:disabled { + color: #494E51; + cursor: not-allowed; } + +/** + * 1. Override Bootstrap. + * 2. Safari won't respect :enabled:hover/active on links. + */ +.kuiMenuButton--primary { + color: #FFF; + background-color: #4DA1C0; } + .kuiMenuButton--primary:focus { + color: #FFF !important; + /* 1 */ } + .kuiMenuButton--primary:hover, .kuiMenuButton--primary:active { + /* 2 */ + color: #FFF !important; + /* 1 */ + background-color: #3985a1; } + .kuiMenuButton--primary:disabled { + background-color: #494E51; + cursor: not-allowed; } + +/** + * 1. Override Bootstrap. + * 2. Safari won't respect :enabled:hover/active on links. + */ +.kuiMenuButton--danger { + color: #FFF; + background-color: #BF4D4D; } + .kuiMenuButton--danger:hover, .kuiMenuButton--danger:active { + /* 2 */ + color: #FFF !important; + /* 1 */ + background-color: #a03939; } + .kuiMenuButton--danger:disabled { + color: #FFF; + background-color: #494E51; + cursor: not-allowed; } + .kuiMenuButton--danger:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #BF4D4D; + box-shadow: 0 0 0 1px #222, 0 0 0 2px #BF4D4D; + /* 3 */ } + +.kuiMenuButtonGroup { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + .kuiMenuButtonGroup .kuiMenuButton + .kuiMenuButton { + margin-left: 4px; } + +.kuiMenuButtonGroup--alignRight { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } + +.kuiModalOverlay { + position: fixed; + z-index: 1000; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -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; + background: rgba(51, 51, 51, 0.8); } + +.kuiModal { + -webkit-box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); + line-height: 1.5; + background-color: #222; + border: 1px solid #333; + border-radius: 4px; + z-index: 1001; + -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); } + +.kuiModal--confirmation { + width: 450px; + min-width: auto; } + +.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; + padding: 10px; + padding-left: 20px; + border-bottom: 1px solid #333; } + +.kuiModalHeader__title { + font-size: 18.0px; } + +.kuiModalHeaderCloseButton { + display: inline-block; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + padding: 2px 5px; + border: 1px solid transparent; + color: #8A8A8A; + background-color: transparent; + line-height: 1; + /* 2 */ + font-size: 18.0px; } + .kuiModalHeaderCloseButton:hover { + color: #DDD; } + +.kuiModalBody { + padding: 20px; } + +.kuiModalBodyText { + font-size: 14px; } + +.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; + padding: 20px; + padding-top: 10px; } + .kuiModalFooter > * + * { + margin-left: 5px; } + +@-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); } } + +/** + * 1. Put 10px of space between each child. + */ +.kuiPager { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .kuiPager > * + * { + margin-left: 10px; + /* 1 */ } + +.kuiPagerText { + font-size: 14px; + line-height: 1.5; + color: #8A8A8A; + white-space: nowrap; + /* 1 */ } + +.kuiPanel { + -webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); + background-color: #222; + border: 1px solid #333; + border-radius: 4px; } + +.kuiPanel--prompt { + 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; + text-align: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + min-height: 300px; } + .kuiPanel--prompt .kuiPanelBody { + padding: 30px; + max-width: 500px; } + +.kuiPanel--noBorder { + border: none; } + +.kuiPanel--withToolBar { + border-top: none; + border-radius: 0; } + +.kuiPanel--centered { + 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; } + +.kuiPanelHeader { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 30px; + /* 1 */ + padding: 10px; + height: 50px; + border-bottom: 1px solid #333; } + .kuiPanelHeader .kuiButton:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #333, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px #333, 0 0 0 2px #4DA1C0; + /* 3 */ } + a.kuiPanelHeader .kuiButton:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #333, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px #333, 0 0 0 2px #4DA1C0; + /* 3 */ } + .kuiPanelHeader .kuiButton--danger:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #333, 0 0 0 2px #BF4D4D; + box-shadow: 0 0 0 1px #333, 0 0 0 2px #BF4D4D; + /* 3 */ } + a.kuiPanelHeader .kuiButton--danger:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #333, 0 0 0 2px #BF4D4D; + box-shadow: 0 0 0 1px #333, 0 0 0 2px #BF4D4D; + /* 3 */ } + .kuiPanelHeader .kuiSelect { + border-color: #1b1b1b; } + .kuiPanelHeader .kuiSelect:not(a):enabled:focus { + outline: none; + border-color: #4DA1C0; } + a.kuiPanelHeader .kuiSelect:not(.kuiButton-isDisabled):focus { + /* 1 */ + outline: none; + border-color: #4DA1C0; } + +/** + * 1. This way we can use h1, h2, etc. + */ +.kuiPanelHeader__title { + font-size: 18.0px; + line-height: 1.5; + margin: 0; + /* 1 */ } + +/** + * 1. Undo what barSection mixin does. + */ +.kuiPanelHeaderSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; } + .kuiPanelHeaderSection:not(:first-child):not(:last-child):not(:only-child) { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + /* 3 */ } + .kuiPanelHeaderSection:first-child { + margin-left: 0; } + .kuiPanelHeaderSection:last-child { + margin-right: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + /* 4 */ + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + /* 5 */ } + .kuiPanelHeaderSection:only-child { + margin-left: auto; + /* 2 */ } + .kuiPanelHeaderSection > * + * { + margin-left: 10px; + /* 1 */ } + .kuiPanelHeaderSection:only-child { + margin-left: 0; + /* 1 */ + margin-right: auto; + /* 1 */ } + +.kuiPanelBody { + padding: 10px; } + +.kuiPanelSimple { + -webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); + background-color: #222; + border: 1px solid #333; + border-radius: 4px; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; } + .kuiPanelSimple.kuiPanelSimple--paddingSmall { + padding: 8px; } + .kuiPanelSimple.kuiPanelSimple--paddingMedium { + padding: 16px; } + .kuiPanelSimple.kuiPanelSimple--paddingLarge { + padding: 24px; } + .kuiPanelSimple.kuiPanelSimple--shadow { + -webkit-box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); + box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); } + .kuiPanelSimple.kuiPanelSimple--flexGrowZero { + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; } + +.kuiPopover { + display: inline-block; + position: relative; } + .kuiPopover.kuiPopover-isOpen .kuiPopover__panel { + opacity: 1; + visibility: visible; + margin-top: 8px; + pointer-events: auto; } + +.kuiPopover__panel { + position: absolute; + z-index: 2000; + top: 100%; + left: 50%; + -webkit-transform: translateX(-50%) translateY(8px) translateZ(0); + transform: translateX(-50%) translateY(8px) translateZ(0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-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; + 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; + pointer-events: none; + margin-top: 24px; } + .kuiPopover__panel: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 #333; } + .kuiPopover__panel: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--withTitle .kuiPopover__panel:after { + border-bottom-color: #242424; } + +.kuiPopover--anchorLeft .kuiPopover__panel { + left: 0; + -webkit-transform: translateX(0%) translateY(8px) translateZ(0); + transform: translateX(0%) translateY(8px) translateZ(0); } + .kuiPopover--anchorLeft .kuiPopover__panel:before, .kuiPopover--anchorLeft .kuiPopover__panel:after { + right: auto; + left: 16px; + margin: 0; } + +.kuiPopover--anchorRight .kuiPopover__panel { + left: 100%; + -webkit-transform: translateX(-100%) translateY(8px) translateZ(0); + transform: translateX(-100%) translateY(8px) translateZ(0); } + .kuiPopover--anchorRight .kuiPopover__panel:before, .kuiPopover--anchorRight .kuiPopover__panel:after { + right: 16px; + left: auto; } + +.kuiPopoverTitle { + background-color: #242424; + border-bottom: 1px solid #333; + padding: 12px; + font-size: 14px; } + +.kuiEmptyTablePrompt { + 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; + padding: 30px; } + +.kuiEmptyTablePrompt__message { + font-size: 18.0px; + color: #8A8A8A; + line-height: 1.5; } + +.kuiEmptyTablePrompt__actions { + margin-top: 10px; } + +.kuiStatusText { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: baseline; + -webkit-align-items: baseline; + -ms-flex-align: baseline; + align-items: baseline; } + +.kuiStatusText--info { + color: #4DA1C0; } + +.kuiStatusText--success { + color: #017D73; } + +.kuiStatusText--warning { + color: #C06C4C; } + +.kuiStatusText--error { + color: #BF4D4D; } + +/** + * 1. Set the image to be the same size as a font icon at 14px. + * 2. We need to cap the height too, in case the icon was designed thin and tall. + */ +.kuiStatusText__icon { + margin-right: 6px; + width: 1.15em; + /* 1 */ + max-height: 1.15em; + /* 2 */ } + +/** + * 1. Make seamless transition from ToolBar to Table header and contained Menu. + * 1. Make seamless transition from Table to ToolBarFooter header. + */ +.kuiControlledTable { + background: #222; } + .kuiControlledTable .kuiTable { + border-top: none; + /* 1 */ } + .kuiControlledTable .kuiToolBarFooter { + border-top: none; + /* 2 */ } + .kuiControlledTable .kuiMenu--contained { + border-top: none; + /* 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 { + width: 100%; + border: 1px solid #333; + border-collapse: collapse; + background-color: #222; } + +/** + * 1. Allow contents of cells to determine table's width. + */ +.kuiTable--fluid { + width: auto; + /* 1 */ } + .kuiTable--fluid .kuiTableHeaderCell, + .kuiTable--fluid .kuiTableRowCell { + max-width: none; + /* 1 */ } + +.kuiTableHeaderCell { + font-size: 14px; + font-weight: 400; + text-align: left; + max-width: 20px; + /* 1 */ + line-height: 1.5; + color: #8A8A8A; } + +.kuiTableHeaderCell__liner { + display: inline-block; + padding: 7px 8px 8px; } + +/** + * 1. Prevent rapid clicking from selecting text. + * 2. Remove native button element styles. + * 3. Make buttons look and behave like table header cells. + */ +.kuiTableHeaderCellButton { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + /* 1 */ + cursor: pointer; + width: 100%; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* 2 */ + background-color: transparent; + /* 2 */ + border: 0; + /* 2 */ + padding: 0; + /* 2 */ + color: inherit; + /* 3 */ + line-height: inherit; + /* 3 */ + font-size: inherit; + /* 3 */ + text-align: inherit; + /* 3 */ } + .kuiTableHeaderCellButton:hover .kuiTableSortIcon { + display: block; + opacity: 1; } + .kuiTableHeaderCellButton .kuiTableHeaderCell__liner { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + +.kuiTableHeaderCell--alignRight { + text-align: right; } + +.kuiTableSortIcon { + display: none; + pointer-events: none; + margin-left: 4px; } + .kuiTableHeaderCellButton-isSorted .kuiTableSortIcon { + display: block; + opacity: 0.4; } + +.kuiTableRow:hover .kuiTableRowHoverReveal { + display: inline-block; } + +.kuiTableRowHoverReveal { + display: none; } + +.kuiTableRowCell { + font-size: 14px; + font-weight: 400; + text-align: left; + max-width: 20px; + /* 1 */ + color: #DDD; + border-top: 1px solid #333; + vertical-align: middle; } + +/** + * 1. Vertically align all children. + * 2. The padding on this div allows the ellipsis to show if the content is truncated. If + * the padding was on the cell, the ellipsis would be cropped. + * 3. Truncate content with an ellipsis. + */ +.kuiTableRowCell__liner { + padding: 7px 8px 8px; + /* 2 */ + line-height: 1.5; + /* 1 */ + overflow: hidden; + /* 3 */ + text-overflow: ellipsis; + /* 3 */ + white-space: nowrap; + /* 3 */ } + .kuiTableRowCell__liner > * { + vertical-align: middle; + /* 1 */ } + +.kuiTableRowCell--wrap .kuiTableRowCell__liner { + white-space: normal; } + +.kuiTableRowCell--overflowingContent .kuiTableRowCell__liner { + overflow: visible; + white-space: normal; } + +/** + * 1. We don't want to create too strong a disconnect between the original row and the row + * that contains its expanded details. + */ +.kuiTableRowCell--expanded { + border-top-color: #222; + /* 1 */ } + +.kuiTableRowCell--alignRight { + text-align: right; } + .kuiTableRowCell--alignRight .kuiTableRowCell__liner { + text-align: right; } + +/** + * 1. Rendered width of cell with checkbox inside of it. + * 2. Align checkbox with text in other cells. + * 3. Show the checkbox in Edge; otherwise it gets cropped. + */ +.kuiTableHeaderCell--checkBox, +.kuiTableRowCell--checkBox { + width: 28px; + /* 1 */ + line-height: 1; + /* 2 */ } + .kuiTableHeaderCell--checkBox .kuiTableRowCell__liner, + .kuiTableRowCell--checkBox .kuiTableRowCell__liner { + overflow: visible; + /* 3 */ } + .kuiTableHeaderCell--checkBox .kuiTableHeaderCell__liner, + .kuiTableHeaderCell--checkBox .kuiTableRowCell__liner, + .kuiTableRowCell--checkBox .kuiTableHeaderCell__liner, + .kuiTableRowCell--checkBox .kuiTableRowCell__liner { + padding-right: 0; } + +.kuiTableInfo { + padding: 30px; + font-size: 18.0px; + color: #8A8A8A; + line-height: 1.5; } + +.kuiTabs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + border-bottom: 1px solid #333; } + +/** + * 1. Override button styles (some of which are from Bootstrap). + * 2. Adding a border shifts tabs right by 1px, so we need to shift them back. + * 3. Move the tab down so that its bottom border covers the container's bottom border. + * 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more + * of padding to make sure the text doesn't shift down. + */ +.kuiTab { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* 1 */ + cursor: pointer; + padding: 10px 30px; + font-size: 14px; + color: #8A8A8A; + background-color: transparent; + /* 1 */ + border: 1px solid #333; + border-radius: 0; + /* 1 */ + margin-bottom: -1px; + /* 3 */ } + .kuiTab + .kuiTab { + border-left: none; } + .kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { + margin-left: -1px; + /* 2 */ } + .kuiTab:active { + outline: none !important; + /* 1 */ + -webkit-box-shadow: none; + box-shadow: none; + /* 1 */ } + .kuiTab:focus { + outline: none; + /* 1 */ } + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { + z-index: 1; + color: #4DA1C0; + border: 1px solid #4DA1C0 !important; } + .kuiTab:hover:not(.kuiTab-isSelected) { + color: #3985a1; + background-color: #242424; } + .kuiTab.kuiTab-isSelected { + cursor: default; + color: #DDD; + background-color: transparent; + border-bottom-color: transparent; } + +/** + * 1. Allow container to determine font-size and line-height. + * 2. Override inherited Bootstrap styles. + */ +.kuiToggleButton { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + background-color: transparent; + border: none; + padding: 0; + font-size: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: #DDD; } + .kuiToggleButton:focus { + color: #DDD; } + .kuiToggleButton:active { + color: #4DA1C0 !important; + /* 2 */ } + .kuiToggleButton:hover:not(:disabled) { + color: #3985a1 !important; + /* 2 */ + text-decoration: underline; } + .kuiToggleButton:disabled { + cursor: not-allowed; + opacity: .5; } + +/** + * 1. Make icon a consistent width so the text doesn't get pushed around as the icon changes + * between "expand" and "collapse". Use ems to be relative to inherited font-size. + */ +.kuiToggleButton__icon { + width: 0.8em; + /* 1 */ } + +.kuiTogglePanelHeader { + padding-bottom: 4px; + margin-bottom: 15px; + border-bottom: 1px solid #333; + /** + * 1. Allow the user to click anywhere on the header, not just on the button text. + */ } + .kuiTogglePanelHeader .kuiToggleButton { + width: 100%; + /* 1 */ + text-align: left; + /* 1 */ } + +.kuiToolBar { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 30px; + /* 1 */ + padding: 10px; + height: 50px; + background-color: transparent; + border: solid 1px #333; } + .kuiToolBar .kuiButton:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #333, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px #333, 0 0 0 2px #4DA1C0; + /* 3 */ } + a.kuiToolBar .kuiButton:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #333, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px #333, 0 0 0 2px #4DA1C0; + /* 3 */ } + .kuiToolBar .kuiButton--danger:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #333, 0 0 0 2px #BF4D4D; + box-shadow: 0 0 0 1px #333, 0 0 0 2px #BF4D4D; + /* 3 */ } + a.kuiToolBar .kuiButton--danger:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + -webkit-box-shadow: 0 0 0 1px #333, 0 0 0 2px #BF4D4D; + box-shadow: 0 0 0 1px #333, 0 0 0 2px #BF4D4D; + /* 3 */ } + .kuiToolBar .kuiSelect { + border-color: #1b1b1b; } + .kuiToolBar .kuiSelect:not(a):enabled:focus { + outline: none; + border-color: #4DA1C0; } + a.kuiToolBar .kuiSelect:not(.kuiButton-isDisabled):focus { + /* 1 */ + outline: none; + border-color: #4DA1C0; } + +.kuiToolBarSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; } + .kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + /* 3 */ } + .kuiToolBarSection:first-child { + margin-left: 0; } + .kuiToolBarSection:last-child { + margin-right: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + /* 4 */ + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + /* 5 */ } + .kuiToolBarSection:only-child { + margin-left: auto; + /* 2 */ } + .kuiToolBarSection > * + * { + margin-left: 10px; + /* 1 */ } + +/** + * 1. Override Bar styles and put Search on the left side. + */ +.kuiToolBar--searchOnly .kuiToolBarSearch { + margin-left: 0 !important; + /* 1 */ } + +.kuiToolBarFooter { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 30px; + /* 1 */ + padding: 10px; + height: 40px; + background-color: #222; } + +.kuiToolBarFooterSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; } + .kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + /* 3 */ } + .kuiToolBarFooterSection:first-child { + margin-left: 0; } + .kuiToolBarFooterSection:last-child { + margin-right: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + /* 4 */ + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + /* 5 */ } + .kuiToolBarFooterSection:only-child { + margin-left: auto; + /* 2 */ } + .kuiToolBarFooterSection > * + * { + margin-left: 10px; + /* 1 */ } + +/** + * 1. Put 10px of space between each child. + * 2. Fix IE11 bug which causes this item to grow too wide when there is only a single + * kuiToolBarSection sibling. + */ +.kuiToolBarSearch { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + margin-left: 25px; + margin-right: 25px; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + max-width: 100%; + /* 2 */ + line-height: 1.5; } + .kuiToolBarSearch:first-child { + margin-left: 0; } + .kuiToolBarSearch:last-child { + margin-right: 0; } + .kuiToolBarSearch > * + * { + margin-left: 10px; + /* 1 */ } + +.kuiToolBarSearchBox { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + position: relative; + font-size: 14px; + max-width: 800px; } + +.kuiToolBarSearchBox__icon { + position: absolute; + top: 0.5em; + left: 0.7em; + font-size: 1em; + color: #ACACAC; } + +/** + * 1. Fix inherited styles (possibly from Bootstrap). + */ +.kuiToolBarSearchBox__input { + width: 100%; + min-width: 200px; + padding: 4px 12px 5px 28px; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + /* 1 */ + background-color: #222; + color: #DDD; + border-radius: 4px; + font-size: 1em; + border: 1px solid #333; + line-height: normal; + /* 1 */ + -webkit-transition: border-color 0.1s linear; + transition: border-color 0.1s linear; } + .kuiToolBarSearchBox__input:focus { + outline: none; + border-color: #4DA1C0; } + +/* + * 1. We don't want the text to take up two lines and overflow the ToolBar. + */ +.kuiToolBarText { + font-size: 14px; + line-height: 1.5; + color: #8A8A8A; + white-space: nowrap; + /* 1 */ } + +/** + * 1. Override h1. + */ +.kuiTitle { + margin: 0; + /* 1 */ + font-weight: 400; + /* 1 */ + font-size: 24px; } + +/** + * 1. Override h2, h3, etc. + */ +.kuiSubTitle { + margin: 0; + /* 1 */ + font-weight: 400; + /* 1 */ + font-size: 18.0px; } + +/** + * 1. Override p. + */ +.kuiTextTitle { + margin: 0; + /* 1 */ + font-weight: 700; + /* 1 */ + line-height: 1.5; + font-size: 14px; } + +/** + * 1. Override p. + */ +.kuiText { + margin: 0; + /* 1 */ + font-weight: 400; + /* 1 */ + line-height: 1.5; + font-size: 14px; } + +.kuiSubText { + margin: 0; + /* 1 */ + font-weight: 400; + /* 1 */ + line-height: 1.5; + font-size: 14px; } + +.kuiSubduedText { + color: #8A8A8A !important; } + +.kuiVerticalRhythm + .kuiVerticalRhythm { + margin-top: 16px; } + +.kuiVerticalRhythmSmall + .kuiVerticalRhythmSmall { + margin-top: 8px; } + +.kuiVerticalRhythmLarge + .kuiVerticalRhythmLarge { + margin-top: 24px; } + +.kuiVerticalRhythmXLarge + .kuiVerticalRhythmXLarge { + margin-top: 32px; } + +.kuiView { + background-color: #FFF; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + +.kuiViewContent { + padding-top: 20px; + padding-bottom: 20px; + width: 100%; } + +.kuiViewContent--constrainedWidth { + width: 100%; + max-width: 1100px; + margin-left: auto; + margin-right: auto; } + +.kuiViewContentItem { + padding-left: 20px; + padding-right: 20px; } diff --git a/packages/kbn-ui-framework/dist/ui_framework.css b/packages/kbn-ui-framework/dist/kui_light.css similarity index 83% rename from packages/kbn-ui-framework/dist/ui_framework.css rename to packages/kbn-ui-framework/dist/kui_light.css index 88fc12e70bed..defffab19bdb 100644 --- a/packages/kbn-ui-framework/dist/ui_framework.css +++ b/packages/kbn-ui-framework/dist/kui_light.css @@ -24,11 +24,6 @@ /** * 1. Links can't have a disabled attribute, so they can't support :enabled. */ -/** - * 1. Make sure outline doesn't get hidden beneath adjacent elements. - * 2. Override inherited styles (possibly from Bootstrap). - * 3. Create an offset box-shadow that follows the contours of the element. - */ /** * Nothing fancy, just the basics so we can use this for both regular and static controls. */ @@ -66,8 +61,8 @@ /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; - box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; + -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4; /* 3 */ } /** @@ -231,42 +226,6 @@ main { /* 1 */ background-color: #d3dce9 !important; /* 1 */ } - .theme-dark .kuiButton--basic { - color: #FFF; - background-color: #9c9c9c; } - .theme-dark .kuiButton--basic:not(a):enabled:focus { - z-index: 1; - /* 1 */ - outline: none !important; - /* 2 */ - -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; - box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; - /* 3 */ - color: #FFF; } - a.theme-dark .kuiButton--basic:not(.kuiButton-isDisabled):focus { - /* 1 */ - z-index: 1; - /* 1 */ - outline: none !important; - /* 2 */ - -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; - box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; - /* 3 */ - color: #FFF; } - .theme-dark .kuiButton--basic:enabled:hover { - background-color: dimgray !important; - /* 1 */ } - a.theme-dark .kuiButton--basic:not(.kuiButton-isDisabled):hover { - /* 1 */ - background-color: dimgray !important; - /* 1 */ } - .theme-dark .kuiButton--basic:enabled:active { - background-color: dimgray !important; - /* 1 */ } - a.theme-dark .kuiButton--basic:not(.kuiButton-isDisabled):active { - /* 1 */ - background-color: dimgray !important; - /* 1 */ } /** * 1. Override Bootstrap. @@ -333,15 +292,14 @@ main { */ .kuiButton--danger { color: #BD271E; - background-color: rgba(255, 255, 255, 0.5); border: solid 1px #BD271E; } .kuiButton--danger:not(a):enabled:focus { z-index: 1; /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; - box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; + -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E; + box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E; /* 3 */ color: #BD271E; } a.kuiButton--danger:not(.kuiButton-isDisabled):focus { @@ -350,42 +308,42 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; - box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; + -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E; + box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E; /* 3 */ color: #BD271E; } .kuiButton--danger:enabled:hover { color: #911e17 !important; - background-color: rgba(250, 225, 224, 0.5); - border: solid 1px #911e17; } + border: solid 1px #911e17; + background-color: rgba(189, 39, 30, 0.1); } a.kuiButton--danger:not(.kuiButton-isDisabled):hover { /* 1 */ color: #911e17 !important; - background-color: rgba(250, 225, 224, 0.5); - border: solid 1px #911e17; } + border: solid 1px #911e17; + background-color: rgba(189, 39, 30, 0.1); } .kuiButton--danger:enabled:active { color: #911e17 !important; - background-color: rgba(250, 225, 224, 0.5); - border: solid 1px #911e17; } + border: solid 1px #911e17; + background-color: rgba(189, 39, 30, 0.1); } a.kuiButton--danger:not(.kuiButton-isDisabled):active { /* 1 */ color: #911e17 !important; - background-color: rgba(250, 225, 224, 0.5); - border: solid 1px #911e17; } + border: solid 1px #911e17; + background-color: rgba(189, 39, 30, 0.1); } /** * 1. Override Bootstrap. */ .kuiButton--warning { color: #FFF; - background-color: #f98100; } + background-color: #F5A700; } .kuiButton--warning:not(a):enabled:focus { z-index: 1; /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #F5A700; - box-shadow: 0 0 0 1px #fff, 0 0 0 2px #F5A700; + -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700; + box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700; /* 3 */ color: #FFF; } a.kuiButton--warning:not(.kuiButton-isDisabled):focus { @@ -394,32 +352,32 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #F5A700; - box-shadow: 0 0 0 1px #fff, 0 0 0 2px #F5A700; + -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700; + box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700; /* 3 */ color: #FFF; } .kuiButton--warning:enabled:hover { color: #FFF !important; /* 1 */ - background-color: #c66700; } + background-color: #c28400; } a.kuiButton--warning:not(.kuiButton-isDisabled):hover { /* 1 */ color: #FFF !important; /* 1 */ - background-color: #c66700; } + background-color: #c28400; } .kuiButton--warning:enabled:active { color: #FFF !important; /* 1 */ - background-color: #c66700; } + background-color: #c28400; } a.kuiButton--warning:not(.kuiButton-isDisabled):active { /* 1 */ color: #FFF !important; /* 1 */ - background-color: #c66700; } + background-color: #c28400; } .kuiButton--warning:disabled { - background-color: #ff9a2d; } + background-color: #ffbb29; } a.kuiButton--warning.kuiButton-isDisabled { - background-color: #ff9a2d; } + background-color: #ffbb29; } /** * 1. Override Bootstrap. @@ -429,67 +387,55 @@ main { color: #006BB4 !important; /* 2 */ background-color: transparent; } - .theme-dark .kuiButton--hollow { - color: #4DA1C0 !important; - /* 2 */ } .kuiButton--hollow:enabled:hover { color: #004d81 !important; /* 1 */ text-decoration: underline; } - .theme-dark .kuiButton--hollow:enabled:hover { - color: #def2f6 !important; - /* 2 */ } a.kuiButton--hollow:not(.kuiButton-isDisabled):hover { /* 1 */ color: #004d81 !important; /* 1 */ text-decoration: underline; } - .theme-dark a.kuiButton--hollow:not(.kuiButton-isDisabled):hover { - color: #def2f6 !important; - /* 2 */ } .kuiButton--hollow:enabled:active { color: #004d81 !important; /* 1 */ text-decoration: underline; } - .theme-dark .kuiButton--hollow:enabled:active { - color: #def2f6 !important; - /* 2 */ } a.kuiButton--hollow:not(.kuiButton-isDisabled):active { /* 1 */ color: #004d81 !important; /* 1 */ text-decoration: underline; } - .theme-dark a.kuiButton--hollow:not(.kuiButton-isDisabled):active { - color: #def2f6 !important; - /* 2 */ } .kuiButton--secondary { color: #006BB4 !important; /* 2 */ - border: solid 1px #006BB4; - background-color: rgba(255, 255, 255, 0.5); } + border: solid 1px #006BB4; } .kuiButton--secondary:enabled:hover { color: #004d81 !important; /* 1 */ border: solid 1px #004d81; - background-color: rgba(180, 225, 255, 0.5); } + background-color: rgba(0, 107, 180, 0.1); + text-decoration: underline; } a.kuiButton--secondary:not(.kuiButton-isDisabled):hover { /* 1 */ color: #004d81 !important; /* 1 */ border: solid 1px #004d81; - background-color: rgba(180, 225, 255, 0.5); } + background-color: rgba(0, 107, 180, 0.1); + text-decoration: underline; } .kuiButton--secondary:enabled:active { color: #004d81 !important; /* 1 */ border: solid 1px #004d81; - background-color: rgba(180, 225, 255, 0.5); } + background-color: rgba(0, 107, 180, 0.1); + text-decoration: underline; } a.kuiButton--secondary:not(.kuiButton-isDisabled):active { /* 1 */ color: #004d81 !important; /* 1 */ border: solid 1px #004d81; - background-color: rgba(180, 225, 255, 0.5); } + background-color: rgba(0, 107, 180, 0.1); + text-decoration: underline; } .kuiButtonGroup { display: -webkit-box; @@ -554,9 +500,6 @@ main { opacity: 0.35; } .kuiCollapseButton:hover { opacity: 1; } - .theme-dark .kuiCollapseButton { - color: #DDD !important; - /* 1 */ } .kuiExpression { padding: 20px; @@ -610,8 +553,8 @@ main { .kuiCheckBox { -webkit-appearance: none; /* 1 */ - background-color: #FFF; - border: 1px solid #BEBEBE; + background-color: #fbfcfd; + border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; width: 16px; height: 16px; @@ -619,9 +562,9 @@ main { /* 2 */ margin: 0 !important; /* 2 */ - font: "Open Sans", Helvetica, Arial, sans-serif !important; + font: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; /* 2 */ - font-family: "Open Sans", Helvetica, Arial, sans-serif !important; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; /* 2 */ font-size: 10px !important; /* 2 */ @@ -647,18 +590,13 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; - box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; + -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4; /* 3 */ } .kuiCheckBox:disabled { - background-color: #D3DAE6 !important; - border-color: #D3DAE6 !important; + background-color: #eef2f7 !important; + border-color: #eef2f7 !important; cursor: not-allowed !important; } - .theme-dark .kuiCheckBox { - background-color: #1b1b1b; - border-color: #1b1b1b; } - .theme-dark .kuiCheckBox:checked { - background-color: #006BB4; } .kuiCheckBoxLabel { display: -webkit-box; @@ -700,7 +638,7 @@ main { top: 0.5em; left: 0.7em; font-size: 1em; - color: #ACACAC; } + color: #98A2B3; } /** * 1. Make space for search icon. @@ -710,13 +648,13 @@ main { -webkit-appearance: none; -moz-appearance: none; appearance: none; - font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #2D2D2D; - background-color: #ffffff; + background-color: #fbfcfd; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; -webkit-transition: border-color 0.1s linear; @@ -727,8 +665,6 @@ main { /* 1 */ width: 100%; /* 2 */ } - .theme-dark .kuiSearchInput__input { - color: #DDD; } .kuiSearchInput__input:invalid { border-color: #BD271E; } .kuiSearchInput__input:focus { @@ -737,12 +673,6 @@ main { .kuiSearchInput__input:disabled { opacity: 0.4; cursor: not-allowed; } - .theme-dark .kuiSearchInput__input { - background-color: #1b1b1b; - border-color: #333; } - .theme-dark .kuiSearchInput__input:focus { - outline: none; - border-color: #006BB4; } .kuiSearchInput--small { width: 60px; } @@ -757,13 +687,13 @@ main { -webkit-appearance: none; -moz-appearance: none; appearance: none; - font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #2D2D2D; - background-color: #ffffff; + background-color: #fbfcfd; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; -webkit-transition: border-color 0.1s linear; @@ -778,8 +708,6 @@ main { background-repeat: no-repeat; background-position: calc(100% - 8px); /* 2 */ } - .theme-dark .kuiSelect { - color: #DDD; } .kuiSelect:invalid { border-color: #BD271E; } .kuiSelect:focus { @@ -788,18 +716,9 @@ main { .kuiSelect:disabled { opacity: 0.4; cursor: not-allowed; } - .theme-dark .kuiSelect { - background-color: #1b1b1b; - border-color: #333; } - .theme-dark .kuiSelect:focus { - outline: none; - border-color: #006BB4; } .kuiSelect:-moz-focusring { text-shadow: 0 0 0; /* 3 */ } - .theme-dark .kuiSelect { - background-image: url('data:image/svg+xml;utf8,'); - /* 1 */ } .kuiSelect.kuiSelect-isInvalid { border-color: #BD271E; } .kuiSelect:focus { @@ -825,7 +744,7 @@ main { -webkit-appearance: none; -moz-appearance: none; appearance: none; - font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 4px 12px 4px; font-size: 14px; font-weight: 400; @@ -834,29 +753,25 @@ main { border: 1px solid transparent; /* 1 */ background-color: transparent; } - .theme-dark .kuiStaticInput { - color: #DDD; } .kuiTextArea { width: 180px; -webkit-appearance: none; -moz-appearance: none; appearance: none; - font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #2D2D2D; - background-color: #ffffff; + background-color: #fbfcfd; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; min-height: 32px; /* 1 */ } - .theme-dark .kuiTextArea { - color: #DDD; } .kuiTextArea:invalid { border-color: #BD271E; } .kuiTextArea:focus { @@ -865,12 +780,6 @@ main { .kuiTextArea:disabled { opacity: 0.4; cursor: not-allowed; } - .theme-dark .kuiTextArea { - background-color: #1b1b1b; - border-color: #333; } - .theme-dark .kuiTextArea:focus { - outline: none; - border-color: #006BB4; } .kuiTextArea:focus { -webkit-box-shadow: none; box-shadow: none; @@ -893,21 +802,19 @@ main { -webkit-appearance: none; -moz-appearance: none; appearance: none; - font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #2D2D2D; - background-color: #ffffff; + background-color: #fbfcfd; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; min-height: 32px; /* 1 */ } - .theme-dark .kuiTextInput { - color: #DDD; } .kuiTextInput:invalid { border-color: #BD271E; } .kuiTextInput:focus { @@ -916,12 +823,6 @@ main { .kuiTextInput:disabled { opacity: 0.4; cursor: not-allowed; } - .theme-dark .kuiTextInput { - background-color: #1b1b1b; - border-color: #333; } - .theme-dark .kuiTextInput:focus { - outline: none; - border-color: #006BB4; } .kuiTextInput.kuiTextInput-isInvalid { border-color: #BD271E; } @@ -998,7 +899,7 @@ main { color: #D3DAE6; } .kuiIcon--basic { - color: #565656; } + color: #69707D; } .kuiInfoPanel { padding: 14px 20px 18px; @@ -1088,10 +989,6 @@ main { .kuiLink:hover { color: #004d81; text-decoration: underline; } - .theme-dark .kuiLink { - color: #4DA1C0; } - .theme-dark .kuiLink:hover { - color: #4DA1C0; } /** * 1. Breadcrumbs are placed in the top-left corner and need to be bumped over @@ -1123,9 +1020,7 @@ main { -ms-user-select: none; user-select: none; margin-right: 4px; - color: #5a5a5a; } - .theme-dark .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before { - color: #a5a5a5; } + color: #D3DAE6; } /** * 1. Make it a bit darker to contrast with the gray background. @@ -1155,10 +1050,6 @@ main { .kuiLocalBreadcrumb__link:hover { color: #004d81; text-decoration: underline; } - .theme-dark .kuiLocalBreadcrumb__link { - color: #4DA1C0; } - .theme-dark .kuiLocalBreadcrumb__link:hover { - color: #4DA1C0; } .kuiLocalBreadcrumb__emphasis { font-weight: 700; } @@ -1214,21 +1105,6 @@ main { /* 3 */ color: #2D2D2D; /* 1 */ } - .theme-dark .kuiDatePickerNavigationButton { - color: #dedede; } - .theme-dark .kuiDatePickerNavigationButton:hover, .theme-dark .kuiDatePickerNavigationButton:active { - color: #ffffff; - background-color: rgba(0, 0, 0, 0.4); } - .theme-dark .kuiDatePickerNavigationButton:focus { - z-index: 1; - /* 1 */ - outline: none !important; - /* 2 */ - -webkit-box-shadow: 0 0 0 1px #525252, 0 0 0 2px #006BB4; - box-shadow: 0 0 0 1px #525252, 0 0 0 2px #006BB4; - /* 3 */ - color: #dedede; - /* 1 */ } .kuiDatePickerHeaderCell { padding: 9px 0; @@ -1237,8 +1113,6 @@ main { font-weight: bold; text-align: center; line-height: 1.2; } - .theme-dark .kuiDatePickerHeaderCell { - color: #DDD; } .kuiDatePickerRowCell { padding: 0; @@ -1287,29 +1161,12 @@ main { .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent { color: #006BB4; } .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected { - background-color: #777777; - color: #ffffff; } + background-color: #69707D; + color: #2D2D2D; } .kuiDatePickerRowCellContent:hover, .kuiDatePickerRowCellContent:active { cursor: pointer; color: #F5F7FA; background-color: #006BB4; } - .theme-dark .kuiDatePickerRowCellContent { - color: #DDD; } - .theme-dark .kuiDatePickerRowCellContent:focus { - z-index: 1; - /* 1 */ - outline: none !important; - /* 2 */ - -webkit-box-shadow: 0 0 0 1px #525252, 0 0 0 2px #006BB4; - box-shadow: 0 0 0 1px #525252, 0 0 0 2px #006BB4; - /* 3 */ } - .theme-dark .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent { - color: #4DA1C0; } - .theme-dark .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected { - color: #ffffff; } - .theme-dark .kuiDatePickerRowCellContent:hover, .theme-dark .kuiDatePickerRowCellContent:active { - color: #ffffff; - background-color: rgba(0, 0, 0, 0.4); } .kuiLocalDropdown { position: relative; @@ -1319,9 +1176,6 @@ main { border-top: solid 1px #D3DAE6; margin-bottom: 10px; line-height: 20px; } - .theme-dark .kuiLocalDropdown { - background-color: #525252; - border-color: #090909; } .kuiLocalDropdownCloseButton { -webkit-appearance: none; @@ -1341,12 +1195,6 @@ main { right: 5px; } .kuiLocalDropdownCloseButton:hover { opacity: 1; } - .theme-dark .kuiLocalDropdownCloseButton { - color: #DDD !important; - /* 1 */ } - .theme-dark .kuiLocalDropdownCloseButton { - color: #DDD !important; - /* 1 */ } .kuiLocalDropdownPanels { display: -webkit-box; @@ -1375,8 +1223,6 @@ main { margin-bottom: 12px; font-size: 18px; color: #2D2D2D; } - .theme-dark .kuiLocalDropdownTitle { - color: #DDD; } .kuiLocalDropdownSection { margin-bottom: 16px; } @@ -1407,8 +1253,6 @@ main { margin-bottom: 0; /* 1 */ color: #2D2D2D; } - .theme-dark .kuiLocalDropdownHeader__label { - color: #DDD; } .kuiLocalDropdownHeader__actions { display: -webkit-box; @@ -1425,10 +1269,6 @@ main { margin-left: 10px; } .kuiLocalDropdownHeader__action:hover, .kuiLocalDropdownHeader__action:active { color: #004d81; } - .theme-dark .kuiLocalDropdownHeader__action { - color: #4DA1C0; } - .theme-dark .kuiLocalDropdownHeader__action:hover, .theme-dark .kuiLocalDropdownHeader__action:active { - color: #def2f6; } .kuiLocalDropdownInput { display: block; @@ -1437,40 +1277,28 @@ main { padding: 5px 15px; font-size: 14px; color: #2D2D2D; - background-color: #FFF; - border: 1px solid #D3DAE6; + background-color: #fbfcfd; + border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; } .kuiLocalDropdownInput:focus { border-color: #006BB4; } - .theme-dark .kuiLocalDropdownInput { - color: #DDD; - background-color: #1b1b1b; - border-color: #333; } - .theme-dark .kuiLocalDropdownInput:focus { - border-color: #006BB4; } .kuiLocalDropdownFormNote { font-size: 14px; - color: #737373; } - .theme-dark .kuiLocalDropdownFormNote { - color: #a2a2a2; } + color: #69707D; } .kuiLocalDropdownWarning { margin-bottom: 16px; padding: 6px 10px; font-size: 14px; color: #2D2D2D; - background-color: #FFF; } - .theme-dark .kuiLocalDropdownWarning { - color: #DDD; - background-color: #636363; } + background-color: #FFF; + border-left: solid 2px #BD271E; } .kuiLocalDropdownHelpText { margin-bottom: 16px; font-size: 14px; - color: #2D2D2D; } - .theme-dark .kuiLocalDropdownHelpText { - color: #9e9e9e; } + color: #69707D; } .kuiLocalMenu { display: -webkit-box; @@ -1517,18 +1345,6 @@ main { .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { background-color: transparent; color: #2D2D2D; } - .theme-dark .kuiLocalMenuItem { - color: #dedede; } - .theme-dark .kuiLocalMenuItem:hover { - background-color: #000000; - color: #ffffff; } - .theme-dark .kuiLocalMenuItem.kuiLocalMenuItem-isSelected { - background-color: #525252; - border-color: #090909; - color: #ffffff; } - .theme-dark .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { - background-color: transparent; - color: #dedede; } .kuiLocalMenuItem__icon { margin-right: 5px; @@ -1558,10 +1374,6 @@ main { background-color: #FFF; line-height: 1.5; border-bottom: solid 1px #D3DAE6; } - .theme-dark .kuiLocalNav { - color: #DDD; - background-color: #222; - border-color: #090909; } /** * 1. Allow row to expand if the content is so long that it wraps. @@ -1627,13 +1439,13 @@ main { -webkit-appearance: none; -moz-appearance: none; appearance: none; - font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #2D2D2D; - background-color: #ffffff; + background-color: #fbfcfd; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; -webkit-transition: border-color 0.1s linear; @@ -1644,11 +1456,9 @@ main { -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; - border-color: #ffffff; + border-color: #FFF; border-color: #D3DAE6; border-radius: 4px 0 0 4px; } - .theme-dark .kuiLocalSearchInput { - color: #DDD; } .kuiLocalSearchInput:invalid { border-color: #BD271E; } .kuiLocalSearchInput:focus { @@ -1657,17 +1467,11 @@ main { .kuiLocalSearchInput:disabled { opacity: 0.4; cursor: not-allowed; } - .theme-dark .kuiLocalSearchInput { - background-color: #1b1b1b; - border-color: #333; } - .theme-dark .kuiLocalSearchInput:focus { - outline: none; - border-color: #006BB4; } .kuiLocalSearchInput:focus { -webkit-box-shadow: none; box-shadow: none; } .kuiLocalSearchInput.kuiLocalSearchInput-isInvalid { - border-color: #e74C3c; } + border-color: #BD271E; } .kuiLocalSearchInput--secondary { height: 32px; @@ -1677,10 +1481,6 @@ main { flex: 0 0 auto; border-radius: 0; border-left-width: 0; } - .theme-dark .kuiLocalSearchInput--secondary { - border-left-width: 1px; - border-left-color: #222; - border-right-color: #222; } .kuiLocalSearchAssistedInput { display: -webkit-box; @@ -1720,13 +1520,13 @@ main { -webkit-appearance: none; -moz-appearance: none; appearance: none; - font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 4px 12px 4px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #2D2D2D; - background-color: #ffffff; + background-color: #fbfcfd; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; -webkit-transition: border-color 0.1s linear; @@ -1743,8 +1543,6 @@ main { /* 2 */ border-left-width: 0; border-radius: 0; } - .theme-dark .kuiLocalSearchSelect { - color: #DDD; } .kuiLocalSearchSelect:invalid { border-color: #BD271E; } .kuiLocalSearchSelect:focus { @@ -1753,18 +1551,9 @@ main { .kuiLocalSearchSelect:disabled { opacity: 0.4; cursor: not-allowed; } - .theme-dark .kuiLocalSearchSelect { - background-color: #1b1b1b; - border-color: #333; } - .theme-dark .kuiLocalSearchSelect:focus { - outline: none; - border-color: #006BB4; } .kuiLocalSearchSelect:-moz-focusring { text-shadow: 0 0 0; /* 3 */ } - .theme-dark .kuiLocalSearchSelect { - background-image: url('data:image/svg+xml;utf8,'); - /* 1 */ } /** * 1. Override inherited styles. @@ -1775,8 +1564,8 @@ main { font-size: 14px; line-height: 0; /* 1 */ - color: #ffffff; - background-color: #69707D; + color: #FFF; + background-color: #006BB4; border: 0; border-radius: 0 4px 4px 0; } .kuiLocalSearchButton:focus { @@ -1787,17 +1576,6 @@ main { -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; /* 3 */ } - .theme-dark .kuiLocalSearchButton { - color: #ffffff; - background-color: #777777; } - .theme-dark .kuiLocalSearchButton:focus { - z-index: 1; - /* 1 */ - outline: none !important; - /* 2 */ - -webkit-box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; - box-shadow: 0 0 0 1px #222, 0 0 0 2px #006BB4; - /* 3 */ } /** * 1. We want the bottom border on selected tabs to be flush with the bottom of the container. @@ -1833,23 +1611,16 @@ main { */ } .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) { color: #006BB4; } - .theme-dark .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .theme-dark .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) { - color: #ffffff; } .kuiLocalTab.kuiLocalTab-isSelected { color: #006BB4; border-bottom-color: #006BB4; cursor: default; } - .theme-dark .kuiLocalTab.kuiLocalTab-isSelected { - color: #ffffff; - border-bottom-color: #ffffff; } .kuiLocalTab.kuiLocalTab-isDisabled { opacity: 0.5; cursor: default; /* 1 */ } .kuiLocalTab + .kuiLocalTab { margin-left: 15px; } - .theme-dark .kuiLocalTab { - color: #dedede; } .kuiLocalTitle { display: -webkit-box; @@ -1920,8 +1691,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; - box-shadow: 0 0 0 1px #fff, 0 0 0 2px #006BB4; + -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4; /* 3 */ } .kuiMenuButton--iconText .kuiMenuButton__icon:first-child { @@ -1935,58 +1706,62 @@ main { * 2. Safari won't respect :enabled:hover/active on links. */ .kuiMenuButton--basic { - color: #5a5a5a; - background-color: #ffffff; } + color: #2D2D2D; + background-color: #FFF; } .kuiMenuButton--basic:focus { - color: #5a5a5a !important; + color: #2D2D2D !important; /* 1 */ } .kuiMenuButton--basic:hover, .kuiMenuButton--basic:active { /* 2 */ - color: #5a5a5a !important; + color: #2D2D2D !important; /* 1 */ - background-color: #F2F2F2; } + background-color: #F5F7FA; } .kuiMenuButton--basic:disabled { - color: #9B9B9B; } + color: #98A2B3; + cursor: not-allowed; } /** * 1. Override Bootstrap. * 2. Safari won't respect :enabled:hover/active on links. */ .kuiMenuButton--primary { - color: #ffffff; + color: #FFF; background-color: #006BB4; } .kuiMenuButton--primary:focus { - color: #ffffff !important; + color: #FFF !important; /* 1 */ } .kuiMenuButton--primary:hover, .kuiMenuButton--primary:active { /* 2 */ - color: #ffffff !important; + color: #FFF !important; /* 1 */ - background-color: #006E8A; } + background-color: #004d81; } .kuiMenuButton--primary:disabled { - background-color: #B6D6E0; } + background-color: #98A2B3; + cursor: not-allowed; } /** * 1. Override Bootstrap. * 2. Safari won't respect :enabled:hover/active on links. */ .kuiMenuButton--danger { - color: #D76051; - background-color: #ffffff; } + color: #FFF; + background-color: #BD271E; } .kuiMenuButton--danger:hover, .kuiMenuButton--danger:active { /* 2 */ - color: #FFFFFF !important; + color: #FFF !important; /* 1 */ - background-color: #D76051; } + background-color: #911e17; } .kuiMenuButton--danger:disabled { - color: #9B9B9B; } + color: #FFF; + background-color: #98A2B3; + cursor: not-allowed; } .kuiMenuButton--danger:focus { z-index: 1; /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; - box-shadow: 0 0 0 1px #fff, 0 0 0 2px #BD271E; + -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E; + box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E; /* 3 */ } .kuiMenuButtonGroup { @@ -2023,23 +1798,18 @@ main { -ms-flex-pack: center; justify-content: center; padding-bottom: 10vh; - background-color: rgba(0, 0, 0, 0.5); } + background: rgba(255, 255, 255, 0.8); } .kuiModal { - -webkit-box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); - box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0 12px 24px 0 rgba(65, 78, 101, 0.1), 0 6px 12px 0 rgba(65, 78, 101, 0.1), 0 4px 4px 0 rgba(65, 78, 101, 0.1), 0 2px 2px 0 rgba(65, 78, 101, 0.1); + box-shadow: 0 12px 24px 0 rgba(65, 78, 101, 0.1), 0 6px 12px 0 rgba(65, 78, 101, 0.1), 0 4px 4px 0 rgba(65, 78, 101, 0.1), 0 2px 2px 0 rgba(65, 78, 101, 0.1); line-height: 1.5; background-color: #FFF; border: 1px solid #D3DAE6; border-radius: 4px; - -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); z-index: 1001; -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); } - .theme-dark .kuiModal { - background-color: #525252; - border-color: #000; } .kuiModal--confirmation { width: 450px; @@ -2061,13 +1831,9 @@ main { padding: 10px; padding-left: 20px; border-bottom: 1px solid #D3DAE6; } - .theme-dark .kuiModalHeader { - border-bottom-color: #000; } .kuiModalHeader__title { font-size: 18.0px; } - .theme-dark .kuiModalHeader__title { - color: #DDD; } .kuiModalHeaderCloseButton { display: inline-block; @@ -2091,8 +1857,6 @@ main { .kuiModalBodyText { font-size: 14px; } - .theme-dark .kuiModalBodyText { - color: #DDD; } .kuiModalFooter { display: -webkit-box; @@ -2147,7 +1911,7 @@ main { .kuiPagerText { font-size: 14px; line-height: 1.5; - color: #5A5A5A; + color: #69707D; white-space: nowrap; /* 1 */ } @@ -2256,7 +2020,7 @@ main { box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; /* 3 */ } .kuiPanelHeader .kuiSelect { - border-color: #ffffff; } + border-color: #fbfcfd; } .kuiPanelHeader .kuiSelect:not(a):enabled:focus { outline: none; border-color: #006BB4; } @@ -2351,9 +2115,6 @@ main { -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; } - .theme-dark .kuiPanelSimple { - background-color: #222; - border-color: #333; } .kuiPopover { display: inline-block; @@ -2392,8 +2153,6 @@ main { border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid #D3DAE6; } - .theme-dark .kuiPopover__panel:before { - border-bottom-color: #333; } .kuiPopover__panel:after { position: absolute; content: ""; @@ -2405,14 +2164,10 @@ main { width: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; - border-bottom: 16px solid #ffffff; } - .theme-dark .kuiPopover__panel:after { - border-bottom-color: #222; } + border-bottom: 16px solid #FFF; } .kuiPopover--withTitle .kuiPopover__panel:after { border-bottom-color: #F5F7FA; } - .theme-dark .kuiPopover--withTitle .kuiPopover__panel:after { - border-bottom-color: #222; } .kuiPopover--anchorLeft .kuiPopover__panel { left: 0; @@ -2436,10 +2191,6 @@ main { border-bottom: 1px solid #D3DAE6; padding: 12px; font-size: 14px; } - .theme-dark .kuiPopoverTitle { - background-color: #222; - border-color: #333; - color: #ffffff; } .kuiEmptyTablePrompt { display: -webkit-box; @@ -2655,7 +2406,7 @@ main { * that contains its expanded details. */ .kuiTableRowCell--expanded { - border-top-color: #f0f0f0; + border-top-color: #FFF; /* 1 */ } .kuiTableRowCell--alignRight { @@ -2696,8 +2447,6 @@ main { display: -ms-flexbox; display: flex; border-bottom: 1px solid #D3DAE6; } - .theme-dark .kuiTabs { - border-bottom: 1px solid #222; } /** * 1. Override button styles (some of which are from Bootstrap). @@ -2715,17 +2464,13 @@ main { padding: 10px 30px; font-size: 14px; color: #69707D; - background-color: #FFF; + background-color: transparent; /* 1 */ border: 1px solid #D3DAE6; border-radius: 0; /* 1 */ margin-bottom: -1px; /* 3 */ } - .theme-dark .kuiTab { - color: #DDD; - background-color: #333333; - border-color: #222; } .kuiTab + .kuiTab { border-left: none; } .kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { @@ -2744,25 +2489,14 @@ main { z-index: 1; color: #006BB4; border: 1px solid #006BB4 !important; } - .theme-dark .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { - color: #DDD; - background-color: #333333; - border-color: #222 !important; } .kuiTab:hover:not(.kuiTab-isSelected) { color: #004d81; - background-color: #F2F2F2; } - .theme-dark .kuiTab:hover:not(.kuiTab-isSelected) { - color: #def2f6; - background-color: #222; } + background-color: #F5F7FA; } .kuiTab.kuiTab-isSelected { cursor: default; color: #2D2D2D; - background-color: #FFF; - border-bottom-color: #FFF; } - .theme-dark .kuiTab.kuiTab-isSelected { - color: #DDD; - background-color: #333333; - border-bottom-color: #333333; } + background-color: transparent; + border-bottom-color: transparent; } /** * 1. Allow container to determine font-size and line-height. @@ -2869,7 +2603,7 @@ main { box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; /* 3 */ } .kuiToolBar .kuiSelect { - border-color: #ffffff; } + border-color: #fbfcfd; } .kuiToolBar .kuiSelect:not(a):enabled:focus { outline: none; border-color: #006BB4; } @@ -2944,7 +2678,7 @@ main { /* 1 */ padding: 10px; height: 40px; - background-color: #ffffff; } + background-color: #FFF; } .kuiToolBarFooterSection { display: -webkit-box; @@ -3042,9 +2776,9 @@ main { width: 100%; min-width: 200px; padding: 4px 12px 5px 28px; - font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* 1 */ - background-color: #FFFFFF; + background-color: #FFF; color: #2D2D2D; border-radius: 4px; font-size: 1em; @@ -3063,7 +2797,7 @@ main { .kuiToolBarText { font-size: 14px; line-height: 1.5; - color: #5A5A5A; + color: #69707D; white-space: nowrap; /* 1 */ } @@ -3075,9 +2809,7 @@ main { /* 1 */ font-weight: 400; /* 1 */ - font-size: 22px; } - .theme-dark .kuiTitle { - color: #DDD; } + font-size: 24px; } /** * 1. Override h2, h3, etc. @@ -3088,8 +2820,6 @@ main { font-weight: 400; /* 1 */ font-size: 18.0px; } - .theme-dark .kuiSubTitle { - color: #DDD; } /** * 1. Override p. @@ -3101,8 +2831,6 @@ main { /* 1 */ line-height: 1.5; font-size: 14px; } - .theme-dark .kuiTextTitle { - color: #DDD; } /** * 1. Override p. @@ -3114,8 +2842,6 @@ main { /* 1 */ line-height: 1.5; font-size: 14px; } - .theme-dark .kuiText { - color: #DDD; } .kuiSubText { margin: 0; @@ -3124,8 +2850,6 @@ main { /* 1 */ line-height: 1.5; font-size: 14px; } - .theme-dark .kuiSubText { - color: #DDD; } .kuiSubduedText { color: #69707D !important; } diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide/_guide.scss b/packages/kbn-ui-framework/doc_site/src/components/guide/_guide.scss index 3c292e01fedb..64c5a63cf207 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide/_guide.scss +++ b/packages/kbn-ui-framework/doc_site/src/components/guide/_guide.scss @@ -4,7 +4,7 @@ html { .guideBody { height: 100%; - background-color: #000000; + background-color: $euiColorFullShade; margin: 0; min-width: $guideMinWidth; } @@ -61,7 +61,7 @@ html { display: flex; justify-content: center; flex: 1 0 auto; - background-color: #ffffff; + background-color: $euiColorEmptyShade; } .guideContentPage__hint { @@ -74,7 +74,7 @@ html { padding: 30px; margin: 20px; border-radius: 4px; - background-color: #e8e8e8; + background-color: $euiColorLightestShade; line-height: $guideLineHeight; } @@ -96,11 +96,11 @@ html { } .guideWarning { - border-left: 5px solid #e8488b; + border-left: 5px solid $euiColorAccent; margin-top: 19px; padding: 0 14px; line-height: 21px; - color: #e8488b; + color: $euiColorAccent; } .guideBreak { diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_code/_guide_code.scss b/packages/kbn-ui-framework/doc_site/src/components/guide_code/_guide_code.scss index 084c74fec921..14fdae066c11 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_code/_guide_code.scss +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_code/_guide_code.scss @@ -1,6 +1,6 @@ .guideCode { padding: 2px 4px; font-family: 'Ubuntu Mono', monospace; - background-color: #e8e8e8; - color: #565656; + background-color: $euiColorLightestShade; + color: $euiColorDarkShade; } diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss b/packages/kbn-ui-framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss index 11883f9e79cb..a4dc2eecc57d 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss @@ -5,11 +5,11 @@ bottom: 0; width: $guideCodeViewerWidth; padding: 6px 0 40px; - background-color: white; + background-color: $euiColorEmptyShade; transform: translateX($guideCodeViewerWidth); transition: transform $guideCodeViewerTransition; overflow: auto; - border-left: 1px solid #d6d6d6; + border-left: $euiBorderThin; @include scrollbar; @@ -25,7 +25,7 @@ .guideCodeViewer__header { padding: 0 20px 6px; line-height: $guideLineHeight; - border-bottom: 1px solid #d6d6d6; + border-bottom: $euiBorderThin; font-size: 14px; font-weight: 700; margin-bottom: 10px; @@ -47,7 +47,7 @@ .guideCodeViewer__title { padding: 0 20px 6px; - border-bottom: 1px solid #d6d6d6; + border-bottom: $euiBorderThin; line-height: $guideLineHeight; font-size: 14px; } @@ -61,7 +61,7 @@ .hljs { display: block; padding: 15px 20px; - color: #637c84; + color: $euiColorDarkShade; font-size: 14px; line-height: 1.3; font-family: 'Ubuntu Mono', monospace; diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_components.scss b/packages/kbn-ui-framework/doc_site/src/components/guide_components.scss index 450e357978fc..42e55ac6a00f 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_components.scss +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_components.scss @@ -1,5 +1,5 @@ -$guideVerticalRhythm: 20px; -$guideLineHeight: 24px; +$guideVerticalRhythm: $euiSize; +$guideLineHeight: $euiSizeL; $guideNavHeight: 60px; $guideSideNavWidth: 400px; $guideSideNavSmallWidth: 220px; @@ -9,11 +9,11 @@ $guideCodeViewerTransition: 0.2s ease; $guideChromeTransition: 0.3s ease; // Colors -$guideBaseBackgroundColor: #f7f7f7; -$guidePanelBackgroundColor: #ffffff; -$guideTextColor: #444; -$guideLinkColor: #00a9e5; -$guideLinkHoverColor: #00a9e5; +$guideBaseBackgroundColor: $euiColorLightestShade; +$guidePanelBackgroundColor: $euiColorEmptyShade; +$guideTextColor: $euiColorDarkestShade; +$guideLinkColor: $euiColorPrimary; +$guideLinkHoverColor: darken($euiColorPrimary, 10%); // Breakpoints $guideMinWidth: 840px; @@ -31,7 +31,7 @@ $guideNormalBreakpoint: 1900px; } } -@mixin scrollbar($color: rgba(#454D58, 0.4)) { +@mixin scrollbar($color: $euiBorderColor) { &::-webkit-scrollbar { width: 16px; height: 16px; diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_demo/_guide_demo.scss b/packages/kbn-ui-framework/doc_site/src/components/guide_demo/_guide_demo.scss index 7340e10794f7..e97cb0613995 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_demo/_guide_demo.scss +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_demo/_guide_demo.scss @@ -8,21 +8,16 @@ margin-top: 0; } -.guideDemo--darkTheme { - background-color: #272727; - padding: 10px; -} - .guideDemo__highlightGrid { .kuiFlexItem { - background: transparentize(#0096CC, .9); + background: transparentize($euiColorPrimary, .9); padding: 16px; } } .guideDemo__highlightGridWrap { .kuiFlexItem div { - background: transparentize(#0096CC, .9); + background: transparentize($euiColorPrimary, .9); padding: 16px; } } diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_demo/guide_demo.js b/packages/kbn-ui-framework/doc_site/src/components/guide_demo/guide_demo.js index 42da5ad172cf..37e66615b86c 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_demo/guide_demo.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_demo/guide_demo.js @@ -55,7 +55,6 @@ export class GuideDemo extends Component { render() { const { isFullScreen, - isDarkTheme, children, className, js, // eslint-disable-line no-unused-vars @@ -66,8 +65,6 @@ export class GuideDemo extends Component { const classes = classNames('guideDemo', className, { 'guideDemo--fullScreen': isFullScreen, - 'guideDemo--darkTheme': isDarkTheme, - 'theme-dark': isDarkTheme, }); return ( @@ -88,7 +85,6 @@ GuideDemo.propTypes = { html: PropTypes.string.isRequired, css: PropTypes.string.isRequired, isFullScreen: PropTypes.bool.isRequired, - isDarkTheme: PropTypes.bool.isRequired, }; GuideDemo.defaultProps = { @@ -96,5 +92,4 @@ GuideDemo.defaultProps = { html: '', css: '', isFullScreen: false, - isDarkTheme: false, }; diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_nav/_guide_nav.scss b/packages/kbn-ui-framework/doc_site/src/components/guide_nav/_guide_nav.scss index 205961c15f43..33d51806d0f0 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_nav/_guide_nav.scss +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_nav/_guide_nav.scss @@ -8,7 +8,7 @@ right: 0; min-width: $guideMinWidth; height: $guideNavHeight; - border-bottom: 1px solid #CCCCCC; + border-bottom: $euiBorderThin; color: $guideTextColor; background-color: $guidePanelBackgroundColor; transition: @@ -16,11 +16,11 @@ height 0.3s ease, box-shadow 0.3s linear; overflow: hidden; - box-shadow: 0 0 0 rgba(black, 0.3); + @include euiBottomShadowMedium; &.is-guide-nav-open { height: 100%; - box-shadow: 0 40px 200px rgba(black, 0.05); + @include euiBottomShadow; } &.is-chrome-hidden { @@ -182,14 +182,14 @@ line-height: 10px; padding: 4px 20px; color: $guideLinkHoverColor; - background-color: #fff; + background-color: $euiColorEmptyShade; border: 1px solid $guideLinkHoverColor; border-radius: 3px; cursor: pointer; &:hover, &:active { - background-color: #e6f7fc; + background-color: $euiColorLightestShade; } &.guideNavPaginationButton-isDisabled { diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_page/_guide_page.scss b/packages/kbn-ui-framework/doc_site/src/components/guide_page/_guide_page.scss index 3c3249a94010..92b55359fdaa 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_page/_guide_page.scss +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_page/_guide_page.scss @@ -11,7 +11,7 @@ $scrollBarWidth: 20px; background-color: $guidePanelBackgroundColor; - border: 1px solid #CCCCCC; + border: $euiBorderThin; border-radius: 4px; flex: 1 1 auto; padding: 40px 60px; @@ -34,3 +34,9 @@ } } } + +.guidePageKillScreen { + background-color: tintOrShade($euiColorDanger, 90%, 70%); + padding: $euiSizeL; + margin-bottom: $euiSizeL; +} diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_page/guide_page.js b/packages/kbn-ui-framework/doc_site/src/components/guide_page/guide_page.js index 83560fa2c98b..dee59460a821 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_page/guide_page.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_page/guide_page.js @@ -62,7 +62,7 @@ export class GuidePage extends Component {
-
+

The Kibana UI Framework has been DEPRECATED.

diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_section/_guide_section.scss b/packages/kbn-ui-framework/doc_site/src/components/guide_section/_guide_section.scss index 280b0026172e..62f3f1b1686e 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_section/_guide_section.scss +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_section/_guide_section.scss @@ -21,7 +21,7 @@ line-height: 10px; padding: 4px 10px; color: $guideLinkHoverColor; - background-color: #fff; + background-color: $euiColorEmptyShade; border: 1px solid $guideLinkHoverColor; border-radius: 3px; cursor: pointer; @@ -30,7 +30,7 @@ &:hover, &:active { - background-color: #e6f7fc; + background-color: $euiColorLightestShade; } .is-chrome-hidden & { diff --git a/packages/kbn-ui-framework/doc_site/src/main.scss b/packages/kbn-ui-framework/doc_site/src/main.scss index db09e87c9f5b..1ac5c02fa5dc 100644 --- a/packages/kbn-ui-framework/doc_site/src/main.scss +++ b/packages/kbn-ui-framework/doc_site/src/main.scss @@ -1,3 +1,8 @@ -@import "~@elastic/eui/src/global_styling/index"; -@import "../../dist/ui_framework.css"; +@import '~@elastic/eui/src/themes/k6/k6_globals'; +@import '~@elastic/eui/src/themes/k6/k6_colors_dark'; +@import '~@elastic/eui/src/global_styling/functions/index'; +@import '~@elastic/eui/src/global_styling/variables/index'; +@import '~@elastic/eui/src/global_styling/mixins/index'; +@import '~@elastic/eui/src/global_styling/reset/index'; +@import "../../dist/kui_dark.css"; @import "./components/guide_components"; diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_example.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_example.js index ed633e034acb..f265dba3164d 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_example.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_example.js @@ -94,10 +94,6 @@ export default props => ( - - - - ( - - - - ( - - ( - - (