diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000000..fcb38e9ff339 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +# use stylelint +*.scss diff --git a/.sass-lint.yml b/.sass-lint.yml deleted file mode 100644 index c399da95df2e..000000000000 --- a/.sass-lint.yml +++ /dev/null @@ -1,84 +0,0 @@ -files: - include: - - 'src/legacy/core_plugins/metrics/**/*.s+(a|c)ss' - - 'src/plugins/index_pattern_management/**/*.s+(a|c)ss' - - 'src/plugins/timeline/**/*.s+(a|c)ss' - - 'src/plugins/vis_type_vislib/**/*.s+(a|c)ss' - - 'src/plugins/vis_type_vega/**/*.s+(a|c)ss' - - 'src/plugins/vis_type_xy/**/*.s+(a|c)ss' -rules: - quotes: - - 2 - - - style: 'single' - # } else { style on one line, like our JS - brace-style: - - 2 - - - style: '1tbs' - variable-name-format: - - 2 - - - convention: 'camelcase' - # Needs regex, right now we ignore - class-name-format: 0 - # Order how you please - property-sort-order: 0 - hex-notation: - - 2 - - - style: 'uppercase' - mixin-name-format: - - 2 - - - allow-leading-underscore: false - convention: 'camelcase' - # Use none instead of 0 for no border - border-zero: - - 2 - - convention: 'none' - force-element-nesting: 0 - # something { not something{ - space-before-brace: - - 2 - force-pseudo-nesting: 0 - # 2 spaces for indentation - indentation: 2 - function-name-format: - - 2 - - - allow-leading-underscore: false - convention: 'camelcase' - # This removes the need for ::hover - pseudo-element: 0 - # ($var / 2) rather than ($var/2) - space-around-operator: 2 - # We minify css, so this doesn't apply - no-css-comments: 0 - # We use _ (underscores) for import path that don't directly compile - clean-import-paths: 0 - # Allows input[type=search] - force-attribute-nesting: 0 - no-qualifying-elements: - - 2 - - - # Allows input[type=search] - allow-element-with-attribute: 1 - # Files can end without a newline - final-newline: 0 - # We use some rare duplicate property values for browser variance - no-duplicate-properties: - - 2 - - - exclude: - - 'font-size' - - 'word-break' - # Put a line-break between sections of CSS, but allow quicky one-liners for legibility - empty-line-between-blocks: - - 2 - - - allow-single-line-rulesets: 1 - # Warns are nice for deprecations and development - no-warn: 0 - # Transition all is useful in certain situations and there's no recent info to suggest slowdown - no-transition-all: 0 diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 000000000000..b3fdf275c9a4 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,2 @@ +build +target \ No newline at end of file diff --git a/.stylelintrc.yml b/.stylelintrc.yml new file mode 100644 index 000000000000..8a70ee1dd008 --- /dev/null +++ b/.stylelintrc.yml @@ -0,0 +1,19 @@ +extends: + - stylelint-config-standard-scss +rules: + # while we still use node-sass, only legacy rgb() notation is allowed + color-function-notation: "legacy" + # recommended to turn off descending specificity since we use a lot of nesting: + # https://stylelint.io/user-guide/rules/list/no-descending-specificity/ + no-descending-specificity: null + # need to use global function/value names from EUI + function-name-case: null + value-keyword-case: null + scss/no-global-function-names: null + # camelCase names + keyframes-name-pattern: "^[a-z][a-zA-Z0-9_-]+$" + selector-class-pattern: "^[a-z][a-zA-Z0-9_-]+$" + selector-id-pattern: "^[a-z][a-zA-Z0-9_-]+$" + scss/at-mixin-pattern: "^[a-z][a-zA-Z0-9_-]+$" + scss/at-function-pattern: "^[a-z][a-zA-Z0-9_-]+$" + scss/dollar-variable-pattern: "^[a-z][a-zA-Z0-9_-]+$" diff --git a/examples/search_examples/public/index.scss b/examples/search_examples/public/index.scss index e69de29bb2d1..ff7112406eac 100644 --- a/examples/search_examples/public/index.scss +++ b/examples/search_examples/public/index.scss @@ -0,0 +1 @@ +/* stylelint-disable no-empty-source */ diff --git a/package.json b/package.json index 4f8543f2d249..65b153af9de9 100644 --- a/package.json +++ b/package.json @@ -58,9 +58,9 @@ "start": "node scripts/opensearch_dashboards --dev", "debug": "node --nolazy --inspect scripts/opensearch_dashboards --dev", "debug-break": "node --nolazy --inspect-brk scripts/opensearch_dashboards --dev", - "lint": "yarn run lint:es && yarn run lint:sass", + "lint": "yarn run lint:es && yarn run lint:style", "lint:es": "node scripts/eslint", - "lint:sass": "node scripts/sasslint", + "lint:style": "node scripts/stylelint", "makelogs": "node scripts/makelogs", "uiFramework:start": "cd packages/osd-ui-framework && yarn docSiteStart", "uiFramework:build": "cd packages/osd-ui-framework && yarn docSiteBuild", @@ -77,13 +77,10 @@ "resolutions": { "**/@types/node": "^14.17.32", "**/ansi-regex": "^5.0.1", - "**/front-matter": "^4.0.2", "**/glob-parent": "^6.0.0", "**/hoist-non-react-statics": "^3.3.2", "**/json-schema": "^0.4.0", "**/kind-of": ">=6.0.3", - "**/merge": "^2.1.1", - "**/minimist": "^1.2.5", "**/node-jose": "^2.1.0", "**/qs": "^6.10.3", "**/trim": "^0.0.3", @@ -428,11 +425,12 @@ "regenerate": "^1.4.0", "reselect": "^4.0.0", "resize-observer-polyfill": "^1.5.1", - "sass-lint": "^1.12.1", "selenium-webdriver": "^4.0.0-alpha.7", "simple-git": "^3.4.0", "sinon": "^7.4.2", "strip-ansi": "^6.0.0", + "stylelint": "^14.5.2", + "stylelint-config-standard-scss": "^3.0.0", "supertest": "^6.2.2", "supertest-as-promised": "^4.0.2", "tape": "^5.0.1", diff --git a/packages/osd-optimizer/src/__fixtures__/mock_repo/plugins/bar/public/legacy/styles.scss b/packages/osd-optimizer/src/__fixtures__/mock_repo/plugins/bar/public/legacy/styles.scss index 7fa8383ec239..702fac3d1ed2 100644 --- a/packages/osd-optimizer/src/__fixtures__/mock_repo/plugins/bar/public/legacy/styles.scss +++ b/packages/osd-optimizer/src/__fixtures__/mock_repo/plugins/bar/public/legacy/styles.scss @@ -1,4 +1,4 @@ -@import "./other_styles.scss"; +@import "./other_styles"; body { width: $globalStyleConstant; diff --git a/packages/osd-plugin-generator/template/public/index.scss b/packages/osd-plugin-generator/template/public/index.scss index e69de29bb2d1..ff7112406eac 100644 --- a/packages/osd-plugin-generator/template/public/index.scss +++ b/packages/osd-plugin-generator/template/public/index.scss @@ -0,0 +1 @@ +/* stylelint-disable no-empty-source */ diff --git a/packages/osd-ui-framework/doc_site/src/components/guide/_guide.scss b/packages/osd-ui-framework/doc_site/src/components/guide/_guide.scss index 64c5a63cf207..81b6196a1311 100644 --- a/packages/osd-ui-framework/doc_site/src/components/guide/_guide.scss +++ b/packages/osd-ui-framework/doc_site/src/components/guide/_guide.scss @@ -64,25 +64,25 @@ html { background-color: $euiColorEmptyShade; } - .guideContentPage__hint { - position: absolute; - top: 0; - left: 0; - width: 100%; - max-width: 260px; - max-height: 500px; - padding: 30px; - margin: 20px; - border-radius: 4px; - background-color: $euiColorLightestShade; - line-height: $guideLineHeight; - } +.guideContentPage__hint { + position: absolute; + top: 0; + left: 0; + width: 100%; + max-width: 260px; + max-height: 500px; + padding: 30px; + margin: 20px; + border-radius: 4px; + background-color: $euiColorLightestShade; + line-height: $guideLineHeight; +} - .guideContentPage__content { - width: 100%; - max-width: 800px; - padding: 30px 60px; - } +.guideContentPage__content { + width: 100%; + max-width: 800px; + padding: 30px 60px; +} .guideHintArrow { position: absolute; diff --git a/packages/osd-ui-framework/doc_site/src/components/guide_code/_guide_code.scss b/packages/osd-ui-framework/doc_site/src/components/guide_code/_guide_code.scss index 14fdae066c11..d62950f0923d 100644 --- a/packages/osd-ui-framework/doc_site/src/components/guide_code/_guide_code.scss +++ b/packages/osd-ui-framework/doc_site/src/components/guide_code/_guide_code.scss @@ -1,6 +1,6 @@ .guideCode { padding: 2px 4px; - font-family: 'Ubuntu Mono', monospace; + font-family: "Ubuntu Mono", monospace; background-color: $euiColorLightestShade; color: $euiColorDarkShade; } diff --git a/packages/osd-ui-framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss b/packages/osd-ui-framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss index a4dc2eecc57d..d76adab84f2d 100644 --- a/packages/osd-ui-framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss +++ b/packages/osd-ui-framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss @@ -22,39 +22,39 @@ } } - .guideCodeViewer__header { - padding: 0 20px 6px; - line-height: $guideLineHeight; - border-bottom: $euiBorderThin; - font-size: 14px; - font-weight: 700; - margin-bottom: 10px; - } +.guideCodeViewer__header { + padding: 0 20px 6px; + line-height: $guideLineHeight; + border-bottom: $euiBorderThin; + font-size: 14px; + font-weight: 700; + margin-bottom: 10px; +} - .guideCodeViewer__closeButton { - position: absolute; - top: 0; - right: 10px; - cursor: pointer; - padding: 10px; - border-radius: 3px; - color: $guideTextColor; - - &:hover { - color: $guideLinkHoverColor; - } +.guideCodeViewer__closeButton { + position: absolute; + top: 0; + right: 10px; + cursor: pointer; + padding: 10px; + border-radius: 3px; + color: $guideTextColor; + + &:hover { + color: $guideLinkHoverColor; } +} - .guideCodeViewer__title { - padding: 0 20px 6px; - border-bottom: $euiBorderThin; - line-height: $guideLineHeight; - font-size: 14px; - } +.guideCodeViewer__title { + padding: 0 20px 6px; + border-bottom: $euiBorderThin; + line-height: $guideLineHeight; + font-size: 14px; +} - .guideCodeViewer__content { - margin: 0 0 16px; - } +.guideCodeViewer__content { + margin: 0 0 16px; +} // HLJS @@ -64,7 +64,7 @@ color: $euiColorDarkShade; font-size: 14px; line-height: 1.3; - font-family: 'Ubuntu Mono', monospace; + font-family: "Ubuntu Mono", monospace; } .hljs-keyword { diff --git a/packages/osd-ui-framework/doc_site/src/components/guide_components.scss b/packages/osd-ui-framework/doc_site/src/components/guide_components.scss index 42e55ac6a00f..fc2a1b62056d 100644 --- a/packages/osd-ui-framework/doc_site/src/components/guide_components.scss +++ b/packages/osd-ui-framework/doc_site/src/components/guide_components.scss @@ -1,3 +1,15 @@ +@import "guide/guide"; +@import "guide_code/guide_code"; +@import "guide_code_viewer/guide_code_viewer"; +@import "guide_demo/guide_demo"; +@import "guide_link/guide_link"; +@import "guide_nav/guide_nav"; +@import "guide_page/guide_page"; +@import "guide_page_side_nav/guide_page_side_nav"; +@import "guide_sandbox/guide_sandbox"; +@import "guide_section/guide_section"; +@import "guide_text/guide_text"; + $guideVerticalRhythm: $euiSize; $guideLineHeight: $euiSizeL; $guideNavHeight: 60px; @@ -47,16 +59,3 @@ $guideNormalBreakpoint: 1900px; background-color: transparent; } } - - -@import "guide/guide"; -@import "guide_code/guide_code"; -@import "guide_code_viewer/guide_code_viewer"; -@import "guide_demo/guide_demo"; -@import "guide_link/guide_link"; -@import "guide_nav/guide_nav"; -@import "guide_page/guide_page"; -@import "guide_page_side_nav/guide_page_side_nav"; -@import "guide_sandbox/guide_sandbox"; -@import "guide_section/guide_section"; -@import "guide_text/guide_text"; diff --git a/packages/osd-ui-framework/doc_site/src/components/guide_demo/_guide_demo.scss b/packages/osd-ui-framework/doc_site/src/components/guide_demo/_guide_demo.scss index e97cb0613995..050cdeaa6f94 100644 --- a/packages/osd-ui-framework/doc_site/src/components/guide_demo/_guide_demo.scss +++ b/packages/osd-ui-framework/doc_site/src/components/guide_demo/_guide_demo.scss @@ -10,14 +10,14 @@ .guideDemo__highlightGrid { .kuiFlexItem { - background: transparentize($euiColorPrimary, .9); + background: transparentize($euiColorPrimary, 0.9); padding: 16px; } } .guideDemo__highlightGridWrap { .kuiFlexItem div { - background: transparentize($euiColorPrimary, .9); + background: transparentize($euiColorPrimary, 0.9); padding: 16px; } } diff --git a/packages/osd-ui-framework/doc_site/src/components/guide_nav/_guide_nav.scss b/packages/osd-ui-framework/doc_site/src/components/guide_nav/_guide_nav.scss index a0bfd08957e8..ad4882eb6efc 100644 --- a/packages/osd-ui-framework/doc_site/src/components/guide_nav/_guide_nav.scss +++ b/packages/osd-ui-framework/doc_site/src/components/guide_nav/_guide_nav.scss @@ -16,10 +16,12 @@ height 0.3s ease, box-shadow 0.3s linear; overflow: hidden; + @include euiBottomShadowMedium; &.is-guide-nav-open { height: 100%; + @include euiBottomShadow; } @@ -28,69 +30,69 @@ } } - .guideNav__showButton { - position: fixed; - z-index: 9999; - top: 5px; - right: 5px; - font-size: 10px; - opacity: 0; - transition: opacity $guideChromeTransition; +.guideNav__showButton { + position: fixed; + z-index: 9999; + top: 5px; + right: 5px; + font-size: 10px; + opacity: 0; + transition: opacity $guideChromeTransition; + + .is-chrome-hidden & { + opacity: 1; + } +} - .is-chrome-hidden & { - opacity: 1; - } +.guideNav__header { + position: relative; + flex: 0 0 auto; + display: flex; + align-items: center; + height: 60px; + padding: 0 20px; +} + +.guideNav__menu { + cursor: pointer; + margin-right: 10px; + padding: 10px; + border-radius: 3px; + + &.is-menu-button-pinned, + &:hover { + background-color: rgb(black, 0.05); } - .guideNav__header { - position: relative; - flex: 0 0 auto; - display: flex; - align-items: center; - height: 60px; - padding: 0 20px; + &:active { + background-color: rgb(black, 0.2); + box-shadow: inset 0 2px 8px rgb(black, 0.1); } +} - .guideNav__menu { - cursor: pointer; - margin-right: 10px; - padding: 10px; - border-radius: 3px; - - &.is-menu-button-pinned, - &:hover { - background-color: rgba(black, 0.05); - } - - &:active { - background-color: rgba(black, 0.2); - box-shadow: inset 0 2px 8px rgba(black, 0.1); - } - } - - .guideNav__title { - color: $guideTextColor; - text-decoration: none; - font-size: 18px; - } - - .guideNav__version { - margin-left: 10px; - font-weight: 300; - font-size: 14px; - } - - // TODO: [RENAMEME] replacement background-image might be needed - .guideNav__opensearchLogo { - position: absolute; - background-image: url("images/react-logo.svg"); - width: 106px; - height: 36px; - background-repeat: no-repeat; - background-size: contain; - left: 50%; - transform: translateX(-50%); - } +.guideNav__title { + color: $guideTextColor; + text-decoration: none; + font-size: 18px; +} + +.guideNav__version { + margin-left: 10px; + font-weight: 300; + font-size: 14px; +} + +// TODO: [RENAMEME] replacement background-image might be needed +.guideNav__opensearchLogo { + position: absolute; + background-image: url("images/react-logo.svg"); + width: 106px; + height: 36px; + background-repeat: no-repeat; + background-size: contain; + left: 50%; + transform: translateX(-50%); +} .guideNavSearch { margin: 0 20px; @@ -111,6 +113,7 @@ */ .guideNavItemsContainer { @include scrollbar; + display: flex; overflow: auto; min-height: calc(100vh - #{$guideNavHeight + 40px}); /* 1 */ @@ -118,9 +121,8 @@ .guideNavItems { display: flex; - flex-direction: column; + flex-flow: column wrap; align-items: flex-start; - flex-wrap: wrap; align-content: flex-start; } @@ -147,23 +149,23 @@ align-items: center; } - .guideNavItem__link { - color: $guideTextColor; - text-decoration: none; +.guideNavItem__link { + color: $guideTextColor; + text-decoration: none; - &:hover { - color: $guideLinkHoverColor; - } + &:hover { + color: $guideLinkHoverColor; } +} - .guideNavItem__reactLogo { - margin-left: 10px; - background-image: url("images/react-logo.svg"); - width: 24px; - height: 22px; - background-repeat: no-repeat; - background-size: contain; - } +.guideNavItem__reactLogo { + margin-left: 10px; + background-image: url("images/react-logo.svg"); + width: 24px; + height: 22px; + background-repeat: no-repeat; + background-size: contain; +} .guideNavNoItems { color: rgba($guideTextColor, 0.5); @@ -179,7 +181,6 @@ .guideNavPaginationButton { appearance: none; - border: none; line-height: 10px; padding: 4px 20px; color: $guideLinkHoverColor; diff --git a/packages/osd-ui-framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss b/packages/osd-ui-framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss index 747464719e84..b9063dac5f5f 100644 --- a/packages/osd-ui-framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss +++ b/packages/osd-ui-framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss @@ -15,30 +15,30 @@ } } - .guidePageSideNav__title { - padding-bottom: 10px; - margin-bottom: 7px; - font-size: 22px; - line-height: $guideLineHeight; - opacity: 0.8; - } +.guidePageSideNav__title { + padding-bottom: 10px; + margin-bottom: 7px; + font-size: 22px; + line-height: $guideLineHeight; + opacity: 0.8; +} - .guidePageSideNavMenu { - line-height: $guideLineHeight; - } +.guidePageSideNavMenu { + line-height: $guideLineHeight; +} - .guidePageSideNavMenu__item { - & + & { - margin-top: 6px; - } - } +.guidePageSideNavMenu__item { + & + & { + margin-top: 6px; + } +} - .guidePageSideNavMenu__itemLink { - cursor: pointer; - color: $guideTextColor; - text-decoration: none; +.guidePageSideNavMenu__itemLink { + cursor: pointer; + color: $guideTextColor; + text-decoration: none; - &:hover { - color: $guideLinkHoverColor; - } - } + &:hover { + color: $guideLinkHoverColor; + } +} diff --git a/packages/osd-ui-framework/doc_site/src/components/guide_section/_guide_section.scss b/packages/osd-ui-framework/doc_site/src/components/guide_section/_guide_section.scss index 62f3f1b1686e..6263486876ed 100644 --- a/packages/osd-ui-framework/doc_site/src/components/guide_section/_guide_section.scss +++ b/packages/osd-ui-framework/doc_site/src/components/guide_section/_guide_section.scss @@ -2,38 +2,37 @@ margin-bottom: 40px; } - .guideSection__header { - display: flex; - justify-content: space-between; - align-items: center; - padding-bottom: 2px; - line-height: $guideLineHeight; - } +.guideSection__header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 2px; + line-height: $guideLineHeight; +} - .guideSection__title { - font-size: 18px; - font-weight: 700; - } +.guideSection__title { + font-size: 18px; + font-weight: 700; +} - .guideSection__sourceButton { - appearance: none; - border: none; - line-height: 10px; - padding: 4px 10px; - color: $guideLinkHoverColor; - background-color: $euiColorEmptyShade; - border: 1px solid $guideLinkHoverColor; - border-radius: 3px; - cursor: pointer; - transform: translateX(0); - transition: transform $guideChromeTransition; +.guideSection__sourceButton { + appearance: none; + line-height: 10px; + padding: 4px 10px; + color: $guideLinkHoverColor; + background-color: $euiColorEmptyShade; + border: 1px solid $guideLinkHoverColor; + border-radius: 3px; + cursor: pointer; + transform: translateX(0); + transition: transform $guideChromeTransition; - &:hover, - &:active { - background-color: $euiColorLightestShade; - } + &:hover, + &:active { + background-color: $euiColorLightestShade; + } - .is-chrome-hidden & { - transform: translateX(60px); - } + .is-chrome-hidden & { + transform: translateX(60px); } +} diff --git a/packages/osd-ui-framework/doc_site/src/main.scss b/packages/osd-ui-framework/doc_site/src/main.scss index 266a9eb7a933..6b114c693b47 100644 --- a/packages/osd-ui-framework/doc_site/src/main.scss +++ b/packages/osd-ui-framework/doc_site/src/main.scss @@ -1,7 +1,7 @@ -@import '~@elastic/eui/src/themes/eui/eui_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'; +@import "~@elastic/eui/src/themes/eui/eui_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"; diff --git a/packages/osd-ui-framework/src/components/button/_button.scss b/packages/osd-ui-framework/src/components/button/_button.scss index 9766e01d2ef4..e6abbd3e91e8 100644 --- a/packages/osd-ui-framework/src/components/button/_button.scss +++ b/packages/osd-ui-framework/src/components/button/_button.scss @@ -19,22 +19,21 @@ @include kuiButtonDisabled { cursor: not-allowed; - opacity: .5; + opacity: 0.5; } @include kuiButtonActive { transform: translateY(1px); } - } - /** +/** * 1. Solves whitespace problems introduced by inline elements. */ - .kuiButton__inner { - display: flex; /* 1 */ - align-items: center; /* 1 */ - } +.kuiButton__inner { + display: flex; /* 1 */ + align-items: center; /* 1 */ +} .kuiButton--small { font-size: $buttonSmallFontSize; @@ -130,13 +129,14 @@ @include kuiButtonFocus { @include focus($euiColorDanger); + color: $euiColorDanger; } @include kuiButtonHoverAndActive { color: darken($euiColorDanger, 10%) !important; border: solid 1px darken($euiColorDanger, 10%); - background-color: transparentize($euiColorDanger, .9); + background-color: transparentize($euiColorDanger, 0.9); } } @@ -149,6 +149,7 @@ @include kuiButtonFocus { @include focus($kuiFocusWarningColor); + color: $buttonDefaultTextColor; } @@ -183,7 +184,7 @@ @include kuiButtonHoverAndActive { color: darken($euiColorPrimary, 10%) !important; /* 1 */ border: solid 1px darken($euiColorPrimary, 10%); - background-color: transparentize($euiColorPrimary, .9); + background-color: transparentize($euiColorPrimary, 0.9); text-decoration: underline; } } diff --git a/packages/osd-ui-framework/src/components/button/button_group/_button_group.scss b/packages/osd-ui-framework/src/components/button/button_group/_button_group.scss index 6566413037e1..1b6629cc4ec5 100644 --- a/packages/osd-ui-framework/src/components/button/button_group/_button_group.scss +++ b/packages/osd-ui-framework/src/components/button/button_group/_button_group.scss @@ -23,10 +23,7 @@ } > .kuiButton:only-child { - border-top-right-radius: $kuiBorderRadius; - border-bottom-right-radius: $kuiBorderRadius; - border-top-left-radius: $kuiBorderRadius; - border-bottom-left-radius: $kuiBorderRadius; + border-radius: $kuiBorderRadius $kuiBorderRadius $kuiBorderRadius $kuiBorderRadius; } .kuiButton + .kuiButton { diff --git a/packages/osd-ui-framework/src/components/empty_table_prompt/_empty_table_prompt.scss b/packages/osd-ui-framework/src/components/empty_table_prompt/_empty_table_prompt.scss index c59916744f4a..eb9aae4febbe 100644 --- a/packages/osd-ui-framework/src/components/empty_table_prompt/_empty_table_prompt.scss +++ b/packages/osd-ui-framework/src/components/empty_table_prompt/_empty_table_prompt.scss @@ -5,12 +5,12 @@ padding: 30px; } - .kuiEmptyTablePrompt__message { - font-size: $kuiTitleFontSize; - color: $kuiSubduedTextColor; - line-height: $kuiLineHeight; - } +.kuiEmptyTablePrompt__message { + font-size: $kuiTitleFontSize; + color: $kuiSubduedTextColor; + line-height: $kuiLineHeight; +} - .kuiEmptyTablePrompt__actions { - margin-top: 10px; - } +.kuiEmptyTablePrompt__actions { + margin-top: 10px; +} diff --git a/packages/osd-ui-framework/src/components/form/assisted_input/_assisted_input.scss b/packages/osd-ui-framework/src/components/form/assisted_input/_assisted_input.scss index b54dc536bbb0..3ecdca481218 100644 --- a/packages/osd-ui-framework/src/components/form/assisted_input/_assisted_input.scss +++ b/packages/osd-ui-framework/src/components/form/assisted_input/_assisted_input.scss @@ -6,12 +6,12 @@ position: relative; } - /** +/** * 1. Vertically center the assistance, regardless of its height. */ - .kuiAssistedInput__assistance { - position: absolute; - right: $kuiFormControlHorizontalPadding; - top: 50%; /* 1 */ - transform: translateY(-50%); /* 1 */ - } +.kuiAssistedInput__assistance { + position: absolute; + right: $kuiFormControlHorizontalPadding; + top: 50%; /* 1 */ + transform: translateY(-50%); /* 1 */ +} diff --git a/packages/osd-ui-framework/src/components/form/check_box/_check_box.scss b/packages/osd-ui-framework/src/components/form/check_box/_check_box.scss index 9d97fae4f02b..2c608f869532 100644 --- a/packages/osd-ui-framework/src/components/form/check_box/_check_box.scss +++ b/packages/osd-ui-framework/src/components/form/check_box/_check_box.scss @@ -5,23 +5,23 @@ * 2. Override default styles (possibly from Bootstrap). */ .kuiCheckBox { - -webkit-appearance: none; /* 1 */ + appearance: none; /* 1 */ background-color: $checkboxBackgroundColor; border: 1px solid $checkboxBorderColor; border-radius: $kuiBorderRadius; width: 16px; height: 16px; + font: $kuiFontFamily !important; /* 2 */ line-height: $kuiLineHeight !important; /* 2 */ margin: 0 !important; /* 2 */ - font: $kuiFontFamily !important; /* 2 */ font-family: $kuiFontFamily !important; /* 2 */ font-size: 10px !important; /* 2 */ transition: background-color $kuiInputTransitionTiming; - &:before { + &::before { position: relative; left: 0.25em; - font-family: FontAwesome; + font-family: FontAwesome, sans-serif; content: "\F00C"; font-size: 1em; opacity: 0; @@ -32,7 +32,8 @@ &:checked { border-color: $checkboxCheckedBackgroundColor; background-color: $checkboxCheckedBackgroundColor; - &:before { + + &::before { opacity: 1; } } @@ -55,7 +56,7 @@ line-height: $kuiLineHeight; } - .kuiCheckBoxLabel__text { - font-size: $kuiFontSize; - margin-left: 8px; - } +.kuiCheckBoxLabel__text { + font-size: $kuiFontSize; + margin-left: 8px; +} diff --git a/packages/osd-ui-framework/src/components/form/search_input/_search_input.scss b/packages/osd-ui-framework/src/components/form/search_input/_search_input.scss index 007ed696b468..d4079556aed0 100644 --- a/packages/osd-ui-framework/src/components/form/search_input/_search_input.scss +++ b/packages/osd-ui-framework/src/components/form/search_input/_search_input.scss @@ -12,23 +12,24 @@ } } - .kuiSearchInput__icon { - position: absolute; - top: 0.5em; - left: 0.7em; - font-size: 1em; - color: $searchInputTextColor; - } +.kuiSearchInput__icon { + position: absolute; + top: 0.5em; + left: 0.7em; + font-size: 1em; + color: $searchInputTextColor; +} - /** +/** * 1. Make space for search icon. * 2. Expand to fill container. */ - .kuiSearchInput__input { - @include formControl; - padding-left: 28px; /* 1 */ - width: 100%; /* 2 */ - } +.kuiSearchInput__input { + @include formControl; + + padding-left: 28px; /* 1 */ + width: 100%; /* 2 */ +} .kuiSearchInput--small { width: $kuiFormFieldSmallWidth; diff --git a/packages/osd-ui-framework/src/components/form/select/_select.scss b/packages/osd-ui-framework/src/components/form/select/_select.scss index 20e17d5bc26d..01cbf8da37be 100644 --- a/packages/osd-ui-framework/src/components/form/select/_select.scss +++ b/packages/osd-ui-framework/src/components/form/select/_select.scss @@ -10,6 +10,7 @@ &:focus { box-shadow: none; + @include formControlFocus; } } diff --git a/packages/osd-ui-framework/src/components/form/static_input/_static_input.scss b/packages/osd-ui-framework/src/components/form/static_input/_static_input.scss index 82eac7187b0b..1a0003ae4336 100644 --- a/packages/osd-ui-framework/src/components/form/static_input/_static_input.scss +++ b/packages/osd-ui-framework/src/components/form/static_input/_static_input.scss @@ -3,7 +3,9 @@ */ .kuiStaticInput { width: $kuiFormFieldDefaultWidth; + @include formControlBase; + border: 1px solid transparent; /* 1 */ background-color: transparent; } diff --git a/packages/osd-ui-framework/src/components/form/text_area/_text_area.scss b/packages/osd-ui-framework/src/components/form/text_area/_text_area.scss index e60ee9b0597c..085753c77f14 100644 --- a/packages/osd-ui-framework/src/components/form/text_area/_text_area.scss +++ b/packages/osd-ui-framework/src/components/form/text_area/_text_area.scss @@ -5,6 +5,7 @@ &:focus { box-shadow: none; + @include formControlFocus; } diff --git a/packages/osd-ui-framework/src/components/icon/_icon.scss b/packages/osd-ui-framework/src/components/icon/_icon.scss index 4ba19a67fd95..919356b972ed 100644 --- a/packages/osd-ui-framework/src/components/icon/_icon.scss +++ b/packages/osd-ui-framework/src/components/icon/_icon.scss @@ -4,7 +4,7 @@ */ .kuiIcon { display: inline-block; /* 1 */ - font: normal normal normal 14px/1 FontAwesome; /* 1 */ + font: normal normal normal 14px/1 FontAwesome, sans-serif; /* 1 */ font-size: inherit; /* 1 */ text-rendering: auto; /* 1 */ -webkit-font-smoothing: antialiased; /* 1 */ diff --git a/packages/osd-ui-framework/src/components/index.scss b/packages/osd-ui-framework/src/components/index.scss index 3d9694d70696..d0624dabd64f 100644 --- a/packages/osd-ui-framework/src/components/index.scss +++ b/packages/osd-ui-framework/src/components/index.scss @@ -8,27 +8,27 @@ // /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. -@import 'bar/index'; -@import 'button/index'; -@import 'collapse_button/index'; -@import 'form/index'; -@import 'form_layout/index'; -@import 'icon/index'; -@import 'info_panel/index'; -@import 'link/index'; -@import 'local_nav/index'; -@import 'pager/index'; -@import 'panel/index'; -@import 'empty_table_prompt/index'; -@import 'status_text/index'; -@import 'table/index'; -@import 'table_info/index'; -@import 'tabs/index'; -@import 'tool_bar/index'; -@import 'typography/index'; -@import 'vertical_rhythm/index'; -@import 'view/index'; +@import "bar/index"; +@import "button/index"; +@import "collapse_button/index"; +@import "form/index"; +@import "form_layout/index"; +@import "icon/index"; +@import "info_panel/index"; +@import "link/index"; +@import "local_nav/index"; +@import "pager/index"; +@import "panel/index"; +@import "empty_table_prompt/index"; +@import "status_text/index"; +@import "table/index"; +@import "table_info/index"; +@import "tabs/index"; +@import "tool_bar/index"; +@import "typography/index"; +@import "vertical_rhythm/index"; +@import "view/index"; diff --git a/packages/osd-ui-framework/src/components/info_panel/_info_panel.scss b/packages/osd-ui-framework/src/components/info_panel/_info_panel.scss index a68de4fae38e..ec066d02ff0e 100644 --- a/packages/osd-ui-framework/src/components/info_panel/_info_panel.scss +++ b/packages/osd-ui-framework/src/components/info_panel/_info_panel.scss @@ -40,17 +40,17 @@ align-items: baseline; /* 1 */ } - .kuiInfoPanelHeader__icon { - margin-right: 10px; - font-size: $kuiFontSize; - line-height: $kuiLineHeight; - } +.kuiInfoPanelHeader__icon { + margin-right: 10px; + font-size: $kuiFontSize; + line-height: $kuiLineHeight; +} - .kuiInfoPanelHeader__title { - font-size: $kuiFontSize; - line-height: $kuiLineHeight; - font-weight: $kuiFontWeightBold; - } +.kuiInfoPanelHeader__title { + font-size: $kuiFontSize; + line-height: $kuiLineHeight; + font-weight: $kuiFontWeightBold; +} .kuiInfoPanelBody { margin-top: $infoPanelVerticalRhythm; diff --git a/packages/osd-ui-framework/src/components/local_nav/_index.scss b/packages/osd-ui-framework/src/components/local_nav/_index.scss index 761865d34c11..f1149926b4f6 100644 --- a/packages/osd-ui-framework/src/components/local_nav/_index.scss +++ b/packages/osd-ui-framework/src/components/local_nav/_index.scss @@ -27,6 +27,7 @@ $localSearchHeight: 32px; $localDatePickerBottomSpacing: 4px; $localDatePickerButtonPadding: 3px 6px; $localDatePickerCellPadding: 8px; + // Match the height of body cells, but leave out side padding so content can expand without // affecting the cell's width. $localDatePickerHeaderCellPadding: #{$localDatePickerCellPadding + 1px} 0; diff --git a/packages/osd-ui-framework/src/components/local_nav/_local_breadcrumbs.scss b/packages/osd-ui-framework/src/components/local_nav/_local_breadcrumbs.scss index 48cffd02a437..128a4a4cf9dd 100644 --- a/packages/osd-ui-framework/src/components/local_nav/_local_breadcrumbs.scss +++ b/packages/osd-ui-framework/src/components/local_nav/_local_breadcrumbs.scss @@ -20,8 +20,8 @@ & + & { margin-left: 6px; - &:before { - content: '/'; + &::before { + content: "/"; user-select: none; margin-right: 4px; color: $localNavBreadcrumbDelimiterColor; @@ -34,6 +34,7 @@ */ .kuiLocalBreadcrumb__link { @include link; + color: $localBreadcrumbLinkColor; /* 1 */ font-size: $kuiFontSize; } diff --git a/packages/osd-ui-framework/src/components/local_nav/_local_dropdown.scss b/packages/osd-ui-framework/src/components/local_nav/_local_dropdown.scss index 405d4f32df9a..9da9ecca673c 100644 --- a/packages/osd-ui-framework/src/components/local_nav/_local_dropdown.scss +++ b/packages/osd-ui-framework/src/components/local_nav/_local_dropdown.scss @@ -55,35 +55,35 @@ margin-bottom: 6px; } - /** +/** * 1. Override inherited styles. */ - .kuiLocalDropdownHeader__label { - font-size: 14px; - font-weight: 700; - margin-bottom: 0; /* 1 */ - color: $localNavTextColor; - } +.kuiLocalDropdownHeader__label { + font-size: 14px; + font-weight: 700; + margin-bottom: 0; /* 1 */ + color: $localNavTextColor; +} - .kuiLocalDropdownHeader__actions { - display: flex; - } +.kuiLocalDropdownHeader__actions { + display: flex; +} - .kuiLocalDropdownHeader__action { - color: $kuiLinkColor; - font-size: 12px; - text-decoration: none; - cursor: pointer; +.kuiLocalDropdownHeader__action { + color: $kuiLinkColor; + font-size: 12px; + text-decoration: none; + cursor: pointer; - & + & { - margin-left: 10px; - } + & + & { + margin-left: 10px; + } - &:hover, - &:active { - color: $kuiLinkColor-isHover; - } + &:hover, + &:active { + color: $kuiLinkColor-isHover; } +} .kuiLocalDropdownInput { display: block; diff --git a/packages/osd-ui-framework/src/components/local_nav/_local_menu.scss b/packages/osd-ui-framework/src/components/local_nav/_local_menu.scss index 4feb5225d5b3..d2b30905d203 100644 --- a/packages/osd-ui-framework/src/components/local_nav/_local_menu.scss +++ b/packages/osd-ui-framework/src/components/local_nav/_local_menu.scss @@ -8,7 +8,7 @@ .kuiLocalMenuItem { display: flex; align-items: center; - padding: ($localNavSideSpacing * .25) $localNavSideSpacing; + padding: ($localNavSideSpacing * 0.25) $localNavSideSpacing; font-size: $kuiFontSize; background-color: $localNavButtonBackgroundColor; color: $localNavButtonTextColor; @@ -16,8 +16,9 @@ cursor: pointer; border-bottom: solid 2px transparent; - &:hover, &:focus { - background-color: rgba($localNavButtonBackgroundColor-isHover, .15); + &:hover, + &:focus { + background-color: rgba($localNavButtonBackgroundColor-isHover, 0.15); text-decoration: underline; } @@ -27,7 +28,8 @@ border-color: $euiColorPrimary; z-index: 2; - &:hover, &:focus { + &:hover, + &:focus { text-decoration: none; } } @@ -43,7 +45,7 @@ } } - .kuiLocalMenuItem__icon { - margin-right: 5px; - margin-bottom: -1px; - } +.kuiLocalMenuItem__icon { + margin-right: 5px; + margin-bottom: -1px; +} diff --git a/packages/osd-ui-framework/src/components/local_nav/_local_search.scss b/packages/osd-ui-framework/src/components/local_nav/_local_search.scss index 740ae664c7f5..c1355a5f57c4 100644 --- a/packages/osd-ui-framework/src/components/local_nav/_local_search.scss +++ b/packages/osd-ui-framework/src/components/local_nav/_local_search.scss @@ -6,6 +6,7 @@ .kuiLocalSearchInput { @include formControl; + flex: 1 1 100%; border-color: $localSearchBackgroundColor; border-color: $kuiColorLightGray; @@ -26,26 +27,27 @@ border-radius: 0; border-left-width: 0; } + /** * 1. em used for right padding so documentation link and query string * won't overlap if the user increases their default browser font size * This is sized for the 'Options' link */ - .kuiLocalSearchInput, - .kuiLocalSearchAssistedInput__input { - padding-right: 6em; /* 1 */ - } +.kuiLocalSearchInput, +.kuiLocalSearchAssistedInput__input { + padding-right: 6em; /* 1 */ +} - /** - * 1. Vertically center the assistance, regardless of its height. - */ - .kuiLocalSearchAssistedInput__assistance { - position: absolute; - right: $kuiFormControlHorizontalPadding/2; - top: 50%; /* 1 */ - z-index: 2; - transform: translateY(-50%); /* 1 */ - } +/** + * 1. Vertically center the assistance, regardless of its height. + */ +.kuiLocalSearchAssistedInput__assistance { + position: absolute; + right: $kuiFormControlHorizontalPadding / 2; + top: 50%; /* 1 */ + z-index: 2; + transform: translateY(-50%); /* 1 */ +} .kuiLocalSearchSelect { @include select; diff --git a/packages/osd-ui-framework/src/components/local_nav/_local_tabs.scss b/packages/osd-ui-framework/src/components/local_nav/_local_tabs.scss index d9dde4880ddc..78522cf37b2e 100644 --- a/packages/osd-ui-framework/src/components/local_nav/_local_tabs.scss +++ b/packages/osd-ui-framework/src/components/local_nav/_local_tabs.scss @@ -7,40 +7,40 @@ height: 100%; } - /** +/** * 1. Override inherited typographic styles. */ - .kuiLocalTab { - padding: 5px 0 6px 0; - font-size: 18px; - color: $localTabTextColor; - border-bottom: 2px solid transparent; - text-decoration: none; - cursor: pointer; - margin-top: 0 !important; /* 1 */ - margin-bottom: 0 !important; /* 1 */ +.kuiLocalTab { + padding: 5px 0 6px; + font-size: 18px; + color: $localTabTextColor; + border-bottom: 2px solid transparent; + text-decoration: none; + cursor: pointer; + margin-top: 0 !important; /* 1 */ + margin-bottom: 0 !important; /* 1 */ - &:hover:not(.kuiLocalTab-isDisabled), - &:active:not(.kuiLocalTab-isDisabled) { - color: $localTabTextColor-isHover; - } + &:hover:not(.kuiLocalTab-isDisabled), + &:active:not(.kuiLocalTab-isDisabled) { + color: $localTabTextColor-isHover; + } - &.kuiLocalTab-isSelected { - color: $localTabTextColor-isSelected; - border-bottom-color: $localTabTextColor-isSelected; - cursor: default; - } + &.kuiLocalTab-isSelected { + color: $localTabTextColor-isSelected; + border-bottom-color: $localTabTextColor-isSelected; + cursor: default; + } - /** + /** * 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show * a regular cursor instead of setting pointer-events: none. */ - &.kuiLocalTab-isDisabled { - opacity: 0.5; - cursor: default; /* 1 */ - } + &.kuiLocalTab-isDisabled { + opacity: 0.5; + cursor: default; /* 1 */ + } - & + & { - margin-left: 15px; - } + & + & { + margin-left: 15px; } +} diff --git a/packages/osd-ui-framework/src/components/panel/_panel.scss b/packages/osd-ui-framework/src/components/panel/_panel.scss index 53ac8c32de33..0696a3294db6 100644 --- a/packages/osd-ui-framework/src/components/panel/_panel.scss +++ b/packages/osd-ui-framework/src/components/panel/_panel.scss @@ -1,5 +1,6 @@ .kuiPanel { @include euiBottomShadowSmall; + background-color: $euiColorEmptyShade; border: $euiBorderThin; border-radius: $euiBorderRadius; @@ -44,14 +45,14 @@ border-bottom: $kuiBorderThin; } - /** +/** * 1. This way we can use h1, h2, etc. */ - .kuiPanelHeader__title { - font-size: $kuiTitleFontSize; - line-height: $kuiLineHeight; - margin: 0; /* 1 */ - } +.kuiPanelHeader__title { + font-size: $kuiTitleFontSize; + line-height: $kuiLineHeight; + margin: 0; /* 1 */ +} /** * 1. Undo what barSection mixin does. diff --git a/packages/osd-ui-framework/src/components/status_text/_status_text.scss b/packages/osd-ui-framework/src/components/status_text/_status_text.scss index ebc992e76e25..2d03c5d86e16 100644 --- a/packages/osd-ui-framework/src/components/status_text/_status_text.scss +++ b/packages/osd-ui-framework/src/components/status_text/_status_text.scss @@ -26,5 +26,5 @@ .kuiStatusText__icon { margin-right: 6px; width: $statusTextIconSize; /* 1 */ - max-height:$statusTextIconSize; /* 2 */ + max-height: $statusTextIconSize; /* 2 */ } diff --git a/packages/osd-ui-framework/src/components/table/_controlled_table.scss b/packages/osd-ui-framework/src/components/table/_controlled_table.scss index 81d80881e13d..66e33406222d 100644 --- a/packages/osd-ui-framework/src/components/table/_controlled_table.scss +++ b/packages/osd-ui-framework/src/components/table/_controlled_table.scss @@ -4,6 +4,7 @@ */ .kuiControlledTable { background: $tableBackgroundColor; + .kuiTable { border-top: none; /* 1 */ } diff --git a/packages/osd-ui-framework/src/components/table/_table.scss b/packages/osd-ui-framework/src/components/table/_table.scss index 3582ac12acec..823229b81067 100644 --- a/packages/osd-ui-framework/src/components/table/_table.scss +++ b/packages/osd-ui-framework/src/components/table/_table.scss @@ -33,6 +33,7 @@ .kuiTableHeaderCell { @include tableCell; + line-height: $kuiLineHeight; color: $tableHeaderTextColor; } @@ -102,28 +103,29 @@ .kuiTableRowCell { @include tableCell; + color: $kuiFontColor; border-top: $kuiBorderThin; vertical-align: middle; } - /** +/** * 1. Vertically align all children. * 2. The padding on this div allows the ellipsis to show if the content is truncated. If * the padding was on the cell, the ellipsis would be cropped. * 3. Truncate content with an ellipsis. */ - .kuiTableRowCell__liner { - padding: $tableCellPadding; /* 2 */ - line-height: $kuiLineHeight; /* 1 */ - overflow: hidden; /* 3 */ - text-overflow: ellipsis; /* 3 */ - white-space: nowrap; /* 3 */ - - & > * { - vertical-align: middle; /* 1 */ - } +.kuiTableRowCell__liner { + padding: $tableCellPadding; /* 2 */ + line-height: $kuiLineHeight; /* 1 */ + overflow: hidden; /* 3 */ + text-overflow: ellipsis; /* 3 */ + white-space: nowrap; /* 3 */ + + & > * { + vertical-align: middle; /* 1 */ } +} .kuiTableRowCell--wrap { .kuiTableRowCell__liner { diff --git a/packages/osd-ui-framework/src/components/tabs/_tabs.scss b/packages/osd-ui-framework/src/components/tabs/_tabs.scss index e00ca1701156..23c79bedf588 100644 --- a/packages/osd-ui-framework/src/components/tabs/_tabs.scss +++ b/packages/osd-ui-framework/src/components/tabs/_tabs.scss @@ -3,7 +3,6 @@ border-bottom: $kuiBorderThin; } - /** * 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. diff --git a/packages/osd-ui-framework/src/components/tool_bar/_tool_bar_search.scss b/packages/osd-ui-framework/src/components/tool_bar/_tool_bar_search.scss index 9089dde1c471..a08fd6110a13 100644 --- a/packages/osd-ui-framework/src/components/tool_bar/_tool_bar_search.scss +++ b/packages/osd-ui-framework/src/components/tool_bar/_tool_bar_search.scss @@ -33,31 +33,31 @@ max-width: 800px; } - .kuiToolBarSearchBox__icon { - position: absolute; - top: 0.5em; - left: 0.7em; - font-size: 1em; - color: #ACACAC; - } +.kuiToolBarSearchBox__icon { + position: absolute; + top: 0.5em; + left: 0.7em; + font-size: 1em; + color: #acacac; +} - /** +/** * 1. Fix inherited styles (possibly from Bootstrap). */ - .kuiToolBarSearchBox__input { - width: 100%; - min-width: 200px; - padding: 4px 12px 5px 28px; - font-family: $kuiFontFamily; /* 1 */ - background-color: $euiColorEmptyShade; - color: $kuiFontColor; - border-radius: $kuiBorderRadius; - font-size: 1em; - border: 1px solid $kuiColorLightGray; - line-height: normal; /* 1 */ - transition: border-color $kuiInputTransitionTiming; - - &:focus { - @include formControlFocus; - } +.kuiToolBarSearchBox__input { + width: 100%; + min-width: 200px; + padding: 4px 12px 5px 28px; + font-family: $kuiFontFamily; /* 1 */ + background-color: $euiColorEmptyShade; + color: $kuiFontColor; + border-radius: $kuiBorderRadius; + font-size: 1em; + border: 1px solid $kuiColorLightGray; + line-height: normal; /* 1 */ + transition: border-color $kuiInputTransitionTiming; + + &:focus { + @include formControlFocus; } +} diff --git a/packages/osd-ui-framework/src/components/typography/_index.scss b/packages/osd-ui-framework/src/components/typography/_index.scss index 0852da026bfb..fb69d7c88efc 100644 --- a/packages/osd-ui-framework/src/components/typography/_index.scss +++ b/packages/osd-ui-framework/src/components/typography/_index.scss @@ -1,2 +1,3 @@ $typographyTitleFontSize: $euiSizeL; + @import "typography"; diff --git a/packages/osd-ui-framework/src/components/view/_index.scss b/packages/osd-ui-framework/src/components/view/_index.scss index 00b7f897c90c..abbdcc8b2d79 100644 --- a/packages/osd-ui-framework/src/components/view/_index.scss +++ b/packages/osd-ui-framework/src/components/view/_index.scss @@ -1,4 +1,4 @@ -$viewBackground: #FFF; +$viewBackground: #fff; $viewContentMaxWidth: 1100px; @import "view"; diff --git a/packages/osd-ui-framework/src/global_styling/mixins/_global_mixins.scss b/packages/osd-ui-framework/src/global_styling/mixins/_global_mixins.scss index e7828a5cb7f7..0c5f0fd02815 100644 --- a/packages/osd-ui-framework/src/global_styling/mixins/_global_mixins.scss +++ b/packages/osd-ui-framework/src/global_styling/mixins/_global_mixins.scss @@ -95,8 +95,9 @@ } @mixin kuiButtonHoverAndActive { - @include kuiButtonHover { @content } - @include kuiButtonActive { @content } + @include kuiButtonHover { @content; } + + @include kuiButtonActive { @content; } } @mixin focus($color: $kuiFocusColor, $backgroundColor: $kuiFocusBackgroundColor) { @@ -128,6 +129,7 @@ */ @mixin formControl($borderRadius: $kuiBorderRadius) { @include formControlBase; + background-color: $euiFormBackgroundColor; border: 1px solid $euiFormBorderColor; border-radius: $borderRadius; @@ -157,12 +159,14 @@ } /** - * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg). + * 1. Embedded SVG of fa-caret-down + * (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg). * 2. Make room on right side for the caret. * 3. Prevent Firefox from showing dotted line around text on focus. */ @mixin select($borderRadius: $kuiBorderRadius) { @include formControl($borderRadius); + padding-right: 30px; /* 2 */ background-image: url('data:image/svg+xml;utf8,'); /* 1 */ background-size: 14px; @@ -266,4 +270,3 @@ } } } - diff --git a/packages/osd-ui-framework/src/global_styling/mixins/_index.scss b/packages/osd-ui-framework/src/global_styling/mixins/_index.scss index d8f9abd98e08..fa4046952b85 100644 --- a/packages/osd-ui-framework/src/global_styling/mixins/_index.scss +++ b/packages/osd-ui-framework/src/global_styling/mixins/_index.scss @@ -1,3 +1,3 @@ -@import 'responsive'; -@import 'shadow'; -@import 'global_mixins'; +@import "responsive"; +@import "shadow"; +@import "global_mixins"; diff --git a/packages/osd-ui-framework/src/global_styling/mixins/_responsive.scss b/packages/osd-ui-framework/src/global_styling/mixins/_responsive.scss index 8b951c8142dc..43ab9bf29a61 100644 --- a/packages/osd-ui-framework/src/global_styling/mixins/_responsive.scss +++ b/packages/osd-ui-framework/src/global_styling/mixins/_responsive.scss @@ -4,6 +4,6 @@ $breakpoints: ("small": 768px) !default; @mixin screenXSmall { @media only screen and (max-width: map-get($breakpoints, "small")) { - @content; + @content; } } diff --git a/packages/osd-ui-framework/src/global_styling/mixins/_shadow.scss b/packages/osd-ui-framework/src/global_styling/mixins/_shadow.scss index f0b39f59e285..72c5f58c9907 100644 --- a/packages/osd-ui-framework/src/global_styling/mixins/_shadow.scss +++ b/packages/osd-ui-framework/src/global_styling/mixins/_shadow.scss @@ -1,26 +1,23 @@ @mixin kuiBottomShadow { - box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); + box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 10%); } @mixin kuiBottomShadowSmall { - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 10%); } @mixin kuiBottomShadowMedium { - box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2); + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 20%); } @mixin kuiSlightShadow { - box-shadow: - 0 2px 2px -1px rgba(0, 0, 0, 0.15), + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 15%),; } @mixin kuiSlightShadowHover { - box-shadow: - 0 4px 4px -2px rgba(0, 0, 0, 0.1), + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 10%),; } @mixin kuiSlightShadowActive { - box-shadow: - 0 1px 1px 0px rgba(0, 0, 0, 0.2), + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 20%),; } diff --git a/packages/osd-ui-framework/src/global_styling/variables/_colors.scss b/packages/osd-ui-framework/src/global_styling/variables/_colors.scss index 507adaf6e9b1..d17421c2e322 100644 --- a/packages/osd-ui-framework/src/global_styling/variables/_colors.scss +++ b/packages/osd-ui-framework/src/global_styling/variables/_colors.scss @@ -39,4 +39,4 @@ $kuiSubduedTextColor: $euiColorDarkShade; $kuiLinkHoverColor: darken($euiColorPrimary, 10%); $kuiSelectedBorderColor: $euiColorPrimary; $kuiDangerBorderColor: $euiColorDanger; -$kuiFormControlBorderColor: transparentize($euiColorFullShade, .9); +$kuiFormControlBorderColor: transparentize($euiColorFullShade, 0.9); diff --git a/packages/osd-ui-framework/src/global_styling/variables/_index.scss b/packages/osd-ui-framework/src/global_styling/variables/_index.scss index c1b38d47446f..233eeb905571 100644 --- a/packages/osd-ui-framework/src/global_styling/variables/_index.scss +++ b/packages/osd-ui-framework/src/global_styling/variables/_index.scss @@ -6,12 +6,12 @@ // 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. -@import 'size'; -@import 'colors'; -@import 'font'; -@import 'timing'; -@import 'borders'; -@import 'z_index'; -@import 'animations'; -@import 'form'; -@import 'tool_bar'; +@import "size"; +@import "colors"; +@import "font"; +@import "timing"; +@import "borders"; +@import "z_index"; +@import "animations"; +@import "form"; +@import "tool_bar"; diff --git a/packages/osd-ui-framework/src/global_styling/variables/_size.scss b/packages/osd-ui-framework/src/global_styling/variables/_size.scss index 0fc6ae043314..ecf707090dd3 100644 --- a/packages/osd-ui-framework/src/global_styling/variables/_size.scss +++ b/packages/osd-ui-framework/src/global_styling/variables/_size.scss @@ -1,8 +1,7 @@ -$kuiSize: $euiSize; - -$kuiSizeXS: $kuiSize * .25; -$kuiSizeS: $kuiSize * .5; -$kuiSizeM: $kuiSize * .75; -$kuiSizeL: $kuiSize * 1.5; -$kuiSizeXL: $kuiSize * 2; -$kuiSizeXXL: $kuiSize * 2.5; +$kuiSize: $euiSize; +$kuiSizeXS: $kuiSize * 0.25; +$kuiSizeS: $kuiSize * 0.5; +$kuiSizeM: $kuiSize * 0.75; +$kuiSizeL: $kuiSize * 1.5; +$kuiSizeXL: $kuiSize * 2; +$kuiSizeXXL: $kuiSize * 2.5; diff --git a/packages/osd-ui-framework/src/global_styling/variables/_z_index.scss b/packages/osd-ui-framework/src/global_styling/variables/_z_index.scss index c1c0cfb88fae..719399ce5b99 100644 --- a/packages/osd-ui-framework/src/global_styling/variables/_z_index.scss +++ b/packages/osd-ui-framework/src/global_styling/variables/_z_index.scss @@ -1,19 +1,18 @@ // Z-Index -$kuiZLevel0: 0; -$kuiZLevel1: 1000; -$kuiZLevel2: 2000; -$kuiZLevel3: 3000; -$kuiZLevel4: 4000; -$kuiZLevel5: 5000; -$kuiZLevel6: 6000; -$kuiZLevel7: 7000; -$kuiZLevel8: 8000; -$kuiZLevel9: 9000; - -$kuiZContent: $kuiZLevel0; -$kuiZContentMenu: $kuiZLevel2; -$kuiZNavigation: $kuiZLevel4; -$kuiZToastList: $kuiZLevel5; -$kuiZMask: $kuiZLevel6; -$kuiZModal: $kuiZLevel8; +$kuiZLevel0: 0; +$kuiZLevel1: 1000; +$kuiZLevel2: 2000; +$kuiZLevel3: 3000; +$kuiZLevel4: 4000; +$kuiZLevel5: 5000; +$kuiZLevel6: 6000; +$kuiZLevel7: 7000; +$kuiZLevel8: 8000; +$kuiZLevel9: 9000; +$kuiZContent: $kuiZLevel0; +$kuiZContentMenu: $kuiZLevel2; +$kuiZNavigation: $kuiZLevel4; +$kuiZToastList: $kuiZLevel5; +$kuiZMask: $kuiZLevel6; +$kuiZModal: $kuiZLevel8; diff --git a/packages/osd-ui-framework/src/kui_dark.scss b/packages/osd-ui-framework/src/kui_dark.scss index aa9ba0f1bee7..87e1c29686e8 100644 --- a/packages/osd-ui-framework/src/kui_dark.scss +++ b/packages/osd-ui-framework/src/kui_dark.scss @@ -1,15 +1,15 @@ // EUI global scope is used for KUI variables till fully deprecated -@import '../../../node_modules/@elastic/eui/src/themes/eui/eui_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/themes/eui/eui_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"; // Configuration -@import 'global_styling/variables/index'; +@import "global_styling/variables/index"; // Core -@import 'global_styling/mixins/index'; -@import 'global_styling/reset/index'; +@import "global_styling/mixins/index"; +@import "global_styling/reset/index"; // Components -@import 'components/index'; +@import "components/index"; diff --git a/packages/osd-ui-framework/src/kui_light.scss b/packages/osd-ui-framework/src/kui_light.scss index b912b6e21788..e5cad23a3177 100644 --- a/packages/osd-ui-framework/src/kui_light.scss +++ b/packages/osd-ui-framework/src/kui_light.scss @@ -1,15 +1,15 @@ // EUI global scope is used for KUI variables till fully deprecated -@import '../../../node_modules/@elastic/eui/src/themes/eui/eui_colors_light'; -@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/themes/eui/eui_colors_light"; +@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"; // Configuration -@import 'global_styling/variables/index'; +@import "global_styling/variables/index"; // Core -@import 'global_styling/mixins/index'; -@import 'global_styling/reset/index'; +@import "global_styling/mixins/index"; +@import "global_styling/reset/index"; // Components -@import 'components/index'; +@import "components/index"; diff --git a/scripts/sasslint.js b/scripts/stylelint.js similarity index 96% rename from scripts/sasslint.js rename to scripts/stylelint.js index 1a8447f29c26..3679c94ddd15 100644 --- a/scripts/sasslint.js +++ b/scripts/stylelint.js @@ -29,4 +29,4 @@ */ require('../src/setup_node_env'); -require('../src/dev/run_sasslint'); +require('../src/dev/run_stylelint'); diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss index daf8a66827b9..bb8baa3462f1 100644 --- a/src/core/public/_variables.scss +++ b/src/core/public/_variables.scss @@ -1,3 +1,3 @@ -@import '@elastic/eui/src/global_styling/variables/header'; +@import "@elastic/eui/src/global_styling/variables/header"; $osdHeaderOffset: $euiHeaderHeightCompensation * 2; diff --git a/src/core/public/chrome/_index.scss b/src/core/public/chrome/_index.scss index a51fde079f10..68eaf661afed 100644 --- a/src/core/public/chrome/_index.scss +++ b/src/core/public/chrome/_index.scss @@ -1 +1 @@ -@import './ui/index'; +@import "./ui/index"; diff --git a/src/core/public/chrome/ui/_index.scss b/src/core/public/chrome/ui/_index.scss index ae15be89f2e9..0b3e83f30bf2 100644 --- a/src/core/public/chrome/ui/_index.scss +++ b/src/core/public/chrome/ui/_index.scss @@ -1,2 +1,2 @@ -@import './header/index'; -@import './loading_indicator'; +@import "./header/index"; +@import "./loading_indicator"; diff --git a/src/core/public/chrome/ui/header/collapsible_nav.scss b/src/core/public/chrome/ui/header/collapsible_nav.scss index e17797f5eccf..87c3e911eb2c 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav.scss +++ b/src/core/public/chrome/ui/header/collapsible_nav.scss @@ -1,5 +1,6 @@ .osdCollapsibleNav__recentsListGroup { @include euiYScroll; + max-height: $euiSize * 10; margin-right: -$euiSizeS; } diff --git a/src/core/public/chrome/ui/header/header_logo.scss b/src/core/public/chrome/ui/header/header_logo.scss index 1aa9be7e9acf..7835863e60c0 100644 --- a/src/core/public/chrome/ui/header/header_logo.scss +++ b/src/core/public/chrome/ui/header/header_logo.scss @@ -1,9 +1,9 @@ .logoContainer { - height: 30px; - padding: 3px 3px 3px 10px; + height: 30px; + padding: 3px 3px 3px 10px; } .logoImage { - height: 100%; - max-width: 100%; -} \ No newline at end of file + height: 100%; + max-width: 100%; +} diff --git a/src/core/public/core_app/styles/_globals_v7dark.scss b/src/core/public/core_app/styles/_globals_v7dark.scss index 9a4a965d63a3..ab0056560247 100644 --- a/src/core/public/core_app/styles/_globals_v7dark.scss +++ b/src/core/public/core_app/styles/_globals_v7dark.scss @@ -1,8 +1,7 @@ // v7dark global scope -// +// --- // prepended to all .scss imports (from JS, when v7dark theme selected) -@import '@elastic/eui/src/themes/eui/eui_colors_dark'; -@import '@elastic/eui/src/themes/eui/eui_globals'; - -@import './mixins'; +@import "@elastic/eui/src/themes/eui/eui_colors_dark"; +@import "@elastic/eui/src/themes/eui/eui_globals"; +@import "./mixins"; diff --git a/src/core/public/core_app/styles/_globals_v7light.scss b/src/core/public/core_app/styles/_globals_v7light.scss index ddb4b5b31fa1..a10cf05db757 100644 --- a/src/core/public/core_app/styles/_globals_v7light.scss +++ b/src/core/public/core_app/styles/_globals_v7light.scss @@ -1,8 +1,7 @@ // v7light global scope -// +// --- // prepended to all .scss imports (from JS, when v7light theme selected) -@import '@elastic/eui/src/themes/eui/eui_colors_light'; -@import '@elastic/eui/src/themes/eui/eui_globals'; - -@import './mixins'; +@import "@elastic/eui/src/themes/eui/eui_colors_light"; +@import "@elastic/eui/src/themes/eui/eui_globals"; +@import "./mixins"; diff --git a/src/core/public/core_app/styles/_globals_v8dark.scss b/src/core/public/core_app/styles/_globals_v8dark.scss index 9ad9108f350f..2b92b49bcbfa 100644 --- a/src/core/public/core_app/styles/_globals_v8dark.scss +++ b/src/core/public/core_app/styles/_globals_v8dark.scss @@ -1,8 +1,7 @@ // v8dark global scope -// +// --- // prepended to all .scss imports (from JS, when v8dark theme selected) -@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_dark'; -@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals'; - -@import './mixins'; +@import "@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_dark"; +@import "@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals"; +@import "./mixins"; diff --git a/src/core/public/core_app/styles/_globals_v8light.scss b/src/core/public/core_app/styles/_globals_v8light.scss index a6b2cb84c206..914dbb3e3831 100644 --- a/src/core/public/core_app/styles/_globals_v8light.scss +++ b/src/core/public/core_app/styles/_globals_v8light.scss @@ -1,8 +1,7 @@ // v8light global scope -// +// --- // prepended to all .scss imports (from JS, when v8light theme selected) -@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_light'; -@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals'; - -@import './mixins'; +@import "@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_light"; +@import "@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals"; +@import "./mixins"; diff --git a/src/core/public/core_app/styles/_mixins.scss b/src/core/public/core_app/styles/_mixins.scss index 6982f1f9b015..42c1feb5e914 100644 --- a/src/core/public/core_app/styles/_mixins.scss +++ b/src/core/public/core_app/styles/_mixins.scss @@ -11,7 +11,9 @@ // EUITODO: Add this @mixin opensearchDashboardsCircleLogo() { display: inline-block; + @include size($euiSizeXXL * 2); + line-height: $euiSizeXXL * 2; text-align: center; background-color: $euiColorEmptyShade; @@ -34,9 +36,9 @@ margin: 0; user-select: none; - @if ($direction == horizontal) { + @if $direction == horizontal { width: $size; - } @else if ($direction == vertical) { + } @else if $direction == vertical { height: $size; width: 100%; } @else { @@ -61,9 +63,9 @@ width: 100%; height: 100%; - @if ($direction == horizontal) { + @if $direction == horizontal { cursor: ew-resize; - } @else if ($direction == vertical) { + } @else if $direction == vertical { cursor: ns-resize; } } @@ -89,6 +91,7 @@ z-index: 1; width: 310px; height: 477px; + /* stylelint-disable-next-line function-url-quotes */ content: url(lightOrDarkTheme('~core_app_image_assets/bg_top_branded.svg', '~core_app_image_assets/bg_top_branded_dark.svg')); } @@ -99,6 +102,7 @@ z-index: 1; width: 313px; height: 461px; + /* stylelint-disable-next-line function-url-quotes */ content: url(lightOrDarkTheme('~core_app_image_assets/bg_bottom_branded.svg', '~core_app_image_assets/bg_bottom_branded_dark.svg')); } diff --git a/src/core/public/index.scss b/src/core/public/index.scss index 6ba9254e5d38..924b5985dff4 100644 --- a/src/core/public/index.scss +++ b/src/core/public/index.scss @@ -1,6 +1,6 @@ -@import './variables'; -@import './core'; -@import './chrome/index'; -@import './overlays/index'; -@import './rendering/index'; -@import './styles/index'; +@import "./variables"; +@import "./core"; +@import "./chrome/index"; +@import "./overlays/index"; +@import "./rendering/index"; +@import "./styles/index"; diff --git a/src/core/public/overlays/_index.scss b/src/core/public/overlays/_index.scss index 368dc9b644ff..36189cd231f4 100644 --- a/src/core/public/overlays/_index.scss +++ b/src/core/public/overlays/_index.scss @@ -1,2 +1,2 @@ -@import './banners/index'; -@import './mount_wrapper'; +@import "./banners/index"; +@import "./mount_wrapper"; diff --git a/src/core/public/overlays/banners/_index.scss b/src/core/public/overlays/banners/_index.scss index c0c8056ff5d7..62358fb623c7 100644 --- a/src/core/public/overlays/banners/_index.scss +++ b/src/core/public/overlays/banners/_index.scss @@ -1 +1 @@ -@import './banners_list'; +@import "./banners_list"; diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss index e8e0281a6f20..e070341366a5 100644 --- a/src/core/public/rendering/_base.scss +++ b/src/core/public/rendering/_base.scss @@ -24,9 +24,7 @@ .app-wrapper-panel { display: flex; - flex-grow: 1; - flex-shrink: 0; - flex-basis: auto; + flex-grow: 1 0 auto; flex-direction: column; > * { diff --git a/src/core/public/rendering/_index.scss b/src/core/public/rendering/_index.scss index c8567498b42e..079e71b08ef7 100644 --- a/src/core/public/rendering/_index.scss +++ b/src/core/public/rendering/_index.scss @@ -1 +1 @@ -@import './base'; +@import "./base"; diff --git a/src/core/public/styles/_ace_overrides.scss b/src/core/public/styles/_ace_overrides.scss index 30acdbbc8097..3f0e3f57d868 100644 --- a/src/core/public/styles/_ace_overrides.scss +++ b/src/core/public/styles/_ace_overrides.scss @@ -19,7 +19,7 @@ .ace_gutter-active-line, .ace_marker-layer .ace_active-line { - background-color: transparentize($euiColorLightShade, .3); + background-color: transparentize($euiColorLightShade, 0.3); } .ace_snippet-marker { @@ -29,7 +29,14 @@ } .ace_indent-guide { - background: linear-gradient(to left, $euiColorMediumShade 0%, $euiColorMediumShade 1px, transparent 1px, transparent 100%); + background: + linear-gradient( + to left, + $euiColorMediumShade 0%, + $euiColorMediumShade 1px, + transparent 1px, + transparent 100% + ); } .ace_search { @@ -45,13 +52,13 @@ } .ace_method { - color: makeHighContrastColor(#DD0A73, $aceBackground); + color: makeHighContrastColor(#dd0a73, $aceBackground); } .ace_url, .ace_start_triple_quote, .ace_end_triple_quote { - color: makeHighContrastColor(#00A69B, $aceBackground); + color: makeHighContrastColor(#00a69b, $aceBackground); } .ace_multi_string { @@ -71,7 +78,7 @@ } .ace_fold { - background-color: #6B72E6; + background-color: #6b72e6; } .ace_cursor { @@ -84,7 +91,7 @@ .ace_storage, .ace_keyword { - color: makeHighContrastColor(#0079A5, $aceBackground); + color: makeHighContrastColor(#0079a5, $aceBackground); } .ace_constant { @@ -104,8 +111,8 @@ } .ace_invalid { - background-color: euiCallOutColor('danger', 'background'); - color: euiCallOutColor('danger', 'foreground'); + background-color: euiCallOutColor("danger", "background"); + color: euiCallOutColor("danger", "foreground"); } .ace_support.ace_function { @@ -134,7 +141,7 @@ } .ace_comment.ace_doc { - color: makeHighContrastColor(#0079A5, $aceBackground); + color: makeHighContrastColor(#0079a5, $aceBackground); } .ace_comment.ace_doc.ace_tag { @@ -142,11 +149,11 @@ } .ace_constant.ace_numeric { - color: makeHighContrastColor(#0079A5, $aceBackground); + color: makeHighContrastColor(#0079a5, $aceBackground); } .ace_variable { - color: makeHighContrastColor(#0079A5, $aceBackground); + color: makeHighContrastColor(#0079a5, $aceBackground); } .ace_xml-pe { @@ -154,7 +161,7 @@ } .ace_entity.ace_name.ace_function { - color: makeHighContrastColor(#0000A2, $aceBackground); + color: makeHighContrastColor(#0000a2, $aceBackground); } .ace_heading { diff --git a/src/core/public/styles/_base.scss b/src/core/public/styles/_base.scss index 651005ed6e0e..7ecffff80b23 100644 --- a/src/core/public/styles/_base.scss +++ b/src/core/public/styles/_base.scss @@ -10,11 +10,11 @@ */ // Charts themes available app-wide -@import '@elastic/charts/dist/theme'; -@import '@elastic/eui/src/themes/charts/theme'; +@import "@elastic/charts/dist/theme"; +@import "@elastic/eui/src/themes/charts/theme"; // Grab some nav-specific EUI vars -@import '@elastic/eui/src/components/collapsible_nav/variables'; +@import "@elastic/eui/src/components/collapsible_nav/variables"; // Application Layout $euiCollapsibleNavWidth: $euiSize * 20; @@ -30,9 +30,7 @@ $euiCollapsibleNavWidth: $euiSize * 20; position: relative; z-index: 0; display: flex; - flex-grow: 1; - flex-shrink: 0; - flex-basis: auto; + flex-grow: 1 0 auto; flex-direction: column; > * { @@ -46,7 +44,7 @@ $euiCollapsibleNavWidth: $euiSize * 20; // state. This is useful when you've already hand crafted your own // focus states in OpenSearch Dashboards. :focus { - &:not([class^='eui']):not(.osd-resetFocusState) { + &:not([class^="eui"]):not(.osd-resetFocusState) { @include euiFocusRing; } } @@ -55,7 +53,7 @@ $euiCollapsibleNavWidth: $euiSize * 20; // entrenched inputs. .euiComboBox { // :not() specificity needed to override the above - input:not([class^='eui']):focus { + input:not([class^="eui"]):focus { animation: none !important; } } diff --git a/src/core/public/styles/_index.scss b/src/core/public/styles/_index.scss index 600414402c27..8a09f3a2ba01 100644 --- a/src/core/public/styles/_index.scss +++ b/src/core/public/styles/_index.scss @@ -1,2 +1,2 @@ -@import './base'; -@import './ace_overrides'; +@import "./base"; +@import "./ace_overrides"; diff --git a/src/dev/run_precommit_hook.js b/src/dev/run_precommit_hook.js index 3c6ea215a63f..86a279166aca 100644 --- a/src/dev/run_precommit_hook.js +++ b/src/dev/run_precommit_hook.js @@ -30,7 +30,7 @@ import { run, combineErrors } from '@osd/dev-utils'; import * as Eslint from './eslint'; -import * as Sasslint from './sasslint'; +import * as Stylelint from './stylelint'; import { getFilesForCommit, checkFileCasing } from './precommit_hook'; run( @@ -44,7 +44,7 @@ run( errors.push(error); } - for (const Linter of [Eslint, Sasslint]) { + for (const Linter of [Eslint, Stylelint]) { const filesToLint = Linter.pickFilesToLint(log, files); if (filesToLint.length > 0) { try { diff --git a/src/dev/run_sasslint.js b/src/dev/run_stylelint.js similarity index 70% rename from src/dev/run_sasslint.js rename to src/dev/run_stylelint.js index ef4d30690574..530db170a731 100644 --- a/src/dev/run_sasslint.js +++ b/src/dev/run_stylelint.js @@ -29,11 +29,19 @@ */ import { resolve } from 'path'; +import { buildCLI } from 'stylelint/lib/cli'; -process.argv.push('--no-exit'); // don't exit after encountering a rule error -process.argv.push('--verbose'); // print results +const options = buildCLI(process.argv.slice(2)); + +const stylelintConfigPath = resolve(__dirname, '..', '..', '.stylelintrc.yml'); +const stylelintIgnorePath = resolve(__dirname, '..', '..', '.stylelintignore'); + +if (!options.input.length) { + process.argv.push('**/*.s+(a|c)ss'); +} process.argv.push('--max-warnings', '0'); // return nonzero exit code on any warnings -process.argv.push('--config', resolve(__dirname, '..', '..', '.sass-lint.yml')); // configuration file +process.argv.push('--config', stylelintConfigPath); // configuration file +process.argv.push('--ignore-path', stylelintIgnorePath); // ignore file -// common-js is required so that logic before this executes before loading sass-lint -require('sass-lint/bin/sass-lint'); +// common-js is required so that logic before this executes before loading stylelint +require('stylelint/bin/stylelint'); diff --git a/src/dev/sasslint/index.js b/src/dev/stylelint/index.js similarity index 100% rename from src/dev/sasslint/index.js rename to src/dev/stylelint/index.js diff --git a/src/dev/sasslint/lint_files.js b/src/dev/stylelint/lint_files.js similarity index 64% rename from src/dev/sasslint/lint_files.js rename to src/dev/stylelint/lint_files.js index 2e1b568b8864..ead1fde5bb23 100644 --- a/src/dev/sasslint/lint_files.js +++ b/src/dev/stylelint/lint_files.js @@ -28,10 +28,16 @@ * under the License. */ -import sassLint from 'sass-lint'; +import stylelint from 'stylelint'; import path from 'path'; +import { safeLoad } from 'js-yaml'; +import fs from 'fs'; import { createFailError } from '@osd/dev-utils'; +// load the include globs from .stylelintrc.yml and convert them to regular expressions for filtering files +const stylelintPath = path.resolve(__dirname, '..', '..', '..', '.stylelintrc.yml'); +const styleLintConfig = safeLoad(fs.readFileSync(stylelintPath)); + /** * Lints a list of files with eslint. eslint reports are written to the log * and a FailError is thrown when linting errors occur. @@ -40,28 +46,21 @@ import { createFailError } from '@osd/dev-utils'; * @param {Array} files * @return {undefined} */ -export function lintFiles(log, files) { +export async function lintFiles(log, files) { const paths = files.map((file) => file.getRelativePath()); - const report = sassLint.lintFiles( - paths.join(', '), - {}, - path.resolve(__dirname, '..', '..', '..', '.sass-lint.yml') - ); - - const failTypes = Object.keys( - report.reduce((failTypes, reportEntry) => { - if (reportEntry.warningCount > 0) failTypes.warning = true; - if (reportEntry.errorCount > 0) failTypes.errors = true; - return failTypes; - }, {}) - ); + const options = { + files: paths, + config: styleLintConfig, + formatter: 'string', + ignorePath: path.resolve(__dirname, '..', '..', '..', '.stylelintignore'), + }; - if (!failTypes.length) { - log.success('[sasslint] %d files linted successfully', files.length); - return; + const report = await stylelint.lint(options); + if (report.errored) { + log.error(report.output); + throw createFailError('[stylelint] errors'); + } else { + log.success('[stylelint] %d files linted successfully', files.length); } - - log.error(sassLint.format(report)); - throw createFailError(`[sasslint] ${failTypes.join(' & ')}`); } diff --git a/src/dev/sasslint/pick_files_to_lint.js b/src/dev/stylelint/pick_files_to_lint.js similarity index 79% rename from src/dev/sasslint/pick_files_to_lint.js rename to src/dev/stylelint/pick_files_to_lint.js index fbeeb1ad9640..08e5e35777ef 100644 --- a/src/dev/sasslint/pick_files_to_lint.js +++ b/src/dev/stylelint/pick_files_to_lint.js @@ -28,17 +28,9 @@ * under the License. */ -import fs from 'fs'; -import { safeLoad } from 'js-yaml'; import { makeRe } from 'minimatch'; -import path from 'path'; -// load the include globs from .sass-lint.yml and convert them to regular expressions for filtering files -const sassLintPath = path.resolve(__dirname, '..', '..', '..', '.sass-lint.yml'); -const sassLintConfig = safeLoad(fs.readFileSync(sassLintPath)); -const { - files: { include: includeGlobs }, -} = sassLintConfig; +const includeGlobs = ['**/*.s+(a|c)ss']; const includeRegex = includeGlobs.map((glob) => makeRe(glob)); function matchesInclude(file) { diff --git a/src/plugins/advanced_settings/public/management_app/_advanced_settings.scss b/src/plugins/advanced_settings/public/management_app/_advanced_settings.scss index af45088fa053..82704fc93062 100644 --- a/src/plugins/advanced_settings/public/management_app/_advanced_settings.scss +++ b/src/plugins/advanced_settings/public/management_app/_advanced_settings.scss @@ -28,7 +28,7 @@ * under the License. */ - .mgtAdvancedSettings__field { +.mgtAdvancedSettings__field { + * { margin-top: $euiSize; } @@ -40,11 +40,12 @@ &--unsaved .mgtAdvancedSettings__fieldTitle { // Simulates a left side border without shifting content - box-shadow: -$euiSizeXS 0px $euiColorWarning; + box-shadow: -$euiSizeXS 0 $euiColorWarning; } + &--invalid .mgtAdvancedSettings__fieldTitle { // Simulates a left side border without shifting content - box-shadow: -$euiSizeXS 0px $euiColorDanger; + box-shadow: -$euiSizeXS 0 $euiColorDanger; } @include internetExplorerOnly { @@ -61,14 +62,14 @@ } .mgtAdvancedSettingsForm__unsavedCount { - @include euiBreakpoint('xs') { + @include euiBreakpoint("xs") { display: none; } } .mgtAdvancedSettingsForm__unsavedCountMessage { // Simulates a left side border without shifting content - box-shadow: -$euiSizeXS 0px $euiColorWarning; + box-shadow: -$euiSizeXS 0 $euiColorWarning; padding-left: $euiSizeS; } diff --git a/src/plugins/advanced_settings/public/management_app/index.scss b/src/plugins/advanced_settings/public/management_app/index.scss index 5f473c519dda..9a58ac3c06e2 100644 --- a/src/plugins/advanced_settings/public/management_app/index.scss +++ b/src/plugins/advanced_settings/public/management_app/index.scss @@ -1 +1 @@ -@import './advanced_settings'; +@import "./advanced_settings"; diff --git a/src/plugins/console/public/index.scss b/src/plugins/console/public/index.scss index 370ec54a8553..80810bc73979 100644 --- a/src/plugins/console/public/index.scss +++ b/src/plugins/console/public/index.scss @@ -1 +1 @@ -@import 'styles/index' +@import "styles/index" diff --git a/src/plugins/console/public/styles/_app.scss b/src/plugins/console/public/styles/_app.scss index de63a4c061bd..c149832ec1db 100644 --- a/src/plugins/console/public/styles/_app.scss +++ b/src/plugins/console/public/styles/_app.scss @@ -3,6 +3,7 @@ #consoleRoot { display: flex; flex: 1 1 auto; + // Make sure the editor actions don't create scrollbars on this container // SASSTODO: Uncomment when tooltips are EUI-ified (inside portals) overflow: hidden; @@ -49,9 +50,11 @@ position: absolute; z-index: $euiZLevel1; top: 0; + // Adjust for possible scrollbars right: $euiSize; line-height: 1; + // For IE11 min-width: 40px; } @@ -69,6 +72,7 @@ .conApp__resizer { @include osdResizer; + // Give the aria selection border priority when the divider is selected on IE11 and Chrome z-index: $euiZLevel1; } @@ -79,6 +83,7 @@ position: absolute; left: -1000px; visibility: hidden; + /* by pass any other element in ace and resize bar, but not modal popups */ z-index: $euiZLevel1 + 2; margin-top: 22px; diff --git a/src/plugins/console/public/styles/_index.scss b/src/plugins/console/public/styles/_index.scss index 22dc0e5833d2..e00f2c2b7605 100644 --- a/src/plugins/console/public/styles/_index.scss +++ b/src/plugins/console/public/styles/_index.scss @@ -5,5 +5,5 @@ // conChart__legend--small // conChart__legend-isLoading -@import 'app'; -@import 'components/index'; +@import "app"; +@import "components/index"; diff --git a/src/plugins/console/public/styles/components/_history.scss b/src/plugins/console/public/styles/components/_history.scss index 5ce5cb52351b..bd48849f6dc5 100644 --- a/src/plugins/console/public/styles/components/_history.scss +++ b/src/plugins/console/public/styles/components/_history.scss @@ -1,11 +1,13 @@ .conHistory { @include euiBottomShadow; + padding: $euiSizeM; } .conHistory__body { display: flex; height: $euiSizeXL * 10; + > ul { margin-bottom: 0; } diff --git a/src/plugins/console/public/styles/components/_index.scss b/src/plugins/console/public/styles/components/_index.scss index 9dfef202d125..5266cb35f173 100644 --- a/src/plugins/console/public/styles/components/_index.scss +++ b/src/plugins/console/public/styles/components/_index.scss @@ -1,2 +1,2 @@ -@import 'help'; -@import 'history'; +@import "help"; +@import "history"; diff --git a/src/plugins/dashboard/public/application/_hacks.scss b/src/plugins/dashboard/public/application/_hacks.scss index debcc78792de..d3a98dc3fd7c 100644 --- a/src/plugins/dashboard/public/application/_hacks.scss +++ b/src/plugins/dashboard/public/application/_hacks.scss @@ -3,10 +3,11 @@ /** * Needs to correspond with the react root nested inside angular. */ - #dashboardViewport { +#dashboardViewport { flex: 1; display: flex; flex-direction: column; + [data-reactroot] { flex: 1; } diff --git a/src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss b/src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss index a205e611531b..7259ab9d9f66 100644 --- a/src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss +++ b/src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss @@ -19,6 +19,7 @@ .dshLayout--editing { .react-resizable-handle { @include size($euiSizeL); + z-index: $euiZLevel1; /* 1 */ right: 0; bottom: 0; @@ -31,7 +32,7 @@ * 1. Need to override the react grid layout height when a single panel is expanded. Important is required because * otherwise the height is set inline. */ - .dshLayout-isMaximizedPanel { +.dshLayout-isMaximizedPanel { height: 100% !important; /* 1. */ width: 100%; position: absolute !important; /* 1 */ @@ -66,7 +67,8 @@ /** * Disable transitions from the library on each grid element. */ - transition: none; + transition: none; + /** * Copy over and overwrite the fill color with EUI color mixin (for theming) */ @@ -94,7 +96,9 @@ &.react-draggable-dragging { transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance; + @include euiBottomShadowLarge; + border-radius: $euiBorderRadius; // keeps shadow within bounds } @@ -109,7 +113,7 @@ // When in view-mode only, and on tiny mobile screens, just stack each of the grid-items -@include euiBreakpoint('xs', 's') { +@include euiBreakpoint("xs", "s") { .dshLayout--viewing { .react-grid-item { position: static !important; diff --git a/src/plugins/dashboard/public/application/embeddable/grid/_index.scss b/src/plugins/dashboard/public/application/embeddable/grid/_index.scss index eb393d7603b8..ba7fd27a1473 100644 --- a/src/plugins/dashboard/public/application/embeddable/grid/_index.scss +++ b/src/plugins/dashboard/public/application/embeddable/grid/_index.scss @@ -1 +1 @@ -@import './dashboard_grid'; +@import "./dashboard_grid"; diff --git a/src/plugins/dashboard/public/application/embeddable/panel/_dashboard_panel.scss b/src/plugins/dashboard/public/application/embeddable/panel/_dashboard_panel.scss index 48961110db48..1321cd17067e 100644 --- a/src/plugins/dashboard/public/application/embeddable/panel/_dashboard_panel.scss +++ b/src/plugins/dashboard/public/application/embeddable/panel/_dashboard_panel.scss @@ -8,7 +8,7 @@ // Adjust borders/etc... for non-spaced out and expanded panels .dshLayout-withoutMargins, -.dshDashboardGrid__item--expanded { +.dshDashboardGrid__item--expanded { .embPanel { box-shadow: none; border-radius: 0; @@ -16,8 +16,8 @@ } // Remove border color unless in editing mode -.dshLayout-withoutMargins:not(.dshLayout--editing), -.dshDashboardGrid__item--expanded { +.dshDashboardGrid__item--expanded, +.dshLayout-withoutMargins:not(.dshLayout--editing) { .embPanel { border-color: transparent; } diff --git a/src/plugins/dashboard/public/application/embeddable/panel/_index.scss b/src/plugins/dashboard/public/application/embeddable/panel/_index.scss index 8212aad12abf..b899f02b2639 100644 --- a/src/plugins/dashboard/public/application/embeddable/panel/_index.scss +++ b/src/plugins/dashboard/public/application/embeddable/panel/_index.scss @@ -1 +1 @@ -@import './dashboard_panel'; +@import "./dashboard_panel"; diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/_index.scss b/src/plugins/dashboard/public/application/embeddable/viewport/_index.scss index 56483d9d1019..4a2c66fd46ac 100644 --- a/src/plugins/dashboard/public/application/embeddable/viewport/_index.scss +++ b/src/plugins/dashboard/public/application/embeddable/viewport/_index.scss @@ -1 +1 @@ -@import './dashboard_viewport'; +@import "./dashboard_viewport"; diff --git a/src/plugins/dashboard/public/application/index.scss b/src/plugins/dashboard/public/application/index.scss index 6e158b2ec2e4..bc959543e406 100644 --- a/src/plugins/dashboard/public/application/index.scss +++ b/src/plugins/dashboard/public/application/index.scss @@ -1,11 +1,10 @@ -@import '../../../embeddable/public/variables'; - -@import './embeddable/grid/index'; -@import './embeddable/panel/index'; -@import './embeddable/viewport/index'; +@import "../../../embeddable/public/variables"; +@import "./embeddable/grid/index"; +@import "./embeddable/panel/index"; +@import "./embeddable/viewport/index"; // Temporary hacks -@import './hacks'; +@import "./hacks"; // Prefix all styles with "dsh" to avoid conflicts. // Examples @@ -14,5 +13,4 @@ // dshChart__legend--small // dshChart__legend-isLoading -@import './dashboard_app'; - +@import "./dashboard_app"; diff --git a/src/plugins/data/public/index.scss b/src/plugins/data/public/index.scss index a51fde079f10..68eaf661afed 100644 --- a/src/plugins/data/public/index.scss +++ b/src/plugins/data/public/index.scss @@ -1 +1 @@ -@import './ui/index'; +@import "./ui/index"; diff --git a/src/plugins/data/public/ui/_index.scss b/src/plugins/data/public/ui/_index.scss index 1ca49963f3de..f8998bb14819 100644 --- a/src/plugins/data/public/ui/_index.scss +++ b/src/plugins/data/public/ui/_index.scss @@ -1,10 +1,5 @@ - -@import './filter_bar/index'; - -@import './typeahead/index'; - -@import './saved_query_management/index'; - -@import './query_string_input/index'; - -@import './shard_failure_modal/shard_failure_modal'; \ No newline at end of file +@import "./filter_bar/index"; +@import "./typeahead/index"; +@import "./saved_query_management/index"; +@import "./query_string_input/index"; +@import "./shard_failure_modal/shard_failure_modal"; diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss index 731c9f4d7f18..98a7ac648ad4 100644 --- a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss +++ b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss @@ -1,6 +1,6 @@ // SASSTODO: Probably not the right file for this selector, but temporary until the files get re-organized .globalQueryBar { - padding: 0px $euiSizeS $euiSizeS $euiSizeS; + padding: 0 $euiSizeS $euiSizeS $euiSizeS; } .globalQueryBar:first-child { @@ -19,7 +19,6 @@ min-height: $euiSizeL + $euiSizeXS; // same height as the badges } -// sass-lint:disable quotes .globalFilterGroup__branch { padding: $euiSizeS $euiSizeM 0 0; background-repeat: no-repeat; @@ -42,7 +41,7 @@ max-width: calc(100% - #{$euiSizeXS}); // Width minus margin around each flex itm } -@include euiBreakpoint('xs', 's') { +@include euiBreakpoint("xs", "s") { .globalFilterGroup__wrapper-isVisible { // EUI Flexbox adds too much margin between responded items, this just moves it up margin-top: $euiSize * -1; diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss index df28d66fc9e3..19c55a2d259c 100644 --- a/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss +++ b/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss @@ -16,7 +16,10 @@ &:not(.globalFilterItem-isDisabled) { @include euiFormControlDefaultShadow; - box-shadow: #{$euiFormControlBoxShadow}, inset 0 0 0 1px $osdGlobalFilterItemBorderColor; // Make the actual border more visible + + box-shadow: + #{$euiFormControlBoxShadow}, + inset 0 0 0 1px $osdGlobalFilterItemBorderColor; // Make the actual border more visible } &:focus-within { @@ -32,7 +35,8 @@ font-style: italic; } -.globalFilterItem-isError, .globalFilterItem-isWarning { +.globalFilterItem-isError, +.globalFilterItem-isWarning { text-decoration: none; .globalFilterLabel__value { @@ -56,7 +60,7 @@ position: relative; &::before { - content: ''; + content: ""; position: absolute; top: 0; bottom: 0; diff --git a/src/plugins/data/public/ui/filter_bar/_index.scss b/src/plugins/data/public/ui/filter_bar/_index.scss index 5333aff8b87d..452b6318d5a2 100644 --- a/src/plugins/data/public/ui/filter_bar/_index.scss +++ b/src/plugins/data/public/ui/filter_bar/_index.scss @@ -1,3 +1,3 @@ -@import 'variables'; -@import 'global_filter_group'; -@import 'global_filter_item'; +@import "variables"; +@import "global_filter_group"; +@import "global_filter_item"; diff --git a/src/plugins/data/public/ui/query_string_input/_index.scss b/src/plugins/data/public/ui/query_string_input/_index.scss index 1d955920b8e1..8686490016c5 100644 --- a/src/plugins/data/public/ui/query_string_input/_index.scss +++ b/src/plugins/data/public/ui/query_string_input/_index.scss @@ -1 +1 @@ -@import './query_bar'; +@import "./query_bar"; diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss index 2ebe5bb726c7..096c7c0ad8bc 100644 --- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss +++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss @@ -30,6 +30,7 @@ z-index: $euiZContentMenu; resize: none !important; // When in the group, it will autosize height: $euiFormControlHeight; + // Unlike most inputs within layout control groups, the text area still needs a border. // These adjusts help it sit above the control groups shadow to line up correctly. padding: $euiSizeS; @@ -54,11 +55,13 @@ } } -@include euiBreakpoint('xs', 's') { +@include euiBreakpoint("xs", "s") { .osdQueryBar--withDatePicker { > :first-child { - // Change the order of the query bar and date picker so that the date picker is top and the query bar still aligns with filters + // Change the order of the query bar and date picker so that the date picker is top + // and the query bar still aligns with filters order: 1; + // EUI Flexbox adds too much margin between responded items, this just moves it up margin-top: $euiSizeS * -1; } @@ -66,10 +69,9 @@ } // IE specific fix for the datepicker to not collapse -@include euiBreakpoint('m', 'l', 'xl') { +@include euiBreakpoint("m", "l", "xl") { .osdQueryBar__datePickerWrapper { max-width: 40vw; - // sass-lint:disable-block no-important flex-grow: 0 !important; flex-basis: auto !important; diff --git a/src/plugins/data/public/ui/saved_query_management/_index.scss b/src/plugins/data/public/ui/saved_query_management/_index.scss index 0580e857e849..c715136c51b3 100644 --- a/src/plugins/data/public/ui/saved_query_management/_index.scss +++ b/src/plugins/data/public/ui/saved_query_management/_index.scss @@ -1,2 +1,2 @@ -@import './saved_query_management_component'; -@import './saved_query_list_item'; +@import "./saved_query_management_component"; +@import "./saved_query_list_item"; diff --git a/src/plugins/data/public/ui/saved_query_management/_saved_query_list_item.scss b/src/plugins/data/public/ui/saved_query_management/_saved_query_list_item.scss index bb8365bea3eb..6b2aee1dd45e 100644 --- a/src/plugins/data/public/ui/saved_query_management/_saved_query_list_item.scss +++ b/src/plugins/data/public/ui/saved_query_management/_saved_query_list_item.scss @@ -17,5 +17,6 @@ .osdSavedQueryListItem__labelText { @include euiTextTruncate; + margin-right: $euiSizeXS; } diff --git a/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss b/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss index 22418827eab9..cedc7df5898f 100644 --- a/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss +++ b/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss @@ -19,6 +19,7 @@ .osdSavedQueryManagement__list { @include euiYScrollWithShadows; + max-height: inherit; // Fixes overflow for applied max-height // Left/Right padding is calculated to match the left alignment of the // popover text and buttons diff --git a/src/plugins/data/public/ui/shard_failure_modal/_shard_failure_modal.scss b/src/plugins/data/public/ui/shard_failure_modal/_shard_failure_modal.scss index 6527289f8021..42524ba5b438 100644 --- a/src/plugins/data/public/ui/shard_failure_modal/_shard_failure_modal.scss +++ b/src/plugins/data/public/ui/shard_failure_modal/_shard_failure_modal.scss @@ -1,41 +1,42 @@ // set width and height to fixed values to prevent resizing when you switch tabs .shardFailureModal { - min-height: 75vh; - width: 768px; + min-height: 75vh; + width: 768px; } .shardFailureModal__desc { - // set for IE11, since without it depending on the content the width of the list - // could be much higher than the available screenspace - max-width: 686px; + // set for IE11, since without it depending on the content the width of the list + // could be much higher than the available screenspace + max-width: 686px; } .shardFailureModal__descTitle { - width: 20% !important; - margin-top: $euiSizeS; + width: 20% !important; + margin-top: $euiSizeS; } .shardFailureModal__descValue { - width: 80% !important; - margin-top: $euiSizeS; + width: 80% !important; + margin-top: $euiSizeS; } + .shardFailureModal__keyValueTitle { - padding-right: $euiSizeS; + padding-right: $euiSizeS; } -@include euiBreakpoint('xs','s') { - .shardFailureModal__keyValueTitle { - display: block; - width: 100%; - } - - .shardFailureModal__descTitle { - display: block; - width: 100% !important; - } - - .shardFailureModal__descValue { - display: block; - width: 100% !important; - } -} \ No newline at end of file +@include euiBreakpoint("xs","s") { + .shardFailureModal__keyValueTitle { + display: block; + width: 100%; + } + + .shardFailureModal__descTitle { + display: block; + width: 100% !important; + } + + .shardFailureModal__descValue { + display: block; + width: 100% !important; + } +} diff --git a/src/plugins/data/public/ui/typeahead/_index.scss b/src/plugins/data/public/ui/typeahead/_index.scss index c0ba5f05f589..513b695b6cc8 100644 --- a/src/plugins/data/public/ui/typeahead/_index.scss +++ b/src/plugins/data/public/ui/typeahead/_index.scss @@ -1 +1 @@ -@import 'suggestion'; +@import "suggestion"; diff --git a/src/plugins/data/public/ui/typeahead/_suggestion.scss b/src/plugins/data/public/ui/typeahead/_suggestion.scss index 7d559e926ba6..d4d1cd0af0ff 100644 --- a/src/plugins/data/public/ui/typeahead/_suggestion.scss +++ b/src/plugins/data/public/ui/typeahead/_suggestion.scss @@ -12,12 +12,14 @@ $osdTypeaheadTypes: ( .osdTypeahead__popover--top { @include euiBottomShadowFlat; + border-top-left-radius: $euiBorderRadius; border-top-right-radius: $euiBorderRadius; } .osdTypeahead__popover--bottom { @include euiBottomShadow($adjustBorders: true); + border-bottom-left-radius: $euiBorderRadius; border-bottom-right-radius: $euiBorderRadius; } @@ -27,7 +29,9 @@ $osdTypeaheadTypes: ( .osdTypeahead__popover { max-height: inherit; + @include euiScrollBar; + border: 1px solid; border-color: $euiBorderColor; color: $euiTextColor; @@ -109,6 +113,7 @@ $osdTypeaheadTypes: ( color: $euiColorMediumShade; } + /* stylelint-disable-next-line selector-class-pattern */ .SuggestionItem__text { width: auto; } @@ -125,9 +130,7 @@ $osdTypeaheadTypes: ( } .osdSuggestionItem__type { - flex-grow: 0; - flex-shrink: 0; - flex-basis: auto; + flex: 0 0 auto; width: $euiSizeXL; height: $euiSizeXL; text-align: center; @@ -168,7 +171,7 @@ $osdTypeaheadTypes: ( display: inline-block; } -osdnSuggestionItem--value .osdSuggestionItem__text { +.osdSuggestionItem--value .osdSuggestionItem__text { flex-basis: 50%; flex-grow: 1; } diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index 3416c0bf73d1..f574357c5ff4 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -10,6 +10,7 @@ position: relative; } } + discover-app { flex-grow: 1; } @@ -25,12 +26,13 @@ discover-app { padding-left: $euiSizeXL; padding-right: $euiSizeS; z-index: 1; - @include euiBreakpoint('xs', 's', 'm') { + + @include euiBreakpoint("xs", "s", "m") { padding-left: $euiSizeS; } } -@include euiPanel('.dscWrapper__content'); +@include euiPanel(".dscWrapper__content"); .dscWrapper__content { padding-top: $euiSizeXS; @@ -71,7 +73,6 @@ discover-app { left: 0; z-index: 20; padding-top: $euiSizeM; - opacity: 0.75; text-align: center; background-color: transparent; @@ -96,7 +97,7 @@ discover-app { .dscResults { h3 { - margin: -20px 0 10px 0; + margin: -20px 0 10px; text-align: center; } } @@ -136,20 +137,21 @@ discover-app { z-index: -1; min-height: $euiSizeM; min-width: $euiSizeM; - padding: $euiSizeXS * .5; + padding: $euiSizeXS * 0.5; } &.closed { width: 0 !important; border-right-width: 0; border-left-width: 0; + .dscCollapsibleSidebar__collapseButton { right: -$euiSizeL + 4; } } } -@include euiBreakpoint('xs', 's', 'm') { +@include euiBreakpoint("xs", "s", "m") { .dscCollapsibleSidebar { &.closed { display: none; diff --git a/src/plugins/discover/public/application/angular/_index.scss b/src/plugins/discover/public/application/angular/_index.scss index b0e5b6e3edf7..acc755e4a170 100644 --- a/src/plugins/discover/public/application/angular/_index.scss +++ b/src/plugins/discover/public/application/angular/_index.scss @@ -1,2 +1,2 @@ -@import 'directives/index'; -@import 'context/index'; +@import "directives/index"; +@import "context/index"; diff --git a/src/plugins/discover/public/application/angular/context/_index.scss b/src/plugins/discover/public/application/angular/context/_index.scss index 49293fa1b8ad..4ac09e25eb9c 100644 --- a/src/plugins/discover/public/application/angular/context/_index.scss +++ b/src/plugins/discover/public/application/angular/context/_index.scss @@ -5,4 +5,4 @@ // cxtChart__legend--small // cxtChart__legend-isLoading -@import 'components/action_bar/index'; +@import "components/action_bar/index"; diff --git a/src/plugins/discover/public/application/angular/context/components/action_bar/_index.scss b/src/plugins/discover/public/application/angular/context/components/action_bar/_index.scss index d54e2caffc12..40a446220577 100644 --- a/src/plugins/discover/public/application/angular/context/components/action_bar/_index.scss +++ b/src/plugins/discover/public/application/angular/context/components/action_bar/_index.scss @@ -1 +1 @@ -@import 'action_bar'; +@import "action_bar"; diff --git a/src/plugins/discover/public/application/angular/directives/_index.scss b/src/plugins/discover/public/application/angular/directives/_index.scss index d4b365547b40..01f5bbb6fd57 100644 --- a/src/plugins/discover/public/application/angular/directives/_index.scss +++ b/src/plugins/discover/public/application/angular/directives/_index.scss @@ -1,2 +1,2 @@ -@import 'no_results'; -@import 'histogram'; +@import "no_results"; +@import "histogram"; diff --git a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss b/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss index 8653eccb4910..2bd50ba768d7 100644 --- a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss +++ b/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss @@ -3,6 +3,7 @@ */ doc-table { @include euiScrollBar; + overflow: auto; flex: 1 1 100%; flex-direction: column; /* 1 */ diff --git a/src/plugins/discover/public/application/angular/doc_table/components/_index.scss b/src/plugins/discover/public/application/angular/doc_table/components/_index.scss index 6a294c1ed173..25065a969b9b 100644 --- a/src/plugins/discover/public/application/angular/doc_table/components/_index.scss +++ b/src/plugins/discover/public/application/angular/doc_table/components/_index.scss @@ -1,2 +1,2 @@ -@import 'table_header'; -@import 'table_row/index'; +@import "table_header"; +@import "table_row/index"; diff --git a/src/plugins/discover/public/application/angular/doc_table/components/_table_header.scss b/src/plugins/discover/public/application/angular/doc_table/components/_table_header.scss index e16bfbc72836..7b4c14f6a856 100644 --- a/src/plugins/discover/public/application/angular/doc_table/components/_table_header.scss +++ b/src/plugins/discover/public/application/angular/doc_table/components/_table_header.scss @@ -1,14 +1,17 @@ .osdDocTableHeader { white-space: nowrap; } + .osdDocTableHeader button { margin-left: $euiSizeXS; } + .osdDocTableHeader__move, .osdDocTableHeader__sortChange { opacity: 0; - th:hover &, - &:focus { + + &:focus, + th:hover & { opacity: 1; } } diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_cell.scss b/src/plugins/discover/public/application/angular/doc_table/components/table_row/_cell.scss index c706ea1dcb8e..5285e09c241d 100644 --- a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_cell.scss +++ b/src/plugins/discover/public/application/angular/doc_table/components/table_row/_cell.scss @@ -3,7 +3,7 @@ } .osdDocTableCell__toggleDetails { - padding: 4px 0 0 0!important; + padding: 4px 0 0 !important; } .osdDocTableCell__filter { diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_details.scss b/src/plugins/discover/public/application/angular/doc_table/components/table_row/_details.scss index 02e16a3bb55a..4014cdab62d4 100644 --- a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_details.scss +++ b/src/plugins/discover/public/application/angular/doc_table/components/table_row/_details.scss @@ -8,7 +8,6 @@ // Overwrite the border on the bootstrap table .osdDocTableDetails__row { - > td { // Offsets negative margins from an inner flex group padding: $euiSizeL !important; @@ -22,4 +21,3 @@ border-top: none !important; } } - diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_index.scss b/src/plugins/discover/public/application/angular/doc_table/components/table_row/_index.scss index c7ccdaa39ff6..56530bf93330 100644 --- a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_index.scss +++ b/src/plugins/discover/public/application/angular/doc_table/components/table_row/_index.scss @@ -1,3 +1,3 @@ -@import 'cell'; -@import 'details'; -@import 'open'; +@import "cell"; +@import "details"; +@import "open"; diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_open.scss b/src/plugins/discover/public/application/angular/doc_table/components/table_row/_open.scss index 701699929208..0bdcee3538b0 100644 --- a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_open.scss +++ b/src/plugins/discover/public/application/angular/doc_table/components/table_row/_open.scss @@ -15,7 +15,7 @@ * re-render which is SLOW. */ - .osdDocTableOpen__button { +.osdDocTableOpen__button { appearance: none; background-color: transparent; padding: 0; diff --git a/src/plugins/discover/public/application/angular/doc_table/index.scss b/src/plugins/discover/public/application/angular/doc_table/index.scss index 3663d807851c..5b9dc82adb16 100644 --- a/src/plugins/discover/public/application/angular/doc_table/index.scss +++ b/src/plugins/discover/public/application/angular/doc_table/index.scss @@ -1,2 +1,2 @@ -@import 'doc_table'; -@import 'components/index'; +@import "doc_table"; +@import "components/index"; diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index be79fab49294..91b66fc84297 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -13,6 +13,7 @@ vertical-align: top; padding-top: 2px; } + .osdDocViewer__field { padding-top: 8px; } @@ -41,6 +42,7 @@ .osdDocViewer__field { white-space: nowrap; } + .osdDocViewer__buttons { width: 60px; @@ -68,4 +70,3 @@ .osdDocViewer__warning { margin-right: $euiSizeS; } - diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_details.scss b/src/plugins/discover/public/application/components/sidebar/discover_field_details.scss index f4b3eed741f9..7bf0892d0148 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_field_details.scss +++ b/src/plugins/discover/public/application/components/sidebar/discover_field_details.scss @@ -1,5 +1,6 @@ .dscFieldDetails__visualizeBtn { @include euiFontSizeXS; + height: $euiSizeL !important; min-width: $euiSize * 4; } diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss index f130b0399f46..9c80e0afa600 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss @@ -14,7 +14,8 @@ } .dscIndexPattern__triggerButton { - @include euiTitle('xs'); + @include euiTitle("xs"); + line-height: $euiSizeXXL; } @@ -44,7 +45,7 @@ .dscSidebarItem { &:hover, &:focus-within, - &[class*='-isActive'] { + &[class*="-isActive"] { .dscSidebarItem__action { opacity: 1; } @@ -62,10 +63,12 @@ &:focus { opacity: 1; /* 2 */ } + font-size: $euiFontSizeXS; padding: 2px 6px !important; height: 22px !important; min-width: auto !important; + .euiButton__content { padding: 0 4px; } diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable.scss b/src/plugins/discover/public/application/embeddable/search_embeddable.scss index 0618db996aad..e953968495e7 100644 --- a/src/plugins/discover/public/application/embeddable/search_embeddable.scss +++ b/src/plugins/discover/public/application/embeddable/search_embeddable.scss @@ -5,7 +5,8 @@ .embPanel { .osdDocTable__container { @include euiScrollBar; /* 2 */ + flex: 1 1 0; /* 1 */ overflow: auto; /* 1 */ } -} \ No newline at end of file +} diff --git a/src/plugins/discover/public/application/index.scss b/src/plugins/discover/public/application/index.scss index 5aa353828274..b9f191ac6d69 100644 --- a/src/plugins/discover/public/application/index.scss +++ b/src/plugins/discover/public/application/index.scss @@ -1,2 +1,2 @@ -@import 'angular/index'; -@import 'discover'; +@import "angular/index"; +@import "discover"; diff --git a/src/plugins/embeddable/public/_variables.scss b/src/plugins/embeddable/public/_variables.scss index 1c5b1664eab6..0c49866d36ba 100644 --- a/src/plugins/embeddable/public/_variables.scss +++ b/src/plugins/embeddable/public/_variables.scss @@ -1 +1 @@ -$embEditingModeHoverColor: transparentize($euiColorWarning, lightOrDarkTheme(.9, .7)); +$embEditingModeHoverColor: transparentize($euiColorWarning, lightOrDarkTheme(0.9, 0.7)); diff --git a/src/plugins/embeddable/public/index.scss b/src/plugins/embeddable/public/index.scss index ed80b3f9983e..b8791273c382 100644 --- a/src/plugins/embeddable/public/index.scss +++ b/src/plugins/embeddable/public/index.scss @@ -1,3 +1,3 @@ -@import './variables'; -@import './lib/panel/index'; -@import './lib/panel/panel_header/index'; +@import "./variables"; +@import "./lib/panel/index"; +@import "./lib/panel/panel_header/index"; diff --git a/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss b/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss index cdc0f9f0e045..0c0a4f8a3e1b 100644 --- a/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss +++ b/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss @@ -33,12 +33,14 @@ .embPanel__header { flex: 0 0 auto; display: flex; + // ensure menu button is on the right even if the title doesn't exist justify-content: flex-end; } .embPanel__title { - @include euiTitle('xxxs'); + @include euiTitle("xxxs"); + overflow: hidden; line-height: 1.5; flex-grow: 1; @@ -68,6 +70,7 @@ .embPanel__placeholderTitleText { @include euiTextTruncate; + font-weight: $euiFontWeightRegular; color: $euiColorMediumShade; } @@ -156,7 +159,6 @@ justify-content: center; flex-direction: column; overflow: auto; - text-align: center; padding: $euiSizeS; } diff --git a/src/plugins/embeddable/public/lib/panel/_index.scss b/src/plugins/embeddable/public/lib/panel/_index.scss index ff8960ac729c..5f04b153c6b4 100644 --- a/src/plugins/embeddable/public/lib/panel/_index.scss +++ b/src/plugins/embeddable/public/lib/panel/_index.scss @@ -1 +1 @@ -@import './embeddable_panel'; +@import "./embeddable_panel"; diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/_index.scss b/src/plugins/embeddable/public/lib/panel/panel_header/_index.scss index b6cea833f65c..bc3c524066f5 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/_index.scss +++ b/src/plugins/embeddable/public/lib/panel/panel_header/_index.scss @@ -1 +1 @@ -@import './panel_options_menu_form'; +@import "./panel_options_menu_form"; diff --git a/src/plugins/expressions/public/index.scss b/src/plugins/expressions/public/index.scss index c2be1c527a8b..70e239126f5e 100644 --- a/src/plugins/expressions/public/index.scss +++ b/src/plugins/expressions/public/index.scss @@ -7,4 +7,4 @@ // expChart__legend--small // expChart__legend-isLoading -@import './expression_renderer'; +@import "./expression_renderer"; diff --git a/src/plugins/home/public/application/components/_index.scss b/src/plugins/home/public/application/components/_index.scss index 5e2f58c7ebef..2c66b7bbdd31 100644 --- a/src/plugins/home/public/application/components/_index.scss +++ b/src/plugins/home/public/application/components/_index.scss @@ -5,11 +5,10 @@ // homChart__legend--small // homChart__legend-isLoading -@import 'home'; -@import 'add_data'; -@import 'sample_data_set_cards'; -@import 'solutions_section'; -@import 'synopsis'; -@import 'welcome'; - -@import 'tutorial/tutorial'; +@import "home"; +@import "add_data"; +@import "sample_data_set_cards"; +@import "solutions_section"; +@import "synopsis"; +@import "welcome"; +@import "tutorial/tutorial"; diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss index 1f1026b31ab8..b6d74387547c 100644 --- a/src/plugins/home/public/application/components/_solutions_section.scss +++ b/src/plugins/home/public/application/components/_solutions_section.scss @@ -35,17 +35,17 @@ .homSolutions__content { min-height: $euiSize * 16; - @include euiBreakpoint('xs', 's') { + @include euiBreakpoint("xs", "s") { flex-direction: column; } } .homSolutions__group { - @include euiBreakpoint('l') { + @include euiBreakpoint("l") { max-width: calc(75% - #{$euiSizeM * 2}); } - @include euiBreakpoint('xl') { + @include euiBreakpoint("xl") { max-width: calc(50% - #{$euiSizeM * 2}); } } @@ -59,6 +59,7 @@ &:hover, &:focus { @include euiSlightShadowHover; + transform: translateY(-2px); .homSolutionPanel__title { @@ -98,37 +99,32 @@ justify-content: center; padding: $euiSize; - @include euiBreakpoint('xs', 's') { + @include euiBreakpoint("xs", "s") { text-align: center; } } +/* stylelint-disable-next-line no-duplicate-selectors */ .homSolutionPanel__header { background-color: $euiColorPrimary; - //background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQYAAAFjCAYAAADfDKXVAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAfiSURBVHgB7d1JblRZGobh45SrhJiWGOQ6EENLSKyABTBmOcwRq2EnTKtUdInBuEln/OkMdB3HTTjiNqd5HinA3YBUSq++24UPUkq/J+jE+/fv09HRURrD27dv0+vXr1OLfksAG4QByAgDkBEGICMMQEYYgIwwABlhADLCAGSEAcgIA5ARBiAjDEBGGICMMAAZYQAywgBkhAHICAOQEQZg05/CAGy6FAYgIwzApnNhADLCAGy6EAZgkzAAGVclgIyTj0DGYgAyZ8IADP2ZLAZgw1n8IQzA0Hn8IQzA0EX8IQzAkEMJICMMwDURhcv44DDBlp4+fZrevHmTxvLq1av04cOHRDHO1h8IA1t7/PhxOjo6SjTrdP2BQwlg7ddiEAYgxGXK8/UnwgCEs+EnwgCEk+EnwgCE0+EnwgDEYcTF8AvCAJxufkEYgO+bXxAG6Nu1y5RrwgB9O7npi8IAfTu+6YvCAP3KrkasCQP06/i2bwgD9Ov0tm8IA/QpLlFe3PZNYYA+/bjrm8IA/YmTjqd3/YAwQH+O7/sBYYC+xHmFH/f9kDBAX/7Y5oeEAfqx1VoIwgD9+L7tDwoD9GHrtRCEAfoQ5xYutv1hYYD2PWgtBGGA9m11JWJIGKBtD14LQRigbf9POxAGaNedT1DeRRigTRGEb2lHwgBtetDlyU3CAO35mXY44TgkDNCWy9XrS9qTMEBb9jqEWBMGaEdchbj3TVi2IQzQhr2uQmwSBmjD5zTCIcSaMED94rzCaRqRMEDd4tLkaIcQa8IA9YpDh70vTd5EGKBOcb9CPCA12nmFIWGAOo16snGTMEB94mTjSZqQMEBdIgqjn2zcJAxQj7ircfIoBGGAOsTtzl/TTIQByhe/nXqSy5K3EQYoW0Rhp/dt3MdhAkoVdzV+Slf3LMxKGKBMcU5h1sOHIYcSUJ5FoxAsBijLLPcp3EcYoBxxOXKUd2DalzDA8uLk4sc08nsq7EMYYFnxINRkT0nuShhgOfEgVDwlOfvlyPsIAyyjmPMJNxEGmFccMsRKKOZ8wk2EAeZT7KHDJmGA6UUI4v6EYg8dNgkDTCued4i7GIu66nAfYYBpVLcShoQBxlflShgSBhhP1SthSBhgHNWvhCFhgP00sxKGhAF29OTJkyKfcxiDN2qBHb18+TIOH5qLQhAGICMMQEYYgIwwABlhADLCAGSEAcgIA5ARBiAjDEBGGICMMNCTy0ePHhX/RqwlEAZ6EQ88/e/Zs2dniXt57JrWNfl+CVMTBloW6+BTavTR6CkJA62KlfAtsRNhoDWxEr788zc7EgZaYiWMRBhogZUwMmGgdlbCBISBWlkJExIGamQlTEwYqImVMBNhoBZx5+LXxCyEgdLFXYufV6/TxGyEgZLFSojzCZ6InJkwUCIrYWHCQGmshAIIA6WwEgoiDJTASiiMMLCYw8NDK6FQ3tqNxbx79+5jEoUiCQOLef78uUOHQgkDkBEGICMMQEYYgIwwABlhADLCAGSEAcgIA5ARBiAjDEBGGNjWxYsXL/5IdOFg9fo9wd3+fr+Ey8vLf63+/k8az38PDg5m/RX1q/+G+Pf/O43j++rf/yU1yPsxcBfvl9ApYeA23lWpY8LAJisBYeAaK4G/CQMhQhAr4SRBEgauYhBRsBL4RRj6ZSVwK2Hok5XAnYShL1YCWxGGflgJbE0Y2mcl8GDC0DYrgZ0IQ5usBPYiDO35uXrFE3+zPrVIW4ShHbES4nbm4wR7EoY2WAmMShjqZiUwCWGol5XAZIShPlYCkxOGulgJzEIY6mAlMCthKJ+VwOyEoVxWAosRhjJZCSxKGMpiJVAEYSiHlUAxhGF5VgLFEYZlWQkUSRiWYSVQNGGYn5VA8YRhPlYC1RCGeVgJVEUYpmUlUCVhmI6VQLWEYXxWAtUThnFZCTRBGMZhJdAUYdiflUBzhGF3VgLNEobdnK1en5KVQKOE4eFiJXxL0DBh2F6shC///A1NE4btWAl0RRjuZiXQJWG4nZVAt4QhZyXQPWG4zkqAJAxrVgIMCMPVnYtfE/BLz2GIuxY/r16nCbim1zDESojzCZeJ3sTh4lj/389To3oLg5XQuYODA4eNW+gpDFYCbKmHMFgJ8ECth8FKgB20GgYrAfbQYhisBNhTS2GwEmAkrYTBSoAR1R4GKwEmUHMYrASYSI1hsBJgYrWFwUqAGdQSBisBZlRDGKwEmFnJYbASYCGlhsFKgAWVFgYrAQpQUhisBChECWGwEqAwS4fBSoACLRUGKwEKtkQYrAQo3JxhsBKgEnOFwUqAikwdhghBrISTBFRjyjBEDCIKVgJUZoowOJcAlRs7DM4lQAPGCsPP1etbshKgCfuGIQ4bYiH8SEAzdg1DHCrEQjhODhugOQ8NgyBAB7YNgyBAR+4LgyBAh24Lg6sM0LFhGGIRfE9XdywKAnQswrBeB2fJ4QKQrsLwMQEM/JYANggDkBEGICMMQEYYgIwwABlhADLCAGSEAcgIA5ARBiAjDEBGGICMMAAZYQAywgBkhAHICAOQEQYgIwxARhiAjDAAGWEAMg/9bdf0LX4h0XkCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACq8hdouPfUCk+KHQAAAABJRU5ErkJggg=='), - // url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAFKCAYAAAAwgcXoAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAjGSURBVHgB7d27ctRaFoDh1WBzsQ9wLkVsngHHfglSIOUdgJQiJSfmIUjhJUwGjiGaU7hmzoB7vLA1GPCt21vSlvR9Vao+5lAFbbf+EktbUgQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUaxYAEzCfz/NldX9biTK+zGaz/0aLSv1FAYbg6v52I8r4e39rNdCXAoAqCTRApQQaoFICDVApgQaolEADVEqgASol0ACVEmiASgk0QKUEGqBSAg1QKYEGqJRAA1RKoAEqJdAAlRJogEp5ogowJV/3t/9EGV8DAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFjELABOMZ/Po6TZrL/sDO29rATA6Vb3t/UoY29/+1f04DDO1w63Ev59uLVGoIGz5GHi9Sjja/QU6EPZvFLv5Uu07FIAUCWBBqiUQANUSqABKiXQAJUSaIBKCTRApQQaoFICDVApgQaolEADVEqgASol0ACVEmiASgl0ANRJoAEqJdAAlfJEFeAs+RSUv6OMsg8FXNw/Ue69/BMAAAAAAAAAAAAAAAAAAAAAQCdmAcBpspNn3flzL1q4EZRAA2PRhLR5vXz4683ryk+/7+j/ixO+vqiM9t6Rr78e899ffvq9za9/FWigdhnNbNVqfA/wyuHr5fgxxqMi0EDfMq4Z3ya4K4fbaMN7XgINdKGJ8OUjW/M1JxBooKSj4c3X5mhYa5bgmwYsoxlHXA0hbo1vJnCW5gRds10Jo4lOCDTws4xvRjiPjvOoeDXohUDDtB09Or4W31dTUAE/CJiWJshNjK8E1RJoGDdBHjCBhvHJCBtZjIAfHAxf7scZ46uHr/brkfCDhGFqVllcCWOL0RJoGIajs+S16Hjfnc3K/XHzefG7cp7b0N6HQEO9qhhdbG5uxosXL6KET58+xb1796IPGef79+/Ho0ePooSXL1/Gq1evok0rAdSkiXIeJVdxgm9tbS22traihJ2dnejTxsZGsffy+vXraJtAQ/+qizJ1EGjoRzNTvhGizAkEGrqVKy56OdHH8Ag0tC9vPpRBXg9RZgECDe3IEGeU82jZOmWWItBQlhEGxQg0XFyG+Lc4CLN9imJ8mGB5ebScc+W8kMTRMsUJNCzGbJnOCDScj5UYdE6g4XR5lHwjHC3TA4GGXx299FqY6Y1Aw3fNagxjDKog0CDMVEqgmbIcX+QY43pAhQSaKXLij0EQaKZEmJfU52OqShvSexFopkCYL2B7ezsePnwYJezu7kZfMsz5FJQPHz5ECe/evYu2OSHCmAkzgybQjJEwMwoCzZgIM6Mi0IxB3ifjZhxc/QejIdAMWX5+84h5PWCEBJohcuUfk+DDzdBklPOo2WeX0fMhZyjyxN/vcTBvhkkQaGq3GgcnAK3MYHIEmlo5AcjkCTQ1MmeGsANQlxxj5DhjNQCBpgr5ObwV7ssMPxBo+macASewU9AX982AMwg0XbM6A85JoOmSi01gAQJNF9xtDpYg0LTNSUBYkp2GtuRRc44znASEJQk0bXDUDAXYgSjJUTMUJNCU4qgZCrMzcVGOmqElAs1F5LK5jLPPEbTAjsUyXA0IHRBoFuVqQOiIQLOIPGr+LZic2axcKubzefSl5PtIbb+XSwFny6Plv0KcJ2lrayv29vaKbO/fv4++ZJyfPHlS7L08fvw42rYScDonAqEnAs1JnAiEngk0x8mRxh/h2YDQK4HmZ2txcGtQIw3omUBzVIbZSAMqIdAkIw2okEDjwhOolEBPW44zbgZQJYGepjwBeGt/ux5AtQR6epqrAo00oHICPS05b/4zLKGDQRDo6TBvhoER6GmwvhkGSKDHzfpmGDCBHi8nA2HgBHqcnAyEERDo8XEyEEZCoMfFI6loRZ+PqSptSO/FP4HHI++n4cpAWrGxsRGl7OzsRF/W1tbi9u3bUcLHjx9jd3c32iTQw5c/wzwZaKUGjIxAD5uVGjBiAj1c4gwjJ9DDlOOMjLOfH4yYHXx4PDMQJsJOPiwZ51sBTIJAD4c1zjAxAj0M4gwTJND1E2eYKIGum/s4w4QJdL1cug0TJ9B1EmdAoCskzsA3Al0XcQb+T6DrIc7ADwS6DuIM/EKg+yfOwLEEul/iDJxIoPsjzsCpLgV9yCsExRk4lUB3L++t4fJt4ExGHN1y4yPg3AS6O+IMLESguyHOwMLMoNuXj6kSZ2BhAt2ua+EZgsCSBLo9q3Gw1hlgKStBGy7vb3+EGT8jsL6+Hpubm1HK27dvoy8bGxvfthJ2dna+bW0S6PIyzn8dvsLg3b17N968eRMlZNDu3LkTfZjNZvHgwYN49uxZlPD06dN4/vx5tMmIo6w8YhZnoAiBLuvPEGegEIEuJ++vcSUAChHoMtxfAyhOoC8uw+xCFKA4gb6YXOt8MwBaINDLa9Y6A7RCoJdjOR3QOoFeTl7CLc5AqwR6cbli41oAtEygF2PFBtAZgT4/KzaATgn0+VixAXROoM8n4+ykINApgT5bjjVWA6BjAn269XCPDaAnAn2yHGk4KQj8Yj6fRxc8UeV4zVNRYPJ2d3dje3s7Smj7EVFn+fz5c5H3koHO70vbPDPveHlS0MUoQK+MOH7lSkGgCgL9o3wiiisFgSoI9Hc5d/49ACoh0N+5Qx1QFYE+kHNnD3wFqiLQ5s5ApaYeaHNnoFpTD3SONsydgSpNOdB5j43rAVCpqQbafTaA6k010O6zAVRvioE2dwYGYWqBtqQOGIwpBdqSOmBQphRoow1gUKYS6OthSR0wMFMIdB413wiAgZlCoI02gEEae6CNNoDBGnOgjTaAQRtzoI02gEEba6CNNoDBG2OgZ2G0AYzA/wBP5hsF50HhogAAAABJRU5ErkJggg=='); background-repeat: no-repeat; background-position: top 0 left 0, bottom 0 right 0; background-size: $euiSizeXL * 4, $euiSizeXL * 6; .homSolutionPanel--enterpriseSearch & { background-color: $euiColorSecondary; - //background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC'), - // url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII='); background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; background-size: $euiSize * 1.25, $euiSizeXL; } .homSolutionPanel--observability & { background-color: $euiColorAccent; - //background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC'); background-position: top $euiSizeS right $euiSizeS; background-size: $euiSizeL * 1.5; } .homSolutionPanel--securitySolution & { background-color: $euiColorDarkestShade; - //background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII='); background-position: top $euiSizeS left $euiSizeS; background-size: $euiSizeL * 2; } @@ -136,7 +132,7 @@ .homSolutionPanel__customIconContainer { height: 50px; - padding: 5px 5px 5px 5px; + padding: 5px; } .homSolutionPanel__customIcon { diff --git a/src/plugins/home/public/application/components/_welcome.scss b/src/plugins/home/public/application/components/_welcome.scss index 0c5a7d7553d9..9b821be7c400 100644 --- a/src/plugins/home/public/application/components/_welcome.scss +++ b/src/plugins/home/public/application/components/_welcome.scss @@ -10,13 +10,14 @@ .homWelcome__logo { margin-bottom: $euiSizeXL; + @include opensearchDashboardsCircleLogo; @include euiBottomShadowMedium; } .homWelcome__customLogoContainer { height: 80px; - padding: 10px 10px 10px 10px; + padding: 10px; } .homWelcome__customLogo { diff --git a/src/plugins/home/public/application/index.scss b/src/plugins/home/public/application/index.scss index 841415620d69..6cfd4ac975c3 100644 --- a/src/plugins/home/public/application/index.scss +++ b/src/plugins/home/public/application/index.scss @@ -1 +1 @@ -@import 'components/index'; +@import "components/index"; diff --git a/src/plugins/index_pattern_management/public/_templates.scss b/src/plugins/index_pattern_management/public/_templates.scss index 5303537bddab..4c32d1302b7a 100644 --- a/src/plugins/index_pattern_management/public/_templates.scss +++ b/src/plugins/index_pattern_management/public/_templates.scss @@ -4,8 +4,7 @@ padding: $euiSizeL; border-radius: 0 0 $euiBorderRadius $euiBorderRadius; - // sass-lint:disable-block mixins-before-declarations - @include euiBreakpoint('xs', 's') { + @include euiBreakpoint("xs", "s") { text-align: center; } } diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/empty_index_pattern_prompt.scss b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/empty_index_pattern_prompt.scss index 11ac55b098a5..50e6eda507cd 100644 --- a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/empty_index_pattern_prompt.scss +++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/empty_index_pattern_prompt.scss @@ -1,23 +1,24 @@ -@import '../../../variables'; -@import '../../../templates'; +@import "../../../variables"; +@import "../../../templates"; .inpEmptyIndexPatternPrompt { // override EUI specificity - max-width: $inpEmptyStateMaxWidth !important; // sass-lint:disable-line no-important + max-width: $inpEmptyStateMaxWidth !important; } .inpEmptyIndexPatternPrompt__footer { @extend %inp-empty-state-footer; + // override EUI specificity - align-items: baseline !important; // sass-lint:disable-line no-important + align-items: baseline !important; } .inpEmptyIndexPatternPrompt__title { // override EUI specificity - width: auto !important; // sass-lint:disable-line no-important + width: auto !important; } -@include euiBreakpoint('xs', 's') { +@include euiBreakpoint("xs", "s") { .inpEmptyIndexPatternPrompt__illustration > svg { width: $euiSize * 12; height: auto; diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.scss b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.scss index 37889b9d7c48..2dfdd5de5f85 100644 --- a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.scss +++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.scss @@ -1,9 +1,9 @@ -@import '../../../variables'; -@import '../../../templates'; +@import "../../../variables"; +@import "../../../templates"; .inpEmptyState { // override EUI specificity - max-width: $inpEmptyStateMaxWidth !important; // sass-lint:disable-line no-important + max-width: $inpEmptyStateMaxWidth !important; } .inpEmptyState__cardGrid { diff --git a/src/plugins/input_control_vis/public/components/editor/_index.scss b/src/plugins/input_control_vis/public/components/editor/_index.scss index 9af8f8d6e822..8e52009dc850 100644 --- a/src/plugins/input_control_vis/public/components/editor/_index.scss +++ b/src/plugins/input_control_vis/public/components/editor/_index.scss @@ -1 +1 @@ -@import './control_editor'; +@import "./control_editor"; diff --git a/src/plugins/input_control_vis/public/components/vis/_index.scss b/src/plugins/input_control_vis/public/components/vis/_index.scss index a428a7c1782e..30c975058ba1 100644 --- a/src/plugins/input_control_vis/public/components/vis/_index.scss +++ b/src/plugins/input_control_vis/public/components/vis/_index.scss @@ -1 +1 @@ -@import './vis'; +@import "./vis"; diff --git a/src/plugins/input_control_vis/public/index.scss b/src/plugins/input_control_vis/public/index.scss index 42fded23d776..9b46d9b0bc8f 100644 --- a/src/plugins/input_control_vis/public/index.scss +++ b/src/plugins/input_control_vis/public/index.scss @@ -5,5 +5,5 @@ // icvChart__legend--small // icvChart__legend-isLoading -@import './components/editor/index'; -@import './components/vis/index'; +@import "./components/editor/index"; +@import "./components/vis/index"; diff --git a/src/plugins/inspector/public/index.scss b/src/plugins/inspector/public/index.scss index 5d32f88bccbc..f127509638f3 100644 --- a/src/plugins/inspector/public/index.scss +++ b/src/plugins/inspector/public/index.scss @@ -1 +1 @@ -@import 'views/index'; +@import "views/index"; diff --git a/src/plugins/inspector/public/views/_index.scss b/src/plugins/inspector/public/views/_index.scss index 620a33e96584..acc808ff02db 100644 --- a/src/plugins/inspector/public/views/_index.scss +++ b/src/plugins/inspector/public/views/_index.scss @@ -1,2 +1,2 @@ -@import './data/index'; -@import './requests/index'; +@import "./data/index"; +@import "./requests/index"; diff --git a/src/plugins/inspector/public/views/data/_data_table.scss b/src/plugins/inspector/public/views/data/_data_table.scss index 4a7b5ea20704..093b3e7c7ac7 100644 --- a/src/plugins/inspector/public/views/data/_data_table.scss +++ b/src/plugins/inspector/public/views/data/_data_table.scss @@ -2,7 +2,7 @@ opacity: 0; } -.insDataTableFormat__table tr:hover .insDataTableFormat__filter, -.insDataTableFormat__filter:focus { +.insDataTableFormat__filter:focus, +.insDataTableFormat__table tr:hover .insDataTableFormat__filter { opacity: 1; } diff --git a/src/plugins/inspector/public/views/data/_index.scss b/src/plugins/inspector/public/views/data/_index.scss index fbd150dcf653..814b451e9b72 100644 --- a/src/plugins/inspector/public/views/data/_index.scss +++ b/src/plugins/inspector/public/views/data/_index.scss @@ -1 +1 @@ -@import './data_table'; +@import "./data_table"; diff --git a/src/plugins/inspector/public/views/requests/_index.scss b/src/plugins/inspector/public/views/requests/_index.scss index 59e9c045a18c..0cc84ab7c97b 100644 --- a/src/plugins/inspector/public/views/requests/_index.scss +++ b/src/plugins/inspector/public/views/requests/_index.scss @@ -1 +1 @@ -@import './requests'; +@import "./requests"; diff --git a/src/plugins/management/public/components/management_app/management_app.scss b/src/plugins/management/public/components/management_app/management_app.scss index 00b3e51fb53e..9b0d1dcdb63b 100644 --- a/src/plugins/management/public/components/management_app/management_app.scss +++ b/src/plugins/management/public/components/management_app/management_app.scss @@ -1,6 +1,5 @@ - // Hack because the management wrapper is flat HTML and needs a class .mgtPage__body { - max-width: map-get($euiBreakpoints, 'xl'); + max-width: map-get($euiBreakpoints, "xl"); margin: 0 auto; } diff --git a/src/plugins/management/public/components/management_sidebar_nav/management_sidebar_nav.scss b/src/plugins/management/public/components/management_sidebar_nav/management_sidebar_nav.scss index a148c1e141e8..7b134f141d78 100644 --- a/src/plugins/management/public/components/management_sidebar_nav/management_sidebar_nav.scss +++ b/src/plugins/management/public/components/management_sidebar_nav/management_sidebar_nav.scss @@ -3,7 +3,7 @@ margin-right: $euiSize; } -@include euiBreakpoint('xs','s') { +@include euiBreakpoint("xs","s") { .mgtSideBarNav { width: auto; margin-bottom: $euiSize; diff --git a/src/plugins/maps_legacy/public/map/_leaflet_overrides.scss b/src/plugins/maps_legacy/public/map/_leaflet_overrides.scss index 2018878e2708..b75c1d7dde25 100644 --- a/src/plugins/maps_legacy/public/map/_leaflet_overrides.scss +++ b/src/plugins/maps_legacy/public/map/_leaflet_overrides.scss @@ -4,18 +4,20 @@ $temp-euiTooltipBackground: tintOrShade($euiColorFullShade, 25%, 90%); $temp-euiTooltipText: $euiColorGhost; // Converted leaflet icon sprite into background svg for custom coloring (dark mode) +/* stylelint-disable-next-line max-line-length */ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' height='60' width='600'%3E%3Cg fill='#{hexToRGB($euiTextColor)}'%3E%3Cg%3E%3Cpath d='M18 36v6h6v-6h-6zm4 4h-2v-2h2v2z'/%3E%3Cpath d='M36 18v6h6v-6h-6zm4 4h-2v-2h2v2z'/%3E%3Cpath d='M23.142 39.145l-2.285-2.29 16-15.998 2.285 2.285z'/%3E%3C/g%3E%3Cpath d='M100 24.565l-2.096 14.83L83.07 42 76 28.773 86.463 18z'/%3E%3Cpath d='M140 20h20v20h-20z'/%3E%3Cpath d='M221 30c0 6.078-4.926 11-11 11s-11-4.922-11-11c0-6.074 4.926-11 11-11s11 4.926 11 11z'/%3E%3Cpath d='M270,19c-4.971,0-9,4.029-9,9c0,4.971,5.001,12,9,14c4.001-2,9-9.029,9-14C279,23.029,274.971,19,270,19z M270,31.5c-2.484,0-4.5-2.014-4.5-4.5c0-2.484,2.016-4.5,4.5-4.5c2.485,0,4.5,2.016,4.5,4.5C274.5,29.486,272.485,31.5,270,31.5z'/%3E%3Cg%3E%3Cpath d='M337,30.156v0.407v5.604c0,1.658-1.344,3-3,3h-10c-1.655,0-3-1.342-3-3v-10c0-1.657,1.345-3,3-3h6.345 l3.19-3.17H324c-3.313,0-6,2.687-6,6v10c0,3.313,2.687,6,6,6h10c3.314,0,6-2.687,6-6v-8.809L337,30.156'/%3E%3Cpath d='M338.72 24.637l-8.892 8.892H327V30.7l8.89-8.89z'/%3E%3Cpath d='M338.697 17.826h4v4h-4z' transform='rotate(-134.99 340.703 19.817)'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M381 42h18V24h-18v18zm14-16h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26z'/%3E%3Cpath d='M395 20v-4h-10v4h-6v2h22v-2h-6zm-2 0h-6v-2h6v2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"; .leaflet-touch .leaflet-bar, .leaflet-draw-actions { - @include euiBottomShadowMedium($color: $euiShadowColorLarge, $opacity: .2); + @include euiBottomShadowMedium($color: $euiShadowColorLarge, $opacity: 0.2); + border: none; } .leaflet-container { background: $euiColorEmptyShade; - //the heatmap layer plugin logs an error to the console when the map is in a 0-sized container + // the heatmap layer plugin logs an error to the console when the map is in a 0-sized container min-width: 1px !important; min-height: 1px !important; } @@ -62,7 +64,9 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s .leaflet-control-layers-expanded { padding: 0; margin: 0; + @include fontSize(11px); + font-family: $euiFontFamily; font-weight: $euiFontWeightMedium; line-height: $euiLineHeight; @@ -89,7 +93,9 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s .leaflet-popup-content { margin: 0; + @include euiFontSizeS; + font-weight: $euiFontWeightRegular; word-wrap: break-word; overflow: hidden; @@ -104,7 +110,8 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s } table { - td,th { + td, + th { padding: $euiSizeXS; } } @@ -117,7 +124,7 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s } .leaflet-container .leaflet-control-attribution { - background-color: transparentize($euiColorEmptyShade, .7); + background-color: transparentize($euiColorEmptyShade, 0.7); color: $euiColorDarkShade; // attributions are appended in blocks of

