From 7a8d5f68d28cdf49a77fc1674a092227a265ae6f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 19 Jul 2018 16:10:30 -0400 Subject: [PATCH] chore(stylelint): remove sass-lint/scss-lint in favor of stylelint - remove scss-lint and sass-lint - add stylelint and stylelint-order packages and configuration - update all *.scss files to new syntax fixes #14805 --- .github/CONTRIBUTING.md | 10 +- .scss-linters/default_rule.rb | 18 -- core/.sass-lint.yml | 211 ------------- core/.scss-lint.yml | 230 --------------- core/.stylelintrc.yml | 278 ++++++++++++++++++ core/package.json | 7 +- .../action-sheet/action-sheet.ios.scss | 17 +- .../action-sheet/action-sheet.md.scss | 13 +- .../components/action-sheet/action-sheet.scss | 16 +- core/src/components/alert/alert.ios.scss | 51 ++-- core/src/components/alert/alert.ios.vars.scss | 1 - core/src/components/alert/alert.md.scss | 54 ++-- core/src/components/alert/alert.md.vars.scss | 1 - core/src/components/alert/alert.scss | 34 +-- core/src/components/anchor/anchor.scss | 6 +- core/src/components/app/app.ios.scss | 1 - core/src/components/app/app.ios.vars.scss | 1 - core/src/components/app/app.md.scss | 1 - core/src/components/app/app.md.vars.scss | 1 - core/src/components/app/app.scss | 7 +- core/src/components/app/fonts/ionicons.scss | 25 +- .../back-button/back-button.ios.scss | 15 +- .../back-button/back-button.md.scss | 10 +- .../components/back-button/back-button.scss | 38 +-- core/src/components/backdrop/backdrop.scss | 11 +- core/src/components/badge/badge.scss | 11 +- core/src/components/button/button.ios.scss | 32 +- core/src/components/button/button.md.scss | 44 ++- core/src/components/button/button.scss | 53 ++-- core/src/components/buttons/buttons.ios.scss | 14 +- core/src/components/buttons/buttons.md.scss | 10 +- core/src/components/buttons/buttons.scss | 5 +- .../card-content/card-content.ios.scss | 1 + .../card-content/card-content.md.scss | 2 + .../components/card-content/card-content.scss | 2 +- .../card-header/card-header.ios.scss | 1 - .../components/card-header/card-header.scss | 6 +- .../card-subtitle/card-subtitle.ios.scss | 8 +- .../card-subtitle/card-subtitle.md.scss | 4 +- .../card-subtitle/card-subtitle.scss | 2 +- .../components/card-title/card-title.ios.scss | 6 +- .../components/card-title/card-title.md.scss | 8 +- .../src/components/card-title/card-title.scss | 4 +- core/src/components/card/card.ios.scss | 13 +- core/src/components/card/card.md.scss | 7 +- core/src/components/card/card.scss | 9 +- .../src/components/checkbox/checkbox.ios.scss | 12 +- .../checkbox/checkbox.ios.vars.scss | 1 - core/src/components/checkbox/checkbox.md.scss | 13 +- .../components/checkbox/checkbox.md.vars.scss | 1 - core/src/components/checkbox/checkbox.scss | 6 +- .../components/chip-button/chip-button.scss | 7 +- core/src/components/chip-icon/chip-icon.scss | 3 +- core/src/components/chip/chip.ios.scss | 10 +- core/src/components/chip/chip.md.scss | 10 +- core/src/components/chip/chip.md.vars.scss | 2 +- core/src/components/chip/chip.scss | 8 +- core/src/components/content/content.scss | 16 +- .../datetime/datetime.ios.vars.scss | 1 - .../components/datetime/datetime.md.vars.scss | 1 - core/src/components/datetime/datetime.scss | 10 +- .../components/fab-button/fab-button.ios.scss | 2 - .../components/fab-button/fab-button.md.scss | 1 - .../src/components/fab-button/fab-button.scss | 63 ++-- core/src/components/fab-list/fab-list.scss | 12 +- .../components/fab-list/fab-list.vars.scss | 1 - core/src/components/fab/fab.scss | 1 + core/src/components/fab/fab.vars.scss | 1 - core/src/components/footer/footer.scss | 5 +- core/src/components/grid/grid.mixins.scss | 5 +- core/src/components/header/header.scss | 5 +- core/src/components/hide-when/hide-when.scss | 2 +- core/src/components/input/input.ios.scss | 7 +- core/src/components/input/input.ios.vars.scss | 1 - core/src/components/input/input.md.scss | 7 +- core/src/components/input/input.md.vars.scss | 1 - core/src/components/input/input.scss | 26 +- .../item-divider/item-divider.ios.scss | 14 +- .../item-divider/item-divider.ios.vars.scss | 1 - .../item-divider/item-divider.md.scss | 14 +- .../item-divider/item-divider.md.vars.scss | 1 - .../components/item-divider/item-divider.scss | 17 +- .../item-option/item-option.ios.scss | 4 +- .../item-option/item-option.md.scss | 9 +- .../components/item-option/item-option.scss | 11 +- .../item-options/item-options.ios.vars.scss | 1 - .../item-options/item-options.md.vars.scss | 1 - .../components/item-options/item-options.scss | 27 +- .../components/item-sliding/item-sliding.scss | 29 +- core/src/components/item/item.ios.scss | 18 +- core/src/components/item/item.md.scss | 13 +- core/src/components/item/item.scss | 44 ++- core/src/components/item/item.vars.scss | 1 - core/src/components/label/label.ios.scss | 8 +- core/src/components/label/label.ios.vars.scss | 1 - core/src/components/label/label.md.scss | 8 +- core/src/components/label/label.md.vars.scss | 1 - core/src/components/label/label.scss | 12 +- .../list-header/list-header.ios.scss | 10 +- .../list-header/list-header.ios.vars.scss | 1 - .../list-header/list-header.md.scss | 6 +- .../list-header/list-header.md.vars.scss | 1 - .../components/list-header/list-header.scss | 5 +- core/src/components/list/list.ios.vars.scss | 1 - core/src/components/list/list.md.vars.scss | 1 - core/src/components/list/list.scss | 5 +- core/src/components/loading/loading.ios.scss | 4 +- core/src/components/loading/loading.md.scss | 3 +- core/src/components/loading/loading.scss | 10 +- .../menu-button/menu-button.ios.scss | 17 +- .../menu-button/menu-button.md.scss | 10 +- .../components/menu-button/menu-button.scss | 18 +- core/src/components/menu/menu.scss | 20 +- core/src/components/modal/modal.ios.scss | 1 + core/src/components/modal/modal.md.scss | 7 +- core/src/components/modal/modal.scss | 16 +- core/src/components/nav/nav.scss | 5 +- core/src/components/note/note.ios.scss | 4 +- core/src/components/note/note.md.scss | 4 +- core/src/components/picker/picker.ios.scss | 39 +-- core/src/components/picker/picker.md.scss | 37 +-- core/src/components/picker/picker.scss | 56 ++-- core/src/components/popover/popover.ios.scss | 18 +- core/src/components/popover/popover.md.scss | 3 +- core/src/components/popover/popover.scss | 19 +- core/src/components/radio/radio.ios.scss | 10 +- core/src/components/radio/radio.ios.vars.scss | 1 - core/src/components/radio/radio.md.scss | 11 +- core/src/components/radio/radio.md.vars.scss | 1 - core/src/components/radio/radio.scss | 8 +- core/src/components/range/range.ios.scss | 15 +- core/src/components/range/range.md.scss | 40 +-- core/src/components/range/range.scss | 3 +- core/src/components/refresher/refresher.scss | 9 +- .../reorder-group/reorder-group.scss | 10 +- core/src/components/reorder/reorder.ios.scss | 1 + core/src/components/reorder/reorder.md.scss | 1 + core/src/components/reorder/reorder.scss | 4 +- .../ripple-effect/ripple-effect.scss | 14 +- .../router-outlet/route-outlet.scss | 5 +- core/src/components/scroll/scroll.scss | 7 +- .../components/searchbar/searchbar.ios.scss | 26 +- .../components/searchbar/searchbar.md.scss | 15 +- core/src/components/searchbar/searchbar.scss | 13 +- .../segment-button/segment-button.scss | 35 +-- core/src/components/segment/segment.ios.scss | 16 +- core/src/components/segment/segment.md.scss | 22 +- core/src/components/segment/segment.scss | 10 +- core/src/components/select/select.ios.scss | 5 +- .../components/select/select.ios.vars.scss | 1 - core/src/components/select/select.md.scss | 5 +- .../src/components/select/select.md.vars.scss | 1 - core/src/components/select/select.scss | 8 +- core/src/components/show-when/show-when.scss | 2 +- .../skeleton-text/skeleton-text.ios.scss | 1 + .../skeleton-text/skeleton-text.md.scss | 1 + .../skeleton-text/skeleton-text.scss | 2 +- core/src/components/slide/slide.scss | 5 +- core/src/components/spinner/spinner.scss | 57 +++- .../src/components/split-pane/split-pane.scss | 9 +- .../components/tab-button/tab-button.ios.scss | 3 +- .../components/tab-button/tab-button.md.scss | 10 +- .../src/components/tab-button/tab-button.scss | 28 +- core/src/components/tabbar/tabbar.ios.scss | 1 - core/src/components/tabbar/tabbar.md.scss | 4 +- core/src/components/tabbar/tabbar.scss | 19 +- core/src/components/tabs/tabs.scss | 6 +- core/src/components/text/text.scss | 4 +- .../src/components/textarea/textarea.ios.scss | 7 +- .../textarea/textarea.ios.vars.scss | 1 - core/src/components/textarea/textarea.md.scss | 7 +- .../components/textarea/textarea.md.vars.scss | 1 - core/src/components/textarea/textarea.scss | 28 +- core/src/components/title/title.scss | 3 +- core/src/components/toast/toast.ios.scss | 11 +- core/src/components/toast/toast.md.scss | 10 +- core/src/components/toast/toast.scss | 10 +- core/src/components/toggle/toggle.ios.scss | 28 +- .../components/toggle/toggle.ios.vars.scss | 1 - core/src/components/toggle/toggle.md.scss | 20 +- .../src/components/toggle/toggle.md.vars.scss | 1 - core/src/components/toggle/toggle.scss | 3 +- core/src/components/toolbar/toolbar.ios.scss | 14 +- core/src/components/toolbar/toolbar.md.scss | 10 +- core/src/components/toolbar/toolbar.scss | 21 +- .../virtual-scroll/virtual-scroll.scss | 3 +- core/src/css/ionic.scss | 1 - core/src/css/padding.scss | 36 +-- core/src/css/structure.scss | 10 +- core/src/css/text-transformation.scss | 6 +- core/src/css/typography.scss | 13 +- core/src/themes/ionic.globals.scss | 30 +- 192 files changed, 1309 insertions(+), 1511 deletions(-) delete mode 100644 .scss-linters/default_rule.rb delete mode 100644 core/.sass-lint.yml delete mode 100644 core/.scss-lint.yml create mode 100644 core/.stylelintrc.yml diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index be2602ea30..27a349c0f7 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -52,13 +52,9 @@ Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic #### Sass Changes -1. If the css property is something that the user may want to override and it won't break the component layout, it should be given a Sass variable. See our [doc on naming Sass variables](https://docs.google.com/document/d/1OyOyrRE5lpB_9mdkF0HWVQLV97fHma450N8XqE4mjZQ/edit?usp=sharing). -2. After any changes to the Sass files run the [Sass Linter](https://github.com/brigade/scss-lint): - - Requires [Ruby](https://www.ruby-lang.org/en/documentation/installation/). **Skip this step entirely if you are unable to install Ruby.** - - Install the linter: `gem install scss_lint` - - Make sure to run the linter at the root of the repository. - - Run `gulp lint.sass` and fix any linter errors. - +1. After any changes to the Sass files run [stylelint](https://stylelint.io/): + - Switch to the `core` directory + - Run `npm run lint.sass` and manually fix the errors or `npm run lint.fix` to autofix the errors #### Viewing Changes diff --git a/.scss-linters/default_rule.rb b/.scss-linters/default_rule.rb deleted file mode 100644 index fe94455fa7..0000000000 --- a/.scss-linters/default_rule.rb +++ /dev/null @@ -1,18 +0,0 @@ -module SCSSLint - # Reports the use of !default at the end of variable declarations. - class Linter::DefaultRule < Linter - include LinterRegistry - - def visit_function(node) - return true - end - - def visit_variable(node) - return if source_from_range(node.source_range).include?('!default') - - return unless node_ancestor(node, 2).nil? - - add_lint(node, '!default should be used') - end - end -end \ No newline at end of file diff --git a/core/.sass-lint.yml b/core/.sass-lint.yml deleted file mode 100644 index b112f910e1..0000000000 --- a/core/.sass-lint.yml +++ /dev/null @@ -1,211 +0,0 @@ -# sass-lint config generated by make-sass-lint-config v0.1.2 -# -# The following scss-lint Linters are not yet supported by sass-lint: -# DefaultRule, SelectorDepth -# -# The following settings/values are unsupported by sass-lint: -# Linter PropertySortOrder, option "min_properties" -# Linter PropertySortOrder, option "separate_groups" -# Linter PropertySpelling, option "disabled_properties" - -files: - include: 'src/**/*.s+(a|c)ss' - ignore: - - 'src/css/colors.scss' - - 'src/css/flex-utils.scss' - - 'src/css/normalize.scss' - - 'src/css/text-alignment.scss' - - 'src/themes/ionic.functions.color.scss' - - 'src/themes/ionic.mixins.scss' - - 'src/themes/license.scss' - - 'src/themes/util.scss' - - 'src/themes/version.scss' - - 'src/platform/cordova.*.scss' - - 'src/components/slides/slides-import.scss' - - 'src/components/slides/slides-vendor.scss' -options: - formatter: stylish - merge-default-rules: false -rules: - # Name Formats - class-name-format: - - 0 - - convention: hyphenatedlowercase - id-name-format: - - 0 - - convention: hyphenatedlowercase - placeholder-name-format: - - 0 - - convention: hyphenatedlowercase - - # Nesting - force-attribute-nesting: 0 - force-element-nesting: 0 - force-pseudo-nesting: 0 - - # Disallows - no-color-literals: 0 - no-duplicate-properties: 0 - no-mergeable-selectors: 1 - no-misspelled-properties: - - 2 - - extra-properties: - - contain - - overscroll-behavior - - overscroll-behavior-y - # This doesn't allow chaining between elements and attributes, ids or classes - # if we turn this on it breaks a lot of components - no-qualifying-elements: - - 0 - - allow-element-with-attribute: false - allow-element-with-class: false - allow-element-with-id: false - - - # TODO temporarily disabled until https://github.com/sasstools/sass-lint/pull/1207 is merged - property-sort-order: - - 0 - - ignore-custom-properties: false - order: - - # Box - - - box-sizing - - position - - top - - right - - bottom - - left - - z-index - - display - - overflow - - overscroll-behavior - - clear - - - - flex - - flex-basis - - flex-direction - - flex-flow - - flex-grow - - flex-shrink - - flex-wrap - - align-content - - align-items - - align-self - - justify-content - - order - - - - width - - min-width - - max-width - - height - - min-height - - max-height - - - - columns - - column-gap - - column-fill - - column-rule - - column-span - - column-count - - column-width - - # Border - - - border - - border-top - - border-right - - border-bottom - - border-left - - border-width - - border-top-width - - border-right-width - - border-bottom-width - - border-left-width - - - border-style - - border-top-style - - border-right-style - - border-bottom-style - - border-left-style - - - border-color - - border-top-color - - border-right-color - - border-bottom-color - - border-left-color - - - outline - - outline-color - - outline-offset - - outline-style - - outline-width - - # Text - - - font - - font-family - - font-size - - -moz-osx-font-smoothing - - -webkit-font-smoothing - - font-smooth - - font-style - - font-variant - - font-weight - - src - - - letter-spacing - - line-height - - list-style - - text-decoration - - text-indent - - text-overflow - - text-rendering - - text-shadow - - text-transform - - text-wrap - - - white-space - - word-spacing - - - color - - # Background - - - background - - background-attachment - - background-color - - background-image - - background-repeat - - background-size - - # Other - - - border-collapse - - border-spacing - - box-shadow - - caption-side - - content - - cursor - - empty-cells - - opacity - - quotes - - speak - - table-layout - - vertical-align - - visibility - - # Transforms - - - transform - - transform-box - - transform-style - - - transition - - transition-delay - - transition-duration - - transition-property - - transition-timing-function - quotes: - - 2 - - style: double \ No newline at end of file diff --git a/core/.scss-lint.yml b/core/.scss-lint.yml deleted file mode 100644 index a55df8e357..0000000000 --- a/core/.scss-lint.yml +++ /dev/null @@ -1,230 +0,0 @@ -# Default application configuration that all configurations inherit from. - -# See config at https://github.com/brigade/scss-lint/blob/master/config/default.yml - -plugin_directories: ['.scss-linters'] - -scss_files: 'src/**/*.scss' - -exclude: - - '*.css' - - 'src/css/colors.scss' - - 'src/css/flex-utils.scss' - - 'src/css/normalize.scss' - - 'src/css/text-alignment.scss' - - 'src/themes/ionic.functions.color.scss' - - 'src/themes/ionic.mixins.scss' - - 'src/themes/license.scss' - - 'src/themes/util.scss' - - 'src/themes/version.scss' - - 'src/platform/cordova.*.scss' - - 'src/components/slides/slides-vendor.scss' - - -linters: - ColorVariable: - enabled: false - - DefaultRule: - enabled: true - - DuplicateProperty: - enabled: false - - MergeableSelector: - enabled: true - force_nesting: false - - PropertySortOrder: - enabled: true - ignore_unspecified: false - min_properties: 2 - separate_groups: true - order: - - # Box - - - box-sizing - - position - - top - - right - - bottom - - left - - z-index - - display - - overflow - - overscroll-behavior - - clear - - - - flex - - flex-basis - - flex-direction - - flex-flow - - flex-grow - - flex-shrink - - flex-wrap - - align-content - - align-items - - align-self - - justify-content - - order - - - - width - - min-width - - max-width - - height - - min-height - - max-height - - - - columns - - column-gap - - column-fill - - column-rule - - column-span - - column-count - - column-width - - # Border - - - border - - border-top - - border-right - - border-bottom - - border-left - - border-width - - border-top-width - - border-right-width - - border-bottom-width - - border-left-width - - - border-style - - border-top-style - - border-right-style - - border-bottom-style - - border-left-style - - - border-color - - border-top-color - - border-right-color - - border-bottom-color - - border-left-color - - - outline - - outline-color - - outline-offset - - outline-style - - outline-width - - # Text - - - font - - font-family - - font-size - - -moz-osx-font-smoothing - - -webkit-font-smoothing - - font-smooth - - font-style - - font-variant - - font-weight - - src - - - letter-spacing - - line-height - - list-style - - text-decoration - - text-indent - - text-overflow - - text-rendering - - text-shadow - - text-transform - - text-wrap - - - white-space - - word-spacing - - - color - - # Background - - - background - - background-attachment - - background-color - - background-image - - background-repeat - - background-size - - # Other - - - border-collapse - - border-spacing - - box-shadow - - caption-side - - content - - cursor - - empty-cells - - opacity - - quotes - - speak - - table-layout - - vertical-align - - visibility - - # Transforms - - - transform - - transform-box - - transform-style - - - transition - - transition-delay - - transition-duration - - transition-property - - transition-timing-function - - # This doesn't allow chaining between elements and attributes, ids or classes - # if we turn this on it breaks a lot of components - QualifyingElement: - enabled: false - allow_element_with_attribute: false - allow_element_with_class: false - allow_element_with_id: false - - SelectorFormat: - enabled: false - convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern - - StringQuotes: - enabled: true - style: double_quotes - - SelectorDepth: - enabled: true - max_depth: 5 - - PropertySpelling: - extra_properties: - - contain - - overscroll-behavior - - overscroll-behavior-y - disabled_properties: - - background-position - - direction - - right - - left - - float - - padding - - padding-left - - padding-right - - padding-top - - padding-bottom - - margin - - margin-left - - margin-right - - margin-top - - margin-bottom - - border-radius - - border-top-left-radius - - border-top-right-radius - - border-bottom-right-radius - - border-bottom-left-radius - - transform-origin \ No newline at end of file diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml new file mode 100644 index 0000000000..fd74c884e5 --- /dev/null +++ b/core/.stylelintrc.yml @@ -0,0 +1,278 @@ +# Default styelint configuration. + +# See documentation at https://stylelint.io/ + +ignoreFiles: + - src/css/colors.scss + - src/css/flex-utils.scss + - src/css/normalize.scss + - src/css/text-alignment.scss + - src/components/slides/slides-vendor.scss + - src/themes/ionic.mixins.scss + - src/themes/ionic.functions.color.scss + - src/themes/ionic.functions.string.scss + +indentation: 2 + +plugins: + - stylelint-order + +rules: + at-rule-empty-line-before: + - always + - except: + - blockless-after-blockless + - first-nested + ignore: + - after-comment + + block-closing-brace-newline-before: + - always + + block-no-empty: + - true + + block-opening-brace-newline-after: + - always + + custom-property-empty-line-before: + - always + - except: + - after-comment + - after-custom-property + - first-nested + + declaration-no-important: + - true + + order/order: + - custom-properties + - dollar-variables + - at-rules + - declarations + - rules + + # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml + order/properties-order: + + # Box + + - emptyLineBefore: always + properties: + - display + - position + - top + - right + - bottom + - left + + - emptyLineBefore: always + properties: + - flex + - flex-basis + - flex-direction + - flex-flow + - flex-grow + - flex-shrink + - flex-wrap + - align-content + - align-items + - align-self + - justify-content + - order + + - emptyLineBefore: always + properties: + - width + - min-width + - max-width + + - height + - min-height + - max-height + + - emptyLineBefore: always + properties: + - margin + - margin-top + - margin-right + - margin-bottom + - margin-left + + - emptyLineBefore: always + properties: + - padding + - padding-top + - padding-right + - padding-bottom + - padding-left + + - emptyLineBefore: always + properties: + - float + - clear + + - emptyLineBefore: always + properties: + - columns + - column-gap + - column-fill + - column-rule + - column-span + - column-count + - column-width + + - emptyLineBefore: always + properties: + - transform + - transform-box + - transform-origin + - transform-style + + - emptyLineBefore: always + properties: + - transition + - transition-delay + - transition-duration + - transition-property + - transition-timing-function + + # Border + + - emptyLineBefore: always + properties: + - border + - border-top + - border-right + - border-bottom + - border-left + - border-width + - border-top-width + - border-right-width + - border-bottom-width + - border-left-width + + - border-style + - border-top-style + - border-right-style + - border-bottom-style + - border-left-style + + - border-radius + - border-top-left-radius + - border-top-right-radius + - border-bottom-left-radius + - border-bottom-right-radius + + - border-color + - border-top-color + - border-right-color + - border-bottom-color + - border-left-color + + - emptyLineBefore: always + properties: + - outline + - outline-color + - outline-offset + - outline-style + - outline-width + + # Background + + - emptyLineBefore: always + properties: + - background + - background-attachment + - background-clip + - background-color + - background-image + - background-repeat + - background-position + - background-size + + # Text + + - color + + - emptyLineBefore: always + properties: + - font + - font-family + - font-size + - font-smoothing + - font-style + - font-variant + - font-weight + + - emptyLineBefore: always + properties: + - letter-spacing + - line-height + - list-style + + - emptyLineBefore: always + properties: + - text-align + - text-decoration + - text-indent + - text-overflow + - text-rendering + - text-shadow + - text-transform + - text-wrap + + - emptyLineBefore: always + properties: + - white-space + - word-spacing + + # Other + + - emptyLineBefore: always + properties: + - border-collapse + - border-spacing + - box-shadow + - caption-side + - contain + - content + - cursor + - empty-cells + - object-fit + - opacity + - overflow + - quotes + - speak + - table-layout + - touch-action + - user-select + - vertical-align + - visibility + - z-index + + property-blacklist: + - background-position + - direction + - right + - left + - float + - padding + - padding-left + - padding-right + - padding-top + - padding-bottom + - margin + - margin-left + - margin-right + - margin-top + - margin-bottom + - border-radius + - border-top-left-radius + - border-top-right-radius + - border-bottom-right-radius + - border-bottom-left-radius + - transform-origin + + string-quotes: + - double \ No newline at end of file diff --git a/core/package.json b/core/package.json index 86b69a770c..513d357e91 100644 --- a/core/package.json +++ b/core/package.json @@ -38,8 +38,9 @@ "jest": "^23.1.0", "mocha": "^4.0.1", "np": "^2.17.0", - "sass-lint": "^1.12.1", "selenium-webdriver": "^3.6.0", + "stylelint": "^9.3.0", + "stylelint-order": "^0.8.1", "tslint": "^5.10.0", "tslint-ionic-rules": "0.0.14", "typescript": "^2.9.2", @@ -58,7 +59,9 @@ "e2e": "node ./scripts/e2e", "e2e-debug": "node --inspect --debug-brk ./scripts/e2e", "lint": "npm run lint.ts && npm run lint.sass", - "lint.sass": "sass-lint -v -q", + "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix", + "lint.sass": "stylelint 'src/**/*.scss'", + "lint.sass.fix": "npm run lint.sass -- --fix", "lint.ts": "tslint --project .", "lint.ts.fix": "tslint --project . --fix", "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next", diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss index f9e83e9d18..d4443a2011 100644 --- a/core/src/components/action-sheet/action-sheet.ios.scss +++ b/core/src/components/action-sheet/action-sheet.ios.scss @@ -48,7 +48,6 @@ :host(.action-sheet-translucent) .action-sheet-group { background: $action-sheet-ios-translucent-background-color; - backdrop-filter: $action-sheet-ios-translucent-filter; } @@ -61,9 +60,10 @@ border-bottom: $action-sheet-ios-title-border-width $action-sheet-ios-title-border-style $action-sheet-ios-title-border-color; + color: $action-sheet-ios-title-color; + font-size: $action-sheet-ios-title-font-size; font-weight: $action-sheet-ios-title-font-weight; - color: $action-sheet-ios-title-color; text-align: $action-sheet-ios-text-align; } @@ -80,16 +80,16 @@ .action-sheet-button { @include margin(0); - @include padding($action-sheet-ios-button-padding); height: $action-sheet-ios-button-height; border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-border-color; - font-size: $action-sheet-ios-button-font-size; - color: $action-sheet-ios-button-text-color; background: $action-sheet-ios-button-background; + color: $action-sheet-ios-button-text-color; + + font-size: $action-sheet-ios-button-font-size; contain: strict; } @@ -109,12 +109,14 @@ border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated; border-bottom-color: $action-sheet-ios-button-background-activated; + background: $action-sheet-ios-button-background-activated; } .action-sheet-selected { - font-weight: bold; background: $action-sheet-ios-button-background-selected; + + font-weight: bold; } .action-sheet-destructive { @@ -122,6 +124,7 @@ } .action-sheet-cancel { - font-weight: $action-sheet-ios-button-cancel-font-weight; background: $action-sheet-ios-button-cancel-background; + + font-weight: $action-sheet-ios-button-cancel-font-weight; } diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss index e34ee3e6a4..0e83db55fe 100644 --- a/core/src/components/action-sheet/action-sheet.md.scss +++ b/core/src/components/action-sheet/action-sheet.md.scss @@ -14,9 +14,10 @@ .action-sheet-title { @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start); - font-size: $action-sheet-md-title-font-size; color: $action-sheet-md-title-color; + font-size: $action-sheet-md-title-font-size; + text-align: $action-sheet-md-text-align; } @@ -50,17 +51,18 @@ @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start); position: relative; - overflow: hidden; height: $action-sheet-md-button-height; - font-size: $action-sheet-md-button-font-size; - color: $action-sheet-md-button-text-color; background: $action-sheet-md-button-background; + color: $action-sheet-md-button-text-color; + + font-size: $action-sheet-md-button-font-size; text-align: $action-sheet-md-text-align; contain: strict; + overflow: hidden; } .action-sheet-button.activated { @@ -78,6 +80,7 @@ } .action-sheet-selected { - font-weight: bold; background-color: $action-sheet-md-button-background-selected; + + font-weight: bold; } diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss index 4149de2e07..35916b44bd 100644 --- a/core/src/components/action-sheet/action-sheet.scss +++ b/core/src/components/action-sheet/action-sheet.scss @@ -7,11 +7,11 @@ @include font-smoothing(); @include position(0, 0, 0, 0); - position: fixed; - z-index: $z-index-overlay; display: block; + position: fixed; touch-action: none; + z-index: $z-index-overlay; } .action-sheet-wrapper { @@ -19,13 +19,13 @@ @include margin(auto); @include transform(translate3d(0, 100%, 0)); - position: absolute; - z-index: $z-index-overlay-wrapper; display: block; + position: absolute; width: $action-sheet-width; max-width: $action-sheet-max-width; + z-index: $z-index-overlay-wrapper; pointer-events: none; } @@ -33,6 +33,7 @@ width: $action-sheet-width; border: 0; + outline: none; font-family: inherit; @@ -54,7 +55,6 @@ display: flex; flex-flow: column; - justify-content: flex-end; height: 100%; @@ -63,11 +63,9 @@ .action-sheet-group { flex-shrink: 2; - overscroll-behavior-y: contain; overflow-y: scroll; -webkit-overflow-scrolling: touch; - pointer-events: all; } @@ -76,7 +74,7 @@ } .action-sheet-group-cancel { - overflow: hidden; - flex-shrink: 0; + + overflow: hidden; } diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss index 4f2048bd38..81eccd45ca 100644 --- a/core/src/components/alert/alert.ios.scss +++ b/core/src/components/alert/alert.ios.scss @@ -12,13 +12,12 @@ .alert-wrapper { @include border-radius($alert-ios-border-radius); - overflow: hidden; - max-width: $alert-ios-max-width; background-color: $alert-ios-background-color; box-shadow: $alert-ios-box-shadow; + overflow: hidden; } @@ -27,7 +26,6 @@ :host(.alert-translucent) .alert-wrapper { background: $alert-ios-translucent-background-color; - backdrop-filter: $alert-ios-translucent-filter; } @@ -44,14 +42,16 @@ .alert-title { @include margin($alert-ios-title-margin-top, null, null, null); + color: $alert-ios-title-color; + font-size: $alert-ios-title-font-size; font-weight: $alert-ios-title-font-weight; - color: $alert-ios-title-color; } .alert-sub-title { - font-size: $alert-ios-sub-title-font-size; color: $alert-ios-sub-title-text-color; + + font-size: $alert-ios-sub-title-font-size; } @@ -62,9 +62,10 @@ .alert-input-group { @include padding($alert-ios-message-padding-top, $alert-ios-message-padding-end, $alert-ios-message-padding-bottom, $alert-ios-message-padding-start); - font-size: $alert-ios-message-font-size; color: $alert-ios-message-text-color; + font-size: $alert-ios-message-font-size; + text-align: $alert-ios-message-text-align; } @@ -87,8 +88,8 @@ @include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start); border: $alert-ios-input-border; - background-color: $alert-ios-input-background-color; + background-color: $alert-ios-input-background-color; appearance: none; } @@ -103,7 +104,6 @@ max-height: $alert-ios-content-max-height; border-top: $alert-ios-list-border-top; - overflow-y: scroll; -webkit-overflow-scrolling: touch; } @@ -123,16 +123,16 @@ .alert-radio-label { @include padding($alert-ios-radio-label-padding-top, $alert-ios-radio-label-padding-end, $alert-ios-radio-label-padding-bottom, $alert-ios-radio-label-padding-start); - overflow: hidden; - flex: 1; - order: 0; + color: $alert-ios-radio-label-text-color; + text-overflow: ellipsis; + white-space: nowrap; - color: $alert-ios-radio-label-text-color; + overflow: hidden; } @@ -167,12 +167,13 @@ width: $alert-ios-radio-icon-width; height: $alert-ios-radio-icon-height; + transform: $alert-ios-radio-icon-transform; + border-width: $alert-ios-radio-icon-border-width; border-top-width: 0; border-left-width: 0; border-style: $alert-ios-radio-icon-border-style; border-color: $alert-ios-radio-icon-border-color; - transform: $alert-ios-radio-icon-transform; } @@ -182,14 +183,15 @@ .alert-checkbox-label { @include padding($alert-ios-checkbox-label-padding-top, $alert-ios-checkbox-label-padding-end, $alert-ios-checkbox-label-padding-bottom, $alert-ios-checkbox-label-padding-start); - overflow: hidden; - flex: 1; + color: $alert-ios-checkbox-label-text-color; + text-overflow: ellipsis; + white-space: nowrap; - color: $alert-ios-checkbox-label-text-color; + overflow: hidden; } // iOS Alert Checkbox Outer Circle: Unchecked @@ -197,7 +199,6 @@ .alert-checkbox-icon { @include border-radius($alert-ios-checkbox-border-radius); - @include margin($alert-ios-checkbox-margin-top, $alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-bottom, $alert-ios-checkbox-margin-start); position: relative; @@ -208,6 +209,7 @@ border-width: $alert-ios-checkbox-border-width; border-style: $alert-ios-checkbox-border-style; border-color: $alert-ios-checkbox-border-color-off; + background-color: $alert-ios-checkbox-background-color-off; contain: strict; @@ -219,6 +221,7 @@ [aria-checked=true] .alert-checkbox-icon { border-color: $alert-ios-checkbox-border-color-on; + background-color: $alert-ios-checkbox-background-color-on; } @@ -234,12 +237,13 @@ width: $alert-ios-checkbox-icon-width; height: $alert-ios-checkbox-icon-height; + transform: $alert-ios-checkbox-icon-transform; + border-width: $alert-ios-checkbox-icon-border-width; border-top-width: 0; border-left-width: 0; border-style: $alert-ios-checkbox-icon-border-style; border-color: $alert-ios-checkbox-icon-border-color; - transform: $alert-ios-checkbox-icon-transform; } @@ -256,8 +260,6 @@ @include margin($alert-ios-button-margin); @include border-radius($alert-ios-button-border-radius); - overflow: hidden; - flex: $alert-ios-button-flex; min-width: $alert-ios-button-min-width; @@ -265,13 +267,18 @@ border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; - font-size: $alert-ios-button-font-size; - color: $alert-ios-button-text-color; + background-color: $alert-ios-button-background-color; + color: $alert-ios-button-text-color; + + font-size: $alert-ios-button-font-size; + + overflow: hidden; } .alert-button:last-child { border-right: 0; + font-weight: $alert-ios-button-main-font-weight; } diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index 8afd1fff79..3d60b215a5 100644 --- a/core/src/components/alert/alert.ios.vars.scss +++ b/core/src/components/alert/alert.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.vars"; // iOS Alert diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss index 4ed79e200a..376b94088f 100644 --- a/core/src/components/alert/alert.md.scss +++ b/core/src/components/alert/alert.md.scss @@ -29,14 +29,16 @@ } .alert-title { + color: $alert-md-title-color; + font-size: $alert-md-title-font-size; font-weight: $alert-md-title-font-weight; - color: $alert-md-title-color; } .alert-sub-title { - font-size: $alert-md-sub-title-font-size; color: $alert-md-sub-title-text-color; + + font-size: $alert-md-sub-title-font-size; } @@ -69,6 +71,7 @@ @include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start); border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color; + color: $alert-md-input-text-color; } @@ -85,23 +88,23 @@ .alert-radio-group, .alert-checkbox-group { position: relative; - overflow: auto; max-height: $alert-md-content-max-height; border-top: $alert-md-list-border-top; border-bottom: $alert-md-list-border-bottom; + + overflow: auto; } .alert-tappable { - position: relative; display: flex; - - overflow: hidden; + position: relative; height: $alert-md-tappable-height; contain: strict; + overflow: hidden; } @@ -111,15 +114,17 @@ .alert-radio-label { @include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start); - overflow: hidden; - flex: 1; + color: $alert-md-radio-label-text-color; + font-size: $alert-md-radio-label-font-size; + text-overflow: ellipsis; + white-space: nowrap; - color: $alert-md-radio-label-text-color; + overflow: hidden; } // Material Design Alert Radio Unchecked Circle @@ -129,8 +134,8 @@ @include position($alert-md-radio-top, null, null, $alert-md-radio-left); @include border-radius($alert-md-radio-border-radius); - position: relative; display: block; + position: relative; width: $alert-md-radio-width; height: $alert-md-radio-height; @@ -152,9 +157,11 @@ width: $alert-md-radio-icon-width; height: $alert-md-radio-icon-height; - background-color: $alert-md-radio-border-color-on; transform: $alert-md-radio-icon-transform-off; + transition: $alert-md-radio-icon-transition; + + background-color: $alert-md-radio-border-color-on; } @@ -180,15 +187,17 @@ .alert-checkbox-label { @include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start); - overflow: hidden; - flex: 1; + color: $alert-md-checkbox-label-text-color; + font-size: $alert-md-checkbox-label-font-size; + text-overflow: ellipsis; + white-space: nowrap; - color: $alert-md-checkbox-label-text-color; + overflow: hidden; } @@ -216,6 +225,7 @@ [aria-checked=true] .alert-checkbox-icon { border-color: $alert-md-checkbox-border-color-on; + background-color: $alert-md-checkbox-border-color-on; } @@ -227,12 +237,13 @@ width: $alert-md-checkbox-icon-width; height: $alert-md-checkbox-icon-height; + transform: $alert-md-checkbox-icon-transform; + border-width: $alert-md-checkbox-icon-border-width; border-top-width: 0; border-left-width: 0; border-style: $alert-md-checkbox-icon-border-style; border-color: $alert-md-checkbox-icon-border-color; - transform: $alert-md-checkbox-icon-transform; } @@ -250,22 +261,21 @@ .alert-button { @include border-radius($alert-md-button-border-radius); - @include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start); - @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start); // necessary for ripple to work properly position: relative; - overflow: hidden; - - font-weight: $alert-md-button-font-weight; - text-transform: $alert-md-button-text-transform; - color: $alert-md-button-text-color; background-color: $alert-md-button-background-color; + color: $alert-md-button-text-color; + + font-weight: $alert-md-button-font-weight; text-align: $alert-md-button-text-align; + text-transform: $alert-md-button-text-transform; + + overflow: hidden; } .alert-button.activated { diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index 752a821140..b77bf16cc9 100644 --- a/core/src/components/alert/alert.md.vars.scss +++ b/core/src/components/alert/alert.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.vars"; // Material Design Alert diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss index 1a1b9721aa..d400c3203c 100644 --- a/core/src/components/alert/alert.scss +++ b/core/src/components/alert/alert.scss @@ -7,18 +7,15 @@ @include font-smoothing(); @include position(0, 0, 0, 0); - position: fixed; - - z-index: $z-index-overlay; - display: flex; + position: fixed; align-items: center; justify-content: center; - touch-action: none; - contain: strict; + touch-action: none; + z-index: $z-index-overlay; } :host(.alert-top) { @@ -28,7 +25,6 @@ } .alert-wrapper { - z-index: $z-index-overlay-wrapper; display: flex; flex-direction: column; @@ -36,9 +32,9 @@ min-width: $alert-min-width; max-height: $alert-max-height; - opacity: 0; - contain: content; + opacity: 0; + z-index: $z-index-overlay-wrapper; } .alert-title { @@ -55,11 +51,8 @@ .alert-message { box-sizing: border-box; - -webkit-overflow-scrolling: touch; - overflow-y: scroll; - overscroll-behavior-y: contain; } @@ -70,14 +63,14 @@ .alert-input { @include padding(10px, 0); - box-sizing: border-box; - width: 100%; border: 0; - font: inherit; background: inherit; + + font: inherit; + box-sizing: border-box; } .alert-button-group { @@ -96,13 +89,15 @@ .alert-button { @include margin(0); - z-index: 0; display: block; border: 0; font-size: $alert-button-font-size; + line-height: $alert-button-line-height; + + z-index: 0; } .alert-button-inner { @@ -125,12 +120,13 @@ border: 0; - font-size: inherit; - line-height: initial; background: transparent; - text-align: start; + font-size: inherit; + line-height: initial; + + text-align: start; appearance: none; } diff --git a/core/src/components/anchor/anchor.scss b/core/src/components/anchor/anchor.scss index 8ed93a6bfb..e884f9e3fd 100644 --- a/core/src/components/anchor/anchor.scss +++ b/core/src/components/anchor/anchor.scss @@ -10,10 +10,10 @@ --color: #{ion-color(primary, base)}; --background: transparent; - text-decoration: var(--text-decoration); - - color: var(--color); background: var(--background); + color: var(--color); + + text-decoration: var(--text-decoration); } :host(.ion-color) { diff --git a/core/src/components/app/app.ios.scss b/core/src/components/app/app.ios.scss index 17b6f9fc7b..d84ad57272 100644 --- a/core/src/components/app/app.ios.scss +++ b/core/src/components/app/app.ios.scss @@ -5,7 +5,6 @@ // -------------------------------------------------- .app-ios { - @include footer-safe-area($toolbar-ios-height, $toolbar-ios-padding, $tabbar-ios-height); // TODO this can be simplified diff --git a/core/src/components/app/app.ios.vars.scss b/core/src/components/app/app.ios.vars.scss index 0332bb0fbe..996e540da1 100644 --- a/core/src/components/app/app.ios.vars.scss +++ b/core/src/components/app/app.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../tabbar/tabbar.ios.vars"; // iOS App diff --git a/core/src/components/app/app.md.scss b/core/src/components/app/app.md.scss index 6e55bd1982..0f27f1d00a 100644 --- a/core/src/components/app/app.md.scss +++ b/core/src/components/app/app.md.scss @@ -5,7 +5,6 @@ // -------------------------------------------------- .app-md { - @include footer-safe-area( $toolbar-md-height, $toolbar-md-padding, diff --git a/core/src/components/app/app.md.vars.scss b/core/src/components/app/app.md.vars.scss index 828bd388c9..9ab7402284 100644 --- a/core/src/components/app/app.md.vars.scss +++ b/core/src/components/app/app.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../tabbar/tabbar.md.vars"; diff --git a/core/src/components/app/app.scss b/core/src/components/app/app.scss index ea71301144..0e972e6ba8 100644 --- a/core/src/components/app/app.scss +++ b/core/src/components/app/app.scss @@ -12,10 +12,10 @@ ion-nav, @include position(0, 0, 0, 0); position: absolute; - z-index: $z-index-page-container; - overflow: hidden; contain: layout size style; + overflow: hidden; + z-index: $z-index-page-container; } ion-app, @@ -31,6 +31,9 @@ ion-app, } [hidden] { + // TODO can we remove important here or remove this entirely + // since it is also in structure.scss + /* stylelint-disable-next-line declaration-no-important */ display: none !important; } diff --git a/core/src/components/app/fonts/ionicons.scss b/core/src/components/app/fonts/ionicons.scss index 68eff41693..477e040b42 100644 --- a/core/src/components/app/fonts/ionicons.scss +++ b/core/src/components/app/fonts/ionicons.scss @@ -22,17 +22,6 @@ $ionicons-font-path: $font-path !default; ion-icon { @include font-smoothing(); - display: inline-block; - - font-family: "Ionicons"; - font-style: normal; - font-variant: normal; - font-weight: normal; - line-height: 1; - text-rendering: auto; - text-transform: none; - speak: none; - @include rtl() { &[aria-label^="arrow"]::before, &[flip-rtl]::before { @@ -44,6 +33,20 @@ ion-icon { } } + display: inline-block; + + font-family: "Ionicons"; + font-style: normal; + font-variant: normal; + font-weight: normal; + + line-height: 1; + + text-rendering: auto; + text-transform: none; + + speak: none; + &::before { display: inline-block; } diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss index 0f5682d898..e82c41372e 100644 --- a/core/src/components/back-button/back-button.ios.scss +++ b/core/src/components/back-button/back-button.ios.scss @@ -12,18 +12,20 @@ @include padding(0); @include margin(0); - z-index: $back-button-ios-button-z-index; - overflow: visible; - min-height: 32px; + transform: translateZ(0); + border: 0; - font-size: 17px; - line-height: 1; background-color: transparent; - transform: translateZ(0); + font-size: 17px; + + line-height: 1; + + overflow: visible; + z-index: $back-button-ios-button-z-index; &.activated { opacity: .4; @@ -37,6 +39,5 @@ ion-icon { display: inherit; font-size: 1.85em; - pointer-events: none; } diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss index 1cd2aab40d..41c8102dbd 100644 --- a/core/src/components/back-button/back-button.md.scss +++ b/core/src/components/back-button/back-button.md.scss @@ -16,12 +16,14 @@ height: 32px; border: 0; - font-size: 14px; - font-weight: 500; - text-transform: uppercase; background-color: transparent; + font-size: 14px; + font-weight: 500; + + text-transform: uppercase; + box-shadow: none; &.activated { @@ -36,9 +38,9 @@ ion-icon { font-size: 24px; font-weight: normal; + line-height: .67; text-align: start; - pointer-events: none; } diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss index 517a69306f..0385f47aab 100644 --- a/core/src/components/back-button/back-button.scss +++ b/core/src/components/back-button/back-button.scss @@ -7,7 +7,6 @@ display: none; color: #{current-color(base)}; - pointer-events: all; } @@ -19,29 +18,30 @@ .back-button-native { @include font-smoothing(); - position: relative; - z-index: 0; display: block; - - border: 0; - outline: none; - - line-height: 1; - - text-decoration: none; - text-overflow: ellipsis; - text-transform: none; - white-space: nowrap; - - color: inherit; - cursor: pointer; + position: relative; transition: background-color, opacity 100ms linear; - text-align: center; - user-select: none; - font-kerning: none; + border: 0; + outline: none; + + color: inherit; + + line-height: 1; + + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + text-transform: none; + + white-space: nowrap; + + cursor: pointer; + user-select: none; + z-index: 0; + font-kerning: none; appearance: none; } diff --git a/core/src/components/backdrop/backdrop.scss b/core/src/components/backdrop/backdrop.scss index ccf1567cca..410e2c1c0c 100644 --- a/core/src/components/backdrop/backdrop.scss +++ b/core/src/components/backdrop/backdrop.scss @@ -6,17 +6,16 @@ :host { @include position(0, 0, 0, 0); - position: absolute; - z-index: $z-index-backdrop; display: block; + position: absolute; - cursor: pointer; - opacity: .01; transform: translateZ(0); - touch-action: none; - contain: strict; + cursor: pointer; + opacity: .01; + touch-action: none; + z-index: $z-index-backdrop; &.backdrop-hide { background: transparent; diff --git a/core/src/components/badge/badge.scss b/core/src/components/badge/badge.scss index 756b1efd02..dbaed8b043 100644 --- a/core/src/components/badge/badge.scss +++ b/core/src/components/badge/badge.scss @@ -14,19 +14,20 @@ min-width: $badge-min-width; + background-color: #{current-color(base)}; + color: #{current-color(contrast)}; + font-size: $badge-font-size; font-weight: $badge-font-weight; line-height: 1; - white-space: nowrap; - color: #{current-color(contrast)}; - background-color: #{current-color(base)}; - vertical-align: baseline; - text-align: center; + white-space: nowrap; + contain: content; + vertical-align: baseline; } :host(:empty) { diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index b4645cd787..2ea7295012 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -6,26 +6,23 @@ // -------------------------------------------------- :host { - font-family: #{$button-ios-font-family}; - font-size: #{$button-ios-font-size}; - font-weight: #{$button-ios-font-weight}; - letter-spacing: #{$button-ios-letter-spacing}; - --border-radius: #{$button-ios-border-radius}; - --margin-top: #{$button-ios-margin-top}; --margin-bottom: #{$button-ios-margin-bottom}; --margin-start: #{$button-ios-margin-start}; --margin-end: #{$button-ios-margin-end}; - --padding-top: #{$button-ios-padding-top}; --padding-bottom: #{$button-ios-padding-bottom}; --padding-start: #{$button-ios-padding-start}; --padding-end: #{$button-ios-padding-end}; - --height: #{$button-ios-height}; - --transition: background-color, opacity 100ms linear; + + font-family: #{$button-ios-font-family}; + font-size: #{$button-ios-font-size}; + font-weight: #{$button-ios-font-weight}; + + letter-spacing: #{$button-ios-letter-spacing}; } // iOS Solid Button @@ -54,9 +51,9 @@ } :host(.button-outline.activated) { - color: #{current-color(contrast)}; - --background: #{current-color(base)}; + + color: #{current-color(contrast)}; } :host(.button-outline.focused) { @@ -89,7 +86,6 @@ :host(.button-round) { --border-radius: #{$button-ios-round-border-radius}; - --padding-top: #{$button-ios-round-padding-top}; --padding-start: #{$button-ios-round-padding-start}; --padding-end: #{$button-ios-round-padding-end}; @@ -101,29 +97,25 @@ // -------------------------------------------------- :host(.button-large) { - font-size: #{$button-ios-large-font-size}; - --border-radius: #{$button-ios-large-border-radius}; - --padding-top: #{$button-ios-large-padding-top}; --padding-start: #{$button-ios-large-padding-start}; --padding-end: #{$button-ios-large-padding-end}; --padding-bottom: #{$button-ios-large-padding-bottom}; - --height: #{$button-ios-large-height}; + + font-size: #{$button-ios-large-font-size}; } :host(.button-small) { - font-size: #{$button-ios-small-font-size}; - --border-radius: #{$button-ios-small-border-radius}; - --padding-top: #{$button-ios-small-padding-top}; --padding-start: #{$button-ios-small-padding-start}; --padding-end: #{$button-ios-small-padding-end}; --padding-bottom: #{$button-ios-small-padding-bottom}; - --height: #{$button-ios-small-height}; + + font-size: #{$button-ios-small-font-size}; } diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index e24e79c657..05a3adc216 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -5,30 +5,27 @@ // -------------------------------------------------- :host { + --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function, + background-color $button-md-transition-duration $button-md-transition-timing-function, + color $button-md-transition-duration $button-md-transition-timing-function}; + --border-radius: #{$button-md-border-radius}; + --margin-top: #{$button-md-margin-top}; + --margin-bottom: #{$button-md-margin-bottom}; + --margin-start: #{$button-md-margin-start}; + --margin-end: #{$button-md-margin-end}; + --padding-top: #{$button-md-padding-top}; + --padding-bottom: #{$button-md-padding-bottom}; + --padding-start: #{$button-md-padding-start}; + --padding-end: #{$button-md-padding-end}; + --height: #{$button-md-height}; + font-family: #{$button-md-font-family}; font-size: #{$button-md-font-size}; font-weight: #{$button-md-font-weight}; letter-spacing: #{$button-md-letter-spacing}; + text-transform: #{$button-md-text-transform}; - - --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function, - background-color $button-md-transition-duration $button-md-transition-timing-function, - color $button-md-transition-duration $button-md-transition-timing-function}; - - --border-radius: #{$button-md-border-radius}; - - --margin-top: #{$button-md-margin-top}; - --margin-bottom: #{$button-md-margin-bottom}; - --margin-start: #{$button-md-margin-start}; - --margin-end: #{$button-md-margin-end}; - - --padding-top: #{$button-md-padding-top}; - --padding-bottom: #{$button-md-padding-bottom}; - --padding-start: #{$button-md-padding-start}; - --padding-end: #{$button-md-padding-end}; - - --height: #{$button-md-height}; } // Material Design Solid Button @@ -74,7 +71,6 @@ :host(.button-round) { --border-radius: #{$button-md-round-border-radius}; - --padding-top: #{$button-md-round-padding-top}; --padding-start: #{$button-md-round-padding-start}; --padding-end: #{$button-md-round-padding-end}; @@ -86,25 +82,23 @@ // -------------------------------------------------- :host(.button-large) { - font-size: #{$button-md-large-font-size}; - --padding-top: #{$button-md-large-padding-top}; --padding-start: #{$button-md-large-padding-start}; --padding-end: #{$button-md-large-padding-end}; --padding-bottom: #{$button-md-large-padding-bottom}; - --height: #{$button-md-large-height}; + + font-size: #{$button-md-large-font-size}; } :host(.button-small) { - font-size: #{$button-md-small-font-size}; - --padding-top: #{$button-md-small-padding-top}; --padding-start: #{$button-md-small-padding-start}; --padding-end: #{$button-md-small-padding-end}; --padding-bottom: #{$button-md-small-padding-bottom}; - --height: #{$button-md-small-height}; + + font-size: #{$button-md-small-font-size}; } diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index 38b6d1b89c..ab3b41519e 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -7,11 +7,11 @@ --ion-color-base: #{ion-color(primary, base)}; --ion-color-contrast: #{ion-color(primary, contrast)}; --ion-color-shade: #{ion-color(primary, shade)}; - --ripple-color: currentColor; display: inline-block; + text-align: center; text-decoration: none; text-overflow: ellipsis; @@ -19,8 +19,6 @@ vertical-align: top; // the better option for most scenarios vertical-align: -webkit-baseline-middle; // the best for those that support it - - text-align: center; } :host([disabled]) { @@ -32,9 +30,9 @@ // -------------------------------------------------- :host(.button-solid) { - color: #{current-color(contrast)}; - --background: #{current-color(base)}; + + color: #{current-color(contrast)}; } @@ -42,10 +40,10 @@ // -------------------------------------------------- :host(.button-outline) { - color: #{current-color(base)}; - --border-color: #{current-color(base)}; --background: transparent; + + color: #{current-color(base)}; } @@ -53,10 +51,10 @@ // -------------------------------------------------- :host(.button-clear) { - color: #{current-color(base)}; - --border-width: 0; --background: transparent; + + color: #{current-color(base)}; } @@ -71,10 +69,11 @@ @include margin-horizontal(0); display: block; - clear: both; width: 100%; + clear: both; + contain: strict; } @@ -114,56 +113,51 @@ @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start)); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); - box-sizing: border-box; - - position: relative; - z-index: 0; display: inline-block; - overflow: hidden; + position: relative; height: var(--height); + transition: var(--transition); + border-width: var(--border-width); border-style: var(--border-style); border-color: var(--border-color); + background: var(--background); + color: inherit; + font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: 1; + + text-align: inherit; text-decoration: inherit; text-overflow: inherit; text-transform: inherit; + white-space: inherit; - color: inherit; - background: var(--background); - box-shadow: var(--box-shadow); - + contain: content; cursor: pointer; opacity: var(--opacity); - + overflow: hidden; + user-select: none; vertical-align: top; // the better option for most scenarios vertical-align: -webkit-baseline-middle; // the best for those that support it - - transition: var(--transition); - - text-align: inherit; - user-select: none; + z-index: 0; + box-sizing: border-box; font-kerning: none; - - contain: content; - appearance: none; } .button-native[disabled] { cursor: default; opacity: .5; - pointer-events: none; } @@ -194,7 +188,6 @@ ::slotted(ion-icon) { font-size: 1.4em; - pointer-events: none; } diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss index f0ae12fa8f..22a20a7e4a 100644 --- a/core/src/components/buttons/buttons.ios.scss +++ b/core/src/components/buttons/buttons.ios.scss @@ -6,17 +6,15 @@ // -------------------------------------------------- ::slotted(*) ion-button { - font-size: #{$toolbar-ios-button-font-size}; - font-weight: 400; - --padding-top: 0; --pading-bottom: 0; --padding-start: 5px; --padding-end: 5px; - --border-radius: #{$toolbar-ios-button-border-radius}; - --height: 32px; + + font-size: #{$toolbar-ios-button-font-size}; + font-weight: 400; } :host-context(.ion-color)::slotted(*) .button { @@ -30,8 +28,8 @@ @include margin-horizontal(null, .3em); font-size: 24px; - line-height: .67; + line-height: .67; pointer-events: none; } @@ -40,8 +38,8 @@ @include margin-horizontal(.4em, null); font-size: 24px; - line-height: .67; + line-height: .67; pointer-events: none; } @@ -50,8 +48,8 @@ @include margin(0); font-size: 31px; - line-height: .67; + line-height: .67; pointer-events: none; } diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss index beff12d029..f0ad55f55f 100644 --- a/core/src/components/buttons/buttons.md.scss +++ b/core/src/components/buttons/buttons.md.scss @@ -9,17 +9,16 @@ } ::slotted(*) ion-button { - font-size: #{$toolbar-md-button-font-size}; - font-weight: 500; - --padding-top: 0; --padding-bottom: 0; --padding-start: 8px; --padding-end: 8px; - --border-radius: #{$toolbar-md-button-border-radius}; --height: 32px; --box-shadow: none; + + font-size: #{$toolbar-md-button-font-size}; + font-weight: 500; } @@ -30,7 +29,6 @@ @include margin-horizontal(null, .3em); font-size: 1.4em; - pointer-events: none; } @@ -39,7 +37,6 @@ @include margin-horizontal(.4em, null); font-size: 1.4em; - pointer-events: none; } @@ -48,7 +45,6 @@ @include margin(0); font-size: 1.8em; - pointer-events: none; } diff --git a/core/src/components/buttons/buttons.scss b/core/src/components/buttons/buttons.scss index 766b8938d8..ace5e4371f 100644 --- a/core/src/components/buttons/buttons.scss +++ b/core/src/components/buttons/buttons.scss @@ -1,12 +1,11 @@ @import "../../themes/ionic.globals"; :host { - z-index: $z-index-toolbar-buttons; - display: block; transform: translateZ(0); + z-index: $z-index-toolbar-buttons; pointer-events: none; } @@ -18,12 +17,10 @@ --margin-bottom: 0; --margin-start: 0; --margin-end: 0; - --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; - --box-shadow: none; pointer-events: auto; diff --git a/core/src/components/card-content/card-content.ios.scss b/core/src/components/card-content/card-content.ios.scss index 7817834fe4..4c9d530111 100644 --- a/core/src/components/card-content/card-content.ios.scss +++ b/core/src/components/card-content/card-content.ios.scss @@ -8,6 +8,7 @@ @include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start); font-size: $card-ios-font-size; + line-height: 1.4; h1 { diff --git a/core/src/components/card-content/card-content.md.scss b/core/src/components/card-content/card-content.md.scss index 5c22b9a8e4..bd7924a6af 100644 --- a/core/src/components/card-content/card-content.md.scss +++ b/core/src/components/card-content/card-content.md.scss @@ -8,6 +8,7 @@ @include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start); font-size: $card-md-font-size; + line-height: $card-md-line-height; h1 { @@ -39,6 +40,7 @@ font-size: 14px; font-weight: normal; + line-height: 1.5; } } diff --git a/core/src/components/card-content/card-content.scss b/core/src/components/card-content/card-content.scss index 4e4187270a..63bd558ae5 100644 --- a/core/src/components/card-content/card-content.scss +++ b/core/src/components/card-content/card-content.scss @@ -4,6 +4,6 @@ // -------------------------------------------------- ion-card-content { - position: relative; display: block; + position: relative; } diff --git a/core/src/components/card-header/card-header.ios.scss b/core/src/components/card-header/card-header.ios.scss index ff9c9e7c40..bf6e48f5eb 100644 --- a/core/src/components/card-header/card-header.ios.scss +++ b/core/src/components/card-header/card-header.ios.scss @@ -10,6 +10,5 @@ :host(.card-header-translucent) { background-color: $card-ios-header-translucent-background-color; - backdrop-filter: $card-ios-header-translucent-filter; } diff --git a/core/src/components/card-header/card-header.scss b/core/src/components/card-header/card-header.scss index ee84f33106..7e99adfbc2 100644 --- a/core/src/components/card-header/card-header.scss +++ b/core/src/components/card-header/card-header.scss @@ -4,10 +4,12 @@ // -------------------------------------------------- :host { - position: relative; display: block; - overflow: hidden; + position: relative; text-overflow: ellipsis; + white-space: nowrap; + + overflow: hidden; } diff --git a/core/src/components/card-subtitle/card-subtitle.ios.scss b/core/src/components/card-subtitle/card-subtitle.ios.scss index 8cfc686fc4..9210731064 100644 --- a/core/src/components/card-subtitle/card-subtitle.ios.scss +++ b/core/src/components/card-subtitle/card-subtitle.ios.scss @@ -5,13 +5,15 @@ // -------------------------------------------------- :host { + --ion-color-base: #{$card-ios-subtitle-color}; + @include margin($card-ios-subtitle-margin-top, $card-ios-subtitle-margin-end, $card-ios-subtitle-margin-bottom, $card-ios-subtitle-margin-start); @include padding($card-ios-subtitle-padding-top, $card-ios-subtitle-padding-end, $card-ios-subtitle-padding-bottom, $card-ios-subtitle-padding-start); font-size: $card-ios-subtitle-font-size; font-weight: $card-ios-subtitle-font-weight; - letter-spacing: $card-ios-subtitle-letter-spacing; - text-transform: $card-ios-subtitle-text-transform; - --ion-color-base: #{$card-ios-subtitle-color}; + letter-spacing: $card-ios-subtitle-letter-spacing; + + text-transform: $card-ios-subtitle-text-transform; } diff --git a/core/src/components/card-subtitle/card-subtitle.md.scss b/core/src/components/card-subtitle/card-subtitle.md.scss index 7d021af556..6ab6821c71 100644 --- a/core/src/components/card-subtitle/card-subtitle.md.scss +++ b/core/src/components/card-subtitle/card-subtitle.md.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- :host { + --ion-color-base: #{$card-md-subtitle-color}; + @include margin($card-md-subtitle-margin-top, $card-md-subtitle-margin-end, $card-md-subtitle-margin-bottom, $card-md-subtitle-margin-start); @include padding($card-md-subtitle-padding-top, $card-md-subtitle-padding-end, $card-md-subtitle-padding-bottom, $card-md-subtitle-padding-start); font-size: $card-md-subtitle-font-size; - - --ion-color-base: #{$card-md-subtitle-color}; } diff --git a/core/src/components/card-subtitle/card-subtitle.scss b/core/src/components/card-subtitle/card-subtitle.scss index 4c1b4b7b72..02efc788b9 100644 --- a/core/src/components/card-subtitle/card-subtitle.scss +++ b/core/src/components/card-subtitle/card-subtitle.scss @@ -4,8 +4,8 @@ // -------------------------------------------------- :host { - position: relative; display: block; + position: relative; color: #{current-color(base)}; } diff --git a/core/src/components/card-title/card-title.ios.scss b/core/src/components/card-title/card-title.ios.scss index 2627430cb1..0858e16aad 100644 --- a/core/src/components/card-title/card-title.ios.scss +++ b/core/src/components/card-title/card-title.ios.scss @@ -6,12 +6,12 @@ :host { @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start); - @include padding($card-ios-title-padding-top, $card-ios-title-padding-end, $card-ios-title-padding-bottom, $card-ios-title-padding-start); + color: #{$card-ios-title-text-color}; + font-size: $card-ios-title-font-size; font-weight: $card-ios-title-font-weight; - line-height: 1.2; - color: #{$card-ios-title-text-color}; + line-height: 1.2; } diff --git a/core/src/components/card-title/card-title.md.scss b/core/src/components/card-title/card-title.md.scss index fb324433af..a5e3db6f5c 100644 --- a/core/src/components/card-title/card-title.md.scss +++ b/core/src/components/card-title/card-title.md.scss @@ -6,11 +6,11 @@ :host { @include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start); - @include padding($card-md-title-padding-top, $card-md-title-padding-end, $card-md-title-padding-bottom, $card-md-title-padding-start); - font-size: $card-md-title-font-size; - line-height: 1.2; - color: #{$card-md-title-text-color}; + + font-size: $card-md-title-font-size; + + line-height: 1.2; } diff --git a/core/src/components/card-title/card-title.scss b/core/src/components/card-title/card-title.scss index 99b8c2fc2d..442f19800e 100644 --- a/core/src/components/card-title/card-title.scss +++ b/core/src/components/card-title/card-title.scss @@ -5,10 +5,12 @@ // -------------------------------------------------- :host { - position: relative; display: block; + position: relative; } :host(.ion-color) { + // TODO can we remove important here + /* stylelint-disable-next-line declaration-no-important */ color: #{current-color(base)} !important; } diff --git a/core/src/components/card/card.ios.scss b/core/src/components/card/card.ios.scss index 73c0db4111..2a46875c25 100755 --- a/core/src/components/card/card.ios.scss +++ b/core/src/components/card/card.ios.scss @@ -5,19 +5,20 @@ // -------------------------------------------------- :host { + --ion-color-base: var(--ion-item-background, transparent); + --ion-color-contrast: #{$card-ios-text-color}; + @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start); @include border-radius($card-ios-border-radius); width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)}); - font-family: $card-ios-font-family; - font-size: $card-ios-font-size; - box-shadow: $card-ios-box-shadow; - transform: translateZ(0); - --ion-color-base: var(--ion-item-background, transparent); - --ion-color-contrast: #{$card-ios-text-color}; + font-family: $card-ios-font-family; + font-size: $card-ios-font-size; + + box-shadow: $card-ios-box-shadow; } ::slotted(*) ion-list { diff --git a/core/src/components/card/card.md.scss b/core/src/components/card/card.md.scss index a65e9ce23f..3f11cc0ec9 100755 --- a/core/src/components/card/card.md.scss +++ b/core/src/components/card/card.md.scss @@ -5,6 +5,9 @@ // -------------------------------------------------- :host { + --ion-color-base: var(--ion-item-background, transparent); + --ion-color-contrast: #{$card-md-text-color}; + @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start); @include border-radius($card-md-border-radius); @@ -12,10 +15,8 @@ font-family: $card-md-font-family; font-size: $card-md-font-size; - box-shadow: $card-md-box-shadow; - --ion-color-base: var(--ion-item-background, transparent); - --ion-color-contrast: #{$card-md-text-color}; + box-shadow: $card-md-box-shadow; } ::slotted(*) ion-list { diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.scss index 15e828a469..d6834068dd 100755 --- a/core/src/components/card/card.scss +++ b/core/src/components/card/card.scss @@ -4,16 +4,17 @@ // -------------------------------------------------- :host { + --ion-card-text: currentColor; + @include font-smoothing(); - position: relative; display: block; - overflow: hidden; + position: relative; - color: #{current-color(contrast)}; background: #{current-color(base)}; + color: #{current-color(contrast)}; - --ion-card-text: currentColor; + overflow: hidden; } :host(.ion-color)::slotted(*) ion-card-title, diff --git a/core/src/components/checkbox/checkbox.ios.scss b/core/src/components/checkbox/checkbox.ios.scss index fd3f63623c..baf1370c1f 100644 --- a/core/src/components/checkbox/checkbox.ios.scss +++ b/core/src/components/checkbox/checkbox.ios.scss @@ -6,11 +6,9 @@ :host { --size: #{$checkbox-ios-icon-size}; - --border-radius: #{$checkbox-ios-icon-border-radius}; --border-width: #{$checkbox-ios-icon-border-width}; --border-style: #{$checkbox-ios-icon-border-style}; - --unchecked-border-color: #{$checkbox-ios-icon-border-color-off}; --unchecked-background: #{$checkbox-ios-background-color-off}; } @@ -30,11 +28,12 @@ width: calc(var(--size) / 6 + 1px); height: calc(var(--size) / 2); + transform: rotate(45deg); + border-width: $checkbox-ios-checkmark-border-width; border-top-width: 0; border-left-width: 0; border-style: $checkbox-ios-checkmark-border-style; - transform: rotate(45deg); } @@ -44,7 +43,6 @@ // TODO: .item-ios.item-checkbox-disabled ion-labe :host(.checkbox-disabled) { opacity: $checkbox-ios-disabled-opacity; - pointer-events: none; } @@ -56,9 +54,8 @@ @include border-radius(50%); @include position(-9px, null, null, -9px); - position: absolute; - display: block; + position: absolute; width: 36px; height: 36px; @@ -66,7 +63,6 @@ background: $checkbox-ios-background-color-focused; content: ""; - opacity: .2; } @@ -78,8 +74,8 @@ :host(.in-item) { @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start); - position: static; display: block; + position: static; } :host(.in-item[slot="end"]) { diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss index 3887447254..828108870b 100644 --- a/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/core/src/components/checkbox/checkbox.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS Checkbox diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss index 3e65682c8d..7b37219477 100644 --- a/core/src/components/checkbox/checkbox.md.scss +++ b/core/src/components/checkbox/checkbox.md.scss @@ -6,14 +6,11 @@ :host { --size: #{$checkbox-md-icon-size}; - --border-radius: calc(var(--size) * .125); --border-width: #{$checkbox-md-icon-border-width}; --border-style: #{$checkbox-md-icon-border-style}; - --unchecked-border-color: #{$checkbox-md-icon-border-color-off}; --unchecked-background: #{$checkbox-md-icon-background-color-off}; - --transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing}; } @@ -32,11 +29,12 @@ width: calc(var(--size) * .3125); height: calc(var(--size) * .625); + transform: rotate(45deg); + border-width: calc(var(--size) * .125); border-top-width: 0; border-left-width: 0; border-style: $checkbox-md-icon-checkmark-style; - transform: rotate(45deg); } @@ -48,7 +46,6 @@ :host(.checkbox-disabled) { opacity: $checkbox-md-disabled-opacity; - pointer-events: none; } @@ -60,9 +57,8 @@ @include border-radius(50%); @include position(-12px, null, null, -12px); - position: absolute; - display: block; + position: absolute; width: 36px; height: 36px; @@ -70,7 +66,6 @@ background: $checkbox-md-background-color-focused; content: ""; - opacity: .2; } @@ -81,8 +76,8 @@ :host(.in-item) { @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start); - position: static; display: block; + position: static; } :host(.in-item[slot="end"]) { diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss index 89503447d0..d450cc6865 100644 --- a/core/src/components/checkbox/checkbox.md.vars.scss +++ b/core/src/components/checkbox/checkbox.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design Checkbox diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss index f139fef86f..d88792461e 100644 --- a/core/src/components/checkbox/checkbox.scss +++ b/core/src/components/checkbox/checkbox.scss @@ -6,15 +6,13 @@ :host { --ion-color-base: #{ion-color(primary, base)}; --ion-color-contrast: #{ion-color(primary, contrast)}; - --background: var(--unchecked-backgroud); --border-color: var(--unchecked-border-color); - --checked-border-color: #{current-color(base)}; --checked-background: #{current-color(base)}; - position: relative; display: inline-block; + position: relative; } :host(.checkbox-checked) { @@ -41,6 +39,7 @@ input { border-width: var(--border-width); border-style: var(--border-style); border-color: var(--border-color); + background-color: var(--background); contain: strict; @@ -48,6 +47,7 @@ input { .checkbox-inner { border-color: #{current-color(contrast)}; + opacity: 0; } diff --git a/core/src/components/chip-button/chip-button.scss b/core/src/components/chip-button/chip-button.scss index 36f279300e..a092d7144f 100644 --- a/core/src/components/chip-button/chip-button.scss +++ b/core/src/components/chip-button/chip-button.scss @@ -31,10 +31,11 @@ height: var(--size); border: 0; - outline: none; - color: var(--color); - background: var(--background); + outline: none; + + background: var(--background); + color: var(--color); appearance: none; } diff --git a/core/src/components/chip-icon/chip-icon.scss b/core/src/components/chip-icon/chip-icon.scss index 2058dfcdfb..d2f24b6587 100644 --- a/core/src/components/chip-icon/chip-icon.scss +++ b/core/src/components/chip-icon/chip-icon.scss @@ -18,6 +18,7 @@ } ion-icon { - font-size: var(--icon-size, 18px); color: var(--ion-color-contrast); + + font-size: var(--icon-size, 18px); } diff --git a/core/src/components/chip/chip.ios.scss b/core/src/components/chip/chip.ios.scss index a85c018d77..a5a4345cb2 100644 --- a/core/src/components/chip/chip.ios.scss +++ b/core/src/components/chip/chip.ios.scss @@ -5,17 +5,16 @@ // -------------------------------------------------- :host { - @include border-radius($chip-ios-border-radius); + --ion-color-base: #{$chip-ios-background-color}; + --ion-color-contrast: #{$chip-ios-text-color}; + @include border-radius($chip-ios-border-radius); @include margin($chip-ios-margin-top, $chip-ios-margin-end, $chip-ios-margin-bottom, $chip-ios-margin-start); height: $chip-ios-height; font-family: $chip-ios-font-family; font-size: $chip-ios-font-size; - - --ion-color-base: #{$chip-ios-background-color}; - --ion-color-contrast: #{$chip-ios-text-color}; } ::slotted(*) ion-label { @@ -23,9 +22,8 @@ } ::slotted(ion-icon) { - color: $chip-ios-icon-fill-color; - background-color: $chip-ios-icon-background-color; + color: $chip-ios-icon-fill-color; } ::slotted(*) ion-avatar { diff --git a/core/src/components/chip/chip.md.scss b/core/src/components/chip/chip.md.scss index bf93239ada..3be1985011 100644 --- a/core/src/components/chip/chip.md.scss +++ b/core/src/components/chip/chip.md.scss @@ -5,17 +5,16 @@ // -------------------------------------------------- :host { - @include border-radius($chip-md-border-radius); + --ion-color-base: #{$chip-md-background-color}; + --ion-color-contrast: #{$chip-md-text-color}; + @include border-radius($chip-md-border-radius); @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start); height: $chip-md-height; font-family: $chip-md-font-family; font-size: $chip-md-font-size; - - --ion-color-base: #{$chip-md-background-color}; - --ion-color-contrast: #{$chip-md-text-color}; } ::slotted(*) ion-label { @@ -23,9 +22,8 @@ } ::slotted(ion-icon) { - color: $chip-md-icon-fill-color; - background-color: $chip-md-icon-background-color; + color: $chip-md-icon-fill-color; } ::slotted(*) ion-avatar { diff --git a/core/src/components/chip/chip.md.vars.scss b/core/src/components/chip/chip.md.vars.scss index 91c4794e2a..373abbbd95 100644 --- a/core/src/components/chip/chip.md.vars.scss +++ b/core/src/components/chip/chip.md.vars.scss @@ -31,7 +31,7 @@ $chip-md-font-size: 13px !default; $chip-md-text-color: $text-color-step-150 !default; /// @prop - Background color alpha of the chip -$chip-md-background-color-alpha: .1 !default +$chip-md-background-color-alpha: .1 !default; /// @prop - Background color of the chip $chip-md-background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $chip-md-background-color-alpha) !default; diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss index d9cf938d40..d288744f67 100644 --- a/core/src/components/chip/chip.scss +++ b/core/src/components/chip/chip.scss @@ -9,16 +9,16 @@ @include font-smoothing(); - box-sizing: border-box; display: inline-flex; align-items: center; align-self: center; + background-color: var(--ion-color-base); + color: var(--ion-color-contrast); + font-weight: normal; - color: var(--ion-color-contrast); - background-color: var(--ion-color-base); - vertical-align: middle; + box-sizing: border-box; } diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss index f2b0f4cabf..cd6e3c32ff 100644 --- a/core/src/components/content/content.scss +++ b/core/src/components/content/content.scss @@ -6,29 +6,30 @@ :host { --ion-color-base: #{$background-color}; --ion-color-contrast: #{$text-color}; - --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; - --keyboard-offset: 0; - position: relative; display: block; + position: relative; flex: 1; width: 100%; height: 100%; - color: #{current-color(contrast)}; + /* stylelint-disable */ + margin: 0 !important; + + padding: 0 !important; + /* stylelint-enable */ + background-color: #{current-color(base)}; + color: #{current-color(contrast)}; contain: layout size style; - - margin: 0 !important; // scss-lint:disable all - padding: 0 !important; // scss-lint:disable all } :host(.ion-color-outer), @@ -43,6 +44,5 @@ height: 100%; min-height: 100%; - -webkit-margin-collapse: discard; } diff --git a/core/src/components/datetime/datetime.ios.vars.scss b/core/src/components/datetime/datetime.ios.vars.scss index 1b8d1c9dcd..e07aa0fd31 100644 --- a/core/src/components/datetime/datetime.ios.vars.scss +++ b/core/src/components/datetime/datetime.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS Datetime diff --git a/core/src/components/datetime/datetime.md.vars.scss b/core/src/components/datetime/datetime.md.vars.scss index 29f4026433..8a7a9bb8f0 100644 --- a/core/src/components/datetime/datetime.md.vars.scss +++ b/core/src/components/datetime/datetime.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design Datetime diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index 8cf00957e7..5fa2707d1a 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -4,9 +4,9 @@ // -------------------------------------------------- ion-datetime { + display: flex; position: relative; - display: flex; overflow: hidden; } @@ -15,23 +15,25 @@ ion-datetime { } .datetime-text { - overflow: hidden; - flex: 1; min-width: $datetime-text-min-width; min-height: $datetime-text-min-height; font-size: inherit; + line-height: $datetime-text-line-height; + text-overflow: ellipsis; + white-space: nowrap; + + overflow: hidden; } .datetime-disabled, .item-datetime-disabled ion-label { opacity: $datetime-disabled-opacity; - pointer-events: none; } diff --git a/core/src/components/fab-button/fab-button.ios.scss b/core/src/components/fab-button/fab-button.ios.scss index e0f46e6cbf..b6c1b52e3d 100755 --- a/core/src/components/fab-button/fab-button.ios.scss +++ b/core/src/components/fab-button/fab-button.ios.scss @@ -12,7 +12,6 @@ :host(.activated) { --background: #{current-color(tint)}; --box-shadow: #{$fab-ios-box-shadow-activated}; - --transform: #{$fab-ios-transform}; --transition: #{$fab-ios-transition-activated}; } @@ -42,7 +41,6 @@ :host(.fab-translucent) { --background: #{$fab-ios-translucent-background-color}; - --backdrop-filter: #{$fab-ios-translucent-filter}; } diff --git a/core/src/components/fab-button/fab-button.md.scss b/core/src/components/fab-button/fab-button.md.scss index e4aecde95d..3607b4a6ce 100755 --- a/core/src/components/fab-button/fab-button.md.scss +++ b/core/src/components/fab-button/fab-button.md.scss @@ -6,7 +6,6 @@ :host { --box-shadow: #{$fab-md-box-shadow}; - --transition: #{box-shadow $fab-button-md-transition-duration $fab-button-md-transition-timing-function, background-color $fab-button-md-transition-duration $fab-button-md-transition-timing-function, color $fab-button-md-transition-duration $fab-button-md-transition-timing-function}; diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss index bfabaeca07..b616c0b068 100755 --- a/core/src/components/fab-button/fab-button.scss +++ b/core/src/components/fab-button/fab-button.scss @@ -7,18 +7,17 @@ --ion-color-base: #{ion-color(primary, base)}; --ion-color-contrast: #{ion-color(primary, contrast)}; --ion-color-tint: #{ion-color(primary, tint)}; - --size: #{$fab-size}; --background: #{current-color(base)}; --transition: background-color, opacity 100ms linear; - --padding-start: calc((#{$fab-size} - var(--size)) / 2); --padding-end: calc((#{$fab-size} - var(--size)) / 2); --padding-top: calc((#{$fab-size} - var(--size)) / 2); --padding-bottom: calc((#{$fab-size} - var(--size)) / 2); - font-size: 14px; color: #{current-color(contrast)}; + + font-size: 14px; } :host(.activated) { @@ -29,39 +28,40 @@ @include border-radius(50%); @include margin(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); - position: relative; - z-index: 0; display: block; - overflow: hidden; + position: relative; width: var(--size); height: var(--size); - border: 0; - font-size: inherit; - font-weight: inherit; - line-height: var(--size); - text-overflow: ellipsis; - text-transform: none; - white-space: nowrap; - color: inherit; - background: var(--background); - box-shadow: var(--box-shadow); - - cursor: pointer; - transform: var(--transform); + transition: var(--transition); - text-align: center; + border: 0; + background: var(--background); background-clip: padding-box; + color: inherit; - font-kerning: none; - user-select: none; + font-size: inherit; + font-weight: inherit; + line-height: var(--size); + + text-align: center; + text-overflow: ellipsis; + text-transform: none; + + white-space: nowrap; + + box-shadow: var(--box-shadow); contain: strict; - + cursor: pointer; + overflow: hidden; + user-select: none; + z-index: 0; + font-kerning: none; appearance: none; &:active, @@ -77,16 +77,15 @@ .fab-button-inner { @include position(0, 0, null, 0); - position: absolute; display: flex; + position: absolute; flex-flow: row nowrap; flex-shrink: 0; align-items: center; - justify-content: center; - align-items: center; justify-content: center; + justify-content: center; height: 100%; @@ -108,31 +107,35 @@ .fab-button-close-icon { @include position(0, 0, null, 0); - position: absolute; display: flex; + position: absolute; align-items: center; justify-content: center; height: 100%; - opacity: 0; transform: scale(.4) rotateZ(-45deg); + transition: all ease-in-out 300ms; transition-property: transform, opacity; + + opacity: 0; } // FAB Animation // -------------------------------------------------- :host(.fab-button-close-active) .fab-button-close-icon { - opacity: 1; transform: scale(1) rotateZ(0deg); + + opacity: 1; } :host(.fab-button-close-active) .fab-button-inner { - opacity: 0; transform: scale(.4) rotateZ(45deg); + + opacity: 0; } ion-ripple-effect { diff --git a/core/src/components/fab-list/fab-list.scss b/core/src/components/fab-list/fab-list.scss index 1c966eb149..792c6d65dd 100644 --- a/core/src/components/fab-list/fab-list.scss +++ b/core/src/components/fab-list/fab-list.scss @@ -6,9 +6,9 @@ :host { @include margin($fab-size + $fab-list-margin, 0); + display: none; position: absolute; top: 0; - display: none; flex-direction: column; align-items: center; @@ -22,11 +22,12 @@ } ::slotted(.fab-button-in-list) { - opacity: 0; - visibility: hidden; + --size: #{$fab-mini-size}; + transform: scale(0); - --size: #{$fab-mini-size}; + opacity: 0; + visibility: hidden; } :host(.fab-list-side-top) ::slotted(.fab-button-in-list), @@ -42,9 +43,10 @@ } ::slotted(.fab-button-in-list.fab-button-show) { + transform: scale(1); + opacity: 1; visibility: visible; - transform: scale(1); } diff --git a/core/src/components/fab-list/fab-list.vars.scss b/core/src/components/fab-list/fab-list.vars.scss index 1a8f9714db..eed9c736fa 100644 --- a/core/src/components/fab-list/fab-list.vars.scss +++ b/core/src/components/fab-list/fab-list.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals"; - @import "../fab-button/fab-button.vars"; // Floating Action Button List diff --git a/core/src/components/fab/fab.scss b/core/src/components/fab/fab.scss index 29ac4c49c6..29aa6bd5de 100644 --- a/core/src/components/fab/fab.scss +++ b/core/src/components/fab/fab.scss @@ -5,6 +5,7 @@ :host { position: absolute; + z-index: $z-index-fixed-content; } diff --git a/core/src/components/fab/fab.vars.scss b/core/src/components/fab/fab.vars.scss index 4f5e4dc46f..13e2a09493 100644 --- a/core/src/components/fab/fab.vars.scss +++ b/core/src/components/fab/fab.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals"; - @import "../fab-button/fab-button.vars"; // Floating Action Button Container diff --git a/core/src/components/footer/footer.scss b/core/src/components/footer/footer.scss index bb9bfe8cde..192379dff3 100644 --- a/core/src/components/footer/footer.scss +++ b/core/src/components/footer/footer.scss @@ -4,11 +4,12 @@ // -------------------------------------------------- ion-footer { - position: relative; - z-index: $z-index-toolbar; display: block; + position: relative; order: 1; width: 100%; + + z-index: $z-index-toolbar; } diff --git a/core/src/components/grid/grid.mixins.scss b/core/src/components/grid/grid.mixins.scss index a356cc8a63..c1ddaf1908 100644 --- a/core/src/components/grid/grid.mixins.scss +++ b/core/src/components/grid/grid.mixins.scss @@ -9,13 +9,13 @@ // --------------------------------------------------------------------------------- @mixin make-grid-widths($widths: $grid-widths, $breakpoints: $screen-breakpoints) { - max-width: 100%; - @each $breakpoint, $width in $widths { @include media-breakpoint-up($breakpoint, $breakpoints) { width: $width; } } + + max-width: 100%; } @@ -26,6 +26,7 @@ @each $breakpoint in map-keys($paddings) { @include media-breakpoint-up($breakpoint) { $padding: map-get($paddings, $breakpoint); + @include padding($padding); } } diff --git a/core/src/components/header/header.scss b/core/src/components/header/header.scss index e20ec2ca08..43ce41776c 100644 --- a/core/src/components/header/header.scss +++ b/core/src/components/header/header.scss @@ -4,11 +4,12 @@ // -------------------------------------------------- ion-header { - position: relative; - z-index: $z-index-toolbar; display: block; + position: relative; order: -1; width: 100%; + + z-index: $z-index-toolbar; } diff --git a/core/src/components/hide-when/hide-when.scss b/core/src/components/hide-when/hide-when.scss index 1e231d4682..61dd22c0a3 100644 --- a/core/src/components/hide-when/hide-when.scss +++ b/core/src/components/hide-when/hide-when.scss @@ -3,6 +3,6 @@ ion-hide-when.show-content { } ion-hide-when.hide-content { - // scss-lint:disable ImportantRule + /* stylelint-disable-next-line declaration-no-important */ display: none !important; } diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss index 7eeee53d16..a3f6897f85 100644 --- a/core/src/components/input/input.ios.scss +++ b/core/src/components/input/input.ios.scss @@ -2,15 +2,14 @@ @import "./input.ios.vars"; :host { - font-family: $input-ios-font-family; - font-size: $input-ios-font-size; - --padding-top: #{$input-ios-padding-top}; --padding-end: #{$input-ios-padding-end}; --padding-bottom: #{$input-ios-padding-bottom}; --padding-start: #{$input-ios-padding-start}; - --placeholder-color: #{$input-ios-placeholder-color}; + + font-family: $input-ios-font-family; + font-size: $input-ios-font-size; } .input-clear-icon { diff --git a/core/src/components/input/input.ios.vars.scss b/core/src/components/input/input.ios.vars.scss index c810a23493..e29dce4d5a 100644 --- a/core/src/components/input/input.ios.vars.scss +++ b/core/src/components/input/input.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS Input diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index 9260608d7c..cb99e1269a 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -6,15 +6,14 @@ // -------------------------------------------------- :host { - font-family: $input-md-font-family; - font-size: $input-md-font-size; - --padding-top: #{$input-md-padding-top}; --padding-end: #{$input-md-padding-end}; --padding-bottom: #{$input-md-padding-bottom}; --padding-start: #{$input-md-padding-start}; - --placeholder-color: #{$input-md-placeholder-color}; + + font-family: $input-md-font-family; + font-size: $input-md-font-size; } diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss index 29192b51a7..880d898f96 100644 --- a/core/src/components/input/input.md.vars.scss +++ b/core/src/components/input/input.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design Input diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 262ed72f9f..2d378e22e7 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -5,19 +5,16 @@ :host { --placeholder-weight: inherit; - --padding-top: 0; --padding-end: 0; --padding-bottom: 0; --padding-start: 0; - --border-radius: 0; - position: relative; display: flex; + position: relative; flex: 1; - align-items: center; width: 100%; @@ -29,10 +26,8 @@ .native-input { @include border-radius(var(--border-radius)); - @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); - box-sizing: border-box; display: inline-block; flex: 1; @@ -40,23 +35,25 @@ width: 100%; border: 0; + outline: none; - font-family: inherit; - font-size: inherit; - font-weight: inherit; - letter-spacing: inherit; background: transparent; - font-kerning: inherit; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + letter-spacing: inherit; + box-sizing: border-box; + font-kerning: inherit; appearance: none; &::placeholder { - font-family: inherit; - - font-weight: var(--placeholder-weight); color: var(--placeholder-color); + + font-family: inherit; + font-weight: var(--placeholder-weight); } } @@ -106,7 +103,6 @@ background-repeat: no-repeat; visibility: hidden; - appearance: none; &:active, diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss index 4feaa75ef5..9ea299dacc 100644 --- a/core/src/components/item-divider/item-divider.ios.scss +++ b/core/src/components/item-divider/item-divider.ios.scss @@ -5,6 +5,9 @@ // -------------------------------------------------- :host { + --ion-color-base: #{$item-ios-divider-background}; + --ion-color-contrast: #{$item-ios-divider-color}; + @include padding-horizontal($item-ios-divider-padding-start, null); @include safe-area-padding-horizontal($item-ios-divider-padding-start, null); @include border-radius(0); @@ -13,9 +16,6 @@ font-family: $item-ios-divider-font-family; font-size: $item-ios-divider-font-size; - - --ion-color-base: #{$item-ios-divider-background}; - --ion-color-contrast: #{$item-ios-divider-color}; } .item-divider-inner { @@ -69,18 +69,22 @@ font-size: 14px; font-weight: normal; + line-height: normal; } ::slotted(p) { @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start); - overflow: inherit; + color: $item-ios-paragraph-text-color; font-size: $item-ios-paragraph-font-size; + line-height: normal; + text-overflow: inherit; - color: $item-ios-paragraph-text-color; + + overflow: inherit; } ::slotted(h2:last-child) diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss index 06c3c69f67..0943739d36 100644 --- a/core/src/components/item-divider/item-divider.ios.vars.scss +++ b/core/src/components/item-divider/item-divider.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS Item Divider diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss index 350a39ed7f..092683c39d 100644 --- a/core/src/components/item-divider/item-divider.md.scss +++ b/core/src/components/item-divider/item-divider.md.scss @@ -5,15 +5,15 @@ // -------------------------------------------------- :host { + --ion-color-base: #{$item-md-divider-background}; + --ion-color-contrast: #{$item-md-divider-color}; + @include padding-horizontal($item-md-divider-padding-start, null); border-bottom: $item-md-divider-border-bottom; font-family: $item-md-divider-font-family; font-size: $item-md-divider-font-size; - - --ion-color-base: #{$item-md-divider-background}; - --ion-color-contrast: #{$item-md-divider-color}; } .item-divider-inner { @@ -73,16 +73,20 @@ font-size: 14px; font-weight: normal; + line-height: normal; } ::slotted(p) { @include margin(0, 0, 2px); - overflow: inherit; + color: $item-md-paragraph-text-color; font-size: 14px; + line-height: normal; + text-overflow: inherit; - color: $item-md-paragraph-text-color; + + overflow: inherit; } diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss index 17c1cc1abf..fe3611aad8 100644 --- a/core/src/components/item-divider/item-divider.md.vars.scss +++ b/core/src/components/item-divider/item-divider.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design Item Divider diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index 2cae1247c8..ec4fc2a8b8 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -9,21 +9,20 @@ @include margin(0); @include padding(0); - box-sizing: border-box; - - z-index: $z-index-item-divider; display: flex; - overflow: hidden; align-items: center; justify-content: space-between; width: 100%; - min-height: $item-divider-min-height; - color: #{current-color(contrast)}; background-color: #{current-color(base)}; + color: #{current-color(contrast)}; + + overflow: hidden; + z-index: $z-index-item-divider; + box-sizing: border-box; } :host([sticky]) { @@ -36,7 +35,6 @@ @include padding(0); display: flex; - overflow: hidden; flex: 1; flex-direction: inherit; @@ -46,11 +44,12 @@ min-height: inherit; border: 0; + + overflow: hidden; } .item-divider-wrapper { display: flex; - overflow: hidden; flex: 1; flex-direction: inherit; @@ -58,4 +57,6 @@ align-self: stretch; text-overflow: ellipsis; + + overflow: hidden; } diff --git a/core/src/components/item-option/item-option.ios.scss b/core/src/components/item-option/item-option.ios.scss index 988b649ba3..c970252b8b 100644 --- a/core/src/components/item-option/item-option.ios.scss +++ b/core/src/components/item-option/item-option.ios.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- :host { - font-size: $item-option-button-ios-font-size; - --ion-color-base: #{$item-option-button-ios-background-color}; --ion-color-contrast: #{$item-option-button-ios-text-color}; + + font-size: $item-option-button-ios-font-size; } :host(.in-list.item-options-end:last-child) { diff --git a/core/src/components/item-option/item-option.md.scss b/core/src/components/item-option/item-option.md.scss index 7416c5a4e9..6e2bf47857 100644 --- a/core/src/components/item-option/item-option.md.scss +++ b/core/src/components/item-option/item-option.md.scss @@ -5,10 +5,11 @@ // -------------------------------------------------- :host { - font-size: $item-option-button-md-font-size; - font-weight: 500; - text-transform: uppercase; - --ion-color-base: #{$item-option-button-md-background-color}; --ion-color-contrast: #{$item-option-button-md-text-color}; + + font-size: $item-option-button-md-font-size; + font-weight: 500; + + text-transform: uppercase; } diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss index 908393f849..f83b98fe21 100644 --- a/core/src/components/item-option/item-option.scss +++ b/core/src/components/item-option/item-option.scss @@ -14,15 +14,17 @@ height: 100%; border: 0; + outline: none; + + background: #{current-color(base)}; + color: inherit; + font-family: inherit; font-size: inherit; font-weight: inherit; + letter-spacing: inherit; - color: inherit; - - background: #{current-color(base)}; - appearance: none; } @@ -42,6 +44,7 @@ font-family: inherit; font-size: inherit; font-weight: inherit; + letter-spacing: inherit; } diff --git a/core/src/components/item-options/item-options.ios.vars.scss b/core/src/components/item-options/item-options.ios.vars.scss index cd489829bb..3f465ef332 100644 --- a/core/src/components/item-options/item-options.ios.vars.scss +++ b/core/src/components/item-options/item-options.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS Item Options diff --git a/core/src/components/item-options/item-options.md.vars.scss b/core/src/components/item-options/item-options.md.vars.scss index ee13de74fe..dd746708d0 100644 --- a/core/src/components/item-options/item-options.md.vars.scss +++ b/core/src/components/item-options/item-options.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design Item Options diff --git a/core/src/components/item-options/item-options.scss b/core/src/components/item-options/item-options.scss index 19d8561ae3..c28d3645b2 100644 --- a/core/src/components/item-options/item-options.scss +++ b/core/src/components/item-options/item-options.scss @@ -4,19 +4,11 @@ // -------------------------------------------------- ion-item-options { - position: absolute; - z-index: $z-index-item-options; - display: none; - - height: 100%; - - font-size: 14px; - @include multi-dir() { - // scss-lint:disable PropertySpelling + /* stylelint-disable property-blacklist */ top: 0; - right: 0; + /* stylelint-enable property-blacklist */ } @include ltr() { @@ -27,14 +19,24 @@ ion-item-options { justify-content: flex-start; &:not(.item-options-end) { - // scss-lint:disable PropertySpelling + /* stylelint-disable property-blacklist */ right: auto; left: 0; + /* stylelint-enable property-blacklist */ justify-content: flex-end; } } + display: none; + position: absolute; + + height: 100%; + + font-size: 14px; + + z-index: $z-index-item-options; + &.hydrated { visibility: hidden; } @@ -42,9 +44,10 @@ ion-item-options { .item-options-start { @include multi-dir() { - // scss-lint:disable PropertySpelling + /* stylelint-disable property-blacklist */ right: auto; left: 0; + /* stylelint-enable property-blacklist */ } @include ltr() { diff --git a/core/src/components/item-sliding/item-sliding.scss b/core/src/components/item-sliding/item-sliding.scss index 75ab7eb512..29cff9d0f5 100644 --- a/core/src/components/item-sliding/item-sliding.scss +++ b/core/src/components/item-sliding/item-sliding.scss @@ -4,33 +4,31 @@ // -------------------------------------------------- ion-item-sliding { - position: relative; display: block; - overflow: hidden; + position: relative; width: 100%; + + overflow: hidden; } .item-sliding-active-slide .item { position: relative; - z-index: $z-index-item-options + 1; - background: $item-background-color; - opacity: 1; transition: transform 500ms cubic-bezier(.36, .66, .04, 1); - pointer-events: none; + background: $item-background-color; + opacity: 1; + z-index: $z-index-item-options + 1; + pointer-events: none; will-change: transform; } .item-sliding-active-swipe-end .item-options-end .item-option-expandable { - transition-duration: .6s; - transition-property: padding-left; - @include multi-dir() { - // scss-lint:disable PropertySpelling + /* stylelint-disable-next-line property-blacklist */ padding-left: 90%; } @@ -41,14 +39,14 @@ ion-item-sliding { @include rtl() { order: -1; } + + transition-duration: .6s; + transition-property: padding-left; } .item-sliding-active-swipe-start .item-options-start .item-option-expandable { - transition-duration: .6s; - transition-property: padding-right; - @include multi-dir() { - // scss-lint:disable PropertySpelling + /* stylelint-disable-next-line property-blacklist */ padding-right: 90%; } @@ -59,4 +57,7 @@ ion-item-sliding { @include rtl() { order: 1; } + + transition-duration: .6s; + transition-property: padding-right; } diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index c8cb9acf95..ef60296587 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -5,20 +5,17 @@ // -------------------------------------------------- :host { - font-family: $item-ios-font-family; - - font-size: $item-ios-font-size; - --ion-color-base: var(--ion-item-background, transparent); --ion-color-contrast: #{$item-ios-text-color}; --ion-color-tint: #{$item-ios-background-color-active}; --ion-color-shade: #{$item-ios-border-bottom-color}; - --transition: background-color 200ms linear; - --padding-start: #{$item-ios-padding-start}; --inner-padding-end: #{$item-ios-padding-end / 2}; --inner-border-width: #{0 0 $item-ios-border-bottom-width 0}; + + font-family: $item-ios-font-family; + font-size: $item-ios-font-size; } :host(.activated) { @@ -85,14 +82,13 @@ // -------------------------------------------------- ::slotted(.button-small) { - font-size: 13px; - --padding-top: 0; --padding-bottom: 0; --padding-start: .5em; --padding-end: .5em; - --height: 24px; + + font-size: 13px; } // TODO @@ -123,9 +119,9 @@ // -------------------------------------------------- .item-detail-icon { - font-size: 20px; - color: var(--detail-push-color); + + font-size: 20px; } diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 310667b6a1..d811d99bf1 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -9,17 +9,15 @@ --ion-color-contrast: #{$item-md-text-color}; --ion-color-tint: #{$item-md-background-color-active}; --ion-color-shade: #{$item-md-border-bottom-color}; - --transition: background-color 300ms cubic-bezier(.4, 0, .2, 1); - --padding-start: #{$item-md-padding-start}; --inner-padding-end: #{$item-md-padding-end / 2}; - --padding-start: #{$item-md-padding-start}; font-family: $item-md-font-family; font-size: $item-md-font-size; font-weight: normal; + text-transform: none; } @@ -58,9 +56,9 @@ // -------------------------------------------------- .item-detail-icon { - font-size: 20px; - color: var(--detail-push-color); + + font-size: 20px; } @@ -103,14 +101,13 @@ // -------------------------------------------------- ::slotted(.button-small-md) { - font-size: 12px; - --padding-top: 0; --padding-bottom: 0; --padding-start: .6em; --padding-end: .6em; - --height: 25px; + + font-size: 12px; } diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 92764eb79c..23514d555f 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -9,42 +9,34 @@ --background-active: #{current-color(tint)}; --color: #{current-color(contrast)}; --detail-push-color: #{current-color(shade)}; - --border-radius: 0; --border-width: 0; --border-style: solid; --border-color: #{current-color(shade)}; - --inner-border-width: 0; - --padding-top: 0; --padding-bottom: 0; --padding-end: 0; --padding-start: 0; - --inner-padding-top: 0; --inner-padding-bottom: 0; --inner-padding-start: 0; --inner-padding-end: 0; - --box-shadow: none; --inner-box-shadow: none; - --highlight-color-focus: #{ion-color(primary, base)}; --highlight-color-valid: #{ion-color(success, base)}; --highlight-color-invalid: #{ion-color(danger, base)}; - --highlight-height: 2px; @include font-smoothing(); - box-sizing: border-box; - display: block; - text-decoration: none; - color: #{current-color(contrast)}; + + text-decoration: none; + box-sizing: border-box; } :host(.activated) { @@ -54,7 +46,6 @@ :host(.item-disabled) { cursor: default; opacity: .3; - pointer-events: none; } @@ -62,14 +53,11 @@ .item-native { @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); @include border-radius(var(--border-radius)); - @include margin(0); @include text-align(initial); - box-sizing: border-box; - position: relative; display: flex; - overflow: hidden; + position: relative; align-items: center; justify-content: space-between; @@ -77,24 +65,28 @@ width: 100%; min-height: var(--min-height); + transition: var(--transition); + border-width: var(--border-width); border-style: var(--border-style); border-color: var(--border-color); outline: none; + + background-color: var(--background); + color: inherit; + font-family: inherit; font-size: inherit; font-weight: inherit; + text-decoration: inherit; text-transform: inherit; - color: inherit; - background-color: var(--background); box-shadow: var(--box-shadow); - cursor: pointer; - - transition: var(--transition); + overflow: hidden; + box-sizing: border-box; } .item-state { @@ -109,10 +101,7 @@ @include margin(0); @include padding(var(--inner-padding-top), var(--inner-padding-end), var(--inner-padding-bottom), var(--inner-padding-start)); - box-sizing: border-box; - display: flex; - overflow: hidden; flex: 1; flex-direction: inherit; @@ -126,12 +115,12 @@ border-color: var(--border-color); box-shadow: var(--inner-box-shadow); + overflow: hidden; + box-sizing: border-box; } .input-wrapper { - box-sizing: border-box; display: flex; - overflow: hidden; flex: 1; flex-direction: inherit; @@ -139,6 +128,9 @@ align-self: stretch; text-overflow: ellipsis; + + overflow: hidden; + box-sizing: border-box; } :host([vertical-align-top]), diff --git a/core/src/components/item/item.vars.scss b/core/src/components/item/item.vars.scss index bc91617920..eafdd9784a 100644 --- a/core/src/components/item/item.vars.scss +++ b/core/src/components/item/item.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals"; - @import "./item.mixins"; // Item diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss index 64a4386796..576b76aefb 100644 --- a/core/src/components/label/label.ios.scss +++ b/core/src/components/label/label.ios.scss @@ -12,6 +12,7 @@ :host([text-wrap]) { font-size: $label-ios-text-wrap-font-size; + line-height: $label-ios-text-wrap-line-height; } @@ -64,17 +65,20 @@ font-size: 14px; font-weight: normal; + line-height: normal; } ::slotted(*) p { @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start); - overflow: inherit; - font-size: $item-ios-paragraph-font-size; + line-height: normal; + text-overflow: inherit; + + overflow: inherit; } ::slotted(p) { diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss index 7fe2942ad3..88791b62c1 100644 --- a/core/src/components/label/label.ios.vars.scss +++ b/core/src/components/label/label.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS Label diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss index e4f4b0361f..173ffe3142 100644 --- a/core/src/components/label/label.md.scss +++ b/core/src/components/label/label.md.scss @@ -12,6 +12,7 @@ :host([text-wrap]) { font-size: $label-md-text-wrap-font-size; + line-height: $label-md-text-wrap-line-height; } @@ -74,17 +75,20 @@ font-size: 14px; font-weight: normal; + line-height: normal; } ::slotted(*) p { @include margin(0, 0, 2px); - overflow: inherit; - font-size: 14px; + line-height: normal; + text-overflow: inherit; + + overflow: inherit; } ::slotted(p) { diff --git a/core/src/components/label/label.md.vars.scss b/core/src/components/label/label.md.vars.scss index a12e3b5338..663a0ed7f7 100644 --- a/core/src/components/label/label.md.vars.scss +++ b/core/src/components/label/label.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design Label diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss index f2fb8d3c30..301d1c738a 100644 --- a/core/src/components/label/label.scss +++ b/core/src/components/label/label.scss @@ -9,18 +9,20 @@ @include margin(0); - box-sizing: border-box; - display: block; - overflow: hidden; flex: 1; + color: #{current-color(base)}; + font-size: inherit; + text-overflow: ellipsis; + white-space: nowrap; - color: #{current-color(base)}; + overflow: hidden; + box-sizing: border-box; } :host([text-wrap]) { @@ -30,7 +32,6 @@ :host-context(.item-interactive-disabled) { cursor: default; opacity: .3; - pointer-events: none; } @@ -38,7 +39,6 @@ flex: initial; max-width: 200px; - pointer-events: none; } diff --git a/core/src/components/list-header/list-header.ios.scss b/core/src/components/list-header/list-header.ios.scss index 557f4018c9..acc3b1cd05 100644 --- a/core/src/components/list-header/list-header.ios.scss +++ b/core/src/components/list-header/list-header.ios.scss @@ -5,15 +5,17 @@ // -------------------------------------------------- :host { + --ion-color-base: #{$list-ios-header-background-color}; + --ion-color-contrast: #{$list-ios-header-color}; + @include padding-horizontal($list-ios-header-padding-start, null); position: relative; font-size: $list-ios-header-font-size; font-weight: $list-ios-header-font-weight; - letter-spacing: $list-ios-header-letter-spacing; - text-transform: $list-ios-header-text-transform; - --ion-color-base: #{$list-ios-header-background-color}; - --ion-color-contrast: #{$list-ios-header-color}; + letter-spacing: $list-ios-header-letter-spacing; + + text-transform: $list-ios-header-text-transform; } diff --git a/core/src/components/list-header/list-header.ios.vars.scss b/core/src/components/list-header/list-header.ios.vars.scss index 2a07e98992..12fa3c6516 100644 --- a/core/src/components/list-header/list-header.ios.vars.scss +++ b/core/src/components/list-header/list-header.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS List Header diff --git a/core/src/components/list-header/list-header.md.scss b/core/src/components/list-header/list-header.md.scss index 6a32026cc0..13849bd765 100644 --- a/core/src/components/list-header/list-header.md.scss +++ b/core/src/components/list-header/list-header.md.scss @@ -5,13 +5,13 @@ // -------------------------------------------------- :host { + --ion-color-base: transparent; + --ion-color-contrast: #{$list-md-header-color}; + @include padding-horizontal($list-md-header-padding-start, null); @include margin(null, null, $list-md-header-margin-bottom, null); min-height: $list-md-header-min-height; font-size: $list-md-header-font-size; - - --ion-color-base: transparent; - --ion-color-contrast: #{$list-md-header-color}; } diff --git a/core/src/components/list-header/list-header.md.vars.scss b/core/src/components/list-header/list-header.md.vars.scss index 9f8eaf06d3..22357fb986 100644 --- a/core/src/components/list-header/list-header.md.vars.scss +++ b/core/src/components/list-header/list-header.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design List Header diff --git a/core/src/components/list-header/list-header.scss b/core/src/components/list-header/list-header.scss index 1617ced1ce..a9a25baaef 100644 --- a/core/src/components/list-header/list-header.scss +++ b/core/src/components/list-header/list-header.scss @@ -10,7 +10,6 @@ @include padding(0); display: flex; - overflow: hidden; align-items: center; justify-content: space-between; @@ -18,6 +17,8 @@ width: 100%; min-height: 40px; - color: #{current-color(contrast)}; background: #{current-color(base)}; + color: #{current-color(contrast)}; + + overflow: hidden; } diff --git a/core/src/components/list/list.ios.vars.scss b/core/src/components/list/list.ios.vars.scss index 2420ed2213..3d85bcf920 100644 --- a/core/src/components/list/list.ios.vars.scss +++ b/core/src/components/list/list.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS List diff --git a/core/src/components/list/list.md.vars.scss b/core/src/components/list/list.md.vars.scss index b84e601e59..ba05a8fbce 100644 --- a/core/src/components/list/list.md.vars.scss +++ b/core/src/components/list/list.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design List diff --git a/core/src/components/list/list.scss b/core/src/components/list/list.scss index a944690829..1ba9caa5f8 100644 --- a/core/src/components/list/list.scss +++ b/core/src/components/list/list.scss @@ -14,12 +14,11 @@ ion-list { background: $item-background-color; contain: content; - list-style-type: none; } ion-list.list-inset { - overflow: hidden; - transform: translateZ(0); + + overflow: hidden; } diff --git a/core/src/components/loading/loading.ios.scss b/core/src/components/loading/loading.ios.scss index be6a21c950..859c4d0a20 100644 --- a/core/src/components/loading/loading.ios.scss +++ b/core/src/components/loading/loading.ios.scss @@ -11,14 +11,13 @@ .loading-ios .loading-wrapper { @include border-radius($loading-ios-border-radius); - @include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start); max-width: $loading-ios-max-width; max-height: $loading-ios-max-height; - color: $loading-ios-text-color; background-color: $loading-ios-background-color; + color: $loading-ios-text-color; } @@ -27,7 +26,6 @@ .loading-translucent-ios .loading-wrapper { background-color: $loading-ios-translucent-background-color; - backdrop-filter: $loading-ios-translucent-filter; } diff --git a/core/src/components/loading/loading.md.scss b/core/src/components/loading/loading.md.scss index 4a3cd88e88..a03d72816c 100644 --- a/core/src/components/loading/loading.md.scss +++ b/core/src/components/loading/loading.md.scss @@ -11,14 +11,13 @@ .loading-md .loading-wrapper { @include border-radius($loading-md-border-radius); - @include padding($loading-md-padding-top, $loading-md-padding-end, $loading-md-padding-bottom, $loading-md-padding-start); max-width: $loading-md-max-width; max-height: $loading-md-max-height; - color: $loading-md-text-color; background: $loading-md-background; + color: $loading-md-text-color; box-shadow: $loading-md-box-shadow; } diff --git a/core/src/components/loading/loading.scss b/core/src/components/loading/loading.scss index 9fc7086406..e476c27095 100644 --- a/core/src/components/loading/loading.scss +++ b/core/src/components/loading/loading.scss @@ -7,17 +7,15 @@ ion-loading { @include font-smoothing(); @include position(0, 0, 0, 0); - position: fixed; - z-index: $z-index-overlay; - display: flex; + position: fixed; align-items: center; justify-content: center; - touch-action: none; - contain: strict; + touch-action: none; + z-index: $z-index-overlay; } ion-loading-controller { @@ -25,10 +23,10 @@ ion-loading-controller { } .loading-wrapper { - z-index: $z-index-overlay-wrapper; display: flex; align-items: center; opacity: 0; + z-index: $z-index-overlay-wrapper; } diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss index 41c5a43819..724d269ed7 100644 --- a/core/src/components/menu-button/menu-button.ios.scss +++ b/core/src/components/menu-button/menu-button.ios.scss @@ -8,19 +8,21 @@ @include padding(0); @include margin(2px, 0, 0, 0); - z-index: $menu-button-ios-button-z-index; - overflow: visible; - min-height: 32px; + transform: translateZ(0); + border: 0; + + background-color: transparent; + color: $menu-button-ios-color; + font-size: 17px; + line-height: 1; - color: $menu-button-ios-color; - background-color: transparent; - - transform: translateZ(0); + overflow: visible; + z-index: $menu-button-ios-button-z-index; &.activated { opacity: .4; @@ -34,6 +36,5 @@ ion-icon { display: inherit; font-size: 1.75em; - pointer-events: none; } diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss index a170116385..8227a956af 100644 --- a/core/src/components/menu-button/menu-button.md.scss +++ b/core/src/components/menu-button/menu-button.md.scss @@ -12,12 +12,14 @@ height: 32px; border: 0; + + background-color: transparent; + color: $menu-button-md-color; + font-size: 14px; font-weight: 500; - text-transform: uppercase; - color: $menu-button-md-color; - background-color: transparent; + text-transform: uppercase; box-shadow: none; @@ -33,9 +35,9 @@ ion-icon { font-size: 24px; font-weight: normal; + line-height: .67; text-align: start; - pointer-events: none; } diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss index 0d2af7b243..a165c21ee7 100644 --- a/core/src/components/menu-button/menu-button.scss +++ b/core/src/components/menu-button/menu-button.scss @@ -12,9 +12,8 @@ button { @include padding(0); @include font-smoothing(); - position: relative; - z-index: 0; display: flex; + position: relative; flex-flow: row nowrap; flex-shrink: 0; @@ -22,25 +21,24 @@ button { justify-content: center; border: 0; + outline: none; + background: transparent; + color: inherit; + line-height: 1; + text-align: center; text-decoration: none; text-overflow: ellipsis; text-transform: none; white-space: nowrap; - color: inherit; - background: transparent; - cursor: pointer; - - text-align: center; - - font-kerning: none; user-select: none; - + z-index: 0; + font-kerning: none; appearance: none; } diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index e6cf55824e..232937d6dd 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -6,9 +6,8 @@ :host { @include position(0, 0, 0, 0); - position: absolute; - display: none; + position: absolute; contain: strict; } @@ -22,9 +21,8 @@ @include position(0, auto, 0, 0); @include transform(translate3d(-9999px, 0, 0)); - position: absolute; - display: flex; + position: absolute; flex-direction: column; justify-content: space-between; @@ -37,7 +35,7 @@ :host(.menu-side-start) .menu-inner { @include multi-dir() { - // scss-lint:disable PropertySpelling + /* stylelint-disable property-blacklist */ right: auto; left: 0; } @@ -45,17 +43,17 @@ :host(.menu-side-end) .menu-inner { @include multi-dir() { - // scss-lint:disable PropertySpelling right: 0; left: auto; + /* stylelint-enable property-blacklist */ } } ion-backdrop { - z-index: -1; display: none; opacity: .01; + z-index: -1; } .menu-content { @@ -64,7 +62,6 @@ ion-backdrop { .menu-content-open { cursor: pointer; - touch-action: manipulation; } @@ -123,14 +120,15 @@ ion-backdrop { :host(.menu-pane-visible) .menu-inner { @include position-horizontal(0, 0); - // scss-lint:disable ImportantRule width: auto; - box-shadow: none !important; + /* stylelint-disable declaration-no-important */ transform: none !important; + + box-shadow: none !important; } :host(.menu-pane-visible) ion-backdrop { - // scss-lint:disable ImportantRule display: hidden !important; + /* stylelint-enable declaration-no-important */ } diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss index 3222fec1c1..8262155797 100644 --- a/core/src/components/modal/modal.ios.scss +++ b/core/src/components/modal/modal.ios.scss @@ -6,6 +6,7 @@ .modal-wrapper-ios { // hidden by default to prevent flickers, the animation will show it + @include transform(translate3d(0, 100%, 0)); @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { diff --git a/core/src/components/modal/modal.md.scss b/core/src/components/modal/modal.md.scss index 3976c11615..af2fe9aef8 100644 --- a/core/src/components/modal/modal.md.scss +++ b/core/src/components/modal/modal.md.scss @@ -8,14 +8,13 @@ .modal-wrapper-md { @include transform(translate3d(0, 40px, 0)); - opacity: .01; - @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { @include border-radius(2px); - overflow: hidden; - box-shadow: $modal-inset-box-shadow; + overflow: hidden; } + opacity: .01; + } diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss index c435a498b3..9510f46f9b 100644 --- a/core/src/components/modal/modal.scss +++ b/core/src/components/modal/modal.scss @@ -6,9 +6,8 @@ ion-modal { @include position(0, 0, 0, 0); - position: absolute; - display: flex; + position: absolute; align-items: center; justify-content: center; @@ -28,13 +27,6 @@ ion-modal-controller { } .modal-wrapper { - z-index: 10; - - width: 100%; - height: 100%; - - contain: strict; - @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { width: $modal-inset-width; height: $modal-inset-height-small; @@ -44,5 +36,11 @@ ion-modal-controller { width: $modal-inset-width; height: $modal-inset-height-large; } + + width: 100%; + height: 100%; + + contain: strict; + z-index: 10; } diff --git a/core/src/components/nav/nav.scss b/core/src/components/nav/nav.scss index bbfd8ae3b8..7fafe815af 100644 --- a/core/src/components/nav/nav.scss +++ b/core/src/components/nav/nav.scss @@ -7,13 +7,14 @@ :host(.show-decor) .nav-decor { @include position(0, 0, 0, 0); + display: block; + // when ios pages transition, the leaving page grays out // this is the black square behind all pages so they gray out position: absolute; - z-index: 0; - display: block; background: #000; + z-index: 0; pointer-events: none; } diff --git a/core/src/components/note/note.ios.scss b/core/src/components/note/note.ios.scss index 16aab402b3..0000d7dc56 100644 --- a/core/src/components/note/note.ios.scss +++ b/core/src/components/note/note.ios.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- :host { - font-family: $note-ios-font-family; - --ion-color-base: #{$note-ios-color}; + + font-family: $note-ios-font-family; } diff --git a/core/src/components/note/note.md.scss b/core/src/components/note/note.md.scss index cc64464699..dc6c0e6bc1 100644 --- a/core/src/components/note/note.md.scss +++ b/core/src/components/note/note.md.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- :host { - font-family: $note-md-font-family; - --ion-color-base: #{$note-md-color}; + + font-family: $note-md-font-family; } diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss index 936aad0101..4a86ae32f0 100644 --- a/core/src/components/picker/picker.ios.scss +++ b/core/src/components/picker/picker.ios.scss @@ -49,14 +49,14 @@ height: $picker-ios-button-height; - font-size: $picker-ios-button-font-size; - color: $picker-ios-button-text-color; background: $picker-ios-button-background-color; + color: $picker-ios-button-text-color; + + font-size: $picker-ios-button-font-size; } .picker-columns { height: $picker-ios-height - $picker-ios-toolbar-height - 1; - perspective: $picker-ios-column-perspective; } @@ -71,12 +71,13 @@ .picker-ios .picker-opts { top: $picker-ios-option-offset-y; - font-size: $picker-ios-option-font-size; - line-height: $picker-ios-option-height; - color: $picker-ios-option-text-color; - transform-style: preserve-3d; + color: $picker-ios-option-text-color; + + font-size: $picker-ios-option-font-size; + + line-height: $picker-ios-option-height; pointer-events: none; } @@ -87,16 +88,17 @@ height: 46px; - font-size: $picker-ios-option-font-size; - line-height: $picker-ios-option-height; - color: $picker-ios-option-text-color; - - background: transparent; transform-style: preserve-3d; + transition-timing-function: ease-out; - backface-visibility: hidden; + background: transparent; + color: $picker-ios-option-text-color; + font-size: $picker-ios-option-font-size; + + line-height: $picker-ios-option-height; + backface-visibility: hidden; pointer-events: auto; } @@ -104,9 +106,8 @@ @include position(0, null, null, 0); @include transform(translate3d(0, 0, 90px)); - position: absolute; - z-index: 10; display: block; + position: absolute; width: 100%; height: $picker-ios-option-offset-y + 4px; @@ -116,16 +117,16 @@ background: linear-gradient(to bottom, $picker-ios-top-background-color 20%, $picker-ios-bottom-background-color 100%); + + z-index: 10; } .picker-ios .picker-below-highlight { @include position($picker-ios-option-offset-y + $picker-ios-option-height - 4, null, null, 0); @include transform(translate3d(0, 0, 90px)); - position: absolute; - - z-index: 11; display: block; + position: absolute; width: 100%; height: $picker-ios-option-offset-y + $picker-ios-option-height; @@ -135,4 +136,6 @@ background: linear-gradient(to top, $picker-ios-top-background-color 30%, $picker-ios-bottom-background-color 100%); + + z-index: 11; } diff --git a/core/src/components/picker/picker.md.scss b/core/src/components/picker/picker.md.scss index f92d6b450f..b4442f908d 100644 --- a/core/src/components/picker/picker.md.scss +++ b/core/src/components/picker/picker.md.scss @@ -33,17 +33,19 @@ height: $picker-md-button-height; + background: $picker-md-button-background-color; + color: $picker-md-button-text-color; + font-size: $picker-md-button-font-size; font-weight: 500; + text-transform: uppercase; - color: $picker-md-button-text-color; - background: $picker-md-button-background-color; + box-shadow: none; } .picker-md .picker-columns { height: $picker-md-height - $picker-md-toolbar-height; - perspective: 1800px; } @@ -58,12 +60,13 @@ .picker-md .picker-opts { top: $picker-md-option-offset-y; - font-size: $picker-md-option-font-size; - line-height: $picker-md-option-height; - color: $picker-md-option-text-color; - transform-style: preserve-3d; + color: $picker-md-option-text-color; + + font-size: $picker-md-option-font-size; + + line-height: $picker-md-option-height; pointer-events: none; } @@ -74,23 +77,21 @@ height: 43px; - font-size: $picker-md-option-font-size; - line-height: $picker-md-option-height; - color: $picker-md-option-text-color; - - background: transparent; - transition-timing-function: ease-out; - backface-visibility: hidden; + background: transparent; + color: $picker-md-option-text-color; + font-size: $picker-md-option-font-size; + + line-height: $picker-md-option-height; + backface-visibility: hidden; pointer-events: auto; } .picker-md .picker-prefix, .picker-md .picker-suffix, .picker-md .picker-opt.picker-opt-selected { - color: $picker-md-option-selected-color; } @@ -99,7 +100,6 @@ @include transform(translate3d(0, 0, 90px)); position: absolute; - z-index: 10; width: 100%; height: $picker-md-option-offset-y + 4px; @@ -109,6 +109,8 @@ background: linear-gradient(to bottom, $picker-md-top-background-color 20%, $picker-md-bottom-background-color 100%); + + z-index: 10; } .picker-md .picker-below-highlight { @@ -116,7 +118,6 @@ @include transform(translate3d(0, 0, 90px)); position: absolute; - z-index: 11; width: 100%; height: $picker-md-option-offset-y + $picker-md-option-height; @@ -126,4 +127,6 @@ background: linear-gradient(to top, $picker-md-top-background-color 30%, $picker-md-bottom-background-color 100%); + + z-index: 11; } diff --git a/core/src/components/picker/picker.scss b/core/src/components/picker/picker.scss index b3fb118fb4..1ec74d7121 100644 --- a/core/src/components/picker/picker.scss +++ b/core/src/components/picker/picker.scss @@ -7,22 +7,21 @@ ion-picker { @include font-smoothing(); @include position(0, null, null, 0); - position: absolute; - z-index: $z-index-overlay; display: block; + position: absolute; width: $picker-width; height: $picker-width; contain: strict; + z-index: $z-index-overlay; } .picker-toolbar { - z-index: 1; - width: 100%; contain: strict; + z-index: 1; } .picker-wrapper { @@ -30,11 +29,8 @@ ion-picker { @include margin(auto); @include transform(translate3d(0, 100%, 0)); - position: absolute; - z-index: $z-index-overlay-wrapper; display: flex; - - overflow: hidden; + position: absolute; flex-direction: column; @@ -42,36 +38,37 @@ ion-picker { max-width: $picker-max-width; contain: strict; + overflow: hidden; + z-index: $z-index-overlay-wrapper; } .picker-columns { @include margin(null, null, constant(safe-area-inset-bottom), null); @include margin(null, null, env(safe-area-inset-bottom), null); - position: relative; - display: flex; - - overflow: hidden; - - justify-content: center; - - contain: strict; - @include rtl() { // Date is the same format in both directions flex-direction: row-reverse; } + + display: flex; + position: relative; + + justify-content: center; + + contain: strict; + overflow: hidden; } .picker-col { - box-sizing: content-box; - position: relative; display: flex; + position: relative; flex: 1; justify-content: center; height: 100%; + box-sizing: content-box; contain: content; } @@ -92,9 +89,9 @@ ion-picker { min-width: 45%; max-width: 50%; - white-space: nowrap; - text-align: end; + + white-space: nowrap; } .picker-suffix { @@ -105,31 +102,30 @@ ion-picker { min-width: 45%; max-width: 50%; - white-space: nowrap; - text-align: start; + + white-space: nowrap; } // contain property is supported by Chrome .picker-opt { @include position(0, null, null, 0); - position: absolute; - display: block; - overflow: hidden; + position: absolute; width: 100%; border: 0; + text-align: center; text-overflow: ellipsis; + white-space: nowrap; - text-align: center; - - will-change: transform; contain: strict; + overflow: hidden; + will-change: transform; } .picker-opt.picker-opt-disabled { @@ -163,12 +159,12 @@ ion-picker { .picker-above-highlight, .picker-below-highlight { display: none; - pointer-events: none; } .picker-button { border: 0; + font-family: inherit; } diff --git a/core/src/components/popover/popover.ios.scss b/core/src/components/popover/popover.ios.scss index 23d66a98f4..45ef6ad4f7 100644 --- a/core/src/components/popover/popover.ios.scss +++ b/core/src/components/popover/popover.ios.scss @@ -12,8 +12,8 @@ min-height: $popover-ios-min-height; max-height: $popover-ios-max-height; - color: $popover-ios-text-color; background-color: $popover-ios-background-color; + color: $popover-ios-text-color; } @@ -21,13 +21,13 @@ // ----------------------------------------- .popover-ios .popover-arrow { - position: absolute; display: block; - - overflow: hidden; + position: absolute; width: 20px; height: 10px; + + overflow: hidden; } .popover-ios .popover-arrow::after { @@ -36,14 +36,15 @@ position: absolute; - z-index: $z-index-overlay-wrapper; - width: 14px; height: 14px; - background-color: $popover-ios-arrow-background-color; - content: ""; transform: rotate(45deg); + + background-color: $popover-ios-arrow-background-color; + + content: ""; + z-index: $z-index-overlay-wrapper; } .popover-ios.popover-bottom .popover-arrow { @@ -61,6 +62,5 @@ .popover-translucent-ios .popover-content, .popover-translucent-ios .popover-arrow::after { background: $popover-ios-translucent-background-color; - backdrop-filter: $popover-ios-translucent-filter; } diff --git a/core/src/components/popover/popover.md.scss b/core/src/components/popover/popover.md.scss index 5c3623d15d..5c8a1bb2ca 100644 --- a/core/src/components/popover/popover.md.scss +++ b/core/src/components/popover/popover.md.scss @@ -13,8 +13,9 @@ min-height: $popover-md-min-height; max-height: $popover-md-max-height; - color: $popover-md-text-color; background: $popover-md-background; + color: $popover-md-text-color; + box-shadow: $popover-md-box-shadow; } diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss index b0da4ced3e..2c6bd41d84 100644 --- a/core/src/components/popover/popover.scss +++ b/core/src/components/popover/popover.scss @@ -6,31 +6,28 @@ ion-popover { @include position(0, 0, 0, 0); - position: absolute; - - z-index: $z-index-overlay; - display: flex; + position: absolute; align-items: center; justify-content: center; + + z-index: $z-index-overlay; } .popover-wrapper { - z-index: $z-index-overlay-wrapper; - opacity: 0; + z-index: $z-index-overlay-wrapper; } .popover-content { - position: absolute; - z-index: $z-index-overlay-wrapper; - display: flex; - - overflow: auto; + position: absolute; flex-direction: column; + + overflow: auto; + z-index: $z-index-overlay-wrapper; } .popover-content ion-content, diff --git a/core/src/components/radio/radio.ios.scss b/core/src/components/radio/radio.ios.scss index bc1f8416bf..9f4d52ff62 100644 --- a/core/src/components/radio/radio.ios.scss +++ b/core/src/components/radio/radio.ios.scss @@ -26,12 +26,13 @@ width: 5px; height: 12px; + transform: rotate(45deg); + border-width: $radio-ios-icon-border-width; border-top-width: 0; border-left-width: 0; border-style: $radio-ios-icon-border-style; border-color: $radio-ios-color-on; - transform: rotate(45deg); } @@ -39,7 +40,6 @@ // ----------------------------------------- :host(.radio-disabled) { opacity: $radio-ios-disabled-opacity; - pointer-events: none; } @@ -51,9 +51,8 @@ @include border-radius(50%); @include position(-8px, null, null, -9px); - position: absolute; - display: block; + position: absolute; width: 36px; height: 36px; @@ -61,7 +60,6 @@ background: $radio-ios-background-color-focused; content: ""; - opacity: .2; } @@ -72,8 +70,8 @@ :host(.in-item) { @include margin($radio-ios-item-end-margin-top, $radio-ios-item-end-margin-end, $radio-ios-item-end-margin-bottom, $radio-ios-item-end-margin-start); - position: static; display: block; + position: static; } :host(.in-item[slot="start"]) { diff --git a/core/src/components/radio/radio.ios.vars.scss b/core/src/components/radio/radio.ios.vars.scss index fece9f99df..4a62d0022b 100644 --- a/core/src/components/radio/radio.ios.vars.scss +++ b/core/src/components/radio/radio.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS Radio diff --git a/core/src/components/radio/radio.md.scss b/core/src/components/radio/radio.md.scss index 1df1936644..2473cb20d4 100644 --- a/core/src/components/radio/radio.md.scss +++ b/core/src/components/radio/radio.md.scss @@ -35,9 +35,11 @@ width: $radio-md-icon-width - $radio-md-icon-border-width * 4; height: $radio-md-icon-height - $radio-md-icon-border-width * 4; - background-color: $radio-md-color-on; transform: scale3d(0, 0, 0); + transition: transform $radio-md-transition-duration $radio-md-transition-easing; + + background-color: $radio-md-color-on; } @@ -63,7 +65,6 @@ // .item-md.item-radio-disabled ion-label { :host(.radio-disabled) { opacity: $radio-md-disabled-opacity; - pointer-events: none; } @@ -75,9 +76,8 @@ @include border-radius(50%); @include position(-12px, null, null, -12px); - position: absolute; - display: block; + position: absolute; width: 36px; height: 36px; @@ -85,7 +85,6 @@ background: $radio-md-background-color-focused; content: ""; - opacity: .2; } @@ -96,8 +95,8 @@ :host(.in-item) { @include margin($radio-md-item-end-margin-top, $radio-md-item-end-margin-end, $radio-md-item-end-margin-bottom, $radio-md-item-end-margin-start); - position: static; display: block; + position: static; } :host(.in-item[slot="start"]) { diff --git a/core/src/components/radio/radio.md.vars.scss b/core/src/components/radio/radio.md.vars.scss index 98df607b2e..1d35f8818d 100644 --- a/core/src/components/radio/radio.md.vars.scss +++ b/core/src/components/radio/radio.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design Radio diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss index 5c9c3ac2ff..511b96f2fe 100644 --- a/core/src/components/radio/radio.scss +++ b/core/src/components/radio/radio.scss @@ -6,20 +6,18 @@ :host { --ion-color-base: #{ion-color(primary, base)}; - box-sizing: border-box; - - position: relative; display: inline-block; + position: relative; + box-sizing: border-box; } .radio-icon { - position: relative; display: block; + position: relative; width: var(--width); height: var(--height); - contain: layout size style; } diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss index 64d33cafe4..02969a1549 100644 --- a/core/src/components/range/range.ios.scss +++ b/core/src/components/range/range.ios.scss @@ -36,7 +36,6 @@ height: $range-ios-bar-height; background: $range-ios-bar-background-color; - pointer-events: none; } @@ -81,7 +80,6 @@ background: $range-ios-knob-background-color; box-shadow: $range-ios-knob-box-shadow; - pointer-events: none; } @@ -96,7 +94,6 @@ height: $range-ios-tick-height; background: $range-ios-tick-background-color; - pointer-events: none; } @@ -109,19 +106,19 @@ @include transform(translate3d(0, 28px, 0), scale(.01)); @include padding($range-ios-pin-padding-top, $range-ios-pin-padding-end, $range-ios-pin-padding-bottom, $range-ios-pin-padding-start); + display: inline-block; position: relative; top: -20px; - display: inline-block; min-width: 28px; - font-size: $range-ios-pin-font-size; - - color: $range-ios-pin-color; - background: $range-ios-pin-background-color; - transition: transform 120ms ease; + background: $range-ios-pin-background-color; + color: $range-ios-pin-color; + + font-size: $range-ios-pin-font-size; + text-align: center; } diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss index 83c7333622..1814237f0b 100644 --- a/core/src/components/range/range.md.scss +++ b/core/src/components/range/range.md.scss @@ -36,7 +36,6 @@ height: $range-md-bar-height; background: $range-md-bar-background-color; - pointer-events: none; } @@ -75,18 +74,18 @@ position: absolute; - z-index: 2; - width: $range-md-knob-width; height: $range-md-knob-height; - background: $range-md-knob-background-color; - transform: scale(.67); + transition-duration: 120ms; transition-property: transform, background-color, border; transition-timing-function: ease; + background: $range-md-knob-background-color; + + z-index: 2; pointer-events: none; } @@ -95,16 +94,14 @@ @include border-radius($range-md-tick-border-radius); position: absolute; - top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2); - z-index: 1; - width: $range-md-tick-width; height: $range-md-tick-height; background: $range-md-tick-background-color; + z-index: 1; pointer-events: none; } @@ -117,20 +114,19 @@ @include border-radius(50%); @include transform(translate3d(0, 28px, 0), scale(.01)); + display: inline-block; position: relative; top: -20px; - display: inline-block; min-width: 28px; height: 28px; - font-size: $range-md-pin-font-size; - - color: $range-md-pin-color; + transition: transform 120ms ease, background-color 120ms ease; background: $range-md-pin-background-color; + color: $range-md-pin-color; - transition: transform 120ms ease, background-color 120ms ease; + font-size: $range-md-pin-font-size; text-align: center; @@ -141,16 +137,17 @@ position: absolute; - z-index: -1; - width: 26px; height: 26px; + transform: rotate(-45deg); + + transition: background-color 120ms ease; + background: $range-md-pin-background-color; content: ""; - transform: rotate(-45deg); - transition: background-color 120ms ease; + z-index: -1; } } @@ -166,13 +163,14 @@ .range-knob-min.range-knob-min { .range-knob { border: $range-md-knob-min-border; + background: $range-md-knob-min-background-color; } .range-pin, .range-pin::before { - color: ion-color(primary, contrast); background: $range-md-pin-min-background-color; + color: ion-color(primary, contrast); } } } @@ -184,7 +182,9 @@ } :host(.range-disabled) .range-knob { - outline: 5px solid #fff; - background-color: $range-md-bar-background-color; transform: scale(.55); + + outline: 5px solid #fff; + + background-color: $range-md-bar-background-color; } diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss index 8e7893f63a..b9f1d1357c 100644 --- a/core/src/components/range/range.scss +++ b/core/src/components/range/range.scss @@ -7,11 +7,10 @@ --ion-color-base: #{ion-color(primary, base)}; --ion-color-contrast: #{ion-color(primary, contrast)}; - position: relative; display: flex; + position: relative; flex: 1; - align-items: center; } diff --git a/core/src/components/refresher/refresher.scss b/core/src/components/refresher/refresher.scss index 5a8f872de4..261ebf16d3 100644 --- a/core/src/components/refresher/refresher.scss +++ b/core/src/components/refresher/refresher.scss @@ -4,15 +4,15 @@ ion-refresher { @include position(0, null, null, 0); + display: none; position: absolute; top: 0; - z-index: $z-index-refresher; - - display: none; width: 100%; height: $refresher-height; + z-index: $z-index-refresher; + &.refresher-active { display: block; } @@ -41,9 +41,10 @@ ion-refresher-content { .refresher-refreshing-icon { @include transform-origin(center); - font-size: $refresher-icon-font-size; transition: 200ms; + font-size: $refresher-icon-font-size; + text-align: center; } diff --git a/core/src/components/reorder-group/reorder-group.scss b/core/src/components/reorder-group/reorder-group.scss index aa58881743..34218cf29b 100644 --- a/core/src/components/reorder-group/reorder-group.scss +++ b/core/src/components/reorder-group/reorder-group.scss @@ -9,7 +9,6 @@ .reorder-list-active ion-gesture > * { transition: transform 300ms; - will-change: transform; } @@ -17,7 +16,6 @@ display: block; cursor: grab; - pointer-events: all; touch-action: none; } @@ -29,13 +27,13 @@ .reorder-selected { position: relative; - z-index: $z-index-reorder-selected; + + /* stylelint-disable-next-line declaration-no-important */ + transition: none !important; box-shadow: 0 0 10px rgba(0, 0, 0, .4); opacity: .8; - - // scss-lint:disable ImportantRule - transition: none !important; + z-index: $z-index-reorder-selected; } .reorder-visible ion-reorder .reorder-icon { diff --git a/core/src/components/reorder/reorder.ios.scss b/core/src/components/reorder/reorder.ios.scss index a26ff1df3f..9a0b4688db 100644 --- a/core/src/components/reorder/reorder.ios.scss +++ b/core/src/components/reorder/reorder.ios.scss @@ -6,5 +6,6 @@ .reorder-icon { font-size: $reorder-ios-icon-font-size; + opacity: $reorder-ios-icon-opacity; } diff --git a/core/src/components/reorder/reorder.md.scss b/core/src/components/reorder/reorder.md.scss index 15f05a312a..9396ef9373 100644 --- a/core/src/components/reorder/reorder.md.scss +++ b/core/src/components/reorder/reorder.md.scss @@ -6,5 +6,6 @@ .reorder-icon { font-size: $reorder-md-icon-font-size; + opacity: $reorder-md-icon-opacity; } diff --git a/core/src/components/reorder/reorder.scss b/core/src/components/reorder/reorder.scss index c25e004449..450a33b34d 100644 --- a/core/src/components/reorder/reorder.scss +++ b/core/src/components/reorder/reorder.scss @@ -4,11 +4,11 @@ // -------------------------------------------------- :host([slot]) { - z-index: 100; - display: none; line-height: 0; + + z-index: 100; } diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.scss index 6432192291..585855e401 100644 --- a/core/src/components/ripple-effect/ripple-effect.scss +++ b/core/src/components/ripple-effect/ripple-effect.scss @@ -17,30 +17,28 @@ position: absolute; - color: inherit; background-color: currentColor; + color: inherit; + contain: strict; opacity: 0; - animation-name: rippleAnimation; animation-duration: 200ms; animation-timing-function: ease-out; - will-change: transform, opacity; - - contain: strict; - pointer-events: none; } @keyframes rippleAnimation { 0% { - opacity: .2; transform: scale(.1); + + opacity: .2; } 100% { - opacity: 0; transform: scale(1); + + opacity: 0; } } diff --git a/core/src/components/router-outlet/route-outlet.scss b/core/src/components/router-outlet/route-outlet.scss index bbfd8ae3b8..7fafe815af 100644 --- a/core/src/components/router-outlet/route-outlet.scss +++ b/core/src/components/router-outlet/route-outlet.scss @@ -7,13 +7,14 @@ :host(.show-decor) .nav-decor { @include position(0, 0, 0, 0); + display: block; + // when ios pages transition, the leaving page grays out // this is the black square behind all pages so they gray out position: absolute; - z-index: 0; - display: block; background: #000; + z-index: 0; pointer-events: none; } diff --git a/core/src/components/scroll/scroll.scss b/core/src/components/scroll/scroll.scss index b54234cfc9..14068c83fc 100644 --- a/core/src/components/scroll/scroll.scss +++ b/core/src/components/scroll/scroll.scss @@ -3,16 +3,15 @@ :host { @include position(0, 0, 0, 0); - position: absolute; - z-index: $z-index-scroll-content; display: block; + position: absolute; + contain: size style layout; + z-index: $z-index-scroll-content; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; will-change: scroll-position; - - contain: size style layout; } :host(.overscroll)::before, diff --git a/core/src/components/searchbar/searchbar.ios.scss b/core/src/components/searchbar/searchbar.ios.scss index dbad9c0ac2..bd95761e48 100644 --- a/core/src/components/searchbar/searchbar.ios.scss +++ b/core/src/components/searchbar/searchbar.ios.scss @@ -49,12 +49,12 @@ height: 100%; + background-color: $searchbar-ios-input-background-color; + color: $searchbar-ios-input-text-color; + font-size: 14px; font-weight: 400; - color: $searchbar-ios-input-text-color; - background-color: $searchbar-ios-input-background-color; - contain: strict; } @@ -72,8 +72,9 @@ height: 100%; border: 0; - color: $searchbar-ios-input-clear-icon-color; + background-color: transparent; + color: $searchbar-ios-input-clear-icon-color; } .searchbar-clear-icon { @@ -93,14 +94,15 @@ flex-shrink: 0; border: 0; + outline: none; + + background-color: $searchbar-ios-cancel-button-background-color; + color: $searchbar-ios-cancel-button-color; + font-size: $searchbar-ios-cancel-button-font-size; - color: $searchbar-ios-cancel-button-color; - background-color: $searchbar-ios-cancel-button-background-color; - cursor: pointer; - appearance: none; } @@ -132,7 +134,6 @@ :host(.searchbar-animated.searchbar-has-focus) .searchbar-cancel-button { opacity: 1; - pointer-events: auto; } @@ -140,9 +141,9 @@ @include margin-horizontal(null, -100%); @include transform(translate3d(0, 0, 0)); - opacity: 0; transition: $searchbar-ios-cancel-transition; + opacity: 0; pointer-events: none; } @@ -167,16 +168,19 @@ :host-context(ion-toolbar.ion-color) .searchbar-search-icon { color: currentColor; + opacity: $searchbar-ios-input-icon-opacity; } :host-context(ion-toolbar.ion-color) .searchbar-input { @include placeholder(currentColor, $opacity: .5); - color: currentColor; + background: rgba(var(--ion-color-contrast-rgb), $searchbar-ios-input-background-color-alpha); + color: currentColor; } :host-context(ion-toolbar.ion-color) .searchbar-clear-button { color: currentColor; + opacity: $searchbar-ios-input-icon-opacity; } diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss index 65a2deee23..8a9cad0df8 100644 --- a/core/src/components/searchbar/searchbar.md.scss +++ b/core/src/components/searchbar/searchbar.md.scss @@ -7,9 +7,9 @@ :host { @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start); - font-family: $searchbar-md-font-family; - background: $searchbar-md-background; + + font-family: $searchbar-md-font-family; } @@ -38,10 +38,11 @@ height: 100%; border: 0; - font-size: $searchbar-md-cancel-button-font-size; - color: $searchbar-md-cancel-button-color; background-color: $searchbar-md-cancel-button-background-color; + color: $searchbar-md-cancel-button-color; + + font-size: $searchbar-md-cancel-button-font-size; } // Searchbar Search & Cancel Icon @@ -69,13 +70,14 @@ height: $searchbar-md-input-height; + background-color: $searchbar-md-input-background-color; + color: $searchbar-md-input-text-color; + font-size: 16px; font-weight: 400; line-height: $searchbar-md-input-line-height; - color: $searchbar-md-input-text-color; - background-color: $searchbar-md-input-background-color; box-shadow: $searchbar-md-input-box-shadow; } @@ -92,6 +94,7 @@ height: 100%; border: 0; + background-color: transparent; } diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss index 0ab0c34034..4ad670f0d6 100644 --- a/core/src/components/searchbar/searchbar.scss +++ b/core/src/components/searchbar/searchbar.scss @@ -6,14 +6,13 @@ :host { @include font-smoothing(); - box-sizing: border-box; - - position: relative; display: flex; + position: relative; align-items: center; width: 100%; + box-sizing: border-box; } .searchbar-icon { @@ -22,8 +21,8 @@ } .searchbar-input-container { - position: relative; display: block; + position: relative; flex-shrink: 1; @@ -38,9 +37,10 @@ width: 100%; border: 0; - outline: none; - font-family: inherit; + outline: none; + + font-family: inherit; appearance: none; &::-webkit-search-cancel-button { @@ -57,7 +57,6 @@ min-height: 0; outline: none; - appearance: none; } diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss index ce9969e827..0e42cbfab2 100644 --- a/core/src/components/segment-button/segment-button.scss +++ b/core/src/components/segment-button/segment-button.scss @@ -4,20 +4,19 @@ // -------------------------------------------------- :host { - flex: 1; - --padding-start: 0; --padding-end: 0; --padding-top: 0; --padding-bottom: 0; - --icon-size: 1em; + + flex: 1; } :host(:first-of-type) .segment-button-native { - @include border-radius(var(--border-radius), 0, 0, var(--border-radius)); - --padding-end: 0; + + @include border-radius(var(--border-radius), 0, 0, var(--border-radius)); } :host(:not(:first-of-type)) .segment-button-native { @@ -25,48 +24,46 @@ } :host(:last-of-type) .segment-button-native { - @include border-radius(0, var(--border-radius), var(--border-radius), 0); - --padding-start: 0; + + @include border-radius(0, var(--border-radius), var(--border-radius), 0); } .segment-button-native { @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start)); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); - position: relative; display: block; - - overflow: hidden; + position: relative; width: 100%; height: 100%; + transition: var(--transition); + border-width: var(--border-width); border-style: var(--border-style); border-color: var(--border-color); + background: var(--background); + color: inherit; + font-size: inherit; font-weight: inherit; + text-align: center; text-decoration: none; text-overflow: ellipsis; text-transform: inherit; + white-space: nowrap; - color: inherit; - background: var(--background); - - cursor: pointer; - - transition: var(--transition); - contain: content; + cursor: pointer; + overflow: hidden; user-select: none; font-kerning: none; - text-align: center; - &:active, &:focus { outline: none; diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss index 381efd3f41..c37acf9ab0 100644 --- a/core/src/components/segment/segment.ios.scss +++ b/core/src/components/segment/segment.ios.scss @@ -10,7 +10,6 @@ :host(.segment-disabled) { opacity: $segment-ios-opacity-disabled; - pointer-events: none; } @@ -22,28 +21,27 @@ --border-width: #{$segment-button-ios-border-width}; --border-style: solid; --border-color: #{current-color(base)}; - --background: transparent; --transition: 100ms all linear; --icon-size: #{$segment-button-ios-icon-size}; height: #{$segment-button-ios-height}; - font-size: #{$segment-button-ios-font-size}; - line-height: #{$segment-button-ios-line-height}; - color: #{current-color(base)}; + + font-size: #{$segment-button-ios-font-size}; + + line-height: #{$segment-button-ios-line-height}; } ::slotted(.segment-checked) { - color: #{current-color(contrast)}; - --background: #{current-color(base)}; + + color: #{current-color(contrast)}; } ::slotted(.segment-button-disabled) { color: #{current-color(base, $segment-button-ios-background-color-alpha-disabled)}; - pointer-events: none; } @@ -66,10 +64,10 @@ :host(.in-toolbar) ::slotted(ion-segment-button) { max-width: $segment-button-ios-toolbar-button-max-width; - height: $segment-button-ios-toolbar-button-height; font-size: $segment-button-ios-toolbar-font-size; + line-height: $segment-button-ios-toolbar-line-height; } diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss index c634ea83e5..24ddde4afa 100644 --- a/core/src/components/segment/segment.md.scss +++ b/core/src/components/segment/segment.md.scss @@ -5,12 +5,14 @@ // -------------------------------------------------- :host { - font-family: $segment-md-font-family; - color: $segment-button-md-text-color; + + font-family: $segment-md-font-family; } :host(.ion-color) { + // TODO can we remove important here + /* stylelint-disable-next-line declaration-no-important */ color: #{current-color(base)} !important; } @@ -20,7 +22,6 @@ :host(.segment-disabled) { opacity: $segment-md-opacity-disabled; - pointer-events: none; } @@ -32,24 +33,24 @@ --padding-end: #{$segment-button-md-padding-end}; --padding-bottom: #{$segment-button-md-padding-bottom}; --padding-start: #{$segment-button-md-padding-start}; - --background: transparent; --border-color: #{$segment-button-md-border-bottom-color}; --border-width: #{0 0 $segment-button-md-border-bottom-width 0}; --border-style: solid; --opacity: #{$segment-button-md-opacity}; --transition: #{$segment-button-md-transition}; - --icon-size: #{$segment-button-md-icon-size}; height: $segment-button-md-height; + color: inherit; + font-size: $segment-button-md-font-size; font-weight: $segment-button-md-font-weight; - line-height: $segment-button-md-line-height; - text-transform: uppercase; - color: inherit; + line-height: $segment-button-md-line-height; + + text-transform: uppercase; opacity: $segment-button-md-opacity; } @@ -59,9 +60,9 @@ ::slotted(.activated), ::slotted(.segment-checked) { - opacity: $segment-button-md-opacity-activated; - --border-color: currentColor; + + opacity: $segment-button-md-opacity-activated; } // Disabled Segment Button @@ -69,6 +70,5 @@ ::slotted(.segment-button-disabled) { opacity: $segment-button-md-opacity-disabled; - pointer-events: none; } diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.scss index cf5d1742f6..fd737ed977 100644 --- a/core/src/components/segment/segment.scss +++ b/core/src/components/segment/segment.scss @@ -4,6 +4,11 @@ // -------------------------------------------------- :host { + --ion-color-base: #{ion-color(primary, base)}; + --ion-color-base-rgb: #{ion-color(primary, base, null, true)}; + --ion-color-contrast: #{ion-color(primary, contrast)}; + --ion-color-shade: #{ion-color(primary, shade)}; + @include font-smoothing(); display: flex; @@ -13,9 +18,4 @@ justify-content: center; width: 100%; - - --ion-color-base: #{ion-color(primary, base)}; - --ion-color-base-rgb: #{ion-color(primary, base, null, true)}; - --ion-color-contrast: #{ion-color(primary, contrast)}; - --ion-color-shade: #{ion-color(primary, shade)}; } diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss index 21ce0c67b9..3065de705f 100644 --- a/core/src/components/select/select.ios.scss +++ b/core/src/components/select/select.ios.scss @@ -7,8 +7,9 @@ :host { @include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start); - font-family: $select-ios-font-family; color: $select-ios-text-color; + + font-family: $select-ios-font-family; } .select-placeholder { @@ -34,8 +35,8 @@ border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; - color: $select-ios-icon-color; + color: $select-ios-icon-color; pointer-events: none; } diff --git a/core/src/components/select/select.ios.vars.scss b/core/src/components/select/select.ios.vars.scss index 3d9aa1efc9..03fa97f9dd 100644 --- a/core/src/components/select/select.ios.vars.scss +++ b/core/src/components/select/select.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS Select diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss index d07f519e87..ef876672e9 100644 --- a/core/src/components/select/select.md.scss +++ b/core/src/components/select/select.md.scss @@ -7,8 +7,9 @@ :host { @include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start); - font-family: $select-md-font-family; color: $select-md-text-color; + + font-family: $select-md-font-family; } .select-placeholder { @@ -38,8 +39,8 @@ border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; - color: $select-md-icon-color; + color: $select-md-icon-color; pointer-events: none; } diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss index 751aff628b..c0fad18222 100644 --- a/core/src/components/select/select.md.vars.scss +++ b/core/src/components/select/select.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design Select diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index 2a23f59ad3..c29108a4c6 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -5,6 +5,7 @@ :host { display: flex; + overflow: hidden; } @@ -17,20 +18,21 @@ } .select-text { - overflow: hidden; - flex: 1; min-width: 16px; font-size: inherit; + text-overflow: ellipsis; + white-space: nowrap; + + overflow: hidden; } :host(.select-disabled) { opacity: .4; - pointer-events: none; } diff --git a/core/src/components/show-when/show-when.scss b/core/src/components/show-when/show-when.scss index 8810f05076..72a0e6dd2a 100644 --- a/core/src/components/show-when/show-when.scss +++ b/core/src/components/show-when/show-when.scss @@ -3,6 +3,6 @@ ion-show-when.show-content { } ion-show-when.hide-content { - // scss-lint:disable ImportantRule + /* stylelint-disable-next-line declaration-no-important */ display: none !important; } diff --git a/core/src/components/skeleton-text/skeleton-text.ios.scss b/core/src/components/skeleton-text/skeleton-text.ios.scss index 91d646f6b1..55bbf164e0 100644 --- a/core/src/components/skeleton-text/skeleton-text.ios.scss +++ b/core/src/components/skeleton-text/skeleton-text.ios.scss @@ -7,5 +7,6 @@ span { background-color: $skeleton-text-ios-bar-background-color; + opacity: $skeleton-text-ios-bar-opacity; } diff --git a/core/src/components/skeleton-text/skeleton-text.md.scss b/core/src/components/skeleton-text/skeleton-text.md.scss index d5b9f6f933..ce0fb6f146 100644 --- a/core/src/components/skeleton-text/skeleton-text.md.scss +++ b/core/src/components/skeleton-text/skeleton-text.md.scss @@ -7,5 +7,6 @@ span { background-color: $skeleton-text-md-bar-background-color; + opacity: $skeleton-text-md-bar-opacity; } diff --git a/core/src/components/skeleton-text/skeleton-text.scss b/core/src/components/skeleton-text/skeleton-text.scss index c459908803..0bbb8135ab 100644 --- a/core/src/components/skeleton-text/skeleton-text.scss +++ b/core/src/components/skeleton-text/skeleton-text.scss @@ -8,8 +8,8 @@ display: inline-block; width: 100%; - pointer-events: none; + user-select: none; } diff --git a/core/src/components/slide/slide.scss b/core/src/components/slide/slide.scss index 1e73d90884..7777ce4df5 100644 --- a/core/src/components/slide/slide.scss +++ b/core/src/components/slide/slide.scss @@ -20,14 +20,12 @@ ion-slide { } .swiper-slide { - box-sizing: border-box; - position: relative; // Center slide text vertically display: flex; + position: relative; flex-shrink: 0; - align-items: center; justify-content: center; @@ -37,6 +35,7 @@ ion-slide { font-size: 18px; text-align: center; + box-sizing: border-box; } .swiper-slide img { diff --git a/core/src/components/spinner/spinner.scss b/core/src/components/spinner/spinner.scss index 463146ebc1..a066793943 100644 --- a/core/src/components/spinner/spinner.scss +++ b/core/src/components/spinner/spinner.scss @@ -4,15 +4,15 @@ // -------------------------------------------------- :host { - position: relative; + --ion-color-base: currentColor; + display: inline-block; + position: relative; width: 28px; height: 28px; color: #{current-color(base)}; - - --ion-color-base: currentColor; } svg { @@ -73,7 +73,6 @@ svg { stroke-width: 4px; stroke-dasharray: 128px; stroke-dashoffset: 82px; - stroke: currentColor; } @@ -101,22 +100,54 @@ svg { // -------------------------------------------------- @keyframes spinner-fade-out { - 0% { opacity: 1; } - 100% { opacity: 0; } + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } + } @keyframes spinner-scale-out { - 0% { transform: scale(1, 1); } - 100% { transform: scale(0, 0); } + 0% { + transform: scale(1, 1); + } + + 100% { + transform: scale(0, 0); + } + } @keyframes spinner-rotate { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + } @keyframes spinner-dots { - 0% { opacity: .9; transform: scale(1, 1); } - 50% { opacity: .3; transform: scale(.4, .4); } - 100% { opacity: .9; transform: scale(1, 1); } + 0% { + transform: scale(1, 1); + + opacity: .9; + } + + 50% { + transform: scale(.4, .4); + + opacity: .3; + } + + 100% { + transform: scale(1, 1); + + opacity: .9; + } } diff --git a/core/src/components/split-pane/split-pane.scss b/core/src/components/split-pane/split-pane.scss index 2ee1d25d41..4e33dca09d 100644 --- a/core/src/components/split-pane/split-pane.scss +++ b/core/src/components/split-pane/split-pane.scss @@ -6,9 +6,8 @@ .split-pane { @include position(0, 0, 0, 0); - position: absolute; - display: flex; + position: absolute; flex-direction: row; flex-wrap: nowrap; @@ -20,14 +19,13 @@ .split-pane-visible > .split-pane-main { @include position(0, 0, 0, 0); - // scss-lint:disable ImportantRule position: relative; - z-index: 0; - flex: 1; + /* stylelint-disable-next-line declaration-no-important */ box-shadow: none !important; + z-index: 0; } .split-pane-visible > .split-pane-side:not(ion-menu), @@ -35,7 +33,6 @@ display: flex; flex-shrink: 0; - order: -1; } diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss index e014d36ef7..9398d2ae2d 100644 --- a/core/src/components/tab-button/tab-button.ios.scss +++ b/core/src/components/tab-button/tab-button.ios.scss @@ -25,8 +25,8 @@ @include margin(2px, 0); font-size: $tab-button-ios-font-size + 2; - font-size: 14px; + line-height: 1.1; } @@ -46,6 +46,7 @@ @include margin(2px, 0); font-size: 14px; + line-height: 1.1; } diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss index a23f84a8ea..1239de5bc1 100644 --- a/core/src/components/tab-button/tab-button.md.scss +++ b/core/src/components/tab-button/tab-button.md.scss @@ -25,17 +25,18 @@ .tab-button-text { @include margin($tab-button-md-text-margin-top, $tab-button-md-text-margin-end, $tab-button-md-text-margin-bottom, $tab-button-md-text-margin-start); - @include transform-origin(center, bottom); + transition: $tab-button-md-text-transition; + font-size: $tab-button-md-font-size; text-transform: $tab-button-md-text-capitalization; - transition: $tab-button-md-text-transition; } :host(.tab-selected) .tab-button-text { transform: $tab-button-md-text-transform-active; + transition: $tab-button-md-text-transition; } @@ -48,9 +49,9 @@ width: $tab-button-md-icon-size; height: $tab-button-md-icon-size; - font-size: $tab-button-md-icon-size; - transition: $tab-button-md-icon-transition; + + font-size: $tab-button-md-icon-size; } // Tab layout: icon-top, icon-only, label-only @@ -83,7 +84,6 @@ .layout-icon-bottom .tab-button-md .tab-button-text { @include transform-origin(center, top); - @include margin(-2px, null, null, null); } diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss index fcbe404750..1965a79213 100644 --- a/core/src/components/tab-button/tab-button.scss +++ b/core/src/components/tab-button/tab-button.scss @@ -4,12 +4,8 @@ @include border-radius(0); @include margin(0); - box-sizing: border-box; - - position: relative; - z-index: 0; display: block; - overflow: hidden; + position: relative; flex: 1; @@ -17,15 +13,16 @@ border: 0; - text-decoration: none; - - color: var(--color); background: var(--background); + color: var(--color); text-align: center; + text-decoration: none; + overflow: hidden; user-select: none; - + z-index: 0; + box-sizing: border-box; box-sizing: border-box; } @@ -50,8 +47,6 @@ a { @include margin(0); @include padding(0); - box-sizing: border-box; - display: flex; flex-direction: column; @@ -63,10 +58,11 @@ a { border: 0; - color: inherit; background: transparent; + color: inherit; cursor: pointer; + box-sizing: border-box; &:active, &:focus { @@ -84,10 +80,7 @@ a { .tab-button-text, .tab-button-icon { - box-sizing: border-box; - display: none; - overflow: hidden; align-self: center; @@ -95,7 +88,11 @@ a { max-width: 100%; text-overflow: ellipsis; + white-space: nowrap; + + overflow: hidden; + box-sizing: border-box; } :host(.has-icon) .tab-button-icon, @@ -128,6 +125,7 @@ a { height: auto; font-size: 12px; + line-height: 16px; } diff --git a/core/src/components/tabbar/tabbar.ios.scss b/core/src/components/tabbar/tabbar.ios.scss index 86c34892c4..c1a4449f00 100644 --- a/core/src/components/tabbar/tabbar.ios.scss +++ b/core/src/components/tabbar/tabbar.ios.scss @@ -29,7 +29,6 @@ :host(.tabbar-translucent) { background-color: #{current-color(base, $tabbar-ios-translucent-background-color-alpha)}; - backdrop-filter: $tabbar-ios-translucent-filter; } diff --git a/core/src/components/tabbar/tabbar.md.scss b/core/src/components/tabbar/tabbar.md.scss index 59c0aa8623..a10cabd3fd 100644 --- a/core/src/components/tabbar/tabbar.md.scss +++ b/core/src/components/tabbar/tabbar.md.scss @@ -26,7 +26,7 @@ ion-scroll { } .scrollable .tab-button { - overflow: hidden; - flex: 1 0 auto; + + overflow: hidden; } diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss index f24e4db174..e8b69ecc86 100644 --- a/core/src/components/tabbar/tabbar.scss +++ b/core/src/components/tabbar/tabbar.scss @@ -1,20 +1,19 @@ @import "../../themes/ionic.globals"; :host { - position: relative; - - z-index: $z-index-toolbar; display: flex; + position: relative; align-items: center; justify-content: center; - order: 1; width: 100%; - color: var(--color); background: var(--background); + color: var(--color); + + z-index: $z-index-toolbar; } :host(.ion-color), @@ -40,22 +39,20 @@ @include position(null, null, 0, 0); @include transform-origin(0, 0); - position: absolute; - display: block; + position: absolute; width: 1px; height: 2px; - background: currentColor; - transform: translateZ(0); + background: currentColor; + &.animated { transition-duration: 300ms; transition-property: transform; transition-timing-function: cubic-bezier(.4, 0, .2, 1); - will-change: transform; } } @@ -77,8 +74,8 @@ ion-scroll { } .scroll-inner { - position: relative; display: flex; + position: relative; flex-direction: row; } diff --git a/core/src/components/tabs/tabs.scss b/core/src/components/tabs/tabs.scss index 269e410f0c..969f283f51 100644 --- a/core/src/components/tabs/tabs.scss +++ b/core/src/components/tabs/tabs.scss @@ -3,11 +3,8 @@ :host { @include position(0, 0, 0, 0); - position: absolute; - - z-index: $z-index-page-container; - display: flex; + position: absolute; flex-direction: column; @@ -15,6 +12,7 @@ height: 100%; contain: layout size style; + z-index: $z-index-page-container; } .tabs-inner { diff --git a/core/src/components/text/text.scss b/core/src/components/text/text.scss index 16b058da5f..1f5cd74686 100644 --- a/core/src/components/text/text.scss +++ b/core/src/components/text/text.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- :host { - color: #{current-color(base)}; - --ion-color-base: currentColor; + + color: #{current-color(base)}; } diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss index cbf0d2e4dc..7b74e46607 100644 --- a/core/src/components/textarea/textarea.ios.scss +++ b/core/src/components/textarea/textarea.ios.scss @@ -5,13 +5,12 @@ // -------------------------------------------------- :host { - font-family: $textarea-ios-font-family; - font-size: $textarea-ios-font-size; - --padding-top: #{$textarea-ios-padding-top}; --padding-end: #{$textarea-ios-padding-end}; --padding-bottom: #{$textarea-ios-padding-bottom}; --padding-start: #{$textarea-ios-padding-start}; - --placeholder-color: #{$textarea-ios-placeholder-color}; + + font-family: $textarea-ios-font-family; + font-size: $textarea-ios-font-size; } diff --git a/core/src/components/textarea/textarea.ios.vars.scss b/core/src/components/textarea/textarea.ios.vars.scss index 2388e695b5..091f2a156d 100644 --- a/core/src/components/textarea/textarea.ios.vars.scss +++ b/core/src/components/textarea/textarea.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS Textarea diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss index 76c16622d6..1a5eaba596 100644 --- a/core/src/components/textarea/textarea.md.scss +++ b/core/src/components/textarea/textarea.md.scss @@ -5,13 +5,12 @@ // -------------------------------------------------- :host { - font-family: $textarea-md-font-family; - font-size: $textarea-md-font-size; - --padding-top: #{$textarea-md-padding-top}; --padding-end: #{$textarea-md-padding-end}; --padding-bottom: #{$textarea-md-padding-bottom}; --padding-start: #{$textarea-md-padding-start}; - --placeholder-color: #{$textarea-md-placeholder-color}; + + font-family: $textarea-md-font-family; + font-size: $textarea-md-font-size; } diff --git a/core/src/components/textarea/textarea.md.vars.scss b/core/src/components/textarea/textarea.md.vars.scss index c27fa964d0..0a19ce35f9 100644 --- a/core/src/components/textarea/textarea.md.vars.scss +++ b/core/src/components/textarea/textarea.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design Textarea diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index b39316069b..53ff4c0bb5 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -4,20 +4,19 @@ // -------------------------------------------------- :host { - box-sizing: border-box; - position: relative; - display: block; - - flex: 1; - - width: 100%; - --padding-top: 0; --padding-end: 0; --padding-bottom: 0; --padding-start: 0; - --border-radius: 0; + + display: block; + position: relative; + + flex: 1; + + width: 100%; + box-sizing: border-box; } // Textarea Within An Item @@ -37,7 +36,6 @@ @include margin(0); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); - box-sizing: border-box; display: block; width: 100%; @@ -46,13 +44,15 @@ border: 0; outline: none; - font-family: inherit; - font-size: inherit; - font-weight: inherit; - letter-spacing: inherit; background: transparent; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + + letter-spacing: inherit; + box-sizing: border-box; resize: none; appearance: none; } diff --git a/core/src/components/title/title.scss b/core/src/components/title/title.scss index adc9f6f5c3..9109e9bbc4 100644 --- a/core/src/components/title/title.scss +++ b/core/src/components/title/title.scss @@ -14,12 +14,13 @@ .toolbar-title { display: block; - overflow: hidden; width: 100%; text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; pointer-events: auto; } diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss index a11b04ec1b..93c6221c63 100644 --- a/core/src/components/toast/toast.ios.scss +++ b/core/src/components/toast/toast.ios.scss @@ -13,19 +13,18 @@ @include margin(auto); @include border-radius($toast-ios-border-radius); - position: absolute; - - z-index: $z-index-overlay-wrapper; display: block; + position: absolute; max-width: $toast-max-width; background: $toast-ios-background-color; + + z-index: $z-index-overlay-wrapper; } .toast-translucent-ios .toast-wrapper { background: $toast-ios-translucent-background-color; - backdrop-filter: $toast-ios-translucent-filter; } @@ -48,9 +47,9 @@ .toast-ios .toast-message { @include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start); - font-size: $toast-ios-title-font-size; - color: $toast-ios-title-color; + + font-size: $toast-ios-title-font-size; } .toast-ios .toast-button { diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss index 3207737345..c611dc7ce7 100644 --- a/core/src/components/toast/toast.md.scss +++ b/core/src/components/toast/toast.md.scss @@ -12,15 +12,15 @@ @include position-horizontal(0, 0); @include margin(auto); - position: absolute; - - z-index: $z-index-overlay-wrapper; display: block; + position: absolute; width: $toast-width; max-width: $toast-max-width; background: $toast-md-background; + + z-index: $z-index-overlay-wrapper; } .toast-md .toast-wrapper.toast-top { @@ -42,7 +42,7 @@ .toast-md .toast-message { @include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start); - font-size: $toast-md-title-font-size; - color: $toast-md-title-color; + + font-size: $toast-md-title-font-size; } diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss index e107db6064..ac415eac7a 100644 --- a/core/src/components/toast/toast.scss +++ b/core/src/components/toast/toast.scss @@ -6,25 +6,21 @@ ion-toast { @include position(0, null, null, 0); - position: absolute; - - z-index: $z-index-overlay; - display: block; + position: absolute; width: $toast-width; height: $toast-width; - pointer-events: none; - contain: strict; + z-index: $z-index-overlay; + pointer-events: none; } .toast-container { display: flex; align-items: center; - pointer-events: auto; contain: content; diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss index 9bbf675cdf..b0de8db363 100644 --- a/core/src/components/toggle/toggle.ios.scss +++ b/core/src/components/toggle/toggle.ios.scss @@ -5,16 +5,17 @@ // ----------------------------------------- :host { + --checked-background: #{current-color(base)}; + --checked-knob: #{current-color(base)}; + box-sizing: content-box; + position: relative; width: $toggle-ios-width; height: $toggle-ios-height; contain: strict; - - --checked-background: #{current-color(base)}; - --checked-knob: #{current-color(base)}; } @@ -24,16 +25,17 @@ .toggle-icon { @include border-radius($toggle-ios-border-radius); - position: relative; display: block; - overflow: hidden; + position: relative; width: 100%; height: 100%; - background-color: $toggle-ios-border-color-off; transition: background-color $toggle-ios-transition-duration; + background-color: $toggle-ios-border-color-off; + + overflow: hidden; pointer-events: none; } @@ -47,11 +49,13 @@ position: absolute; + transform: scale3d(1, 1, 1); + + transition: transform $toggle-ios-transition-duration; + background-color: $toggle-ios-background-color-off; content: ""; - transform: scale3d(1, 1, 1); - transition: transform $toggle-ios-transition-duration; } @@ -67,11 +71,11 @@ width: $toggle-ios-handle-width; height: $toggle-ios-handle-height; - background-color: $toggle-ios-handle-background-color; - box-shadow: $toggle-ios-handle-box-shadow; - transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms; + background-color: $toggle-ios-handle-background-color; + + box-shadow: $toggle-ios-handle-box-shadow; will-change: transform; contain: strict; } @@ -124,6 +128,7 @@ :host(.toggle-activated.toggle-checked) .toggle-inner { // when pressing down on the toggle and IS checked // make the knob wider and move it left a bit + @include position-horizontal($toggle-ios-border-width - 6, null); } @@ -135,7 +140,6 @@ :host(.toggle-disabled) { opacity: $toggle-ios-disabled-opacity; - pointer-events: none; } diff --git a/core/src/components/toggle/toggle.ios.vars.scss b/core/src/components/toggle/toggle.ios.vars.scss index 45263cc614..25b619217d 100644 --- a/core/src/components/toggle/toggle.ios.vars.scss +++ b/core/src/components/toggle/toggle.ios.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.ios"; - @import "../item/item.ios.vars"; // iOS Toggle diff --git a/core/src/components/toggle/toggle.md.scss b/core/src/components/toggle/toggle.md.scss index b84a9fb299..dd61167d8e 100644 --- a/core/src/components/toggle/toggle.md.scss +++ b/core/src/components/toggle/toggle.md.scss @@ -5,6 +5,9 @@ // ----------------------------------------- :host { + --checked-background: #{current-color(base, $toggle-md-track-background-color-alpha-on)}; + --checked-knob: #{current-color(base)}; + @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start); box-sizing: content-box; @@ -15,9 +18,6 @@ height: $toggle-md-track-height; contain: strict; - - --checked-background: #{current-color(base, $toggle-md-track-background-color-alpha-on)}; - --checked-knob: #{current-color(base)}; } @@ -27,16 +27,15 @@ .toggle-icon { @include border-radius($toggle-md-track-height); - position: relative; display: block; + position: relative; width: 100%; height: 100%; - background-color: $toggle-md-track-background-color-off; - transition: background-color $toggle-md-transition-duration; + background-color: $toggle-md-track-background-color-off; pointer-events: none; } @@ -53,15 +52,13 @@ width: $toggle-md-handle-width; height: $toggle-md-handle-height; - background-color: $toggle-md-handle-background-color-off; - - box-shadow: $toggle-md-handle-box-shadow; - transition-duration: $toggle-md-transition-duration; transition-property: transform, background-color; - will-change: transform, background-color; + background-color: $toggle-md-handle-background-color-off; + box-shadow: $toggle-md-handle-box-shadow; + will-change: transform, background-color; contain: strict; } @@ -88,7 +85,6 @@ :host(.toggle-disabled) { opacity: $toggle-md-disabled-opacity; - pointer-events: none; } diff --git a/core/src/components/toggle/toggle.md.vars.scss b/core/src/components/toggle/toggle.md.vars.scss index 1ad36dc09b..ae51949e4a 100644 --- a/core/src/components/toggle/toggle.md.vars.scss +++ b/core/src/components/toggle/toggle.md.vars.scss @@ -1,5 +1,4 @@ @import "../../themes/ionic.globals.md"; - @import "../item/item.md.vars"; // Material Design Toggle diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss index 7ddec97a71..322aa8d320 100644 --- a/core/src/components/toggle/toggle.scss +++ b/core/src/components/toggle/toggle.scss @@ -7,12 +7,13 @@ --ion-color-base: #{ion-color(primary, base)}; --ion-color-base-rgb: #{ion-color(primary, base, null, true)}; + // TODO can we remove important here + /* stylelint-disable-next-line declaration-no-important */ box-sizing: content-box !important; display: inline-block; contain: content; - touch-action: none; user-select: none; } diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss index 34f00a68bd..1ab3b0e2af 100644 --- a/core/src/components/toolbar/toolbar.ios.scss +++ b/core/src/components/toolbar/toolbar.ios.scss @@ -5,10 +5,8 @@ // -------------------------------------------------- :host { - // default color / background --ion-color-base: #{$toolbar-ios-background-color}; --ion-color-contrast: #{$toolbar-ios-text-color}; - --border-color: #{$toolbar-ios-border-color}; --translucent-filter: #{$toolbar-ios-translucent-filter}; @@ -33,19 +31,19 @@ @include position(0, null, null, 0); @include padding(0, 90px, 0); - box-sizing: border-box; - position: absolute; width: 100%; height: 100%; - font-size: $toolbar-ios-title-font-size; - font-weight: $toolbar-ios-title-font-weight; - letter-spacing: -.03em; transform: translateZ(0); - text-align: $toolbar-ios-title-text-align; + font-size: $toolbar-ios-title-font-size; + font-weight: $toolbar-ios-title-font-weight; + letter-spacing: -.03em; + + text-align: $toolbar-ios-title-text-align; + box-sizing: border-box; pointer-events: none; } diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss index a2bae7c19b..eead1f213e 100644 --- a/core/src/components/toolbar/toolbar.md.scss +++ b/core/src/components/toolbar/toolbar.md.scss @@ -5,17 +5,15 @@ // -------------------------------------------------- :host { + --ion-color-base: #{$toolbar-md-background-color}; + --ion-color-contrast: #{$toolbar-md-text-color}; + --border-color: #{$toolbar-md-border-color}; + @include padding($toolbar-md-padding); min-height: #{$toolbar-md-height}; font-family: #{$toolbar-md-font-family}; - - // default color / background - --ion-color-base: #{$toolbar-md-background-color}; - --ion-color-contrast: #{$toolbar-md-text-color}; - - --border-color: #{$toolbar-md-border-color}; } diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss index 7a31b300ba..263e929005 100644 --- a/core/src/components/toolbar/toolbar.scss +++ b/core/src/components/toolbar/toolbar.scss @@ -11,12 +11,8 @@ @include font-smoothing(); - box-sizing: border-box; - position: relative; - z-index: $z-index-toolbar; - display: flex; - overflow: hidden; + position: relative; flex-direction: row; align-items: center; @@ -27,7 +23,9 @@ color: #{current-color(contrast)}; contain: content; - + overflow: hidden; + z-index: $z-index-toolbar; + box-sizing: border-box; backdrop-filter: var(--backdrop-filter); } @@ -44,16 +42,17 @@ @include position(0, 0, 0, 0); position: absolute; - z-index: $z-index-toolbar-background; + + transform: translateZ(0); border-width: var(--border-width); border-style: var(--border-style); border-color: var(--border-color); - background: var(--background); - opacity: var(--opacity); - transform: translateZ(0); - pointer-events: none; + background: var(--background); contain: strict; + opacity: var(--opacity); + z-index: $z-index-toolbar-background; + pointer-events: none; } diff --git a/core/src/components/virtual-scroll/virtual-scroll.scss b/core/src/components/virtual-scroll/virtual-scroll.scss index fa32d06dfd..f3e159dc06 100644 --- a/core/src/components/virtual-scroll/virtual-scroll.scss +++ b/core/src/components/virtual-scroll/virtual-scroll.scss @@ -1,8 +1,8 @@ @import "../../themes/ionic.globals"; ion-virtual-scroll { - position: relative; display: block; + position: relative; width: 100%; @@ -19,6 +19,5 @@ ion-virtual-scroll { position: absolute; transition-duration: 0ms; - will-change: transform; } diff --git a/core/src/css/ionic.scss b/core/src/css/ionic.scss index 71dc9a052f..a73ef4d496 100644 --- a/core/src/css/ionic.scss +++ b/core/src/css/ionic.scss @@ -2,7 +2,6 @@ @import "./structure"; @import "./typography"; @import "./colors"; - @import "./padding"; @import "./float-elements"; @import "./text-alignment"; diff --git a/core/src/css/padding.scss b/core/src/css/padding.scss index e9522a86dc..4951445326 100644 --- a/core/src/css/padding.scss +++ b/core/src/css/padding.scss @@ -14,59 +14,59 @@ $margin: var(--ion-margin, 16px); // -------------------------------------------------- [no-padding] { - @include padding(0); - --padding-start: 0; --padding-end: 0; --padding-top: 0; --padding-bottom: 0; + + @include padding(0); } [padding] { - @include padding($padding); - --padding-start: #{$padding}; --padding-end: #{$padding}; --padding-top: #{$padding}; --padding-bottom: #{$padding}; + + @include padding($padding); } [padding-top] { - @include padding($padding, null, null, null); - --padding-top: #{$padding}; + + @include padding($padding, null, null, null); } [padding-start] { - @include padding-horizontal($padding, null); - --padding-start: #{$padding}; + + @include padding-horizontal($padding, null); } [padding-end] { - @include padding-horizontal(null, $padding); - --padding-end: #{$padding}; + + @include padding-horizontal(null, $padding); } [padding-bottom] { - @include padding(null, null, $padding, null); - --padding-bottom: #{$padding}; + + @include padding(null, null, $padding, null); } [padding-vertical] { - @include padding($padding, null, $padding, null); - --padding-top: #{$padding}; --padding-bottom: #{$padding}; + + @include padding($padding, null, $padding, null); } [padding-horizontal] { - @include padding-horizontal($padding); - --padding-start: #{$padding}; --padding-end: #{$padding}; + + @include padding-horizontal($padding); } @@ -86,7 +86,7 @@ $margin: var(--ion-margin, 16px); } [margin-left] { - // scss-lint:disable PropertySpelling + /* stylelint-disable-next-line property-blacklist */ margin-left: $margin; } @@ -95,7 +95,7 @@ $margin: var(--ion-margin, 16px); } [margin-right] { - // scss-lint:disable PropertySpelling + /* stylelint-disable-next-line property-blacklist */ margin-right: $margin; } diff --git a/core/src/css/structure.scss b/core/src/css/structure.scss index e1f458c3ab..b95c229161 100644 --- a/core/src/css/structure.scss +++ b/core/src/css/structure.scss @@ -27,7 +27,6 @@ body { @include padding(0); position: fixed; - overflow: hidden; width: 100%; max-width: 100%; @@ -36,20 +35,23 @@ body { text-rendering: optimizeLegibility; + overflow: hidden; + + touch-action: manipulation; + user-select: none; + -webkit-user-drag: none; -ms-content-zooming: none; - touch-action: manipulation; word-wrap: break-word; overscroll-behavior-y: contain; text-size-adjust: none; - user-select: none; } [hidden] { - // scss-lint:disable ImportantRule + /* stylelint-disable-next-line declaration-no-important */ display: none !important; } diff --git a/core/src/css/text-transformation.scss b/core/src/css/text-transformation.scss index aa0c3742a4..148d024a5d 100644 --- a/core/src/css/text-transformation.scss +++ b/core/src/css/text-transformation.scss @@ -12,17 +12,17 @@ // Provide `[text-{bp}]` attributes for transforming the text based // on the breakpoint [text#{$infix}-uppercase] { - // scss-lint:disable ImportantRule + /* stylelint-disable-next-line declaration-no-important */ text-transform: uppercase !important; } [text#{$infix}-lowercase] { - // scss-lint:disable ImportantRule + /* stylelint-disable-next-line declaration-no-important */ text-transform: lowercase !important; } [text#{$infix}-capitalize] { - // scss-lint:disable ImportantRule + /* stylelint-disable-next-line declaration-no-important */ text-transform: capitalize !important; } } diff --git a/core/src/css/typography.scss b/core/src/css/typography.scss index d228f072ac..a7be810c23 100644 --- a/core/src/css/typography.scss +++ b/core/src/css/typography.scss @@ -32,20 +32,20 @@ $h6-font-size: calc(#{$h1-font-size} - #{$h-step} * 5) !default; :root[mode=ios] { - font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif; - --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif; + + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif; } :root[mode=md] { - font-family: "Roboto", "Helvetica Neue", sans-serif; - --ion-font-family: "Roboto", "Helvetica Neue", sans-serif; + + font-family: "Roboto", "Helvetica Neue", sans-serif; } a { - color: ion-color(primary, base); background-color: transparent; + color: ion-color(primary, base); } h1, @@ -57,6 +57,7 @@ h6 { @include margin(16px, null, 10px, null); font-weight: $headings-font-weight; + line-height: $headings-line-height; } @@ -97,7 +98,9 @@ sup { position: relative; font-size: 75%; + line-height: 0; + vertical-align: baseline; } diff --git a/core/src/themes/ionic.globals.scss b/core/src/themes/ionic.globals.scss index 0369cbbc71..d893bb0bf8 100644 --- a/core/src/themes/ionic.globals.scss +++ b/core/src/themes/ionic.globals.scss @@ -141,23 +141,23 @@ $font-size-base: var(--ion-font-size-base, 14px) !default; // // -------------------------------------------------- // Grouped by elements which would be siblings -$z-index-menu-overlay: 80; // scss-lint:disable DefaultRule -$z-index-overlay: 1000; // scss-lint:disable DefaultRule -$z-index-click-block: 99999; // scss-lint:disable DefaultRule +$z-index-menu-overlay: 80; +$z-index-overlay: 1000; +$z-index-click-block: 99999; -$z-index-fixed-content: 999; // scss-lint:disable DefaultRule -$z-index-scroll-content: 1; // scss-lint:disable DefaultRule -$z-index-refresher: 0; // scss-lint:disable DefaultRule +$z-index-fixed-content: 999; +$z-index-scroll-content: 1; +$z-index-refresher: 0; -$z-index-page-container: 0; // scss-lint:disable DefaultRule -$z-index-toolbar: 10; // scss-lint:disable DefaultRule -$z-index-toolbar-background: -1; // scss-lint:disable DefaultRule -$z-index-toolbar-buttons: 99; // scss-lint:disable DefaultRule +$z-index-page-container: 0; +$z-index-toolbar: 10; +$z-index-toolbar-background: -1; +$z-index-toolbar-buttons: 99; -$z-index-backdrop: 2; // scss-lint:disable DefaultRule -$z-index-overlay-wrapper: 10; // scss-lint:disable DefaultRule +$z-index-backdrop: 2; +$z-index-overlay-wrapper: 10; -$z-index-item-options: 1; // scss-lint:disable DefaultRule -$z-index-item-divider: 100; // scss-lint:disable DefaultRule +$z-index-item-options: 1; +$z-index-item-divider: 100; -$z-index-reorder-selected: 100; // scss-lint:disable DefaultRule +$z-index-reorder-selected: 100;