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 7db13ea6e45e..000000000000
--- 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