tags, this will allow them to display in one line @@ -145,7 +152,7 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s // Filter to desaturate mapquest tiles img.leaflet-tile { - @if (lightness($euiTextColor) < 50) { + @if lightness($euiTextColor) < 50 { filter: brightness(1.03) grayscale(0.73); } @else { filter: invert(1) brightness(1.75) grayscale(1); diff --git a/src/plugins/maps_legacy/public/map/_legend.scss b/src/plugins/maps_legacy/public/map/_legend.scss index 2c50e214c248..43ecb5ac8127 100644 --- a/src/plugins/maps_legacy/public/map/_legend.scss +++ b/src/plugins/maps_legacy/public/map/_legend.scss @@ -1,16 +1,18 @@ .visMapLegend { @include fontSize(11px); - @include euiBottomShadowMedium($color: $euiShadowColorLarge, $opacity: .1); + @include euiBottomShadowMedium($color: $euiShadowColorLarge, $opacity: 0.1); + font-family: $euiFontFamily; font-weight: $euiFontWeightMedium; line-height: $euiLineHeight; color: $euiColorDarkShade; padding: $euiSizeS; - background: transparentize($euiColorEmptyShade, .2); + background: transparentize($euiColorEmptyShade, 0.2); border-radius: $euiBorderRadius; i { @include size($euiSizeS + 2px); + display: inline-block; margin: 3px $euiSizeXS 0 0; border-radius: 50%; diff --git a/src/plugins/maps_legacy/public/map/index.scss b/src/plugins/maps_legacy/public/map/index.scss index f9fc841b9f86..f2a91bbac621 100644 --- a/src/plugins/maps_legacy/public/map/index.scss +++ b/src/plugins/maps_legacy/public/map/index.scss @@ -1,2 +1,2 @@ -@import './leaflet_overrides'; -@import './legend'; +@import "./leaflet_overrides"; +@import "./legend"; diff --git a/src/plugins/opensearch_dashboards_legacy/public/font_awesome/font_awesome.scss b/src/plugins/opensearch_dashboards_legacy/public/font_awesome/font_awesome.scss index 876a920269c4..9f6f813c3fad 100644 --- a/src/plugins/opensearch_dashboards_legacy/public/font_awesome/font_awesome.scss +++ b/src/plugins/opensearch_dashboards_legacy/public/font_awesome/font_awesome.scss @@ -1,23 +1,29 @@ +@import "font-awesome/scss/variables"; +@import "font-awesome/scss/core"; +@import "font-awesome/scss/icons"; + @font-face { - font-family: 'FontAwesome'; - src: url('~font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0'); - src: url('~font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), - url('~font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), - url('~font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), - url('~font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), - url('~font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); + font-family: FontAwesome; + src: url("~font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0"); + src: + url("~font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), + url("~font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), + url("~font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), + url("~font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), + url("~font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } -@import "font-awesome/scss/variables"; -@import "font-awesome/scss/core"; -@import "font-awesome/scss/icons"; - // new file icon .#{$fa-css-prefix}-file-new-o:before { content: $fa-var-file-o; } -.#{$fa-css-prefix}-file-new-o:after { content: $fa-var-plus; position: relative; margin-left: -1.0em; font-size: 0.5em; } +.#{$fa-css-prefix}-file-new-o:after { + content: $fa-var-plus; + position: relative; + margin-left: -1em; + font-size: 0.5em; +} // alias for alert types - allows class="fa fa-{{alertType}}" -.fa-success:before { content: $fa-var-check; } -.fa-danger:before { content: $fa-var-exclamation-circle; } +.fa-success::before { content: $fa-var-check; } +.fa-danger::before { content: $fa-var-exclamation-circle; } diff --git a/src/plugins/opensearch_dashboards_legacy/public/paginate/_paginate.scss b/src/plugins/opensearch_dashboards_legacy/public/paginate/_paginate.scss index e9c1acaf9ee0..ec346aa843c1 100644 --- a/src/plugins/opensearch_dashboards_legacy/public/paginate/_paginate.scss +++ b/src/plugins/opensearch_dashboards_legacy/public/paginate/_paginate.scss @@ -1,6 +1,8 @@ +/* stylelint-disable-next-line selector-type-no-unknown */ paginate { display: block; + /* stylelint-disable-next-line selector-type-no-unknown */ paginate-controls { display: flex; align-items: center; @@ -48,10 +50,9 @@ paginate { .pagination-size { flex: 0 0 auto; - input[type=number] { + input[type="number"] { width: 3em; } } } } - diff --git a/src/plugins/opensearch_dashboards_overview/public/components/_index.scss b/src/plugins/opensearch_dashboards_overview/public/components/_index.scss index b8857d171728..47d0aee1b8d6 100644 --- a/src/plugins/opensearch_dashboards_overview/public/components/_index.scss +++ b/src/plugins/opensearch_dashboards_overview/public/components/_index.scss @@ -1 +1 @@ -@import 'overview'; +@import "overview"; diff --git a/src/plugins/opensearch_dashboards_overview/public/components/_overview.scss b/src/plugins/opensearch_dashboards_overview/public/components/_overview.scss index db27435346da..45d5575d33cd 100644 --- a/src/plugins/opensearch_dashboards_overview/public/components/_overview.scss +++ b/src/plugins/opensearch_dashboards_overview/public/components/_overview.scss @@ -52,13 +52,13 @@ .osdOverviewApps__item { .osdOverviewApps__group--primary & { - @include euiBreakpoint('m', 'l', 'xl') { + @include euiBreakpoint("m", "l", "xl") { max-width: calc(50% - #{$euiSizeM * 2}); } } .osdOverviewApps__group--secondary & { - @include euiBreakpoint('m', 'l', 'xl') { + @include euiBreakpoint("m", "l", "xl") { max-width: calc(25% - #{$euiSizeM * 2}); } } @@ -82,8 +82,8 @@ } .osdOverviewMore__item { - @include euiBreakpoint('m', 'l', 'xl') { - max-width: calc(33.333333333333333% - #{$euiSizeM * 2}); + @include euiBreakpoint("m", "l", "xl") { + max-width: calc(33.3333% - #{$euiSizeM * 2}); } } @@ -97,13 +97,13 @@ .osdOverviewSupplements--noNews .osdOverviewMore { h2 { - @include euiBreakpoint('m', 'l', 'xl') { + @include euiBreakpoint("m", "l", "xl") { text-align: center; } } .osdOverviewMore__content { - @include euiBreakpoint('m', 'l', 'xl') { + @include euiBreakpoint("m", "l", "xl") { justify-content: center; } } @@ -125,7 +125,7 @@ } .osdOverviewDataManage__item:not(:only-child) { - @include euiBreakpoint('m', 'l', 'xl') { + @include euiBreakpoint("m", "l", "xl") { flex: 0 0 calc(50% - #{$euiSizeM * 2}); } } diff --git a/src/plugins/opensearch_dashboards_overview/public/index.scss b/src/plugins/opensearch_dashboards_overview/public/index.scss index 841415620d69..6cfd4ac975c3 100644 --- a/src/plugins/opensearch_dashboards_overview/public/index.scss +++ b/src/plugins/opensearch_dashboards_overview/public/index.scss @@ -1 +1 @@ -@import 'components/index'; +@import "components/index"; diff --git a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/_exit_full_screen_button.scss b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/_exit_full_screen_button.scss index dfb0a7a23909..ceafd4fe7656 100644 --- a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/_exit_full_screen_button.scss +++ b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/_exit_full_screen_button.scss @@ -12,7 +12,6 @@ display: block; padding: $euiSizeXS $euiSizeS; border: none; - background: none; z-index: 5; background: $euiColorFullShade; border-radius: $euiBorderRadius; diff --git a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/index.scss b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/index.scss index 82dd33baeb3e..1694024b6844 100644 --- a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/index.scss +++ b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/index.scss @@ -1 +1 @@ -@import './exit_full_screen_button'; +@import "./exit_full_screen_button"; diff --git a/src/plugins/opensearch_dashboards_react/public/field_button/field_button.scss b/src/plugins/opensearch_dashboards_react/public/field_button/field_button.scss index 1b9902f9d572..7ea3bc9ce1c6 100644 --- a/src/plugins/opensearch_dashboards_react/public/field_button/field_button.scss +++ b/src/plugins/opensearch_dashboards_react/public/field_button/field_button.scss @@ -1,11 +1,13 @@ .osdFieldButton { @include euiFontSizeS; + border-radius: $euiBorderRadius; margin-bottom: $euiSizeXS; display: flex; align-items: center; - transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance, - background-color $euiAnimSpeedFast $euiAnimSlightResistance; // sass-lint:disable-line indentation + transition: + box-shadow $euiAnimSpeedFast $euiAnimSlightResistance, + background-color $euiAnimSpeedFast $euiAnimSlightResistance; &:focus-within, &-isActive { @@ -20,6 +22,7 @@ &:focus, &:focus-within { @include euiBottomShadowMedium; + border-radius: $euiBorderRadius; z-index: 2; } diff --git a/src/plugins/opensearch_dashboards_react/public/markdown/_markdown.scss b/src/plugins/opensearch_dashboards_react/public/markdown/_markdown.scss index 242e16ecd502..fceca669f2b2 100644 --- a/src/plugins/opensearch_dashboards_react/public/markdown/_markdown.scss +++ b/src/plugins/opensearch_dashboards_react/public/markdown/_markdown.scss @@ -1,5 +1,5 @@ // Default styles for Markdown element -// +// -------- // 1. Links // 2. Headings // 3. Images @@ -18,7 +18,6 @@ $osdDefaultFontSize: 14px; } .osdMarkdown__body { - // Font size variables $osdMarkdownFontSizeS: canvasToEm(12px); $osdMarkdownFontSize: canvasToEm(14px); @@ -34,14 +33,14 @@ $osdDefaultFontSize: 14px; $osdMarkdownSizeXXS: canvasToEm(4px); // Grayscale variables - $osdMarkdownAlphaLightestShade: rgba($euiColorFullShade,.05); - $osdMarkdownAlphaLightShade: rgba($euiColorFullShade,.15); - $osdMarkdownAlphaDarkShade: rgba($euiColorFullShade,.65); + $osdMarkdownAlphaLightestShade: rgba($euiColorFullShade, 0.05); + $osdMarkdownAlphaLightShade: rgba($euiColorFullShade, 0.15); + $osdMarkdownAlphaDarkShade: rgba($euiColorFullShade, 0.65); // Reverse grayscale for opposite of theme - $osdMarkdownAlphaLightestShadeReversed: rgba($euiColorEmptyShade,.05); - $osdMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade,.15); - $osdMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade,.65); + $osdMarkdownAlphaLightestShadeReversed: rgba($euiColorEmptyShade, 0.05); + $osdMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade, 0.15); + $osdMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade, 0.65); &--reversed { color: $euiColorLightestShade; @@ -104,12 +103,14 @@ $osdDefaultFontSize: 14px; h1 { font-size: $osdMarkdownFontSizeXXL; + /* stylelint-disable-next-line number-max-precision */ line-height: 1.333333em; font-weight: 300; } h2 { font-size: $osdMarkdownFontSizeXL; + /* stylelint-disable-next-line number-max-precision */ line-height: 1.428571em; font-weight: 300; } @@ -128,12 +129,14 @@ $osdDefaultFontSize: 14px; h5 { font-size: $osdMarkdownFontSize; + /* stylelint-disable-next-line number-max-precision */ line-height: 1.142857em; font-weight: 700; } h6 { font-size: $osdMarkdownFontSizeS; + /* stylelint-disable-next-line number-max-precision */ line-height: 1.333333em; font-weight: 700; text-transform: uppercase; @@ -151,6 +154,7 @@ $osdDefaultFontSize: 14px; padding: 0 1em; border-left: $osdMarkdownSizeXXS solid $osdMarkdownAlphaLightShade; } + &--reversed blockquote { border-left-color: $osdMarkdownAlphaLightShadeReversed; } @@ -165,6 +169,7 @@ $osdDefaultFontSize: 14px; background-color: $osdMarkdownAlphaLightShade; border: 0; } + &--reversed hr { background-color: $osdMarkdownAlphaLightShadeReversed; } @@ -191,6 +196,7 @@ $osdDefaultFontSize: 14px; ul { list-style-type: disc; } + ol { list-style-type: decimal; } @@ -215,6 +221,7 @@ $osdDefaultFontSize: 14px; margin-left: 0; } + /* stylelint-disable-next-line no-duplicate-selectors */ ul, ol { padding-left: $osdMarkdownSizeL; @@ -245,6 +252,7 @@ $osdDefaultFontSize: 14px; border-spacing: 0; border-collapse: collapse; } + &--reversed table { border-left-color: $osdMarkdownAlphaLightShadeReversed; } @@ -264,6 +272,7 @@ $osdDefaultFontSize: 14px; border-right: 1px solid $osdMarkdownAlphaLightShade; } } + &--reversed table th, &--reversed table td { border-color: $osdMarkdownAlphaLightShadeReversed; @@ -273,6 +282,7 @@ $osdDefaultFontSize: 14px; background-color: transparent; border-top: 1px solid $osdMarkdownAlphaLightShade; } + &--reversed table tr { border-top-color: $osdMarkdownAlphaLightShadeReversed; } @@ -281,7 +291,7 @@ $osdDefaultFontSize: 14px; code, pre { margin-bottom: $osdMarkdownSizeXS; - font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; + font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; font-size: $osdMarkdownFontSizeS; } @@ -291,6 +301,7 @@ $osdDefaultFontSize: 14px; background-color: $osdMarkdownAlphaLightestShade; border-radius: $osdMarkdownSizeXXS; } + &--reversed code { background-color: $osdMarkdownAlphaLightestShadeReversed; } @@ -305,11 +316,13 @@ $osdDefaultFontSize: 14px; padding: $osdMarkdownSize; overflow: auto; font-size: $osdMarkdownFontSizeS; + /* stylelint-disable-next-line number-max-precision */ line-height: 1.333333em; background-color: $osdMarkdownAlphaLightestShade; border-radius: $osdMarkdownSizeXXS; word-wrap: normal; } + &--reversed pre { background-color: $osdMarkdownAlphaLightestShadeReversed; } diff --git a/src/plugins/opensearch_dashboards_react/public/markdown/index.scss b/src/plugins/opensearch_dashboards_react/public/markdown/index.scss index f997ea5384ea..59deecb75929 100644 --- a/src/plugins/opensearch_dashboards_react/public/markdown/index.scss +++ b/src/plugins/opensearch_dashboards_react/public/markdown/index.scss @@ -1 +1 @@ -@import './markdown'; +@import "./markdown"; diff --git a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/index.scss b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/index.scss index 54e5f33edcc6..2e7f56fad0d2 100644 --- a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/index.scss +++ b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/index.scss @@ -28,4 +28,4 @@ * under the License. */ -@import './overview_page_header'; +@import "./overview_page_header"; diff --git a/src/plugins/saved_objects/public/index.scss b/src/plugins/saved_objects/public/index.scss index fc7bb35f38b1..ebeca6d1f4cb 100644 --- a/src/plugins/saved_objects/public/index.scss +++ b/src/plugins/saved_objects/public/index.scss @@ -1 +1 @@ -@import './save_modal/index'; +@import "./save_modal/index"; diff --git a/src/plugins/saved_objects/public/save_modal/_index.scss b/src/plugins/saved_objects/public/save_modal/_index.scss index 6c773c7f777b..07ff5d627e70 100644 --- a/src/plugins/saved_objects/public/save_modal/_index.scss +++ b/src/plugins/saved_objects/public/save_modal/_index.scss @@ -1 +1 @@ -@import './saved_object_save_modal'; +@import "./saved_object_save_modal"; diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss index f83dc6db1997..0310fc52d2fe 100644 --- a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss +++ b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss @@ -1,3 +1,3 @@ .osdSavedObjectSaveModal { width: $euiSizeXXL * 10; -} \ No newline at end of file +} diff --git a/src/plugins/share/public/components/_index.scss b/src/plugins/share/public/components/_index.scss index 85168c9ea80f..9f648ce5e12c 100644 --- a/src/plugins/share/public/components/_index.scss +++ b/src/plugins/share/public/components/_index.scss @@ -1 +1 @@ -@import './share_context_menu'; +@import "./share_context_menu"; diff --git a/src/plugins/share/public/index.scss b/src/plugins/share/public/index.scss index 0271fbb8e902..64d4cfa78802 100644 --- a/src/plugins/share/public/index.scss +++ b/src/plugins/share/public/index.scss @@ -1 +1 @@ -@import './components/index' \ No newline at end of file +@import "./components/index" diff --git a/src/plugins/tile_map/public/index.scss b/src/plugins/tile_map/public/index.scss index f4b86b0c3119..aa2117cb0c01 100644 --- a/src/plugins/tile_map/public/index.scss +++ b/src/plugins/tile_map/public/index.scss @@ -5,4 +5,4 @@ // tlmChart__legend--small // tlmChart__legend-isLoading -@import 'tile_map'; +@import "tile_map"; diff --git a/src/plugins/timeline/public/_base.scss b/src/plugins/timeline/public/_base.scss index 616ac9b3486e..4e64d237271a 100644 --- a/src/plugins/timeline/public/_base.scss +++ b/src/plugins/timeline/public/_base.scss @@ -6,14 +6,13 @@ } } -input[type='radio'], -input[type='checkbox'], +input[type="radio"], +input[type="checkbox"], .radio, .checkbox { &[disabled], fieldset[disabled] & { cursor: default; - opacity: .8; + opacity: 0.8; } } - diff --git a/src/plugins/timeline/public/directives/_form.scss b/src/plugins/timeline/public/directives/_form.scss index 3fcf70700a86..2b946ec94791 100644 --- a/src/plugins/timeline/public/directives/_form.scss +++ b/src/plugins/timeline/public/directives/_form.scss @@ -1,5 +1,6 @@ .form-control { @include euiFontSizeS; + display: block; width: 100%; height: $euiFormControlCompressedHeight; @@ -10,7 +11,7 @@ border-radius: $euiBorderRadius; cursor: pointer; - &:not([type='range']) { + &:not([type="range"]) { appearance: none; } @@ -21,7 +22,6 @@ } } -// sass-lint:disable-block no-qualifying-elements select.form-control { // Makes the select arrow similar to EUI's arrowDown icon background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"%3E%3Cpath fill="#{hexToRGB($euiTextColor)}" d="M13.0688508,5.15725038 L8.38423975,9.76827428 C8.17054415,9.97861308 7.82999214,9.97914095 7.61576025,9.76827428 L2.93114915,5.15725038 C2.7181359,4.94758321 2.37277319,4.94758321 2.15975994,5.15725038 C1.94674669,5.36691756 1.94674669,5.70685522 2.15975994,5.9165224 L6.84437104,10.5275463 C7.48517424,11.1582836 8.51644979,11.1566851 9.15562896,10.5275463 L13.8402401,5.9165224 C14.0532533,5.70685522 14.0532533,5.36691756 13.8402401,5.15725038 C13.6272268,4.94758321 13.2818641,4.94758321 13.0688508,5.15725038 Z"/%3E%3C/svg%3E'); diff --git a/src/plugins/timeline/public/directives/_index.scss b/src/plugins/timeline/public/directives/_index.scss index d49b498910b8..94f0b2286101 100644 --- a/src/plugins/timeline/public/directives/_index.scss +++ b/src/plugins/timeline/public/directives/_index.scss @@ -1,8 +1,7 @@ -@import './timeline_expression_input'; -@import './cells/index'; -@import './timeline_expression_suggestions/index'; -@import './timeline_help/index'; -@import './timeline_interval/index'; -@import './saved_object_finder'; -@import './form'; - +@import "./timeline_expression_input"; +@import "./cells/index"; +@import "./timeline_expression_suggestions/index"; +@import "./timeline_help/index"; +@import "./timeline_interval/index"; +@import "./saved_object_finder"; +@import "./form"; diff --git a/src/plugins/timeline/public/directives/_saved_object_finder.scss b/src/plugins/timeline/public/directives/_saved_object_finder.scss index e1a055a5f49e..a225f357949e 100644 --- a/src/plugins/timeline/public/directives/_saved_object_finder.scss +++ b/src/plugins/timeline/public/directives/_saved_object_finder.scss @@ -24,9 +24,7 @@ } } - saved-object-finder { - .list-sort-button { border-top-left-radius: 0; border-top-right-radius: 0; @@ -88,6 +86,7 @@ saved-object-finder { } } + /* stylelint-disable-next-line selector-type-no-unknown */ paginate { paginate-controls { margin: $euiSize; diff --git a/src/plugins/timeline/public/directives/cells/_cells.scss b/src/plugins/timeline/public/directives/cells/_cells.scss index 899bf984e72c..61634a710260 100644 --- a/src/plugins/timeline/public/directives/cells/_cells.scss +++ b/src/plugins/timeline/public/directives/cells/_cells.scss @@ -4,7 +4,6 @@ position: relative; box-sizing: border-box; border: 2px dashed transparent; - // sass-lint:disable-block no-important padding-left: 0 !important; padding-right: 0 !important; margin-bottom: $euiSizeM; @@ -15,10 +14,9 @@ } .timCell.running { - opacity: .5; + opacity: 0.5; } - .timCell__actions { position: absolute; bottom: $euiSizeXS; @@ -27,6 +25,7 @@ > .timCell__action, > .timCell__id { @include euiFontSizeXS; + font-weight: $euiFontWeightBold; color: $euiColorMediumShade; display: inline-block; diff --git a/src/plugins/timeline/public/directives/cells/_index.scss b/src/plugins/timeline/public/directives/cells/_index.scss index 8611b4d8ba1d..c537dd49d304 100644 --- a/src/plugins/timeline/public/directives/cells/_index.scss +++ b/src/plugins/timeline/public/directives/cells/_index.scss @@ -1 +1 @@ -@import './cells'; +@import "./cells"; diff --git a/src/plugins/timeline/public/directives/timeline_expression_suggestions/_index.scss b/src/plugins/timeline/public/directives/timeline_expression_suggestions/_index.scss index 09948bc1c814..e49c9151ff73 100644 --- a/src/plugins/timeline/public/directives/timeline_expression_suggestions/_index.scss +++ b/src/plugins/timeline/public/directives/timeline_expression_suggestions/_index.scss @@ -1 +1 @@ -@import './timeline_expression_suggestions'; +@import "./timeline_expression_suggestions"; diff --git a/src/plugins/timeline/public/directives/timeline_expression_suggestions/_timeline_expression_suggestions.scss b/src/plugins/timeline/public/directives/timeline_expression_suggestions/_timeline_expression_suggestions.scss index 4bf6ba24108d..89b96d11c6fd 100644 --- a/src/plugins/timeline/public/directives/timeline_expression_suggestions/_timeline_expression_suggestions.scss +++ b/src/plugins/timeline/public/directives/timeline_expression_suggestions/_timeline_expression_suggestions.scss @@ -1,9 +1,9 @@ .timSuggestions { @include euiBottomShadowMedium; + background-color: $euiColorLightestShade; color: $euiTextColor; border: $euiBorderThin; - // sass-lint:disable-block no-important border-radius: 0 0 $euiBorderRadius $euiBorderRadius !important; z-index: $euiZLevel9; max-height: $euiSizeXL * 10; diff --git a/src/plugins/timeline/public/directives/timeline_help/_index.scss b/src/plugins/timeline/public/directives/timeline_help/_index.scss index 595b61988b2b..763746e95a10 100644 --- a/src/plugins/timeline/public/directives/timeline_help/_index.scss +++ b/src/plugins/timeline/public/directives/timeline_help/_index.scss @@ -1 +1 @@ -@import './timeline_help'; +@import "./timeline_help"; diff --git a/src/plugins/timeline/public/directives/timeline_help/_timeline_help.scss b/src/plugins/timeline/public/directives/timeline_help/_timeline_help.scss index 27d2311b62bd..c114f831adcb 100644 --- a/src/plugins/timeline/public/directives/timeline_help/_timeline_help.scss +++ b/src/plugins/timeline/public/directives/timeline_help/_timeline_help.scss @@ -1,7 +1,7 @@ .timHelp { // EUITODO: Make .euiText > code background transparent code { - background-color: transparentize($euiTextColor, .9); + background-color: transparentize($euiTextColor, 0.9); } } @@ -20,6 +20,5 @@ */ .timHelp__functionsTableRow:hover, .timHelp__functionDetailsTable { - // sass-lint:disable-block no-important background-color: $euiColorLightestShade !important; /* 1 */ } diff --git a/src/plugins/timeline/public/directives/timeline_interval/_index.scss b/src/plugins/timeline/public/directives/timeline_interval/_index.scss index a1e91ae98526..fb597657a0a7 100644 --- a/src/plugins/timeline/public/directives/timeline_interval/_index.scss +++ b/src/plugins/timeline/public/directives/timeline_interval/_index.scss @@ -1 +1 @@ -@import './timeline_interval'; +@import "./timeline_interval"; diff --git a/src/plugins/timeline/public/index.scss b/src/plugins/timeline/public/index.scss index 060c5e8044a0..8c2a25c383a6 100644 --- a/src/plugins/timeline/public/index.scss +++ b/src/plugins/timeline/public/index.scss @@ -7,12 +7,12 @@ // timChart__legend--small // timChart__legend-isLoading -@import './app'; -@import './base'; -@import './directives/index'; +@import "./app"; +@import "./base"; +@import "./directives/index"; // these styles is needed to be loaded here explicitly if the timeline visualization was not opened in browser // styles for timeline visualization are lazy loaded only while a vis is opened // this will duplicate styles only if both Timeline app and timeline visualization are loaded // could be left here as it is since the Timeline app is deprecated -@import '../../vis_type_timeline/public/components/timeline_vis.scss'; +@import "../../vis_type_timeline/public/components/timeline_vis"; diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss index c34fb465d7b5..8a71ee4f04c9 100644 --- a/src/plugins/vis_default_editor/public/_default.scss +++ b/src/plugins/vis_default_editor/public/_default.scss @@ -2,7 +2,7 @@ flex: 1 1 auto; display: flex; - @include euiBreakpoint('xs', 's', 'm') { + @include euiBreakpoint("xs", "s", "m") { flex-direction: column; } } @@ -18,12 +18,12 @@ position: relative; flex-shrink: 0; - @include euiBreakpoint('xs', 's', 'm') { + @include euiBreakpoint("xs", "s", "m") { // If we are on a small screen we force the editor to take 100% width. width: 100% !important; } - @include euiBreakpoint('l', 'xl') { + @include euiBreakpoint("l", "xl") { max-width: 75%; } } @@ -37,7 +37,7 @@ display: none; } - @include euiBreakpoint('xs', 's', 'm') { + @include euiBreakpoint("xs", "s", "m") { height: $euiSizeXXL; // Just enough room for the collapse button width: 100% !important; } @@ -55,7 +55,8 @@ .visEditor__resizer { @include osdResizer($euiSizeM); - @include euiBreakpoint('xs', 's', 'm') { + + @include euiBreakpoint("xs", "s", "m") { display: none; } } @@ -73,7 +74,7 @@ flex: 1 1 auto; // Fixes IE bug: the editor overflows a visualization on small screens overflow: hidden; - @include euiBreakpoint('xs', 's', 'm') { + @include euiBreakpoint("xs", "s", "m") { // If we are on a small screen we force the visualization to take 100% width. width: 100% !important; } diff --git a/src/plugins/vis_default_editor/public/_sidebar.scss b/src/plugins/vis_default_editor/public/_sidebar.scss index 3d3db90f45a3..532a3ab2ffad 100644 --- a/src/plugins/vis_default_editor/public/_sidebar.scss +++ b/src/plugins/vis_default_editor/public/_sidebar.scss @@ -11,7 +11,6 @@ // // LAYOUT -// .visEditorSidebar { min-width: $vis-editor-sidebar-min-width; @@ -24,6 +23,7 @@ .visEditorSidebar__form { @include flex-parent(1, 1, auto); + max-width: 100%; } @@ -34,9 +34,10 @@ flex-grow: 0; } - @include euiBreakpoint('l', 'xl') { + @include euiBreakpoint("l", "xl") { @include flex-parent(1, 1, 1px); @include euiScrollBar; + overflow: auto; } } @@ -45,9 +46,7 @@ display: none; } -// // NAVIGATION -// .visEditorSidebar__titleContainer { padding: $euiSizeS $euiSizeXL $euiSizeS $euiSizeS; // Extra padding on the right for the collapse button @@ -63,9 +62,7 @@ flex-grow: 0; } -// // SECTIONS -// .visEditorSidebar__section { background-color: $euiColorEmptyShade; @@ -87,9 +84,7 @@ margin-bottom: $euiSizeM; } -// // FORMS -// .visEditorSidebar__formRow { display: flex; diff --git a/src/plugins/vis_default_editor/public/index.scss b/src/plugins/vis_default_editor/public/index.scss index 6abb45dc546a..1f6b50590530 100644 --- a/src/plugins/vis_default_editor/public/index.scss +++ b/src/plugins/vis_default_editor/public/index.scss @@ -1,9 +1,9 @@ $vis-editor-sidebar-min-width: 350px; // Main layout -@import './default'; -@import './sidebar'; +@import "./default"; +@import "./sidebar"; // Components -@import './agg'; -@import './agg_params'; +@import "./agg"; +@import "./agg_params"; diff --git a/src/plugins/vis_type_markdown/public/markdown_vis.scss b/src/plugins/vis_type_markdown/public/markdown_vis.scss index 2356562a86ed..97cfc4b151c7 100644 --- a/src/plugins/vis_type_markdown/public/markdown_vis.scss +++ b/src/plugins/vis_type_markdown/public/markdown_vis.scss @@ -12,7 +12,7 @@ .visEditor--markdown { .visEditorSidebar__config > *, - .visEditor--markdown__textarea { + .visEditor--markdown__textarea { flex-grow: 1; } diff --git a/src/plugins/vis_type_metric/public/components/metric_vis.scss b/src/plugins/vis_type_metric/public/components/metric_vis.scss index 5665ba8e8d09..b47b644f7a89 100644 --- a/src/plugins/vis_type_metric/public/components/metric_vis.scss +++ b/src/plugins/vis_type_metric/public/components/metric_vis.scss @@ -8,14 +8,14 @@ .mtrVis { width: 100%; display: flex; - flex-direction: row; + flex-flow: row wrap; justify-content: center; align-items: center; - flex-wrap: wrap; } .mtrVis__value { @include euiTextTruncate; + font-weight: $euiFontWeightBold; } @@ -33,7 +33,8 @@ transition: transform $euiAnimSpeedNormal $euiAnimSlightResistance; transform: translate(0, 0); - &:hover, &:focus { + &:hover, + &:focus { box-shadow: none; transform: translate(0, -2px); } diff --git a/src/plugins/vis_type_table/public/_table_vis.scss b/src/plugins/vis_type_table/public/_table_vis.scss index c235f67615e2..ea4b4d0d1c98 100644 --- a/src/plugins/vis_type_table/public/_table_vis.scss +++ b/src/plugins/vis_type_table/public/_table_vis.scss @@ -10,7 +10,7 @@ .table-vis-container { osd-agg-table-group > .table > tbody > tr > td { - border-top: 0px; + border-top: 0; } .pagination-other-pages { diff --git a/src/plugins/vis_type_table/public/agg_table/_index.scss b/src/plugins/vis_type_table/public/agg_table/_index.scss index 340e08a76f1b..ed94e8449120 100644 --- a/src/plugins/vis_type_table/public/agg_table/_index.scss +++ b/src/plugins/vis_type_table/public/agg_table/_index.scss @@ -1 +1 @@ -@import './agg_table'; +@import "./agg_table"; diff --git a/src/plugins/vis_type_table/public/index.scss b/src/plugins/vis_type_table/public/index.scss index 0972c85e0dbe..d21bf5262602 100644 --- a/src/plugins/vis_type_table/public/index.scss +++ b/src/plugins/vis_type_table/public/index.scss @@ -5,6 +5,6 @@ // tbvChart__legend--small // tbvChart__legend-isLoading -@import './agg_table/index'; -@import './paginated_table/index'; -@import './table_vis'; +@import "./agg_table/index"; +@import "./paginated_table/index"; +@import "./table_vis"; diff --git a/src/plugins/vis_type_table/public/paginated_table/_index.scss b/src/plugins/vis_type_table/public/paginated_table/_index.scss index 23d56c09b281..66275b5c7da8 100644 --- a/src/plugins/vis_type_table/public/paginated_table/_index.scss +++ b/src/plugins/vis_type_table/public/paginated_table/_index.scss @@ -1 +1 @@ -@import './_table_cell_filter'; +@import "./table_cell_filter"; diff --git a/src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss b/src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss index 37867f1ed1c1..18ca7720ce10 100644 --- a/src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss +++ b/src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss @@ -5,7 +5,8 @@ // tgcChart__legend--small // tgcChart__legend-isLoading -.tgcChart__container, .tgcChart__wrapper { +.tgcChart__container, +.tgcChart__wrapper { flex: 1 1 0; display: flex; } diff --git a/src/plugins/vis_type_timeline/public/components/timeline_vis.scss b/src/plugins/vis_type_timeline/public/components/timeline_vis.scss index c4d591bc82ca..cdcb4253eb13 100644 --- a/src/plugins/vis_type_timeline/public/components/timeline_vis.scss +++ b/src/plugins/vis_type_timeline/public/components/timeline_vis.scss @@ -9,6 +9,7 @@ .chart-top-title { @include euiFontSizeXS; + flex: 0; text-align: center; font-weight: $euiFontWeightBold; diff --git a/src/plugins/vis_type_timeline/public/timeline_options.scss b/src/plugins/vis_type_timeline/public/timeline_options.scss index 14014b008e2c..5a707a06ee12 100644 --- a/src/plugins/vis_type_timeline/public/timeline_options.scss +++ b/src/plugins/vis_type_timeline/public/timeline_options.scss @@ -19,7 +19,7 @@ left: 0; } -@include euiBreakpoint('xs', 's', 'm') { +@include euiBreakpoint("xs", "s", "m") { .timExpressionInput__editor { flex: auto; height: $euiSize * 15; diff --git a/src/plugins/vis_type_timeseries/public/application/_tvb_editor.scss b/src/plugins/vis_type_timeseries/public/application/_tvb_editor.scss index 9864c72b7662..73ef76931ff1 100644 --- a/src/plugins/vis_type_timeseries/public/application/_tvb_editor.scss +++ b/src/plugins/vis_type_timeseries/public/application/_tvb_editor.scss @@ -2,4 +2,3 @@ overflow-y: auto; overflow-x: hidden; } - diff --git a/src/plugins/vis_type_timeseries/public/application/_variables.scss b/src/plugins/vis_type_timeseries/public/application/_variables.scss index 0107c5569d73..df488f9788bd 100644 --- a/src/plugins/vis_type_timeseries/public/application/_variables.scss +++ b/src/plugins/vis_type_timeseries/public/application/_variables.scss @@ -1,13 +1,9 @@ -$tvbLineColor: transparentize($euiColorFullShade, .8); -$tvbLineColorReversed: transparentize($euiColorEmptyShade, .6); - -$tvbTextColor: transparentize($euiColorFullShade, .6); -$tvbTextColorReversed: transparentize($euiColorEmptyShade, .4); - -$tvbValueColor: transparentize($euiColorFullShade, .3); -$tvbValueColorReversed: transparentize($euiColorEmptyShade, .2); - -$tvbHoverBackgroundColor: transparentize($euiColorFullShade, .9); -$tvbHoverBackgroundColorReversed: transparentize($euiColorEmptyShade, .9); - +$tvbLineColor: transparentize($euiColorFullShade, 0.8); +$tvbLineColorReversed: transparentize($euiColorEmptyShade, 0.6); +$tvbTextColor: transparentize($euiColorFullShade, 0.6); +$tvbTextColorReversed: transparentize($euiColorEmptyShade, 0.4); +$tvbValueColor: transparentize($euiColorFullShade, 0.3); +$tvbValueColorReversed: transparentize($euiColorEmptyShade, 0.2); +$tvbHoverBackgroundColor: transparentize($euiColorFullShade, 0.9); +$tvbHoverBackgroundColorReversed: transparentize($euiColorEmptyShade, 0.9); $tvbSplitBlockVisMinSize: $euiSize * 12; diff --git a/src/plugins/vis_type_timeseries/public/application/components/_annotations_editor.scss b/src/plugins/vis_type_timeseries/public/application/components/_annotations_editor.scss index 99e024c9c519..72fac4d4ce3e 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/_annotations_editor.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/_annotations_editor.scss @@ -3,7 +3,7 @@ background-color: $euiColorLightestShade; } -@include euiPanel('.tvbAnnotationsEditor'); +@include euiPanel(".tvbAnnotationsEditor"); .tvbAnnotationsEditor { margin-bottom: $euiSize; diff --git a/src/plugins/vis_type_timeseries/public/application/components/_color_picker.scss b/src/plugins/vis_type_timeseries/public/application/components/_color_picker.scss index 9d50b0875dd0..e9b2aa2d4a1b 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/_color_picker.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/_color_picker.scss @@ -1,6 +1,6 @@ // EUITODO: Convert to EuiColorPicker -@import 'node_modules/@elastic/eui/src/components/color_picker/index'; +@import "node_modules/@elastic/eui/src/components/color_picker/index"; .tvbColorPicker { display: flex; diff --git a/src/plugins/vis_type_timeseries/public/application/components/_index.scss b/src/plugins/vis_type_timeseries/public/application/components/_index.scss index 4ee5c1863946..ca8e86626610 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/_index.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/_index.scss @@ -1,15 +1,14 @@ -@import './annotations_editor'; -@import './color_rules'; -@import './color_picker'; -@import './error'; -@import './no_data'; -@import './markdown_editor'; -@import './series_editor'; -@import './vis_editor'; -@import './vis_editor_visualization'; -@import './vis_picker'; -@import './vis_with_splits'; - -@import './aggs/index'; -@import './panel_config/index'; -@import './vis_types/index'; +@import "./annotations_editor"; +@import "./color_rules"; +@import "./color_picker"; +@import "./error"; +@import "./no_data"; +@import "./markdown_editor"; +@import "./series_editor"; +@import "./vis_editor"; +@import "./vis_editor_visualization"; +@import "./vis_picker"; +@import "./vis_with_splits"; +@import "./aggs/index"; +@import "./panel_config/index"; +@import "./vis_types/index"; diff --git a/src/plugins/vis_type_timeseries/public/application/components/_no_data.scss b/src/plugins/vis_type_timeseries/public/application/components/_no_data.scss index 63aaa61301a5..c06a0ea3fdee 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/_no_data.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/_no_data.scss @@ -8,10 +8,12 @@ // Calculate colors similar to EuiCallout $tempBackgroundColor: tintOrShade($euiColorPrimary, 90%, 70%); + background-color: $tempBackgroundColor; .tvbNoData__title { - @include euiTitle('xs'); + @include euiTitle("xs"); + color: makeHighContrastColor($euiColorPrimary, $tempBackgroundColor); } } diff --git a/src/plugins/vis_type_timeseries/public/application/components/_series_editor.scss b/src/plugins/vis_type_timeseries/public/application/components/_series_editor.scss index 82d1f4ea6267..19b493f1014a 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/_series_editor.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/_series_editor.scss @@ -2,7 +2,7 @@ padding: $euiSize; } -@include euiPanel('.tvbSeriesEditor'); +@include euiPanel(".tvbSeriesEditor"); .tvbSeriesEditor { margin-bottom: $euiSize; diff --git a/src/plugins/vis_type_timeseries/public/application/components/_vis_with_splits.scss b/src/plugins/vis_type_timeseries/public/application/components/_vis_with_splits.scss index 36ab49c0cc80..25f5ba575612 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/_vis_with_splits.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/_vis_with_splits.scss @@ -1,10 +1,13 @@ .tvbSplitVis { width: 100%; display: flex; + // Allow wrapping beyond 4 in a row flex-wrap: wrap; + // Space out each vis instead of clumping in the center to utilize more hoizontal space justify-content: space-around; + // Stretch the all the heights so that prior to wrapping the vis' take up the full panel height align-items: stretch; } @@ -13,6 +16,7 @@ // This maintains that each vis will be at least 1/4 of the panel's width // but it will also grow to fill the space if there are less than 4 in a row flex: 1 0 25%; + // Ensure a minimum width is acheived on smaller width panels min-width: $tvbSplitBlockVisMinSize; display: flex; diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/_index.scss b/src/plugins/vis_type_timeseries/public/application/components/aggs/_index.scss index cf423d36ef48..c3fc18e284fa 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/aggs/_index.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/_index.scss @@ -1 +1 @@ -@import './agg_row'; +@import "./agg_row"; diff --git a/src/plugins/vis_type_timeseries/public/application/components/panel_config/_index.scss b/src/plugins/vis_type_timeseries/public/application/components/panel_config/_index.scss index b2c1b560dcdb..147447dcb161 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/panel_config/_index.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/panel_config/_index.scss @@ -1 +1 @@ -@import './panel_config'; +@import "./panel_config"; diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/_index.scss b/src/plugins/vis_type_timeseries/public/application/components/vis_types/_index.scss index a2918916c4c4..1e14764e209f 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/_index.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/_index.scss @@ -1,3 +1,2 @@ -@import './vis_types'; - -@import './markdown/markdown'; +@import "./vis_types"; +@import "./markdown/markdown"; diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/_vis_types.scss b/src/plugins/vis_type_timeseries/public/application/components/vis_types/_vis_types.scss index c445d456a170..f7cfa98d82cb 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/_vis_types.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/_vis_types.scss @@ -11,21 +11,24 @@ .tvbVisTimeSeries { overflow: hidden; } + .tvbVisTimeSeriesDark { .echReactiveChart_unavailable { - color: #DFE5EF; + color: #dfe5ef; } - .echLegendItem { - color: #DFE5EF; + + .echLegendItem { + color: #dfe5ef; } } + .tvbVisTimeSeriesLight { .echReactiveChart_unavailable { color: #343741; } - .echLegendItem { + + .echLegendItem { color: #343741; } } } - diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/_markdown.scss b/src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/_markdown.scss index 92037c80e717..8e79bcde79e7 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/_markdown.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/_markdown.scss @@ -7,6 +7,7 @@ .tvbMarkdown__content { @include euiScrollBar; + display: flex; flex-direction: column; flex: 1 0 auto; @@ -29,5 +30,3 @@ overflow: auto; } } - - diff --git a/src/plugins/vis_type_timeseries/public/application/index.scss b/src/plugins/vis_type_timeseries/public/application/index.scss index 0c7f7f5221ef..4452a4a08f85 100644 --- a/src/plugins/vis_type_timeseries/public/application/index.scss +++ b/src/plugins/vis_type_timeseries/public/application/index.scss @@ -5,14 +5,14 @@ // tvbChart__legend--small // tvbChart__legend-isLoading -@import './variables'; -@import './mixins'; +@import "./variables"; +@import "./mixins"; // Library overrides -@import './tvb_editor'; +@import "./tvb_editor"; // Components -@import './components/index'; +@import "./components/index"; // Visualizations -@import './visualizations/views/index'; +@import "./visualizations/views/index"; diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/_annotation.scss b/src/plugins/vis_type_timeseries/public/application/visualizations/views/_annotation.scss index 3f7e9d502500..57904da66723 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/_annotation.scss +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/_annotation.scss @@ -19,6 +19,7 @@ .tvbVisAnnotation__tooltip { @include euiFontSizeXS; + padding: $euiSizeS; animation-duration: 0s; animation-delay: 0s; diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/_gauge.scss b/src/plugins/vis_type_timeseries/public/application/visualizations/views/_gauge.scss index 7f3c049a131d..a73ac1fec538 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/_gauge.scss +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/_gauge.scss @@ -32,7 +32,7 @@ .tvbVisGauge__label { color: $tvbTextColor; - font-size: .5em; /* 1 */ + font-size: 0.5em; /* 1 */ line-height: 1em; /* 1 */ text-align: center; padding: 0 $euiSizeS $euiSizeXS; @@ -44,7 +44,7 @@ .tvbVisGauge__value { color: $tvbValueColor; - font-size: .9em; /* 1 */ + font-size: 0.9em; /* 1 */ line-height: 1em; /* 1 */ text-align: center; @@ -55,7 +55,8 @@ .tvbVisGauge__additionalLabel { @include euiTextTruncate; - font-size: .4em; /* 1 */ + + font-size: 0.4em; /* 1 */ line-height: 1.2em; /* 1 */ width: 100%; padding: 2px $euiSizeXS; diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/_index.scss b/src/plugins/vis_type_timeseries/public/application/visualizations/views/_index.scss index ddd560480180..dbde9427fa1a 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/_index.scss +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/_index.scss @@ -1,5 +1,4 @@ -@import './annotation'; -@import './gauge'; -@import './metric'; - -@import './top_n'; +@import "./annotation"; +@import "./gauge"; +@import "./metric"; +@import "./top_n"; diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/_metric.scss b/src/plugins/vis_type_timeseries/public/application/visualizations/views/_metric.scss index ae065f66d85c..bc3a2f291711 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/_metric.scss +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/_metric.scss @@ -34,11 +34,10 @@ .tvbVisMetric__label--primary { color: $tvbTextColor; text-align: center; - font-size: .5em; /* 1 */ - margin-bottom: .25em; /* 1 */ + font-size: 0.5em; /* 1 */ + margin-bottom: 0.25em; /* 1 */ line-height: 1em; /* 1 */ - // sass-lint:disable-block mixins-before-declarations // these need to come after the base/normal styles @include tvbVisMetricReversedColor { color: $tvbTextColorReversed; @@ -52,7 +51,6 @@ font-weight: $euiFontWeightBold; line-height: 1em; /* 1 */ - // sass-lint:disable-block mixins-before-declarations // these need to come after the base/normal styles @include tvbVisMetricReversedColor { color: $tvbValueColorReversed; @@ -63,16 +61,15 @@ display: flex; justify-content: center; align-items: center; - margin-top: .05em; /* 1 */ + margin-top: 0.05em; /* 1 */ } .tvbVisMetric__label--secondary { - font-size: .35em; /* 1 */ - margin-right: .3em; /* 1 */ + font-size: 0.35em; /* 1 */ + margin-right: 0.3em; /* 1 */ color: $tvbTextColor; line-height: 1em; /* 1 */ - // sass-lint:disable-block mixins-before-declarations // these need to come after the base/normal styles @include tvbVisMetricReversedColor { color: $tvbTextColorReversed; @@ -80,11 +77,10 @@ } .tvbVisMetric__value--secondary { - font-size: .35em; /* 1 */ + font-size: 0.35em; /* 1 */ color: $tvbValueColor; line-height: 1em; /* 1 */ - // sass-lint:disable-block mixins-before-declarations // these need to come after the base/normal styles @include tvbVisMetricReversedColor { color: $tvbValueColorReversed; @@ -98,13 +94,13 @@ .tvbVisMetric__label--additional { @include euiTextTruncate; - font-size: .25em; /* 1 */ + + font-size: 0.25em; /* 1 */ padding: ($euiSizeXS / 2) 0 0; text-align: center; color: $tvbValueColor; line-height: 1.2; // Ensure the descenders don't get cut off - // sass-lint:disable-block mixins-before-declarations // these need to come after the base/normal styles @include tvbVisMetricReversedColor { color: $tvbValueColorReversed; diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/_top_n.scss b/src/plugins/vis_type_timeseries/public/application/visualizations/views/_top_n.scss index fb6be95dba2a..07d656c0ca6e 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/_top_n.scss +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/_top_n.scss @@ -1,5 +1,3 @@ - - .tvbVisTopN { position: relative; overflow: auto; diff --git a/src/plugins/vis_type_vega/public/_vega_editor.scss b/src/plugins/vis_type_vega/public/_vega_editor.scss index 709aaa2030f6..da5382745014 100644 --- a/src/plugins/vis_type_vega/public/_vega_editor.scss +++ b/src/plugins/vis_type_vega/public/_vega_editor.scss @@ -5,8 +5,9 @@ } .vgaEditor { - @include euiBreakpoint('xs', 's', 'm') { + @include euiBreakpoint("xs", "s", "m") { @include euiScrollBar; + max-height: $euiSize * 15; overflow-y: auto; } @@ -16,6 +17,7 @@ position: absolute; z-index: $euiZLevel1; top: $euiSizeS; + // Adjust for sidebar collapse button right: $euiSizeXXL; line-height: 1; diff --git a/src/plugins/vis_type_vega/public/_vega_vis.scss b/src/plugins/vis_type_vega/public/_vega_vis.scss index 12108c7ba3de..01f9c652eae2 100644 --- a/src/plugins/vis_type_vega/public/_vega_vis.scss +++ b/src/plugins/vis_type_vega/public/_vega_vis.scss @@ -2,13 +2,13 @@ display: flex; flex: 1 1 100%; position: relative; + // flex-direction determined by js } .vgaVis__view { z-index: 0; flex: 1 1 100%; - display: block; max-width: 100%; max-height: 100%; @@ -17,13 +17,13 @@ // BUG #23514: Make sure Vega doesn't display the controls in two places .vega-bindings { - // sass-lint:disable no-important display: none !important; } } .vgaVis__controls { @include euiFontSizeS; + display: flex; &:not(:empty) { @@ -48,7 +48,7 @@ width: $euiSizeM * 10 - $euiSize; } - input[type='range'] { + input[type="range"] { width: $euiSizeM * 10; display: inline-block; vertical-align: middle; @@ -75,7 +75,7 @@ top: 0; width: 100%; margin: auto; - opacity: .8; + opacity: 0.8; z-index: 1; list-style: none; } @@ -91,17 +91,18 @@ .vgaVis__message--warn .vgaVis__messageCode { $calculatedBackgroundColor: tintOrShade($euiColorWarning, 90%, 70%); + background-color: $calculatedBackgroundColor; color: makeHighContrastColor($euiColorWarning, $calculatedBackgroundColor); } .vgaVis__message--err .vgaVis__messageCode { $calculateBackgroundColor: tintOrShade($euiColorDanger, 90%, 70%); + background-color: $calculateBackgroundColor; color: makeHighContrastColor($euiColorDanger, $calculateBackgroundColor); } - // Style tooltip popup (gets created dynamically at the top level if dashboard has a Vega vis) // Adapted from https://github.com/vega/vega-tooltip @@ -115,6 +116,7 @@ td { @include euiTextTruncate; + padding-top: $euiSizeXS; padding-bottom: $euiSizeXS; @@ -131,8 +133,7 @@ } } - - @media only screen and (max-width: map-get($euiBreakpoints, 'm')) { + @media only screen and (max-width: map-get($euiBreakpoints, "m")) { td { &.key { max-width: $euiSize * 6; diff --git a/src/plugins/vis_type_vega/public/index.scss b/src/plugins/vis_type_vega/public/index.scss index 78d9eb61999f..3ca72e834eb7 100644 --- a/src/plugins/vis_type_vega/public/index.scss +++ b/src/plugins/vis_type_vega/public/index.scss @@ -5,5 +5,5 @@ // vgaChart__legend--small // vgaChart__legend-isLoading -@import './vega_vis'; -@import './vega_editor'; +@import "./vega_vis"; +@import "./vega_editor"; diff --git a/src/plugins/vis_type_vega/public/vega_inspector/vega_data_inspector.scss b/src/plugins/vis_type_vega/public/vega_inspector/vega_data_inspector.scss index 487f505657d3..6739cdbae4de 100644 --- a/src/plugins/vis_type_vega/public/vega_inspector/vega_data_inspector.scss +++ b/src/plugins/vis_type_vega/public/vega_inspector/vega_data_inspector.scss @@ -8,11 +8,11 @@ display: flex; flex-direction: column; - [role='tablist'] { + [role="tablist"] { flex-shrink: 0; } - [role='tabpanel'] { + [role="tabpanel"] { flex-grow: 1; } } diff --git a/src/plugins/vis_type_vislib/public/index.scss b/src/plugins/vis_type_vislib/public/index.scss index 64445648ba84..6438c114487b 100644 --- a/src/plugins/vis_type_vislib/public/index.scss +++ b/src/plugins/vis_type_vislib/public/index.scss @@ -1 +1 @@ -@import './vislib/index' +@import "./vislib/index" diff --git a/src/plugins/vis_type_vislib/public/vislib/_index.scss b/src/plugins/vis_type_vislib/public/vislib/_index.scss index 78e16224a67a..3e44e368ab0b 100644 --- a/src/plugins/vis_type_vislib/public/vislib/_index.scss +++ b/src/plugins/vis_type_vislib/public/vislib/_index.scss @@ -1,9 +1,7 @@ -@import './variables'; -@import './vislib_vis_type'; - -@import './lib/index'; -@import './components/tooltip/index'; -@import './components/legend/index'; - -@import './visualizations/point_series/index'; -@import './visualizations/gauges/index'; +@import "./variables"; +@import "./vislib_vis_type"; +@import "./lib/index"; +@import "./components/tooltip/index"; +@import "./components/legend/index"; +@import "./visualizations/point_series/index"; +@import "./visualizations/gauges/index"; diff --git a/src/plugins/vis_type_vislib/public/vislib/_variables.scss b/src/plugins/vis_type_vislib/public/vislib/_variables.scss index 5b2fb93b0ca0..922dc248ca4e 100644 --- a/src/plugins/vis_type_vislib/public/vislib/_variables.scss +++ b/src/plugins/vis_type_vislib/public/vislib/_variables.scss @@ -1,4 +1,4 @@ // TODO: Use the same styles for TSVB and Vislib vis' -$visLineColor: transparentize($euiColorDarkShade, .8); +$visLineColor: transparentize($euiColorDarkShade, 0.8); $visTextColor: $euiColorDarkShade; -$visHoverBackgroundColor: transparentize($euiColorFullShade, .9); +$visHoverBackgroundColor: transparentize($euiColorFullShade, 0.9); diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/_index.scss b/src/plugins/vis_type_vislib/public/vislib/components/legend/_index.scss index 53617a984dcf..f2d306c60100 100644 --- a/src/plugins/vis_type_vislib/public/vislib/components/legend/_index.scss +++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/_index.scss @@ -1 +1 @@ -@import './_legend'; +@import "./legend"; diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss index b1a59f88a348..f5b93730fb75 100644 --- a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss +++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss @@ -1,4 +1,4 @@ -@import '../../variables'; +@import "../../variables"; // NOTE: Some of the styles attempt to align with the TSVB legend @@ -14,16 +14,18 @@ $visLegendLineHeight: $euiSize; display: flex; padding: $euiSizeXS; background-color: $euiColorEmptyShade; - transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance, background-color $euiAnimSpeedFast $euiAnimSlightResistance $euiAnimSpeedExtraSlow; + transition: + opacity $euiAnimSpeedFast $euiAnimSlightResistance, + background-color $euiAnimSpeedFast $euiAnimSlightResistance $euiAnimSpeedExtraSlow; &:focus { box-shadow: none; - background-color: $euiFocusBackgroundColor !important; // sass-lint:disable-line no-important + background-color: $euiFocusBackgroundColor !important; } } .visLegend__toggle--isOpen { - background-color: transparentize($euiColorDarkestShade, .9); + background-color: transparentize($euiColorDarkestShade, 0.9); opacity: 1; } @@ -47,6 +49,7 @@ $visLegendLineHeight: $euiSize; .visLegend__list { @include euiScrollBar; + display: flex; width: $visLegendWidth; // Must be a hard-coded width for the chart to get its correct dimensions flex: 1 1 auto; @@ -67,8 +70,7 @@ $visLegendLineHeight: $euiSize; .visLib--legend-top &, .visLib--legend-bottom & { width: auto; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; .visLegend__value { flex-grow: 0; diff --git a/src/plugins/vis_type_vislib/public/vislib/components/tooltip/_index.scss b/src/plugins/vis_type_vislib/public/vislib/components/tooltip/_index.scss index f4e7075ff7b4..f2168d02b6cd 100644 --- a/src/plugins/vis_type_vislib/public/vislib/components/tooltip/_index.scss +++ b/src/plugins/vis_type_vislib/public/vislib/components/tooltip/_index.scss @@ -1 +1 @@ -@import './tooltip'; +@import "./tooltip"; diff --git a/src/plugins/vis_type_vislib/public/vislib/components/tooltip/_tooltip.scss b/src/plugins/vis_type_vislib/public/vislib/components/tooltip/_tooltip.scss index bafec7edf3b9..2563d6dff7dc 100644 --- a/src/plugins/vis_type_vislib/public/vislib/components/tooltip/_tooltip.scss +++ b/src/plugins/vis_type_vislib/public/vislib/components/tooltip/_tooltip.scss @@ -1,6 +1,7 @@ .visTooltip, .visTooltip__sizingClone { - @include euiToolTipStyle('s'); + @include euiToolTipStyle("s"); + visibility: hidden; pointer-events: none; position: fixed; diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/_alerts.scss b/src/plugins/vis_type_vislib/public/vislib/lib/_alerts.scss index 596f4675b125..8c5eccc3be8a 100644 --- a/src/plugins/vis_type_vislib/public/vislib/lib/_alerts.scss +++ b/src/plugins/vis_type_vislib/public/vislib/lib/_alerts.scss @@ -1,4 +1,3 @@ - .visAlerts__tray { position: absolute; bottom: ($euiSizeXS + 1px); @@ -6,7 +5,6 @@ right: 0; list-style: none; padding: 0; - transition-property: opacity; transition-delay: $euiAnimSpeedExtraFast; transition-duration: $euiAnimSpeedExtraFast; diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/_index.scss b/src/plugins/vis_type_vislib/public/vislib/lib/_index.scss index b19c2dfb153b..9183b62e74b9 100644 --- a/src/plugins/vis_type_vislib/public/vislib/lib/_index.scss +++ b/src/plugins/vis_type_vislib/public/vislib/lib/_index.scss @@ -1,4 +1,3 @@ -@import './alerts'; -@import './handler'; -@import './layout/index'; - +@import "./alerts"; +@import "./handler"; +@import "./layout/index"; diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/layout/_index.scss b/src/plugins/vis_type_vislib/public/vislib/lib/layout/_index.scss index 0820684ccbcf..a293b7a16766 100644 --- a/src/plugins/vis_type_vislib/public/vislib/lib/layout/_index.scss +++ b/src/plugins/vis_type_vislib/public/vislib/lib/layout/_index.scss @@ -1 +1 @@ -@import './layout'; +@import "./layout"; diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/layout/_layout.scss b/src/plugins/vis_type_vislib/public/vislib/lib/layout/_layout.scss index 96c72bd5956d..c327eb3f9978 100644 --- a/src/plugins/vis_type_vislib/public/vislib/lib/layout/_layout.scss +++ b/src/plugins/vis_type_vislib/public/vislib/lib/layout/_layout.scss @@ -20,10 +20,10 @@ // .visAxis__splitAxes--y // .visAxis__spacer--y.visAxis__spacer--y-[position] -// +// ----------- // LAYOUT ONLY // Numbers in here are brittle -// +// ----------- .visWrapper { display: flex; @@ -142,10 +142,9 @@ min-height: 0; } - -// +// ----- // STYLE -// +// ----- // BEM NOTE: These selectors could not be renamed. // Most come from an external libray, others are too general for @@ -153,9 +152,8 @@ // could it be easily found to apply to all chart types. // At least wrapping selectors inside .visWrapper will narrow scope. - -// sass-lint:disable-block no-mergeable-selectors // Keep SVG and non-renamable selectors separately +/* stylelint-disable-next-line no-duplicate-selectors */ .visWrapper { svg { overflow: visible; @@ -166,7 +164,7 @@ opacity: 1; &:hover { - opacity: .8; + opacity: 0.8; } } @@ -176,7 +174,7 @@ &:hover { opacity: 1; stroke-width: $euiSizeS; - stroke-opacity: .8; + stroke-opacity: 0.8; } } @@ -192,6 +190,7 @@ .label-text { @include fontSize($euiFontSizeXS); + font-weight: $euiFontWeightRegular; } @@ -215,11 +214,13 @@ .tick text { @include fontSize($euiFontSizeXS - 1px); + fill: $visTextColor; } .axis-title text { @include fontSize($euiFontSizeXS); + font-weight: $euiFontWeightBold; fill: $visTextColor; } @@ -240,12 +241,14 @@ text { @include fontSize($euiFontSizeXS - 1px); + fill: $visTextColor; } } .chart { @include euiScrollBar; + flex: 1 1 100%; min-height: 0; min-width: 0; @@ -299,7 +302,7 @@ } .visAreaChart__overlapArea { - opacity: .8; + opacity: 0.8; } .series > path, @@ -309,12 +312,11 @@ } .series > path { - fill-opacity: .8; + fill-opacity: 0.8; } .blur_shape { - // sass-lint:disable-block no-important - opacity: .3 !important; + opacity: 0.3 !important; } .slice { @@ -322,7 +324,7 @@ stroke: $euiColorEmptyShade; &:hover { - opacity: .8; + opacity: 0.8; } } @@ -332,7 +334,7 @@ &:hover { stroke-width: $euiSizeS; - stroke-opacity: .8; + stroke-opacity: 0.8; } } } diff --git a/src/plugins/vis_type_vislib/public/vislib/visualizations/gauges/_index.scss b/src/plugins/vis_type_vislib/public/vislib/visualizations/gauges/_index.scss index 1c6b5e669a94..3b16c2e74b9d 100644 --- a/src/plugins/vis_type_vislib/public/vislib/visualizations/gauges/_index.scss +++ b/src/plugins/vis_type_vislib/public/vislib/visualizations/gauges/_index.scss @@ -1 +1 @@ -@import './meter'; +@import "./meter"; diff --git a/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/_index.scss b/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/_index.scss index 53fce786ecc1..8c8a2b426707 100644 --- a/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/_index.scss +++ b/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/_index.scss @@ -1 +1 @@ -@import './labels'; +@import "./labels"; diff --git a/src/plugins/visualizations/public/components/_index.scss b/src/plugins/visualizations/public/components/_index.scss index 532e8106b023..31f1f9a32497 100644 --- a/src/plugins/visualizations/public/components/_index.scss +++ b/src/plugins/visualizations/public/components/_index.scss @@ -1 +1 @@ -@import 'visualization'; +@import "visualization"; diff --git a/src/plugins/visualizations/public/components/_visualization.scss b/src/plugins/visualizations/public/components/_visualization.scss index f5e2d4fcf286..c09c45c9648f 100644 --- a/src/plugins/visualizations/public/components/_visualization.scss +++ b/src/plugins/visualizations/public/components/_visualization.scss @@ -22,6 +22,7 @@ */ .visChart__container { @include euiScrollBar; + min-height: 0; flex: 1 1 0; /* 1 */ display: flex; @@ -30,11 +31,11 @@ transition: opacity 0.01s; // IE11 Hack - // + // --------- // Normally we would just set flex: 1 1 0%, which works as expected in IE11. // Unfortunately, a recent bug in Firefox causes this rule to be ignored, so we // have to use an IE-specific hack instead. - @include internetExplorerOnly(){ + @include internetExplorerOnly { flex: 1 0; } @@ -76,4 +77,3 @@ justify-content: center; align-items: center; } - diff --git a/src/plugins/visualizations/public/embeddable/_embeddables.scss b/src/plugins/visualizations/public/embeddable/_embeddables.scss index 23d3e189767d..8499bbdce87d 100644 --- a/src/plugins/visualizations/public/embeddable/_embeddables.scss +++ b/src/plugins/visualizations/public/embeddable/_embeddables.scss @@ -27,12 +27,13 @@ */ .embPanel_optionsMenuPopover[class*="-isOpen"], -.embPanel:hover { +.embPanel:hover { .visLegend__toggle { opacity: 1; } } +/* stylelint-disable-next-line no-duplicate-selectors */ .embPanel .visLegend__toggle { opacity: 0; /* 1 */ @@ -45,4 +46,4 @@ .visLegend__toggle { opacity: 1; /* 3 */ } -} \ No newline at end of file +} diff --git a/src/plugins/visualizations/public/embeddable/_index.scss b/src/plugins/visualizations/public/embeddable/_index.scss index c1e3809657bf..9fd86735692a 100644 --- a/src/plugins/visualizations/public/embeddable/_index.scss +++ b/src/plugins/visualizations/public/embeddable/_index.scss @@ -1,2 +1,2 @@ -@import 'visualize_lab_disabled'; -@import 'embeddables'; +@import "visualize_lab_disabled"; +@import "embeddables"; diff --git a/src/plugins/visualizations/public/embeddable/_visualize_lab_disabled.scss b/src/plugins/visualizations/public/embeddable/_visualize_lab_disabled.scss index 914480ff8c77..4cebc56b0f22 100644 --- a/src/plugins/visualizations/public/embeddable/_visualize_lab_disabled.scss +++ b/src/plugins/visualizations/public/embeddable/_visualize_lab_disabled.scss @@ -10,4 +10,3 @@ .visDisabledLabVisualization__icon { font-size: $euiFontSizeXL; } - diff --git a/src/plugins/visualizations/public/index.scss b/src/plugins/visualizations/public/index.scss index 2b61535f3e7f..bc62faaf67e4 100644 --- a/src/plugins/visualizations/public/index.scss +++ b/src/plugins/visualizations/public/index.scss @@ -1,3 +1,3 @@ -@import 'wizard/index'; -@import 'embeddable/index'; -@import 'components/index'; +@import "wizard/index"; +@import "embeddable/index"; +@import "components/index"; diff --git a/src/plugins/visualizations/public/wizard/_dialog.scss b/src/plugins/visualizations/public/wizard/_dialog.scss index 793951f9dd1c..f8819e556dec 100644 --- a/src/plugins/visualizations/public/wizard/_dialog.scss +++ b/src/plugins/visualizations/public/wizard/_dialog.scss @@ -1,5 +1,6 @@ .visNewVisDialog { max-width: 100vw; + /* stylelint-disable-next-line function-url-quotes */ background-image: url(lightOrDarkTheme("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='313' height='461' viewBox='0 0 313 461'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23F5F7FA' d='M294.009,184.137 C456.386,184.137 588.018,315.77 588.018,478.146 C588.018,640.523 456.386,772.156 294.009,772.156 C131.632,772.156 0,640.523 0,478.146 C0,315.77 131.632,184.137 294.009,184.137 Z M294.009,384.552 C242.318,384.552 200.415,426.456 200.415,478.146 C200.415,529.837 242.318,571.741 294.009,571.741 C345.7,571.741 387.604,529.837 387.604,478.146 C387.604,426.456 345.7,384.552 294.009,384.552 Z'/%3E%3Cpath fill='%23E6EBF2' d='M202.958,365.731 L202.958,380.991 L187.698,380.991 L187.698,365.731 L202.958,365.731 Z M202.958,327.073 L202.958,342.333 L187.698,342.333 L187.698,327.073 L202.958,327.073 Z M243.651,325.038 L243.651,340.298 L228.391,340.298 L228.391,325.038 L243.651,325.038 Z M243.651,286.379 L243.651,301.639 L228.391,301.639 L228.391,286.379 L243.651,286.379 Z M202.958,285.362 L202.958,300.622 L187.698,300.622 L187.698,285.362 L202.958,285.362 Z M284.345,284.345 L284.345,299.605 L269.085,299.605 L269.085,284.345 L284.345,284.345 Z M284.345,245.686 L284.345,260.946 L269.085,260.946 L269.085,245.686 L284.345,245.686 Z M243.651,244.669 L243.651,259.929 L228.391,259.929 L228.391,244.669 L243.651,244.669 Z M202.958,243.651 L202.958,258.911 L187.698,258.911 L187.698,243.651 L202.958,243.651 Z M284.345,203.975 L284.345,219.235 L269.085,219.235 L269.085,203.975 L284.345,203.975 Z M202.958,203.975 L202.958,219.235 L187.698,219.235 L187.698,203.975 L202.958,203.975 Z M243.651,202.958 L243.651,218.218 L228.391,218.218 L228.391,202.958 L243.651,202.958 Z M243.651,163.282 L243.651,178.542 L228.391,178.542 L228.391,163.282 L243.651,163.282 Z M202.958,163.282 L202.958,178.542 L187.698,178.542 L187.698,163.282 L202.958,163.282 Z M284.345,162.265 L284.345,177.525 L269.085,177.525 L269.085,162.265 L284.345,162.265 Z M284.345,122.589 L284.345,137.849 L269.085,137.849 L269.085,122.589 L284.345,122.589 Z M243.651,122.589 L243.651,137.849 L228.391,137.849 L228.391,122.589 L243.651,122.589 Z M202.958,122.589 L202.958,137.849 L187.698,137.849 L187.698,122.589 L202.958,122.589 Z M284.345,81.8954 L284.345,97.1554 L269.085,97.1554 L269.085,81.8954 L284.345,81.8954 Z M243.651,81.8954 L243.651,97.1554 L228.391,97.1554 L228.391,81.8954 L243.651,81.8954 Z M202.958,81.8954 L202.958,97.1554 L187.698,97.1554 L187.698,81.8954 L202.958,81.8954 Z M284.345,41.202 L284.345,56.462 L269.085,56.462 L269.085,41.202 L284.345,41.202 Z M243.651,41.202 L243.651,56.462 L228.391,56.462 L228.391,41.202 L243.651,41.202 Z M284.345,0.508789 L284.345,15.7688 L269.085,15.7688 L269.085,0.508789 L284.345,0.508789 Z'/%3E%3C/g%3E%3C/svg%3E","data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='313' height='461' viewBox='0 0 313 461'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%2318191E' d='M294.009,184.137 C456.386,184.137 588.018,315.77 588.018,478.146 C588.018,640.523 456.386,772.156 294.009,772.156 C131.632,772.156 0,640.523 0,478.146 C0,315.77 131.632,184.137 294.009,184.137 Z M294.009,384.552 C242.318,384.552 200.415,426.456 200.415,478.146 C200.415,529.837 242.318,571.741 294.009,571.741 C345.7,571.741 387.604,529.837 387.604,478.146 C387.604,426.456 345.7,384.552 294.009,384.552 Z'/%3E%3Cpath fill='%2315161B' d='M202.958,365.731 L202.958,380.991 L187.698,380.991 L187.698,365.731 L202.958,365.731 Z M202.958,327.073 L202.958,342.333 L187.698,342.333 L187.698,327.073 L202.958,327.073 Z M243.651,325.038 L243.651,340.298 L228.391,340.298 L228.391,325.038 L243.651,325.038 Z M243.651,286.379 L243.651,301.639 L228.391,301.639 L228.391,286.379 L243.651,286.379 Z M202.958,285.362 L202.958,300.622 L187.698,300.622 L187.698,285.362 L202.958,285.362 Z M284.345,284.345 L284.345,299.605 L269.085,299.605 L269.085,284.345 L284.345,284.345 Z M284.345,245.686 L284.345,260.946 L269.085,260.946 L269.085,245.686 L284.345,245.686 Z M243.651,244.669 L243.651,259.929 L228.391,259.929 L228.391,244.669 L243.651,244.669 Z M202.958,243.651 L202.958,258.911 L187.698,258.911 L187.698,243.651 L202.958,243.651 Z M284.345,203.975 L284.345,219.235 L269.085,219.235 L269.085,203.975 L284.345,203.975 Z M202.958,203.975 L202.958,219.235 L187.698,219.235 L187.698,203.975 L202.958,203.975 Z M243.651,202.958 L243.651,218.218 L228.391,218.218 L228.391,202.958 L243.651,202.958 Z M243.651,163.282 L243.651,178.542 L228.391,178.542 L228.391,163.282 L243.651,163.282 Z M202.958,163.282 L202.958,178.542 L187.698,178.542 L187.698,163.282 L202.958,163.282 Z M284.345,162.265 L284.345,177.525 L269.085,177.525 L269.085,162.265 L284.345,162.265 Z M284.345,122.589 L284.345,137.849 L269.085,137.849 L269.085,122.589 L284.345,122.589 Z M243.651,122.589 L243.651,137.849 L228.391,137.849 L228.391,122.589 L243.651,122.589 Z M202.958,122.589 L202.958,137.849 L187.698,137.849 L187.698,122.589 L202.958,122.589 Z M284.345,81.8954 L284.345,97.1554 L269.085,97.1554 L269.085,81.8954 L284.345,81.8954 Z M243.651,81.8954 L243.651,97.1554 L228.391,97.1554 L228.391,81.8954 L243.651,81.8954 Z M202.958,81.8954 L202.958,97.1554 L187.698,97.1554 L187.698,81.8954 L202.958,81.8954 Z M284.345,41.202 L284.345,56.462 L269.085,56.462 L269.085,41.202 L284.345,41.202 Z M243.651,41.202 L243.651,56.462 L228.391,56.462 L228.391,41.202 L243.651,41.202 Z M284.345,0.508789 L284.345,15.7688 L269.085,15.7688 L269.085,0.508789 L284.345,0.508789 Z'/%3E%3C/g%3E%3C/svg%3E")); background-repeat: no-repeat; background-position: calc(100% + 1px) calc(100% + 1px); @@ -16,6 +17,7 @@ padding: $euiSizeM $euiSizeL 0; min-height: 0; } + .visNewVisDialog__list { min-height: 0; } @@ -26,6 +28,7 @@ .visNewVisDialog__typesWrapper { @include euiOverflowShadow; + max-width: $euiSizeXXL * 10; min-height: 0; margin-top: 2px; // Account for search field dropshadow @@ -34,6 +37,7 @@ .visNewVisDialog__types { @include euiScrollBar; + // EUITODO: allow for more (calculated) widths of `EuiKeyPadMenu` width: auto; overflow-y: auto; @@ -55,7 +59,7 @@ @include size($euiSizeL); } -@include euiBreakpoint('xs', 's') { +@include euiBreakpoint("xs", "s") { .visNewVisDialog { background-image: none; } diff --git a/src/plugins/visualizations/public/wizard/_index.scss b/src/plugins/visualizations/public/wizard/_index.scss index a10b4b1b347b..7ca63f56ca75 100644 --- a/src/plugins/visualizations/public/wizard/_index.scss +++ b/src/plugins/visualizations/public/wizard/_index.scss @@ -1 +1 @@ -@import 'dialog'; +@import "dialog"; diff --git a/src/plugins/visualize/public/application/components/visualize_editor.scss b/src/plugins/visualize/public/application/components/visualize_editor.scss index 3a542cacc44b..7fe201ee2907 100644 --- a/src/plugins/visualize/public/application/components/visualize_editor.scss +++ b/src/plugins/visualize/public/application/components/visualize_editor.scss @@ -1,9 +1,9 @@ .visEditor { - @include flex-parent(); + @include flex-parent; height: 100%; - @include euiBreakpoint('xs', 's', 'm') { + @include euiBreakpoint("xs", "s", "m") { .visualization { // While we are on a small screen the visualization is below the // editor. In this cases it needs a minimum height, since it would otherwise @@ -23,7 +23,8 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */ } .visEditor__content { - @include flex-parent(); + @include flex-parent; + width: 100%; z-index: 0; } diff --git a/src/plugins/visualize/public/application/components/visualize_listing.scss b/src/plugins/visualize/public/application/components/visualize_listing.scss index a4b4c1b994ef..13c2be619247 100644 --- a/src/plugins/visualize/public/application/components/visualize_listing.scss +++ b/src/plugins/visualize/public/application/components/visualize_listing.scss @@ -12,6 +12,6 @@ .visListingTable__experimentalIcon { width: $euiSizeL; vertical-align: baseline; - padding: 0 $euiSizeS; + padding: 0 $euiSizeS; margin-left: $euiSizeS; -} \ No newline at end of file +} diff --git a/tasks/config/run.js b/tasks/config/run.js index e4455d4e0599..7e3afceef553 100644 --- a/tasks/config/run.js +++ b/tasks/config/run.js @@ -62,10 +62,10 @@ module.exports = function () { args: ['scripts/eslint', '--no-cache'], }), - sasslint: scriptWithGithubChecks({ - title: 'sasslint', + stylelint: scriptWithGithubChecks({ + title: 'stylelint', cmd: NODE, - args: ['scripts/sasslint'], + args: ['scripts/stylelint'], }), // used by the test tasks diff --git a/tasks/jenkins.js b/tasks/jenkins.js index 88f7c2f51029..d3924bd379ed 100644 --- a/tasks/jenkins.js +++ b/tasks/jenkins.js @@ -33,7 +33,7 @@ module.exports = function (grunt) { grunt.registerTask('jenkins:unit', [ 'run:eslint', - 'run:sasslint', + 'run:stylelint', 'run:checkTsProjects', 'run:checkDocApiChanges', 'run:typeCheck', diff --git a/tasks/test.js b/tasks/test.js index 83a6e59dc168..8c26f63a4f8b 100644 --- a/tasks/test.js +++ b/tasks/test.js @@ -58,7 +58,7 @@ module.exports = function (grunt) { grunt.task.run( [ !grunt.option('quick') && 'run:eslint', - !grunt.option('quick') && 'run:sasslint', + !grunt.option('quick') && 'run:stylelint', !grunt.option('quick') && 'run:checkTsProjects', !grunt.option('quick') && 'run:checkDocApiChanges', !grunt.option('quick') && 'run:typeCheck', diff --git a/test/scripts/lint/sasslint.sh b/test/scripts/lint/stylelint.sh similarity index 67% rename from test/scripts/lint/sasslint.sh rename to test/scripts/lint/stylelint.sh index b9c683bcb049..24919c5627c2 100755 --- a/test/scripts/lint/sasslint.sh +++ b/test/scripts/lint/stylelint.sh @@ -2,4 +2,4 @@ source src/dev/ci_setup/setup_env.sh -yarn run grunt run:sasslint +yarn run grunt run:stylelint diff --git a/yarn.lock b/yarn.lock index c52c9476bc55..3766bcc0d928 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20713,4 +20713,4 @@ zlib@^1.0.5: zwitch@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920" - integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw== + integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw== \ No newline at end of file