diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js
index 49e0105fab12bf..85b473f11f5a76 100644
--- a/tasks/ui_framework.js
+++ b/tasks/ui_framework.js
@@ -83,30 +83,34 @@ module.exports = function (grunt) {
}
function uiFrameworkCompile() {
- const src = 'ui_framework/src/index.scss';
- const dest = 'ui_framework/dist/ui_framework.css';
-
- return new Promise(resolve => {
- sass.render({
- file: src,
- }, function (error, result) {
- if (error) {
- grunt.log.error(error);
- }
-
- postcss([postcssConfig])
- .process(result.css, { from: src, to: dest })
- .then(result => {
- grunt.file.write(dest, result.css);
-
- if (result.map) {
- grunt.file.write(`${dest}.map`, result.map);
- }
-
- resolve();
- });
+ const compileTheme = name => {
+ const src = `ui_framework/src/${name}.scss`;
+ const dest = `ui_framework/dist/ui_framework_${name}.css`;
+
+ return new Promise(resolve => {
+ sass.render({
+ file: src,
+ }, function (error, result) {
+ if (error) {
+ grunt.log.error(error);
+ }
+
+ postcss([postcssConfig])
+ .process(result.css, { from: src, to: dest })
+ .then(result => {
+ grunt.file.write(dest, result.css);
+
+ if (result.map) {
+ grunt.file.write(`${dest}.map`, result.map);
+ }
+
+ resolve();
+ });
+ });
});
- });
+ };
+
+ return Promise.all([compileTheme('theme_light'), compileTheme('theme_dark')]);
}
function uiFrameworkWatch() {
diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css
new file mode 100644
index 00000000000000..7e76a5876e99bd
--- /dev/null
+++ b/ui_framework/dist/ui_framework_theme_dark.css
@@ -0,0 +1,2238 @@
+@-webkit-keyframes kuiAnimFadeIn {
+ 0% {
+ opacity: 0; }
+ 100% {
+ opacity: 1; } }
+
+@keyframes kuiAnimFadeIn {
+ 0% {
+ opacity: 0; }
+ 100% {
+ opacity: 1; } }
+
+/**
+ * Set scroll bar appearance on Chrome.
+ */
+/**
+ * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126).
+ *
+ */
+*, *:before, *:after {
+ box-sizing: border-box; }
+
+/**
+ * 1. Inheriting the font will allow some browser defaults to take effect, e.g. Chrome applies
+ * `font: 11px system-ui` to the button element. We can't hardcode the font-family here because
+ * that will disrupt components which rely upon a different inherited font-family, e.g. code
+ * blocks.
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ /* 1 */
+ font-family: inherit;
+ /* 1 */
+ vertical-align: baseline; }
+
+em {
+ font-style: italic; }
+
+strong {
+ font-weight: 500; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block; }
+
+html {
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ font-weight: 400;
+ font-size: 16px;
+ color: #F5F5F5;
+ height: 100%;
+ background-color: #333;
+ -webkit-font-smoothing: antialiased; }
+
+body {
+ line-height: 1; }
+
+*:focus {
+ outline: none; }
+
+a {
+ text-decoration: none; }
+ a:hover {
+ text-decoration: none; }
+ a:focus {
+ text-decoration: none;
+ outline: none; }
+
+button {
+ background: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+ outline: none;
+ font-size: 16px; }
+ button:hover {
+ cursor: pointer; }
+
+ol, ul {
+ list-style: none; }
+
+blockquote, q {
+ quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none; }
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0; }
+
+.kui--flex {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex; }
+
+.kui--flexRow {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row; }
+
+.kui--flexWrap {
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap; }
+
+.kui--flexGrow1 {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1; }
+
+.kui--flexShrink1 {
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1; }
+
+.kui--flexBasisOneThird {
+ -webkit-flex-basis: 33.33%;
+ -ms-flex-preferred-size: 33.33%;
+ flex-basis: 33.33%; }
+
+.kui--flexAlignItemsCenter {
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center; }
+
+.kui--textAlignRight {
+ text-align: right !important; }
+
+.kui--textAlignLeft {
+ text-align: left !important; }
+
+.kui--textAlignCenter {
+ text-align: center !important; }
+
+.kui--verticalAlignMiddle {
+ vertical-align: middle !important; }
+
+.kui--fontSizeSmall {
+ font-size: 14px;
+ font-size: 0.875rem;
+ line-height: 18px; }
+
+.kui--codeFont {
+ font-family: "Roboto Mono", monospace; }
+
+.kui--subduedText {
+ color: #D9D9D9; }
+
+.kui--bottomShadow {
+ box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
+
+.kui--margin {
+ margin: 16px !important; }
+
+.kui--marginLarge {
+ margin: 24px !important; }
+
+.kui--marginSmall {
+ margin: 8px !important; }
+
+.kui--padding {
+ padding: 16px !important; }
+
+.kui--paddingLarge {
+ padding: 24px !important; }
+
+.kui--paddingSmall {
+ padding: 8px !important; }
+
+.kui--marginTopBottom {
+ margin-top: 16px !important;
+ margin-bottom: 16px !important; }
+
+.kui--marginTopBottomSmall {
+ margin-top: 8px !important;
+ margin-bottom: 8px !important; }
+
+.kui--marginTopBottomLarge {
+ margin-top: 24px !important;
+ margin-bottom: 24px !important; }
+
+.kui--marginTop {
+ margin-top: 16px !important; }
+
+.kui--marginBottom {
+ margin-bottom: 16px !important; }
+
+.kui--marginTopSmall {
+ margin-top: 8px !important; }
+
+.kui--marginBottomSmall {
+ margin-bottom: 8px !important; }
+
+.kui--marginTopLarge {
+ margin-top: 24px !important; }
+
+.kui--marginBottomLarge {
+ margin-bottom: 24px !important; }
+
+.kui--marginLeftRight {
+ margin-left: 16px !important;
+ margin-right: 16px !important; }
+
+.kui--marginLeftRightSmall {
+ margin-left: 8px !important;
+ margin-right: 8px !important; }
+
+.kui--marginLeftRightLarge {
+ margin-left: 24px !important;
+ margin-right: 24px !important; }
+
+.kui--marginLeft {
+ margin-left: 16px !important; }
+
+.kui--marginRight {
+ margin-right: 16px !important; }
+
+.kui--marginLeftSmall {
+ margin-left: 8px !important; }
+
+.kui--marginRightSmall {
+ margin-right: 8px !important; }
+
+.kui--marginLeftLarge {
+ margin-left: 24px !important; }
+
+.kui--marginRightLarge {
+ margin-right: 24px !important; }
+
+.kui--paddingTopBottom {
+ padding-top: 16px !important;
+ padding-bottom: 16px !important; }
+
+.kui--paddingTopBottomSmall {
+ padding-top: 8px !important;
+ padding-bottom: 8px !important; }
+
+.kui--paddingTopBottomLarge {
+ padding-top: 24px !important;
+ padding-bottom: 24px !important; }
+
+.kui--paddingTop {
+ padding-top: 16px !important; }
+
+.kui--paddingBottom {
+ padding-bottom: 16px !important; }
+
+.kui--paddingTopSmall {
+ padding-top: 8px !important; }
+
+.kui--paddingBottomSmall {
+ padding-bottom: 8px !important; }
+
+.kui--paddingTopLarge {
+ padding-top: 24px !important; }
+
+.kui--paddingBottomLarge {
+ padding-bottom: 24px !important; }
+
+.kui--paddingLeftRight {
+ padding-left: 16px !important;
+ padding-right: 16px !important; }
+
+.kui--paddingLeftRightSmall {
+ padding-left: 8px !important;
+ padding-right: 8px !important; }
+
+.kui--paddingLeftRightLarge {
+ padding-left: 24px !important;
+ padding-right: 24px !important; }
+
+.kui--paddingLeft {
+ padding-left: 16px !important; }
+
+.kui--paddingRight {
+ padding-right: 16px !important; }
+
+.kui--paddingLeftSmall {
+ padding-left: 8px !important; }
+
+.kui--paddingRightSmall {
+ padding-right: 8px !important; }
+
+.kui--paddingLeftLarge {
+ padding-left: 24px !important; }
+
+.kui--paddingRightLarge {
+ padding-right: 24px !important; }
+
+.kuiAvatar {
+ border-radius: 50%;
+ width: 24px;
+ height: 24px;
+ display: inline-block;
+ position: relative; }
+ .kuiAvatar:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: 50%;
+ content: "";
+ pointer-events: none;
+ border: 1px solid rgba(0, 0, 0, 0.1); }
+
+.kuiAvatar--small {
+ width: 16px;
+ height: 16px; }
+
+.kuiAvatar--large {
+ width: 64px;
+ height: 64px; }
+
+.kuiButton {
+ display: inline-block;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ cursor: pointer;
+ height: 40px;
+ text-decoration: none;
+ border: solid 1px transparent;
+ border-radius: 4px;
+ padding: 0 12px;
+ min-width: 112px;
+ text-align: center;
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
+ whitespace: nowrap;
+ box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2);
+ /**
+ * 1. Apply margin to all but last item in the flex.
+ */ }
+ .kuiButton.kuiButton--small {
+ height: 32px; }
+ .kuiButton .kuiButton__content {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center; }
+ .kuiButton .kuiButton__content > * + * {
+ margin-left: 8px;
+ /* 1 */ }
+ .kuiButton:hover, .kuiButton:focus {
+ text-decoration: underline;
+ background-color: rgba(77, 161, 192, 0.1); }
+ .kuiButton:focus {
+ -webkit-animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
+ animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1); }
+ .kuiButton.kuiButton--reverse .kuiButton__content {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: reverse;
+ -webkit-flex-direction: row-reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse; }
+ .kuiButton.kuiButton--reverse .kuiButton__content > * + * {
+ margin-left: 0;
+ margin-right: 8px; }
+
+.kuiButton--primary {
+ color: #4da1c0;
+ border-color: #4da1c0; }
+ .kuiButton--primary .kuiButton__icon {
+ fill: #4da1c0; }
+ .kuiButton--primary:hover, .kuiButton--primary:focus {
+ background-color: rgba(77, 161, 192, 0.1); }
+ .kuiButton--primary.kuiButton--fill {
+ background-color: #4da1c0;
+ color: #F5F5F5;
+ border-color: #4da1c0; }
+ .kuiButton--primary.kuiButton--fill:hover, .kuiButton--primary.kuiButton--fill:focus {
+ background-color: #4095b4;
+ border-color: #4095b4; }
+ .kuiButton--primary.kuiButton--fill .kuiButton__icon {
+ fill: #F5F5F5; }
+
+.kuiButton--secondary {
+ color: #00A69B;
+ border-color: #00A69B; }
+ .kuiButton--secondary .kuiButton__icon {
+ fill: #00A69B; }
+ .kuiButton--secondary:hover, .kuiButton--secondary:focus {
+ background-color: rgba(0, 166, 155, 0.1); }
+ .kuiButton--secondary.kuiButton--fill {
+ background-color: #00A69B;
+ color: #F5F5F5;
+ border-color: #00A69B; }
+ .kuiButton--secondary.kuiButton--fill:hover, .kuiButton--secondary.kuiButton--fill:focus {
+ background-color: #008d83;
+ border-color: #008d83; }
+ .kuiButton--secondary.kuiButton--fill .kuiButton__icon {
+ fill: #F5F5F5; }
+
+.kuiButton--warning {
+ color: #E5830E;
+ border-color: #E5830E; }
+ .kuiButton--warning .kuiButton__icon {
+ fill: #E5830E; }
+ .kuiButton--warning:hover, .kuiButton--warning:focus {
+ background-color: rgba(229, 131, 14, 0.1); }
+ .kuiButton--warning.kuiButton--fill {
+ background-color: #E5830E;
+ color: #F5F5F5;
+ border-color: #E5830E; }
+ .kuiButton--warning.kuiButton--fill:hover, .kuiButton--warning.kuiButton--fill:focus {
+ background-color: #cd750d;
+ border-color: #cd750d; }
+ .kuiButton--warning.kuiButton--fill .kuiButton__icon {
+ fill: #F5F5F5; }
+
+.kuiButton--danger {
+ color: #bf4d4d;
+ border-color: #bf4d4d; }
+ .kuiButton--danger .kuiButton__icon {
+ fill: #bf4d4d; }
+ .kuiButton--danger:hover, .kuiButton--danger:focus {
+ background-color: rgba(191, 77, 77, 0.1); }
+ .kuiButton--danger.kuiButton--fill {
+ background-color: #bf4d4d;
+ color: #F5F5F5;
+ border-color: #bf4d4d; }
+ .kuiButton--danger.kuiButton--fill:hover, .kuiButton--danger.kuiButton--fill:focus {
+ background-color: #b24040;
+ border-color: #b24040; }
+ .kuiButton--danger.kuiButton--fill .kuiButton__icon {
+ fill: #F5F5F5; }
+
+.kuiButton--disabled {
+ color: #313131;
+ border-color: #313131; }
+ .kuiButton--disabled .kuiButton__icon {
+ fill: #313131; }
+ .kuiButton--disabled:hover, .kuiButton--disabled:focus {
+ background-color: rgba(49, 49, 49, 0.1);
+ cursor: not-allowed; }
+ .kuiButton--disabled.kuiButton--fill {
+ background-color: #313131;
+ color: #F5F5F5;
+ border-color: #313131; }
+ .kuiButton--disabled.kuiButton--fill:hover, .kuiButton--disabled.kuiButton--fill:focus {
+ background-color: #242424;
+ border-color: #242424; }
+ .kuiButton--disabled.kuiButton--fill .kuiButton__icon {
+ fill: #F5F5F5; }
+
+@-webkit-keyframes kuiButtonFocus {
+ 50% {
+ -webkit-transform: translateY(2px);
+ transform: translateY(2px); } }
+
+@keyframes kuiButtonFocus {
+ 50% {
+ -webkit-transform: translateY(2px);
+ transform: translateY(2px); } }
+
+.kuiCallOut {
+ padding: 16px;
+ border-left: 2px solid transparent; }
+
+.kuiCallOut--info {
+ border-color: #4da1c0;
+ background-color: #17303a; }
+ .kuiCallOut--info .kuiCallOutHeader__icon {
+ fill: #cae3ec; }
+ .kuiCallOut--info .kuiCallOutHeader__title {
+ color: #cae3ec; }
+
+.kuiCallOut--success {
+ border-color: #00A69B;
+ background-color: #00322f; }
+ .kuiCallOut--success .kuiCallOutHeader__icon {
+ fill: #b3e4e1; }
+ .kuiCallOut--success .kuiCallOutHeader__title {
+ color: #b3e4e1; }
+
+.kuiCallOut--warning {
+ border-color: #E5830E;
+ background-color: #452704; }
+ .kuiCallOut--warning .kuiCallOutHeader__icon {
+ fill: #f7dab7; }
+ .kuiCallOut--warning .kuiCallOutHeader__title {
+ color: #f7dab7; }
+
+.kuiCallOut--danger {
+ border-color: #bf4d4d;
+ background-color: #391717; }
+ .kuiCallOut--danger .kuiCallOutHeader__icon {
+ fill: #eccaca; }
+ .kuiCallOut--danger .kuiCallOutHeader__title {
+ color: #eccaca; }
+
+/**
+ * 1. Align icon with first line of title text if it wraps.
+ * 2. If content exists under the header, space it appropriately.
+ * 3. Apply margin to all but last item in the flex.
+ */
+.kuiCallOutHeader {
+ font-size: 16px;
+ font-size: 1rem;
+ line-height: 24px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: baseline;
+ -webkit-align-items: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+ /* 1 */ }
+ .kuiCallOutHeader + * {
+ margin-top: 8px;
+ /* 1 */ }
+ .kuiCallOutHeader > * + * {
+ margin-left: 8px;
+ /* 3 */ }
+
+/**
+ * 1. Vertically center icon with first line of title.
+ */
+.kuiCallOutHeader__icon {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -webkit-transform: translateY(2px);
+ transform: translateY(2px);
+ /* 1 */ }
+
+.kuiForm__error {
+ font-size: 14px;
+ font-size: 0.875rem;
+ line-height: 18px;
+ list-style: disc;
+ margin-left: 32px; }
+
+.kuiForm__errors {
+ margin-bottom: 16px; }
+
+.kuiFormRow {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ position: relative;
+ max-width: 400px; }
+ .kuiFormRow + * {
+ margin-top: 24px; }
+ .kuiFormRow.kuiFormRow--withIcon input {
+ padding-left: 40px; }
+ .kuiFormRow.kuiFormRow--dropdown input {
+ padding-left: 12px;
+ padding-right: 40px; }
+ .kuiFormRow.kuiFormRow--select .kuiFormRow__icon {
+ left: auto;
+ right: 12px; }
+ .kuiFormRow .kuiFormRow__label {
+ font-size: 12px;
+ padding-bottom: 8px;
+ cursor: pointer;
+ transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
+ font-weight: 500;
+ -webkit-box-ordinal-group: 0;
+ -webkit-order: -1;
+ -ms-flex-order: -1;
+ order: -1; }
+ .kuiFormRow .kuiFormRow__helpText {
+ font-size: 12px;
+ padding: 8px 0;
+ color: #D9D9D9; }
+ .kuiFormRow .kuiFormRow__error {
+ font-size: 12px;
+ padding: 8px 0;
+ color: #bf4d4d; }
+ .kuiFormRow .kuiFormRow__error + * {
+ padding-top: 0; }
+ .kuiFormRow .kuiFormRow__icon {
+ position: absolute;
+ top: 32px;
+ left: 12px; }
+ .kuiFormRow input:focus + label,
+ .kuiFormRow select:focus + label,
+ .kuiFormRow textarea:focus + label {
+ color: #4da1c0; }
+ .kuiFormRow.kuiFormRow--invalid .kuiFormRow__label {
+ color: #bf4d4d !important; }
+ .kuiFormRow.kuiFormRow--invalid input[type="text"],
+ .kuiFormRow.kuiFormRow--invalid input[type="password"],
+ .kuiFormRow.kuiFormRow--invalid input[type="number"],
+ .kuiFormRow.kuiFormRow--invalid input[type="search"],
+ .kuiFormRow.kuiFormRow--invalid select,
+ .kuiFormRow.kuiFormRow--invalid textarea {
+ box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #bf4d4d !important; }
+
+.kuiCheckbox {
+ position: relative;
+ height: 24px;
+ margin-top: 8px; }
+ .kuiCheckbox .kuiCheckbox__label {
+ position: absolute;
+ padding-left: 32px;
+ line-height: 24px;
+ display: block;
+ font-weight: 400;
+ z-index: 2;
+ font-size: 14px;
+ cursor: pointer; }
+ .kuiCheckbox .kuiCheckbox__square {
+ position: absolute;
+ height: 24px;
+ width: 24px;
+ border-radius: 4px;
+ border: 1px solid #444;
+ background: #262626;
+ z-index: 0; }
+ .kuiCheckbox .kuiCheckbox__check {
+ height: 100%;
+ width: 100%; }
+ .kuiCheckbox .kuiCheckbox__input {
+ position: absolute;
+ opacity: 0; }
+ .kuiCheckbox .kuiCheckbox__input:checked ~ .kuiCheckbox__square .kuiCheckbox__check {
+ background-color: #F5F5F5;
+ -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
+ mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
+ .kuiCheckbox .kuiCheckbox__input:focus ~ .kuiCheckbox__square {
+ background-color: #275160;
+ border-color: #4da1c0; }
+ .kuiCheckbox .kuiCheckbox__input:checked:focus ~ .kuiCheckbox__square .kuiCheckbox__check {
+ background-color: #F5F5F5;
+ -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
+ mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
+
+.kuiFieldNumber {
+ border: none;
+ font-size: 14px;
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ padding: 12px;
+ color: #F5F5F5;
+ min-width: 256px;
+ background: #262626;
+ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626;
+ transition: box-shadow 250ms ease-in, background 250ms ease-in;
+ max-width: 400px;
+ border-radius: 0; }
+ .kuiFieldNumber:focus {
+ background: #222;
+ box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; }
+
+.kuiFieldPassword {
+ border: none;
+ font-size: 14px;
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ padding: 12px;
+ color: #F5F5F5;
+ min-width: 256px;
+ background: #262626;
+ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626;
+ transition: box-shadow 250ms ease-in, background 250ms ease-in;
+ max-width: 400px;
+ border-radius: 0; }
+ .kuiFieldPassword:focus {
+ background: #222;
+ box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; }
+
+.kuiFieldSearch {
+ border: none;
+ font-size: 14px;
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ padding: 12px;
+ color: #F5F5F5;
+ min-width: 256px;
+ background: #262626;
+ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626;
+ transition: box-shadow 250ms ease-in, background 250ms ease-in;
+ max-width: 400px;
+ border-radius: 0; }
+ .kuiFieldSearch:focus {
+ background: #222;
+ box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; }
+
+.kuiFieldText {
+ border: none;
+ font-size: 14px;
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ padding: 12px;
+ color: #F5F5F5;
+ min-width: 256px;
+ background: #262626;
+ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626;
+ transition: box-shadow 250ms ease-in, background 250ms ease-in;
+ max-width: 400px;
+ border-radius: 0; }
+ .kuiFieldText:focus {
+ background: #222;
+ box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; }
+
+.kuiRange {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ margin: 8px 0;
+ width: 100%; }
+ .kuiRange:focus::-webkit-slider-thumb {
+ border: 2px solid #4da1c0; }
+ .kuiRange:focus::-moz-range-thumb {
+ border: 2px solid #4da1c0; }
+ .kuiRange:focus::-ms-thumb {
+ border: 2px solid #4da1c0; }
+ .kuiRange:focus::-webkit-slider-runnable-track {
+ background-color: #4da1c0; }
+ .kuiRange::-webkit-slider-runnable-track {
+ cursor: pointer;
+ height: 2px;
+ transition: all 250ms ease-in;
+ width: 100%;
+ background: #444;
+ border: 0 solid #444;
+ border-radius: 4px; }
+ .kuiRange::-webkit-slider-thumb {
+ background: #222;
+ border: 2px solid #F5F5F5;
+ border-radius: 50%;
+ cursor: pointer;
+ height: 16px;
+ width: 16px;
+ -webkit-appearance: none;
+ margin-top: -7px; }
+ .kuiRange::-moz-range-track {
+ cursor: pointer;
+ height: 2px;
+ transition: all 250ms ease-in;
+ width: 100%;
+ background: #444;
+ border: 0 solid #444;
+ border-radius: 4px; }
+ .kuiRange::-moz-range-thumb {
+ background: #222;
+ border: 2px solid #F5F5F5;
+ border-radius: 50%;
+ cursor: pointer;
+ height: 16px;
+ width: 16px; }
+ .kuiRange::-ms-track {
+ cursor: pointer;
+ height: 2px;
+ transition: all 250ms ease-in;
+ width: 100%;
+ background: transparent;
+ border-color: transparent;
+ border-width: 8px 0;
+ color: transparent; }
+ .kuiRange::-ms-fill-lower {
+ background: #444;
+ border: 0 solid #444;
+ border-radius: 8px; }
+ .kuiRange::-ms-fill-upper {
+ background: #444;
+ border: 0 solid #444;
+ border-radius: 8px; }
+ .kuiRange::-ms-thumb {
+ background: #222;
+ border: 2px solid #F5F5F5;
+ border-radius: 50%;
+ cursor: pointer;
+ height: 16px;
+ width: 16px;
+ margin-top: 0; }
+
+.kuiSelect {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border: none;
+ font-size: 14px;
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ padding: 12px;
+ color: #F5F5F5;
+ min-width: 256px;
+ background: #262626;
+ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626;
+ transition: box-shadow 250ms ease-in, background 250ms ease-in;
+ max-width: 400px;
+ border-radius: 0; }
+ .kuiSelect:focus {
+ background: #222;
+ box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; }
+ .kuiSelect::-ms-expand {
+ display: none; }
+
+.kuiSwitch {
+ position: relative;
+ display: inline-block;
+ height: 24px;
+ cursor: pointer;
+ /**
+ * 1. The label is our main clickable area. It sits above the actual switch.
+ */
+ /**
+ * 1. The input is "hidden" but still focusable.
+ */
+ /**
+ * 1. Accounts for the border on the body.
+ */
+ /**
+ * 1. Mask is used to color the svg. Text color is used so works regardless of theme.
+ */
+ /**
+ * The thumb is slightly scaled when in use.
+ */
+ /**
+ * When input is not checked, we shift around the positioning of sibling/child selectors.
+ */ }
+ .kuiSwitch .kuiSwitch__label {
+ position: absolute;
+ left: 0;
+ padding-left: 60px;
+ z-index: 2;
+ line-height: 24px;
+ font-size: 14px;
+ cursor: pointer; }
+ .kuiSwitch .kuiSwitch__input {
+ position: absolute;
+ opacity: 0;
+ z-index: -1; }
+ .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body {
+ background: #222; }
+ .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body .kuiSwitch__thumb {
+ border-color: #4da1c0;
+ background-color: #4da1c0; }
+ .kuiSwitch .kuiSwitch__body {
+ width: 52px;
+ height: 24px;
+ background: #262626;
+ border: 1px solid #444;
+ display: inline-block;
+ position: relative;
+ border-radius: 24px;
+ vertical-align: middle; }
+ .kuiSwitch .kuiSwitch__thumb {
+ position: absolute;
+ width: 24px;
+ height: 24px;
+ display: inline-block;
+ background-color: #222;
+ left: 28px;
+ top: -1px;
+ border-radius: 50%;
+ border: 1px solid #444;
+ transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
+ transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
+ transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
+ z-index: 1; }
+ .kuiSwitch .kuiSwitch__track {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+ border-radius: 24px; }
+ .kuiSwitch .kuiSwitch__icon {
+ position: absolute;
+ right: -40px;
+ top: 0;
+ bottom: 0;
+ width: 48px;
+ transition: left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), right 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
+ -webkit-mask: url("../src/components/icon/assets/cross.svg") center center no-repeat;
+ mask: url("../src/components/icon/assets/cross.svg") center center no-repeat;
+ background-color: #F5F5F5; }
+ .kuiSwitch .kuiSwitch__icon--checked {
+ right: auto;
+ left: -8px;
+ background-color: #F5F5F5;
+ -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
+ mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
+ .kuiSwitch:hover .kuiSwitch__thumb {
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05); }
+ .kuiSwitch:active .kuiSwitch__thumb {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95); }
+ .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__thumb {
+ left: -1px; }
+ .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon {
+ right: -8px; }
+ .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon.kuiSwitch__icon--checked {
+ right: auto;
+ left: -40px; }
+
+.kuiTextArea {
+ border: none;
+ font-size: 14px;
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ padding: 12px;
+ color: #F5F5F5;
+ min-width: 256px;
+ background: #262626;
+ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #262626;
+ transition: box-shadow 250ms ease-in, background 250ms ease-in;
+ max-width: 400px;
+ border-radius: 0; }
+ .kuiTextArea:focus {
+ background: #222;
+ box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 0 0 #222, inset 0 -2px 0 0 #4da1c0; }
+
+.kuiHeader {
+ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #222;
+ border-bottom: 1px solid #444; }
+
+.kuiHeader__notification {
+ display: inline-block;
+ border-radius: 4px;
+ background: #DD0A73;
+ color: #222;
+ font-size: 12px;
+ line-height: 16px;
+ height: 16px;
+ min-width: 16px;
+ vertical-align: middle; }
+
+.kuiHeaderAlert {
+ text-align: left;
+ min-width: 300px;
+ position: relative;
+ margin: 0 -16px;
+ padding: 16px;
+ border-top: 1px solid #444; }
+ .kuiHeaderAlert:hover .kuiHeaderAlert__dismiss {
+ opacity: 1; }
+
+.kuiHeaderAlert__dismiss {
+ opacity: 0;
+ position: absolute;
+ right: 16px;
+ top: 16px;
+ transition: opacity 250ms ease-in;
+ cursor: pointer; }
+
+.kuiHeaderAlert__title {
+ font-weight: 500;
+ font-size: 16px;
+ font-size: 1rem;
+ line-height: 24px;
+ padding-right: 24px; }
+
+.kuiHeaderAlert__text {
+ font-size: 12px;
+ font-size: 0.75rem;
+ line-height: 18px;
+ margin-bottom: 8px; }
+
+.kuiHeaderAlert__action {
+ font-size: 12px;
+ font-size: 0.75rem;
+ line-height: 18px;
+ color: #4da1c0; }
+ .kuiHeaderAlert__action:focus {
+ outline: solid 6px #275160; }
+
+.kuiHeaderAlert__date {
+ font-size: 12px;
+ font-size: 0.75rem;
+ line-height: 18px;
+ color: #D9D9D9;
+ text-align: right; }
+
+/**
+ * 1. Override KeyPadMenu.
+ */
+.kuiHeaderPopover {
+ top: calc(100% - 16px) !important;
+ /* 1 */ }
+
+.kuiHeaderProfile {
+ text-align: left;
+ padding-bottom: 16px; }
+
+.kuiHeaderLogo {
+ position: relative;
+ height: 64px;
+ padding: 16px 24px;
+ display: inline-block;
+ vertical-align: middle; }
+ .kuiHeaderLogo:hover {
+ text-decoration: underline; }
+ .kuiHeaderLogo:focus {
+ text-decoration: underline;
+ background: #275160; }
+
+.kuiHeaderLogo__icon {
+ height: 32px;
+ width: 24px;
+ opacity: 1; }
+
+.kuiHeaderBreadcrumbs {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex; }
+
+.kuiHeaderBreadcrumb {
+ display: inline-block;
+ height: 64px;
+ line-height: 64px;
+ padding: 0 16px;
+ position: relative;
+ color: #F5F5F5; }
+ .kuiHeaderBreadcrumb:not(:last-child):after {
+ position: absolute;
+ top: 24px;
+ right: -3px;
+ content: "";
+ width: 1px;
+ height: 16px;
+ -webkit-transform: rotate(15deg);
+ transform: rotate(15deg);
+ background: #444; }
+ .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):hover {
+ text-decoration: underline; }
+ .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):focus {
+ text-decoration: underline;
+ background: #275160; }
+ .kuiHeaderBreadcrumb.kuiHeaderBreadcrumb-isActive {
+ color: #555; }
+
+.kuiHeaderBreadcrumb__text {
+ white-space: nowrap;
+ max-width: 150px;
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden; }
+
+.kuiHeaderBreadcrumb--collapsed {
+ color: #444; }
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .kuiHeaderBreadcrumb {
+ display: none; }
+ .kuiHeaderBreadcrumb:nth-last-child(-n+4) {
+ display: inline-block; } }
+
+@media only screen and (min-width: 769px) and (max-width: 991px) {
+ .kuiHeaderBreadcrumb {
+ display: none; }
+ .kuiHeaderBreadcrumb:nth-last-child(-n+2) {
+ display: inline-block; } }
+
+@media only screen and (max-width: 768px) {
+ .kuiHeaderBreadcrumb {
+ display: none; } }
+
+.kuiHeaderSection {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex; }
+
+.kuiHeaderSection--left {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1; }
+
+.kuiHeaderSection--right {
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1; }
+
+.kuiHeaderSectionItem {
+ position: relative; }
+ .kuiHeaderSectionItem:hover {
+ background: #333; }
+ .kuiHeaderSectionItem:after {
+ position: absolute;
+ content: "";
+ width: 1px;
+ top: 16px;
+ bottom: 0;
+ background: #444;
+ left: 0; }
+
+.kuiHeaderSectionItem__button {
+ height: 64px;
+ min-width: 64px;
+ text-align: center; }
+ .kuiHeaderSectionItem__button:focus {
+ background: #275160; }
+
+.kuiHeaderSectionItem--borderRight:after {
+ left: auto;
+ right: 0; }
+
+.kuiIcon {
+ display: inline-block;
+ vertical-align: middle;
+ fill: #F5F5F5; }
+ .kuiIcon:focus {
+ opacity: 1;
+ background: #275160; }
+
+.kuiIcon--basic {
+ fill: #F5F5F5; }
+
+.kuiIcon--medium {
+ width: 16px;
+ height: 16px; }
+
+.kuiIcon--large {
+ width: 24px;
+ height: 24px; }
+
+.kuiIcon--xLarge {
+ width: 32px;
+ height: 32px; }
+
+.kuiIcon--xxLarge {
+ width: 40px;
+ height: 40px; }
+
+/**
+ * Dial menu is a phone like dial comprised of an svg icon and a title.
+ */
+/**
+ * 1. Default to grid of 3.
+ */
+.kuiKeyPadMenu {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ width: 288px;
+ /* 1 */ }
+
+/**
+ * 1. If this class is applied to a button, we need to override the Chrome default font.
+ */
+.kuiKeyPadMenuItem {
+ display: block;
+ padding: 16px;
+ height: 96px;
+ width: 96px;
+ color: #D9D9D9;
+ border: 1px solid #444;
+ border-color: transparent;
+ border-radius: 4px;
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ /* 1 */ }
+ .kuiKeyPadMenuItem:hover, .kuiKeyPadMenuItem:focus {
+ border-color: #444; }
+ .kuiKeyPadMenuItem:hover .kuiKeyPadMenuItem__icon, .kuiKeyPadMenuItem:focus .kuiKeyPadMenuItem__icon {
+ -webkit-transform: translateY(0);
+ transform: translateY(0); }
+ .kuiKeyPadMenuItem:focus {
+ background: #275160; }
+ .kuiKeyPadMenuItem:focus .kuiKeyPadMenuItem__label {
+ text-decoration: underline; }
+
+.kuiKeyPadMenuItem__inner {
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center; }
+
+.kuiKeyPadMenuItem__icon {
+ transition: -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
+ transition: transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
+ transition: transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
+ -webkit-transform: translateY(4px);
+ transform: translateY(4px);
+ margin-bottom: 8px; }
+
+.kuiKeyPadMenuItem__label {
+ font-size: 14px;
+ font-size: 0.875rem;
+ line-height: 18px;
+ text-align: center; }
+
+.kuiLink {
+ color: #4da1c0; }
+ .kuiLink:hover {
+ text-decoration: underline; }
+ .kuiLink:focus {
+ text-decoration: underline;
+ background: #275160; }
+ .kuiLink:hover {
+ color: #3985a1; }
+ .kuiLink:focus {
+ background: #275160;
+ outline: solid 3px #275160; }
+
+.kuiLoadingKibana {
+ position: relative;
+ display: inline-block; }
+ .kuiLoadingKibana:before, .kuiLoadingKibana:after {
+ position: absolute;
+ content: "";
+ width: 90%;
+ left: 50%;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ border-radius: 50%;
+ opacity: 0.2;
+ -webkit-transform-origin: -50% -50%;
+ transform-origin: -50% -50%;
+ z-index: 1; }
+ .kuiLoadingKibana:before {
+ box-shadow: 0 0 8px #FFF;
+ -webkit-animation: 1s kuiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
+ animation: 1s kuiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; }
+ .kuiLoadingKibana:after {
+ background-color: #FFF;
+ -webkit-animation: 1s kuiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
+ animation: 1s kuiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; }
+
+/**
+ * 1. Requires pixel math for animation.
+ */
+.kuiLoadingKibana--medium:before, .kuiLoadingKibana--medium:after {
+ height: 3px;
+ /* 1 */
+ bottom: -4px; }
+
+.kuiLoadingKibana--medium .kuiLoadingKibana__icon {
+ z-index: 999;
+ -webkit-animation: 1s kuiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
+ animation: 1s kuiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; }
+
+/**
+ * 1. Requires pixel math for animation.
+ */
+.kuiLoadingKibana--large:before, .kuiLoadingKibana--large:after {
+ height: 6px;
+ /* 1 */
+ bottom: -8px; }
+
+.kuiLoadingKibana--large .kuiLoadingKibana__icon {
+ -webkit-animation: 1s kuiLoadingKibanaBounceLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
+ animation: 1s kuiLoadingKibanaBounceLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; }
+
+.kuiLoadingKibana--xLarge:before, .kuiLoadingKibana--xLarge:after {
+ height: 8px;
+ bottom: -12px; }
+
+.kuiLoadingKibana--xLarge .kuiLoadingKibana__icon {
+ -webkit-animation: 1s kuiLoadingKibanaBounceXLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
+ animation: 1s kuiLoadingKibanaBounceXLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; }
+
+@-webkit-keyframes kuiLoadingKibanaBounceMedium {
+ 50% {
+ -webkit-transform: translateY(-8px);
+ transform: translateY(-8px); } }
+
+@keyframes kuiLoadingKibanaBounceMedium {
+ 50% {
+ -webkit-transform: translateY(-8px);
+ transform: translateY(-8px); } }
+
+@-webkit-keyframes kuiLoadingKibanaBounceLarge {
+ 50% {
+ -webkit-transform: translateY(-12px);
+ transform: translateY(-12px); } }
+
+@keyframes kuiLoadingKibanaBounceLarge {
+ 50% {
+ -webkit-transform: translateY(-12px);
+ transform: translateY(-12px); } }
+
+@-webkit-keyframes kuiLoadingKibanaBounceXLarge {
+ 50% {
+ -webkit-transform: translateY(-16px);
+ transform: translateY(-16px); } }
+
+@keyframes kuiLoadingKibanaBounceXLarge {
+ 50% {
+ -webkit-transform: translateY(-16px);
+ transform: translateY(-16px); } }
+
+@-webkit-keyframes kuiLoadingKibanaPulsateAndFade {
+ 0% {
+ opacity: 0; }
+ 50% {
+ -webkit-transform: scale(0.5);
+ transform: scale(0.5);
+ opacity: 0.1; }
+ 100% {
+ opacity: 0; } }
+
+@keyframes kuiLoadingKibanaPulsateAndFade {
+ 0% {
+ opacity: 0; }
+ 50% {
+ -webkit-transform: scale(0.5);
+ transform: scale(0.5);
+ opacity: 0.1; }
+ 100% {
+ opacity: 0; } }
+
+@-webkit-keyframes kuiLoadingKibanaPulsate {
+ 0% {
+ opacity: 0.15; }
+ 50% {
+ -webkit-transform: scale(0.5);
+ transform: scale(0.5);
+ opacity: 0.05; }
+ 100% {
+ opacity: 0.15; } }
+
+@keyframes kuiLoadingKibanaPulsate {
+ 0% {
+ opacity: 0.15; }
+ 50% {
+ -webkit-transform: scale(0.5);
+ transform: scale(0.5);
+ opacity: 0.05; }
+ 100% {
+ opacity: 0.15; } }
+
+.kuiLoadingChart {
+ height: 32px;
+ z-index: 500;
+ overflow: hidden;
+ display: inline-block; }
+
+.kuiLoadingChart__bar {
+ height: 100%;
+ width: 8px;
+ display: inline-block;
+ float: left;
+ margin-bottom: -16px;
+ margin-left: 2px;
+ -webkit-animation: kuiLoadingChart 1s infinite;
+ animation: kuiLoadingChart 1s infinite; }
+ .kuiLoadingChart__bar:nth-child(1) {
+ background-color: #4da1c0; }
+ .kuiLoadingChart__bar:nth-child(2) {
+ background-color: #00A69B;
+ -webkit-animation-delay: .1s;
+ animation-delay: .1s; }
+ .kuiLoadingChart__bar:nth-child(3) {
+ background-color: #DD0A73;
+ -webkit-animation-delay: .2s;
+ animation-delay: .2s; }
+ .kuiLoadingChart__bar:nth-child(4) {
+ background-color: #F5F5F5;
+ -webkit-animation-delay: .3s;
+ animation-delay: .3s; }
+
+.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(1) {
+ background-color: #444; }
+
+.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(2) {
+ background-color: #3a3a3a; }
+
+.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(3) {
+ background-color: #303030; }
+
+.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(4) {
+ background-color: #252525; }
+
+.kuiLoadingChart--medium {
+ height: 16px; }
+ .kuiLoadingChart--medium > div {
+ width: 2px;
+ margin-left: 2px;
+ margin-bottom: 8px; }
+
+.kuiLoadingChart--large {
+ height: 24px; }
+ .kuiLoadingChart--large > div {
+ width: 4px;
+ margin-left: 2px;
+ margin-bottom: 12px; }
+
+.kuiLoadingChart--xLarge {
+ height: 32px; }
+ .kuiLoadingChart--xLarge > div {
+ width: 8px;
+ margin-left: 4px;
+ margin-bottom: 16px; }
+
+@-webkit-keyframes kuiLoadingChart {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0); }
+ 50% {
+ -webkit-transform: translateY(66%);
+ transform: translateY(66%); }
+ 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0); } }
+
+@keyframes kuiLoadingChart {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0); }
+ 50% {
+ -webkit-transform: translateY(66%);
+ transform: translateY(66%); }
+ 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0); } }
+
+.kuiLoadingSpinner {
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ border: solid 2px #444;
+ border-top-color: #4da1c0;
+ -webkit-animation: kuiLoadingSpinner .6s infinite linear;
+ animation: kuiLoadingSpinner .6s infinite linear; }
+
+.kuiLoadingSpinner--small {
+ width: 8px;
+ height: 8px;
+ border-width: 1px; }
+
+.kuiLoadingSpinner--medium {
+ width: 16px;
+ height: 16px;
+ border-width: 1px; }
+
+.kuiLoadingSpinner--large {
+ width: 24px;
+ height: 24px; }
+
+.kuiLoadingSpinner--xLarge {
+ width: 32px;
+ height: 32px; }
+
+@-webkit-keyframes kuiLoadingSpinner {
+ from {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg); }
+ to {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg); } }
+
+@keyframes kuiLoadingSpinner {
+ from {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg); }
+ to {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg); } }
+
+.kuiModalOverlay {
+ position: fixed;
+ z-index: 6000;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: rgba(34, 34, 34, 0.9);
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding-bottom: 10vh;
+ -webkit-animation: kuiAnimFadeIn 150ms ease-in;
+ animation: kuiAnimFadeIn 150ms ease-in; }
+
+.kuiModal {
+ box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+ background-color: #222;
+ border: 1px solid #444;
+ border-radius: 4px;
+ z-index: 8000;
+ padding: 32px;
+ min-width: 50%;
+ -webkit-animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1);
+ animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); }
+
+.kuiModalHeader {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center; }
+
+.kuiModalHeader__title {
+ font-size: 24px;
+ font-size: 1.5rem;
+ line-height: 36px; }
+
+.kuiModalBody {
+ padding: 32px 0; }
+
+.kuiModalFooter {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end; }
+ .kuiModalFooter > * + * {
+ margin-left: 16px; }
+
+@-webkit-keyframes kuiModal {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(32px);
+ transform: translateY(32px); }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0); } }
+
+@keyframes kuiModal {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(32px);
+ transform: translateY(32px); }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0); } }
+
+.kuiPage {
+ padding: 24px; }
+
+@media only screen and (max-width: 768px) {
+ .kuiPage {
+ padding: 24px 0; } }
+
+.kuiPageBody {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: stretch;
+ -webkit-align-items: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ min-height: 400px; }
+
+@media only screen and (max-width: 768px) {
+ .kuiPageBody {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column; } }
+
+.kuiPageContent {
+ padding: 24px;
+ background: #222;
+ border: 1px solid #444;
+ border-radius: 4px;
+ width: 100%;
+ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); }
+
+.kuiPageContent--verticalCenter {
+ -webkit-align-self: center;
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center; }
+
+.kuiPageContent--horizontalCenter {
+ width: auto;
+ margin: auto; }
+
+@media only screen and (max-width: 768px) {
+ .kuiPageContent {
+ border-radius: 0;
+ border: none; } }
+
+.kuiPageContentHeader {
+ margin-bottom: 24px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center; }
+
+@media only screen and (max-width: 768px) {
+ .kuiPageContentHeader {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column; } }
+
+.kuiPageContentHeaderSection + .kuiPageContentHeaderSection {
+ margin-left: 32px; }
+
+@media only screen and (max-width: 768px) {
+ .kuiPageContentHeaderSection {
+ width: 100%; }
+ .kuiPageContentHeaderSection + .kuiPageContentHeaderSection {
+ margin-left: 0;
+ margin-top: 16px; } }
+
+.kuiPageSideBar {
+ width: 192px;
+ margin-right: 24px; }
+
+@media only screen and (max-width: 768px) {
+ .kuiPageSideBar {
+ width: 100%; } }
+
+.kuiPageHeader {
+ margin-bottom: 24px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center; }
+
+@media only screen and (max-width: 768px) {
+ .kuiPageHeader {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ padding: 0 24px;
+ margin-bottom: 0; } }
+
+.kuiPageHeaderSection + .kuiPageHeaderSection {
+ margin-left: 32px; }
+
+@media only screen and (max-width: 768px) {
+ .kuiPageHeaderSection {
+ width: 100%; }
+ .kuiPageHeaderSection + .kuiPageHeaderSection {
+ margin-left: 0;
+ margin-top: 16px; } }
+
+.kuiPopover {
+ display: inline-block;
+ position: relative; }
+ .kuiPopover.kuiPopover-isOpen .kuiPopover__body {
+ opacity: 1;
+ visibility: visible;
+ z-index: 2000;
+ margin-top: 8px; }
+
+.kuiPopover__body {
+ box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+ background-color: #222;
+ position: absolute;
+ min-width: 256px;
+ top: 100%;
+ left: 50%;
+ border: 1px solid #444;
+ border-radius: 4px 0 4px 4px;
+ padding: 16px;
+ -webkit-transform: translateX(-50%) translateY(8px) translateZ(0);
+ transform: translateX(-50%) translateY(8px) translateZ(0);
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, margin-top cubic-bezier(0.34, 1.61, 0.7, 1) 350ms;
+ -webkit-transform-origin: center top;
+ transform-origin: center top;
+ opacity: 0;
+ visibility: hidden;
+ margin-top: 24px; }
+ .kuiPopover__body:before {
+ position: absolute;
+ content: "";
+ top: -16px;
+ height: 0;
+ width: 0;
+ left: 50%;
+ margin-left: -16px;
+ border-left: 16px solid transparent;
+ border-right: 16px solid transparent;
+ border-bottom: 16px solid #444; }
+ .kuiPopover__body:after {
+ position: absolute;
+ content: "";
+ top: -15px;
+ right: 0;
+ height: 0;
+ left: 50%;
+ margin-left: -16px;
+ width: 0;
+ border-left: 16px solid transparent;
+ border-right: 16px solid transparent;
+ border-bottom: 16px solid #222; }
+
+.kuiPopover--anchorLeft .kuiPopover__body {
+ left: 0;
+ -webkit-transform: translateX(0%) translateY(8px) translateZ(0);
+ transform: translateX(0%) translateY(8px) translateZ(0); }
+ .kuiPopover--anchorLeft .kuiPopover__body:before, .kuiPopover--anchorLeft .kuiPopover__body:after {
+ right: auto;
+ left: 16px;
+ margin: 0; }
+
+.kuiPopover--anchorRight .kuiPopover__body {
+ left: 100%;
+ -webkit-transform: translateX(-100%) translateY(8px) translateZ(0);
+ transform: translateX(-100%) translateY(8px) translateZ(0); }
+ .kuiPopover--anchorRight .kuiPopover__body:before, .kuiPopover--anchorRight .kuiPopover__body:after {
+ right: 16px;
+ left: auto; }
+
+.kuiSideNav__mobileToggle {
+ display: none;
+ border-bottom: 1px solid #444;
+ padding: 16px 24px;
+ width: 100%;
+ text-align: left;
+ /**
+ * 1. This toggle also works with KUI link, but we need the outline
+ * that comes with the focus state.
+ */ }
+ .kuiSideNav__mobileToggle:focus {
+ outline: none; }
+
+.kuiSideNav__mobileIcon {
+ fill: #4da1c0; }
+
+.kuiSideNav__mobileWrap {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex; }
+
+.kuiSideNav__mobileTitle {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ color: #4da1c0; }
+
+@media only screen and (max-width: 768px) {
+ /**
+ * 1. Animation doesn't work against height. Need max-height instead.
+ * We set a value larger than what is needed to fake "auto".
+ */
+ .kuiSideNav-isOpenMobile .kuiSideNav__content {
+ visibility: visible;
+ opacity: 1;
+ margin: 24px;
+ max-height: 5000px;
+ /* 1 */
+ transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
+ .kuiSideNav__mobileToggle {
+ display: block; }
+ .kuiSideNav__content {
+ visibility: hidden;
+ opacity: 0;
+ max-height: 0;
+ margin: 0 24px; } }
+
+.kuiSideNavItem {
+ font-size: 14px;
+ font-size: 0.875rem;
+ line-height: 18px;
+ display: block;
+ width: 100%;
+ text-align: left;
+ padding: 4px 8px;
+ color: #D9D9D9;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border: 1px solid #444;
+ border-color: transparent; }
+ .kuiSideNavItem.kuiSideNavItem-isSelected {
+ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+ color: #00A69B;
+ border-left: 2px solid #444;
+ border-left-color: #00A69B;
+ background-color: #222; }
+ .kuiSideNavItem:hover {
+ text-decoration: underline; }
+ .kuiSideNavItem:focus {
+ background-color: #275160; }
+ .kuiSideNavItem:focus:not(.kuiSideNavItem-isSelected) {
+ border: solid 1px #18323c; }
+
+.kuiSideNavTitle {
+ font-size: 16px;
+ font-size: 1rem;
+ line-height: 24px;
+ font-weight: 500;
+ margin-bottom: 8px;
+ margin-top: 16px;
+ /**
+ * 1. Only want the first title to have margin. Since buttons exist in nav
+ * we need to use first of type.
+ */ }
+ .kuiSideNavTitle:first-of-type {
+ margin-top: 0;
+ /* 1 */ }
+
+/**
+ * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed.
+ */
+/**
+ * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from
+ * specifying a column width, e.g. the checkbox column.
+ */
+.kuiTable {
+ font-size: 14px;
+ font-size: 0.875rem;
+ line-height: 18px;
+ width: 100%;
+ border: none;
+ border-collapse: collapse;
+ background-color: #222; }
+
+.kuiTable--compressed .kuiTableHeaderCell,
+.kuiTable--compressed .kuiTableRowCell__content {
+ padding: 8px; }
+
+.kuiTableHeaderCell {
+ text-align: left;
+ max-width: 20px;
+ /* 1 */
+ padding: 12px;
+ color: #FFF; }
+
+.kuiTableHeaderCell__content {
+ display: inline-block; }
+
+.kuiTableHeaderCell--alignRight {
+ text-align: right; }
+
+.kuiTableRow:hover {
+ background-color: rgba(77, 161, 192, 0.05); }
+
+.kuiTableRow.kuiTableRow-isSelected {
+ background-color: rgba(255, 255, 0, 0.05); }
+
+.kuiTableRowCell {
+ text-align: left;
+ max-width: 20px;
+ /* 1 */
+ color: #F5F5F5;
+ border-top: 1px solid #444;
+ border-bottom: 1px solid #444; }
+
+/**
+ * 1. Vertically align all children.
+ * 2. Truncate text with an ellipsis. The padding on this div allows the ellipsis to show. If
+ * the padding was on the cell, the ellipsis would be cropped.
+ */
+.kuiTableRowCell__content {
+ white-space: nowrap;
+ /* 2 */
+ overflow: hidden;
+ /* 2 */
+ text-overflow: ellipsis;
+ /* 2 */
+ padding: 12px;
+ /* 2 */ }
+ .kuiTableRowCell__content > * {
+ vertical-align: middle;
+ /* 1 */ }
+
+.kuiTableRowCell--alignRight .kuiTableRowCell__content {
+ text-align: right; }
+
+.kuiTableRowCell--wrapText .kuiTableRowCell__content {
+ white-space: normal; }
+
+.kuiTabs {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ border-bottom: 1px solid #444; }
+
+.kuiTab {
+ font-size: 16px;
+ font-size: 1rem;
+ line-height: 24px;
+ position: relative;
+ cursor: pointer;
+ padding: 12px 16px;
+ color: #D9D9D9;
+ background-color: #222;
+ transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
+ .kuiTab:hover:not(.kuiTab-isSelected) {
+ color: #F5F5F5;
+ text-decoration: underline; }
+ .kuiTab:focus {
+ background-color: #275160;
+ text-decoration: underline; }
+ .kuiTab.kuiTab-isSelected {
+ cursor: default;
+ color: #00A69B; }
+ .kuiTab.kuiTab-isSelected:after {
+ position: absolute;
+ bottom: -1px;
+ left: 0;
+ content: ' ';
+ width: 100%;
+ height: 2px;
+ background-color: #00A69B;
+ -webkit-animation: kuiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
+ animation: kuiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
+
+.kuiTab__content {
+ display: block;
+ transition: -webkit-transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1);
+ transition: transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1);
+ transition: transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1);
+ -webkit-transform: translateY(0);
+ transform: translateY(0); }
+
+@-webkit-keyframes kuiTab {
+ 0% {
+ -webkit-transform: scaleX(0);
+ transform: scaleX(0); }
+ 100% {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1); } }
+
+@keyframes kuiTab {
+ 0% {
+ -webkit-transform: scaleX(0);
+ transform: scaleX(0); }
+ 100% {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1); } }
+
+/**
+ * 1. Allow list to expand as items are added, but cap it at the screen height.
+ */
+.kuiGlobalToastList {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: stretch;
+ -webkit-align-items: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ position: fixed;
+ z-index: 5000;
+ bottom: 0;
+ right: 0;
+ width: 320px;
+ overflow-x: hidden;
+ overflow-y: scroll;
+ max-height: 100vh;
+ /* 1 */ }
+ .kuiGlobalToastList::-webkit-scrollbar {
+ width: 16px;
+ height: 16px; }
+ .kuiGlobalToastList::-webkit-scrollbar-thumb {
+ background-color: rgba(217, 217, 217, 0.5);
+ border: 6px solid transparent;
+ background-clip: content-box; }
+ .kuiGlobalToastList::-webkit-scrollbar-track {
+ background-color: transparent; }
+
+.kuiGlobalToastListItem {
+ margin-bottom: 12px;
+ -webkit-animation: 0.5s kuiShowToast;
+ animation: 0.5s kuiShowToast;
+ opacity: 1;
+ /**
+ * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push
+ * items to the bottom instead.
+ */ }
+ .kuiGlobalToastListItem:first-child {
+ margin-top: auto;
+ /* 1 */ }
+ .kuiGlobalToastListItem.kuiGlobalToastListItem-isDismissed {
+ transition: opacity 250ms;
+ opacity: 0; }
+
+@-webkit-keyframes kuiShowToast {
+ from {
+ -webkit-transform: translateX(30px);
+ transform: translateX(30px);
+ opacity: 0; }
+ to {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ opacity: 1; } }
+
+@keyframes kuiShowToast {
+ from {
+ -webkit-transform: translateX(30px);
+ transform: translateX(30px);
+ opacity: 0; }
+ to {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ opacity: 1; } }
+
+.kuiToast {
+ box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+ position: relative;
+ padding: 12px;
+ background-color: #222;
+ border: 1px solid #444; }
+
+/**
+ * 1. Fit button to icon.
+ */
+.kuiToast__closeButton {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ line-height: 0;
+ /* 1 */
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none; }
+ .kuiToast__closeButton svg {
+ fill: #4d4d4d; }
+ .kuiToast__closeButton:hover svg {
+ fill: #FFF; }
+ .kuiToast__closeButton:focus {
+ background-color: #275160; }
+ .kuiToast__closeButton:focus svg {
+ fill: #4da1c0; }
+
+.kuiToast--info {
+ border-top: 2px solid #4da1c0; }
+
+.kuiToast--success {
+ border-top: 2px solid #00A69B; }
+
+.kuiToast--warning {
+ border-top: 2px solid #E5830E; }
+
+.kuiToast--danger {
+ border-top: 2px solid #bf4d4d; }
+
+/**
+ * 1. Align icon with first line of title text if it wraps.
+ * 2. Apply margin to all but last item in the flex.
+ */
+.kuiToastHeader {
+ font-size: 16px;
+ font-size: 1rem;
+ line-height: 24px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: baseline;
+ -webkit-align-items: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+ /* 1 */ }
+ .kuiToastHeader > * + * {
+ margin-left: 8px;
+ /* 2 */ }
+
+/**
+ * 1. Vertically center icon with first line of title.
+ */
+.kuiToastHeader__icon {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ fill: #FFF;
+ -webkit-transform: translateY(2px);
+ transform: translateY(2px);
+ /* 1 */ }
+
+.kuiToastHeader__title {
+ color: #FFF;
+ font-weight: 300; }
+
+.kuiToastHeader--withBody {
+ margin-bottom: 9px; }
+
+.kuiTitle {
+ font-size: 24px;
+ font-size: 1.5rem;
+ line-height: 36px;
+ color: #FFF;
+ font-weight: 300; }
+
+.kuiTitle--small {
+ font-size: 16px;
+ font-size: 1rem;
+ line-height: 24px; }
+
+.kuiTitle--large {
+ font-size: 32px;
+ font-size: 2rem;
+ line-height: 48px; }
+
+.kuiText {
+ font-size: 16px;
+ font-size: 1rem;
+ line-height: 24px;
+ color: #F5F5F5;
+ font-weight: 400; }
+
+.kuiText--small {
+ font-size: 14px;
+ font-size: 0.875rem;
+ line-height: 18px; }
+
+.kuiVerticalRhythm {
+ margin-bottom: 12px; }
+
+.kuiVerticalRhythm--xSmall {
+ margin-bottom: 9px; }
+
+.kuiVerticalRhythm--small {
+ margin-bottom: 9px; }
+
+.kuiVerticalRhythm--large {
+ margin-bottom: 18px; }
+
+.kuiVerticalRhythm--xLarge {
+ margin-bottom: 24px; }
+
+.kuiVerticalRhythm--xxLarge {
+ margin-bottom: 36px; }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework_theme_light.css
similarity index 100%
rename from ui_framework/dist/ui_framework.css
rename to ui_framework/dist/ui_framework_theme_light.css
diff --git a/ui_framework/doc_site/src/components/guide_nav/guide_nav.js b/ui_framework/doc_site/src/components/guide_nav/guide_nav.js
index 512d0430d9fd3a..eda077cf2330a1 100644
--- a/ui_framework/doc_site/src/components/guide_nav/guide_nav.js
+++ b/ui_framework/doc_site/src/components/guide_nav/guide_nav.js
@@ -9,6 +9,11 @@ import {
import classNames from 'classnames';
+import {
+ getTheme,
+ applyTheme,
+} from '../../services';
+
export class GuideNav extends Component {
constructor(props) {
super(props);
@@ -21,9 +26,23 @@ export class GuideNav extends Component {
search: '',
nextRoute,
previousRoute,
+ theme: getTheme(),
};
this.onSearchChange = this.onSearchChange.bind(this);
+ this.onToggleTheme = this.onToggleTheme.bind(this);
+ }
+
+ onToggleTheme() {
+ if (getTheme() === 'light') {
+ applyTheme('dark');
+ } else {
+ applyTheme('light');
+ }
+
+ this.setState({
+ theme: getTheme(),
+ });
}
onSearchChange(event) {
@@ -52,6 +71,30 @@ export class GuideNav extends Component {
}
renderPagination() {
+ let hideChromeButton;
+
+ if (this.props.isSandbox) {
+ hideChromeButton = (
+
+ );
+ }
+
+ const themeButton = (
+
+ );
+
const previousClasses = classNames('guideNavPaginationButton', {
'guideNavPaginationButton-isDisabled': !this.state.previousRoute,
});
@@ -78,23 +121,10 @@ export class GuideNav extends Component {
);
- let hideChromeButton;
-
- if (this.props.isSandbox) {
- hideChromeButton = (
-
- );
- }
-
return (
{hideChromeButton}
+ {themeButton}
{previousButton}
{nextButton}
diff --git a/ui_framework/doc_site/src/index.js b/ui_framework/doc_site/src/index.js
index 40131dbcc52051..8a0386242e9c86 100644
--- a/ui_framework/doc_site/src/index.js
+++ b/ui_framework/doc_site/src/index.js
@@ -1,5 +1,3 @@
-require('./main.scss');
-
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
@@ -21,8 +19,29 @@ import { NotFoundView } from './views/not_found/not_found_view';
import {
Routes,
+ registerTheme,
} from './services';
+// Set up themes
+
+import themeLight from '!style/useable!css!postcss!sass!./theme_light.scss';
+import uiFrameworkThemeLight from '!style/useable!css!../../dist/ui_framework_theme_light.css';
+
+registerTheme('light', [
+ themeLight,
+ uiFrameworkThemeLight,
+]);
+
+import themeDark from '!style/useable!css!postcss!sass!./theme_dark.scss';
+import uiFrameworkThemeDark from '!style/useable!css!../../dist/ui_framework_theme_dark.css';
+
+registerTheme('dark', [
+ themeDark,
+ uiFrameworkThemeDark,
+]);
+
+// Set up app
+
const store = configureStore();
const browserHistory = useRouterHistory(createHashHistory)({
queryKey: false,
diff --git a/ui_framework/doc_site/src/main.scss b/ui_framework/doc_site/src/main.scss
deleted file mode 100644
index 7472366bdd57db..00000000000000
--- a/ui_framework/doc_site/src/main.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "../../dist/ui_framework.css";
-@import "../../src/global_styling/variables/_index.scss";
-@import "./components/guide_components";
diff --git a/ui_framework/doc_site/src/services/index.js b/ui_framework/doc_site/src/services/index.js
index eaf038ac297277..5eac545b82c4b3 100644
--- a/ui_framework/doc_site/src/services/index.js
+++ b/ui_framework/doc_site/src/services/index.js
@@ -6,4 +6,10 @@ export { default as JsInjector } from './js_injector/js_injector';
export { default as Routes } from './routes/routes';
+export {
+ registerTheme,
+ applyTheme,
+ getTheme,
+} from './theme/theme';
+
export { default as Slugify } from './string/slugify';
diff --git a/ui_framework/doc_site/src/services/theme/theme.js b/ui_framework/doc_site/src/services/theme/theme.js
new file mode 100644
index 00000000000000..39bd3c2288fd37
--- /dev/null
+++ b/ui_framework/doc_site/src/services/theme/theme.js
@@ -0,0 +1,23 @@
+let activeTheme;
+const themes = {};
+
+export function registerTheme(theme, cssFiles) {
+ themes[theme] = cssFiles;
+
+ if (!activeTheme) {
+ applyTheme(theme);
+ }
+}
+
+export function applyTheme(newTheme) {
+ if (activeTheme) {
+ themes[activeTheme].forEach(cssFile => cssFile.unuse());
+ }
+
+ activeTheme = newTheme;
+ themes[activeTheme].forEach(cssFile => cssFile.use());
+}
+
+export function getTheme() {
+ return activeTheme;
+}
diff --git a/ui_framework/doc_site/src/theme_dark.scss b/ui_framework/doc_site/src/theme_dark.scss
new file mode 100644
index 00000000000000..bc01f657d82039
--- /dev/null
+++ b/ui_framework/doc_site/src/theme_dark.scss
@@ -0,0 +1,2 @@
+@import "../../src/global_styling/theme_dark_variables";
+@import "./components/guide_components";
diff --git a/ui_framework/doc_site/src/theme_light.scss b/ui_framework/doc_site/src/theme_light.scss
new file mode 100644
index 00000000000000..5412befb0525ac
--- /dev/null
+++ b/ui_framework/doc_site/src/theme_light.scss
@@ -0,0 +1,3 @@
+@import "../../src/global_styling/theme_light_variables";
+@import "./components/guide_components";
+
diff --git a/ui_framework/doc_site/webpack.config.js b/ui_framework/doc_site/webpack.config.js
index dc0c471d0a8259..7716637c70c8ba 100644
--- a/ui_framework/doc_site/webpack.config.js
+++ b/ui_framework/doc_site/webpack.config.js
@@ -40,6 +40,14 @@ module.exports = {
test: /\.scss$/,
loaders: ['style', 'css', 'postcss', 'sass'],
exclude: /node_modules/
+ }, {
+ test: /\.css$/,
+ loaders: ['style', 'css'],
+ exclude: /node_modules/
+ }, {
+ test: /\.useable\.css$/,
+ loaders: ['style/useable', 'css'],
+ exclude: /node_modules/
}, {
test: /\.html$/,
loader: 'html',
diff --git a/ui_framework/src/components/expression/expressionItem.js b/ui_framework/src/components/expression/expressionItem.js
new file mode 100644
index 00000000000000..a1e35b625b9805
--- /dev/null
+++ b/ui_framework/src/components/expression/expressionItem.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const KuiExpressionItem = ({
+ children,
+ className,
+ ...rest
+}) => {
+ const classes = classNames('kuiExpressionItem', className);
+
+ return (
+
+ {children}
+
+ );
+};
+
+KuiExpressionItem.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string
+};
diff --git a/ui_framework/src/components/expression/expressionItemButton.js b/ui_framework/src/components/expression/expressionItemButton.js
new file mode 100644
index 00000000000000..9afbfa390707fb
--- /dev/null
+++ b/ui_framework/src/components/expression/expressionItemButton.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const KuiExpressionItemButton = ({
+ className,
+ description,
+ value,
+ isActive,
+ onClick,
+ ...rest
+}) => {
+ const classes = classNames('kuiExpressionItem__button', className, {
+ 'kuiExpressionItem__button--isActive': isActive
+ });
+
+ return (
+
+ );
+};
+
+KuiExpressionItemButton.propTypes = {
+ className: PropTypes.string,
+ description: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ isActive: PropTypes.bool.isRequired,
+ onClick: PropTypes.func.isRequired,
+};
diff --git a/ui_framework/src/components/expression/expressionItemPopover.js b/ui_framework/src/components/expression/expressionItemPopover.js
new file mode 100644
index 00000000000000..3a506583250d48
--- /dev/null
+++ b/ui_framework/src/components/expression/expressionItemPopover.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const POPOVER_ALIGN = [
+ 'left',
+ 'right',
+];
+
+/*
+With some modification copy-pasted from
+https://stackoverflow.com/questions/32553158/detect-click-outside-react-component
+*/
+const outsideClickNotifier = WrappedComponent => class extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.handleClickOutside = this.handleClickOutside.bind(this);
+ }
+
+ componentDidMount() {
+ document.addEventListener('mousedown', this.handleClickOutside);
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener('mousedown', this.handleClickOutside);
+ }
+
+ handleClickOutside(event) {
+ if (!this.wrapperRef) {
+ return;
+ }
+
+ if (!this.props.isVisible) {
+ return;
+ }
+
+ if ((this.wrapperRef !== event.target) && !this.wrapperRef.contains(event.target)) {
+ this.props.onOutsideClick();
+ }
+ }
+
+ render() {
+ const { onOutsideClick, ...rest } = this.props; //eslint-disable-line no-unused-vars
+ return this.wrapperRef = node} {...rest} />;
+ }
+
+ static propTypes = {
+ onOutsideClick: PropTypes.func.isRequired,
+ isVisible: PropTypes.bool.isRequired,
+ };
+};
+
+let KuiExpressionItemPopover = ({
+ className,
+ title,
+ isVisible,
+ children,
+ rootRef,
+ align = 'left',
+ ...rest
+}) => {
+ const classes = classNames('kuiExpressionItem__popover', className, {
+ 'kuiExpressionItem__popover--isHidden': !isVisible,
+ 'kuiExpressionItem__popover--alignRight': align === 'right'
+ });
+ return (
+
+
+ {title}
+
+
+ {children}
+
+