From 8800afd1d60a1d1a2d907ccd5ba5c881a51cf7dc Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Tue, 10 Apr 2018 10:44:44 -0700 Subject: [PATCH] Removing old files that are no longer used (#17640) --- .../dist/ui_framework_theme_dark.css | 3674 ----------------- .../dist/ui_framework_theme_light.css | 3674 ----------------- 2 files changed, 7348 deletions(-) delete mode 100644 packages/kbn-ui-framework/dist/ui_framework_theme_dark.css delete mode 100644 packages/kbn-ui-framework/dist/ui_framework_theme_light.css diff --git a/packages/kbn-ui-framework/dist/ui_framework_theme_dark.css b/packages/kbn-ui-framework/dist/ui_framework_theme_dark.css deleted file mode 100644 index 7db13ea6e45eff..00000000000000 --- a/packages/kbn-ui-framework/dist/ui_framework_theme_dark.css +++ /dev/null @@ -1,3674 +0,0 @@ -@-webkit-keyframes kuiAnimFadeIn { - 0% { - opacity: 0; } - 100% { - opacity: 1; } } - -@keyframes kuiAnimFadeIn { - 0% { - opacity: 0; } - 100% { - opacity: 1; } } - -@-webkit-keyframes kuiGrow { - 0% { - opacity: 0; } - 1% { - opacity: 0; - -webkit-transform: scale(0); - transform: scale(0); } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes kuiGrow { - 0% { - opacity: 0; } - 1% { - opacity: 0; - -webkit-transform: scale(0); - transform: scale(0); } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(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: #DDD; - height: 100%; - background-color: #272727; - -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; - color: inherit; } - 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: 1.5; } - -.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; } - -.kuiAccordion__button { - text-align: left; - width: 100%; } - .kuiAccordion__button:hover, .kuiAccordion__button:focus { - text-decoration: underline; - cursor: pointer; } - .kuiAccordion__button:focus { - background-color: #275160; } - -.kuiAccordion__childWrapper { - visibility: hidden; - height: 0; - opacity: 0; - overflow-y: hidden; - -webkit-transform: translatez(0); - transform: translatez(0); - transition: height 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - -.kuiAccordion.kuiAccordion-isOpen .kuiAccordion__childWrapper { - visibility: visible; - opacity: 1; } - -.kuiAccordionForm__children { - padding: 24px; } - -.kuiAccordionForm__extraAction { - opacity: 0; - transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiAccordionForm__extraAction:focus { - opacity: 1; } - -.kuiAccordionForm__title { - display: inline-block; } - -.kuiAccordionForm__button { - padding: 16px; } - .kuiAccordionForm__button:hover { - text-decoration: none; } - .kuiAccordionForm__button:hover .kuiAccordionForm__title { - text-decoration: underline; } - .kuiAccordionForm__button:focus { - text-decoration: none; - background-color: transparent; } - .kuiAccordionForm__button:focus .kuiAccordionForm__title { - text-decoration: underline; - background-color: #275160; - outline: solid 2px #275160; } - -.kuiAccordionForm { - border-top: 1px solid #333; - border-bottom: 1px solid #333; } - .kuiAccordionForm + .kuiAccordionForm { - border-top: none; } - .kuiAccordionForm:hover .kuiAccordionForm__extraAction { - opacity: 1; - visibility: visible; } - -.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; } - -.kuiBadge { - font-size: 12px; - line-height: 24px; - display: inline-block; - text-decoration: none; - border: solid 1px transparent; - border-radius: 24px; - padding: 0 8px; - background-color: transparent; - white-space: nowrap; - vertical-align: middle; } - .kuiBadge .kuiBadge__content { - 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; } - .kuiBadge .kuiBadge__icon { - margin-right: 4px; } - .kuiBadge.kuiBadge--iconRight .kuiBadge__content { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - .kuiBadge.kuiBadge--iconRight .kuiBadge__content .kuiBadge__icon { - margin-left: 4px; - margin-right: 0; } - -.kuiBadge--default { - border-color: #333; - background-color: rgba(51, 51, 51, 0.1); } - -.kuiBadge--primary { - border-color: #4da1c0; - background-color: rgba(77, 161, 192, 0.1); } - -.kuiBadge--secondary { - border-color: #00A69B; - background-color: rgba(0, 166, 155, 0.1); } - -.kuiBadge--warning { - border-color: #E5830E; - background-color: rgba(229, 131, 14, 0.1); } - -.kuiBadge--danger { - border-color: #bf4d4d; - background-color: rgba(191, 77, 77, 0.1); } - -.kuiBadge--accent { - border-color: #DD0A73; - background-color: rgba(221, 10, 115, 0.1); } - -.kuiBottomBar { - background: #1a1a1a; - color: #222; - position: fixed; - bottom: 0; - right: 0; - left: 0; - -webkit-animation: kuiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); - z-index: 4000; } - .kuiBottomBar.kuiBottomBar--paddingSmall { - padding: 8px; } - .kuiBottomBar.kuiBottomBar--paddingMedium { - padding: 16px; } - .kuiBottomBar.kuiBottomBar--paddingLarge { - padding: 24px; } - -@-webkit-keyframes kuiBottomBarAppear { - 0% { - -webkit-transform: translateY(100%); - transform: translateY(100%); - opacity: 0; } - 100% { - -webkit-transform: translateY(0%); - transform: translateY(0%); - opacity: 1; } } - -@keyframes kuiBottomBarAppear { - 0% { - -webkit-transform: translateY(100%); - transform: translateY(100%); - opacity: 0; } - 100% { - -webkit-transform: translateY(0%); - transform: translateY(0%); - opacity: 1; } } - -/** - * 1. Apply margin to all but last item in the flex. - * 2. Margin gets flipped because of the row-reverse. - */ -@-webkit-keyframes kuiButtonActive { - 50% { - -webkit-transform: translateY(1px); - transform: translateY(1px); } } -@keyframes kuiButtonActive { - 50% { - -webkit-transform: translateY(1px); - transform: translateY(1px); } } - -.kuiButton { - display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - height: 40px; - text-decoration: none; - border: solid 1px transparent; - text-align: center; - font-family: "Roboto", Helvetica, Arial, sans-serif; - transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - white-space: nowrap; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.15); - border-radius: 4px; - min-width: 112px; } - .kuiButton:hover { - -webkit-transform: translateY(-1px); - transform: translateY(-1px); } - .kuiButton:hover, .kuiButton:focus { - text-decoration: underline; } - .kuiButton:focus { - -webkit-animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } - .kuiButton:active { - -webkit-transform: translateY(1px); - transform: translateY(1px); } - .kuiButton .kuiButton__content { - height: 100%; - width: 100%; - 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; - padding: 0 12px; } - .kuiButton .kuiButton__content > * + * { - margin-left: 8px; - /* 1 */ } - .kuiButton.kuiButton--small { - height: 32px; } - .kuiButton.kuiButton--iconRight .kuiButton__content { - height: 100%; - width: 100%; - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - .kuiButton.kuiButton--iconRight .kuiButton__content > * + * { - margin-left: 0; - /* 1 */ - margin-right: 8px; - /* 1 */ } - .kuiButton:hover { - box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1); } - .kuiButton:active { - box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.2); } - .kuiButton:hover, .kuiButton:focus { - background-color: rgba(77, 161, 192, 0.1); } - .kuiButton:disabled { - color: #2c2c2c; - border-color: #2c2c2c; - pointer-events: none; } - .kuiButton:disabled .kuiButton__content { - pointer-events: auto; - cursor: not-allowed; } - .kuiButton:disabled .kuiButton__icon { - fill: #2c2c2c; } - .kuiButton:disabled.kuiButton--fill { - background-color: #2c2c2c; - border-color: #2c2c2c; } - .kuiButton:disabled.kuiButton--fill:hover, .kuiButton:disabled.kuiButton--fill:focus { - background-color: #2c2c2c; - border-color: #2c2c2c; } - .kuiButton:disabled:hover, .kuiButton:disabled:focus { - background-color: #222; - text-decoration: none; } - -.kuiButton--primary { - color: #4da1c0; - border-color: #4da1c0; } - .kuiButton--primary .kuiButton__icon { - fill: #4da1c0; } - .kuiButton--primary.kuiButton--fill { - background-color: #4da1c0; - border-color: #4da1c0; - color: #DDD; } - .kuiButton--primary.kuiButton--fill:hover, .kuiButton--primary.kuiButton--fill:focus { - background-color: #4095b4; - border-color: #4095b4; } - .kuiButton--primary.kuiButton--fill .kuiButton__icon { - fill: #DDD; } - .kuiButton--primary:hover, .kuiButton--primary:focus { - background-color: rgba(77, 161, 192, 0.1); } - -.kuiButton--secondary { - color: #00A69B; - border-color: #00A69B; } - .kuiButton--secondary .kuiButton__icon { - fill: #00A69B; } - .kuiButton--secondary.kuiButton--fill { - background-color: #00A69B; - border-color: #00A69B; - color: #DDD; } - .kuiButton--secondary.kuiButton--fill:hover, .kuiButton--secondary.kuiButton--fill:focus { - background-color: #008d83; - border-color: #008d83; } - .kuiButton--secondary.kuiButton--fill .kuiButton__icon { - fill: #DDD; } - .kuiButton--secondary:hover, .kuiButton--secondary:focus { - background-color: rgba(0, 166, 155, 0.1); } - -.kuiButton--warning { - color: #E5830E; - border-color: #E5830E; } - .kuiButton--warning .kuiButton__icon { - fill: #E5830E; } - .kuiButton--warning.kuiButton--fill { - background-color: #E5830E; - border-color: #E5830E; - color: #DDD; } - .kuiButton--warning.kuiButton--fill:hover, .kuiButton--warning.kuiButton--fill:focus { - background-color: #cd750d; - border-color: #cd750d; } - .kuiButton--warning.kuiButton--fill .kuiButton__icon { - fill: #DDD; } - .kuiButton--warning:hover, .kuiButton--warning:focus { - background-color: rgba(229, 131, 14, 0.1); } - -.kuiButton--danger { - color: #bf4d4d; - border-color: #bf4d4d; } - .kuiButton--danger .kuiButton__icon { - fill: #bf4d4d; } - .kuiButton--danger.kuiButton--fill { - background-color: #bf4d4d; - border-color: #bf4d4d; - color: #DDD; } - .kuiButton--danger.kuiButton--fill:hover, .kuiButton--danger.kuiButton--fill:focus { - background-color: #b24040; - border-color: #b24040; } - .kuiButton--danger.kuiButton--fill .kuiButton__icon { - fill: #DDD; } - .kuiButton--danger:hover, .kuiButton--danger:focus { - background-color: rgba(191, 77, 77, 0.1); } - -.kuiButton--ghost { - color: #FFF; - border-color: #FFF; } - .kuiButton--ghost .kuiButton__icon { - fill: #FFF; } - .kuiButton--ghost.kuiButton--fill { - background-color: #FFF; - border-color: #FFF; - color: #000; } - .kuiButton--ghost.kuiButton--fill:hover, .kuiButton--ghost.kuiButton--fill:focus { - background-color: #f2f2f2; - border-color: #f2f2f2; } - .kuiButton--ghost.kuiButton--fill .kuiButton__icon { - fill: #000; } - .kuiButton--ghost:hover, .kuiButton--ghost:focus { - background-color: rgba(255, 255, 255, 0.1); } - -.kuiButtonEmpty { - display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - height: 40px; - text-decoration: none; - border: solid 1px transparent; - text-align: center; - font-family: "Roboto", Helvetica, Arial, sans-serif; - transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - white-space: nowrap; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - border-color: transparent; - background-color: transparent; - box-shadow: none; } - .kuiButtonEmpty:hover { - -webkit-transform: translateY(-1px); - transform: translateY(-1px); } - .kuiButtonEmpty:hover, .kuiButtonEmpty:focus { - text-decoration: underline; } - .kuiButtonEmpty:focus { - -webkit-animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } - .kuiButtonEmpty:active { - -webkit-transform: translateY(1px); - transform: translateY(1px); } - .kuiButtonEmpty .kuiButtonEmpty__content { - height: 100%; - width: 100%; - 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; - padding: 0 8px; } - .kuiButtonEmpty .kuiButtonEmpty__content > * + * { - margin-left: 8px; - /* 1 */ } - .kuiButtonEmpty.kuiButtonEmpty--small { - height: 32px; } - .kuiButtonEmpty.kuiButtonEmpty--iconRight .kuiButtonEmpty__content { - height: 100%; - width: 100%; - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - .kuiButtonEmpty.kuiButtonEmpty--iconRight .kuiButtonEmpty__content > * + * { - margin-left: 0; - /* 1 */ - margin-right: 8px; - /* 1 */ } - .kuiButtonEmpty:disabled { - color: #2c2c2c; - pointer-events: none; } - .kuiButtonEmpty:disabled .kuiButtonEmpty__content { - pointer-events: auto; - cursor: not-allowed; } - .kuiButtonEmpty:disabled .kuiButtonEmpty__icon { - fill: #2c2c2c; } - .kuiButtonEmpty:disabled:hover, .kuiButtonEmpty:disabled:focus { - background-color: #222; - text-decoration: none; } - -.kuiButtonEmpty--primary { - color: #4da1c0; } - .kuiButtonEmpty--primary .kuiButtonEmpty__icon { - fill: #4da1c0; } - .kuiButtonEmpty--primary:focus { - background-color: rgba(77, 161, 192, 0.1); } - .kuiButtonEmpty--primary:hover, .kuiButtonEmpty--primary:focus { - background-color: rgba(77, 161, 192, 0.1); } - -.kuiButtonEmpty--danger { - color: #bf4d4d; } - .kuiButtonEmpty--danger .kuiButtonEmpty__icon { - fill: #bf4d4d; } - .kuiButtonEmpty--danger:focus { - background-color: rgba(191, 77, 77, 0.1); } - .kuiButtonEmpty--danger:hover, .kuiButtonEmpty--danger:focus { - background-color: rgba(191, 77, 77, 0.1); } - -.kuiButtonEmpty--disabled { - color: #2c2c2c; } - .kuiButtonEmpty--disabled .kuiButtonEmpty__icon { - fill: #2c2c2c; } - .kuiButtonEmpty--disabled:focus { - background-color: rgba(44, 44, 44, 0.1); } - .kuiButtonEmpty--disabled:hover, .kuiButtonEmpty--disabled:focus { - background-color: rgba(44, 44, 44, 0.1); - cursor: not-allowed; } - -.kuiButtonEmpty--ghost { - color: #FFF; } - .kuiButtonEmpty--ghost .kuiButtonEmpty__icon { - fill: #FFF; } - .kuiButtonEmpty--ghost:focus { - background-color: rgba(255, 255, 255, 0.1); } - .kuiButtonEmpty--ghost:hover, .kuiButtonEmpty--ghost:focus { - background-color: rgba(255, 255, 255, 0.1); } - -.kuiButtonEmpty--flushLeft .kuiButtonEmpty__content { - border-left: none; - padding-left: 0; } - -.kuiButtonEmpty--flushRight .kuiButtonEmpty__content { - border-right: none; - padding-right: 0; } - -.kuiButtonIcon { - display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - height: 40px; - text-decoration: none; - border: solid 1px transparent; - text-align: center; - font-family: "Roboto", Helvetica, Arial, sans-serif; - transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - white-space: nowrap; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - border-color: transparent; - background-color: transparent; - box-shadow: none; - height: 32px; - width: 32px; } - .kuiButtonIcon:hover { - -webkit-transform: translateY(-1px); - transform: translateY(-1px); } - .kuiButtonIcon:hover, .kuiButtonIcon:focus { - text-decoration: underline; } - .kuiButtonIcon:focus { - -webkit-animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } - .kuiButtonIcon:active { - -webkit-transform: translateY(1px); - transform: translateY(1px); } - .kuiButtonIcon .kuiButtonIcon__icon { - -webkit-transform: translateY(-2px); - transform: translateY(-2px); } - .kuiButtonIcon:disabled { - color: #2c2c2c; - pointer-events: none; } - .kuiButtonIcon:disabled .kuiButtonIcon__icon { - fill: #2c2c2c; } - .kuiButtonIcon:disabled:hover, .kuiButtonIcon:disabled:focus { - background-color: #222; - text-decoration: none; } - -.kuiButtonIcon--primary { - color: #4da1c0; } - .kuiButtonIcon--primary .kuiButtonIcon__icon { - fill: #4da1c0; } - .kuiButtonIcon--primary:focus { - background-color: rgba(77, 161, 192, 0.1); } - .kuiButtonIcon--primary:hover, .kuiButtonIcon--primary:focus { - background-color: rgba(77, 161, 192, 0.1); } - -.kuiButtonIcon--danger { - color: #bf4d4d; } - .kuiButtonIcon--danger .kuiButtonIcon__icon { - fill: #bf4d4d; } - .kuiButtonIcon--danger:focus { - background-color: rgba(191, 77, 77, 0.1); } - .kuiButtonIcon--danger:hover, .kuiButtonIcon--danger:focus { - background-color: rgba(191, 77, 77, 0.1); } - -.kuiButtonIcon--disabled { - color: #2c2c2c; } - .kuiButtonIcon--disabled .kuiButtonIcon__icon { - fill: #2c2c2c; } - .kuiButtonIcon--disabled:focus { - background-color: rgba(44, 44, 44, 0.1); } - .kuiButtonIcon--disabled:hover, .kuiButtonIcon--disabled:focus { - background-color: rgba(44, 44, 44, 0.1); - cursor: not-allowed; } - -.kuiButtonIcon--ghost { - color: #FFF; } - .kuiButtonIcon--ghost .kuiButtonIcon__icon { - fill: #FFF; } - .kuiButtonIcon--ghost:focus { - background-color: rgba(255, 255, 255, 0.1); } - .kuiButtonIcon--ghost:hover, .kuiButtonIcon--ghost:focus { - background-color: rgba(255, 255, 255, 0.1); } - -.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: 1.5; - 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 */ } - -.kuiCode { - font-family: "Roboto Mono", monospace; - display: inline-block; - white-space: pre; - background: #272727; - color: #DD0A73; - border: 1px solid #333; - font-size: 12px; - padding: 0 4px; } - -.kuiContextMenu { - width: 256px; - position: relative; - overflow: hidden; - transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); - border-radius: 4px; } - .kuiContextMenu .kuiContextMenu__content { - padding: 8px; } - -.kuiContextMenu__icon { - margin-right: 8px; } - -.kuiContextMenu__itemLayout { - 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; } - -.kuiContextMenuPanel { - position: absolute; - width: 100%; - visibility: visible; - background-color: #222; } - .kuiContextMenuPanel.kuiContextMenuPanel-txInLeft { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiContextMenuPanel.kuiContextMenuPanel-txOutLeft { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiContextMenuPanel.kuiContextMenuPanel-txInRight { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiContextMenuPanel.kuiContextMenuPanel-txOutRight { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - -.kuiContextMenuPanel--next { - -webkit-transform: translateX(256px); - transform: translateX(256px); - visibility: hidden; } - -.kuiContextMenuPanel--previous { - -webkit-transform: translateX(-256px); - transform: translateX(-256px); - visibility: hidden; } - -.kuiContextMenuPanelTitle { - background-color: #272727; - border-bottom: 1px solid #333; - padding: 12px; - width: 100%; - text-align: left; } - .kuiContextMenuPanelTitle:hover, .kuiContextMenuPanelTitle:focus { - text-decoration: underline; } - -@-webkit-keyframes kuiContextMenuPanelTxInLeft { - 0% { - -webkit-transform: translateX(256px); - transform: translateX(256px); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@keyframes kuiContextMenuPanelTxInLeft { - 0% { - -webkit-transform: translateX(256px); - transform: translateX(256px); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@-webkit-keyframes kuiContextMenuPanelTxOutLeft { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(-256px); - transform: translateX(-256px); } } - -@keyframes kuiContextMenuPanelTxOutLeft { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(-256px); - transform: translateX(-256px); } } - -@-webkit-keyframes kuiContextMenuPanelTxInRight { - 0% { - -webkit-transform: translateX(-256px); - transform: translateX(-256px); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@keyframes kuiContextMenuPanelTxInRight { - 0% { - -webkit-transform: translateX(-256px); - transform: translateX(-256px); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@-webkit-keyframes kuiContextMenuPanelTxOutRight { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(256px); - transform: translateX(256px); } } - -@keyframes kuiContextMenuPanelTxOutRight { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(256px); - transform: translateX(256px); } } - -.kuiContextMenuItem { - padding: 12px; - width: 100%; - text-align: left; - color: #DDD; } - .kuiContextMenuItem:hover, .kuiContextMenuItem:focus { - text-decoration: underline; } - .kuiContextMenuItem:focus { - background-color: #275160; } - -.kuiContextMenuItem__inner { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - -.kuiContextMenuItem__text { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; } - -.kuiContextMenuItem__arrow { - -webkit-align-self: flex-end; - -ms-flex-item-align: end; - align-self: flex-end; } - -.kuiDescriptionList .kuiDescriptionList__title { - font-weight: 500; } - -.kuiDescriptionList .kuiDescriptionList__description { - color: #D9D9D9; } - -.kuiDescriptionList.kuiDescriptionList--row .kuiDescriptionList__title { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - margin-top: 16px; } - .kuiDescriptionList.kuiDescriptionList--row .kuiDescriptionList__title:first-of-type { - margin-top: 0; } - -.kuiDescriptionList.kuiDescriptionList--row .kuiDescriptionList__description { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--row.kuiDescriptionList--center { - text-align: center; } - -.kuiDescriptionList.kuiDescriptionList--row.kuiDescriptionList--right { - text-align: right; } - -.kuiDescriptionList.kuiDescriptionList--row.kuiDescriptionList--compressed .kuiDescriptionList__title { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--row.kuiDescriptionList--compressed .kuiDescriptionList__description { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--column { - 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-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } - .kuiDescriptionList.kuiDescriptionList--column > * { - margin-top: 16px; } - .kuiDescriptionList.kuiDescriptionList--column > *:first-child, .kuiDescriptionList.kuiDescriptionList--column > :nth-child(2) { - margin-top: 0; } - .kuiDescriptionList.kuiDescriptionList--column .kuiDescriptionList__title { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - padding-right: 8px; } - .kuiDescriptionList.kuiDescriptionList--column .kuiDescriptionList__description { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - padding-left: 8px; } - .kuiDescriptionList.kuiDescriptionList--column.kuiDescriptionList--center .kuiDescriptionList__title { - text-align: right; } - .kuiDescriptionList.kuiDescriptionList--column.kuiDescriptionList--compressed .kuiDescriptionList__title { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - .kuiDescriptionList.kuiDescriptionList--column.kuiDescriptionList--compressed .kuiDescriptionList__description { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--inline .kuiDescriptionList__title { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; - display: inline; - border-radius: 4px; - font-weight: 400; - background: #272727; - border: 1px solid #333; - padding: 0 4px; - margin: 0 4px; } - .kuiDescriptionList.kuiDescriptionList--inline .kuiDescriptionList__title:first-of-type { - margin-left: 0; } - -.kuiDescriptionList.kuiDescriptionList--inline .kuiDescriptionList__description { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; - display: inline; - word-break: break-all; } - -.kuiDescriptionList.kuiDescriptionList--inline.kuiDescriptionList--compressed .kuiDescriptionList__title { - font-size: 12px; - font-size: 0.75rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--inline.kuiDescriptionList--compressed .kuiDescriptionList__description { - font-size: 12px; - font-size: 0.75rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--inline.kuiDescriptionList--center { - text-align: center; } - -.kuiFlexGroup { - 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; } - .kuiFlexGroup .kuiFlexItem { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; } - .kuiFlexGroup.kuiFlexGroup--gutterSmall > .kuiFlexItem + .kuiFlexItem { - margin-left: 8px; } - .kuiFlexGroup.kuiFlexGroup--gutterMedium > .kuiFlexItem + .kuiFlexItem { - margin-left: 16px; } - .kuiFlexGroup.kuiFlexGroup--gutterLarge > .kuiFlexItem + .kuiFlexItem { - margin-left: 24px; } - .kuiFlexGroup.kuiFlexGroup--gutterExtraLarge > .kuiFlexItem + .kuiFlexItem { - margin-left: 40px; } - .kuiFlexGroup.kuiFlexGroup--justifyContentSpaceBetween { - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; } - .kuiFlexGroup.kuiFlexGroup--justifyContentSpaceAround { - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; } - .kuiFlexGroup.kuiFlexGroup--justifyContentCenter { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; } - .kuiFlexGroup.kuiFlexGroup--justifyContentFlexEnd { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; } - .kuiFlexGroup.kuiFlexGroup--alignItemsStart { - -webkit-box-align: start; - -webkit-align-items: flex-start; - -ms-flex-align: start; - align-items: flex-start; } - .kuiFlexGroup.kuiFlexGroup--alignItemsCenter { - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - .kuiFlexGroup.kuiFlexGroup--alignItemsFlexEnd { - -webkit-box-align: end; - -webkit-align-items: flex-end; - -ms-flex-align: end; - align-items: flex-end; } - -@media only screen and (max-width: 768px) { - .kuiFlexGroup { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } } - -.kuiFlexGrid { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-bottom: 0; } - .kuiFlexGrid > .kuiFlexItem { - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; } - .kuiFlexGrid > .kuiFlexItem.kuiFlexItem--flexGrowZero { - -webkit-box-flex: 0 !important; - -webkit-flex-grow: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - -webkit-flex-basis: auto !important; - -ms-flex-preferred-size: auto !important; - flex-basis: auto !important; } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterSmall > .kuiFlexItem { - margin: 4px; } - -.kuiFlexGrid--gutterSmall { - margin: -4px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterSmall.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 8px); - -ms-flex-preferred-size: calc(25% - 8px); - flex-basis: calc(25% - 8px); } - -.kuiFlexGrid--gutterSmall { - margin: -4px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterSmall.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 8px); - -ms-flex-preferred-size: calc(33.3% - 8px); - flex-basis: calc(33.3% - 8px); } - -.kuiFlexGrid--gutterSmall { - margin: -4px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterSmall.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 8px); - -ms-flex-preferred-size: calc(50% - 8px); - flex-basis: calc(50% - 8px); } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterMedium > .kuiFlexItem { - margin: 8px; } - -.kuiFlexGrid--gutterMedium { - margin: -8px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterMedium.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 16px); - -ms-flex-preferred-size: calc(25% - 16px); - flex-basis: calc(25% - 16px); } - -.kuiFlexGrid--gutterMedium { - margin: -8px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterMedium.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 16px); - -ms-flex-preferred-size: calc(33.3% - 16px); - flex-basis: calc(33.3% - 16px); } - -.kuiFlexGrid--gutterMedium { - margin: -8px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterMedium.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 16px); - -ms-flex-preferred-size: calc(50% - 16px); - flex-basis: calc(50% - 16px); } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterLarge > .kuiFlexItem { - margin: 12px; } - -.kuiFlexGrid--gutterLarge { - margin: -12px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterLarge.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 24px); - -ms-flex-preferred-size: calc(25% - 24px); - flex-basis: calc(25% - 24px); } - -.kuiFlexGrid--gutterLarge { - margin: -12px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterLarge.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 24px); - -ms-flex-preferred-size: calc(33.3% - 24px); - flex-basis: calc(33.3% - 24px); } - -.kuiFlexGrid--gutterLarge { - margin: -12px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterLarge.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 24px); - -ms-flex-preferred-size: calc(50% - 24px); - flex-basis: calc(50% - 24px); } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterXLarge > .kuiFlexItem { - margin: 16px; } - -.kuiFlexGrid--gutterXLarge { - margin: -16px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterXLarge.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 32px); - -ms-flex-preferred-size: calc(25% - 32px); - flex-basis: calc(25% - 32px); } - -.kuiFlexGrid--gutterXLarge { - margin: -16px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterXLarge.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 32px); - -ms-flex-preferred-size: calc(33.3% - 32px); - flex-basis: calc(33.3% - 32px); } - -.kuiFlexGrid--gutterXLarge { - margin: -16px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterXLarge.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 32px); - -ms-flex-preferred-size: calc(50% - 32px); - flex-basis: calc(50% - 32px); } - -/** - * 1. Allow KuiPanels to expand to fill the item. - */ -.kuiFlexItem { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - /* 1 */ - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - /* 1 */ - /* - * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles. - * 2. FlexItem can be manually set to not grow if needed. - */ } - .kuiFlexItem.kuiFlexItem--flexGrowZero { - /* 1 */ - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - /* 2 */ - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - /* 2 */ } - -@media only screen and (max-width: 768px) { - .kuiFlexItem { - width: 100% !important; - -webkit-flex-basis: 100% !important; - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - margin-left: 0 !important; - margin-bottom: 16px !important; } } - -/** - * 1. Override invalid state with focus state. - */ -.kuiCheckbox { - position: relative; - height: 24px; - /** - * 1. Float above the visual checkbox and match its dimension, so that when users try to click it - * they actually click this input. - */ } - .kuiCheckbox .kuiCheckbox__input { - position: absolute; - /* 1 */ - opacity: 0; - /* 1 */ - height: 24px; - /* 1 */ - width: 24px; - /* 1 */ - z-index: 1; - /* 1 */ - margin: 0; - /* 1 */ - cursor: pointer; } - .kuiCheckbox .kuiCheckbox__input:checked ~ .kuiCheckbox__square .kuiCheckbox__check { - background-color: #DDD; - -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, - .kuiCheckbox .kuiCheckbox__input:active ~ .kuiCheckbox__square { - background-color: #275160; - border-color: #4da1c0; } - .kuiCheckbox .kuiCheckbox__square { - position: absolute; - height: 24px; - width: 24px; - border-radius: 4px; - border: 1px solid #333; - background: #1d1d1d; - z-index: 0; } - .kuiCheckbox .kuiCheckbox__check { - height: 100%; - width: 100%; } - .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--inList .kuiCheckbox__input:checked ~ .kuiCheckbox__square { - background: #4da1c0; - border-color: #4da1c0; } - .kuiCheckbox.kuiCheckbox--inList .kuiCheckbox__input:checked ~ .kuiCheckbox__square .kuiCheckbox__check { - background-color: #222; } - .kuiCheckbox.kuiCheckbox--inList .kuiCheckbox__input:focus:checked ~ .kuiCheckbox__square { - background: #3e819a; } - -.kuiCheckboxGroup__item + .kuiCheckboxGroup__item { - margin-top: 8px; } - -.kuiFieldNumber { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #DDD; - background: #1d1d1d; - 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 #1d1d1d; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; } - .kuiFieldNumber:invalid { - /* 1 */ - 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; } - .kuiFieldNumber:focus { - /* 1 */ - 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; } - .kuiFieldNumber--withIcon { - padding-left: 40px; } - -.kuiFieldPassword { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #DDD; - background: #1d1d1d; - 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 #1d1d1d; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; - padding-left: 40px; } - .kuiFieldPassword:invalid { - /* 1 */ - 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; } - .kuiFieldPassword:focus { - /* 1 */ - 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 { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #DDD; - background: #1d1d1d; - 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 #1d1d1d; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; - padding-left: 40px; } - .kuiFieldSearch:invalid { - /* 1 */ - 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; } - .kuiFieldSearch:focus { - /* 1 */ - 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 { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #DDD; - background: #1d1d1d; - 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 #1d1d1d; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; } - .kuiFieldText:invalid { - /* 1 */ - 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; } - .kuiFieldText:focus { - /* 1 */ - 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--withIcon { - padding-left: 40px; } - -.kuiForm__error { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; - list-style: disc; - margin-left: 32px; } - -.kuiForm__errors { - margin-bottom: 16px; } - -.kuiFormControlLayout { - max-width: 400px; - width: 100%; - display: inline-block; - position: relative; } - -.kuiFormControlLayout__icon { - position: absolute; - top: 12px; - left: 12px; } - -.kuiFormControlLayout__icon--right { - left: auto; - right: 12px; } - -.kuiFormErrorText { - font-size: 12px; - padding: 8px 0; - color: #bf4d4d; } - -.kuiFormHelpText { - font-size: 12px; - padding: 8px 0; - color: #D9D9D9; } - -/** - * 1. Focused state overrides invalid state. - */ -.kuiFormLabel { - font-size: 12px; - margin-bottom: 8px; - cursor: pointer; - transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); - font-weight: 500; } - .kuiFormLabel.kuiFormLabel-isInvalid { - color: #bf4d4d; - /* 1 */ } - .kuiFormLabel.kuiFormLabel-isFocused { - color: #4da1c0; - /* 1 */ } - -/** - * 1. Coerce inline form elements to behave as block-level elements. - * 2. For inline forms, we need to add padding if the label doesn't exist. - */ -.kuiFormRow { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - /* 1 */ - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - /* 1 */ - max-width: 400px; } - .kuiFormRow + * { - margin-top: 24px; } - .kuiFormRow.kuiFormRow--hasEmptyLabelSpace { - padding-top: 20px; - /* 2 */ } - .kuiFormRow .kuiFormRow__text + .kuiFormRow__text { - padding-top: 0; } - -.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: #333; - border: 0 solid #333; - border-radius: 4px; } - .kuiRange::-webkit-slider-thumb { - background: #222; - border: 2px solid #DDD; - 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: #333; - border: 0 solid #333; - border-radius: 4px; } - .kuiRange::-moz-range-thumb { - background: #222; - border: 2px solid #DDD; - 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: #333; - border: 0 solid #333; - border-radius: 8px; } - .kuiRange::-ms-fill-upper { - background: #333; - border: 0 solid #333; - border-radius: 8px; } - .kuiRange::-ms-thumb { - background: #222; - border: 2px solid #DDD; - border-radius: 50%; - cursor: pointer; - height: 16px; - width: 16px; - margin-top: 0; } - -/** - * 1. Leave room for caret. - */ -.kuiSelect { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #DDD; - background: #1d1d1d; - 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 #1d1d1d; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; - padding-right: 40px; - /* 1 */ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } - .kuiSelect:invalid { - /* 1 */ - 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; } - .kuiSelect:focus { - /* 1 */ - 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; - /** - * 1. The input is "hidden" but still focusable. - */ - /** - * 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 { - padding-left: 8px; - line-height: 24px; - font-size: 14px; } - .kuiSwitch .kuiSwitch__input { - position: absolute; - opacity: 0; - /* 1 */ - width: 100%; - height: 100%; - cursor: pointer; } - .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 { - pointer-events: none; - width: 52px; - height: 24px; - background: #1d1d1d; - box-shadow: inset 0 0 0 1px #333; - 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; - border-radius: 50%; - border: 1px solid #333; - 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); } - .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: 4px; - bottom: 0; - width: 48px; - height: 16px; - transition: left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), right 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - fill: #DDD; } - .kuiSwitch .kuiSwitch__icon--checked { - right: auto; - left: -8px; - fill: #DDD; } - .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: 0; } - .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 { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #DDD; - background: #1d1d1d; - 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 #1d1d1d; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; } - .kuiTextArea:invalid { - /* 1 */ - 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; } - .kuiTextArea:focus { - /* 1 */ - 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 #333; } - -.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 #333; } - .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: 1.5; - padding-right: 24px; } - -.kuiHeaderAlert__text { - font-size: 12px; - font-size: 0.75rem; - line-height: 1.5; - margin-bottom: 8px; } - -.kuiHeaderAlert__action { - font-size: 12px; - font-size: 0.75rem; - line-height: 1.5; - color: #4da1c0; } - .kuiHeaderAlert__action:focus { - outline: solid 6px #275160; } - -.kuiHeaderAlert__date { - font-size: 12px; - font-size: 0.75rem; - line-height: 1.5; - color: #D9D9D9; - text-align: right; } - -/** - * 1. Override KeyPadMenu. - * 2. Override popover default. - */ -.kuiHeaderPopover { - top: calc(100% - 16px) !important; - /* 1 */ - border-radius: 4px 0 4px 4px !important; - /* 2 */ } - -.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: #333; } - .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):hover { - text-decoration: underline; } - .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):focus { - text-decoration: underline; - background: #275160; } - .kuiHeaderBreadcrumb.kuiHeaderBreadcrumb-isActive { - color: #444; } - -.kuiHeaderBreadcrumb__text { - white-space: nowrap; - max-width: 150px; - display: block; - text-overflow: ellipsis; - overflow: hidden; } - -.kuiHeaderBreadcrumb--collapsed { - color: #333; } - -@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: #272727; } - .kuiHeaderSectionItem:after { - position: absolute; - content: ""; - width: 1px; - top: 16px; - bottom: 0; - background: #333; - left: 0; } - -.kuiHeaderSectionItem__button { - height: 64px; - min-width: 64px; - text-align: center; } - .kuiHeaderSectionItem__button:focus { - background: #275160; } - -.kuiHeaderSectionItem--borderRight:after { - left: auto; - right: 0; } - -.kuiHorizontalRule { - border: none; - height: 1px; - background-color: #333; } - .kuiHorizontalRule.kuiHorizontalRule--full { - width: 100%; } - .kuiHorizontalRule.kuiHorizontalRule--half { - width: 50%; - margin-left: auto; - margin-right: auto; } - .kuiHorizontalRule.kuiHorizontalRule--quarter { - width: 25%; - margin-left: auto; - margin-right: auto; } - -.kuiHorizontalRule--marginSmall { - margin: 8px 0; } - -.kuiHorizontalRule--marginMedium { - margin: 12px 0; } - -.kuiHorizontalRule--marginLarge { - margin: 24px 0; } - -.kuiHorizontalRule--marginXLarge { - margin: 32px 0; } - -.kuiHorizontalRule--marginXXLarge { - margin: 40px 0; } - -.kuiIcon { - display: inline-block; - vertical-align: middle; - fill: #DDD; } - .kuiIcon:focus { - opacity: 1; - background: #275160; } - -.kuiIcon--basic { - fill: #DDD; } - -.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. 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 #333; - border-color: transparent; - border-radius: 4px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - /* 1 */ } - .kuiKeyPadMenuItem:hover, .kuiKeyPadMenuItem:focus { - border-color: #333; } - .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: 1.5; - 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: #333; } - -.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(2) { - background-color: #292929; } - -.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(3) { - background-color: #1f1f1f; } - -.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(4) { - background-color: #141414; } - -.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 #333; - 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); } } - -.kuiModal { - box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); - background-color: #222; - border: 1px solid #333; - 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); } - -.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; } - -.kuiModalHeader__title { - font-size: 24px; - font-size: 1.5rem; - line-height: 1.5; } - -.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); } } - -.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; } - -.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 { - width: 100%; } - -.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; } } - -.kuiPagination { - 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; } - -.kuiPaginationButton { - font-size: 14px; - padding: 0; - height: 24px; - min-width: 32px; - text-align: center; - color: #DDD; } - .kuiPaginationButton svg { - fill: #DDD !important; } - .kuiPaginationButton:not(:focus):hover { - background-color: transparent; } - -.kuiPaginationButton-isActive { - pointer-events: none; - background-color: #4da1c0; - color: #222; - border-radius: 4px; } - .kuiPaginationButton-isActive:focus { - background-color: #4da1c0; - color: #222; } - -.kuiPaginationButton-isPlaceholder { - pointer-events: none; - color: #444; } - -@media only screen and (max-width: 768px) { - .kuiPaginationButton--hideOnMobile { - display: none; } } - -.kuiPanel { - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); - 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; } - .kuiPanel.kuiPanel--paddingSmall { - padding: 8px; } - .kuiPanel.kuiPanel--paddingMedium { - padding: 16px; } - .kuiPanel.kuiPanel--paddingLarge { - padding: 24px; } - .kuiPanel.kuiPanel--shadow { - box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); } - .kuiPanel.kuiPanel--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; - z-index: 2000; - margin-top: 8px; - pointer-events: auto; } - -.kuiPopover__panel { - position: absolute; - min-width: 256px; - 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; - 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: #272727; } - -.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: #272727; - border-bottom: 1px solid #333; - padding: 12px; } - -.kuiProgress { - width: 100%; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: none; - vertical-align: middle; - position: relative; - overflow: hidden; - background-color: #333; - /** - * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue, - * we apply this style to a
instead of a element. - * See https://css-tricks.com/html5-progress-element/ for more info. - */ } - .kuiProgress::-webkit-progress-bar { - background-color: #333; } - .kuiProgress::-webkit-progress-value { - transition: width 250ms linear; } - .kuiProgress::-moz-progress-bar { - transition: width 250ms linear; } - .kuiProgress.kuiProgress--primary::-webkit-progress-value { - background-color: #4da1c0; } - .kuiProgress.kuiProgress--primary::-moz-progress-bar { - background-color: #4da1c0; } - .kuiProgress.kuiProgress--primary.kuiProgress--indeterminate:before { - background-color: #4da1c0; } - .kuiProgress.kuiProgress--secondary::-webkit-progress-value { - background-color: #00A69B; } - .kuiProgress.kuiProgress--secondary::-moz-progress-bar { - background-color: #00A69B; } - .kuiProgress.kuiProgress--secondary.kuiProgress--indeterminate:before { - background-color: #00A69B; } - .kuiProgress.kuiProgress--warning::-webkit-progress-value { - background-color: #E5830E; } - .kuiProgress.kuiProgress--warning::-moz-progress-bar { - background-color: #E5830E; } - .kuiProgress.kuiProgress--warning.kuiProgress--indeterminate:before { - background-color: #E5830E; } - .kuiProgress.kuiProgress--danger::-webkit-progress-value { - background-color: #bf4d4d; } - .kuiProgress.kuiProgress--danger::-moz-progress-bar { - background-color: #bf4d4d; } - .kuiProgress.kuiProgress--danger.kuiProgress--indeterminate:before { - background-color: #bf4d4d; } - .kuiProgress.kuiProgress--accent::-webkit-progress-value { - background-color: #DD0A73; } - .kuiProgress.kuiProgress--accent::-moz-progress-bar { - background-color: #DD0A73; } - .kuiProgress.kuiProgress--accent.kuiProgress--indeterminate:before { - background-color: #DD0A73; } - .kuiProgress.kuiProgress--subdued::-webkit-progress-value { - background-color: #444; } - .kuiProgress.kuiProgress--subdued::-moz-progress-bar { - background-color: #444; } - .kuiProgress.kuiProgress--subdued.kuiProgress--indeterminate:before { - background-color: #444; } - .kuiProgress.kuiProgress--xs { - height: 2px; } - .kuiProgress.kuiProgress--s { - height: 4px; } - .kuiProgress.kuiProgress--m { - height: 8px; } - .kuiProgress.kuiProgress--l { - height: 16px; } - .kuiProgress.kuiProgress--fixed, .kuiProgress.kuiProgress--absolute { - top: 0; - left: 0; - right: 0; - background-color: transparent; } - .kuiProgress.kuiProgress--fixed::-webkit-progress-bar, .kuiProgress.kuiProgress--absolute::-webkit-progress-bar { - background-color: transparent; } - .kuiProgress.kuiProgress--fixed { - position: fixed; } - .kuiProgress.kuiProgress--absolute { - position: absolute; } - .kuiProgress.kuiProgress--indeterminate:before { - position: absolute; - content: ""; - width: 100%; - top: 0; - bottom: 0; - left: 0; - -webkit-transform: scaleX(0) translateX(0%); - transform: scaleX(0) translateX(0%); - -webkit-animation: kuiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; - animation: kuiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } - -@-webkit-keyframes kuiProgress { - 0% { - -webkit-transform: scaleX(1) translateX(-100%); - transform: scaleX(1) translateX(-100%); } - 100% { - -webkit-transform: scaleX(1) translateX(100%); - transform: scaleX(1) translateX(100%); } } - -@keyframes kuiProgress { - 0% { - -webkit-transform: scaleX(1) translateX(-100%); - transform: scaleX(1) translateX(-100%); } - 100% { - -webkit-transform: scaleX(1) translateX(100%); - transform: scaleX(1) translateX(100%); } } - -.kuiSideNav { - position: relative; - height: 100%; } - -.kuiSideNav__mobileToggle { - display: none; - border-bottom: 1px solid #333; - 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; } - -.kuiSideNav__hideButton { - width: 24px; - height: 24px; - border-radius: 4px; - border: 1px solid #333; - background: #222; - position: absolute; - 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-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; - right: -40px; - top: 32px; } - -/** - * 1. Panels already have padding, so we need to remove it. - */ -.kuiSideNav--inPanel .kuiSideNav__mobileToggle { - padding-left: 0; - /* 1 */ - padding-right: 0; - /* 1 */ } - -@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; } } - -@media only screen and (min-width: 768px) { - .kuiSideNav--inPanel { - border-right: 1px solid #333; - background: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0, #222 2px, #222 100%); - /** - * 1. We need the extra specificity to override the original nested selector. - * 2. Adjust width to take overlap of border into account. - */ } - .kuiSideNav--inPanel .kuiSideNavItem.kuiSideNavItem-isSelected { - /* 1 */ - position: relative; - width: calc(100% + 1px); - /* 2 */ - box-shadow: none; - border: 1px solid #333; - border-right: none; - border-radius: 4px 0 0 4px; } } - -.kuiSideNavItem { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; - display: block; - width: 100%; - text-align: left; - padding: 4px 8px; - color: #D9D9D9; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - border: 1px solid #333; - border-color: transparent; } - .kuiSideNavItem.kuiSideNavItem-isSelected { - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); - color: #00A69B; - border-left: 2px solid #333; - 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: 1.5; - 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 */ } - -.kuiSpacer--xs { - height: 4px; } - -.kuiSpacer--s { - height: 8px; } - -.kuiSpacer--m { - height: 16px; } - -.kuiSpacer--l { - height: 24px; } - -.kuiSpacer--xl { - height: 32px; } - -.kuiSpacer--xxl { - height: 40px; } - -/** - * 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: 1.5; - width: 100%; - border: none; - border-collapse: collapse; - background-color: #222; } - -.kuiTable--compressed .kuiTableCellContent { - padding: 8px; } - -.kuiTable--compressed .kuiTableHeaderButton:focus { - outline: solid 8px #275160; } - -.kuiTableHeaderCell { - max-width: 20px; - /* 1 */ - vertical-align: middle; - color: #FFF; } - .kuiTableHeaderCell .kuiTableHeaderButton { - text-align: left; } - -.kuiTableHeaderCellCheckbox { - width: 36px; - vertical-align: middle; } - .kuiTableHeaderCellCheckbox .kuiTableCellContent { - padding-right: 0; - padding-top: 0; - padding-bottom: 0; } - -.kuiTableHeaderButton { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; - color: inherit; - width: 100%; } - .kuiTableHeaderButton:hover, .kuiTableHeaderButton:focus { - text-decoration: underline; - color: #4da1c0; } - .kuiTableHeaderButton:hover .kuiTableSortIcon, .kuiTableHeaderButton:focus .kuiTableSortIcon { - display: block; - fill: #4da1c0; } - .kuiTableHeaderButton:focus { - background: #275160; } - -.kuiTableSortIcon { - margin-left: 4px; - fill: #4d4d4d; } - .kuiTableHeaderButton-isSorted .kuiTableSortIcon { - fill: #FFF; } - -.kuiTableRow { - transition: background-color 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiTableRow:hover { - background-color: #1f1f1f; } - .kuiTableRow.kuiTableRow-isSelected { - background-color: rgba(77, 161, 192, 0.05); } - -.kuiTableRowCell { - max-width: 20px; - /* 1 */ - vertical-align: middle; - color: #DDD; - border-top: 1px solid #333; - border-bottom: 1px solid #333; } - -.kuiTableRowCellCheckbox { - width: 36px; - vertical-align: middle; - border-top: 1px solid #333; - border-bottom: 1px solid #333; } - .kuiTableRowCellCheckbox .kuiTableCellContent { - padding-right: 0; - padding-top: 0; - padding-bottom: 0; } - -/** - * 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. - */ -.kuiTableCellContent { - 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; - white-space: nowrap; - /* 2 */ - overflow: hidden; - /* 2 */ - text-overflow: ellipsis; - /* 2 */ - padding: 12px; - /* 2 */ } - -.kuiTableCellContent__text { - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; } - -.kuiTableCellContent--alignRight { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; } - -.kuiTableCellContent--wrapText { - white-space: normal; } - -.kuiTabs { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - border-bottom: 1px solid #333; } - -.kuiTab { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - position: relative; - cursor: pointer; - padding: 12px 16px; - color: #D9D9D9; - background-color: transparent; - transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiTab:hover:not(.kuiTab-isSelected) { - color: #DDD; - 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); } } - -.kuiTitle { - color: #FFF; - font-weight: 300; - font-size: 24px; - font-size: 1.5rem; - line-height: 1.5; } - -.kuiTitle--small { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; } - -.kuiTitle--large { - font-size: 32px; - font-size: 2rem; - line-height: 1.5; } - -/** - * 1. Allow list to expand as items are added, but cap it at the screen height. - * 2. Only show the scroll on hover. Generally, scrolling is bad for toasts. - * 3. Allow some padding if a scroll shows up. - */ -.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: 336px; - /* 3 */ - padding-right: 16px; - 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; } - .kuiGlobalToastList:hover { - overflow-y: auto; - /* 2 */ } - -.kuiGlobalToastListItem { - margin-bottom: 16px; - margin-right: 16px; - -webkit-animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); - 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: translateY(24px) scale(0.9); - transform: translateY(24px) scale(0.9); - opacity: 0; } - to { - -webkit-transform: translateY(0) scale(1); - transform: translateY(0) scale(1); - opacity: 1; } } - -@keyframes kuiShowToast { - from { - -webkit-transform: translateY(24px) scale(0.9); - transform: translateY(24px) scale(0.9); - opacity: 0; } - to { - -webkit-transform: translateY(0) scale(1); - transform: translateY(0) scale(1); - opacity: 1; } } - -@media only screen and (max-width: 768px) { - /** - * 1. Mobile we make these 100%. Matching change happens on the item as well. - */ - .kuiGlobalToastList { - left: 0; - padding-left: 16px; - width: 100%; - /* 1 */ } } - -.kuiToast { - box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); - position: relative; - padding: 16px; - background-color: #222; - border: 1px solid #333; - width: 100%; } - .kuiToast:hover .kuiToast__closeButton, - .kuiToast:focus .kuiToast__closeButton { - opacity: 1; } - -/** - * 1. Fit button to icon. - */ -.kuiToast__closeButton { - position: absolute; - top: 16px; - right: 16px; - line-height: 0; - /* 1 */ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - opacity: 0; - transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiToast__closeButton svg { - fill: #4d4d4d; } - .kuiToast__closeButton:hover svg { - fill: #FFF; } - .kuiToast__closeButton:focus { - background-color: #275160; - opacity: 1; } - .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. - * 3. Account for close button. - */ -.kuiToastHeader { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - padding-right: 24px; - /* 3 */ - 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: 12px; } - -.kuiText { - color: #DDD; - font-weight: 400; - font-size: 16px; - font-size: 1rem; - line-height: 1.5; } - .kuiText a { - color: #4da1c0; } - .kuiText a:hover { - color: #3985a1; - text-decoration: underline; } - .kuiText img { - display: block; - width: 100%; } - .kuiText p, - .kuiText ul, - .kuiText ol, - .kuiText img { - margin-bottom: 24px; } - .kuiText ul { - list-style: disc; - margin-left: 24px; } - .kuiText ol { - list-style: decimal; - margin-left: 24px; } - .kuiText * + h1, - .kuiText * + h2, - .kuiText * + h3, - .kuiText * + h4, - .kuiText * + h5, - .kuiText * + h6 { - margin-top: 32px; } - .kuiText h1, .kuiText h2, .kuiText h3, .kuiText h4, .kuiText h5, .kuiText h6 { - color: #FFF; - font-weight: 300; - margin-bottom: 8px; } - .kuiText h1 { - font-size: 200%; } - .kuiText h2 { - font-size: 150%; - line-height: 32px; } - .kuiText h3 { - font-weight: 500; } - .kuiText.kuiText--small { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - .kuiText.kuiText--small * + h1, - .kuiText.kuiText--small * + h2, - .kuiText.kuiText--small * + h3, - .kuiText.kuiText--small * + h4, - .kuiText.kuiText--small * + h5, - .kuiText.kuiText--small * + h6 { - margin-top: 24px; } - .kuiText.kuiText--small p, - .kuiText.kuiText--small ul, - .kuiText.kuiText--small ol, - .kuiText.kuiText--small h1, - .kuiText.kuiText--small h2, - .kuiText.kuiText--small h3, - .kuiText.kuiText--small h4, - .kuiText.kuiText--small h5, - .kuiText.kuiText--small h6, - .kuiText.kuiText--small img { - margin-bottom: 14px; } - .kuiText > :last-child { - margin-bottom: 0 !important; } - -.kuiTextColor.kuiTextColor--default { - color: #DDD !important; } - -.kuiTextColor.kuiTextColor--subdued { - color: #D9D9D9 !important; } - -.kuiTextColor.kuiTextColor--primary { - color: #4da1c0 !important; } - -.kuiTextColor.kuiTextColor--secondary { - color: #00A69B !important; } - -.kuiTextColor.kuiTextColor--accent { - color: #DD0A73 !important; } - -.kuiTextColor.kuiTextColor--warning { - color: #E5830E !important; } - -.kuiTextColor.kuiTextColor--danger { - color: #bf4d4d !important; } diff --git a/packages/kbn-ui-framework/dist/ui_framework_theme_light.css b/packages/kbn-ui-framework/dist/ui_framework_theme_light.css deleted file mode 100644 index 864c19b686723d..00000000000000 --- a/packages/kbn-ui-framework/dist/ui_framework_theme_light.css +++ /dev/null @@ -1,3674 +0,0 @@ -@-webkit-keyframes kuiAnimFadeIn { - 0% { - opacity: 0; } - 100% { - opacity: 1; } } - -@keyframes kuiAnimFadeIn { - 0% { - opacity: 0; } - 100% { - opacity: 1; } } - -@-webkit-keyframes kuiGrow { - 0% { - opacity: 0; } - 1% { - opacity: 0; - -webkit-transform: scale(0); - transform: scale(0); } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes kuiGrow { - 0% { - opacity: 0; } - 1% { - opacity: 0; - -webkit-transform: scale(0); - transform: scale(0); } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(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: #3F3F3F; - height: 100%; - background-color: #F5F5F5; - -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; - color: inherit; } - 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: 1.5; } - -.kui--codeFont { - font-family: "Roboto Mono", monospace; } - -.kui--subduedText { - color: #666; } - -.kui--bottomShadow { - box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); } - -.kui--margin { - margin: 16px !important; } - -.kui--marginLarge { - margin: 24px !important; } - -.kui--marginSmall { - margin: 8px !important; } - -.kui--padding { - padding: 16px !important; } - -.kui--paddingLarge { - padding: 24px !important; } - -.kui--paddingSmall { - padding: 8px !important; } - -.kui--marginTopBottom { - margin-top: 16px !important; - margin-bottom: 16px !important; } - -.kui--marginTopBottomSmall { - margin-top: 8px !important; - margin-bottom: 8px !important; } - -.kui--marginTopBottomLarge { - margin-top: 24px !important; - margin-bottom: 24px !important; } - -.kui--marginTop { - margin-top: 16px !important; } - -.kui--marginBottom { - margin-bottom: 16px !important; } - -.kui--marginTopSmall { - margin-top: 8px !important; } - -.kui--marginBottomSmall { - margin-bottom: 8px !important; } - -.kui--marginTopLarge { - margin-top: 24px !important; } - -.kui--marginBottomLarge { - margin-bottom: 24px !important; } - -.kui--marginLeftRight { - margin-left: 16px !important; - margin-right: 16px !important; } - -.kui--marginLeftRightSmall { - margin-left: 8px !important; - margin-right: 8px !important; } - -.kui--marginLeftRightLarge { - margin-left: 24px !important; - margin-right: 24px !important; } - -.kui--marginLeft { - margin-left: 16px !important; } - -.kui--marginRight { - margin-right: 16px !important; } - -.kui--marginLeftSmall { - margin-left: 8px !important; } - -.kui--marginRightSmall { - margin-right: 8px !important; } - -.kui--marginLeftLarge { - margin-left: 24px !important; } - -.kui--marginRightLarge { - margin-right: 24px !important; } - -.kui--paddingTopBottom { - padding-top: 16px !important; - padding-bottom: 16px !important; } - -.kui--paddingTopBottomSmall { - padding-top: 8px !important; - padding-bottom: 8px !important; } - -.kui--paddingTopBottomLarge { - padding-top: 24px !important; - padding-bottom: 24px !important; } - -.kui--paddingTop { - padding-top: 16px !important; } - -.kui--paddingBottom { - padding-bottom: 16px !important; } - -.kui--paddingTopSmall { - padding-top: 8px !important; } - -.kui--paddingBottomSmall { - padding-bottom: 8px !important; } - -.kui--paddingTopLarge { - padding-top: 24px !important; } - -.kui--paddingBottomLarge { - padding-bottom: 24px !important; } - -.kui--paddingLeftRight { - padding-left: 16px !important; - padding-right: 16px !important; } - -.kui--paddingLeftRightSmall { - padding-left: 8px !important; - padding-right: 8px !important; } - -.kui--paddingLeftRightLarge { - padding-left: 24px !important; - padding-right: 24px !important; } - -.kui--paddingLeft { - padding-left: 16px !important; } - -.kui--paddingRight { - padding-right: 16px !important; } - -.kui--paddingLeftSmall { - padding-left: 8px !important; } - -.kui--paddingRightSmall { - padding-right: 8px !important; } - -.kui--paddingLeftLarge { - padding-left: 24px !important; } - -.kui--paddingRightLarge { - padding-right: 24px !important; } - -.kuiAccordion__button { - text-align: left; - width: 100%; } - .kuiAccordion__button:hover, .kuiAccordion__button:focus { - text-decoration: underline; - cursor: pointer; } - .kuiAccordion__button:focus { - background-color: #e6f2f6; } - -.kuiAccordion__childWrapper { - visibility: hidden; - height: 0; - opacity: 0; - overflow-y: hidden; - -webkit-transform: translatez(0); - transform: translatez(0); - transition: height 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - -.kuiAccordion.kuiAccordion-isOpen .kuiAccordion__childWrapper { - visibility: visible; - opacity: 1; } - -.kuiAccordionForm__children { - padding: 24px; } - -.kuiAccordionForm__extraAction { - opacity: 0; - transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiAccordionForm__extraAction:focus { - opacity: 1; } - -.kuiAccordionForm__title { - display: inline-block; } - -.kuiAccordionForm__button { - padding: 16px; } - .kuiAccordionForm__button:hover { - text-decoration: none; } - .kuiAccordionForm__button:hover .kuiAccordionForm__title { - text-decoration: underline; } - .kuiAccordionForm__button:focus { - text-decoration: none; - background-color: transparent; } - .kuiAccordionForm__button:focus .kuiAccordionForm__title { - text-decoration: underline; - background-color: #e6f2f6; - outline: solid 2px #e6f2f6; } - -.kuiAccordionForm { - border-top: 1px solid #D9D9D9; - border-bottom: 1px solid #D9D9D9; } - .kuiAccordionForm + .kuiAccordionForm { - border-top: none; } - .kuiAccordionForm:hover .kuiAccordionForm__extraAction { - opacity: 1; - visibility: visible; } - -.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; } - -.kuiBadge { - font-size: 12px; - line-height: 24px; - display: inline-block; - text-decoration: none; - border: solid 1px transparent; - border-radius: 24px; - padding: 0 8px; - background-color: transparent; - white-space: nowrap; - vertical-align: middle; } - .kuiBadge .kuiBadge__content { - 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; } - .kuiBadge .kuiBadge__icon { - margin-right: 4px; } - .kuiBadge.kuiBadge--iconRight .kuiBadge__content { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - .kuiBadge.kuiBadge--iconRight .kuiBadge__content .kuiBadge__icon { - margin-left: 4px; - margin-right: 0; } - -.kuiBadge--default { - border-color: #D9D9D9; - background-color: rgba(217, 217, 217, 0.1); } - -.kuiBadge--primary { - border-color: #0079a5; - background-color: rgba(0, 121, 165, 0.1); } - -.kuiBadge--secondary { - border-color: #00A69B; - background-color: rgba(0, 166, 155, 0.1); } - -.kuiBadge--warning { - border-color: #E5830E; - background-color: rgba(229, 131, 14, 0.1); } - -.kuiBadge--danger { - border-color: #A30000; - background-color: rgba(163, 0, 0, 0.1); } - -.kuiBadge--accent { - border-color: #DD0A73; - background-color: rgba(221, 10, 115, 0.1); } - -.kuiBottomBar { - background: #404040; - color: #FFF; - position: fixed; - bottom: 0; - right: 0; - left: 0; - -webkit-animation: kuiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); - z-index: 4000; } - .kuiBottomBar.kuiBottomBar--paddingSmall { - padding: 8px; } - .kuiBottomBar.kuiBottomBar--paddingMedium { - padding: 16px; } - .kuiBottomBar.kuiBottomBar--paddingLarge { - padding: 24px; } - -@-webkit-keyframes kuiBottomBarAppear { - 0% { - -webkit-transform: translateY(100%); - transform: translateY(100%); - opacity: 0; } - 100% { - -webkit-transform: translateY(0%); - transform: translateY(0%); - opacity: 1; } } - -@keyframes kuiBottomBarAppear { - 0% { - -webkit-transform: translateY(100%); - transform: translateY(100%); - opacity: 0; } - 100% { - -webkit-transform: translateY(0%); - transform: translateY(0%); - opacity: 1; } } - -/** - * 1. Apply margin to all but last item in the flex. - * 2. Margin gets flipped because of the row-reverse. - */ -@-webkit-keyframes kuiButtonActive { - 50% { - -webkit-transform: translateY(1px); - transform: translateY(1px); } } -@keyframes kuiButtonActive { - 50% { - -webkit-transform: translateY(1px); - transform: translateY(1px); } } - -.kuiButton { - display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - height: 40px; - text-decoration: none; - border: solid 1px transparent; - text-align: center; - font-family: "Roboto", Helvetica, Arial, sans-serif; - transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - white-space: nowrap; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.15); - border-radius: 4px; - min-width: 112px; } - .kuiButton:hover { - -webkit-transform: translateY(-1px); - transform: translateY(-1px); } - .kuiButton:hover, .kuiButton:focus { - text-decoration: underline; } - .kuiButton:focus { - -webkit-animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } - .kuiButton:active { - -webkit-transform: translateY(1px); - transform: translateY(1px); } - .kuiButton .kuiButton__content { - height: 100%; - width: 100%; - 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; - padding: 0 12px; } - .kuiButton .kuiButton__content > * + * { - margin-left: 8px; - /* 1 */ } - .kuiButton.kuiButton--small { - height: 32px; } - .kuiButton.kuiButton--iconRight .kuiButton__content { - height: 100%; - width: 100%; - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - .kuiButton.kuiButton--iconRight .kuiButton__content > * + * { - margin-left: 0; - /* 1 */ - margin-right: 8px; - /* 1 */ } - .kuiButton:hover { - box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1); } - .kuiButton:active { - box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.2); } - .kuiButton:hover, .kuiButton:focus { - background-color: rgba(0, 121, 165, 0.1); } - .kuiButton:disabled { - color: #c5c5c5; - border-color: #c5c5c5; - pointer-events: none; } - .kuiButton:disabled .kuiButton__content { - pointer-events: auto; - cursor: not-allowed; } - .kuiButton:disabled .kuiButton__icon { - fill: #c5c5c5; } - .kuiButton:disabled.kuiButton--fill { - background-color: #c5c5c5; - border-color: #c5c5c5; } - .kuiButton:disabled.kuiButton--fill:hover, .kuiButton:disabled.kuiButton--fill:focus { - background-color: #c5c5c5; - border-color: #c5c5c5; } - .kuiButton:disabled:hover, .kuiButton:disabled:focus { - background-color: #FFF; - text-decoration: none; } - -.kuiButton--primary { - color: #0079a5; - border-color: #0079a5; } - .kuiButton--primary .kuiButton__icon { - fill: #0079a5; } - .kuiButton--primary.kuiButton--fill { - background-color: #0079a5; - border-color: #0079a5; - color: #FFF; } - .kuiButton--primary.kuiButton--fill:hover, .kuiButton--primary.kuiButton--fill:focus { - background-color: #00668c; - border-color: #00668c; } - .kuiButton--primary.kuiButton--fill .kuiButton__icon { - fill: #FFF; } - .kuiButton--primary:hover, .kuiButton--primary:focus { - background-color: rgba(0, 121, 165, 0.1); } - -.kuiButton--secondary { - color: #00A69B; - border-color: #00A69B; } - .kuiButton--secondary .kuiButton__icon { - fill: #00A69B; } - .kuiButton--secondary.kuiButton--fill { - background-color: #00A69B; - border-color: #00A69B; - color: #FFF; } - .kuiButton--secondary.kuiButton--fill:hover, .kuiButton--secondary.kuiButton--fill:focus { - background-color: #008d83; - border-color: #008d83; } - .kuiButton--secondary.kuiButton--fill .kuiButton__icon { - fill: #FFF; } - .kuiButton--secondary:hover, .kuiButton--secondary:focus { - background-color: rgba(0, 166, 155, 0.1); } - -.kuiButton--warning { - color: #E5830E; - border-color: #E5830E; } - .kuiButton--warning .kuiButton__icon { - fill: #E5830E; } - .kuiButton--warning.kuiButton--fill { - background-color: #E5830E; - border-color: #E5830E; - color: #FFF; } - .kuiButton--warning.kuiButton--fill:hover, .kuiButton--warning.kuiButton--fill:focus { - background-color: #cd750d; - border-color: #cd750d; } - .kuiButton--warning.kuiButton--fill .kuiButton__icon { - fill: #FFF; } - .kuiButton--warning:hover, .kuiButton--warning:focus { - background-color: rgba(229, 131, 14, 0.1); } - -.kuiButton--danger { - color: #A30000; - border-color: #A30000; } - .kuiButton--danger .kuiButton__icon { - fill: #A30000; } - .kuiButton--danger.kuiButton--fill { - background-color: #A30000; - border-color: #A30000; - color: #FFF; } - .kuiButton--danger.kuiButton--fill:hover, .kuiButton--danger.kuiButton--fill:focus { - background-color: #8a0000; - border-color: #8a0000; } - .kuiButton--danger.kuiButton--fill .kuiButton__icon { - fill: #FFF; } - .kuiButton--danger:hover, .kuiButton--danger:focus { - background-color: rgba(163, 0, 0, 0.1); } - -.kuiButton--ghost { - color: #FFF; - border-color: #FFF; } - .kuiButton--ghost .kuiButton__icon { - fill: #FFF; } - .kuiButton--ghost.kuiButton--fill { - background-color: #FFF; - border-color: #FFF; - color: #000; } - .kuiButton--ghost.kuiButton--fill:hover, .kuiButton--ghost.kuiButton--fill:focus { - background-color: #f2f2f2; - border-color: #f2f2f2; } - .kuiButton--ghost.kuiButton--fill .kuiButton__icon { - fill: #000; } - .kuiButton--ghost:hover, .kuiButton--ghost:focus { - background-color: rgba(255, 255, 255, 0.1); } - -.kuiButtonEmpty { - display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - height: 40px; - text-decoration: none; - border: solid 1px transparent; - text-align: center; - font-family: "Roboto", Helvetica, Arial, sans-serif; - transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - white-space: nowrap; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - border-color: transparent; - background-color: transparent; - box-shadow: none; } - .kuiButtonEmpty:hover { - -webkit-transform: translateY(-1px); - transform: translateY(-1px); } - .kuiButtonEmpty:hover, .kuiButtonEmpty:focus { - text-decoration: underline; } - .kuiButtonEmpty:focus { - -webkit-animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } - .kuiButtonEmpty:active { - -webkit-transform: translateY(1px); - transform: translateY(1px); } - .kuiButtonEmpty .kuiButtonEmpty__content { - height: 100%; - width: 100%; - 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; - padding: 0 8px; } - .kuiButtonEmpty .kuiButtonEmpty__content > * + * { - margin-left: 8px; - /* 1 */ } - .kuiButtonEmpty.kuiButtonEmpty--small { - height: 32px; } - .kuiButtonEmpty.kuiButtonEmpty--iconRight .kuiButtonEmpty__content { - height: 100%; - width: 100%; - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - .kuiButtonEmpty.kuiButtonEmpty--iconRight .kuiButtonEmpty__content > * + * { - margin-left: 0; - /* 1 */ - margin-right: 8px; - /* 1 */ } - .kuiButtonEmpty:disabled { - color: #c5c5c5; - pointer-events: none; } - .kuiButtonEmpty:disabled .kuiButtonEmpty__content { - pointer-events: auto; - cursor: not-allowed; } - .kuiButtonEmpty:disabled .kuiButtonEmpty__icon { - fill: #c5c5c5; } - .kuiButtonEmpty:disabled:hover, .kuiButtonEmpty:disabled:focus { - background-color: #FFF; - text-decoration: none; } - -.kuiButtonEmpty--primary { - color: #0079a5; } - .kuiButtonEmpty--primary .kuiButtonEmpty__icon { - fill: #0079a5; } - .kuiButtonEmpty--primary:focus { - background-color: rgba(0, 121, 165, 0.1); } - .kuiButtonEmpty--primary:hover, .kuiButtonEmpty--primary:focus { - background-color: rgba(0, 121, 165, 0.1); } - -.kuiButtonEmpty--danger { - color: #A30000; } - .kuiButtonEmpty--danger .kuiButtonEmpty__icon { - fill: #A30000; } - .kuiButtonEmpty--danger:focus { - background-color: rgba(163, 0, 0, 0.1); } - .kuiButtonEmpty--danger:hover, .kuiButtonEmpty--danger:focus { - background-color: rgba(163, 0, 0, 0.1); } - -.kuiButtonEmpty--disabled { - color: #c5c5c5; } - .kuiButtonEmpty--disabled .kuiButtonEmpty__icon { - fill: #c5c5c5; } - .kuiButtonEmpty--disabled:focus { - background-color: rgba(197, 197, 197, 0.1); } - .kuiButtonEmpty--disabled:hover, .kuiButtonEmpty--disabled:focus { - background-color: rgba(197, 197, 197, 0.1); - cursor: not-allowed; } - -.kuiButtonEmpty--ghost { - color: #FFF; } - .kuiButtonEmpty--ghost .kuiButtonEmpty__icon { - fill: #FFF; } - .kuiButtonEmpty--ghost:focus { - background-color: rgba(255, 255, 255, 0.1); } - .kuiButtonEmpty--ghost:hover, .kuiButtonEmpty--ghost:focus { - background-color: rgba(255, 255, 255, 0.1); } - -.kuiButtonEmpty--flushLeft .kuiButtonEmpty__content { - border-left: none; - padding-left: 0; } - -.kuiButtonEmpty--flushRight .kuiButtonEmpty__content { - border-right: none; - padding-right: 0; } - -.kuiButtonIcon { - display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - height: 40px; - text-decoration: none; - border: solid 1px transparent; - text-align: center; - font-family: "Roboto", Helvetica, Arial, sans-serif; - transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - white-space: nowrap; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - border-color: transparent; - background-color: transparent; - box-shadow: none; - height: 32px; - width: 32px; } - .kuiButtonIcon:hover { - -webkit-transform: translateY(-1px); - transform: translateY(-1px); } - .kuiButtonIcon:hover, .kuiButtonIcon:focus { - text-decoration: underline; } - .kuiButtonIcon:focus { - -webkit-animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - animation: kuiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } - .kuiButtonIcon:active { - -webkit-transform: translateY(1px); - transform: translateY(1px); } - .kuiButtonIcon .kuiButtonIcon__icon { - -webkit-transform: translateY(-2px); - transform: translateY(-2px); } - .kuiButtonIcon:disabled { - color: #c5c5c5; - pointer-events: none; } - .kuiButtonIcon:disabled .kuiButtonIcon__icon { - fill: #c5c5c5; } - .kuiButtonIcon:disabled:hover, .kuiButtonIcon:disabled:focus { - background-color: #FFF; - text-decoration: none; } - -.kuiButtonIcon--primary { - color: #0079a5; } - .kuiButtonIcon--primary .kuiButtonIcon__icon { - fill: #0079a5; } - .kuiButtonIcon--primary:focus { - background-color: rgba(0, 121, 165, 0.1); } - .kuiButtonIcon--primary:hover, .kuiButtonIcon--primary:focus { - background-color: rgba(0, 121, 165, 0.1); } - -.kuiButtonIcon--danger { - color: #A30000; } - .kuiButtonIcon--danger .kuiButtonIcon__icon { - fill: #A30000; } - .kuiButtonIcon--danger:focus { - background-color: rgba(163, 0, 0, 0.1); } - .kuiButtonIcon--danger:hover, .kuiButtonIcon--danger:focus { - background-color: rgba(163, 0, 0, 0.1); } - -.kuiButtonIcon--disabled { - color: #c5c5c5; } - .kuiButtonIcon--disabled .kuiButtonIcon__icon { - fill: #c5c5c5; } - .kuiButtonIcon--disabled:focus { - background-color: rgba(197, 197, 197, 0.1); } - .kuiButtonIcon--disabled:hover, .kuiButtonIcon--disabled:focus { - background-color: rgba(197, 197, 197, 0.1); - cursor: not-allowed; } - -.kuiButtonIcon--ghost { - color: #FFF; } - .kuiButtonIcon--ghost .kuiButtonIcon__icon { - fill: #FFF; } - .kuiButtonIcon--ghost:focus { - background-color: rgba(255, 255, 255, 0.1); } - .kuiButtonIcon--ghost:hover, .kuiButtonIcon--ghost:focus { - background-color: rgba(255, 255, 255, 0.1); } - -.kuiCallOut { - padding: 16px; - border-left: 2px solid transparent; } - -.kuiCallOut--info { - border-color: #0079a5; - background-color: #e6f2f6; } - .kuiCallOut--info .kuiCallOutHeader__icon { - fill: #005574; } - .kuiCallOut--info .kuiCallOutHeader__title { - color: #005574; } - -.kuiCallOut--success { - border-color: #00A69B; - background-color: #e6f6f5; } - .kuiCallOut--success .kuiCallOutHeader__icon { - fill: #00746d; } - .kuiCallOut--success .kuiCallOutHeader__title { - color: #00746d; } - -.kuiCallOut--warning { - border-color: #E5830E; - background-color: #fcf3e7; } - .kuiCallOut--warning .kuiCallOutHeader__icon { - fill: #a05c0a; } - .kuiCallOut--warning .kuiCallOutHeader__title { - color: #a05c0a; } - -.kuiCallOut--danger { - border-color: #A30000; - background-color: #f6e6e6; } - .kuiCallOut--danger .kuiCallOutHeader__icon { - fill: #720000; } - .kuiCallOut--danger .kuiCallOutHeader__title { - color: #720000; } - -/** - * 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: 1.5; - 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 */ } - -.kuiCode { - font-family: "Roboto Mono", monospace; - display: inline-block; - white-space: pre; - background: #F5F5F5; - color: #DD0A73; - border: 1px solid #D9D9D9; - font-size: 12px; - padding: 0 4px; } - -.kuiContextMenu { - width: 256px; - position: relative; - overflow: hidden; - transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); - border-radius: 4px; } - .kuiContextMenu .kuiContextMenu__content { - padding: 8px; } - -.kuiContextMenu__icon { - margin-right: 8px; } - -.kuiContextMenu__itemLayout { - 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; } - -.kuiContextMenuPanel { - position: absolute; - width: 100%; - visibility: visible; - background-color: #FFF; } - .kuiContextMenuPanel.kuiContextMenuPanel-txInLeft { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiContextMenuPanel.kuiContextMenuPanel-txOutLeft { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiContextMenuPanel.kuiContextMenuPanel-txInRight { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiContextMenuPanel.kuiContextMenuPanel-txOutRight { - pointer-events: none; - -webkit-animation: kuiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: kuiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - -.kuiContextMenuPanel--next { - -webkit-transform: translateX(256px); - transform: translateX(256px); - visibility: hidden; } - -.kuiContextMenuPanel--previous { - -webkit-transform: translateX(-256px); - transform: translateX(-256px); - visibility: hidden; } - -.kuiContextMenuPanelTitle { - background-color: #F5F5F5; - border-bottom: 1px solid #D9D9D9; - padding: 12px; - width: 100%; - text-align: left; } - .kuiContextMenuPanelTitle:hover, .kuiContextMenuPanelTitle:focus { - text-decoration: underline; } - -@-webkit-keyframes kuiContextMenuPanelTxInLeft { - 0% { - -webkit-transform: translateX(256px); - transform: translateX(256px); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@keyframes kuiContextMenuPanelTxInLeft { - 0% { - -webkit-transform: translateX(256px); - transform: translateX(256px); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@-webkit-keyframes kuiContextMenuPanelTxOutLeft { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(-256px); - transform: translateX(-256px); } } - -@keyframes kuiContextMenuPanelTxOutLeft { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(-256px); - transform: translateX(-256px); } } - -@-webkit-keyframes kuiContextMenuPanelTxInRight { - 0% { - -webkit-transform: translateX(-256px); - transform: translateX(-256px); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@keyframes kuiContextMenuPanelTxInRight { - 0% { - -webkit-transform: translateX(-256px); - transform: translateX(-256px); } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@-webkit-keyframes kuiContextMenuPanelTxOutRight { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(256px); - transform: translateX(256px); } } - -@keyframes kuiContextMenuPanelTxOutRight { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); } - 100% { - -webkit-transform: translateX(256px); - transform: translateX(256px); } } - -.kuiContextMenuItem { - padding: 12px; - width: 100%; - text-align: left; - color: #3F3F3F; } - .kuiContextMenuItem:hover, .kuiContextMenuItem:focus { - text-decoration: underline; } - .kuiContextMenuItem:focus { - background-color: #e6f2f6; } - -.kuiContextMenuItem__inner { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - -.kuiContextMenuItem__text { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; } - -.kuiContextMenuItem__arrow { - -webkit-align-self: flex-end; - -ms-flex-item-align: end; - align-self: flex-end; } - -.kuiDescriptionList .kuiDescriptionList__title { - font-weight: 500; } - -.kuiDescriptionList .kuiDescriptionList__description { - color: #666; } - -.kuiDescriptionList.kuiDescriptionList--row .kuiDescriptionList__title { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - margin-top: 16px; } - .kuiDescriptionList.kuiDescriptionList--row .kuiDescriptionList__title:first-of-type { - margin-top: 0; } - -.kuiDescriptionList.kuiDescriptionList--row .kuiDescriptionList__description { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--row.kuiDescriptionList--center { - text-align: center; } - -.kuiDescriptionList.kuiDescriptionList--row.kuiDescriptionList--right { - text-align: right; } - -.kuiDescriptionList.kuiDescriptionList--row.kuiDescriptionList--compressed .kuiDescriptionList__title { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--row.kuiDescriptionList--compressed .kuiDescriptionList__description { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--column { - 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-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } - .kuiDescriptionList.kuiDescriptionList--column > * { - margin-top: 16px; } - .kuiDescriptionList.kuiDescriptionList--column > *:first-child, .kuiDescriptionList.kuiDescriptionList--column > :nth-child(2) { - margin-top: 0; } - .kuiDescriptionList.kuiDescriptionList--column .kuiDescriptionList__title { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - padding-right: 8px; } - .kuiDescriptionList.kuiDescriptionList--column .kuiDescriptionList__description { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - padding-left: 8px; } - .kuiDescriptionList.kuiDescriptionList--column.kuiDescriptionList--center .kuiDescriptionList__title { - text-align: right; } - .kuiDescriptionList.kuiDescriptionList--column.kuiDescriptionList--compressed .kuiDescriptionList__title { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - .kuiDescriptionList.kuiDescriptionList--column.kuiDescriptionList--compressed .kuiDescriptionList__description { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--inline .kuiDescriptionList__title { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; - display: inline; - border-radius: 4px; - font-weight: 400; - background: #F5F5F5; - border: 1px solid #D9D9D9; - padding: 0 4px; - margin: 0 4px; } - .kuiDescriptionList.kuiDescriptionList--inline .kuiDescriptionList__title:first-of-type { - margin-left: 0; } - -.kuiDescriptionList.kuiDescriptionList--inline .kuiDescriptionList__description { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; - display: inline; - word-break: break-all; } - -.kuiDescriptionList.kuiDescriptionList--inline.kuiDescriptionList--compressed .kuiDescriptionList__title { - font-size: 12px; - font-size: 0.75rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--inline.kuiDescriptionList--compressed .kuiDescriptionList__description { - font-size: 12px; - font-size: 0.75rem; - line-height: 1.5; } - -.kuiDescriptionList.kuiDescriptionList--inline.kuiDescriptionList--center { - text-align: center; } - -.kuiFlexGroup { - 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; } - .kuiFlexGroup .kuiFlexItem { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; } - .kuiFlexGroup.kuiFlexGroup--gutterSmall > .kuiFlexItem + .kuiFlexItem { - margin-left: 8px; } - .kuiFlexGroup.kuiFlexGroup--gutterMedium > .kuiFlexItem + .kuiFlexItem { - margin-left: 16px; } - .kuiFlexGroup.kuiFlexGroup--gutterLarge > .kuiFlexItem + .kuiFlexItem { - margin-left: 24px; } - .kuiFlexGroup.kuiFlexGroup--gutterExtraLarge > .kuiFlexItem + .kuiFlexItem { - margin-left: 40px; } - .kuiFlexGroup.kuiFlexGroup--justifyContentSpaceBetween { - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; } - .kuiFlexGroup.kuiFlexGroup--justifyContentSpaceAround { - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; } - .kuiFlexGroup.kuiFlexGroup--justifyContentCenter { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; } - .kuiFlexGroup.kuiFlexGroup--justifyContentFlexEnd { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; } - .kuiFlexGroup.kuiFlexGroup--alignItemsStart { - -webkit-box-align: start; - -webkit-align-items: flex-start; - -ms-flex-align: start; - align-items: flex-start; } - .kuiFlexGroup.kuiFlexGroup--alignItemsCenter { - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - .kuiFlexGroup.kuiFlexGroup--alignItemsFlexEnd { - -webkit-box-align: end; - -webkit-align-items: flex-end; - -ms-flex-align: end; - align-items: flex-end; } - -@media only screen and (max-width: 768px) { - .kuiFlexGroup { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } } - -.kuiFlexGrid { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-bottom: 0; } - .kuiFlexGrid > .kuiFlexItem { - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; } - .kuiFlexGrid > .kuiFlexItem.kuiFlexItem--flexGrowZero { - -webkit-box-flex: 0 !important; - -webkit-flex-grow: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - -webkit-flex-basis: auto !important; - -ms-flex-preferred-size: auto !important; - flex-basis: auto !important; } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterSmall > .kuiFlexItem { - margin: 4px; } - -.kuiFlexGrid--gutterSmall { - margin: -4px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterSmall.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 8px); - -ms-flex-preferred-size: calc(25% - 8px); - flex-basis: calc(25% - 8px); } - -.kuiFlexGrid--gutterSmall { - margin: -4px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterSmall.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 8px); - -ms-flex-preferred-size: calc(33.3% - 8px); - flex-basis: calc(33.3% - 8px); } - -.kuiFlexGrid--gutterSmall { - margin: -4px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterSmall.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 8px); - -ms-flex-preferred-size: calc(50% - 8px); - flex-basis: calc(50% - 8px); } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterMedium > .kuiFlexItem { - margin: 8px; } - -.kuiFlexGrid--gutterMedium { - margin: -8px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterMedium.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 16px); - -ms-flex-preferred-size: calc(25% - 16px); - flex-basis: calc(25% - 16px); } - -.kuiFlexGrid--gutterMedium { - margin: -8px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterMedium.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 16px); - -ms-flex-preferred-size: calc(33.3% - 16px); - flex-basis: calc(33.3% - 16px); } - -.kuiFlexGrid--gutterMedium { - margin: -8px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterMedium.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 16px); - -ms-flex-preferred-size: calc(50% - 16px); - flex-basis: calc(50% - 16px); } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterLarge > .kuiFlexItem { - margin: 12px; } - -.kuiFlexGrid--gutterLarge { - margin: -12px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterLarge.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 24px); - -ms-flex-preferred-size: calc(25% - 24px); - flex-basis: calc(25% - 24px); } - -.kuiFlexGrid--gutterLarge { - margin: -12px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterLarge.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 24px); - -ms-flex-preferred-size: calc(33.3% - 24px); - flex-basis: calc(33.3% - 24px); } - -.kuiFlexGrid--gutterLarge { - margin: -12px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterLarge.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 24px); - -ms-flex-preferred-size: calc(50% - 24px); - flex-basis: calc(50% - 24px); } - -/** - * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid - * without columns. - */ -.kuiFlexGrid--gutterXLarge > .kuiFlexItem { - margin: 16px; } - -.kuiFlexGrid--gutterXLarge { - margin: -16px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterXLarge.kuiFlexGrid--fourths > .kuiFlexItem { - -webkit-flex-basis: calc(25% - 32px); - -ms-flex-preferred-size: calc(25% - 32px); - flex-basis: calc(25% - 32px); } - -.kuiFlexGrid--gutterXLarge { - margin: -16px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterXLarge.kuiFlexGrid--thirds > .kuiFlexItem { - -webkit-flex-basis: calc(33.3% - 32px); - -ms-flex-preferred-size: calc(33.3% - 32px); - flex-basis: calc(33.3% - 32px); } - -.kuiFlexGrid--gutterXLarge { - margin: -16px; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - .kuiFlexGrid--gutterXLarge.kuiFlexGrid--halves > .kuiFlexItem { - -webkit-flex-basis: calc(50% - 32px); - -ms-flex-preferred-size: calc(50% - 32px); - flex-basis: calc(50% - 32px); } - -/** - * 1. Allow KuiPanels to expand to fill the item. - */ -.kuiFlexItem { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - /* 1 */ - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - /* 1 */ - /* - * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles. - * 2. FlexItem can be manually set to not grow if needed. - */ } - .kuiFlexItem.kuiFlexItem--flexGrowZero { - /* 1 */ - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - /* 2 */ - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - /* 2 */ } - -@media only screen and (max-width: 768px) { - .kuiFlexItem { - width: 100% !important; - -webkit-flex-basis: 100% !important; - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - margin-left: 0 !important; - margin-bottom: 16px !important; } } - -/** - * 1. Override invalid state with focus state. - */ -.kuiCheckbox { - position: relative; - height: 24px; - /** - * 1. Float above the visual checkbox and match its dimension, so that when users try to click it - * they actually click this input. - */ } - .kuiCheckbox .kuiCheckbox__input { - position: absolute; - /* 1 */ - opacity: 0; - /* 1 */ - height: 24px; - /* 1 */ - width: 24px; - /* 1 */ - z-index: 1; - /* 1 */ - margin: 0; - /* 1 */ - cursor: pointer; } - .kuiCheckbox .kuiCheckbox__input:checked ~ .kuiCheckbox__square .kuiCheckbox__check { - background-color: #3F3F3F; - -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, - .kuiCheckbox .kuiCheckbox__input:active ~ .kuiCheckbox__square { - background-color: #e6f2f6; - border-color: #0079a5; } - .kuiCheckbox .kuiCheckbox__square { - position: absolute; - height: 24px; - width: 24px; - border-radius: 4px; - border: 1px solid #D9D9D9; - background: #fbfbfb; - z-index: 0; } - .kuiCheckbox .kuiCheckbox__check { - height: 100%; - width: 100%; } - .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--inList .kuiCheckbox__input:checked ~ .kuiCheckbox__square { - background: #0079a5; - border-color: #0079a5; } - .kuiCheckbox.kuiCheckbox--inList .kuiCheckbox__input:checked ~ .kuiCheckbox__square .kuiCheckbox__check { - background-color: #FFF; } - .kuiCheckbox.kuiCheckbox--inList .kuiCheckbox__input:focus:checked ~ .kuiCheckbox__square { - background: #3394b7; } - -.kuiCheckboxGroup__item + .kuiCheckboxGroup__item { - margin-top: 8px; } - -.kuiFieldNumber { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #3F3F3F; - background: #fbfbfb; - 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 #fbfbfb; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; } - .kuiFieldNumber:invalid { - /* 1 */ - 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 #FFF, inset 0 -2px 0 0 #A30000; } - .kuiFieldNumber:focus { - /* 1 */ - background: #FFF; - 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 #FFF, inset 0 -2px 0 0 #0079a5; } - .kuiFieldNumber--withIcon { - padding-left: 40px; } - -.kuiFieldPassword { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #3F3F3F; - background: #fbfbfb; - 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 #fbfbfb; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; - padding-left: 40px; } - .kuiFieldPassword:invalid { - /* 1 */ - 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 #FFF, inset 0 -2px 0 0 #A30000; } - .kuiFieldPassword:focus { - /* 1 */ - background: #FFF; - 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 #FFF, inset 0 -2px 0 0 #0079a5; } - -.kuiFieldSearch { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #3F3F3F; - background: #fbfbfb; - 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 #fbfbfb; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; - padding-left: 40px; } - .kuiFieldSearch:invalid { - /* 1 */ - 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 #FFF, inset 0 -2px 0 0 #A30000; } - .kuiFieldSearch:focus { - /* 1 */ - background: #FFF; - 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 #FFF, inset 0 -2px 0 0 #0079a5; } - -.kuiFieldText { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #3F3F3F; - background: #fbfbfb; - 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 #fbfbfb; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; } - .kuiFieldText:invalid { - /* 1 */ - 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 #FFF, inset 0 -2px 0 0 #A30000; } - .kuiFieldText:focus { - /* 1 */ - background: #FFF; - 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 #FFF, inset 0 -2px 0 0 #0079a5; } - .kuiFieldText--withIcon { - padding-left: 40px; } - -.kuiForm__error { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; - list-style: disc; - margin-left: 32px; } - -.kuiForm__errors { - margin-bottom: 16px; } - -.kuiFormControlLayout { - max-width: 400px; - width: 100%; - display: inline-block; - position: relative; } - -.kuiFormControlLayout__icon { - position: absolute; - top: 12px; - left: 12px; } - -.kuiFormControlLayout__icon--right { - left: auto; - right: 12px; } - -.kuiFormErrorText { - font-size: 12px; - padding: 8px 0; - color: #A30000; } - -.kuiFormHelpText { - font-size: 12px; - padding: 8px 0; - color: #666; } - -/** - * 1. Focused state overrides invalid state. - */ -.kuiFormLabel { - font-size: 12px; - margin-bottom: 8px; - cursor: pointer; - transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); - font-weight: 500; } - .kuiFormLabel.kuiFormLabel-isInvalid { - color: #A30000; - /* 1 */ } - .kuiFormLabel.kuiFormLabel-isFocused { - color: #0079a5; - /* 1 */ } - -/** - * 1. Coerce inline form elements to behave as block-level elements. - * 2. For inline forms, we need to add padding if the label doesn't exist. - */ -.kuiFormRow { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - /* 1 */ - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - /* 1 */ - max-width: 400px; } - .kuiFormRow + * { - margin-top: 24px; } - .kuiFormRow.kuiFormRow--hasEmptyLabelSpace { - padding-top: 20px; - /* 2 */ } - .kuiFormRow .kuiFormRow__text + .kuiFormRow__text { - padding-top: 0; } - -.kuiRange { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - margin: 8px 0; - width: 100%; } - .kuiRange:focus::-webkit-slider-thumb { - border: 2px solid #0079a5; } - .kuiRange:focus::-moz-range-thumb { - border: 2px solid #0079a5; } - .kuiRange:focus::-ms-thumb { - border: 2px solid #0079a5; } - .kuiRange:focus::-webkit-slider-runnable-track { - background-color: #0079a5; } - .kuiRange::-webkit-slider-runnable-track { - cursor: pointer; - height: 2px; - transition: all 250ms ease-in; - width: 100%; - background: #D9D9D9; - border: 0 solid #D9D9D9; - border-radius: 4px; } - .kuiRange::-webkit-slider-thumb { - background: #FFF; - border: 2px solid #3F3F3F; - 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: #D9D9D9; - border: 0 solid #D9D9D9; - border-radius: 4px; } - .kuiRange::-moz-range-thumb { - background: #FFF; - border: 2px solid #3F3F3F; - 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: #D9D9D9; - border: 0 solid #D9D9D9; - border-radius: 8px; } - .kuiRange::-ms-fill-upper { - background: #D9D9D9; - border: 0 solid #D9D9D9; - border-radius: 8px; } - .kuiRange::-ms-thumb { - background: #FFF; - border: 2px solid #3F3F3F; - border-radius: 50%; - cursor: pointer; - height: 16px; - width: 16px; - margin-top: 0; } - -/** - * 1. Leave room for caret. - */ -.kuiSelect { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #3F3F3F; - background: #fbfbfb; - 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 #fbfbfb; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; - padding-right: 40px; - /* 1 */ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } - .kuiSelect:invalid { - /* 1 */ - 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 #FFF, inset 0 -2px 0 0 #A30000; } - .kuiSelect:focus { - /* 1 */ - background: #FFF; - 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 #FFF, inset 0 -2px 0 0 #0079a5; } - .kuiSelect::-ms-expand { - display: none; } - -.kuiSwitch { - position: relative; - display: inline-block; - height: 24px; - /** - * 1. The input is "hidden" but still focusable. - */ - /** - * 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 { - padding-left: 8px; - line-height: 24px; - font-size: 14px; } - .kuiSwitch .kuiSwitch__input { - position: absolute; - opacity: 0; - /* 1 */ - width: 100%; - height: 100%; - cursor: pointer; } - .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body { - background: #FFF; } - .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body .kuiSwitch__thumb { - border-color: #0079a5; - background-color: #0079a5; } - .kuiSwitch .kuiSwitch__body { - pointer-events: none; - width: 52px; - height: 24px; - background: #fbfbfb; - box-shadow: inset 0 0 0 1px #D9D9D9; - 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: #FFF; - left: 28px; - border-radius: 50%; - border: 1px solid #D9D9D9; - 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); } - .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: 4px; - bottom: 0; - width: 48px; - height: 16px; - transition: left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), right 250ms cubic-bezier(0.34, 1.61, 0.7, 1); - fill: #3F3F3F; } - .kuiSwitch .kuiSwitch__icon--checked { - right: auto; - left: -8px; - fill: #3F3F3F; } - .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: 0; } - .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 { - max-width: 400px; - width: 100%; - border: none; - font-size: 14px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - padding: 12px; - color: #3F3F3F; - background: #fbfbfb; - 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 #fbfbfb; - transition: box-shadow 250ms ease-in, background 250ms ease-in; - border-radius: 0; } - .kuiTextArea:invalid { - /* 1 */ - 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 #FFF, inset 0 -2px 0 0 #A30000; } - .kuiTextArea:focus { - /* 1 */ - background: #FFF; - 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 #FFF, inset 0 -2px 0 0 #0079a5; } - -.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: #FFF; - border-bottom: 1px solid #D9D9D9; } - -.kuiHeader__notification { - display: inline-block; - border-radius: 4px; - background: #DD0A73; - color: #FFF; - 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 #D9D9D9; } - .kuiHeaderAlert:hover .kuiHeaderAlert__dismiss { - opacity: 1; } - -.kuiHeaderAlert__dismiss { - opacity: 0; - position: absolute; - right: 16px; - top: 16px; - transition: opacity 250ms ease-in; - cursor: pointer; } - -.kuiHeaderAlert__title { - font-weight: 500; - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - padding-right: 24px; } - -.kuiHeaderAlert__text { - font-size: 12px; - font-size: 0.75rem; - line-height: 1.5; - margin-bottom: 8px; } - -.kuiHeaderAlert__action { - font-size: 12px; - font-size: 0.75rem; - line-height: 1.5; - color: #0079a5; } - .kuiHeaderAlert__action:focus { - outline: solid 6px #e6f2f6; } - -.kuiHeaderAlert__date { - font-size: 12px; - font-size: 0.75rem; - line-height: 1.5; - color: #666; - text-align: right; } - -/** - * 1. Override KeyPadMenu. - * 2. Override popover default. - */ -.kuiHeaderPopover { - top: calc(100% - 16px) !important; - /* 1 */ - border-radius: 4px 0 4px 4px !important; - /* 2 */ } - -.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: #e6f2f6; } - -.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: #3F3F3F; } - .kuiHeaderBreadcrumb:not(:last-child):after { - position: absolute; - top: 24px; - right: -3px; - content: ""; - width: 1px; - height: 16px; - -webkit-transform: rotate(15deg); - transform: rotate(15deg); - background: #D9D9D9; } - .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):hover { - text-decoration: underline; } - .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):focus { - text-decoration: underline; - background: #e6f2f6; } - .kuiHeaderBreadcrumb.kuiHeaderBreadcrumb-isActive { - color: #999; } - -.kuiHeaderBreadcrumb__text { - white-space: nowrap; - max-width: 150px; - display: block; - text-overflow: ellipsis; - overflow: hidden; } - -.kuiHeaderBreadcrumb--collapsed { - color: #D9D9D9; } - -@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: #F5F5F5; } - .kuiHeaderSectionItem:after { - position: absolute; - content: ""; - width: 1px; - top: 16px; - bottom: 0; - background: #D9D9D9; - left: 0; } - -.kuiHeaderSectionItem__button { - height: 64px; - min-width: 64px; - text-align: center; } - .kuiHeaderSectionItem__button:focus { - background: #e6f2f6; } - -.kuiHeaderSectionItem--borderRight:after { - left: auto; - right: 0; } - -.kuiHorizontalRule { - border: none; - height: 1px; - background-color: #D9D9D9; } - .kuiHorizontalRule.kuiHorizontalRule--full { - width: 100%; } - .kuiHorizontalRule.kuiHorizontalRule--half { - width: 50%; - margin-left: auto; - margin-right: auto; } - .kuiHorizontalRule.kuiHorizontalRule--quarter { - width: 25%; - margin-left: auto; - margin-right: auto; } - -.kuiHorizontalRule--marginSmall { - margin: 8px 0; } - -.kuiHorizontalRule--marginMedium { - margin: 12px 0; } - -.kuiHorizontalRule--marginLarge { - margin: 24px 0; } - -.kuiHorizontalRule--marginXLarge { - margin: 32px 0; } - -.kuiHorizontalRule--marginXXLarge { - margin: 40px 0; } - -.kuiIcon { - display: inline-block; - vertical-align: middle; - fill: #3F3F3F; } - .kuiIcon:focus { - opacity: 1; - background: #e6f2f6; } - -.kuiIcon--basic { - fill: #3F3F3F; } - -.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. 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: #666; - border: 1px solid #D9D9D9; - border-color: transparent; - border-radius: 4px; - font-family: "Roboto", Helvetica, Arial, sans-serif; - /* 1 */ } - .kuiKeyPadMenuItem:hover, .kuiKeyPadMenuItem:focus { - border-color: #D9D9D9; } - .kuiKeyPadMenuItem:hover .kuiKeyPadMenuItem__icon, .kuiKeyPadMenuItem:focus .kuiKeyPadMenuItem__icon { - -webkit-transform: translateY(0); - transform: translateY(0); } - .kuiKeyPadMenuItem:focus { - background: #e6f2f6; } - .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: 1.5; - text-align: center; } - -.kuiLink { - color: #0079a5; } - .kuiLink:hover { - text-decoration: underline; } - .kuiLink:focus { - text-decoration: underline; - background: #e6f2f6; } - .kuiLink:hover { - color: #005472; } - .kuiLink:focus { - background: #e6f2f6; - outline: solid 3px #e6f2f6; } - -.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 #000; - -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: #000; - -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: #0079a5; } - .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: #3F3F3F; - -webkit-animation-delay: .3s; - animation-delay: .3s; } - -.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(1) { - background-color: #D9D9D9; } - -.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(2) { - background-color: #cfcfcf; } - -.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(3) { - background-color: #c5c5c5; } - -.kuiLoadingChart--mono .kuiLoadingChart__bar:nth-child(4) { - background-color: #bababa; } - -.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 #D9D9D9; - border-top-color: #0079a5; - -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); } } - -.kuiModal { - box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); - background-color: #FFF; - border: 1px solid #D9D9D9; - 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); } - -.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; } - -.kuiModalHeader__title { - font-size: 24px; - font-size: 1.5rem; - line-height: 1.5; } - -.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); } } - -.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(255, 255, 255, 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; } - -.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 { - width: 100%; } - -.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; } } - -.kuiPagination { - 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; } - -.kuiPaginationButton { - font-size: 14px; - padding: 0; - height: 24px; - min-width: 32px; - text-align: center; - color: #3F3F3F; } - .kuiPaginationButton svg { - fill: #3F3F3F !important; } - .kuiPaginationButton:not(:focus):hover { - background-color: transparent; } - -.kuiPaginationButton-isActive { - pointer-events: none; - background-color: #0079a5; - color: #FFF; - border-radius: 4px; } - .kuiPaginationButton-isActive:focus { - background-color: #0079a5; - color: #FFF; } - -.kuiPaginationButton-isPlaceholder { - pointer-events: none; - color: #999; } - -@media only screen and (max-width: 768px) { - .kuiPaginationButton--hideOnMobile { - display: none; } } - -.kuiPanel { - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); - background-color: #FFF; - border: 1px solid #D9D9D9; - border-radius: 4px; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; } - .kuiPanel.kuiPanel--paddingSmall { - padding: 8px; } - .kuiPanel.kuiPanel--paddingMedium { - padding: 16px; } - .kuiPanel.kuiPanel--paddingLarge { - padding: 24px; } - .kuiPanel.kuiPanel--shadow { - box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); } - .kuiPanel.kuiPanel--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; - z-index: 2000; - margin-top: 8px; - pointer-events: auto; } - -.kuiPopover__panel { - position: absolute; - min-width: 256px; - 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; - 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 #D9D9D9; } - .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 #FFF; } - -.kuiPopover--withTitle .kuiPopover__panel:after { - border-bottom-color: #F5F5F5; } - -.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: #F5F5F5; - border-bottom: 1px solid #D9D9D9; - padding: 12px; } - -.kuiProgress { - width: 100%; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: none; - vertical-align: middle; - position: relative; - overflow: hidden; - background-color: #D9D9D9; - /** - * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue, - * we apply this style to a
instead of a element. - * See https://css-tricks.com/html5-progress-element/ for more info. - */ } - .kuiProgress::-webkit-progress-bar { - background-color: #D9D9D9; } - .kuiProgress::-webkit-progress-value { - transition: width 250ms linear; } - .kuiProgress::-moz-progress-bar { - transition: width 250ms linear; } - .kuiProgress.kuiProgress--primary::-webkit-progress-value { - background-color: #0079a5; } - .kuiProgress.kuiProgress--primary::-moz-progress-bar { - background-color: #0079a5; } - .kuiProgress.kuiProgress--primary.kuiProgress--indeterminate:before { - background-color: #0079a5; } - .kuiProgress.kuiProgress--secondary::-webkit-progress-value { - background-color: #00A69B; } - .kuiProgress.kuiProgress--secondary::-moz-progress-bar { - background-color: #00A69B; } - .kuiProgress.kuiProgress--secondary.kuiProgress--indeterminate:before { - background-color: #00A69B; } - .kuiProgress.kuiProgress--warning::-webkit-progress-value { - background-color: #E5830E; } - .kuiProgress.kuiProgress--warning::-moz-progress-bar { - background-color: #E5830E; } - .kuiProgress.kuiProgress--warning.kuiProgress--indeterminate:before { - background-color: #E5830E; } - .kuiProgress.kuiProgress--danger::-webkit-progress-value { - background-color: #A30000; } - .kuiProgress.kuiProgress--danger::-moz-progress-bar { - background-color: #A30000; } - .kuiProgress.kuiProgress--danger.kuiProgress--indeterminate:before { - background-color: #A30000; } - .kuiProgress.kuiProgress--accent::-webkit-progress-value { - background-color: #DD0A73; } - .kuiProgress.kuiProgress--accent::-moz-progress-bar { - background-color: #DD0A73; } - .kuiProgress.kuiProgress--accent.kuiProgress--indeterminate:before { - background-color: #DD0A73; } - .kuiProgress.kuiProgress--subdued::-webkit-progress-value { - background-color: #999; } - .kuiProgress.kuiProgress--subdued::-moz-progress-bar { - background-color: #999; } - .kuiProgress.kuiProgress--subdued.kuiProgress--indeterminate:before { - background-color: #999; } - .kuiProgress.kuiProgress--xs { - height: 2px; } - .kuiProgress.kuiProgress--s { - height: 4px; } - .kuiProgress.kuiProgress--m { - height: 8px; } - .kuiProgress.kuiProgress--l { - height: 16px; } - .kuiProgress.kuiProgress--fixed, .kuiProgress.kuiProgress--absolute { - top: 0; - left: 0; - right: 0; - background-color: transparent; } - .kuiProgress.kuiProgress--fixed::-webkit-progress-bar, .kuiProgress.kuiProgress--absolute::-webkit-progress-bar { - background-color: transparent; } - .kuiProgress.kuiProgress--fixed { - position: fixed; } - .kuiProgress.kuiProgress--absolute { - position: absolute; } - .kuiProgress.kuiProgress--indeterminate:before { - position: absolute; - content: ""; - width: 100%; - top: 0; - bottom: 0; - left: 0; - -webkit-transform: scaleX(0) translateX(0%); - transform: scaleX(0) translateX(0%); - -webkit-animation: kuiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; - animation: kuiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } - -@-webkit-keyframes kuiProgress { - 0% { - -webkit-transform: scaleX(1) translateX(-100%); - transform: scaleX(1) translateX(-100%); } - 100% { - -webkit-transform: scaleX(1) translateX(100%); - transform: scaleX(1) translateX(100%); } } - -@keyframes kuiProgress { - 0% { - -webkit-transform: scaleX(1) translateX(-100%); - transform: scaleX(1) translateX(-100%); } - 100% { - -webkit-transform: scaleX(1) translateX(100%); - transform: scaleX(1) translateX(100%); } } - -.kuiSideNav { - position: relative; - height: 100%; } - -.kuiSideNav__mobileToggle { - display: none; - border-bottom: 1px solid #D9D9D9; - 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: #0079a5; } - -.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: #0079a5; } - -.kuiSideNav__hideButton { - width: 24px; - height: 24px; - border-radius: 4px; - border: 1px solid #D9D9D9; - background: #FFF; - position: absolute; - 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-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; - right: -40px; - top: 32px; } - -/** - * 1. Panels already have padding, so we need to remove it. - */ -.kuiSideNav--inPanel .kuiSideNav__mobileToggle { - padding-left: 0; - /* 1 */ - padding-right: 0; - /* 1 */ } - -@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; } } - -@media only screen and (min-width: 768px) { - .kuiSideNav--inPanel { - border-right: 1px solid #D9D9D9; - background: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0, #FFF 2px, #FFF 100%); - /** - * 1. We need the extra specificity to override the original nested selector. - * 2. Adjust width to take overlap of border into account. - */ } - .kuiSideNav--inPanel .kuiSideNavItem.kuiSideNavItem-isSelected { - /* 1 */ - position: relative; - width: calc(100% + 1px); - /* 2 */ - box-shadow: none; - border: 1px solid #D9D9D9; - border-right: none; - border-radius: 4px 0 0 4px; } } - -.kuiSideNavItem { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; - display: block; - width: 100%; - text-align: left; - padding: 4px 8px; - color: #666; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - border: 1px solid #D9D9D9; - border-color: transparent; } - .kuiSideNavItem.kuiSideNavItem-isSelected { - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); - color: #00A69B; - border-left: 2px solid #D9D9D9; - border-left-color: #00A69B; - background-color: #FFF; } - .kuiSideNavItem:hover { - text-decoration: underline; } - .kuiSideNavItem:focus { - background-color: #e6f2f6; } - .kuiSideNavItem:focus:not(.kuiSideNavItem-isSelected) { - border: solid 1px #c1dfe9; } - -.kuiSideNavTitle { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - 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 */ } - -.kuiSpacer--xs { - height: 4px; } - -.kuiSpacer--s { - height: 8px; } - -.kuiSpacer--m { - height: 16px; } - -.kuiSpacer--l { - height: 24px; } - -.kuiSpacer--xl { - height: 32px; } - -.kuiSpacer--xxl { - height: 40px; } - -/** - * 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: 1.5; - width: 100%; - border: none; - border-collapse: collapse; - background-color: #FFF; } - -.kuiTable--compressed .kuiTableCellContent { - padding: 8px; } - -.kuiTable--compressed .kuiTableHeaderButton:focus { - outline: solid 8px #e6f2f6; } - -.kuiTableHeaderCell { - max-width: 20px; - /* 1 */ - vertical-align: middle; - color: #000; } - .kuiTableHeaderCell .kuiTableHeaderButton { - text-align: left; } - -.kuiTableHeaderCellCheckbox { - width: 36px; - vertical-align: middle; } - .kuiTableHeaderCellCheckbox .kuiTableCellContent { - padding-right: 0; - padding-top: 0; - padding-bottom: 0; } - -.kuiTableHeaderButton { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; - color: inherit; - width: 100%; } - .kuiTableHeaderButton:hover, .kuiTableHeaderButton:focus { - text-decoration: underline; - color: #0079a5; } - .kuiTableHeaderButton:hover .kuiTableSortIcon, .kuiTableHeaderButton:focus .kuiTableSortIcon { - display: block; - fill: #0079a5; } - .kuiTableHeaderButton:focus { - background: #e6f2f6; } - -.kuiTableSortIcon { - margin-left: 4px; - fill: #cccccc; } - .kuiTableHeaderButton-isSorted .kuiTableSortIcon { - fill: #000; } - -.kuiTableRow { - transition: background-color 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiTableRow:hover { - background-color: #fafafa; } - .kuiTableRow.kuiTableRow-isSelected { - background-color: rgba(0, 121, 165, 0.05); } - -.kuiTableRowCell { - max-width: 20px; - /* 1 */ - vertical-align: middle; - color: #3F3F3F; - border-top: 1px solid #D9D9D9; - border-bottom: 1px solid #D9D9D9; } - -.kuiTableRowCellCheckbox { - width: 36px; - vertical-align: middle; - border-top: 1px solid #D9D9D9; - border-bottom: 1px solid #D9D9D9; } - .kuiTableRowCellCheckbox .kuiTableCellContent { - padding-right: 0; - padding-top: 0; - padding-bottom: 0; } - -/** - * 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. - */ -.kuiTableCellContent { - 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; - white-space: nowrap; - /* 2 */ - overflow: hidden; - /* 2 */ - text-overflow: ellipsis; - /* 2 */ - padding: 12px; - /* 2 */ } - -.kuiTableCellContent__text { - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; } - -.kuiTableCellContent--alignRight { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; } - -.kuiTableCellContent--wrapText { - white-space: normal; } - -.kuiTabs { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - border-bottom: 1px solid #D9D9D9; } - -.kuiTab { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - position: relative; - cursor: pointer; - padding: 12px 16px; - color: #666; - background-color: transparent; - transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiTab:hover:not(.kuiTab-isSelected) { - color: #3F3F3F; - text-decoration: underline; } - .kuiTab:focus { - background-color: #e6f2f6; - 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); } } - -.kuiTitle { - color: #000; - font-weight: 300; - font-size: 24px; - font-size: 1.5rem; - line-height: 1.5; } - -.kuiTitle--small { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; } - -.kuiTitle--large { - font-size: 32px; - font-size: 2rem; - line-height: 1.5; } - -/** - * 1. Allow list to expand as items are added, but cap it at the screen height. - * 2. Only show the scroll on hover. Generally, scrolling is bad for toasts. - * 3. Allow some padding if a scroll shows up. - */ -.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: 336px; - /* 3 */ - padding-right: 16px; - max-height: 100vh; - /* 1 */ } - .kuiGlobalToastList::-webkit-scrollbar { - width: 16px; - height: 16px; } - .kuiGlobalToastList::-webkit-scrollbar-thumb { - background-color: rgba(102, 102, 102, 0.5); - border: 6px solid transparent; - background-clip: content-box; } - .kuiGlobalToastList::-webkit-scrollbar-track { - background-color: transparent; } - .kuiGlobalToastList:hover { - overflow-y: auto; - /* 2 */ } - -.kuiGlobalToastListItem { - margin-bottom: 16px; - margin-right: 16px; - -webkit-animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); - animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); - 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: translateY(24px) scale(0.9); - transform: translateY(24px) scale(0.9); - opacity: 0; } - to { - -webkit-transform: translateY(0) scale(1); - transform: translateY(0) scale(1); - opacity: 1; } } - -@keyframes kuiShowToast { - from { - -webkit-transform: translateY(24px) scale(0.9); - transform: translateY(24px) scale(0.9); - opacity: 0; } - to { - -webkit-transform: translateY(0) scale(1); - transform: translateY(0) scale(1); - opacity: 1; } } - -@media only screen and (max-width: 768px) { - /** - * 1. Mobile we make these 100%. Matching change happens on the item as well. - */ - .kuiGlobalToastList { - left: 0; - padding-left: 16px; - width: 100%; - /* 1 */ } } - -.kuiToast { - box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); - position: relative; - padding: 16px; - background-color: #FFF; - border: 1px solid #D9D9D9; - width: 100%; } - .kuiToast:hover .kuiToast__closeButton, - .kuiToast:focus .kuiToast__closeButton { - opacity: 1; } - -/** - * 1. Fit button to icon. - */ -.kuiToast__closeButton { - position: absolute; - top: 16px; - right: 16px; - line-height: 0; - /* 1 */ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - opacity: 0; - transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } - .kuiToast__closeButton svg { - fill: gray; } - .kuiToast__closeButton:hover svg { - fill: #000; } - .kuiToast__closeButton:focus { - background-color: #e6f2f6; - opacity: 1; } - .kuiToast__closeButton:focus svg { - fill: #0079a5; } - -.kuiToast--info { - border-top: 2px solid #0079a5; } - -.kuiToast--success { - border-top: 2px solid #00A69B; } - -.kuiToast--warning { - border-top: 2px solid #E5830E; } - -.kuiToast--danger { - border-top: 2px solid #A30000; } - -/** - * 1. Align icon with first line of title text if it wraps. - * 2. Apply margin to all but last item in the flex. - * 3. Account for close button. - */ -.kuiToastHeader { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - padding-right: 24px; - /* 3 */ - 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: #000; - -webkit-transform: translateY(2px); - transform: translateY(2px); - /* 1 */ } - -.kuiToastHeader__title { - color: #000; - font-weight: 300; } - -.kuiToastHeader--withBody { - margin-bottom: 12px; } - -.kuiText { - color: #3F3F3F; - font-weight: 400; - font-size: 16px; - font-size: 1rem; - line-height: 1.5; } - .kuiText a { - color: #0079a5; } - .kuiText a:hover { - color: #005472; - text-decoration: underline; } - .kuiText img { - display: block; - width: 100%; } - .kuiText p, - .kuiText ul, - .kuiText ol, - .kuiText img { - margin-bottom: 24px; } - .kuiText ul { - list-style: disc; - margin-left: 24px; } - .kuiText ol { - list-style: decimal; - margin-left: 24px; } - .kuiText * + h1, - .kuiText * + h2, - .kuiText * + h3, - .kuiText * + h4, - .kuiText * + h5, - .kuiText * + h6 { - margin-top: 32px; } - .kuiText h1, .kuiText h2, .kuiText h3, .kuiText h4, .kuiText h5, .kuiText h6 { - color: #000; - font-weight: 300; - margin-bottom: 8px; } - .kuiText h1 { - font-size: 200%; } - .kuiText h2 { - font-size: 150%; - line-height: 32px; } - .kuiText h3 { - font-weight: 500; } - .kuiText.kuiText--small { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.5; } - .kuiText.kuiText--small * + h1, - .kuiText.kuiText--small * + h2, - .kuiText.kuiText--small * + h3, - .kuiText.kuiText--small * + h4, - .kuiText.kuiText--small * + h5, - .kuiText.kuiText--small * + h6 { - margin-top: 24px; } - .kuiText.kuiText--small p, - .kuiText.kuiText--small ul, - .kuiText.kuiText--small ol, - .kuiText.kuiText--small h1, - .kuiText.kuiText--small h2, - .kuiText.kuiText--small h3, - .kuiText.kuiText--small h4, - .kuiText.kuiText--small h5, - .kuiText.kuiText--small h6, - .kuiText.kuiText--small img { - margin-bottom: 14px; } - .kuiText > :last-child { - margin-bottom: 0 !important; } - -.kuiTextColor.kuiTextColor--default { - color: #3F3F3F !important; } - -.kuiTextColor.kuiTextColor--subdued { - color: #666 !important; } - -.kuiTextColor.kuiTextColor--primary { - color: #0079a5 !important; } - -.kuiTextColor.kuiTextColor--secondary { - color: #00A69B !important; } - -.kuiTextColor.kuiTextColor--accent { - color: #DD0A73 !important; } - -.kuiTextColor.kuiTextColor--warning { - color: #E5830E !important; } - -.kuiTextColor.kuiTextColor--danger { - color: #A30000 !important; }