From 37a5731c78582d70bff2e45cdfc960282e7663ad Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Sun, 12 Nov 2017 10:01:57 -0800 Subject: [PATCH 01/35] Autoload eui_theme_light.css. Remove EUI dependency. --- src/ui/public/autoload/styles.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/ui/public/autoload/styles.js b/src/ui/public/autoload/styles.js index 929e26ba69b65..60b14e231c056 100644 --- a/src/ui/public/autoload/styles.js +++ b/src/ui/public/autoload/styles.js @@ -1,6 +1,9 @@ // Kibana UI Framework require('../../../../ui_framework/dist/ui_framework.css'); +// Elastic UI Framework +require('@elastic/eui/dist/eui_theme_light.css'); + // All Kibana styles inside of the /styles dir const context = require.context('../styles', false, /[\/\\](?!mixins|variables|_|\.)[^\/\\]+\.less/); context.keys().forEach(key => context(key)); From 4903b95721c7b2675cd221aeecf2619cb7df43b1 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 20 Jul 2017 10:08:01 -0700 Subject: [PATCH 02/35] Remove naked element selectors from base.less. --- src/ui/public/styles/base.less | 51 ---------------------------------- 1 file changed, 51 deletions(-) diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less index c5ed81db876fd..7adfd7f66b487 100644 --- a/src/ui/public/styles/base.less +++ b/src/ui/public/styles/base.less @@ -6,17 +6,6 @@ @import "./react-select"; @import "./pui_react"; -html, -body { - .flex-parent(); - height: 100%; - margin: 0; -} - -label > small { - font-weight: normal; -} - .small { font-size: 0.9em !important; } @@ -52,11 +41,6 @@ label > small { font-family: @font-family-monospace; } -code { - word-break: break-all; - word-wrap: break-word; -} - ul.navbar-inline li { display: inline; } @@ -123,15 +107,6 @@ notifications { margin-bottom: 0px!important; } -a { - // overriden by next rule for a tags that actually have an href - cursor: default; -} - -.link, [ng-click], [clip-copy], [href], [confirm-click] { - cursor: pointer; -} - .application, .app-container { > * { @@ -236,16 +211,6 @@ kbn-table, .kbn-table { } } -//== Generic Table -table { - td .fa { - // font-awesome's override of the line-height usually doesn't - // cauase problems, but in the table it pushes the icon to the - // top of the row - line-height: @line-height-base; - } -} - //== SavedObjectFinder saved-object-finder, paginated-selectable-list { @@ -358,10 +323,6 @@ input[type="checkbox"], } } -textarea { - resize: vertical; -} - .field-collapse-toggle { color: @field-collapse-toggle-color; margin-left: 10px !important; @@ -409,18 +370,6 @@ style-compile { } } -mark, .mark { - background-color: @mark-bg; - border-radius: 2px; -} - -fieldset { - margin: @form-group-margin-bottom; - padding: @form-group-margin-bottom; - border: 1px solid @input-border; - border-radius: @input-border-radius-base; -} - [fixed-scroll] { overflow-x: auto; padding-bottom: 0px; From cb4dd168e165e32375a4c3475916d16579047d7b Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 19 Jul 2017 14:57:01 -0700 Subject: [PATCH 03/35] Remove Bootstrap resets. --- src/ui/public/styles/bootstrap/code.less | 69 --- src/ui/public/styles/bootstrap/forms.less | 142 ------ src/ui/public/styles/bootstrap/normalize.less | 424 ------------------ .../public/styles/bootstrap/scaffolding.less | 161 ------- src/ui/public/styles/bootstrap/tables.less | 14 - src/ui/public/styles/bootstrap/type.less | 167 ------- ui_framework/dist/ui_framework.css | 77 ++++ 7 files changed, 77 insertions(+), 977 deletions(-) diff --git a/src/ui/public/styles/bootstrap/code.less b/src/ui/public/styles/bootstrap/code.less index a08b4d48c4c87..e69de29bb2d1d 100644 --- a/src/ui/public/styles/bootstrap/code.less +++ b/src/ui/public/styles/bootstrap/code.less @@ -1,69 +0,0 @@ -// -// Code (inline and block) -// -------------------------------------------------- - - -// Inline and block code styles -code, -kbd, -pre, -samp { - font-family: @font-family-monospace; -} - -// Inline code -code { - padding: 2px 4px; - font-size: 90%; - color: @code-color; - background-color: @code-bg; - border-radius: @border-radius-base; -} - -// User input typically entered via keyboard -kbd { - padding: 2px 4px; - font-size: 90%; - color: @kbd-color; - background-color: @kbd-bg; - border-radius: @border-radius-small; - box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); - - kbd { - padding: 0; - font-size: 100%; - font-weight: bold; - box-shadow: none; - } -} - -// Blocks of code -pre { - display: block; - padding: ((@line-height-computed - 1) / 2); - margin: 0 0 (@line-height-computed / 2); - font-size: (@font-size-base - 1); // 14px to 13px - line-height: @line-height-base; - word-break: break-all; - word-wrap: break-word; - color: @pre-color; - background-color: @pre-bg; - border: 1px solid @pre-border-color; - border-radius: @border-radius-base; - - // Account for some code outputs that place code tags in pre tags - code { - padding: 0; - font-size: inherit; - color: inherit; - white-space: pre-wrap; - background-color: transparent; - border-radius: 0; - } -} - -// Enable scrollable blocks of code -.pre-scrollable { - max-height: @pre-scrollable-max-height; - overflow-y: scroll; -} diff --git a/src/ui/public/styles/bootstrap/forms.less b/src/ui/public/styles/bootstrap/forms.less index aaee6efa3f34d..4b2fc50a7bde0 100644 --- a/src/ui/public/styles/bootstrap/forms.less +++ b/src/ui/public/styles/bootstrap/forms.less @@ -3,92 +3,6 @@ // -------------------------------------------------- -// Normalize non-controls -// -// Restyle and baseline non-control form elements. - -fieldset { - padding: 0; - margin: 0; - border: 0; - // Chrome and Firefox set a `min-width: min-content;` on fieldsets, - // so we reset that to ensure it behaves more like a standard block element. - // See https://github.com/twbs/bootstrap/issues/12359. - min-width: 0; -} - -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: @line-height-computed; - font-size: (@font-size-base * 1.5); - line-height: inherit; - color: @legend-color; - border: 0; - border-bottom: 1px solid @legend-border-color; -} - -label { - display: inline-block; - max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) - margin-bottom: 5px; - font-weight: bold; -} - - -// Normalize form controls -// -// While most of our form styles require extra classes, some basic normalization -// is required to ensure optimum display with or without those classes to better -// address browser inconsistencies. - -// Override content-box in Normalize (* isn't specific enough) -input[type="search"] { - .box-sizing(border-box); -} - -// Position radios and checkboxes better -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - margin-top: 1px \9; // IE8-9 - line-height: normal; -} - -input[type="file"] { - display: block; -} - -// Make range inputs behave like textual form controls -input[type="range"] { - display: block; - width: 100%; -} - -// Make multiple select elements height not fixed -select[multiple], -select[size] { - height: auto; -} - -// Focus for file, radio, and checkbox -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus { - .tab-focus(); -} - -// Adjust output element -output { - display: block; - padding-top: (@padding-base-vertical + 1); - font-size: @font-size-base; - line-height: @line-height-base; - color: @input-color; -} - - // Common form controls // // Shared size and type resets for form controls. Apply `.form-control` to any @@ -161,50 +75,6 @@ output { } } - -// Search inputs in iOS -// -// This overrides the extra rounded corners on search inputs in iOS so that our -// `.form-control` class can properly style them. Note that this cannot simply -// be added to `.form-control` as it's not specific enough. For details, see -// https://github.com/twbs/bootstrap/issues/11586. - -input[type="search"] { - -webkit-appearance: none; -} - - -// Special styles for iOS temporal inputs -// -// In Mobile Safari, setting `display: block` on temporal inputs causes the -// text within the input to become vertically misaligned. As a workaround, we -// set a pixel line-height that matches the given height of the input, but only -// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 -// -// Note that as of 8.3, iOS doesn't support `datetime` or `week`. - -@media screen and (-webkit-min-device-pixel-ratio: 0) { - input[type="date"], - input[type="time"], - input[type="datetime-local"], - input[type="month"] { - &.form-control { - line-height: @input-height-base; - } - - &.input-sm, - .input-group-sm & { - line-height: @input-height-small; - } - - &.input-lg, - .input-group-lg & { - line-height: @input-height-large; - } - } -} - - // Form groups // // Designed to help with the organization and spacing of vertical forms. For @@ -265,18 +135,6 @@ input[type="search"] { margin-left: 10px; // space out consecutive inline controls } -// Apply same disabled cursor tweak as for inputs -// Some special care is needed because