From 4ab380d867b3ca6a21b0412ed8b09f786f6c8522 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 1 Dec 2022 14:13:03 -0800 Subject: [PATCH] Add `stylelint` and scss configs - see https://github.com/stylelint/stylelint/blob/main/docs/user-guide/get-started.md#using-a-community-shared-config - note that adding postcss@8 is necessary for the scss config to work - see https://github.com/stylelint-scss/stylelint-config-standard-scss/issues/5 --- .sass-lint-fix.yml | 12 - .sass-lint.yml | 89 - .stylelintrc | 13 - .stylelintrc.js | 120 ++ package.json | 11 +- .../components/guide_page/_guide_page.scss | 3 +- .../components/guide_rule/_guide_rule.scss | 2 - .../guide_section/_guide_section.scss | 4 +- .../playground/_playground_knobs.scss | 1 - src-docs/src/views/datagrid/_datagrid.scss | 4 +- .../src/views/empty_prompt/_empty_prompt.scss | 4 +- src-docs/src/views/guidelines/_index.scss | 14 +- src-docs/src/views/home/_home.scss | 21 +- .../views/suggest/_global_filter_group.scss | 1 - .../src/views/suggest/_saved_queries.scss | 4 +- src-docs/src/views/text/_text_scaling.scss | 1 - src/components/basic_table/_basic_table.scss | 5 +- .../button/button_empty/_button_empty.scss | 6 +- .../button/button_group/_button_group.scss | 2 +- .../button_group/_button_group_button.scss | 7 +- .../button/button_icon/_button_icon.scss | 3 - .../collapsible_nav/_collapsible_nav.scss | 2 +- .../_collapsible_nav_group.scss | 2 +- .../color_picker/_color_picker.scss | 5 +- src/components/color_picker/_hue.scss | 14 +- src/components/color_picker/_saturation.scss | 2 +- .../color_palette_display/_mixins.scss | 2 +- .../color_stops/_color_stops.scss | 5 +- src/components/combo_box/_combo_box.scss | 13 +- .../combo_box_input/_combo_box_input.scss | 3 +- .../_combo_box_placeholder.scss | 2 +- .../_combo_box_options_list.scss | 5 +- src/components/control_bar/_variables.scss | 1 - .../datagrid/_data_grid_data_row.scss | 9 +- src/components/datagrid/_mixins.scss | 2 +- .../datagrid/body/_data_grid_footer_row.scss | 3 +- .../header/_data_grid_column_resizer.scss | 7 +- .../body/header/_data_grid_header_row.scss | 2 +- .../controls/_data_grid_column_sorting.scss | 3 +- .../date_picker/_date_picker_range.scss | 2 +- .../super_date_picker/_super_date_picker.scss | 5 +- .../_quick_select_popover.scss | 2 +- src/components/drag_and_drop/_draggable.scss | 8 +- src/components/drag_and_drop/_droppable.scss | 2 +- .../empty_prompt/_empty_prompt.scss | 2 +- .../filter_group/_filter_group.scss | 4 +- .../filter_group/_filter_select_item.scss | 1 - src/components/form/checkbox/_checkbox.scss | 8 +- .../_described_form_group.scss | 1 - .../form/field_password/_field_password.scss | 2 +- .../form/field_search/_field_search.scss | 2 +- .../form/file_picker/_file_picker.scss | 3 +- .../_form_control_layout.scss | 13 +- .../_form_control_layout_delimited.scss | 10 +- src/components/form/form_row/_form_row.scss | 3 + src/components/form/radio/_radio.scss | 8 +- src/components/form/select/_select.scss | 2 +- src/components/form/switch/_switch.scss | 4 +- src/components/header/_mixins.scss | 2 +- .../header_section/_header_section_item.scss | 8 +- .../_header_section_item_button.scss | 1 - .../key_pad_menu/_key_pad_menu_item.scss | 9 +- .../_markdown_editor_drop_zone.scss | 8 +- .../_markdown_editor_footer.scss | 2 +- .../_markdown_editor_text_area.scss | 5 +- .../markdown_editor/_markdown_format.scss | 6 +- .../notification/_notification_event.scss | 4 +- .../page/page_content/_page_content_body.scss | 1 - .../_page_content_header_section.scss | 1 - .../page/page_side_bar/_page_side_bar.scss | 1 - .../panel/split_panel/_split_panel.scss | 4 +- .../_resizable_button.scss | 62 +- .../_resizable_collapse_button.scss | 18 +- .../_selectable_template_sitewide_option.scss | 2 +- src/components/side_nav/_mixins.scss | 2 +- src/components/side_nav/_side_nav.scss | 3 +- src/components/side_nav/_side_nav_item.scss | 5 +- src/components/steps/_steps.scss | 3 +- src/components/suggest/_suggest_input.scss | 2 +- src/components/suggest/_suggest_item.scss | 7 +- src/components/table/_responsive.scss | 8 +- src/components/table/_table.scss | 6 +- src/components/table/mobile/_mobile.scss | 2 - src/components/tree_view/tree_view.scss | 4 +- src/global_styling/mixins/_form.scss | 25 +- src/global_styling/mixins/_helpers.scss | 3 +- src/global_styling/mixins/_icons.scss | 2 +- src/global_styling/mixins/_range.scss | 12 +- src/global_styling/mixins/_responsive.scss | 11 +- src/global_styling/mixins/_shadow.scss | 14 +- src/global_styling/mixins/_states.scss | 4 +- src/global_styling/mixins/_typography.scss | 35 +- src/global_styling/variables/_colors_vis.scss | 2 +- src/global_styling/variables/_typography.scss | 4 +- src/themes/amsterdam/_colors_dark.scss | 3 +- src/themes/amsterdam/_colors_light.scss | 2 + .../global_styling/mixins/_link.scss | 2 +- .../global_styling/mixins/_states.scss | 1 - .../global_styling/mixins/_typography.scss | 3 +- .../react_date_picker/_date_picker_days.scss | 1 - .../_date_picker_month_year.scss | 1 - .../react_date_picker/_date_picker_times.scss | 7 +- .../react_date_picker/_mixins.scss | 1 - .../global_styling/variables/_typography.scss | 3 +- .../amsterdam/overrides/_color_stops.scss | 9 +- .../amsterdam/overrides/_combo_box.scss | 3 + .../overrides/_form_control_layout.scss | 3 + .../_form_control_layout_delimited.scss | 9 +- src/themes/amsterdam/overrides/_header.scss | 4 +- src/themes/amsterdam/overrides/_hue.scss | 12 +- .../amsterdam/overrides/_key_pad_menu.scss | 4 +- src/themes/amsterdam/overrides/_steps.scss | 3 +- src/themes/legacy/_colors_dark.scss | 3 +- src/themes/legacy/_colors_light.scss | 2 + src/themes/legacy/reset/_reset.scss | 15 +- yarn.lock | 1567 ++++------------- 116 files changed, 739 insertions(+), 1698 deletions(-) delete mode 100644 .sass-lint-fix.yml delete mode 100644 .sass-lint.yml delete mode 100644 .stylelintrc create mode 100644 .stylelintrc.js diff --git a/.sass-lint-fix.yml b/.sass-lint-fix.yml deleted file mode 100644 index b56a2e4b0670..000000000000 --- a/.sass-lint-fix.yml +++ /dev/null @@ -1,12 +0,0 @@ -files: - include: - - 'src/**/*.s+(a|c)ss' - - 'src-docs/**/*.s+(a|c)ss' -syntax: - include: - - scss - - sass -resolvers: - hex-notation: 1 -options: - optOut: false \ No newline at end of file diff --git a/.sass-lint.yml b/.sass-lint.yml deleted file mode 100644 index 67d94bd5e73e..000000000000 --- a/.sass-lint.yml +++ /dev/null @@ -1,89 +0,0 @@ -files: - include: - - 'src/**/*.s+(a|c)ss' - - 'src-docs/**/*.s+(a|c)ss' - ignore: - # These are themes of outside libraries we import - - 'src/components/series_chart/**/*.s+(a|c)ss' - - 'src/global_styling/react_date_picker/**/*.s+(a|c)ss' - - 'src/components/date_picker/react-datepicker/**/*.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' - mixins-before-declarations: - - 2 - - - exclude: ['euiBreakpoint', 'euiCanAnimate'] - 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/.stylelintrc b/.stylelintrc deleted file mode 100644 index bfa7ff79eb12..000000000000 --- a/.stylelintrc +++ /dev/null @@ -1,13 +0,0 @@ -{ - "rules": { - "number-leading-zero": "never", - "color-hex-case": "upper" - }, - "ignoreFiles": [ - "**/*.ts", - "**/*.tsx", - "**/*.js", - "**/*.jsx", - "**/*.md" - ] -} diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 000000000000..99c787ecaf26 --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,120 @@ +const camelCaseRegex = '^[a-z][\\w-]*$'; // Note: also allows `_` as part of BEM naming + +// TODO: Remove Sass-specific config & rules once we're completely off Sass +module.exports = { + extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier-scss'], + // @see https://stylelint.io/user-guide/rules + // @see https://github.com/stylelint-scss/stylelint-scss#list-of-rules + rules: { + // Enforce camelCase naming + 'selector-class-pattern': camelCaseRegex, + 'keyframes-name-pattern': camelCaseRegex, + 'scss/dollar-variable-pattern': camelCaseRegex, + 'scss/at-mixin-pattern': camelCaseRegex, + 'scss/at-function-pattern': camelCaseRegex, + // TODO: This rule can be removed entirely (already lower by default) once we're fully off Sass + 'function-name-case': [ + 'lower', + { + ignoreFunctions: [`/${camelCaseRegex}/`, 'MIN'], + }, + ], + + // Opinionated rules + 'declaration-no-important': true, + 'max-nesting-depth': [ + 2, + { + ignore: ['blockless-at-rules', 'pseudo-classes'], + }, + ], + 'block-no-empty': true, + 'selector-no-qualifying-type': [ + true, + { + ignore: ['attribute'], // Allows input[type=search] + }, + ], + + // 2 spaces for indentation + indentation: [ + 2, + { + indentInsideParens: 'once-at-root-twice-in-block', + }, + ], + 'string-quotes': 'single', + // Mimic 1tbs `} else {` brace style, like our JS + 'block-opening-brace-space-before': 'always', + 'block-closing-brace-newline-before': 'always-multi-line', + 'scss/at-if-closing-brace-space-after': 'always-intermediate', + // Put a line-break between sections of CSS, but allow quick one-liners for legibility + 'rule-empty-line-before': [ + 'always-multi-line', + { + except: ['first-nested'], + ignore: ['after-comment'], + }, + ], + // Ensure multiple selectors on one line each + 'selector-list-comma-newline-before': 'never-multi-line', + 'selector-list-comma-newline-after': 'always', + // Trim unnecessary newlines/whitespace + 'block-closing-brace-empty-line-before': 'never', + 'declaration-empty-line-before': null, + 'max-empty-lines': 1, + 'no-eol-whitespace': true, + // Enforce spacing around various syntax symbols (colons, operators, etc.) + 'declaration-colon-space-after': 'always-single-line', + 'declaration-colon-space-before': 'never', + 'function-calc-no-unspaced-operator': true, + 'scss/operator-no-unspaced': true, + 'selector-combinator-space-before': 'always', + 'selector-combinator-space-after': 'always', + // Ensure trailing semicolons are always present on non-oneliners + 'declaration-block-semicolon-newline-after': 'always-multi-line', + + // Value preferences + 'number-leading-zero': 'never', + 'number-max-precision': null, + 'color-hex-case': 'upper', + // Attempt to catch/flag non-variable color values + 'color-named': 'never', + 'color-no-hex': true, + // Prefer lowercase values, except for font names and currentColor + 'value-keyword-case': [ + 'lower', + { + ignoreProperties: ['font-family', '/^\\$eui[\\w]+/'], // Allow fonts and Sass variables + ignoreKeywords: ['currentColor'], + }, + ], + 'declaration-block-no-duplicate-properties': [ + true, + { + ignore: ['consecutive-duplicates'], // We occasionally use duplicate property values for cross-browser fallbacks + }, + ], + + // TODO: It may be worth investigating and updating these rules to their more modern counterparts + 'selector-not-notation': 'simple', + 'color-function-notation': 'legacy', + 'alpha-value-notation': 'number', + + // Disable various opinionated extended stylelint rules that EUI has not previously enforced + 'no-descending-specificity': null, + 'keyframe-selector-notation': null, + 'declaration-block-no-redundant-longhand-properties': null, + 'scss/no-global-function-names': null, + 'scss/dollar-variable-empty-line-before': null, + 'scss/at-rule-conditional-no-parentheses': null, + 'scss/double-slash-comment-empty-line-before': null, + 'scss/at-if-no-null': null, + }, + ignoreFiles: [ + 'generator-eui/**/*.scss', + 'src/global_styling/react_date_picker/**/*.scss', + 'src/themes/amsterdam/global_styling/react_date_picker/**/*.scss', + 'src/components/date_picker/react-datepicker/**/*.scss', + ], +}; diff --git a/package.json b/package.json index 1eec43b002c2..69574d7d7678 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,8 @@ "lint-fix": "yarn lint-es-fix", "lint-es": "eslint --cache \"{src,src-docs}/**/*.{ts,tsx,js}\" --max-warnings 0", "lint-es-fix": "yarn lint-es --fix", - "lint-sass": "sass-lint -v --max-warnings 0", - "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml", + "lint-sass": "yarn stylelint \"**/*.scss\"", + "lint-sass-fix": "yarn stylelint \"**/*.scss\" --fix", "test": "yarn lint && yarn test-unit", "test-ci": "yarn test && yarn test-cypress", "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json", @@ -208,12 +208,12 @@ "node-sass": "^6.0.1", "path": "^0.12.7", "pegjs": "^0.10.0", + "postcss": "^8.4.19", "postcss-cli": "^7.1.2", "postcss-inline-svg": "^4.1.0", "postcss-loader": "^7.0.1", "pre-commit": "^1.2.2", "prettier": "^2.1.2", - "prettier-stylelint": "^0.4.2", "process": "^0.11.10", "prompt": "^1.0.0", "prop-types": "^15.6.0", @@ -233,12 +233,13 @@ "redux-thunk": "^2.3.0", "resolve": "^1.17.0", "rimraf": "^3.0.2", - "sass-lint": "^1.13.1", - "sass-lint-auto-fix": "^0.21.2", "sass-loader": "^13.0.2", "shelljs": "^0.8.4", "start-server-and-test": "^1.11.3", "style-loader": "^3.3.1", + "stylelint": "^14.15.0", + "stylelint-config-prettier-scss": "^0.0.1", + "stylelint-config-standard-scss": "^6.1.0", "terser-webpack-plugin": "^5.3.5", "typescript": "4.5.3", "uglifyjs-webpack-plugin": "^2.2.0", diff --git a/src-docs/src/components/guide_page/_guide_page.scss b/src-docs/src/components/guide_page/_guide_page.scss index 560d3c7e1b0d..42deb27646f9 100644 --- a/src-docs/src/components/guide_page/_guide_page.scss +++ b/src-docs/src/components/guide_page/_guide_page.scss @@ -4,7 +4,7 @@ .guideBody { // Override euiHeaderAffordForFixed mixin since the page template handles this now - padding-top: 0 !important; // sass-lint:disable-line no-important + padding-top: 0 !important; // stylelint-disable-line declaration-no-important } .euiBody--headerIsFixed--double { @@ -60,7 +60,6 @@ color: $euiTitleColor; } - @include euiBreakpoint('xs', 's') { .guideSideNav { width: 100%; diff --git a/src-docs/src/components/guide_rule/_guide_rule.scss b/src-docs/src/components/guide_rule/_guide_rule.scss index 0061d37e4645..fb8d813a395d 100644 --- a/src-docs/src/components/guide_rule/_guide_rule.scss +++ b/src-docs/src/components/guide_rule/_guide_rule.scss @@ -17,5 +17,3 @@ margin-top: 0; } } - - diff --git a/src-docs/src/components/guide_section/_guide_section.scss b/src-docs/src/components/guide_section/_guide_section.scss index 1563bc8455bd..a79016c6b047 100644 --- a/src-docs/src/components/guide_section/_guide_section.scss +++ b/src-docs/src/components/guide_section/_guide_section.scss @@ -22,13 +22,13 @@ } .guideSectionTabs__tab > * { - font-weight: $euiFontWeightMedium !important; // sass-lint:disable-line no-important + font-weight: $euiFontWeightMedium !important; // stylelint-disable-line declaration-no-important } .guideDemo__ghostBackground { @if (lightness($euiTextColor) < 50) { color: $euiColorGhost; // Override EuiPanel specificity - background: $euiColorDarkestShade !important; // sass-lint:disable-line no-important + background: $euiColorDarkestShade !important; // stylelint-disable-line declaration-no-important } } diff --git a/src-docs/src/services/playground/_playground_knobs.scss b/src-docs/src/services/playground/_playground_knobs.scss index 9bf5bb9bfea4..221dde4ad482 100644 --- a/src-docs/src/services/playground/_playground_knobs.scss +++ b/src-docs/src/services/playground/_playground_knobs.scss @@ -4,4 +4,3 @@ $knobTableRowMinHeight: 42px; min-height: $knobTableRowMinHeight; display: block; } - diff --git a/src-docs/src/views/datagrid/_datagrid.scss b/src-docs/src/views/datagrid/_datagrid.scss index f89576f961bb..0638086e908c 100644 --- a/src-docs/src/views/datagrid/_datagrid.scss +++ b/src-docs/src/views/datagrid/_datagrid.scss @@ -1,9 +1,9 @@ .euiDataGridRowCell--favoriteFranchise { - background: transparentize($color: #800080, $amount: .95) !important; // sass-lint:disable-line no-important + background: transparentize($color: #800080, $amount: .95) !important; // stylelint-disable-line declaration-no-important, color-no-hex } .euiDataGridHeaderCell--favoriteFranchise { - background: transparentize($color: #800080, $amount: .9) !important; // sass-lint:disable-line no-important + background: transparentize($color: #800080, $amount: .9) !important; // stylelint-disable-line declaration-no-important, color-no-hex } .euiDataGridRow--rowClassesDemo { diff --git a/src-docs/src/views/empty_prompt/_empty_prompt.scss b/src-docs/src/views/empty_prompt/_empty_prompt.scss index c89e4026a581..d795f3013151 100644 --- a/src-docs/src/views/empty_prompt/_empty_prompt.scss +++ b/src-docs/src/views/empty_prompt/_empty_prompt.scss @@ -1,6 +1,6 @@ .guideDemo__emptyPromptPanelPicker { width: 100%; - gap: $euiSizeXL; // sass-lint:disable-line no-misspelled-properties + gap: $euiSizeXL; } .guideDemo__emptyPromptPanelPickerThumbBtn { @@ -26,4 +26,4 @@ .guideDemo__emptyPromptDemoPreview { border: 1px solid $guideDemoHighlightColor; overflow: hidden; -} \ No newline at end of file +} diff --git a/src-docs/src/views/guidelines/_index.scss b/src-docs/src/views/guidelines/_index.scss index 84a4a504f4e2..96895733917f 100644 --- a/src-docs/src/views/guidelines/_index.scss +++ b/src-docs/src/views/guidelines/_index.scss @@ -1,3 +1,4 @@ +// stylelint-disable color-no-hex // ------------------------------------- // Colors guideline page // ------------------------------------- @@ -22,8 +23,8 @@ font-size: $euiFontSizeS; } -// sass-lint:disable no-important .guidelineColor__title { + // stylelint-disable-next-line declaration-no-important color: $euiColorMediumShade !important; } @@ -68,12 +69,10 @@ background: shade($euiColorDanger, 30%); } -// sass-lint:disable no-color-literals .guideSass__swatch--primaryLight { background: #0079A5; } -// sass-lint:disable no-color-literals .guideSass__swatch--primaryDark { background: #4DA1C0; } @@ -274,11 +273,11 @@ } &--euiTitle { - @include euiTitle('s') + @include euiTitle('s'); } &--fontSize { - @include fontSize(19px) + @include fontSize(19px); } } @@ -366,13 +365,11 @@ transition-duration: $euiAnimSpeedSlow; } - .guideSass__themedBox { padding: $euiSize; border-left: $euiBorderThick; } -// sass-lint:disable no-color-literals .guideSass__themedBox--light { border-color: #0079A5; background: tint(#0079A5, 90%); @@ -380,7 +377,6 @@ } .guideSass__themedBox--dark { - // sass-lint:disable no-color-literals border-color: #4DA1C0; background: shade(#4DA1C0, 70%); color: #FFF; @@ -451,12 +447,10 @@ } } - .guideSection__emptyBox { background-color: $euiColorEmptyShade; } - @each $key, $size in $euiBreakpoints { .guideSass__breakpoint--#{$key} { display: none; diff --git a/src-docs/src/views/home/_home.scss b/src-docs/src/views/home/_home.scss index 30ced5daa319..4a11f02551fb 100644 --- a/src-docs/src/views/home/_home.scss +++ b/src-docs/src/views/home/_home.scss @@ -1,18 +1,17 @@ .guideHomePage__blockformCard { min-width: 200px; - flex-basis: 100% !important; // sass-lint:disable-line no-important + flex-basis: 100% !important; // stylelint-disable-line declaration-no-important - // sass-lint:disable-block mixins-before-declarations @include euiBreakpoint('s', 'm') { - flex-basis: 45% !important; // sass-lint:disable-line no-important + flex-basis: 45% !important; // stylelint-disable-line declaration-no-important } @include euiBreakpoint('l') { - flex-basis: 30% !important; // sass-lint:disable-line no-important + flex-basis: 30% !important; // stylelint-disable-line declaration-no-important } @include euiBreakpoint('xl') { - flex-basis: 22% !important; // sass-lint:disable-line no-important + flex-basis: 22% !important; // stylelint-disable-line declaration-no-important } } @@ -37,7 +36,7 @@ width: 100%; height: auto; - &:before { + &::before { content: ''; display: block; position: absolute; @@ -58,7 +57,6 @@ &:hover ~ .guideHomePage__illustrationEffectSVG { transform: perspective(1600px) rotateX(-5deg) rotateY(5deg); - } } @@ -70,7 +68,7 @@ width: 50%; z-index: 300; - &:hover ~ .guideHomePage__illustrationEffectSVG { + &:hover ~ .guideHomePage__illustrationEffectSVG { transform: perspective(1600px) rotateX(-5deg) rotateY(-5deg); } } @@ -96,10 +94,10 @@ width: 50%; z-index: 300; - &:hover ~ .guideHomePage__illustrationEffectSVG { + &:hover ~ .guideHomePage__illustrationEffectSVG { transform: perspective(1600px) rotateX(5deg) rotateY(-5deg); } - } + } } .guideHome__footer { @@ -112,10 +110,11 @@ } .guideHome__footerLogo { - // sass-lint:disable-block no-important vertical-align: middle; + // stylelint-disable declaration-no-important display: inline-block !important; margin-bottom: 0 !important; + // stylelint-enable declaration-no-important position: relative; top: -1px; } diff --git a/src-docs/src/views/suggest/_global_filter_group.scss b/src-docs/src/views/suggest/_global_filter_group.scss index c5c4decac65d..9370e8f20e62 100644 --- a/src-docs/src/views/suggest/_global_filter_group.scss +++ b/src-docs/src/views/suggest/_global_filter_group.scss @@ -2,7 +2,6 @@ margin-top: $euiSizeXS; } -// sass-lint:disable quotes .globalFilterGroup__branch { padding: $euiSize $euiSize $euiSizeS $euiSizeS; background-repeat: no-repeat; diff --git a/src-docs/src/views/suggest/_saved_queries.scss b/src-docs/src/views/suggest/_saved_queries.scss index a858e74bf361..fcdb4840cab0 100644 --- a/src-docs/src/views/suggest/_saved_queries.scss +++ b/src-docs/src/views/suggest/_saved_queries.scss @@ -27,5 +27,5 @@ 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 - padding: ($euiSizeM / 2) $euiSizeXS !important; // sass-lint:disable-line no-important -} \ No newline at end of file + padding: ($euiSizeM / 2) $euiSizeXS !important; // stylelint-disable-line declaration-no-important +} diff --git a/src-docs/src/views/text/_text_scaling.scss b/src-docs/src/views/text/_text_scaling.scss index c99d204bb5fc..22f7ef9811ba 100644 --- a/src-docs/src/views/text/_text_scaling.scss +++ b/src-docs/src/views/text/_text_scaling.scss @@ -1,4 +1,3 @@ -// sass-lint:disable no-important .guideDemo__textLines { background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px); background-size: 100% $euiSizeXS; diff --git a/src/components/basic_table/_basic_table.scss b/src/components/basic_table/_basic_table.scss index 6b32e468ff8d..8e8203ccb473 100644 --- a/src/components/basic_table/_basic_table.scss +++ b/src/components/basic_table/_basic_table.scss @@ -1,5 +1,4 @@ .euiBasicTable { - &-loading { position: relative; @@ -7,7 +6,7 @@ overflow: hidden; } - tbody:before { + tbody::before { position: absolute; content: ''; width: 100%; @@ -16,11 +15,9 @@ animation: euiBasicTableLoading 1000ms linear; animation-iteration-count: infinite; } - } } - @keyframes euiBasicTableLoading { from { left: 0; diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss index cb0ebefeb116..8500bdf319dc 100644 --- a/src/components/button/button_empty/_button_empty.scss +++ b/src/components/button/button_empty/_button_empty.scss @@ -7,9 +7,8 @@ @include euiButton; border-radius: $euiBorderRadius; - // sass-lint:disable-block no-important - transform: none !important; /* 1 */ - animation: none !important; /* 1 */ + transform: none !important; /* 1 */ // stylelint-disable-line declaration-no-important + animation: none !important; /* 1 */ // stylelint-disable-line declaration-no-important transition-timing-function: ease-in; /* 2 */ transition-duration: $euiAnimSpeedFast; /* 2 */ @@ -43,7 +42,6 @@ } } - .euiButtonEmpty--flushLeft, .euiButtonEmpty--flushRight, .euiButtonEmpty--flushBoth { diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss index 840f2bf13144..6a9296802c9c 100644 --- a/src/components/button/button_group/_button_group.scss +++ b/src/components/button/button_group/_button_group.scss @@ -29,7 +29,7 @@ .euiButtonGroup--compressed { .euiButtonGroup__buttons { - box-shadow: none !important; // sass-lint:disable-line no-important + box-shadow: none !important; // stylelint-disable-line declaration-no-important border-radius: $euiFormControlCompressedBorderRadius; background-color: $euiFormBackgroundColor; height: $euiFormControlCompressedHeight; diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss index 7766a2987358..cfe0fd7f4309 100644 --- a/src/components/button/button_group/_button_group_button.scss +++ b/src/components/button/button_group/_button_group_button.scss @@ -1,14 +1,13 @@ // This file has lots of modifiers and is somewhat nesty by nature -// sass-lint:disable nesting-depth +// stylelint-disable max-nesting-depth .euiButtonGroupButton { @include euiButtonBase; @include euiFont; @include euiFontSize; - // sass-lint:disable-block indentation transition: background-color $euiAnimSpeedNormal ease-in-out, - color $euiAnimSpeedNormal ease-in-out; + color $euiAnimSpeedNormal ease-in-out; // stylelint-disable-line indentation // Allow button to shrink and truncate min-width: 0; @@ -58,7 +57,7 @@ .euiButtonGroup--medium, .euiButtonGroup--small { .euiButtonGroupButton { - border-radius: 0 !important; // sass-lint:disable-line no-important + border-radius: 0 !important; // stylelint-disable-line declaration-no-important font-weight: $euiButtonFontWeight; &:focus, diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss index 408a4dc728a0..9d8519a7604a 100644 --- a/src/components/button/button_icon/_button_icon.scss +++ b/src/components/button/button_icon/_button_icon.scss @@ -1,6 +1,3 @@ -// This file has lots of modifiers and is somewhat nesty by nature -// sass-lint:disable nesting-depth - .euiButtonIcon { @include euiButton; diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss index 7f3b7c291c83..1a55a416ae45 100644 --- a/src/components/collapsible_nav/_collapsible_nav.scss +++ b/src/components/collapsible_nav/_collapsible_nav.scss @@ -1,5 +1,5 @@ // Extends .euiCollapsibleNav:not([class*='push']) { - z-index: $euiZNavigation !important; // sass-lint:disable-line no-important + z-index: $euiZNavigation !important; // stylelint-disable-line declaration-no-important } diff --git a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss index 257c5142be5f..ec68ae0c952a 100644 --- a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss +++ b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss @@ -22,7 +22,7 @@ // Forcing better contrast of focus state on EuiAccordion toggle icon .euiCollapsibleNavGroup__heading:focus .euiAccordion__iconWrapper { color: $euiCollapsibleNavGroupDarkHighContrastColor; - animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; // sass-lint:disable-line no-important + animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; // stylelint-disable-line declaration-no-important } .euiCollapsibleNavGroup__title { diff --git a/src/components/color_picker/_color_picker.scss b/src/components/color_picker/_color_picker.scss index 2c323c6bd114..e69fc1f824cc 100644 --- a/src/components/color_picker/_color_picker.scss +++ b/src/components/color_picker/_color_picker.scss @@ -37,11 +37,11 @@ .euiColorPicker__popoverPanel--pickerOnly { // Override of EuiPanel padding - // sass-lint:disable no-important + // stylelint-disable-next-line declaration-no-important padding-bottom: 0 !important; } -// sass-lint:disable no-important +// stylelint-disable declaration-no-important .euiColorPicker__input--inGroup { height: $euiFormControlLayoutGroupInputHeight !important; box-shadow: none !important; @@ -52,6 +52,7 @@ border-radius: 0; } } +// stylelint-enable declaration-no-important .euiColorPicker__alphaRange { .euiRangeInput { diff --git a/src/components/color_picker/_hue.scss b/src/components/color_picker/_hue.scss index eeeddba2ff18..fd1fffe95b0d 100644 --- a/src/components/color_picker/_hue.scss +++ b/src/components/color_picker/_hue.scss @@ -1,6 +1,6 @@ // This wraps the range. It is needed because there is no way to do a linear gradient in ie11 for the track .euiHue { - // sass-lint:disable-block no-color-literals + // stylelint-disable color-no-hex background: linear-gradient(to right, #FF3232 0%, #FFF130 20%, @@ -9,14 +9,15 @@ #282CFF 71%, #FF28FB 88%, #FF0094 100% - ); + ); + // stylelint-enable color-no-hex height: $euiSizeL; margin: $euiSizeXS 0; position: relative; // To make our fake range skinny, we add some pseudo borders to fake the height of the gradient - &:before, - &:after { + &::before, + &::after { content: ''; left: 0; position: absolute; @@ -25,7 +26,7 @@ width: 100%; } - &:after { + &::after { bottom: 0; } } @@ -45,11 +46,10 @@ background: transparent; z-index: 2; // Needed to place the thumb above the :after pseudo border from .euiRange - // Resets for the range // Disable linter for these very unique vendor controls - // sass-lint:disable-block no-vendor-prefixes + // stylelint-disable property-no-vendor-prefix, selector-no-vendor-prefix &::-webkit-slider-thumb { -webkit-appearance: none; margin-top: 0; diff --git a/src/components/color_picker/_saturation.scss b/src/components/color_picker/_saturation.scss index 5836e32f58c8..53d32cdab979 100644 --- a/src/components/color_picker/_saturation.scss +++ b/src/components/color_picker/_saturation.scss @@ -34,7 +34,7 @@ margin-left: $euiColorPickerIndicatorSize * -.5; border: 1px solid $euiColorDarkestShade; - &:before { + &::before { content: ''; position: absolute; top: 0; diff --git a/src/components/color_picker/color_palette_display/_mixins.scss b/src/components/color_picker/color_palette_display/_mixins.scss index a63756c066df..2e44ea649bfe 100644 --- a/src/components/color_picker/color_palette_display/_mixins.scss +++ b/src/components/color_picker/color_palette_display/_mixins.scss @@ -8,7 +8,7 @@ position: relative; - &:after { + &::after { position: absolute; top: 0; left: 0; diff --git a/src/components/color_picker/color_stops/_color_stops.scss b/src/components/color_picker/color_stops/_color_stops.scss index 9e6cf3ce1844..868d9e65d7e2 100644 --- a/src/components/color_picker/color_stops/_color_stops.scss +++ b/src/components/color_picker/color_stops/_color_stops.scss @@ -58,7 +58,7 @@ // Background color can potentially have opacity // Pseudo element placed below the thumb to prevent the track from showing through - &:before { + &::before { content: ''; display: block; position: absolute; @@ -72,7 +72,6 @@ } .euiColorStopThumb.euiRangeThumb:not(:disabled) { - // sass-lint:disable-block no-color-literals, indentation top: 0; margin-top: 0; pointer-events: auto; @@ -89,7 +88,7 @@ } .euiColorStopPopover-isLoadingPanel { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important visibility: hidden !important; // Overrides a stateful class on EuiPopover -> EuiPanel } diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index 0dcac45c65d8..48563a711457 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/src/components/combo_box/_combo_box.scss @@ -1,3 +1,6 @@ +// TODO: Address nesting during Emotion conversion, if possible +// stylelint-disable max-nesting-depth + .euiComboBox { @include euiFormControlSize(auto, $includeAlternates: true); position: relative; @@ -21,7 +24,6 @@ display: flex; /* 1 */ outline: none; // Fixes an intermittent focus ring in Firefox - // sass-lint:disable-block mixins-before-declarations // to override the padding added above @include euiFormControlLayoutPadding(1); /* 2 */ @@ -71,7 +73,7 @@ * 5. Prevent a lot of input from causing the react-input-autosize to overflow the container. */ .euiComboBox__input { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important display: inline-flex !important; /* 1 */ height: $euiSizeXL; /* 2 */ overflow: hidden; /* 5 */ @@ -107,9 +109,9 @@ &.euiComboBox-isDisabled { .euiComboBox__inputWrap { - // sass-lint:disable-block no-vendor-prefixes + // stylelint-disable property-no-vendor-prefix @include euiFormControlDisabledStyle; - -webkit-text-fill-color: unset; // overrides $euiFormControlDisabledColor because the color doesn't work with multiple background colors + -webkit-text-fill-color: unset; // overrides $euiFormControlDisabledColor because the color doesn't work with multiple background colors } .euiComboBoxPlaceholder, @@ -129,7 +131,6 @@ padding-top: 0; padding-bottom: 0; - // sass-lint:disable-block mixins-before-declarations @include euiFormControlLayoutPadding(1, $compressed: true); /* 2 */ &.euiComboBox__inputWrap-isClearable { @@ -153,7 +154,7 @@ // Overrides the euiFormControlLayout prepend and append height that is 100% .euiFormControlLayout__prepend, .euiFormControlLayout__append { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important height: auto !important; } } diff --git a/src/components/combo_box/combo_box_input/_combo_box_input.scss b/src/components/combo_box/combo_box_input/_combo_box_input.scss index 1781b0f5749f..963872b94a6d 100644 --- a/src/components/combo_box/combo_box_input/_combo_box_input.scss +++ b/src/components/combo_box/combo_box_input/_combo_box_input.scss @@ -3,9 +3,10 @@ // Ensure that no input states are visible on the hidden input input { - // sass-lint:disable-block no-important + // stylelint-disable declaration-no-important border: none !important; box-shadow: none !important; outline: none !important; + // stylelint-enable declaration-no-important } } diff --git a/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss b/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss index 3dd19a44d1a7..0fafa39d05bc 100644 --- a/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss +++ b/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss @@ -7,5 +7,5 @@ padding-left: $euiSizeXS; line-height: $euiSizeXL; color: $euiFormControlPlaceholderText; - margin-bottom: 0 !important; // sass-lint:disable-line no-important + margin-bottom: 0 !important; // stylelint-disable-line declaration-no-important } diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss index 19146ba7f51a..cc0943687107 100644 --- a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss +++ b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss @@ -4,12 +4,11 @@ */ .euiComboBoxOptionsList { // Remove transforms from popover panel - transform: none !important; // sass-lint:disable-line no-important + transform: none !important; // stylelint-disable-line declaration-no-important top: 0; .euiFilterSelectItem__content { - // sass-lint:disable no-important - margin-block: 0 !important; + margin-block: 0 !important; // stylelint-disable-line declaration-no-important } } diff --git a/src/components/control_bar/_variables.scss b/src/components/control_bar/_variables.scss index 2dd2a8eb2667..99c81c9b510a 100644 --- a/src/components/control_bar/_variables.scss +++ b/src/components/control_bar/_variables.scss @@ -10,4 +10,3 @@ $euiControlBarHeights: ( m: $euiSize * 30, l: 100vh, ); - diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index a9feef2359c3..68e363ca0411 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -100,16 +100,16 @@ .euiDataGridRowCell__popover { @include euiScrollBar; overflow: auto; - // sass-lint:disable-block no-important + // stylelint-disable declaration-no-important max-width: 400px !important; max-height: 400px !important; z-index: $euiZDataGridCellPopover !important; + // stylelint-enable declaration-no-important // Workaround for a Safari CSS bug when using both `overflow: auto` & `filter: drop-shadow` // (see https://github.com/elastic/eui/issues/6151) // Disables the default EuiPopover filter drop-shadow and uses box-shadow instead, // since we don't use the popover arrow in any case for cell popovers filter: none; - // sass-lint:disable-block mixins-before-declarations @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion } @@ -156,7 +156,7 @@ // Have to take out the generic transition so it is instaneous on focus transition: none; // Disable filled button box-shadows on legacy theme - they're unnecessary when this small in a datagrid - box-shadow: none !important; // sass-lint:disable-line no-important + box-shadow: none !important; // stylelint-disable-line declaration-no-important // Remove filled button borders on legacy theme - this way we don't need to animate the border border: none; } @@ -184,8 +184,7 @@ // Border alternates @include euiDataGridStyles(bordersNone) { @include euiDataGridRowCell { - // sass-lint:disable-block no-important - border-color: transparent !important; + border-color: transparent !important; // stylelint-disable-line declaration-no-important } } diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss index 4fbaeb8b319f..1a70c21cc97e 100644 --- a/src/components/datagrid/_mixins.scss +++ b/src/components/datagrid/_mixins.scss @@ -67,7 +67,7 @@ $euiDataGridStyles: ( border: $euiBorderWidthThick solid $euiFocusRingColor; border-radius: $euiBorderRadiusSmall; z-index: 2; // We want this to be on top of all the content - pointer-events: none; // Because we put it with a higher z-index we don't want to make it clickable this way we allow selecting the content behind + pointer-events: none; // Because we put it with a higher z-index we don't want to make it clickable this way we allow selecting the content behind } } diff --git a/src/components/datagrid/body/_data_grid_footer_row.scss b/src/components/datagrid/body/_data_grid_footer_row.scss index c7864889dbc3..227e8b818b24 100644 --- a/src/components/datagrid/body/_data_grid_footer_row.scss +++ b/src/components/datagrid/body/_data_grid_footer_row.scss @@ -18,9 +18,10 @@ @include euiDataGridStyles(footerOverline) { @include euiDataGridFooterCell { border-top: $euiBorderThick; - // sass-lint:disable-block no-important + // stylelint-disable declaration-no-important border-top-color: $euiTextColor !important; background: $euiColorEmptyShade !important; + // stylelint-enable declaration-no-important } } diff --git a/src/components/datagrid/body/header/_data_grid_column_resizer.scss b/src/components/datagrid/body/header/_data_grid_column_resizer.scss index 58f20f4bbb5f..28c836106f01 100644 --- a/src/components/datagrid/body/header/_data_grid_column_resizer.scss +++ b/src/components/datagrid/body/header/_data_grid_column_resizer.scss @@ -1,4 +1,4 @@ - // Resizer straddles the column border and is an invisible hitzone for dragging +// Resizer straddles the column border and is an invisible hitzone for dragging .euiDataGridColumnResizer { position: absolute; top: 0; @@ -10,7 +10,7 @@ z-index: 2; // Needs to be a level above the cells themselves in case of overlaps // Center a vertical line within the button above - &:after { + &::after { content: ''; position: absolute; left: $euiSizeS - 1px; @@ -35,12 +35,11 @@ // we don't use negative positioning and the borders from the cell will match the container. @include euiDataGridHeaderCell { &:last-child { - .euiDataGridColumnResizer { right: 0; width: $euiSize / 2; - &:after { + &::after { left: auto; right: 0; } diff --git a/src/components/datagrid/body/header/_data_grid_header_row.scss b/src/components/datagrid/body/header/_data_grid_header_row.scss index 8bea9ac7a641..f8561ad60af1 100644 --- a/src/components/datagrid/body/header/_data_grid_header_row.scss +++ b/src/components/datagrid/body/header/_data_grid_header_row.scss @@ -73,7 +73,7 @@ } .euiDataGridHeader__action--selected { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important font-weight: $euiFontWeightBold !important; } diff --git a/src/components/datagrid/controls/_data_grid_column_sorting.scss b/src/components/datagrid/controls/_data_grid_column_sorting.scss index 9f4d7e24b50e..b2594fc1f576 100644 --- a/src/components/datagrid/controls/_data_grid_column_sorting.scss +++ b/src/components/datagrid/controls/_data_grid_column_sorting.scss @@ -1,5 +1,4 @@ .euiDataGridColumnSorting__item { - &-isDragging { @include euiBottomShadow; background: $euiColorEmptyShade; @@ -35,8 +34,8 @@ border: none; // Hack to overwrite some nested, unreachable component code with button groups - // sass-lint:disable-block no-important button { + // stylelint-disable-next-line declaration-no-important font-size: $euiFontSizeXS !important; } } diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss index 0789c4d42e9b..d49f69967856 100644 --- a/src/components/date_picker/_date_picker_range.scss +++ b/src/components/date_picker/_date_picker_range.scss @@ -18,7 +18,7 @@ .euiFieldText.euiDatePicker { height: $euiFormControlLayoutGroupInputHeight; // including all states - box-shadow: none !important; // sass-lint:disable-line no-important + box-shadow: none !important; // stylelint-disable-line declaration-no-important text-align: center; } diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss index 9fb1d5dd164e..f48300548a75 100644 --- a/src/components/date_picker/super_date_picker/_super_date_picker.scss +++ b/src/components/date_picker/super_date_picker/_super_date_picker.scss @@ -1,5 +1,3 @@ -// sass-lint:disable-block function-name-format - .euiSuperDatePicker__flexWrapper { max-width: 100%; // Set a sensible min-width for when width is auto @@ -34,10 +32,9 @@ width: $euiSuperDatePickerWidth; } - .euiSuperDatePicker { - // sass-lint:disable-block no-important // Allow it to always grow to fit the container since the default form max width is too small + // stylelint-disable-next-line declaration-no-important max-width: 100% !important; > .euiFormControlLayout__childrenWrapper { diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss index 4758040c9444..43321b229239 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss +++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss @@ -11,9 +11,9 @@ margin: $euiSizeS 0 0; } -// sass-lint:disable no-important .euiQuickSelectPopover__buttonText { // Override specificity from universal and sibling selectors + // stylelint-disable-next-line declaration-no-important margin-right: $euiSizeXS !important; } diff --git a/src/components/drag_and_drop/_draggable.scss b/src/components/drag_and_drop/_draggable.scss index 6f7481654c6d..b631df021980 100644 --- a/src/components/drag_and_drop/_draggable.scss +++ b/src/components/drag_and_drop/_draggable.scss @@ -1,19 +1,17 @@ -// sass-lint:disable no-empty-rulesets - .euiDraggable { &.euiDraggable--isDragging { // Overriding inline styles on JS-inserted HTML elements - z-index: $euiZLevel9 !important; // sass-lint:disable-line no-important + z-index: $euiZLevel9 !important; // stylelint-disable-line declaration-no-important } &.euiDraggable--hasClone:not(.euiDraggable--isDragging) { // Overriding inline styles on JS-inserted HTML elements - transform: none !important; // sass-lint:disable-line no-important + transform: none !important; // stylelint-disable-line declaration-no-important } &.euiDraggable--withoutDropAnimation { // Overriding inline styles on JS-inserted HTML elements - transition-duration: .001s !important; // sass-lint:disable-line no-important + transition-duration: .001s !important; // stylelint-disable-line declaration-no-important } &:focus > .euiDraggable__item, diff --git a/src/components/drag_and_drop/_droppable.scss b/src/components/drag_and_drop/_droppable.scss index 9d3edff88cb1..de9e73c002d0 100644 --- a/src/components/drag_and_drop/_droppable.scss +++ b/src/components/drag_and_drop/_droppable.scss @@ -13,7 +13,7 @@ .euiDroppable__placeholder { &.euiDroppable__placeholder--isHidden { // Overriding inline styles on JS-inserted HTML elements - display: none !important; // sass-lint:disable-line no-important + display: none !important; // stylelint-disable-line declaration-no-important } } } diff --git a/src/components/empty_prompt/_empty_prompt.scss b/src/components/empty_prompt/_empty_prompt.scss index da915ad7705c..188da8b0365b 100644 --- a/src/components/empty_prompt/_empty_prompt.scss +++ b/src/components/empty_prompt/_empty_prompt.scss @@ -121,7 +121,7 @@ $euiEmptyPromptContentMaxWidth: 36em; &.euiEmptyPrompt--horizontal { .euiEmptyPrompt__main { - gap: $amount; // sass-lint:disable-line no-misspelled-properties + gap: $amount; } } } diff --git a/src/components/filter_group/_filter_group.scss b/src/components/filter_group/_filter_group.scss index 00993464ca47..22d22a54c6b3 100644 --- a/src/components/filter_group/_filter_group.scss +++ b/src/components/filter_group/_filter_group.scss @@ -10,7 +10,7 @@ min-width: $euiSize * 3; } - > .euiFilterButton--noGrow { + > .euiFilterButton--noGrow { flex-grow: 0; } @@ -56,7 +56,7 @@ display: flex; .euiFilterButton { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important flex-grow: 1 !important; } } diff --git a/src/components/filter_group/_filter_select_item.scss b/src/components/filter_group/_filter_select_item.scss index 05f631fedb34..64686f39190e 100644 --- a/src/components/filter_group/_filter_select_item.scss +++ b/src/components/filter_group/_filter_select_item.scss @@ -22,7 +22,6 @@ @include euiTextTruncate; } - .euiFilterSelect__items { @include euiScrollBar; diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss index 145e62f25cc4..849637d6dc32 100644 --- a/src/components/form/checkbox/_checkbox.scss +++ b/src/components/form/checkbox/_checkbox.scss @@ -1,3 +1,6 @@ +// TODO: Address nesting during Emotion conversion, if possible +// stylelint-disable max-nesting-depth + /** * 1. Float above the visual radio and match its dimension, so that when users try to click it * they actually click this input. @@ -48,12 +51,11 @@ } &[disabled] { - // sass-lint:disable-block no-important - cursor: not-allowed !important; + cursor: not-allowed !important; // stylelint-disable-line declaration-no-important ~ .euiCheckbox__label { color: $euiFormControlDisabledColor; - cursor: not-allowed !important; + cursor: not-allowed !important; // stylelint-disable-line declaration-no-important } + .euiCheckbox__square { diff --git a/src/components/form/described_form_group/_described_form_group.scss b/src/components/form/described_form_group/_described_form_group.scss index 9154411d33fa..9f1c9f06e462 100644 --- a/src/components/form/described_form_group/_described_form_group.scss +++ b/src/components/form/described_form_group/_described_form_group.scss @@ -30,6 +30,5 @@ } .euiDescribedFormGroup__descriptionColumn { - // sass-lint:disable-block function-name-format min-width: MIN(20rem, 50%); } diff --git a/src/components/form/field_password/_field_password.scss b/src/components/form/field_password/_field_password.scss index 67e3b890f906..a14e7f09697d 100644 --- a/src/components/form/field_password/_field_password.scss +++ b/src/components/form/field_password/_field_password.scss @@ -7,7 +7,7 @@ } } -// sass-lint:disable-block no-vendor-prefixes +// stylelint-disable selector-no-vendor-prefix // Only remove Edge's internal reveal button if we're providing a custom one .euiFieldPassword--withToggle::-ms-reveal { display: none; diff --git a/src/components/form/field_search/_field_search.scss b/src/components/form/field_search/_field_search.scss index 44905e6fbe21..ea3b602e2fc8 100644 --- a/src/components/form/field_search/_field_search.scss +++ b/src/components/form/field_search/_field_search.scss @@ -2,13 +2,13 @@ * 1. Fix for Safari to ensure that it renders like a normal text input * and doesn't add extra spacing around text */ +// stylelint-disable property-no-vendor-prefix, selector-no-vendor-prefix .euiFieldSearch { @include euiFormControlStyle; @include euiFormControlWithIcon($isIconOptional: false); @include euiFormControlIsLoading; - // sass-lint:disable-block no-vendor-prefixes -webkit-appearance: textfield; /* 1 */ &::-webkit-search-decoration, diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss index 056c303595b8..d3ef6d06b8c2 100644 --- a/src/components/form/file_picker/_file_picker.scss +++ b/src/components/form/file_picker/_file_picker.scss @@ -77,7 +77,6 @@ pointer-events: none; /* 1 */ border-radius: $euiFormControlBorderRadius; - // sass-lint:disable-block indentation transition: box-shadow $euiAnimSpeedFast ease-in, background-color $euiAnimSpeedFast ease-in, @@ -178,7 +177,7 @@ // Large styles only .euiFilePicker--large { - // sass-lint:disable-block nesting-depth + // stylelint-disable max-nesting-depth // Hover and focus .euiFilePicker__input:hover:not(:disabled), .euiFilePicker__input:focus { diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss index 7c0d89a0b332..ef7e7a3c6d64 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/src/components/form/form_control_layout/_form_control_layout.scss @@ -1,3 +1,6 @@ +// TODO: Address nesting during Emotion conversion, if possible +// stylelint-disable max-nesting-depth + .euiFormControlLayout { // Let the height expand as needed @include euiFormControlSize($includeAlternates: true); @@ -71,16 +74,15 @@ background-color: $euiFormInputGroupLabelBackground; } - &.euiButtonIcon, &.euiButtonEmpty, .euiButtonIcon, .euiButtonEmpty { - transform: none !important; + transform: none !important; // stylelint-disable-line declaration-no-important // Undo sizing from icons inside buttons .euiIcon { - background: none !important; + background: none !important; // stylelint-disable-line declaration-no-important padding: 0; width: $euiSize; } @@ -115,7 +117,7 @@ max-width: 50%; // Make sure max-width only applies to the outer most append/prepend element } - // sass-lint:disable-block no-important + // stylelint-disable declaration-no-important // This is the only way to target specific components to override styling // TEXT @@ -141,7 +143,6 @@ } } - // // BORDERS on buttons only .euiButtonEmpty { @@ -156,7 +157,6 @@ border-left: $euiFormInputGroupBorder; } - // // Compressed alterations &.euiFormControlLayout--compressed { @@ -184,7 +184,6 @@ } } - // // ReadOnly alterations &.euiFormControlLayout--readOnly { cursor: default; diff --git a/src/components/form/form_control_layout/_form_control_layout_delimited.scss b/src/components/form/form_control_layout/_form_control_layout_delimited.scss index 71e92e1f362b..75c5a942d52f 100644 --- a/src/components/form/form_control_layout/_form_control_layout_delimited.scss +++ b/src/components/form/form_control_layout/_form_control_layout_delimited.scss @@ -22,6 +22,7 @@ .euiFormControlLayoutDelimited__input { height: 100%; + max-width: none; padding-left: $euiFormControlCompressedPadding; padding-right: $euiFormControlCompressedPadding; } @@ -72,20 +73,17 @@ } .euiFormControlLayoutDelimited__input { - // sass-lint:disable-block no-important + // stylelint-disable declaration-no-important box-shadow: none !important; border-radius: 0 !important; + // stylelint-enable declaration-no-important text-align: center; height: 100%; min-width: 0; // Fixes FF - - .euiFormControlLayoutDelimited[class*='--compressed'] & { - max-width: none; - } } .euiFormControlLayoutDelimited__delimeter { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important line-height: 1 !important; // Override EuiText line-height flex: 0 0 auto; padding-left: $euiFormControlPadding / 2; diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss index 4cc048ba3be0..db7cd466e7a6 100644 --- a/src/components/form/form_row/_form_row.scss +++ b/src/components/form/form_row/_form_row.scss @@ -61,6 +61,8 @@ margin-top: $euiSizeM; // More spacing since we reduced the height to match that of the switch } + // TODO: Address nesting during Emotion conversion, if possible + // stylelint-disable max-nesting-depth &.euiFormRow--hasSwitch { .euiFormRow__labelWrapper { line-height: $euiSwitchHeight - 1px; // The 1px less helps the alignment of the text baseline @@ -80,6 +82,7 @@ margin-top: $euiSizeM; // More spacing since we reduced the height to match that of the switch } } + // stylelint-enable max-nesting-depth } .euiFormRow__fieldWrapperDisplayOnly { diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss index f03991995001..10857dd72590 100644 --- a/src/components/form/radio/_radio.scss +++ b/src/components/form/radio/_radio.scss @@ -1,3 +1,6 @@ +// TODO: Address nesting during Emotion conversion, if possible +// stylelint-disable max-nesting-depth + /** * 1. Float above the visual radio and match its dimension, so that when users try to click it * they actually click this input. @@ -43,12 +46,11 @@ } &[disabled] { - //sass-lint:disable no-important - cursor: not-allowed !important; + cursor: not-allowed !important; // stylelint-disable-line declaration-no-important ~ .euiRadio__label { color: $euiFormControlDisabledColor; - cursor: not-allowed !important; + cursor: not-allowed !important; // stylelint-disable-line declaration-no-important } + .euiRadio__circle { diff --git a/src/components/form/select/_select.scss b/src/components/form/select/_select.scss index ed30e98104ed..a985d0422c7a 100644 --- a/src/components/form/select/_select.scss +++ b/src/components/form/select/_select.scss @@ -25,7 +25,7 @@ } // Turn off linter for some MS specific bits. - // sass-lint:disable no-vendor-prefixes + // stylelint-disable selector-no-vendor-prefix &::-ms-expand { display: none; } diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index b3743f15cc9b..15a3254acb82 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -1,3 +1,6 @@ +// TODO: Address nesting during Emotion conversion, if possible +// stylelint-disable max-nesting-depth + .euiSwitch { position: relative; display: inline-flex; @@ -181,7 +184,6 @@ // Compressed and mini switches have some style overlap &.euiSwitch--compressed, &.euiSwitch--mini { - .euiSwitch__button[aria-checked='false'] { .euiSwitch__thumb { left: 1px; diff --git a/src/components/header/_mixins.scss b/src/components/header/_mixins.scss index e2e0bb4fbb58..a5faf93947b7 100644 --- a/src/components/header/_mixins.scss +++ b/src/components/header/_mixins.scss @@ -13,7 +13,7 @@ } .euiHeaderSectionItem { - &:after { + &::after { background: lightOrDarkTheme($euiColorDarkShade, $euiColorLightestShade); } } diff --git a/src/components/header/header_section/_header_section_item.scss b/src/components/header/header_section/_header_section_item.scss index 7966dade3c22..35736fc97b62 100644 --- a/src/components/header/header_section/_header_section_item.scss +++ b/src/components/header/header_section/_header_section_item.scss @@ -5,7 +5,7 @@ display: flex; align-items: center; - &:after { + &::after { position: absolute; content: ''; top: $euiSize; @@ -16,14 +16,14 @@ } .euiHeaderSectionItem--borderLeft { - &:after { + &::after { left: 0; width: 1px; } } .euiHeaderSectionItem--borderRight { - &:after { + &::after { width: 1px; left: auto; right: 0; @@ -37,7 +37,7 @@ .euiHeaderSectionItem--borderLeft, .euiHeaderSectionItem--borderRight { - &:after { + &::after { display: none; } } diff --git a/src/components/header/header_section/_header_section_item_button.scss b/src/components/header/header_section/_header_section_item_button.scss index a88c7d09b4a9..c9d7af53e1a4 100644 --- a/src/components/header/header_section/_header_section_item_button.scss +++ b/src/components/header/header_section/_header_section_item_button.scss @@ -22,7 +22,6 @@ } } - .euiHeaderSectionItemButton__content { // This element is a span and we're changing the display because inline elements can’t take a transform display: inline-block; diff --git a/src/components/key_pad_menu/_key_pad_menu_item.scss b/src/components/key_pad_menu/_key_pad_menu_item.scss index 883525e84fba..29208bb25d5f 100644 --- a/src/components/key_pad_menu/_key_pad_menu_item.scss +++ b/src/components/key_pad_menu/_key_pad_menu_item.scss @@ -4,8 +4,6 @@ */ .euiKeyPadMenuItem { @include euiFont; /* 1 */ - // Disable indentation for transition legibility - // sass-lint:disable-block indentation display: block; padding: $euiSizeXS; height: $euiKeyPadMenuSize; @@ -15,7 +13,6 @@ border-radius: $euiBorderRadius; color: $euiTextColor; // Override possible link color - // sass-lint:disable-block mixins-before-declarations @include euiCanAnimate { transition: background-color $euiAnimSpeedFast ease-in, @@ -32,8 +29,6 @@ @include euiSlightShadow; border-color: $euiBorderColor; - // sass-lint:disable-block mixins-before-declarations - // sass-lint:disable-block nesting-depth @include euiCanAnimate { .euiKeyPadMenuItem__icon { transform: translateY(0); @@ -50,10 +45,10 @@ &.euiKeyPadMenuItem-isDisabled { @include euiDisabledState; - .euiKeyPadMenuItem__icon { + .euiKeyPadMenuItem__icon { filter: grayscale(100%); - svg * { // sass-lint:disable-line nesting-depth + svg * { // stylelint-disable-line max-nesting-depth fill: $euiButtonColorDisabledText; } } diff --git a/src/components/markdown_editor/_markdown_editor_drop_zone.scss b/src/components/markdown_editor/_markdown_editor_drop_zone.scss index 95d3d94399f1..952cfbdefe07 100644 --- a/src/components/markdown_editor/_markdown_editor_drop_zone.scss +++ b/src/components/markdown_editor/_markdown_editor_drop_zone.scss @@ -27,13 +27,13 @@ .euiMarkdownEditorTextArea, .euiMarkdownEditorTextArea:focus, .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important background-color: transparentize($euiColorPrimary, .9) !important; } .euiMarkdownEditorTextArea, .euiMarkdownEditorTextArea:focus { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important background-image: euiFormControlGradient($euiColorPrimary) !important; } } @@ -43,7 +43,7 @@ .euiMarkdownEditorTextArea, .euiMarkdownEditorTextArea:focus, .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important background-color: transparentize($euiColorDanger, .9) !important; } } @@ -51,7 +51,7 @@ &--hasError { .euiMarkdownEditorTextArea, .euiMarkdownEditorTextArea:focus { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important background-image: euiFormControlGradient($euiColorDanger) !important; } } diff --git a/src/components/markdown_editor/_markdown_editor_footer.scss b/src/components/markdown_editor/_markdown_editor_footer.scss index 103b5e99b9c1..58cfec9603fb 100644 --- a/src/components/markdown_editor/_markdown_editor_footer.scss +++ b/src/components/markdown_editor/_markdown_editor_footer.scss @@ -21,7 +21,7 @@ } // overrides button empty styles so it can match the button icon - // So when we have an error this button appears smoothly + // So when we have an error this button appears smoothly .euiMarkdownEditorFooter__uploadError { position: relative; left: -1px; diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss index a0827ed87985..c61ac0dd6a00 100644 --- a/src/components/markdown_editor/_markdown_editor_text_area.scss +++ b/src/components/markdown_editor/_markdown_editor_text_area.scss @@ -16,7 +16,6 @@ // Removes default firefox margin margin: 0; - // sass-lint:disable-block indentation transition: box-shadow $euiAnimSpeedFast ease-in, background-image $euiAnimSpeedFast ease-in, @@ -26,7 +25,7 @@ &:focus, // preventing the text area of loosing focus when clicking on an action button // from the toolbar - .euiMarkdownEditor:focus-within & { + .euiMarkdownEditor:focus-within & { background-color: tintOrShade($euiColorEmptyShade, 0%, 40%); background-image: euiFormControlGradient(); background-size: 100% 100%; @@ -41,4 +40,4 @@ .euiMarkdownEditor:focus-within & { background: none; } -} \ No newline at end of file +} diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss index 578624b39a6a..6d817d9495fd 100644 --- a/src/components/markdown_editor/_markdown_format.scss +++ b/src/components/markdown_editor/_markdown_format.scss @@ -34,6 +34,7 @@ .euiMarkdownFormat { $euiMarkdownAlphaShade: rgba($euiColorFullShade, .15); + // stylelint-disable indentation $euiMarkdownBorderColors: ( default: $euiMarkdownAlphaShade, subdued: $euiTextSubduedColor, @@ -45,6 +46,7 @@ inherit: currentColor, custom: currentColor, ); + // stylelint-enable indentation // We're adjusting the borders of the elements by passing a color defined in $euiMarkdownBorderColors. // For the `custom` and `inherit` colors we're assigning the `currentColor` so we can get the current or computed value of the `color` property @@ -59,12 +61,12 @@ } .euiCheckbox { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important margin-bottom: 0 !important; } // We're adjusting the position of the checkboxes so that when the text size is `relative` the checkboxes get better positioned - .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { + .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { top: 50%; transform: translateY(-50%); } diff --git a/src/components/notification/_notification_event.scss b/src/components/notification/_notification_event.scss index 6258ef971af3..ae46569a817a 100644 --- a/src/components/notification/_notification_event.scss +++ b/src/components/notification/_notification_event.scss @@ -22,7 +22,7 @@ } &--isRead { - color: $euiColorDarkShade !important; // sass-lint:disable-line no-important + color: $euiColorDarkShade !important; // stylelint-disable-line declaration-no-important } } @@ -37,4 +37,4 @@ margin-top: $euiSizeS; margin-right: $euiSizeM; } -} \ No newline at end of file +} diff --git a/src/components/page/page_content/_page_content_body.scss b/src/components/page/page_content/_page_content_body.scss index a2b26265d456..b426ea42a94d 100644 --- a/src/components/page/page_content/_page_content_body.scss +++ b/src/components/page/page_content/_page_content_body.scss @@ -17,4 +17,3 @@ padding: $amount; } } - diff --git a/src/components/page/page_content/_page_content_header_section.scss b/src/components/page/page_content/_page_content_header_section.scss index 6023021bfee2..910f7e4b9179 100644 --- a/src/components/page/page_content/_page_content_header_section.scss +++ b/src/components/page/page_content/_page_content_header_section.scss @@ -15,4 +15,3 @@ } } } - diff --git a/src/components/page/page_side_bar/_page_side_bar.scss b/src/components/page/page_side_bar/_page_side_bar.scss index 8307dc7b2abd..4083d7c0af57 100644 --- a/src/components/page/page_side_bar/_page_side_bar.scss +++ b/src/components/page/page_side_bar/_page_side_bar.scss @@ -29,4 +29,3 @@ top: 0; } } - diff --git a/src/components/panel/split_panel/_split_panel.scss b/src/components/panel/split_panel/_split_panel.scss index 84a8e94e4f83..6b805cc029cf 100644 --- a/src/components/panel/split_panel/_split_panel.scss +++ b/src/components/panel/split_panel/_split_panel.scss @@ -7,8 +7,8 @@ .euiSplitPanel__inner { flex-basis: 0%; // Make sure they're evenly split // Ensure no movement if they have click handlers - transform: none !important; // sass-lint:disable-line no-important - box-shadow: none !important; // sass-lint:disable-line no-important + transform: none !important; // stylelint-disable-line declaration-no-important + box-shadow: none !important; // stylelint-disable-line declaration-no-important } } diff --git a/src/components/resizable_container/_resizable_button.scss b/src/components/resizable_container/_resizable_button.scss index 4e3f56510e2f..a4f4be522192 100644 --- a/src/components/resizable_container/_resizable_button.scss +++ b/src/components/resizable_container/_resizable_button.scss @@ -5,20 +5,20 @@ flex-shrink: 0; z-index: 1; - &:before, - &:after { + &::before, + &::after { content: ''; display: block; position: absolute; top: 50%; left: 50%; background-color: $euiColorDarkestShade; - transition: ( + transition: width $euiResizableButtonTransitionSpeed ease, height $euiResizableButtonTransitionSpeed ease, transform $euiResizableButtonTransitionSpeed ease, background-color $euiResizableButtonTransitionSpeed ease - ); + ; } &.euiResizableButton--horizontal { @@ -27,17 +27,17 @@ margin-left: -($euiResizableButtonSize / 2); margin-right: -($euiResizableButtonSize / 2); - &:before, - &:after { + &::before, + &::after { width: 1px; height: $euiSizeM; } - &:before { + &::before { transform: translate(-2px, -50%); } - &:after { + &::after { transform: translate(1px, -50%); } } @@ -48,82 +48,82 @@ margin-top: -($euiResizableButtonSize / 2); margin-bottom: -($euiResizableButtonSize / 2); - &:before, - &:after { + &::before, + &::after { width: $euiSizeM; height: 1px; } - &:before { + &::before { transform: translate(-50%, -2px); } - &:after { + &::after { transform: translate(-50%, 1px); } } - //Lighten the "grab" icon on :hover + // Lighten the "grab" icon on :hover &:hover:not(:disabled) { - &:before, - &:after { + &::before, + &::after { background-color: $euiColorMediumShade; - transition-delay: $euiResizableButtonTransitionSpeed; //Delay transition on hover so animation is not accidentally triggered on mouse over + transition-delay: $euiResizableButtonTransitionSpeed; // Delay transition on hover so animation is not accidentally triggered on mouse over } } - //Add a transparent background to the container and emphasis the "grab" icon with primary color on :focus + // Add a transparent background to the container and emphasis the "grab" icon with primary color on :focus &:focus:not(:disabled) { background-color: transparentize($euiColorPrimary, .9); - &:before, - &:after { + &::before, + &::after { background-color: $euiColorPrimary; // Overrides default transition so that "grab" icon background-color doesn't animate - transition: ( + transition: width $euiResizableButtonTransitionSpeed ease, height $euiResizableButtonTransitionSpeed ease, transform $euiResizableButtonTransitionSpeed ease - ); + ; transition-delay: $euiResizableButtonTransitionSpeed / 2; } } - //Morph the "grab" icon into a fluid 2px straight line on :hover and :focus + // Morph the "grab" icon into a fluid 2px straight line on :hover and :focus &:hover:not(:disabled), &:focus:not(:disabled) { &.euiResizableButton--horizontal { - &:before, - &:after { + &::before, + &::after { height: 100%; } - &:before { + &::before { transform: translate(-1px, -50%); } - &:after { + &::after { transform: translate(0, -50%); } } &.euiResizableButton--vertical { - &:before, - &:after { + &::before, + &::after { width: 100%; } - &:before { + &::before { transform: translate(-50%, -1px); } - &:after { + &::after { transform: translate(-50%, 0); } } } &:disabled { - display: none !important; // sass-lint:disable-line no-important + display: none !important; // stylelint-disable-line declaration-no-important } } diff --git a/src/components/resizable_container/_resizable_collapse_button.scss b/src/components/resizable_container/_resizable_collapse_button.scss index 88ed627e7266..ac2099af7470 100644 --- a/src/components/resizable_container/_resizable_collapse_button.scss +++ b/src/components/resizable_container/_resizable_collapse_button.scss @@ -1,5 +1,5 @@ // This file has lots of modifiers and is somewhat nesty by nature because of positioning -// sass-lint:disable nesting-depth +// stylelint-disable max-nesting-depth /** * 1. The default position of the button should always be `middle`, so @@ -13,7 +13,7 @@ position: absolute; z-index: 2; // Remove animations from EuiButtonIcon because of the custom transforms - animation: none !important; // sass-lint:disable-line no-important + animation: none !important; // stylelint-disable-line declaration-no-important // Remove transition from EuiButtonIcon because of the custom transforms transition-property: background, box-shadow; @@ -69,9 +69,9 @@ } &.euiResizableToggleButton-isCollapsed { - top: 0 !important; // sass-lint:disable-line no-important - bottom: 0 !important; // sass-lint:disable-line no-important - transform: none !important; // sass-lint:disable-line no-important + top: 0 !important; // stylelint-disable-line declaration-no-important + bottom: 0 !important; // stylelint-disable-line declaration-no-important + transform: none !important; // stylelint-disable-line declaration-no-important height: 100%; &.euiResizableToggleButton--top { @@ -124,10 +124,10 @@ } &.euiResizableToggleButton-isCollapsed { - top: 0 !important; // sass-lint:disable-line no-important - bottom: 0 !important; // sass-lint:disable-line no-important - left: 0 !important; // sass-lint:disable-line no-important - transform: none !important; // sass-lint:disable-line no-important + top: 0 !important; // stylelint-disable-line declaration-no-important + bottom: 0 !important; // stylelint-disable-line declaration-no-important + left: 0 !important; // stylelint-disable-line declaration-no-important + transform: none !important; // stylelint-disable-line declaration-no-important width: 100%; &.euiResizableToggleButton--left { diff --git a/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss b/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss index b6fba695c61c..fee5d8cc22af 100644 --- a/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss +++ b/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss @@ -1,6 +1,6 @@ .euiSelectableTemplateSitewide__listItem { .euiSelectableListItem__text { - text-decoration: none !important; // sass-lint:disable-line no-important + text-decoration: none !important; // stylelint-disable-line declaration-no-important } // TODO: Any better way to override this focus underline? diff --git a/src/components/side_nav/_mixins.scss b/src/components/side_nav/_mixins.scss index 9798a7c19635..b831ccf258cc 100644 --- a/src/components/side_nav/_mixins.scss +++ b/src/components/side_nav/_mixins.scss @@ -1,4 +1,4 @@ -// sass-lint:disable indentation no-color-keywords no-color-literals +// stylelint-disable color-named @mixin euiSideNavEmbellish { background: diff --git a/src/components/side_nav/_side_nav.scss b/src/components/side_nav/_side_nav.scss index 4489314896a3..c3b9fff84686 100644 --- a/src/components/side_nav/_side_nav.scss +++ b/src/components/side_nav/_side_nav.scss @@ -4,7 +4,7 @@ border-bottom: $euiBorderThin; width: 100%; text-align: left; - border-radius: 0 !important; // sass-lint:disable-line no-important + border-radius: 0 !important; // stylelint-disable-line declaration-no-important font-size: $euiFontSizeM; padding: 0 $euiSize; // This plus the inner padding is equal to paddingSize large for EuiPage @@ -22,6 +22,7 @@ } // Loop through the breakpoints and apply mobile styles only to the right className +// stylelint-disable max-nesting-depth @each $breakpoint in $euiBreakpointKeys { @include euiBreakpoint($breakpoint) { .euiSideNav__contentMobile-#{$breakpoint} { diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss index ecddf22ded86..e4037f52ac31 100644 --- a/src/components/side_nav/_side_nav_item.scss +++ b/src/components/side_nav/_side_nav_item.scss @@ -5,7 +5,6 @@ * 4. Restrict the underline to the button __label so it doesn't affect other components that might live within */ - .euiSideNavItemButton { @include euiFontSizeS; text-align: left; /* 1 */ @@ -89,7 +88,7 @@ position: static; margin-left: 0; - &:after { + &::after { display: none; } } @@ -148,7 +147,7 @@ padding-left: $euiSizeS; padding-right: $euiSizeS; /* 2 */ - &:after { + &::after { position: absolute; /* 2 */ content: ''; top: $euiSizeM; diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss index 478a88c202f1..084afb6ea72d 100644 --- a/src/components/steps/_steps.scss +++ b/src/components/steps/_steps.scss @@ -3,9 +3,9 @@ */ .euiStep { - // sass-lint:disable indentation // Create border on all but the last step &:not(:last-of-type) { + // stylelint-disable indentation background-image: linear-gradient( to right, transparent 0, @@ -15,6 +15,7 @@ transparent ($euiSize + 1), transparent 100% ); + // stylelint-enable indentation background-repeat: no-repeat; background-position: left $euiSizeXXL; } diff --git a/src/components/suggest/_suggest_input.scss b/src/components/suggest/_suggest_input.scss index d71c7399cad2..a135311dafd6 100644 --- a/src/components/suggest/_suggest_input.scss +++ b/src/components/suggest/_suggest_input.scss @@ -1,4 +1,4 @@ .euiSuggestInput__statusIcon { - // sass-lint:disable-block no-important + // stylelint-disable-next-line declaration-no-important background-color: transparent !important; // Override typical append coloring } diff --git a/src/components/suggest/_suggest_item.scss b/src/components/suggest/_suggest_item.scss index 7ba8e8cd54e1..41e5b8284cf9 100644 --- a/src/components/suggest/_suggest_item.scss +++ b/src/components/suggest/_suggest_item.scss @@ -17,7 +17,8 @@ // When `onClick` is provided, EuiSuggestItem renders as a