mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
KUI Dark mode (#28975)
KUI now ouputs two files, one for dark, one for light.
This commit is contained in:
dave.snider@gmail.com
GitHub
parent
0e00c3ffef
commit
690f4714cb
62 changed files with 3182 additions and 953 deletions
|
|
@ -104,9 +104,14 @@ module.exports = function (grunt) {
|
|||
Promise.all([uiFrameworkWatch(), uiFrameworkServerStart()]).then(done);
|
||||
});
|
||||
|
||||
grunt.registerTask('compileCss', function () {
|
||||
grunt.registerTask('compileCssLight', function () {
|
||||
const done = this.async();
|
||||
uiFrameworkCompile().then(done);
|
||||
uiFrameworkCompileLight().then(done);
|
||||
});
|
||||
|
||||
grunt.registerTask('compileCssDark', function () {
|
||||
const done = this.async();
|
||||
uiFrameworkCompileDark().then(done);
|
||||
});
|
||||
|
||||
function uiFrameworkServerStart() {
|
||||
|
|
@ -141,9 +146,36 @@ module.exports = function (grunt) {
|
|||
});
|
||||
}
|
||||
|
||||
function uiFrameworkCompile() {
|
||||
const src = 'src/index.scss';
|
||||
const dest = 'dist/ui_framework.css';
|
||||
function uiFrameworkCompileLight() {
|
||||
const src = 'src/kui_light.scss';
|
||||
const dest = 'dist/kui_light.css';
|
||||
|
||||
return new Promise(resolve => {
|
||||
sass.render({
|
||||
file: src,
|
||||
}, function (error, result) {
|
||||
if (error) {
|
||||
grunt.log.error(error);
|
||||
}
|
||||
|
||||
postcss([postcssConfig])
|
||||
.process(result.css, { from: src, to: dest })
|
||||
.then(result => {
|
||||
grunt.file.write(dest, result.css);
|
||||
|
||||
if (result.map) {
|
||||
grunt.file.write(`${dest}.map`, result.map);
|
||||
}
|
||||
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function uiFrameworkCompileDark() {
|
||||
const src = 'src/kui_dark.scss';
|
||||
const dest = 'dist/kui_dark.css';
|
||||
|
||||
return new Promise(resolve => {
|
||||
sass.render({
|
||||
|
|
@ -175,7 +207,8 @@ module.exports = function (grunt) {
|
|||
grunt.util.spawn({
|
||||
cmd: isPlatformWindows ? '.\\node_modules\\.bin\\grunt.cmd' : './node_modules/.bin/grunt',
|
||||
args: [
|
||||
'compileCss',
|
||||
'compileCssLight',
|
||||
'compileCssDark',
|
||||
],
|
||||
}, (error, result) => {
|
||||
if (error) {
|
||||
|
|
|
|||
2889
packages/kbn-ui-framework/dist/kui_dark.css
vendored
Normal file
2889
packages/kbn-ui-framework/dist/kui_dark.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -4,7 +4,7 @@ html {
|
|||
|
||||
.guideBody {
|
||||
height: 100%;
|
||||
background-color: #000000;
|
||||
background-color: $euiColorFullShade;
|
||||
margin: 0;
|
||||
min-width: $guideMinWidth;
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@ html {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 1 0 auto;
|
||||
background-color: #ffffff;
|
||||
background-color: $euiColorEmptyShade;
|
||||
}
|
||||
|
||||
.guideContentPage__hint {
|
||||
|
|
@ -74,7 +74,7 @@ html {
|
|||
padding: 30px;
|
||||
margin: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: #e8e8e8;
|
||||
background-color: $euiColorLightestShade;
|
||||
line-height: $guideLineHeight;
|
||||
}
|
||||
|
||||
|
|
@ -96,11 +96,11 @@ html {
|
|||
}
|
||||
|
||||
.guideWarning {
|
||||
border-left: 5px solid #e8488b;
|
||||
border-left: 5px solid $euiColorAccent;
|
||||
margin-top: 19px;
|
||||
padding: 0 14px;
|
||||
line-height: 21px;
|
||||
color: #e8488b;
|
||||
color: $euiColorAccent;
|
||||
}
|
||||
|
||||
.guideBreak {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.guideCode {
|
||||
padding: 2px 4px;
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
background-color: #e8e8e8;
|
||||
color: #565656;
|
||||
background-color: $euiColorLightestShade;
|
||||
color: $euiColorDarkShade;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
bottom: 0;
|
||||
width: $guideCodeViewerWidth;
|
||||
padding: 6px 0 40px;
|
||||
background-color: white;
|
||||
background-color: $euiColorEmptyShade;
|
||||
transform: translateX($guideCodeViewerWidth);
|
||||
transition: transform $guideCodeViewerTransition;
|
||||
overflow: auto;
|
||||
border-left: 1px solid #d6d6d6;
|
||||
border-left: $euiBorderThin;
|
||||
|
||||
@include scrollbar;
|
||||
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
.guideCodeViewer__header {
|
||||
padding: 0 20px 6px;
|
||||
line-height: $guideLineHeight;
|
||||
border-bottom: 1px solid #d6d6d6;
|
||||
border-bottom: $euiBorderThin;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
.guideCodeViewer__title {
|
||||
padding: 0 20px 6px;
|
||||
border-bottom: 1px solid #d6d6d6;
|
||||
border-bottom: $euiBorderThin;
|
||||
line-height: $guideLineHeight;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
.hljs {
|
||||
display: block;
|
||||
padding: 15px 20px;
|
||||
color: #637c84;
|
||||
color: $euiColorDarkShade;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$guideVerticalRhythm: 20px;
|
||||
$guideLineHeight: 24px;
|
||||
$guideVerticalRhythm: $euiSize;
|
||||
$guideLineHeight: $euiSizeL;
|
||||
$guideNavHeight: 60px;
|
||||
$guideSideNavWidth: 400px;
|
||||
$guideSideNavSmallWidth: 220px;
|
||||
|
|
@ -9,11 +9,11 @@ $guideCodeViewerTransition: 0.2s ease;
|
|||
$guideChromeTransition: 0.3s ease;
|
||||
|
||||
// Colors
|
||||
$guideBaseBackgroundColor: #f7f7f7;
|
||||
$guidePanelBackgroundColor: #ffffff;
|
||||
$guideTextColor: #444;
|
||||
$guideLinkColor: #00a9e5;
|
||||
$guideLinkHoverColor: #00a9e5;
|
||||
$guideBaseBackgroundColor: $euiColorLightestShade;
|
||||
$guidePanelBackgroundColor: $euiColorEmptyShade;
|
||||
$guideTextColor: $euiColorDarkestShade;
|
||||
$guideLinkColor: $euiColorPrimary;
|
||||
$guideLinkHoverColor: darken($euiColorPrimary, 10%);
|
||||
|
||||
// Breakpoints
|
||||
$guideMinWidth: 840px;
|
||||
|
|
@ -31,7 +31,7 @@ $guideNormalBreakpoint: 1900px;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin scrollbar($color: rgba(#454D58, 0.4)) {
|
||||
@mixin scrollbar($color: $euiBorderColor) {
|
||||
&::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
|
|||
|
|
@ -8,21 +8,16 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.guideDemo--darkTheme {
|
||||
background-color: #272727;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.guideDemo__highlightGrid {
|
||||
.kuiFlexItem {
|
||||
background: transparentize(#0096CC, .9);
|
||||
background: transparentize($euiColorPrimary, .9);
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.guideDemo__highlightGridWrap {
|
||||
.kuiFlexItem div {
|
||||
background: transparentize(#0096CC, .9);
|
||||
background: transparentize($euiColorPrimary, .9);
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ export class GuideDemo extends Component {
|
|||
render() {
|
||||
const {
|
||||
isFullScreen,
|
||||
isDarkTheme,
|
||||
children,
|
||||
className,
|
||||
js, // eslint-disable-line no-unused-vars
|
||||
|
|
@ -66,8 +65,6 @@ export class GuideDemo extends Component {
|
|||
|
||||
const classes = classNames('guideDemo', className, {
|
||||
'guideDemo--fullScreen': isFullScreen,
|
||||
'guideDemo--darkTheme': isDarkTheme,
|
||||
'theme-dark': isDarkTheme,
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
@ -88,7 +85,6 @@ GuideDemo.propTypes = {
|
|||
html: PropTypes.string.isRequired,
|
||||
css: PropTypes.string.isRequired,
|
||||
isFullScreen: PropTypes.bool.isRequired,
|
||||
isDarkTheme: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
GuideDemo.defaultProps = {
|
||||
|
|
@ -96,5 +92,4 @@ GuideDemo.defaultProps = {
|
|||
html: '',
|
||||
css: '',
|
||||
isFullScreen: false,
|
||||
isDarkTheme: false,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
right: 0;
|
||||
min-width: $guideMinWidth;
|
||||
height: $guideNavHeight;
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
border-bottom: $euiBorderThin;
|
||||
color: $guideTextColor;
|
||||
background-color: $guidePanelBackgroundColor;
|
||||
transition:
|
||||
|
|
@ -16,11 +16,11 @@
|
|||
height 0.3s ease,
|
||||
box-shadow 0.3s linear;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 0 rgba(black, 0.3);
|
||||
@include euiBottomShadowMedium;
|
||||
|
||||
&.is-guide-nav-open {
|
||||
height: 100%;
|
||||
box-shadow: 0 40px 200px rgba(black, 0.05);
|
||||
@include euiBottomShadow;
|
||||
}
|
||||
|
||||
&.is-chrome-hidden {
|
||||
|
|
@ -182,14 +182,14 @@
|
|||
line-height: 10px;
|
||||
padding: 4px 20px;
|
||||
color: $guideLinkHoverColor;
|
||||
background-color: #fff;
|
||||
background-color: $euiColorEmptyShade;
|
||||
border: 1px solid $guideLinkHoverColor;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #e6f7fc;
|
||||
background-color: $euiColorLightestShade;
|
||||
}
|
||||
|
||||
&.guideNavPaginationButton-isDisabled {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
$scrollBarWidth: 20px;
|
||||
|
||||
background-color: $guidePanelBackgroundColor;
|
||||
border: 1px solid #CCCCCC;
|
||||
border: $euiBorderThin;
|
||||
border-radius: 4px;
|
||||
flex: 1 1 auto;
|
||||
padding: 40px 60px;
|
||||
|
|
@ -34,3 +34,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.guidePageKillScreen {
|
||||
background-color: tintOrShade($euiColorDanger, 90%, 70%);
|
||||
padding: $euiSizeL;
|
||||
margin-bottom: $euiSizeL;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export class GuidePage extends Component {
|
|||
</GuidePageSideNav>
|
||||
|
||||
<div className="guidePageBody">
|
||||
<div style={{ marginBottom: 40, backgroundColor: '#ffec9d', padding: 20 }}>
|
||||
<div className="guidePageKillScreen">
|
||||
<h1 className="guideTitle">
|
||||
The Kibana UI Framework has been DEPRECATED.
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
line-height: 10px;
|
||||
padding: 4px 10px;
|
||||
color: $guideLinkHoverColor;
|
||||
background-color: #fff;
|
||||
background-color: $euiColorEmptyShade;
|
||||
border: 1px solid $guideLinkHoverColor;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #e6f7fc;
|
||||
background-color: $euiColorLightestShade;
|
||||
}
|
||||
|
||||
.is-chrome-hidden & {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
@import "~@elastic/eui/src/global_styling/index";
|
||||
@import "../../dist/ui_framework.css";
|
||||
@import '~@elastic/eui/src/themes/k6/k6_globals';
|
||||
@import '~@elastic/eui/src/themes/k6/k6_colors_dark';
|
||||
@import '~@elastic/eui/src/global_styling/functions/index';
|
||||
@import '~@elastic/eui/src/global_styling/variables/index';
|
||||
@import '~@elastic/eui/src/global_styling/mixins/index';
|
||||
@import '~@elastic/eui/src/global_styling/reset/index';
|
||||
@import "../../dist/kui_dark.css";
|
||||
@import "./components/guide_components";
|
||||
|
|
|
|||
|
|
@ -94,10 +94,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<Basic />
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<Basic />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
|
|||
|
|
@ -103,10 +103,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<TextInput/>
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<TextInput/>
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -126,11 +122,6 @@ export default props => (
|
|||
<GuideDemo
|
||||
html={assistedInputHtml}
|
||||
/>
|
||||
|
||||
<GuideDemo
|
||||
html={assistedInputHtml}
|
||||
isDarkTheme
|
||||
/>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -143,11 +134,6 @@ export default props => (
|
|||
<GuideDemo
|
||||
html={searchInputHtml}
|
||||
/>
|
||||
|
||||
<GuideDemo
|
||||
html={searchInputHtml}
|
||||
isDarkTheme
|
||||
/>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -179,10 +165,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<TextArea/>
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<TextArea/>
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -213,10 +195,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<CheckBox/>
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<CheckBox/>
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -233,9 +211,6 @@ export default props => (
|
|||
<Select/>
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<Select/>
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
</GuidePage>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -40,11 +40,6 @@ export default props => (
|
|||
<GuideDemo
|
||||
html={linkHtml}
|
||||
/>
|
||||
|
||||
<GuideDemo
|
||||
html={linkHtml}
|
||||
isDarkTheme={true}
|
||||
/>
|
||||
</GuideSection>
|
||||
</GuidePage>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -86,10 +86,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<SimpleLocalNav />
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<SimpleLocalNav />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -112,10 +108,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<LocalNavWithBreadcrumbs />
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<LocalNavWithBreadcrumbs />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -139,9 +131,6 @@ export default props => (
|
|||
<LocalNavWithSearch />
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<LocalNavWithSearch />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -160,10 +149,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<LocalNavWithSearchError />
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<LocalNavWithSearchError />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -190,10 +175,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<LocalNavWithMenuItemStates />
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<LocalNavWithMenuItemStates />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -216,10 +197,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<LocalNavWithDropdown />
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<LocalNavWithDropdown />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -242,10 +219,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<LocalNavWithDropdownPanels />
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<LocalNavWithDropdownPanels />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -268,10 +241,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<LocalNavWithTabs />
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<LocalNavWithTabs />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
@ -284,11 +253,6 @@ export default props => (
|
|||
<GuideDemo
|
||||
html={datePickerHtml}
|
||||
/>
|
||||
|
||||
<GuideDemo
|
||||
html={datePickerHtml}
|
||||
isDarkTheme={true}
|
||||
/>
|
||||
</GuideSection>
|
||||
</GuidePage>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -59,10 +59,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<ModalExample />
|
||||
</GuideDemo>
|
||||
|
||||
<GuideDemo isDarkTheme>
|
||||
<ModalExample />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
|
|
|
|||
|
|
@ -53,13 +53,6 @@ export default props => (
|
|||
<GuideDemo>
|
||||
<Tabs />
|
||||
</GuideDemo>
|
||||
|
||||
<GuideText>
|
||||
Dark themed tabs
|
||||
</GuideText>
|
||||
<GuideDemo isDarkTheme={true}>
|
||||
<Tabs />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
</GuidePage>
|
||||
|
|
|
|||
|
|
@ -85,20 +85,6 @@
|
|||
@include kuiButtonHoverAndActive {
|
||||
background-color: $buttonBasicHoverBackgroundColor !important; /* 1 */
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $buttonBasicTextColor--darkTheme;
|
||||
background-color: $buttonBasicBackgroundColor--darkTheme;
|
||||
|
||||
@include kuiButtonFocus {
|
||||
@include focus($kuiFocusColor, $kuiBackgroundColor--darkTheme);
|
||||
color: $buttonBasicTextColor--darkTheme;
|
||||
}
|
||||
|
||||
@include kuiButtonHoverAndActive {
|
||||
background-color: $buttonBasicHoverBackgroundColor--darkTheme !important; /* 1 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -139,19 +125,18 @@
|
|||
* 1. Override Bootstrap.
|
||||
*/
|
||||
.kuiButton--danger {
|
||||
color: $kuiColorRed;
|
||||
background-color: rgba($kuiColorWhite, 0.5);
|
||||
border: solid 1px $kuiColorRed;
|
||||
color: $euiColorDanger;
|
||||
border: solid 1px $euiColorDanger;
|
||||
|
||||
@include kuiButtonFocus {
|
||||
@include focus($kuiFocusDangerColor);
|
||||
color: $kuiColorRed;
|
||||
@include focus($euiColorDanger);
|
||||
color: $euiColorDanger;
|
||||
}
|
||||
|
||||
@include kuiButtonHoverAndActive {
|
||||
color: darken($kuiColorRed, 10%) !important;
|
||||
background-color: rgba(lighten($kuiColorRed, 50%), 0.5);
|
||||
border: solid 1px darken($kuiColorRed, 10%);
|
||||
color: darken($euiColorDanger, 10%) !important;
|
||||
border: solid 1px darken($euiColorDanger, 10%);
|
||||
background-color: transparentize($euiColorDanger, .9);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -185,28 +170,20 @@
|
|||
color: $kuiLinkColor !important; /* 2 */
|
||||
background-color: transparent;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiLinkColor--darkTheme !important; /* 2 */
|
||||
}
|
||||
|
||||
@include kuiButtonHoverAndActive {
|
||||
color: $kuiLinkHoverColor !important; /* 1 */
|
||||
text-decoration: underline;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiLinkColor-isHover--darkTheme !important; /* 2 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kuiButton--secondary {
|
||||
color: $kuiLinkColor !important; /* 2 */
|
||||
border: solid 1px $kuiColorBlue;
|
||||
background-color: rgba($kuiColorWhite, 0.5);
|
||||
color: $euiColorPrimary !important; /* 2 */
|
||||
border: solid 1px $euiColorPrimary;
|
||||
|
||||
@include kuiButtonHoverAndActive {
|
||||
color: darken($kuiLinkColor, 10%) !important; /* 1 */
|
||||
border: solid 1px darken($kuiColorBlue, 10%);
|
||||
background-color: rgba(lighten($kuiLinkColor, 50%), 0.5);
|
||||
color: darken($euiColorPrimary, 10%) !important; /* 1 */
|
||||
border: solid 1px darken($euiColorPrimary, 10%);
|
||||
background-color: transparentize($euiColorPrimary, .9);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,16 +10,13 @@ $buttonSmallPadding: 2px 8px 3px;
|
|||
$buttonSmallHeight: 22px;
|
||||
|
||||
// Most buttons
|
||||
$buttonDefaultTextColor: #FFF;
|
||||
$buttonDefaultTextColor: $euiColorGhost;
|
||||
|
||||
// Basic
|
||||
$buttonBasicTextColor: $kuiTextColor;
|
||||
$buttonBasicBackgroundColor: $kuiColorLightestGray;
|
||||
$buttonBasicHoverBackgroundColor: darken($kuiColorLightestGray, 10%);
|
||||
$buttonBasicDisabledTextColor: $kuiTextColor;
|
||||
$buttonBasicTextColor--darkTheme: #FFF;
|
||||
$buttonBasicBackgroundColor--darkTheme: #9c9c9c;
|
||||
$buttonBasicHoverBackgroundColor--darkTheme: darken($buttonBasicBackgroundColor--darkTheme, 20%);
|
||||
|
||||
// Primary
|
||||
$buttonPrimaryBackgroundColor: $kuiLinkColor;
|
||||
|
|
@ -37,12 +34,12 @@ $buttonDangerHoverBackgroundColor: darken($kuiColorRed, 10%);
|
|||
$buttonDangerDisabledBackgroundColor: lighten($buttonDangerBackgroundColor, 50%);
|
||||
|
||||
// Warning
|
||||
$buttonWarningBackgroundColor: #f98100;
|
||||
$buttonWarningBackgroundColor: $euiColorWarning;
|
||||
$buttonWarningHoverBackgroundColor: darken($buttonWarningBackgroundColor, 10%);
|
||||
$buttonWarningDisabledBackgroundColor: lighten($buttonWarningBackgroundColor, 10%);
|
||||
|
||||
// Hollow
|
||||
$buttonHollowDisabledTextColor: #dddddd;
|
||||
$buttonHollowDisabledTextColor: $euiColorMediumShade;
|
||||
|
||||
@import "button";
|
||||
@import "button_group/button_group";
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
$expressionColorHighlight: #017D73;
|
||||
$expressionColorHighlight: $euiColorSecondary;
|
||||
|
||||
@import "expression";
|
||||
|
|
|
|||
|
|
@ -1,11 +1,3 @@
|
|||
$checkboxBackgroundColor: #FFF;
|
||||
$checkboxBorderColor: #BEBEBE;
|
||||
$checkboxIconColor: #FFF;
|
||||
$checkboxDisabledColor: #D3DAE6;
|
||||
$checkboxCheckedBackgroundColor: $kuiColorBlue;
|
||||
$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
|
||||
|
|
@ -54,15 +46,6 @@ $checkboxDisabledOpacity: 0.3;
|
|||
border-color: $checkboxDisabledColor !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
background-color: $kuiInputBackgroundColor--darkTheme;
|
||||
border-color: $kuiInputBackgroundColor--darkTheme;
|
||||
|
||||
&:checked {
|
||||
background-color: $checkboxCheckedBackgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kuiCheckBoxLabel {
|
||||
|
|
|
|||
|
|
@ -1 +1,8 @@
|
|||
$checkboxBackgroundColor: $euiFormBackgroundColor;
|
||||
$checkboxBorderColor: $euiFormBorderColor;
|
||||
$checkboxIconColor: $euiColorGhost;
|
||||
$checkboxDisabledColor: $euiFormBackgroundDisabledColor;
|
||||
$checkboxCheckedBackgroundColor: $euiColorPrimary;
|
||||
$checkboxDisabledOpacity: 0.3;
|
||||
|
||||
@import "check_box";
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
$searchInputTextColor: $euiColorMediumShade;
|
||||
|
||||
@import "search_input";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
$searchInputTextColor: #ACACAC;
|
||||
|
||||
.kuiSearchInput {
|
||||
width: $kuiFormFieldDefaultWidth;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
$iconBasicTextColor: #565656;
|
||||
$iconBasicTextColor: $euiColorDarkShade;
|
||||
|
||||
@import "icon";
|
||||
|
|
|
|||
|
|
@ -1,47 +1,25 @@
|
|||
// Normal colors
|
||||
$localNavTextColor: $kuiTextColor;
|
||||
$localNavBackgroundColor: $kuiColorWhite;
|
||||
$localNavBackgroundColor: $euiColorEmptyShade;
|
||||
$localNavButtonTextColor: $kuiTextColor;
|
||||
$localNavButtonTextColor-isHover: $kuiColorLightestGray;
|
||||
$localNavButtonBackgroundColor: transparent;
|
||||
$localNavButtonBackgroundColor-isHover: $kuiColorBlue;
|
||||
$localNavButtonBackgroundColor-isSelected: $kuiColorLightestGray;
|
||||
$localNavBreadcrumbDelimiterColor: #5a5a5a;
|
||||
$localSearchBackgroundColor: #ffffff;
|
||||
$localSearchBorderColor-isInvalid: #e74C3c;
|
||||
$localNavBreadcrumbDelimiterColor: $euiBorderColor;
|
||||
$localSearchBackgroundColor: $euiColorGhost;
|
||||
$localSearchBorderColor-isInvalid: $euiColorDanger;
|
||||
$localDropdownBackgroundColor: $localNavButtonBackgroundColor-isSelected;
|
||||
$localDropdownFormNoteTextColor: #737373;
|
||||
$localDropdownFormNoteTextColor: $euiColorDarkShade;
|
||||
$localTabTextColor: $kuiColorDarkestGray;
|
||||
$localTabTextColor-isHover: $kuiColorBlue;
|
||||
$localTabTextColor-isSelected: $kuiColorBlue;
|
||||
$localBreadcrumbLinkColor: $kuiColorBlue;
|
||||
$localSearchButtonBackgroundColor: $kuiColorDarkGray;
|
||||
$localSearchButtonTextColor: #ffffff;
|
||||
$localSearchButtonBackgroundColor: $euiColorPrimary;
|
||||
$localSearchButtonTextColor: $euiColorGhost;
|
||||
$localDatePickerButtonHoverBackgroundColor: $localNavButtonBackgroundColor-isHover;
|
||||
$localDatePickerCellSelectedBackgroundColor: #777777;
|
||||
$localDatePickerCellSelectedTextColor: #ffffff;
|
||||
|
||||
// Dark theme colors
|
||||
$localNavTextColor--darkTheme: $kuiTextColor--darkTheme;
|
||||
$localNavBackgroundColor--darkTheme: #222;
|
||||
$localNavButtonTextColor--darkTheme: #dedede;
|
||||
$localNavButtonTextColor-isHover--darkTheme: #ffffff;
|
||||
$localNavButtonBackgroundColor-isHover--darkTheme: #000000;
|
||||
$localNavButtonBackgroundColor-isSelected--darkTheme: #525252;
|
||||
$localNavBreadcrumbDelimiterColor--darkTheme: #a5a5a5;
|
||||
$localSearchBackgroundColor--darkTheme: #4e4e4e;
|
||||
$localSearchBorderColor-isInvalid--darkTheme: #ff6758;
|
||||
$localDropdownBackgroundColor--darkTheme: $localNavButtonBackgroundColor-isSelected--darkTheme;
|
||||
$localDropdownFormNoteTextColor--darkTheme: #a2a2a2;
|
||||
$localDropdownWarningTextColor--darkTheme: $kuiTextColor--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;
|
||||
$localDatePickerButtonHoverBackgroundColor--darkTheme: rgba(#000000, 0.4);
|
||||
$localDatePickerCellSelectedTextColor--darkTheme: #ffffff;
|
||||
$localDatePickerCellSelectedBackgroundColor: $euiColorDarkShade;
|
||||
$localDatePickerCellSelectedTextColor: $euiTextColor;
|
||||
|
||||
// Spacing
|
||||
$localNavSideSpacing: 10px;
|
||||
|
|
|
|||
|
|
@ -22,10 +22,6 @@
|
|||
user-select: none;
|
||||
margin-right: 4px;
|
||||
color: $localNavBreadcrumbDelimiterColor;
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavBreadcrumbDelimiterColor--darkTheme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,22 +40,6 @@
|
|||
|
||||
color: $localNavButtonTextColor; /* 1 */
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavButtonTextColor--darkTheme;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $localNavButtonTextColor-isHover--darkTheme;
|
||||
background-color: $localDatePickerButtonHoverBackgroundColor--darkTheme;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focus($kuiFocusColor, $localDropdownBackgroundColor--darkTheme);
|
||||
|
||||
color: $localNavButtonTextColor--darkTheme; /* 1 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kuiDatePickerHeaderCell {
|
||||
|
|
@ -65,10 +49,6 @@
|
|||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiDatePickerRowCell {
|
||||
|
|
@ -134,26 +114,4 @@
|
|||
color: $localNavButtonTextColor-isHover;
|
||||
background-color: $localDatePickerButtonHoverBackgroundColor;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiTextColor--darkTheme;
|
||||
|
||||
&:focus {
|
||||
@include focus($kuiFocusColor, $localDropdownBackgroundColor--darkTheme);
|
||||
}
|
||||
|
||||
&.kuiDatePickerRowCellContent-isCurrent {
|
||||
color: $kuiLinkColor--darkTheme;
|
||||
}
|
||||
|
||||
&.kuiDatePickerRowCellContent-isSelected {
|
||||
color: $localDatePickerCellSelectedTextColor--darkTheme;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $localNavButtonTextColor-isHover--darkTheme;
|
||||
background-color: $localDatePickerButtonHoverBackgroundColor--darkTheme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,6 @@
|
|||
border-top: solid 1px $kuiColorLightGray;
|
||||
margin-bottom: 10px;
|
||||
line-height: 20px;
|
||||
|
||||
@include darkTheme {
|
||||
background-color: $localDropdownBackgroundColor--darkTheme;
|
||||
border-color: darken($localNavBackgroundColor--darkTheme, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalDropdownCloseButton {
|
||||
|
|
@ -19,10 +14,6 @@
|
|||
position: absolute;
|
||||
top: 1px;
|
||||
right: 5px;
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavTextColor--darkTheme !important; /* 1 */
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalDropdownPanels {
|
||||
|
|
@ -49,10 +40,6 @@
|
|||
margin-bottom: 12px;
|
||||
font-size: 18px;
|
||||
color: $localNavTextColor;
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalDropdownSection {
|
||||
|
|
@ -78,10 +65,6 @@
|
|||
font-weight: 700;
|
||||
margin-bottom: 0; /* 1 */
|
||||
color: $localNavTextColor;
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalDropdownHeader__actions {
|
||||
|
|
@ -102,15 +85,6 @@
|
|||
&:active {
|
||||
color: $kuiLinkColor-isHover;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiLinkColor--darkTheme;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $kuiLinkColor-isHover--darkTheme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalDropdownInput {
|
||||
|
|
@ -127,25 +101,11 @@
|
|||
&:focus {
|
||||
border-color: $kuiFocusColor;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiInputTextColor--darkTheme;
|
||||
background-color: $kuiInputBackgroundColor--darkTheme;
|
||||
border-color: $kuiInputBorderColor--darkTheme;
|
||||
|
||||
&:focus {
|
||||
border-color: $kuiFocusColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalDropdownFormNote {
|
||||
font-size: 14px;
|
||||
color: $localDropdownFormNoteTextColor;
|
||||
|
||||
@include darkTheme {
|
||||
color: $localDropdownFormNoteTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalDropdownWarning {
|
||||
|
|
@ -154,19 +114,11 @@
|
|||
font-size: 14px;
|
||||
color: $kuiTextColor;
|
||||
background-color: $localNavBackgroundColor;
|
||||
|
||||
@include darkTheme {
|
||||
color: $localDropdownWarningTextColor--darkTheme;
|
||||
background-color: $localDropdownWarningBackgroundColor--darkTheme;
|
||||
}
|
||||
border-left: solid 2px $euiColorDanger;
|
||||
}
|
||||
|
||||
.kuiLocalDropdownHelpText {
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: #2D2D2D;
|
||||
|
||||
@include darkTheme {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
color: $euiColorDarkShade;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,28 +42,6 @@
|
|||
color: $localNavButtonTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavButtonTextColor--darkTheme;
|
||||
|
||||
&:hover {
|
||||
background-color: $localNavButtonBackgroundColor-isHover--darkTheme;
|
||||
color: $localNavButtonTextColor-isHover--darkTheme;
|
||||
}
|
||||
|
||||
&.kuiLocalMenuItem-isSelected {
|
||||
background-color: $localNavButtonBackgroundColor-isSelected--darkTheme;
|
||||
border-color: darken($localNavBackgroundColor--darkTheme, 10%);
|
||||
color: $localNavButtonTextColor-isHover--darkTheme;
|
||||
}
|
||||
|
||||
&.kuiLocalMenuItem-isDisabled {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: $localNavButtonTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalMenuItem__icon {
|
||||
|
|
|
|||
|
|
@ -11,12 +11,6 @@
|
|||
background-color: $localNavBackgroundColor;
|
||||
line-height: $kuiLineHeight;
|
||||
border-bottom: solid 1px $kuiColorLightGray;
|
||||
|
||||
@include darkTheme {
|
||||
color: $localNavTextColor--darkTheme;
|
||||
background-color: $localNavBackgroundColor--darkTheme;
|
||||
border-color: darken($localNavBackgroundColor--darkTheme, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -25,12 +25,6 @@
|
|||
flex: 0 0 auto;
|
||||
border-radius: 0;
|
||||
border-left-width: 0;
|
||||
|
||||
@include darkTheme {
|
||||
border-left-width: 1px;
|
||||
border-left-color: $localNavBackgroundColor--darkTheme;
|
||||
border-right-color: $localNavBackgroundColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiLocalSearchAssistedInput {
|
||||
|
|
@ -83,13 +77,4 @@
|
|||
&:focus {
|
||||
@include focus($kuiFocusColor, $kuiBorderColor);
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $localSearchButtonTextColor--darkTheme;
|
||||
background-color: $localSearchButtonBackgroundColor--darkTheme;
|
||||
|
||||
&:focus {
|
||||
@include focus($kuiFocusColor, $localNavBackgroundColor--darkTheme);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,21 +23,12 @@
|
|||
&:hover:not(.kuiLocalTab-isDisabled),
|
||||
&:active:not(.kuiLocalTab-isDisabled) {
|
||||
color: $localTabTextColor-isHover;
|
||||
|
||||
@include darkTheme {
|
||||
color: $localTabTextColor-isHover--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
&.kuiLocalTab-isSelected {
|
||||
color: $localTabTextColor-isSelected;
|
||||
border-bottom-color: $localTabTextColor-isSelected;
|
||||
cursor: default;
|
||||
|
||||
@include darkTheme {
|
||||
color: $localTabTextColor-isSelected--darkTheme;
|
||||
border-bottom-color: $localTabTextColor-isSelected--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -52,8 +43,4 @@
|
|||
& + & {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $localTabTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
$menuButtonFontSize: 12px;
|
||||
|
||||
$menuButtonBasicTextColor: #5a5a5a;
|
||||
$menuButtonBasicBackgroundColor: #ffffff;
|
||||
$menuButtonBasicHoverBackgroundColor: #F2F2F2;
|
||||
$menuButtonBasicDisabledTextColor: #9B9B9B;
|
||||
$menuButtonBasicTextColor: $euiTextColor;
|
||||
$menuButtonBasicBackgroundColor: $euiColorEmptyShade;
|
||||
$menuButtonBasicHoverBackgroundColor: $euiColorLightestShade;
|
||||
$menuButtonBasicDisabledTextColor: $euiColorMediumShade;
|
||||
$menuButtonPrimaryTextColor: $euiColorGhost;
|
||||
$menuButtonPrimaryBackgroundColor: $euiColorPrimary;
|
||||
$menuButtonPrimaryHoverBackgroundColor: darken($euiColorPrimary, 10%);
|
||||
$menuButtonPrimaryDisabledBackgroundColor: $euiColorMediumShade;
|
||||
|
||||
$menuButtonPrimaryTextColor: #ffffff;
|
||||
$menuButtonPrimaryBackgroundColor: $kuiColorBlue;
|
||||
$menuButtonPrimaryHoverBackgroundColor: #006E8A;
|
||||
$menuButtonPrimaryDisabledBackgroundColor: #B6D6E0;
|
||||
|
||||
$menuButtonDangerTextColor: #D76051;
|
||||
$menuButtonDangerBackgroundColor: #ffffff;
|
||||
$menuButtonDangerHoverTextColor: #FFFFFF;
|
||||
$menuButtonDangerHoverBackgroundColor: #D76051;
|
||||
$menuButtonDangerHoverDisabledTextColor: #9B9B9B;
|
||||
$menuButtonDangerTextColor: $euiColorGhost;
|
||||
$menuButtonDangerBackgroundColor: $euiColorDanger;
|
||||
$menuButtonDangerHoverTextColor: $euiColorGhost;
|
||||
$menuButtonDangerHoverBackgroundColor: darken($euiColorDanger, 10%);
|
||||
$menuButtonDangerDisabledBackgroundColor: $euiColorMediumShade;
|
||||
$menuButtonDangerHoverDisabledTextColor: $euiColorGhost;
|
||||
|
||||
@import "menu_button";
|
||||
@import "menu_button_group";
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@
|
|||
|
||||
&:disabled {
|
||||
color: $menuButtonBasicDisabledTextColor;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -87,6 +88,7 @@
|
|||
|
||||
&:disabled {
|
||||
background-color: $menuButtonPrimaryDisabledBackgroundColor;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -106,6 +108,8 @@
|
|||
|
||||
&:disabled {
|
||||
color: $menuButtonDangerHoverDisabledTextColor;
|
||||
background-color: $menuButtonDangerDisabledBackgroundColor;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
$modalPadding: 10px;
|
||||
$modalBorderColor: $kuiColorLightGray;
|
||||
$modalBackgroundColor: #FFF;
|
||||
$modalOverlayBackground: rgba(#000000, 0.5);
|
||||
$modalBorderColor: $euiBorderColor;
|
||||
$modalBackgroundColor: $euiColorEmptyShade;
|
||||
$kuiModalDepth: 1000;
|
||||
|
||||
// Dark theme colors
|
||||
$modalBorderColor--darkTheme: #000;
|
||||
$modalBackgroundColor--darkTheme: #525252;
|
||||
$modalOverlayBackground: $euiColorEmptyShade;
|
||||
@if (lightness($euiTextColor) > 50) {
|
||||
$modalOverlayBackground: $euiColorLightShade;
|
||||
}
|
||||
|
||||
@import "modal_overlay";
|
||||
@import "modal";
|
||||
|
|
|
|||
|
|
@ -1,18 +1,12 @@
|
|||
.kuiModal {
|
||||
@include kuiBottomShadow;
|
||||
@include euiBottomShadow;
|
||||
|
||||
line-height: $kuiLineHeight;
|
||||
background-color: $modalBackgroundColor;
|
||||
border: 1px solid $modalBorderColor;
|
||||
border-radius: $kuiBorderRadius;
|
||||
box-shadow: $kuiBoxShadow;
|
||||
z-index: $kuiModalDepth + 1;
|
||||
animation: kuiModal $kuiAnimSpeedSlow $kuiAnimSlightBounce;
|
||||
|
||||
@include darkTheme {
|
||||
background-color: $modalBackgroundColor--darkTheme;
|
||||
border-color: $modalBorderColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiModal--confirmation {
|
||||
|
|
@ -27,18 +21,10 @@
|
|||
padding: $modalPadding;
|
||||
padding-left: $modalPadding * 2;
|
||||
border-bottom: $kuiBorderThin;
|
||||
|
||||
@include darkTheme {
|
||||
border-bottom-color: $modalBorderColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiModalHeader__title {
|
||||
font-size: $kuiTitleFontSize;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiModalHeaderCloseButton {
|
||||
|
|
@ -52,10 +38,6 @@
|
|||
|
||||
.kuiModalBodyText {
|
||||
font-size: 14px;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiModalFooter {
|
||||
|
|
|
|||
|
|
@ -9,5 +9,5 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 10vh;
|
||||
background-color: $modalOverlayBackground;
|
||||
background: transparentize($modalOverlayBackground, .2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,6 @@
|
|||
.kuiPagerText {
|
||||
font-size: $kuiFontSize;
|
||||
line-height: $kuiLineHeight;
|
||||
color: #5A5A5A;
|
||||
color: $euiColorDarkShade;
|
||||
white-space: nowrap; /* 1 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,9 +24,4 @@
|
|||
&.kuiPanelSimple--flexGrowZero {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
background-color: $kuiBackgroundColor--darkTheme;
|
||||
border-color: $kuiInputBorderColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,4 @@
|
|||
border-bottom: $kuiBorderThin;
|
||||
padding: $kuiSizeM;
|
||||
font-size: $kuiFontSize;
|
||||
|
||||
@include darkTheme {
|
||||
background-color: $kuiBackgroundColor--darkTheme;
|
||||
border-color: $kuiInputBorderColor--darkTheme;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,10 +46,6 @@
|
|||
border-left: $kuiSize solid transparent;
|
||||
border-right: $kuiSize solid transparent;
|
||||
border-bottom: $kuiSize solid $kuiBorderColor;
|
||||
|
||||
@include darkTheme {
|
||||
border-bottom-color: $kuiInputBorderColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
// This part of the arrow matches the panel.
|
||||
|
|
@ -64,20 +60,12 @@
|
|||
width: 0;
|
||||
border-left: $kuiSize solid transparent;
|
||||
border-right: $kuiSize solid transparent;
|
||||
border-bottom: $kuiSize solid #ffffff;
|
||||
|
||||
@include darkTheme {
|
||||
border-bottom-color: $kuiBackgroundColor--darkTheme;
|
||||
}
|
||||
border-bottom: $kuiSize solid $euiColorEmptyShade;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiPopover--withTitle .kuiPopover__panel:after {
|
||||
border-bottom-color: $kuiColorLightestShade;
|
||||
|
||||
@include darkTheme {
|
||||
border-bottom-color: $kuiBackgroundColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
// Positions the menu and arrow to the left of the parent.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
$tableCellPadding: 7px 8px 8px;
|
||||
$tableCellFontWeight: 400;
|
||||
$tableBackgroundColor: #FFF;
|
||||
$tableBackgroundColor: $euiColorEmptyShade;
|
||||
$tableHeaderTextColor: $kuiColorDarkGray;
|
||||
$tableCellExpandedBorderColor: #f0f0f0;
|
||||
$tableCellExpandedBorderColor: $euiColorEmptyShade;
|
||||
|
||||
@import "controlled_table";
|
||||
@import "table";
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
$tabBackgroundColor: #FFF;
|
||||
$tabHoverBackgroundColor: #F2F2F2;
|
||||
|
||||
// Dark theme colors
|
||||
$tabColor--darkTheme: $kuiTextColor--darkTheme;
|
||||
$tabBackgroundColor--darkTheme: #333333;
|
||||
$tabHoverBackgroundColor--darkTheme: $kuiBackgroundColor--darkTheme;
|
||||
$tabBorderColor--darkTheme: $kuiBackgroundColor--darkTheme;
|
||||
$tabBackgroundColor: transparent;
|
||||
$tabHoverBackgroundColor: $euiColorLightestShade;
|
||||
|
||||
@import "tabs";
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
.kuiTabs {
|
||||
display: flex;
|
||||
border-bottom: $kuiBorderThin;
|
||||
|
||||
@include darkTheme {
|
||||
border-bottom: 1px solid $tabBorderColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -26,12 +22,6 @@
|
|||
border-radius: 0; /* 1 */
|
||||
margin-bottom: -1px; /* 3 */
|
||||
|
||||
@include darkTheme {
|
||||
color: $tabColor--darkTheme;
|
||||
background-color: $tabBackgroundColor--darkTheme;
|
||||
border-color: $tabBorderColor--darkTheme;
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-left: none;
|
||||
|
||||
|
|
@ -53,22 +43,11 @@
|
|||
z-index: 1;
|
||||
color: $kuiLinkColor;
|
||||
border: 1px solid $kuiSelectedBorderColor !important;
|
||||
|
||||
@include darkTheme {
|
||||
color: $tabColor--darkTheme;
|
||||
background-color: $tabBackgroundColor--darkTheme;
|
||||
border-color: $tabBorderColor--darkTheme !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.kuiTab-isSelected) {
|
||||
color: $kuiLinkHoverColor;
|
||||
background-color: $tabHoverBackgroundColor;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiLinkColor-isHover--darkTheme;
|
||||
background-color: $tabHoverBackgroundColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
&.kuiTab-isSelected {
|
||||
|
|
@ -76,11 +55,5 @@
|
|||
color: $kuiFontColor;
|
||||
background-color: $tabBackgroundColor;
|
||||
border-bottom-color: $tabBackgroundColor;
|
||||
|
||||
@include darkTheme {
|
||||
color: $tabColor--darkTheme;
|
||||
background-color: $tabBackgroundColor--darkTheme;
|
||||
border-bottom-color: $tabBackgroundColor--darkTheme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
padding: 10px;
|
||||
height: 40px;
|
||||
background-color: #ffffff;
|
||||
background-color: $euiColorEmptyShade;
|
||||
}
|
||||
|
||||
.kuiToolBarFooterSection {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
min-width: 200px;
|
||||
padding: 4px 12px 5px 28px;
|
||||
font-family: $kuiFontFamily; /* 1 */
|
||||
background-color: #FFFFFF;
|
||||
background-color: $euiColorEmptyShade;
|
||||
color: $kuiFontColor;
|
||||
border-radius: $kuiBorderRadius;
|
||||
font-size: 1em;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
.kuiToolBarText {
|
||||
font-size: $kuiFontSize;
|
||||
line-height: $kuiLineHeight;
|
||||
color: #5A5A5A;
|
||||
color: $euiColorDarkShade;
|
||||
white-space: nowrap; /* 1 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
$typographyTitleFontSize: 22px;
|
||||
$typographyTitleFontSize: $euiSizeL;
|
||||
@import "typography";
|
||||
|
|
|
|||
|
|
@ -5,10 +5,6 @@
|
|||
margin: 0; /* 1 */
|
||||
font-weight: $kuiFontWeightRegular; /* 1 */
|
||||
font-size: $typographyTitleFontSize;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -18,10 +14,6 @@
|
|||
margin: 0; /* 1 */
|
||||
font-weight: $kuiFontWeightRegular; /* 1 */
|
||||
font-size: $kuiTitleFontSize;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -32,10 +24,6 @@
|
|||
font-weight: $kuiFontWeightBold; /* 1 */
|
||||
line-height: $kuiLineHeight;
|
||||
font-size: $kuiFontSize;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -46,10 +34,6 @@
|
|||
font-weight: $kuiFontWeightRegular; /* 1 */
|
||||
line-height: $kuiLineHeight;
|
||||
font-size: $kuiFontSize;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiSubText {
|
||||
|
|
@ -57,10 +41,6 @@
|
|||
font-weight: $kuiFontWeightRegular; /* 1 */
|
||||
line-height: $kuiLineHeight;
|
||||
font-size: $kuiSubTextFontSize;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiSubduedText {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
@mixin darkTheme {
|
||||
.theme-dark & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Enforce pointer when there's no href.
|
||||
* 2. Allow these styles to be applied to a button element.
|
||||
|
|
@ -27,14 +21,6 @@
|
|||
color: $kuiLinkHoverColor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiLinkColor--darkTheme;
|
||||
|
||||
&:hover {
|
||||
color: $kuiLinkColor--darkTheme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -54,10 +40,6 @@
|
|||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiTextColor--darkTheme !important; /* 1 */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -117,11 +99,6 @@
|
|||
@include kuiButtonActive { @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: $kuiFocusColor, $backgroundColor: $kuiFocusBackgroundColor) {
|
||||
z-index: 1; /* 1 */
|
||||
outline: none !important; /* 2 */
|
||||
|
|
@ -144,10 +121,6 @@
|
|||
font-weight: 400;
|
||||
line-height: $kuiLineHeight;
|
||||
color: $kuiFontColor;
|
||||
|
||||
@include darkTheme {
|
||||
color: $kuiInputTextColor--darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -155,8 +128,8 @@
|
|||
*/
|
||||
@mixin formControl($borderRadius: $kuiBorderRadius) {
|
||||
@include formControlBase;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid $kuiFormControlBorderColor;
|
||||
background-color: $euiFormBackgroundColor;
|
||||
border: 1px solid $euiFormBorderColor;
|
||||
border-radius: $borderRadius;
|
||||
transition: border-color $kuiInputTransitionTiming;
|
||||
min-height: $kuiFormInputHeight; /* 1 */
|
||||
|
|
@ -173,15 +146,6 @@
|
|||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
background-color: $kuiInputBackgroundColor--darkTheme;
|
||||
border-color: $kuiInputBorderColor--darkTheme;
|
||||
|
||||
&:focus {
|
||||
@include formControlFocus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -208,10 +172,6 @@
|
|||
&:-moz-focusring {
|
||||
text-shadow: 0 0 0; /* 3 */
|
||||
}
|
||||
|
||||
@include darkTheme {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z" fill="#CECECE"/></svg>'); /* 1 */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -299,7 +259,7 @@
|
|||
|
||||
@mixin selectOnStandoutBackground {
|
||||
.kuiSelect {
|
||||
border-color: #ffffff;
|
||||
border-color: $euiFormBackgroundColor;
|
||||
|
||||
@include kuiButtonFocus {
|
||||
@include formControlFocus;
|
||||
|
|
|
|||
|
|
@ -19,18 +19,8 @@ $kuiTextColor: $euiTextColor;
|
|||
$kuiLinkColor: $euiColorPrimary;
|
||||
$kuiLinkColor-isHover: darken($kuiLinkColor, 10%);
|
||||
$kuiInputTextColor: $kuiTextColor;
|
||||
$kuiInputBackgroundColor: $kuiColorWhite;
|
||||
$kuiInputBorderColor: $euiBorderColor;
|
||||
|
||||
// Dark theme colors
|
||||
|
||||
$kuiTextColor--darkTheme: #DDD;
|
||||
$kuiBackgroundColor--darkTheme: #222;
|
||||
$kuiLinkColor--darkTheme: #4DA1C0;
|
||||
$kuiLinkColor-isHover--darkTheme: #def2f6;
|
||||
$kuiInputTextColor--darkTheme: $kuiTextColor--darkTheme;
|
||||
$kuiInputBackgroundColor--darkTheme: #1b1b1b;
|
||||
$kuiInputBorderColor--darkTheme: #333;
|
||||
$kuiInputBackgroundColor: $euiFormBackgroundColor;
|
||||
$kuiInputBorderColor: $euiFormBorderColor;
|
||||
|
||||
// Colors
|
||||
|
||||
|
|
@ -43,7 +33,7 @@ $kuiFocusColor: $euiColorPrimary;
|
|||
$kuiFocusAltBackgroundColor: rgba($kuiInfoColor, 0.2);
|
||||
$kuiFocusDangerColor: $euiColorDanger;
|
||||
$kuiFocusWarningColor: $euiColorWarning;
|
||||
$kuiFocusBackgroundColor: #fff;
|
||||
$kuiFocusBackgroundColor: $euiColorEmptyShade;
|
||||
$kuiFontColor: $euiTextColor;
|
||||
$kuiSubduedTextColor: $euiColorDarkShade;
|
||||
$kuiLinkHoverColor: darken($euiColorPrimary, 10%);
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
@import 'font';
|
||||
@import 'timing';
|
||||
@import 'borders';
|
||||
@import 'shadows';
|
||||
@import 'z_index';
|
||||
@import 'animations';
|
||||
@import 'form';
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
// Shadows
|
||||
|
||||
$kuiBoxShadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
18
packages/kbn-ui-framework/src/kui_dark.scss
Normal file
18
packages/kbn-ui-framework/src/kui_dark.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// EUI global scope is used for KUI variables till fully deprecated
|
||||
@import '../../../node_modules/@elastic/eui/src/themes/k6/k6_globals';
|
||||
@import '../../../node_modules/@elastic/eui/src/themes/k6/k6_colors_dark';
|
||||
@import '../../../node_modules/@elastic/eui/src/global_styling/functions/index';
|
||||
@import '../../../node_modules/@elastic/eui/src/global_styling/variables/index';
|
||||
@import '../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
|
||||
@import '../../../node_modules/@elastic/eui/src/components/form/variables';
|
||||
@import '../../../node_modules/@elastic/eui/src/components/form/mixins';
|
||||
|
||||
// Configuration
|
||||
@import 'global_styling/variables/index';
|
||||
|
||||
// Core
|
||||
@import 'global_styling/mixins/index';
|
||||
@import 'global_styling/reset/index';
|
||||
|
||||
// Components
|
||||
@import 'components/index';
|
||||
|
|
@ -9,12 +9,10 @@
|
|||
|
||||
// Configuration
|
||||
@import 'global_styling/variables/index';
|
||||
@import 'themes/light_theme/index';
|
||||
|
||||
// Core
|
||||
@import 'global_styling/mixins/index';
|
||||
@import 'global_styling/reset/index';
|
||||
@import 'global_styling/utilities/index';
|
||||
|
||||
// Components
|
||||
@import 'components/index';
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
const theme = require('../theme');
|
||||
|
||||
// Kibana UI Framework
|
||||
require('@kbn/ui-framework/dist/ui_framework.css');
|
||||
require('@kbn/ui-framework/dist/kui_light.css');
|
||||
|
||||
// Elastic UI Framework, light theme
|
||||
const euiThemeLight = require('!!raw-loader!@elastic/eui/dist/eui_theme_k6_light.css');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue