mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
[WIP] KUI sass variable namespacing / rework (#11033)
* more specific namespacing and structure for sass variables * variable scoping at the component level * more sass variable scoping * more sass variable scoping * more specific namespacing and structure for sass variables variable scoping at the component level more sass variable scoping more sass variable scoping * fix font weight sass vars
This commit is contained in:
dave.snider@gmail.com
GitHub
parent
b3eb25d648
commit
c6da5f67d6
58 changed files with 706 additions and 617 deletions
12
ui_framework/components/_common_styles.scss
Normal file
12
ui_framework/components/_common_styles.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $globalFontFamily;
|
||||
}
|
||||
165
ui_framework/components/_mixins.scss
Normal file
165
ui_framework/components/_mixins.scss
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
@mixin darkTheme {
|
||||
.theme-dark & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Make sure outline doesn't get hidden beneath adjacent elements.
|
||||
* 2. Override inherited styles (possibly from Bootstrap).
|
||||
* 3. Create an offset box-shadow that follows the contours of the element.
|
||||
*/
|
||||
@mixin focus($color: $globalFocusColor, $backgroundColor: $globalFocusBackgroundColor) {
|
||||
z-index: 1; /* 1 */
|
||||
outline: none !important; /* 2 */
|
||||
box-shadow: 0 0 0 1px $backgroundColor, 0 0 0 2px $color; /* 3 */
|
||||
}
|
||||
|
||||
@mixin formControlFocus {
|
||||
outline: none;
|
||||
border-color: $globalSelectedBorderColor;
|
||||
}
|
||||
|
||||
/**
|
||||
* Nothing fancy, just the basics so we can use this for both regular and static controls.
|
||||
*/
|
||||
@mixin formControlBase {
|
||||
appearance: none;
|
||||
padding: 3px 12px 4px;
|
||||
font-size: $globalFontSize;
|
||||
font-weight: 400;
|
||||
line-height: $globalLineHeight;
|
||||
color: $globalFontColor;
|
||||
}
|
||||
|
||||
@mixin formControl {
|
||||
@include formControlBase;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #DEDEDE;
|
||||
border-radius: $globalBorderRadius;
|
||||
transition: border-color $globalInputTransitionTiming;
|
||||
|
||||
/**
|
||||
* 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
|
||||
* We only want invalid inputs to appear invalid after the user has had a chance to interact
|
||||
* with it.
|
||||
*/
|
||||
&:invalid {
|
||||
&:not(.ng-untouched) { /* 1 */
|
||||
border-color: $globalDangerBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include formControlFocus;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Setting to inline-block guarantees the same height when applied to both
|
||||
* button elements and anchor tags.
|
||||
* 2. Fit MicroButton inside of Table rows without pushing them taller.
|
||||
*/
|
||||
@mixin microButton {
|
||||
display: inline-block; /* 1 */
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid transparent;
|
||||
color: $globalSubduedTextColor;
|
||||
background-color: transparent;
|
||||
line-height: 1; /* 2 */
|
||||
|
||||
&:hover {
|
||||
color: $globalFontColor;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Give Bar a consistent height for when it contains shorter children, and therefore can't
|
||||
* depend on them to give it the desired height.
|
||||
*/
|
||||
@mixin bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 30px; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Put 10px of space between each child.
|
||||
* 2. If there is only one section, align it to the right. If you wanted it aligned right, you
|
||||
* wouldn't use the Bar in the first place.
|
||||
* 3. Children in the middle should center their content.
|
||||
* 4. Fix an IE bug which causes the last child to overflow the container.
|
||||
* 5. Fixing this bug means we now need to align the children to the right.
|
||||
*/
|
||||
@mixin barSection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
margin-left: $toolBarSectionSpacing * 0.5;
|
||||
margin-right: $toolBarSectionSpacing * 0.5;
|
||||
|
||||
&:not(:first-child):not(:last-child):not(:only-child) {
|
||||
justify-content: center; /* 3 */
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
flex: 0 1 auto; /* 4 */
|
||||
justify-content: flex-end; /* 5 */
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
margin-left: auto; /* 2 */
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
margin-left: $toolBarItsemSpacing; /* 1 */
|
||||
}
|
||||
}
|
||||
|
||||
@mixin buttonOnStandoutBackground {
|
||||
.kuiButton {
|
||||
&:focus {
|
||||
@include focus($globalFocusColor, $globalBorderColor);
|
||||
}
|
||||
}
|
||||
|
||||
.kuiButton--danger {
|
||||
&:focus {
|
||||
@include focus($globalFocusDangerColor, $globalBorderColor);
|
||||
}
|
||||
}
|
||||
|
||||
.kuiButton--basic {
|
||||
color: #5a5a5a;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
&:disabled {
|
||||
color: #a7a7a7;
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin selectOnStandoutBackground {
|
||||
.kuiSelect {
|
||||
border-color: #ffffff;
|
||||
|
||||
&:focus {
|
||||
@include formControlFocus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
62
ui_framework/components/_variables.scss
Normal file
62
ui_framework/components/_variables.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
// --------------------------------------------------------------------------------------
|
||||
// KUI global variables
|
||||
// --------------------------------------------------------------------------------------
|
||||
// This file contains all global variables available within kui. Every variable in this
|
||||
// document should be prefixed with $global. This lets us know where the variable is
|
||||
// coming from when looking inside the individual component files. Any component local
|
||||
// variables should be declared at the top of those documents prefixed with $componentName.
|
||||
|
||||
|
||||
// Normal colors
|
||||
$globalTextColor: #2d2d2d;
|
||||
$globalLinkColor: #3CAED2;
|
||||
$globalLinkColor-isHover: #105A73;
|
||||
$globalInputTextColor: $globalTextColor;
|
||||
$globalInputBackgroundColor: #ffffff;
|
||||
$globalInputBorderColor: $globalInputBackgroundColor;
|
||||
|
||||
// Dark theme colors
|
||||
$globalTextColor--darkTheme: #cecece;
|
||||
$globalLinkColor--darkTheme: #b7e2ea;
|
||||
$globalLinkColor-isHover--darkTheme: #def2f6;
|
||||
$globalInputTextColor--darkTheme: $globalTextColor--darkTheme;
|
||||
$globalInputBackgroundColor--darkTheme: #444444;
|
||||
$globalInputBorderColor--darkTheme: $globalInputBackgroundColor--darkTheme;
|
||||
|
||||
// Font
|
||||
$globalFontFamily: "Open Sans", Helvetica, Arial, sans-serif;
|
||||
$globalFontSize: 14px;
|
||||
$globalLineHeight: 1.5;
|
||||
$globalTitleFontSize: 18px;
|
||||
$globalFontWeightRegular: 400;
|
||||
$globalFontWeightBold: 700;
|
||||
|
||||
// Colors
|
||||
$globalInfoColor: #3fa8c7;
|
||||
$globalInactiveColor: #c3c3c3;
|
||||
$globalSuccessColor: #417505;
|
||||
$globalWarningColor: #ec9800;
|
||||
$globalDangerColor: #D86051;
|
||||
$globalFocusColor: #6EADC1;
|
||||
$globalFocusDangerColor: #ff523c;
|
||||
$globalFocusBackgroundColor: #ffffff;
|
||||
$globalFontColor: #191E23;
|
||||
$globalSubduedTextColor: #9fa3a7;
|
||||
$globalLinkHoverColor: #006E8A;
|
||||
$globalSelectedBorderColor: #6EADC1;
|
||||
$globalDangerBorderColor: $globalDangerColor;
|
||||
|
||||
// Borders
|
||||
$globalBorderColor: #E4E4E4;
|
||||
$globalBorderRadius: 4px;
|
||||
$globalBorderThick: 2px solid $globalBorderColor;
|
||||
$globalBorderThin: 1px solid $globalBorderColor;
|
||||
|
||||
// Timing
|
||||
$globalInputTransitionTiming: 0.1s linear;
|
||||
|
||||
// Bar
|
||||
$toolBarHeight: 50px;
|
||||
$toolBarPadding: 10px;
|
||||
$toolBarSectionSpacing: 50px;
|
||||
$toolBarItsemSpacing: 10px;
|
||||
|
|
@ -3,8 +3,8 @@
|
|||
margin-left: 0.5em;
|
||||
padding: 0.1em 0.7em;
|
||||
vertical-align: middle;
|
||||
font-size: 11px;
|
||||
line-height: $lineHeight;
|
||||
font-size: $badgeFontSize;
|
||||
line-height: $globalLineHeight;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
$badgeFontSize: 11px;
|
||||
|
||||
@import "badge";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
$buttonHeight: 30px;
|
||||
|
||||
/**
|
||||
* 1. Links can't have a disabled attribute, so they can't support :disabled.
|
||||
*/
|
||||
|
|
@ -68,13 +66,13 @@ $buttonHeight: 30px;
|
|||
appearance: none;
|
||||
cursor: pointer;
|
||||
padding: 4px 12px 5px;
|
||||
font-size: $fontSize;
|
||||
font-weight: 400;
|
||||
line-height: $lineHeight;
|
||||
font-size: $globalFontSize;
|
||||
font-weight: $buttonFontWeight;
|
||||
line-height: $globalLineHeight;
|
||||
height: $buttonHeight;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: $buttonBorderRadius;
|
||||
border-radius: $globalBorderRadius;
|
||||
|
||||
@include kuiButtonDisabled {
|
||||
cursor: default;
|
||||
|
|
@ -103,14 +101,13 @@ $buttonHeight: 30px;
|
|||
|
||||
.kuiButton--iconText {
|
||||
.kuiButton__icon {
|
||||
$iconSpacing: 8px;
|
||||
|
||||
&:first-child:not(:only-child) {
|
||||
margin-right: $iconSpacing;
|
||||
margin-right: $buttonIconSpacing;
|
||||
}
|
||||
|
||||
&:last-child:not(:only-child) {
|
||||
margin-left: $iconSpacing;
|
||||
margin-left: $buttonIconSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -119,20 +116,20 @@ $buttonHeight: 30px;
|
|||
* 1. Override Bootstrap.
|
||||
*/
|
||||
.kuiButton--basic {
|
||||
color: #5a5a5a;
|
||||
background-color: #F2F2F2;
|
||||
color: $buttonBasicTextColor;
|
||||
background-color: $buttonBasicBackgroundColor;
|
||||
|
||||
@include kuiButtonFocus {
|
||||
color: #5a5a5a;
|
||||
color: $buttonBasicTextColor;
|
||||
}
|
||||
|
||||
@include kuiButtonHoverAndActive {
|
||||
color: #ffffff !important; /* 1 */
|
||||
background-color: #9B9B9B !important; /* 1 */
|
||||
color: $buttonDefaultTextColor !important; /* 1 */
|
||||
background-color: $buttonBasicHoverBackgroundColor !important; /* 1 */
|
||||
}
|
||||
|
||||
@include kuiButtonDisabled {
|
||||
color: #9B9B9B;
|
||||
color: $buttonBasicDisabledTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -140,20 +137,20 @@ $buttonHeight: 30px;
|
|||
* 1. Override Bootstrap.
|
||||
*/
|
||||
.kuiButton--primary {
|
||||
color: #FFFFFF;
|
||||
background-color: #6EADC1;
|
||||
color: $buttonDefaultTextColor;
|
||||
background-color: $buttonPrimaryBackgroundColor;
|
||||
|
||||
@include kuiButtonFocus {
|
||||
color: #FFFFFF;
|
||||
color: $buttonDefaultTextColor;
|
||||
}
|
||||
|
||||
@include kuiButtonHoverAndActive {
|
||||
color: #FFFFFF !important; /* 1 */
|
||||
background-color: #006E8A;
|
||||
color: $buttonDefaultTextColor !important; /* 1 */
|
||||
background-color: $buttonPrimaryHoverBackgroundColor;
|
||||
}
|
||||
|
||||
@include kuiButtonDisabled {
|
||||
background-color: #B6D6E0;
|
||||
background-color: $buttonPrimaryDisabledBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -161,21 +158,21 @@ $buttonHeight: 30px;
|
|||
* 1. Override Bootstrap.
|
||||
*/
|
||||
.kuiButton--danger {
|
||||
color: #FFFFFF;
|
||||
background-color: #D76051;
|
||||
color: $buttonDefaultTextColor;
|
||||
background-color: $buttonDangerBackgroundColor;
|
||||
|
||||
@include kuiButtonFocus {
|
||||
@include focus($focusDangerColor);
|
||||
color: #FFFFFF;
|
||||
@include focus($globalFocusDangerColor);
|
||||
color: $buttonDefaultTextColor;
|
||||
}
|
||||
|
||||
@include kuiButtonHoverAndActive {
|
||||
color: #FFFFFF !important; /* 1 */
|
||||
background-color: #A52E1F;
|
||||
color: $buttonDefaultTextColor !important; /* 1 */
|
||||
background-color: $buttonDangerHoverBackgroundColor;
|
||||
}
|
||||
|
||||
@include kuiButtonDisabled {
|
||||
background-color: #efc0ba;
|
||||
background-color: $buttonDangerDisabledBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -184,15 +181,15 @@ $buttonHeight: 30px;
|
|||
* 2. Override either Bootstrap or Timelion styles.
|
||||
*/
|
||||
.kuiButton--hollow {
|
||||
color: $linkColor !important; /* 2 */
|
||||
color: $globalLinkColor !important; /* 2 */
|
||||
background-color: transparent;
|
||||
|
||||
@include kuiButtonHoverAndActive {
|
||||
color: $linkHoverColor !important; /* 1 */
|
||||
color: $globalLinkHoverColor !important; /* 1 */
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include kuiButtonDisabled {
|
||||
color: #dddddd;
|
||||
color: $buttonHollowDiabledTextColor;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,29 @@
|
|||
// All buttons
|
||||
$buttonHeight: 30px;
|
||||
$buttonIconSpacing: 8px;
|
||||
$buttonFontWeight: $globalFontWeightRegular;
|
||||
|
||||
// Most buttons
|
||||
$buttonDefaultTextColor: #FFF;
|
||||
|
||||
// Basic
|
||||
$buttonBasicTextColor: #5a5a5a;
|
||||
$buttonBasicBackgroundColor: #F2F2F2;
|
||||
$buttonBasicHoverBackgroundColor: #9B9B9B;
|
||||
$buttonBasicDisabledTextColor: #9B9B9B;
|
||||
|
||||
// Primary
|
||||
$buttonPrimaryBackgroundColor: #6EADC1;
|
||||
$buttonPrimaryHoverBackgroundColor: #006E8A;
|
||||
$buttonPrimaryDisabledBackgroundColor: #B6D6E0;
|
||||
|
||||
// Danger
|
||||
$buttonDangerBackgroundColor: #D76051;
|
||||
$buttonDangerHoverBackgroundColor: #A52E1F;
|
||||
$buttonDangerDisabledBackgroundColor: #efc0ba;
|
||||
|
||||
// Hollow
|
||||
$buttonHollowDiabledTextColor: #dddddd;
|
||||
|
||||
@import "button";
|
||||
@import "button_group/button_group";
|
||||
|
|
|
|||
|
|
@ -23,10 +23,10 @@
|
|||
}
|
||||
|
||||
> .kuiButton:only-child {
|
||||
border-top-right-radius: $buttonBorderRadius;
|
||||
border-bottom-right-radius: $buttonBorderRadius;
|
||||
border-top-left-radius: $buttonBorderRadius;
|
||||
border-bottom-left-radius: $buttonBorderRadius;
|
||||
border-top-right-radius: $globalBorderRadius;
|
||||
border-bottom-right-radius: $globalBorderRadius;
|
||||
border-top-left-radius: $globalBorderRadius;
|
||||
border-bottom-left-radius: $globalBorderRadius;
|
||||
}
|
||||
|
||||
.kuiButton + .kuiButton {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.kuiCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #E0E0E0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $cardBorderColor;
|
||||
border-radius: $globalBorderRadius;
|
||||
overflow: hidden;
|
||||
line-height: $lineHeight;
|
||||
line-height: $globalLineHeight;
|
||||
}
|
||||
|
||||
.kuiCard__description {
|
||||
|
|
@ -16,16 +16,16 @@
|
|||
}
|
||||
|
||||
.kuiCard__descriptionTitle {
|
||||
font-size: 14px;
|
||||
font-size: $globalFontSize;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
max-width: calc(100% - 48px);
|
||||
max-width: $cardMaxWidth;
|
||||
}
|
||||
|
||||
.kuiCard__descriptionText {
|
||||
font-size: 14px;
|
||||
max-width: calc(100% - 48px);
|
||||
font-size: $globalFontSize;
|
||||
max-width: $cardMaxWidth;
|
||||
}
|
||||
|
||||
.kuiCard__footer {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.kuiCardGroup {
|
||||
display: flex;
|
||||
border: 1px solid #E0E0E0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $cardBorderColor;
|
||||
border-radius: $globalBorderRadius;
|
||||
overflow: hidden;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
border-radius: 0;
|
||||
|
||||
& + & {
|
||||
border-left: 1px solid #E0E0E0;
|
||||
border-left: 1px solid $cardBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,5 @@
|
|||
$cardBorderColor: #E0E0E0;
|
||||
$cardMaxWidth: calc(100% - 48px);
|
||||
|
||||
@import "card";
|
||||
@import "card_group";
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
.kuiEventSymbol {
|
||||
flex: 0 1 auto;
|
||||
font-size: $fontSize;
|
||||
line-height: $lineHeight;
|
||||
font-size: $globalFontSize;
|
||||
line-height: $globalLineHeight;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -14,13 +14,13 @@
|
|||
}
|
||||
|
||||
.kuiEventBody__message {
|
||||
font-size: $fontSize;
|
||||
line-height: $lineHeight;
|
||||
color: $fontColor;
|
||||
font-size: $globalFontSize;
|
||||
line-height: $globalLineHeight;
|
||||
color: $globalFontColor;
|
||||
}
|
||||
|
||||
.kuiEventBody__metadata {
|
||||
font-size: $fontSize;
|
||||
line-height: $lineHeight;
|
||||
color: $subduedFontColor;
|
||||
font-size: $globalFontSize;
|
||||
line-height: $globalLineHeight;
|
||||
color: $globalSubduedTextColor;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
$checkboxBackgroundColor: #FFF;
|
||||
$checkboxBorderColor: #BEBEBE;
|
||||
$checkboxIconColor: #FFF;
|
||||
$checkboxCheckedBackgroundColor: #328CAA;
|
||||
$checkboxDisabledOpacity: 0.3;
|
||||
|
||||
|
||||
/**
|
||||
* 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really
|
||||
* ugly default appearance which we can't customize, so our best option is to give Firefox
|
||||
|
|
@ -6,17 +13,17 @@
|
|||
*/
|
||||
.kuiCheckBox {
|
||||
-webkit-appearance: none; /* 1 */
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #BEBEBE;
|
||||
border-radius: $buttonBorderRadius;
|
||||
background-color: $checkboxBackgroundColor;
|
||||
border: 1px solid $checkboxBorderColor;
|
||||
border-radius: $globalBorderRadius;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: $lineHeight !important; /* 2 */
|
||||
line-height: $globalLineHeight !important; /* 2 */
|
||||
margin: 0 !important; /* 2 */
|
||||
font: $font !important; /* 2 */
|
||||
font-family: $font !important; /* 2 */
|
||||
font: $globalFontFamily !important; /* 2 */
|
||||
font-family: $globalFontFamily !important; /* 2 */
|
||||
font-size: 10px !important; /* 2 */
|
||||
transition: background-color $formTransitionTiming;
|
||||
transition: background-color $globalInputTransitionTiming;
|
||||
|
||||
&:before {
|
||||
position: relative;
|
||||
|
|
@ -25,13 +32,13 @@
|
|||
content: "\F00C";
|
||||
font-size: 1em;
|
||||
opacity: 0;
|
||||
color: #ffffff;
|
||||
transition: opacity $formTransitionTiming;
|
||||
color: $checkboxIconColor;
|
||||
transition: opacity $globalInputTransitionTiming;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: #328CAA;
|
||||
background-color: #328CAA;
|
||||
border-color: $checkboxCheckedBackgroundColor;
|
||||
background-color: $checkboxCheckedBackgroundColor;
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -42,7 +49,7 @@
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
opacity: $checkboxDisabledOpacity;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
$searchInputTextColor: #ACACAC;
|
||||
|
||||
.kuiSearchInput {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: $fontSize;
|
||||
line-height: $lineHeight;
|
||||
font-size: $globalFontSize;
|
||||
line-height: $globalLineHeight;
|
||||
}
|
||||
|
||||
.kuiSearchInput__icon {
|
||||
|
|
@ -10,7 +12,7 @@
|
|||
top: 0.5em;
|
||||
left: 0.7em;
|
||||
font-size: 1em;
|
||||
color: #ACACAC;
|
||||
color: $searchInputTextColor;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.kuiHeaderBar {
|
||||
@include bar;
|
||||
|
||||
border-bottom: $tableBorder;
|
||||
border-bottom: $globalBorderThick;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@
|
|||
}
|
||||
|
||||
.kuiIcon--info {
|
||||
color: $infoColor;
|
||||
color: $globalInfoColor;
|
||||
}
|
||||
|
||||
.kuiIcon--success {
|
||||
color: $successColor;
|
||||
color: $globalSuccessColor;
|
||||
}
|
||||
|
||||
.kuiIcon--warning {
|
||||
color: $warningColor;
|
||||
color: $globalWarningColor;
|
||||
}
|
||||
|
||||
.kuiIcon--error {
|
||||
color: $errorColor;
|
||||
color: $globalDangerColor;
|
||||
}
|
||||
|
||||
.kuiIcon--inactive {
|
||||
color: $inactiveColor;
|
||||
color: $globalInactiveColor;
|
||||
}
|
||||
|
||||
.kuiIcon--basic {
|
||||
color: #565656;
|
||||
color: $iconBasicTextColor;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
$iconBasicTextColor: #565656;
|
||||
|
||||
@import "icon";
|
||||
|
|
|
|||
|
|
@ -1,244 +1,24 @@
|
|||
// Normal colors
|
||||
$textColor: #2d2d2d;
|
||||
$buttonTextColor: #ffffff;
|
||||
$buttonBackgroundColor: #9c9c9c;
|
||||
$linkColor: #328CAA;
|
||||
$linkColor-isHover: #105A73;
|
||||
$inputTextColor: $textColor;
|
||||
$inputBackgroundColor: #ffffff;
|
||||
$inputBorderColor: $inputBackgroundColor;
|
||||
// --------------------------------------------------------------------------------------
|
||||
// Kibana UI framework
|
||||
// --------------------------------------------------------------------------------------
|
||||
// This libray will eventually contain all styles used throughout Kibana. Currently it
|
||||
// only covers a portion of the components. The processed css from this library currently
|
||||
// loads on top of other CSS (itself generated from LESS files) contained in /ui/*/*.less
|
||||
// files. This includes some base LESS files (including bootstrap) that can be found in
|
||||
// /ui/styles/. Over time, those components will be replaced with the SASS files
|
||||
// contained here. Until then, know that styling here may run into conflict with
|
||||
// global styles (like those on naked selectors) contained there.
|
||||
//
|
||||
// When possible, if making changes to those legacy components, please think about
|
||||
// instead adding them to this library and deprecating that dependency.
|
||||
|
||||
// Dark theme colors
|
||||
$textColor--darkTheme: #cecece;
|
||||
$buttonTextColor--darkTheme: #ffffff;
|
||||
$buttonBackgroundColor--darkTheme: #777777;
|
||||
$linkColor--darkTheme: #b7e2ea;
|
||||
$linkColor-isHover--darkTheme: #def2f6;
|
||||
$inputTextColor--darkTheme: $textColor--darkTheme;
|
||||
$inputBackgroundColor--darkTheme: #444444;
|
||||
$inputBorderColor--darkTheme: $inputBackgroundColor--darkTheme;
|
||||
|
||||
// Font
|
||||
$font: "Open Sans", Helvetica, Arial, sans-serif;
|
||||
$fontSize: 14px;
|
||||
$lineHeight: 1.5;
|
||||
// Global constants
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "common_styles";
|
||||
|
||||
// Typography
|
||||
$titleFontSize: 18px;
|
||||
|
||||
// Button
|
||||
$buttonBorderRadius: 4px;
|
||||
|
||||
// Colors
|
||||
$infoColor: #3fa8c7;
|
||||
$inactiveColor: #c3c3c3;
|
||||
$successColor: #417505;
|
||||
$warningColor: #ec9800;
|
||||
$errorColor: #D86051;
|
||||
$focusColor: #6EADC1;
|
||||
$focusDangerColor: #ff523c;
|
||||
$focusBackgroundColor: #ffffff;
|
||||
$fontColor: #191E23;
|
||||
$subduedFontColor: #9fa3a7;
|
||||
$linkColor: #3CAED2;
|
||||
$linkHoverColor: #006E8A;
|
||||
$standoutBackgroundColor: #E4E4E4;
|
||||
$selectedBorderColor: #6EADC1;
|
||||
$errorBorderColor: $errorColor;
|
||||
|
||||
// Borders
|
||||
$tableBorder: 2px solid $standoutBackgroundColor;
|
||||
$tableRowBorder: 1px solid $standoutBackgroundColor;
|
||||
|
||||
// Timing
|
||||
$formTransitionTiming: 0.1s linear;
|
||||
|
||||
// Bar
|
||||
$toolBarHeight: 50px;
|
||||
$toolBarPadding: 10px;
|
||||
$toolBarSectionSpacing: 50px;
|
||||
$toolBarItsemSpacing: 10px;
|
||||
|
||||
// Rhythm
|
||||
$verticalRhythm: 10px;
|
||||
|
||||
@mixin darkTheme {
|
||||
.theme-dark & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Make sure outline doesn't get hidden beneath adjacent elements.
|
||||
* 2. Override inherited styles (possibly from Bootstrap).
|
||||
* 3. Create an offset box-shadow that follows the contours of the element.
|
||||
*/
|
||||
@mixin focus($color: $focusColor, $backgroundColor: $focusBackgroundColor) {
|
||||
z-index: 1; /* 1 */
|
||||
outline: none !important; /* 2 */
|
||||
box-shadow: 0 0 0 1px $backgroundColor, 0 0 0 2px $color; /* 3 */
|
||||
}
|
||||
|
||||
@mixin formControlFocus {
|
||||
outline: none;
|
||||
border-color: $selectedBorderColor;
|
||||
}
|
||||
|
||||
/**
|
||||
* Nothing fancy, just the basics so we can use this for both regular and static controls.
|
||||
*/
|
||||
@mixin formControlBase {
|
||||
appearance: none;
|
||||
padding: 3px 12px 4px;
|
||||
font-size: $fontSize;
|
||||
font-weight: 400;
|
||||
line-height: $lineHeight;
|
||||
color: $fontColor;
|
||||
}
|
||||
|
||||
@mixin formControl {
|
||||
@include formControlBase;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #DEDEDE;
|
||||
border-radius: $buttonBorderRadius;
|
||||
transition: border-color $formTransitionTiming;
|
||||
|
||||
/**
|
||||
* 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
|
||||
* We only want invalid inputs to appear invalid after the user has had a chance to interact
|
||||
* with it.
|
||||
*/
|
||||
&:invalid {
|
||||
&:not(.ng-untouched) { /* 1 */
|
||||
border-color: $errorBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include formControlFocus;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Setting to inline-block guarantees the same height when applied to both
|
||||
* button elements and anchor tags.
|
||||
* 2. Fit MicroButton inside of Table rows without pushing them taller.
|
||||
*/
|
||||
@mixin microButton {
|
||||
display: inline-block; /* 1 */
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid transparent;
|
||||
color: $subduedFontColor;
|
||||
background-color: transparent;
|
||||
line-height: 1; /* 2 */
|
||||
|
||||
&:hover {
|
||||
color: $fontColor;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Give Bar a consistent height for when it contains shorter children, and therefore can't
|
||||
* depend on them to give it the desired height.
|
||||
*/
|
||||
@mixin bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 30px; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Put 10px of space between each child.
|
||||
* 2. If there is only one section, align it to the right. If you wanted it aligned right, you
|
||||
* wouldn't use the Bar in the first place.
|
||||
* 3. Children in the middle should center their content.
|
||||
* 4. Fix an IE bug which causes the last child to overflow the container.
|
||||
* 5. Fixing this bug means we now need to align the children to the right.
|
||||
*/
|
||||
@mixin barSection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
margin-left: $toolBarSectionSpacing * 0.5;
|
||||
margin-right: $toolBarSectionSpacing * 0.5;
|
||||
|
||||
&:not(:first-child):not(:last-child):not(:only-child) {
|
||||
justify-content: center; /* 3 */
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
flex: 0 1 auto; /* 4 */
|
||||
justify-content: flex-end; /* 5 */
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
margin-left: auto; /* 2 */
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
margin-left: $toolBarItsemSpacing; /* 1 */
|
||||
}
|
||||
}
|
||||
|
||||
@mixin buttonOnStandoutBackground {
|
||||
.kuiButton {
|
||||
&:focus {
|
||||
@include focus($focusColor, $standoutBackgroundColor);
|
||||
}
|
||||
}
|
||||
|
||||
.kuiButton--danger {
|
||||
&:focus {
|
||||
@include focus($focusDangerColor, $standoutBackgroundColor);
|
||||
}
|
||||
}
|
||||
|
||||
.kuiButton--basic {
|
||||
color: #5a5a5a;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
&:disabled {
|
||||
color: #a7a7a7;
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin selectOnStandoutBackground {
|
||||
.kuiSelect {
|
||||
border-color: #ffffff;
|
||||
|
||||
&:focus {
|
||||
@include formControlFocus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font;
|
||||
}
|
||||
// Components
|
||||
|
||||
@import "action_item/index";
|
||||
@import "badge/index";
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
$infoPanelVerticalRhythm: 8px;
|
||||
|
||||
@import "info_panel";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.kuiInfoPanel {
|
||||
padding: 14px 20px 18px;
|
||||
line-height: $lineHeight;
|
||||
line-height: $globalLineHeight;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
|
|
@ -8,28 +8,28 @@
|
|||
* 1. TODO: Pick a hex value instead of making these colors translucent.
|
||||
*/
|
||||
.kuiInfoPanel--info {
|
||||
border-color: rgba($infoColor, 0.25); /* 1 */
|
||||
border-color: rgba($globalInfoColor, 0.25); /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. TODO: Pick a hex value instead of making these colors translucent.
|
||||
*/
|
||||
.kuiInfoPanel--success {
|
||||
border-color: rgba($successColor, 0.25); /* 1 */
|
||||
border-color: rgba($globalSuccessColor, 0.25); /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. TODO: Pick a hex value instead of making these colors translucent.
|
||||
*/
|
||||
.kuiInfoPanel--warning {
|
||||
border-color: rgba($warningColor, 0.25); /* 1 */
|
||||
border-color: rgba($globalWarningColor, 0.25); /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. TODO: Pick a hex value instead of making these colors translucent.
|
||||
*/
|
||||
.kuiInfoPanel--error {
|
||||
border-color: rgba($errorColor, 0.25); /* 1 */
|
||||
border-color: rgba($globalDangerColor, 0.25); /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -42,19 +42,17 @@
|
|||
|
||||
.kuiInfoPanelHeader__icon {
|
||||
margin-right: 10px;
|
||||
font-size: $fontSize;
|
||||
line-height: $lineHeight;
|
||||
font-size: $globalFontSize;
|
||||
line-height: $globalLineHeight;
|
||||
}
|
||||
|
||||
.kuiInfoPanelHeader__title {
|
||||
font-size: $fontSize;
|
||||
line-height: $lineHeight;
|
||||
font-weight: 700;
|
||||
font-size: $globalFontSize;
|
||||
line-height: $globalLineHeight;
|
||||
font-weight: $globalFontWeightBold;
|
||||
}
|
||||
|
||||
.kuiInfoPanelBody {
|
||||
$infoPanelVerticalRhythm: 8px;
|
||||
|
||||
margin-top: $infoPanelVerticalRhythm;
|
||||
|
||||
> * + * {
|
||||
|
|
@ -62,7 +60,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.kuiInfoPanelBody__message {
|
||||
font-size: $fontSize;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
.kuiInfoPanelBody__message {
|
||||
font-size: $globalFontSize;
|
||||
line-height: $globalLineHeight;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@
|
|||
* 1. Enforce pointer when there's no href.
|
||||
*/
|
||||
.kuiLink {
|
||||
color: $linkColor;
|
||||
color: $globalLinkColor;
|
||||
text-decoration: none;
|
||||
cursor: pointer; /* 1 */
|
||||
|
||||
&:visited,
|
||||
&:active {
|
||||
color: $linkColor;
|
||||
color: $globalLinkColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $linkHoverColor;
|
||||
color: $globalLinkHoverColor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.kuiLoadingItems {
|
||||
padding: 30px;
|
||||
font-size: 18px;
|
||||
color: $subduedFontColor;
|
||||
line-height: $lineHeight;
|
||||
font-size: $globalTitleFontSize;
|
||||
color: $globalSubduedTextColor;
|
||||
line-height: $globalLineHeight;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Normal colors
|
||||
$localNavTextColor: $textColor;
|
||||
$localNavTextColor: $globalTextColor;
|
||||
$localNavBackgroundColor: #e4e4e4;
|
||||
$localNavButtonTextColor: #5a5a5a;
|
||||
$localNavButtonTextColor-isHover: #000000;
|
||||
|
|
@ -14,9 +14,12 @@ $localDropdownFormNoteTextColor: #737373;
|
|||
$localTabTextColor: $localNavButtonTextColor;
|
||||
$localTabTextColor-isHover: $localNavButtonTextColor-isHover;
|
||||
$localTabTextColor-isSelected: $localNavButtonTextColor-isHover;
|
||||
$localBreadcrumbLinkColor: #5a5a5a;
|
||||
$localSearchButtonBackgroundColor: #9c9c9c;
|
||||
$localSearchButtonTextColor: #ffffff;
|
||||
|
||||
// Dark theme colors
|
||||
$localNavTextColor--darkTheme: $textColor--darkTheme;
|
||||
$localNavTextColor--darkTheme: $globalTextColor--darkTheme;
|
||||
$localNavBackgroundColor--darkTheme: #333333;
|
||||
$localNavButtonTextColor--darkTheme: #dedede;
|
||||
$localNavButtonTextColor-isHover--darkTheme: #ffffff;
|
||||
|
|
@ -27,17 +30,19 @@ $localSearchBackgroundColor--darkTheme: #4e4e4e;
|
|||
$localSearchBorderColor-isInvalid--darkTheme: #ff6758;
|
||||
$localDropdownBackgroundColor--darkTheme: $localNavButtonBackgroundColor-isSelected--darkTheme;
|
||||
$localDropdownFormNoteTextColor--darkTheme: #a2a2a2;
|
||||
$localDropdownWarningTextColor--darkTheme: $textColor--darkTheme;
|
||||
$localDropdownWarningTextColor--darkTheme: $globalTextColor--darkTheme;
|
||||
$localDropdownWarningBackgroundColor--darkTheme: #636363;
|
||||
$localTabTextColor--darkTheme: $localNavButtonTextColor--darkTheme;
|
||||
$localTabTextColor-isHover--darkTheme: $localNavButtonTextColor-isHover--darkTheme;
|
||||
$localTabTextColor-isSelected--darkTheme: $localNavButtonTextColor-isHover--darkTheme;
|
||||
$localSearchButtonBackgroundColor--darkTheme: #777777;
|
||||
$localSearchButtonTextColor--darkTheme: #ffffff;
|
||||
|
||||
// Spacing
|
||||
$localNavSideSpacing: 10px;
|
||||
$localSearchHeight: 30px;
|
||||
|
||||
// Font size
|
||||
$localNavFontSizeNormal: 14px;
|
||||
// Fonts
|
||||
|
||||
@import "local_breadcrumbs";
|
||||
@import "local_dropdown";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/**
|
||||
* 1. Breadcrumbs are placed in the top-left corner and need to be bumped over
|
||||
* a bit.
|
||||
|
|
@ -10,52 +9,52 @@
|
|||
padding-left: $localNavSideSpacing; /* 1 */
|
||||
}
|
||||
|
||||
.kuiLocalBreadcrumb {
|
||||
& + & {
|
||||
margin-left: 6px;
|
||||
.kuiLocalBreadcrumb {
|
||||
& + & {
|
||||
margin-left: 6px;
|
||||
|
||||
&:before {
|
||||
content: '/';
|
||||
user-select: none;
|
||||
margin-right: 4px;
|
||||
color: $localNavBreadcrumbDelimiterColor;
|
||||
&:before {
|
||||
content: '/';
|
||||
user-select: none;
|
||||
margin-right: 4px;
|
||||
color: $localNavBreadcrumbDelimiterColor;
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavBreadcrumbDelimiterColor--darkTheme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.kuiLocalBreadcrumb__link {
|
||||
color: $localNavTextColor;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavTextColor--darkTheme;
|
||||
}
|
||||
@include darkTheme {
|
||||
color: $localNavBreadcrumbDelimiterColor--darkTheme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.kuiLocalBreadcrumb__link {
|
||||
font-size: $localNavFontSizeNormal;
|
||||
color: #5a5a5a;
|
||||
text-decoration: none;
|
||||
color: $localNavTextColor;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavButtonTextColor--darkTheme;
|
||||
color: $localNavTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalBreadcrumb__emphasis {
|
||||
font-weight: 700;
|
||||
}
|
||||
.kuiLocalBreadcrumb__link {
|
||||
font-size: $globalFontSize;
|
||||
color: $localBreadcrumbLinkColor;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavButtonTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalBreadcrumb__emphasis {
|
||||
font-weight: $globalFontWeightBold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
}
|
||||
|
||||
.kuiLocalDropdownHeader__action {
|
||||
color: $linkColor;
|
||||
color: $globalLinkColor;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -101,15 +101,15 @@
|
|||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $linkColor-isHover;
|
||||
color: $globalLinkColor-isHover;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $linkColor--darkTheme;
|
||||
color: $globalLinkColor--darkTheme;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $linkColor-isHover--darkTheme;
|
||||
color: $globalLinkColor-isHover--darkTheme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -120,15 +120,15 @@
|
|||
margin-bottom: 12px;
|
||||
padding: 5px 15px;
|
||||
font-size: 14px;
|
||||
color: $inputTextColor;
|
||||
background-color: $inputBackgroundColor;
|
||||
border: 2px solid $inputBorderColor;
|
||||
color: $globalInputTextColor;
|
||||
background-color: $globalInputBackgroundColor;
|
||||
border: 2px solid $globalInputBorderColor;
|
||||
border-radius: 4px;
|
||||
|
||||
@include darkTheme {
|
||||
color: $inputTextColor--darkTheme;
|
||||
background-color: $inputBackgroundColor--darkTheme;
|
||||
border-color: $inputBorderColor--darkTheme;
|
||||
color: $globalInputTextColor--darkTheme;
|
||||
background-color: $globalInputBackgroundColor--darkTheme;
|
||||
border-color: $globalInputBorderColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
margin-bottom: 16px;
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
color: $textColor;
|
||||
color: $globalTextColor;
|
||||
background-color: $localNavBackgroundColor;
|
||||
|
||||
@include darkTheme {
|
||||
|
|
|
|||
|
|
@ -1,60 +1,59 @@
|
|||
|
||||
.kuiLocalMenu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.kuiLocalMenuItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 $localNavSideSpacing;
|
||||
font-size: $localNavFontSizeNormal;
|
||||
background-color: $localNavButtonBackgroundColor;
|
||||
color: $localNavButtonTextColor;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
.kuiLocalMenuItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 $localNavSideSpacing;
|
||||
font-size: $globalFontSize;
|
||||
background-color: $localNavButtonBackgroundColor;
|
||||
color: $localNavButtonTextColor;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $localNavButtonBackgroundColor-isHover;
|
||||
color: $localNavButtonTextColor-isHover;
|
||||
}
|
||||
|
||||
&.kuiLocalMenuItem-isSelected {
|
||||
background-color: $localNavButtonBackgroundColor-isSelected;
|
||||
}
|
||||
|
||||
&.kuiLocalMenuItem-isDisabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
background-color: $localNavButtonBackgroundColor-isHover;
|
||||
color: $localNavButtonTextColor-isHover;
|
||||
background-color: $localNavButtonBackgroundColor;
|
||||
color: $localNavButtonTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavButtonTextColor--darkTheme;
|
||||
|
||||
&:hover {
|
||||
background-color: $localNavButtonBackgroundColor-isHover--darkTheme;
|
||||
color: $localNavButtonTextColor-isHover--darkTheme;
|
||||
}
|
||||
|
||||
&.kuiLocalMenuItem-isSelected {
|
||||
background-color: $localNavButtonBackgroundColor-isSelected;
|
||||
background-color: $localNavButtonBackgroundColor-isSelected--darkTheme;
|
||||
}
|
||||
|
||||
&.kuiLocalMenuItem-isDisabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
background-color: $localNavButtonBackgroundColor;
|
||||
color: $localNavButtonTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavButtonTextColor--darkTheme;
|
||||
|
||||
&:hover {
|
||||
background-color: $localNavButtonBackgroundColor-isHover--darkTheme;
|
||||
color: $localNavButtonTextColor-isHover--darkTheme;
|
||||
}
|
||||
|
||||
&.kuiLocalMenuItem-isSelected {
|
||||
background-color: $localNavButtonBackgroundColor-isSelected--darkTheme;
|
||||
}
|
||||
|
||||
&.kuiLocalMenuItem-isDisabled {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: $localNavButtonTextColor--darkTheme;
|
||||
}
|
||||
background-color: transparent;
|
||||
color: $localNavButtonTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalMenuItem__icon {
|
||||
margin-right: 5px;
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@
|
|||
height: 32px;
|
||||
}
|
||||
|
||||
.kuiLocalNavRow__section {
|
||||
height: 100%;
|
||||
}
|
||||
.kuiLocalNavRow__section {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.kuiLocalNavRow--secondary {
|
||||
height: 38px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
|
||||
$localSearchHeight: 30px;
|
||||
|
||||
.kuiLocalSearch {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -10,7 +7,7 @@ $localSearchHeight: 30px;
|
|||
.kuiLocalSearchInput {
|
||||
flex: 1 1 100%;
|
||||
padding: 5px 15px;
|
||||
font-size: $localNavFontSizeNormal;
|
||||
font-size: $globalFontSize;
|
||||
color: $localNavTextColor;
|
||||
background-color: $localSearchBackgroundColor;
|
||||
border: 2px solid $localSearchBackgroundColor;
|
||||
|
|
@ -37,9 +34,9 @@ $localSearchHeight: 30px;
|
|||
.kuiLocalSearchButton {
|
||||
width: 43px;
|
||||
height: $localSearchHeight;
|
||||
font-size: $localNavFontSizeNormal;
|
||||
color: $buttonTextColor;
|
||||
background-color: $buttonBackgroundColor;
|
||||
font-size: $globalFontSize;
|
||||
color: $localSearchButtonTextColor;
|
||||
background-color: $localSearchButtonBackgroundColor;
|
||||
border: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
|
|
@ -47,7 +44,7 @@ $localSearchHeight: 30px;
|
|||
border-top-right-radius: 4px;
|
||||
|
||||
@include darkTheme {
|
||||
color: $buttonTextColor--darkTheme;
|
||||
background-color: $buttonBackgroundColor--darkTheme;
|
||||
color: $localSearchButtonTextColor--darkTheme;
|
||||
background-color: $localSearchButtonBackgroundColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
align-items: center;
|
||||
height: 100%;
|
||||
padding-left: $localNavSideSpacing;
|
||||
font-size: $localNavFontSizeNormal;
|
||||
font-size: $globalFontSize;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
.kuiMenu {
|
||||
}
|
||||
|
||||
.kuiMenu--contained {
|
||||
border: $tableRowBorder;
|
||||
border: $globalBorderThin;
|
||||
|
||||
.kuiMenuItem {
|
||||
padding: 6px 10px;
|
||||
|
|
@ -13,6 +10,6 @@
|
|||
padding: 6px 0;
|
||||
|
||||
& + & {
|
||||
border-top: $tableRowBorder;
|
||||
border-top: $globalBorderThin;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,13 @@
|
|||
$menuButtonFontSize: 12px;
|
||||
$menuButtonBasicTextColor: #5a5a5a;
|
||||
$menuButtonBasicBackgroundColor: #ffffff;
|
||||
$menuButtonBasicHoverBackgroundColor: #F2F2F2;
|
||||
$menuButtonBasicDisabledTextColor: #9B9B9B;
|
||||
$menuButtonDangerTextColor: #D76051;
|
||||
$menuButtonDangerBackgroundColor: #ffffff;
|
||||
$menuButtonDangerHoverTextColor: #FFFFFF;
|
||||
$menuButtonDangerHoverBackgroundColor: #D76051;
|
||||
$menuButtonDangerHoverDisabledTextColor: #9B9B9B;
|
||||
|
||||
@import "menu_button";
|
||||
@import "menu_button_group";
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
appearance: none;
|
||||
cursor: pointer;
|
||||
padding: 2px 10px; /* 3 */
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: $lineHeight;
|
||||
font-size: $menuButtonFontSize;
|
||||
font-weight: $globalFontWeightRegular;
|
||||
line-height: $globalLineHeight;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: $buttonBorderRadius;
|
||||
border-radius: $globalBorderRadius;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
|
|
@ -47,22 +47,22 @@
|
|||
* 2. Safari won't respect :enabled:hover/active on links.
|
||||
*/
|
||||
.kuiMenuButton--basic {
|
||||
color: #5a5a5a;
|
||||
background-color: #ffffff;
|
||||
color: $menuButtonBasicTextColor;
|
||||
background-color: $menuButtonBasicBackgroundColor;
|
||||
|
||||
// Goes before hover, so that hover can override it.
|
||||
&:focus {
|
||||
color: #5a5a5a !important; /* 1 */
|
||||
color: $menuButtonBasicTextColor !important; /* 1 */
|
||||
}
|
||||
|
||||
&:hover, /* 2 */
|
||||
&:active { /* 2 */
|
||||
color: #5a5a5a !important; /* 1 */
|
||||
background-color: #F2F2F2;
|
||||
color: $menuButtonBasicTextColor !important; /* 1 */
|
||||
background-color: $menuButtonBasicHoverBackgroundColor;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: #9B9B9B;
|
||||
color: $menuButtonBasicDisabledTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,20 +71,20 @@
|
|||
* 2. Safari won't respect :enabled:hover/active on links.
|
||||
*/
|
||||
.kuiMenuButton--danger {
|
||||
color: #D76051;
|
||||
background-color: #ffffff;
|
||||
color: $menuButtonDangerTextColor;
|
||||
background-color: $menuButtonDangerBackgroundColor;
|
||||
|
||||
&:hover, /* 2 */
|
||||
&:active { /* 2 */
|
||||
color: #FFFFFF !important; /* 1 */
|
||||
background-color: #D76051;
|
||||
color: $menuButtonDangerHoverTextColor !important; /* 1 */
|
||||
background-color: $menuButtonDangerHoverBackgroundColor;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: #9B9B9B;
|
||||
color: $menuButtonDangerHoverDisabledTextColor;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focus($focusDangerColor);
|
||||
@include focus($globalFocusDangerColor);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,7 @@
|
|||
$modalPadding: 10px;
|
||||
$modalBorderColor: #6EADC1;
|
||||
$modalBackgroundColor: #FFF;
|
||||
$modalOverlayBackground: rgba(#000000, 0.3);
|
||||
|
||||
@import "modal_overlay";
|
||||
@import "modal";
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
$modalPadding: 10px;
|
||||
|
||||
.kuiModal {
|
||||
line-height: $lineHeight;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid $focusColor;
|
||||
border-radius: 4px;
|
||||
line-height: $globalLineHeight;
|
||||
background-color: $modalBackgroundColor;
|
||||
border: 1px solid $modalBorderColor;
|
||||
border-radius: $globalBorderRadius;
|
||||
box-shadow: 0 5px 22px rgba(#000000, 0.25);
|
||||
}
|
||||
|
||||
|
|
@ -13,20 +11,20 @@ $modalPadding: 10px;
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $modalPadding;
|
||||
border-bottom: $tableBorder;
|
||||
border-bottom: $globalBorderThick;
|
||||
}
|
||||
|
||||
.kuiModalHeader__title {
|
||||
font-size: $titleFontSize;
|
||||
font-size: $globalTitleFontSize;
|
||||
}
|
||||
|
||||
.kuiModalHeaderCloseButton {
|
||||
@include microButton;
|
||||
font-size: 18px;
|
||||
font-size: $globalTitleFontSize;
|
||||
}
|
||||
|
||||
.kuiModalBody {
|
||||
padding: 20px $modalPadding;
|
||||
padding: $modalPadding * 2 $modalPadding;
|
||||
}
|
||||
|
||||
.kuiModalBodyText {
|
||||
|
|
|
|||
|
|
@ -9,5 +9,5 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 10vh;
|
||||
background-color: rgba(#000000, 0.3);
|
||||
background-color: $modalOverlayBackground;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.kuiNoItems {
|
||||
padding: 30px;
|
||||
font-size: 18px;
|
||||
color: $subduedFontColor;
|
||||
line-height: $lineHeight;
|
||||
font-size: $globalTitleFontSize;
|
||||
color: $globalSubduedTextColor;
|
||||
line-height: $globalLineHeight;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,4 @@
|
|||
$noticeBackgroundColor: #FFF;
|
||||
$noticeTitleFontSize: 22px;
|
||||
|
||||
@import "notice";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.kuiNotice {
|
||||
padding: 40px 60px 48px;
|
||||
margin: 20px;
|
||||
background-color: white;
|
||||
line-height: $lineHeight;
|
||||
background-color: $noticeBackgroundColor;
|
||||
line-height: $globalLineHeight;
|
||||
}
|
||||
|
||||
.kuiNotice__header {
|
||||
|
|
@ -13,12 +13,12 @@
|
|||
* 1. Override h1 styles.
|
||||
*/
|
||||
.kuiNoticeTitle {
|
||||
font-size: 22px;
|
||||
font-size: $noticeTitleFontSize;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 0 !important; /* 1 */
|
||||
}
|
||||
|
||||
.kuiNoticeText {
|
||||
font-size: 14px;
|
||||
font-size: $globalFontSize;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,4 @@
|
|||
$panelPadding: 10px;
|
||||
$panelHeight: 50px;
|
||||
|
||||
@import "panel";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.kuiPanel {
|
||||
border: $tableBorder;
|
||||
border: $globalBorderThick;
|
||||
}
|
||||
|
||||
.kuiPanel--withHeader {
|
||||
|
|
@ -17,14 +17,14 @@
|
|||
@include buttonOnStandoutBackground;
|
||||
@include selectOnStandoutBackground;
|
||||
|
||||
padding: $toolBarPadding;
|
||||
height: $toolBarHeight;
|
||||
background-color: $standoutBackgroundColor;
|
||||
padding: $panelPadding;
|
||||
height: $panelHeight;
|
||||
background-color: $globalBorderColor;
|
||||
}
|
||||
|
||||
.kuiPanelHeader__title {
|
||||
font-size: $titleFontSize;
|
||||
line-height: $lineHeight;
|
||||
font-size: $globalTitleFontSize;
|
||||
line-height: $globalLineHeight;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -40,5 +40,5 @@
|
|||
}
|
||||
|
||||
.kuiPanelBody {
|
||||
padding: $toolBarPadding;
|
||||
padding: $panelPadding;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
}
|
||||
|
||||
.kuiPromptForItems__message {
|
||||
font-size: 18px;
|
||||
color: $subduedFontColor;
|
||||
line-height: $lineHeight;
|
||||
font-size: $globalTitleFontSize;
|
||||
color: $globalSubduedTextColor;
|
||||
line-height: $globalLineHeight;
|
||||
}
|
||||
|
||||
.kuiPromptForItems__actions {
|
||||
|
|
|
|||
|
|
@ -4,21 +4,21 @@
|
|||
}
|
||||
|
||||
.kuiStatusText--info {
|
||||
color: $infoColor;
|
||||
color: $globalInfoColor;
|
||||
}
|
||||
|
||||
.kuiStatusText--success {
|
||||
color: $successColor;
|
||||
color: $globalSuccessColor;
|
||||
}
|
||||
|
||||
.kuiStatusText--warning {
|
||||
color: $warningColor;
|
||||
color: $globalWarningColor;
|
||||
}
|
||||
|
||||
.kuiStatusText--error {
|
||||
color: $errorColor;
|
||||
color: $globalDangerColor;
|
||||
}
|
||||
|
||||
.kuiStatusText__icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.kuiStatusText__icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,8 @@
|
|||
$tableCellPadding: 7px 8px 8px;
|
||||
$tableCellFontWeight: 400;
|
||||
$tableBackgroundColor: #FFF;
|
||||
$tableHeaderTextColor: #a7a7a7;
|
||||
$tableCellExpandedBorderColor: #f0f0f0;
|
||||
|
||||
@import "controlled_table";
|
||||
@import "table";
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
$tableCellPadding: 7px 8px 8px;
|
||||
|
||||
/**
|
||||
* 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed.
|
||||
*/
|
||||
@mixin tableCell {
|
||||
font-size: $fontSize;
|
||||
font-weight: 400;
|
||||
font-size: $globalFontSize;
|
||||
font-weight: $tableCellFontWeight;
|
||||
text-align: left;
|
||||
max-width: 20px; /* 1 */
|
||||
}
|
||||
|
|
@ -16,9 +14,9 @@ $tableCellPadding: 7px 8px 8px;
|
|||
*/
|
||||
.kuiTable {
|
||||
width: 100%;
|
||||
border: $tableBorder;
|
||||
border: $globalBorderThick;
|
||||
border-collapse: collapse;
|
||||
background-color: #FFFFFF;
|
||||
background-color: $tableBackgroundColor;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -36,8 +34,8 @@ $tableCellPadding: 7px 8px 8px;
|
|||
.kuiTableHeaderCell {
|
||||
@include tableCell;
|
||||
padding: $tableCellPadding;
|
||||
line-height: $lineHeight;
|
||||
color: #a7a7a7;
|
||||
line-height: $globalLineHeight;
|
||||
color: $tableHeaderTextColor;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -76,8 +74,8 @@ $tableCellPadding: 7px 8px 8px;
|
|||
|
||||
.kuiTableRowCell {
|
||||
@include tableCell;
|
||||
color: $fontColor;
|
||||
border-top: $tableRowBorder;
|
||||
color: $globalFontColor;
|
||||
border-top: $globalBorderThin;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -85,7 +83,7 @@ $tableCellPadding: 7px 8px 8px;
|
|||
* that contains its expanded details.
|
||||
*/
|
||||
.kuiTableRowCell--expanded {
|
||||
border-top-color: #f0f0f0; /* 1 */
|
||||
border-top-color: $tableCellExpandedBorderColor; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -98,7 +96,7 @@ $tableCellPadding: 7px 8px 8px;
|
|||
overflow: hidden; /* 2 */
|
||||
text-overflow: ellipsis; /* 2 */
|
||||
padding: $tableCellPadding; /* 2 */
|
||||
line-height: $lineHeight; /* 1 */
|
||||
line-height: $globalLineHeight; /* 1 */
|
||||
|
||||
& > * {
|
||||
vertical-align: middle; /* 1 */
|
||||
|
|
|
|||
|
|
@ -1 +1,4 @@
|
|||
$tabBackgroundColor: #FFF;
|
||||
$tabHoverBackgroundColor: #F2F2F2;
|
||||
|
||||
@import "tabs";
|
||||
|
|
|
|||
|
|
@ -1,59 +1,59 @@
|
|||
.kuiTabs {
|
||||
display: flex;
|
||||
border-bottom: $tableBorder;
|
||||
border-bottom: $globalBorderThick;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Override button styles (some of which are from Bootstrap).
|
||||
* 2. Adding a border shifts tabs right by 1px, so we need to shift them back.
|
||||
* 3. Move the tab down so that its bottom border covers the container's bottom border.
|
||||
* 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more
|
||||
* of padding to make sure the text doesn't shift down.
|
||||
*/
|
||||
.kuiTab {
|
||||
appearance: none; /* 1 */
|
||||
cursor: pointer;
|
||||
padding: 10px 30px;
|
||||
font-size: 14px;
|
||||
color: $subduedFontColor;
|
||||
background-color: #ffffff; /* 1 */
|
||||
border: 1px solid $standoutBackgroundColor;
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 0; /* 1 */
|
||||
margin-bottom: -2px; /* 3 */
|
||||
/**
|
||||
* 1. Override button styles (some of which are from Bootstrap).
|
||||
* 2. Adding a border shifts tabs right by 1px, so we need to shift them back.
|
||||
* 3. Move the tab down so that its bottom border covers the container's bottom border.
|
||||
* 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more
|
||||
* of padding to make sure the text doesn't shift down.
|
||||
*/
|
||||
.kuiTab {
|
||||
appearance: none; /* 1 */
|
||||
cursor: pointer;
|
||||
padding: 10px 30px;
|
||||
font-size: $globalFontSize;
|
||||
color: $globalSubduedTextColor;
|
||||
background-color: $tabBackgroundColor; /* 1 */
|
||||
border: 1px solid $globalBorderColor;
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 0; /* 1 */
|
||||
margin-bottom: -2px; /* 3 */
|
||||
|
||||
& + & {
|
||||
border-left: none;
|
||||
|
||||
&:focus:not(.kuiTab-isSelected):not(:active) {
|
||||
margin-left: -1px; /* 2 */
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: none !important; /* 1 */
|
||||
box-shadow: none; /* 1 */
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none; /* 1 */
|
||||
}
|
||||
& + & {
|
||||
border-left: none;
|
||||
|
||||
&:focus:not(.kuiTab-isSelected):not(:active) {
|
||||
z-index: 1;
|
||||
color: $linkColor;
|
||||
border: 1px solid $selectedBorderColor !important;
|
||||
padding-bottom: 11px; /* 4 */
|
||||
}
|
||||
|
||||
&:hover:not(.kuiTab-isSelected) {
|
||||
color: $linkHoverColor;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
&.kuiTab-isSelected {
|
||||
cursor: default;
|
||||
color: $fontColor;
|
||||
border-bottom-color: #FFFFFF;
|
||||
margin-left: -1px; /* 2 */
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: none !important; /* 1 */
|
||||
box-shadow: none; /* 1 */
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none; /* 1 */
|
||||
}
|
||||
|
||||
&:focus:not(.kuiTab-isSelected):not(:active) {
|
||||
z-index: 1;
|
||||
color: $globalLinkColor;
|
||||
border: 1px solid $globalSelectedBorderColor !important;
|
||||
padding-bottom: 11px; /* 4 */
|
||||
}
|
||||
|
||||
&:hover:not(.kuiTab-isSelected) {
|
||||
color: $globalLinkHoverColor;
|
||||
background-color: $tabHoverBackgroundColor;
|
||||
}
|
||||
|
||||
&.kuiTab-isSelected {
|
||||
cursor: default;
|
||||
color: $globalFontColor;
|
||||
border-bottom-color: $tabBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
padding: 0;
|
||||
font-size: inherit; /* 1 */
|
||||
line-height: inherit; /* 1 */
|
||||
color: $linkColor;
|
||||
color: $globalLinkColor;
|
||||
|
||||
&:active {
|
||||
color: $linkColor !important; /* 2 */
|
||||
color: $globalLinkColor !important; /* 2 */
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $linkHoverColor !important; /* 2 */
|
||||
color: $globalLinkHoverColor !important; /* 2 */
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
padding: $toolBarPadding;
|
||||
height: $toolBarHeight;
|
||||
background-color: $standoutBackgroundColor;
|
||||
background-color: $globalBorderColor;
|
||||
}
|
||||
|
||||
.kuiToolBarSection {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
padding: 10px;
|
||||
height: 40px;
|
||||
background-color: #ffffff;
|
||||
border: $tableBorder;
|
||||
border: $globalBorderThick;
|
||||
}
|
||||
|
||||
.kuiToolBarFooterSection {
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@
|
|||
|
||||
flex: 1 1 auto;
|
||||
max-width: 800px;
|
||||
line-height: $lineHeight;
|
||||
line-height: $globalLineHeight;
|
||||
}
|
||||
|
||||
.kuiToolBarSearchBox {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
font-size: $fontSize;
|
||||
font-size: $globalFontSize;
|
||||
}
|
||||
|
||||
.kuiToolBarSearchBox__icon {
|
||||
|
|
@ -45,14 +45,14 @@
|
|||
width: 100%;
|
||||
min-width: 200px;
|
||||
padding: 4px 12px 5px 28px;
|
||||
font-family: $font; /* 1 */
|
||||
font-family: $globalFontFamily; /* 1 */
|
||||
background-color: #FFFFFF;
|
||||
color: $fontColor;
|
||||
border-radius: $buttonBorderRadius;
|
||||
color: $globalFontColor;
|
||||
border-radius: $globalBorderRadius;
|
||||
font-size: 1em;
|
||||
border: 1px solid #ffffff;
|
||||
line-height: normal; /* 1 */
|
||||
transition: border-color $formTransitionTiming;
|
||||
transition: border-color $globalInputTransitionTiming;
|
||||
|
||||
&:focus {
|
||||
@include formControlFocus;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
* 1. We don't want the text to take up two lines and overflow the ToolBar.
|
||||
*/
|
||||
.kuiToolBarText {
|
||||
font-size: $fontSize;
|
||||
line-height: $lineHeight;
|
||||
font-size: $globalFontSize;
|
||||
line-height: $globalLineHeight;
|
||||
color: #5A5A5A;
|
||||
white-space: nowrap; /* 1 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
$typcographyTitleFontSize: 22px;
|
||||
@import "typography";
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
*/
|
||||
.kuiTitle {
|
||||
margin: 0; /* 1 */
|
||||
font-weight: 400; /* 1 */
|
||||
color: $fontColor;
|
||||
font-size: 22px;
|
||||
font-weight: $globalFontWeightRegular; /* 1 */
|
||||
color: $globalFontColor;
|
||||
font-size: $typcographyTitleFontSize;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
*/
|
||||
.kuiSubTitle {
|
||||
margin: 0; /* 1 */
|
||||
font-weight: 400; /* 1 */
|
||||
color: $fontColor;
|
||||
font-size: 18px;
|
||||
font-weight: $globalFontWeightRegular; /* 1 */
|
||||
color: $globalFontColor;
|
||||
font-size: $globalTitleFontSize;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -23,12 +23,12 @@
|
|||
*/
|
||||
.kuiText {
|
||||
margin: 0; /* 1 */
|
||||
font-weight: 400; /* 1 */
|
||||
color: $fontColor;
|
||||
line-height: $lineHeight;
|
||||
font-size: $fontSize;
|
||||
font-weight: $globalFontWeightRegular; /* 1 */
|
||||
color: $globalFontColor;
|
||||
line-height: $globalLineHeight;
|
||||
font-size: $globalFontSize;
|
||||
}
|
||||
|
||||
.kuiSubduedText {
|
||||
color: $subduedFontColor !important;
|
||||
color: $globalSubduedTextColor !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
$verticalRhythmSpacing: 10px;
|
||||
|
||||
@import "vertical_rhythm";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.kuiVerticalRhythm {
|
||||
& + & {
|
||||
margin-top: $verticalRhythm;
|
||||
margin-top: $verticalRhythmSpacing;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,4 @@
|
|||
$viewBackground: #FFF;
|
||||
$viewContentMaxWidth: 1100px;
|
||||
|
||||
@import "view";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.kuiView {
|
||||
background-color: #FFFFFF;
|
||||
background-color: $viewBackground;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
.kuiViewContent--constrainedWidth {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
max-width: $viewContentMaxWidth;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
|
|
|||
64
ui_framework/dist/ui_framework.css
vendored
64
ui_framework/dist/ui_framework.css
vendored
|
|
@ -212,24 +212,24 @@ body {
|
|||
/* 1 */
|
||||
color: #5a5a5a; }
|
||||
.kuiButton--basic:enabled:hover {
|
||||
color: #ffffff !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #9B9B9B !important;
|
||||
/* 1 */ }
|
||||
a.kuiButton--basic:not(.kuiButton-isDisabled):hover {
|
||||
/* 1 */
|
||||
color: #ffffff !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #9B9B9B !important;
|
||||
/* 1 */ }
|
||||
.kuiButton--basic:enabled:active {
|
||||
color: #ffffff !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #9B9B9B !important;
|
||||
/* 1 */ }
|
||||
a.kuiButton--basic:not(.kuiButton-isDisabled):active {
|
||||
/* 1 */
|
||||
color: #ffffff !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #9B9B9B !important;
|
||||
/* 1 */ }
|
||||
|
|
@ -242,29 +242,29 @@ body {
|
|||
* 1. Override Bootstrap.
|
||||
*/
|
||||
.kuiButton--primary {
|
||||
color: #FFFFFF;
|
||||
color: #FFF;
|
||||
background-color: #6EADC1; }
|
||||
.kuiButton--primary:not(a):enabled:focus {
|
||||
color: #FFFFFF; }
|
||||
color: #FFF; }
|
||||
a.kuiButton--primary:not(.kuiButton-isDisabled):focus {
|
||||
/* 1 */
|
||||
color: #FFFFFF; }
|
||||
color: #FFF; }
|
||||
.kuiButton--primary:enabled:hover {
|
||||
color: #FFFFFF !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #006E8A; }
|
||||
a.kuiButton--primary:not(.kuiButton-isDisabled):hover {
|
||||
/* 1 */
|
||||
color: #FFFFFF !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #006E8A; }
|
||||
.kuiButton--primary:enabled:active {
|
||||
color: #FFFFFF !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #006E8A; }
|
||||
a.kuiButton--primary:not(.kuiButton-isDisabled):active {
|
||||
/* 1 */
|
||||
color: #FFFFFF !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #006E8A; }
|
||||
.kuiButton--primary:disabled {
|
||||
|
|
@ -276,7 +276,7 @@ body {
|
|||
* 1. Override Bootstrap.
|
||||
*/
|
||||
.kuiButton--danger {
|
||||
color: #FFFFFF;
|
||||
color: #FFF;
|
||||
background-color: #D76051; }
|
||||
.kuiButton--danger:not(a):enabled:focus {
|
||||
z-index: 1;
|
||||
|
|
@ -285,7 +285,7 @@ body {
|
|||
/* 2 */
|
||||
box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
|
||||
/* 3 */
|
||||
color: #FFFFFF; }
|
||||
color: #FFF; }
|
||||
a.kuiButton--danger:not(.kuiButton-isDisabled):focus {
|
||||
/* 1 */
|
||||
z-index: 1;
|
||||
|
|
@ -294,23 +294,23 @@ body {
|
|||
/* 2 */
|
||||
box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
|
||||
/* 3 */
|
||||
color: #FFFFFF; }
|
||||
color: #FFF; }
|
||||
.kuiButton--danger:enabled:hover {
|
||||
color: #FFFFFF !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #A52E1F; }
|
||||
a.kuiButton--danger:not(.kuiButton-isDisabled):hover {
|
||||
/* 1 */
|
||||
color: #FFFFFF !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #A52E1F; }
|
||||
.kuiButton--danger:enabled:active {
|
||||
color: #FFFFFF !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #A52E1F; }
|
||||
a.kuiButton--danger:not(.kuiButton-isDisabled):active {
|
||||
/* 1 */
|
||||
color: #FFFFFF !important;
|
||||
color: #FFF !important;
|
||||
/* 1 */
|
||||
background-color: #A52E1F; }
|
||||
.kuiButton--danger:disabled {
|
||||
|
|
@ -593,7 +593,7 @@ body {
|
|||
.kuiCheckBox {
|
||||
-webkit-appearance: none;
|
||||
/* 1 */
|
||||
background-color: #FFFFFF;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #BEBEBE;
|
||||
border-radius: 4px;
|
||||
width: 16px;
|
||||
|
|
@ -617,7 +617,7 @@ body {
|
|||
content: "\F00C";
|
||||
font-size: 1em;
|
||||
opacity: 0;
|
||||
color: #ffffff;
|
||||
color: #FFF;
|
||||
-webkit-transition: opacity 0.1s linear;
|
||||
transition: opacity 0.1s linear; }
|
||||
.kuiCheckBox:checked {
|
||||
|
|
@ -1645,7 +1645,7 @@ body {
|
|||
|
||||
.kuiModal {
|
||||
line-height: 1.5;
|
||||
background-color: #ffffff;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #6EADC1;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 5px 22px rgba(0, 0, 0, 0.25); }
|
||||
|
|
@ -1714,7 +1714,7 @@ body {
|
|||
.kuiNotice {
|
||||
padding: 40px 60px 48px;
|
||||
margin: 20px;
|
||||
background-color: white;
|
||||
background-color: #FFF;
|
||||
line-height: 1.5; }
|
||||
|
||||
.kuiNotice__header {
|
||||
|
|
@ -1926,7 +1926,7 @@ body {
|
|||
width: 100%;
|
||||
border: 2px solid #E4E4E4;
|
||||
border-collapse: collapse;
|
||||
background-color: #FFFFFF; }
|
||||
background-color: #FFF; }
|
||||
|
||||
/**
|
||||
* 1. Allow contents of cells to determine table's width.
|
||||
|
|
@ -2041,12 +2041,12 @@ body {
|
|||
border-bottom: 2px solid #E4E4E4; }
|
||||
|
||||
/**
|
||||
* 1. Override button styles (some of which are from Bootstrap).
|
||||
* 2. Adding a border shifts tabs right by 1px, so we need to shift them back.
|
||||
* 3. Move the tab down so that its bottom border covers the container's bottom border.
|
||||
* 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more
|
||||
* of padding to make sure the text doesn't shift down.
|
||||
*/
|
||||
* 1. Override button styles (some of which are from Bootstrap).
|
||||
* 2. Adding a border shifts tabs right by 1px, so we need to shift them back.
|
||||
* 3. Move the tab down so that its bottom border covers the container's bottom border.
|
||||
* 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more
|
||||
* of padding to make sure the text doesn't shift down.
|
||||
*/
|
||||
.kuiTab {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
|
@ -2056,7 +2056,7 @@ body {
|
|||
padding: 10px 30px;
|
||||
font-size: 14px;
|
||||
color: #9fa3a7;
|
||||
background-color: #ffffff;
|
||||
background-color: #FFF;
|
||||
/* 1 */
|
||||
border: 1px solid #E4E4E4;
|
||||
border-bottom-width: 2px;
|
||||
|
|
@ -2089,7 +2089,7 @@ body {
|
|||
.kuiTab.kuiTab-isSelected {
|
||||
cursor: default;
|
||||
color: #191E23;
|
||||
border-bottom-color: #FFFFFF; }
|
||||
border-bottom-color: #FFF; }
|
||||
|
||||
/**
|
||||
* 1. Allow container to deteermine font-size and line-height.
|
||||
|
|
@ -2395,7 +2395,7 @@ body {
|
|||
margin-top: 10px; }
|
||||
|
||||
.kuiView {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #FFF;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue