From a1346a9e899e9b87ff959995f53f57744a75c6a4 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 28 Mar 2018 18:23:43 -0400 Subject: [PATCH] style(sass): update sass linters and fix lint errors --- core/.sass-lint.yml | 5 ++ core/.scss-lint.yml | 5 ++ .../components/action-sheet/action-sheet.scss | 4 +- core/src/components/alert/alert.ios.scss | 4 +- core/src/components/alert/alert.md.scss | 4 +- .../back-button/back-button.md.scss | 8 +- .../components/back-button/back-button.scss | 19 +++-- core/src/components/checkbox/checkbox.scss | 2 - .../components/fab-button/fab-button.ios.scss | 4 +- .../fab-button/fab-button.ios.vars.scss | 2 +- core/src/components/fab/fab.scss | 2 +- core/src/components/hide-when/hide-when.scss | 3 +- .../components/item-divider/item-divider.scss | 1 - core/src/components/item/item.mixins.scss | 2 +- core/src/components/item/item.scss | 3 +- core/src/components/radio/radio.scss | 3 +- core/src/components/reorder/reorder.scss | 4 +- core/src/components/show-when/show-when.scss | 3 +- core/src/components/title/title.ios.scss | 3 +- core/src/components/toggle/toggle.scss | 5 +- core/src/themes/css/default.css | 78 +++++++++---------- core/src/themes/css/oceanic.css | 16 ++-- core/src/themes/ionic.theme.default.ios.scss | 4 +- 23 files changed, 95 insertions(+), 89 deletions(-) diff --git a/core/.sass-lint.yml b/core/.sass-lint.yml index 25ae045721..a83c846688 100644 --- a/core/.sass-lint.yml +++ b/core/.sass-lint.yml @@ -11,6 +11,7 @@ files: include: 'src/**/*.s+(a|c)ss' ignore: + - 'src/themes/ionic.functions.color.scss' - 'src/themes/ionic.mixins.scss' - 'src/themes/license.scss' - 'src/themes/normalize.scss' @@ -18,6 +19,7 @@ files: - '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 @@ -46,6 +48,8 @@ rules: - 1 - 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: @@ -71,6 +75,7 @@ rules: - z-index - display - overflow + - overscroll-behavior - clear - - flex diff --git a/core/.scss-lint.yml b/core/.scss-lint.yml index 3c1d7fa782..7435b45d92 100644 --- a/core/.scss-lint.yml +++ b/core/.scss-lint.yml @@ -7,6 +7,8 @@ plugin_directories: ['.scss-linters'] scss_files: 'src/**/*.scss' exclude: + - '*.css' + - 'src/themes/ionic.functions.color.scss' - 'src/themes/ionic.mixins.scss' - 'src/themes/license.scss' - 'src/themes/normalize.scss' @@ -48,6 +50,7 @@ linters: - z-index - display - overflow + - overscroll-behavior - clear - - flex @@ -198,6 +201,8 @@ linters: PropertySpelling: extra_properties: - contain + - overscroll-behavior + - overscroll-behavior-y disabled_properties: - background-position - direction diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss index 431093ec9e..b90e591c18 100644 --- a/core/src/components/action-sheet/action-sheet.scss +++ b/core/src/components/action-sheet/action-sheet.scss @@ -68,11 +68,11 @@ ion-action-sheet { .action-sheet-group { overflow: scroll; + overscroll-behavior: contain; + flex-shrink: 2; pointer-events: all; - - overscroll-behavior: contain; } .action-sheet-group-cancel { diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss index dbca360a38..c2846d3e8b 100644 --- a/core/src/components/alert/alert.ios.scss +++ b/core/src/components/alert/alert.ios.scss @@ -101,13 +101,13 @@ .alert-ios .alert-checkbox-group { overflow: scroll; + overscroll-behavior: contain; + max-height: $alert-ios-content-max-height; border-top: $alert-ios-list-border-top; -webkit-overflow-scrolling: touch; - - overscroll-behavior: contain; } .alert-ios .alert-tappable { diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss index ff06db6376..2d93c63d75 100644 --- a/core/src/components/alert/alert.md.scss +++ b/core/src/components/alert/alert.md.scss @@ -113,9 +113,9 @@ flex: 1; + font-size: $alert-md-radio-label-font-size; text-overflow: ellipsis; white-space: nowrap; - font-size: $alert-md-radio-label-font-size; color: $alert-md-radio-label-text-color; } @@ -182,9 +182,9 @@ flex: 1; + font-size: $alert-md-checkbox-label-font-size; text-overflow: ellipsis; white-space: nowrap; - font-size: $alert-md-checkbox-label-font-size; color: $alert-md-checkbox-label-text-color; } diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss index 798857c7fb..dda9e7a7c3 100644 --- a/core/src/components/back-button/back-button.md.scss +++ b/core/src/components/back-button/back-button.md.scss @@ -10,6 +10,7 @@ min-width: 44px; height: 32px; + border: 0; font-size: 14px; font-weight: 500; @@ -21,18 +22,19 @@ box-shadow: none; &.activated { - opacity: 0.4; + opacity: .4; } } .back-button-md ion-icon { - @include padding-horizontal(null, 0.3em); + @include padding-horizontal(null, .3em); @include margin(0); @include padding(0, 6px); @include text-align(start); font-size: 24px; font-weight: normal; - line-height: 0.67; + line-height: .67; + pointer-events: none; } diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss index 05ecf11cf2..419bc162c6 100644 --- a/core/src/components/back-button/back-button.scss +++ b/core/src/components/back-button/back-button.scss @@ -19,7 +19,13 @@ position: relative; z-index: 0; - display: inline-block; + display: flex; + + flex-flow: row nowrap; + flex-shrink: 0; + + align-items: center; + justify-content: center; border: 0; outline: none; @@ -32,21 +38,14 @@ white-space: nowrap; cursor: pointer; + vertical-align: top; // the better option for most scenarios vertical-align: -webkit-baseline-middle; // the best for those that support it transition: background-color, opacity 100ms linear; - font-kerning: none; user-select: none; - - display: flex; - - flex-flow: row nowrap; - flex-shrink: 0; - align-items: center; - justify-content: center; - + font-kerning: none; } .back-button .button-inner { diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss index e3a4670e65..e0d2f71144 100644 --- a/core/src/components/checkbox/checkbox.scss +++ b/core/src/components/checkbox/checkbox.scss @@ -21,8 +21,6 @@ ion-checkbox input { background: transparent; cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; appearance: none; } diff --git a/core/src/components/fab-button/fab-button.ios.scss b/core/src/components/fab-button/fab-button.ios.scss index 27e8d6fe86..143d16ac95 100755 --- a/core/src/components/fab-button/fab-button.ios.scss +++ b/core/src/components/fab-button/fab-button.ios.scss @@ -23,9 +23,9 @@ } .fab-button-ios .icon { - fill: $fab-ios-icon-fill-color; - font-size: $fab-ios-icon-font-size; + + fill: $fab-ios-icon-fill-color; } // FAB buttons in a list diff --git a/core/src/components/fab-button/fab-button.ios.vars.scss b/core/src/components/fab-button/fab-button.ios.vars.scss index f308b3f24d..a976c9d497 100755 --- a/core/src/components/fab-button/fab-button.ios.vars.scss +++ b/core/src/components/fab-button/fab-button.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Box shadow of the FAB button -$fab-ios-box-shadow: 0px 4px 16px rgba(0, 0, 0, .12) !default; +$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !default; /// @prop - Box shadow of the activated FAB button $fab-ios-box-shadow-activated: $fab-ios-box-shadow !default; diff --git a/core/src/components/fab/fab.scss b/core/src/components/fab/fab.scss index c8a550ec3d..737806f667 100644 --- a/core/src/components/fab/fab.scss +++ b/core/src/components/fab/fab.scss @@ -71,4 +71,4 @@ ion-fab { @include margin(-$fab-size / 2, null, null, null); top: 50%; -} \ No newline at end of file +} diff --git a/core/src/components/hide-when/hide-when.scss b/core/src/components/hide-when/hide-when.scss index d5106903af..1e231d4682 100644 --- a/core/src/components/hide-when/hide-when.scss +++ b/core/src/components/hide-when/hide-when.scss @@ -3,5 +3,6 @@ ion-hide-when.show-content { } ion-hide-when.hide-content { + // scss-lint:disable ImportantRule display: none !important; -} \ No newline at end of file +} diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index 7145b7f4ec..5ff0a81671 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -23,7 +23,6 @@ ion-item-divider { } ion-item-divider[sticky] { - position: -webkit-sticky; position: sticky; top: 0; } diff --git a/core/src/components/item/item.mixins.scss b/core/src/components/item/item.mixins.scss index 05e9dd1eee..3c5ceeb550 100644 --- a/core/src/components/item/item.mixins.scss +++ b/core/src/components/item/item.mixins.scss @@ -6,4 +6,4 @@ $item-detail-push-svg: ""; @include svg-background-image($item-detail-push-svg, true); -} \ No newline at end of file +} diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 5a1c2dfe7a..09b4fc8c65 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -98,5 +98,6 @@ ion-item-group { .item-disabled { cursor: default; opacity: .4; + pointer-events: none; -} \ No newline at end of file +} diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss index d904a2ab8f..9a40e5ac3d 100644 --- a/core/src/components/radio/radio.scss +++ b/core/src/components/radio/radio.scss @@ -23,8 +23,7 @@ ion-radio input { background: transparent; cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; + appearance: none; &:active, diff --git a/core/src/components/reorder/reorder.scss b/core/src/components/reorder/reorder.scss index bf507e6aaf..ba0ebdad50 100644 --- a/core/src/components/reorder/reorder.scss +++ b/core/src/components/reorder/reorder.scss @@ -13,7 +13,6 @@ display: block; cursor: grab; - cursor: -webkit-grab; pointer-events: all; touch-action: none; @@ -22,7 +21,6 @@ .reorder-selected, .reorder-selected .reorder { cursor: grabbing; - cursor: -webkit-grabbing; } .reorder-selected { @@ -32,7 +30,7 @@ box-shadow: 0 0 10px rgba(0, 0, 0, .4); opacity: .8; - // TODO remove !important + // scss-lint:disable ImportantRule transition: none !important; } diff --git a/core/src/components/show-when/show-when.scss b/core/src/components/show-when/show-when.scss index 15b3bd1d65..8810f05076 100644 --- a/core/src/components/show-when/show-when.scss +++ b/core/src/components/show-when/show-when.scss @@ -3,5 +3,6 @@ ion-show-when.show-content { } ion-show-when.hide-content { + // scss-lint:disable ImportantRule display: none !important; -} \ No newline at end of file +} diff --git a/core/src/components/title/title.ios.scss b/core/src/components/title/title.ios.scss index 907d2bceb2..3071bf81f7 100644 --- a/core/src/components/title/title.ios.scss +++ b/core/src/components/title/title.ios.scss @@ -23,10 +23,11 @@ font-size: $toolbar-ios-title-font-size; font-weight: $toolbar-ios-title-font-weight; - color: $toolbar-ios-title-text-color; letter-spacing: -.03em; + color: $toolbar-ios-title-text-color; + pointer-events: auto; } diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss index 2e860e336c..340538fda3 100644 --- a/core/src/components/toggle/toggle.scss +++ b/core/src/components/toggle/toggle.scss @@ -53,15 +53,12 @@ ion-toggle input { width: 100%; height: 100%; + border: 0; background: transparent; cursor: pointer; - border: 0; pointer-events: none; - // touch-action: pan-x; - -webkit-appearance: none; - -moz-appearance: none; appearance: none; } diff --git a/core/src/themes/css/default.css b/core/src/themes/css/default.css index 31ad3e5323..68e9f0f3d7 100644 --- a/core/src/themes/css/default.css +++ b/core/src/themes/css/default.css @@ -15,107 +15,107 @@ --ion-alpha-highest: .9; --ion-color-primary: #488aff; --ion-color-primary-rgb: 72,138,255; - --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast: #fff; --ion-color-primary-contrast-rgb: 255,255,255; --ion-color-primary-shade: #3f79e0; --ion-color-primary-tint: #5a96ff; --ion-color-secondary: #32db64; --ion-color-secondary-rgb: 50,219,100; - --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast: #fff; --ion-color-secondary-contrast-rgb: 255,255,255; --ion-color-secondary-shade: #2cc158; --ion-color-secondary-tint: #47df74; --ion-color-tertiary: #f4a942; --ion-color-tertiary-rgb: 244,169,66; - --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast: #fff; --ion-color-tertiary-contrast-rgb: 255,255,255; --ion-color-tertiary-shade: #d7953a; --ion-color-tertiary-tint: #f5b255; --ion-color-success: #10dc60; --ion-color-success-rgb: 16,220,96; - --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast: #fff; --ion-color-success-contrast-rgb: 255,255,255; --ion-color-success-shade: #0ec254; --ion-color-success-tint: #28e070; --ion-color-warning: #ffce00; --ion-color-warning-rgb: 255,206,0; - --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast: #000; --ion-color-warning-contrast-rgb: 0,0,0; --ion-color-warning-shade: #e0b500; --ion-color-warning-tint: #ffd31a; --ion-color-danger: #f53d3d; --ion-color-danger-rgb: 245,61,61; - --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast: #fff; --ion-color-danger-contrast-rgb: 255,255,255; --ion-color-danger-shade: #d83636; --ion-color-danger-tint: #f65050; --ion-color-light: #f4f4f4; --ion-color-light-rgb: 244,244,244; - --ion-color-light-contrast: #000000; + --ion-color-light-contrast: #000; --ion-color-light-contrast-rgb: 0,0,0; --ion-color-light-shade: #d7d7d7; --ion-color-light-tint: #f5f5f5; --ion-color-medium: #989aa2; --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; + --ion-color-medium-contrast: #000; --ion-color-medium-contrast-rgb: 0,0,0; --ion-color-medium-shade: #86888f; --ion-color-medium-tint: #a2a4ab; - --ion-color-dark: #222222; + --ion-color-dark: #222; --ion-color-dark-rgb: 34,34,34; - --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast: #fff; --ion-color-dark-contrast-rgb: 255,255,255; --ion-color-dark-shade: #1e1e1e; --ion-color-dark-tint: #383838; - --ion-backdrop-color: #000000; + --ion-backdrop-color: #000; --ion-overlay-background-color: #fafafa; - --ion-ripple-background-color: #000000; - --ion-background-color: #ffffff; - --ion-background-color-rgb: 255,255,255; + --ion-ripple-background-color: #000; + --ion-background-color: #fff; + --ion-background-color-rgb: 255, 255, 255; --ion-background-color-step-50: #f2f2f2; --ion-background-color-step-100: #e6e6e6; --ion-background-color-step-150: #d9d9d9; - --ion-background-color-step-200: #cccccc; + --ion-background-color-step-200: #ccc; --ion-background-color-step-250: #bfbfbf; --ion-background-color-step-300: #b3b3b3; --ion-background-color-step-350: #a6a6a6; - --ion-background-color-step-400: #999999; + --ion-background-color-step-400: #999; --ion-background-color-step-450: #8c8c8c; --ion-background-color-step-500: #808080; --ion-background-color-step-550: #737373; - --ion-background-color-step-600: #666666; + --ion-background-color-step-600: #666; --ion-background-color-step-650: #595959; --ion-background-color-step-700: #4d4d4d; --ion-background-color-step-750: #404040; - --ion-background-color-step-800: #333333; + --ion-background-color-step-800: #333; --ion-background-color-step-850: #262626; --ion-background-color-step-900: #191919; --ion-background-color-step-950: #0d0d0d; - --ion-background-color-step-1000: #000000; + --ion-background-color-step-1000: #000; --ion-border-color: #b2b2b2; - --ion-box-shadow-color: #000000; - --ion-text-color: #000000; + --ion-box-shadow-color: #000; + --ion-text-color: #000; --ion-text-color-rgb: 0,0,0; --ion-text-color-step-50: #0d0d0d; --ion-text-color-step-100: #1a1a1a; --ion-text-color-step-150: #262626; - --ion-text-color-step-200: #333333; + --ion-text-color-step-200: #333; --ion-text-color-step-250: #404040; --ion-text-color-step-300: #4d4d4d; --ion-text-color-step-350: #595959; - --ion-text-color-step-400: #666666; + --ion-text-color-step-400: #666; --ion-text-color-step-450: #737373; --ion-text-color-step-500: #808080; --ion-text-color-step-550: #8c8c8c; - --ion-text-color-step-600: #999999; + --ion-text-color-step-600: #999; --ion-text-color-step-650: #a6a6a6; --ion-text-color-step-700: #b3b3b3; --ion-text-color-step-750: #bfbfbf; - --ion-text-color-step-800: #cccccc; + --ion-text-color-step-800: #ccc; --ion-text-color-step-850: #d9d9d9; --ion-text-color-step-900: #e6e6e6; --ion-text-color-step-950: #f2f2f2; - --ion-text-color-step-1000: #ffffff; + --ion-text-color-step-1000: #fff; --ion-tabbar-background-color: #f8f8f8; --ion-tabbar-background-color-focused: #dadada; --ion-tabbar-border-color: #b2b2b2; @@ -125,31 +125,31 @@ --ion-toolbar-border-color: #b2b2b2; --ion-toolbar-color-active: #488aff; --ion-toolbar-color-inactive: #8c8c8c; - --ion-toolbar-text-color: #000000; - --ion-item-background-color: #ffffff; - --ion-item-background-color-active: #ffffff; + --ion-toolbar-text-color: #000; + --ion-item-background-color: #fff; + --ion-item-background-color-active: #fff; --ion-item-border-color: #c8c7cc; - --ion-item-text-color: #000000; - --ion-placeholder-text-color: #999999; + --ion-item-text-color: #000; + --ion-placeholder-text-color: #999; /** iOS overrides **/ --ion-border-ios-color: #dedede; --ion-overlay-ios-background-color: #f9f9f9; - --ion-tabbar-ios-translucent-background-color: rgba(248,248,248, var(--ion-alpha-ios-high, var(--ion-alpha-high, 0.8))); - --ion-tabbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, 0.2))); + --ion-tabbar-ios-translucent-background-color: rgba(248, 248, 248, var(--ion-alpha-ios-high, var(--ion-alpha-high, .8))); + --ion-tabbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, .2))); --ion-tabbar-ios-text-color-active: var(--ion-color-ios-primary, var(--ion-color-primary, #488aff)); - --ion-toolbar-ios-translucent-background-color: rgba(248, 248, 248, var(--ion-alpha-ios-high, var(--ion-alpha-high, 0.8))); - --ion-toolbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, 0.2))); + --ion-toolbar-ios-translucent-background-color: rgba(248, 248, 248, var(--ion-alpha-ios-high, var(--ion-alpha-high, .8))); + --ion-toolbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, .2))); --ion-item-ios-background-color: var(--ion-background-ios-color, var(--ion-background-color, #fff)); --ion-item-ios-background-color-active: #d9d9d9; /** MD overrides **/ - --ion-alpha-md-focused: 0.1; - --ion-alpha-md-border-low: 0.07; + --ion-alpha-md-focused: .1; + --ion-alpha-md-border-low: .07; --ion-border-md-color: #c1c4cd; --ion-overlay-md-background-color: #fafafa; - --ion-tabbar-md-border-color: rgba(0, 0, 0, var(--ion-alpha-md-border-low, var(--ion-alpha-border-low, 0.07))); - --ion-tabbar-md-text-color: var(--ion-text-md-color-step-400, var(--ion-text-color-step-400, #666666)); + --ion-tabbar-md-border-color: rgba(0, 0, 0, var(--ion-alpha-md-border-low, var(--ion-alpha-border-low, .07))); + --ion-tabbar-md-text-color: var(--ion-text-md-color-step-400, var(--ion-text-color-step-400, #666)); --ion-toolbar-md-border-color: var(--ion-border-md-color, var(--ion-border-color, #c1c4cd)); --ion-toolbar-md-color-active: #4a4a4a; --ion-toolbar-md-text-color: #424242; diff --git a/core/src/themes/css/oceanic.css b/core/src/themes/css/oceanic.css index 7afd20fc22..6fcb7bf05a 100644 --- a/core/src/themes/css/oceanic.css +++ b/core/src/themes/css/oceanic.css @@ -14,7 +14,7 @@ --ion-alpha-high: .8; --ion-alpha-highest: .9; --ion-color-primary: #549ee7; - --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast: #fff; --ion-color-primary-contrast-rgb: 255,255,255; --ion-color-primary-rgb: 84,158,231; --ion-color-primary-shade: #498bce; @@ -32,19 +32,19 @@ --ion-color-tertiary-shade: #eab30f; --ion-color-tertiary-tint: #ffd36a; --ion-color-success: #90d089; - --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast: #fff; --ion-color-success-contrast-rgb: 255,255,255; --ion-color-success-rgb: 144,208,137; --ion-color-success-shade: #81bc7b; --ion-color-success-tint: #a1eb9a; --ion-color-warning: #f99157; - --ion-color-warning-contrast: #ffffff; + --ion-color-warning-contrast: #fff; --ion-color-warning-contrast-rgb: 255,255,255; --ion-color-warning-rgb: 249,145,87; --ion-color-warning-shade: #ec8a54; --ion-color-warning-tint: #ff9e60; --ion-color-danger: #ec5f67; - --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast: #fff; --ion-color-danger-contrast-rgb: 255,255,255; --ion-color-danger-rgb: 236,95,103; --ion-color-danger-shade: #cb535b; @@ -56,7 +56,7 @@ --ion-color-light-shade: #bcc1cd; --ion-color-light-tint: #ecf2ff; --ion-color-medium: #65737e; - --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast: #fff; --ion-color-medium-contrast-rgb: 255,255,255; --ion-color-medium-rgb: 101,115,126; --ion-color-medium-shade: #4f5b66; @@ -90,10 +90,10 @@ --ion-background-color-step-850: #dddfe1; --ion-background-color-step-900: #e8eaeb; --ion-background-color-step-950: #f4f4f5; - --ion-background-color-step-1000: #ffffff; + --ion-background-color-step-1000: #fff; --ion-border-color: #1b2b34; - --ion-box-shadow-color: #000000; - --ion-text-color: #ffffff; + --ion-box-shadow-color: #000; + --ion-text-color: #fff; --ion-text-color-rgb: 255,255,255; --ion-text-color-step-50: #f4f4f5; --ion-text-color-step-100: #e8eaeb; diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss index 044b214550..2b89225913 100644 --- a/core/src/themes/ionic.theme.default.ios.scss +++ b/core/src/themes/ionic.theme.default.ios.scss @@ -94,7 +94,7 @@ $overlay-ios-background-color: css-var(#f9f9f9, overlay-ios-backg // -------------------------------------------------- $tabbar-ios-background-color: css-var($tabbar-background-color, tabbar-ios-background-color) !default; $tabbar-ios-background-color-focused: css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default; -$tabbar-ios-translucent-background-color: css-var(rgb(248,248,248), tabbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove +$tabbar-ios-translucent-background-color: css-var(rgb(248, 248, 248), tabbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove $tabbar-ios-border-color: css-var(rgb(0, 0, 0), tabbar-ios-border-color, $alpha-ios-border-medium) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low)) $tabbar-ios-text-color: css-var($tabbar-text-color, tabbar-ios-text-color) !default; $tabbar-ios-text-color-active: css-var(ion-color($colors-ios, primary, base, ios), tabbar-ios-text-color-active) !default; @@ -104,7 +104,7 @@ $tabbar-ios-text-color-active: css-var(ion-color($colors-ios, pri $toolbar-ios-height: 44px !default; $toolbar-ios-padding: 4px !default; $toolbar-ios-background-color: css-var($toolbar-background-color, toolbar-ios-background-color) !default; -$toolbar-ios-translucent-background-color: css-var(rgb(248,248,248), toolbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove +$toolbar-ios-translucent-background-color: css-var(rgb(248, 248, 248), toolbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove $toolbar-ios-border-color: css-var(rgb(0, 0, 0), toolbar-ios-border-color, $alpha-ios-border-medium) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low)) $toolbar-ios-color-active: css-var(ion-color($colors-ios, primary, base, ios), toolbar-ios-color-active) !default; $toolbar-ios-color-inactive: css-var($toolbar-color-inactive, toolbar-ios-color-inactive) !default;