diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml index cadcaa38ad..0e7a49eec6 100644 --- a/core/.stylelintrc.yml +++ b/core/.stylelintrc.yml @@ -3,15 +3,17 @@ # See documentation at https://stylelint.io/ ignoreFiles: + - src/foundations/*.scss + - src/css/ionic/*.scss - src/css/core.scss - src/css/flex-utils.scss - src/css/normalize.scss - src/css/text-alignment.scss - src/css/display.scss - - src/themes/ionic.mixins.scss - - src/themes/ionic.functions.color.scss - - src/themes/ionic.functions.string.scss - - src/themes/ionic.theme.default.scss + - src/themes/mixins.scss + - src/themes/functions.color.scss + - src/themes/functions.string.scss + - src/themes/native.theme.default.scss - src/css/themes/*.scss indentation: 2 @@ -258,10 +260,13 @@ rules: - right - left - float + - padding - padding-left - padding-right + - margin - margin-left - margin-right + - border-radius - border-top-left-radius - border-top-right-radius - border-bottom-right-radius diff --git a/core/package-lock.json b/core/package-lock.json index 30005a9858..076cb0d1ff 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -41,7 +41,7 @@ "fs-extra": "^9.0.1", "jest": "^29.7.0", "jest-cli": "^29.7.0", - "prettier": "^2.6.1", + "prettier": "^2.8.8", "rollup": "^2.26.4", "sass": "^1.33.0", "serve": "^14.0.1", @@ -8427,9 +8427,9 @@ "dev": true }, "node_modules/prettier": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.1.tgz", - "integrity": "sha512-8UVbTBYGwN37Bs9LERmxCPjdvPxlEowx2urIL6urHzdb3SDq4B/Z6xLFCblrSnE4iKWcS6ziJ3aOYrc1kz/E2A==", + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "dev": true, "bin": { "prettier": "bin-prettier.js" @@ -16657,9 +16657,9 @@ "dev": true }, "prettier": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.1.tgz", - "integrity": "sha512-8UVbTBYGwN37Bs9LERmxCPjdvPxlEowx2urIL6urHzdb3SDq4B/Z6xLFCblrSnE4iKWcS6ziJ3aOYrc1kz/E2A==", + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "dev": true }, "pretty-format": { diff --git a/core/package.json b/core/package.json index 0d22b38770..e0b46798e4 100644 --- a/core/package.json +++ b/core/package.json @@ -63,7 +63,7 @@ "fs-extra": "^9.0.1", "jest": "^29.7.0", "jest-cli": "^29.7.0", - "prettier": "^2.6.1", + "prettier": "^2.8.8", "rollup": "^2.26.4", "sass": "^1.33.0", "serve": "^14.0.1", @@ -76,7 +76,7 @@ "build.css": "npm run css.sass && npm run css.minify", "build.debug": "npm run clean && stencil build --debug", "build.docs.json": "stencil build --docs-json dist/docs.json", - "build.tokens": "node ./scripts/tokens.js && npm run lint.sass.fix", + "build.tokens": "node ./scripts/tokens.js && npm run lint.sass.fix && npm run prettier.tokens", "clean": "node scripts/clean.js", "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css", "css.sass": "sass --embed-sources --style compressed src/css:./css", @@ -88,7 +88,8 @@ "lint.ts": "npm run eslint", "lint.ts.fix": "npm run eslint -- --fix", "prerender.e2e": "node scripts/testing/prerender.js", - "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"", + "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx,scss}\"", + "prettier.tokens": "prettier \"./src/foundations/*.scss\" --write --cache", "start": "npm run build.css && stencil build --dev --watch --serve", "test": "npm run test.spec && npm run test.e2e", "test.spec": "stencil test --spec --max-workers=2", diff --git a/core/scripts/tokens.js b/core/scripts/tokens.js index c0d5451ba4..acfeacfd13 100644 --- a/core/scripts/tokens.js +++ b/core/scripts/tokens.js @@ -113,8 +113,8 @@ StyleDictionary.registerFormat({ utilityClass = `.${variablesPrefix}-${className} {\n box-shadow: $ionic-${prop.name};\n}`; break; case 'space': - utilityClass = `.${variablesPrefix}-margin-${className} {\n margin: $ionic-${prop.name};\n}; -.${variablesPrefix}-padding-${className} {\n padding: $ionic-${prop.name};\n}`; + utilityClass = `.${variablesPrefix}-margin-${className} {\n --margin-start: #{$ionic-${prop.name}};\n --margin-end: #{$ionic-${prop.name}};\n --margin-top: #{$ionic-${prop.name}};\n --margin-bottom: #{$ionic-${prop.name}};\n\n @include margin(${prop.value});\n};\n +.${variablesPrefix}-padding-${className} {\n --padding-start: #{$ionic-${prop.name}};\n --padding-end: #{$ionic-${prop.name}};\n --padding-top: #{$ionic-${prop.name}};\n --padding-bottom: #{$ionic-${prop.name}};\n\n @include padding(${prop.value});\n};\n`; break; default: utilityClass = `.${variablesPrefix}-${className} {\n ${tokenType}: $ionic-${prop.name};\n}`; @@ -123,7 +123,11 @@ StyleDictionary.registerFormat({ return utilityClass; }); - return [fileHeader({ file }), '@import "./ionic.vars";\n', utilityClasses.join('\n')].join('\n'); + return [ + fileHeader({ file }), + '@import "./ionic.vars";\n@import "../themes/mixins";\n', + utilityClasses.join('\n'), + ].join('\n'); }, }); diff --git a/core/src/components/accordion-group/accordion-group.md.scss b/core/src/components/accordion-group/accordion-group.md.scss index 158de18421..5a3e0cef12 100644 --- a/core/src/components/accordion-group/accordion-group.md.scss +++ b/core/src/components/accordion-group/accordion-group.md.scss @@ -11,7 +11,12 @@ :host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding), :host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded) { @include margin($accordion-md-expanded-margin, 0, $accordion-md-expanded-margin, 0); - @include border-radius($accordion-md-border-radius, $accordion-md-border-radius, $accordion-md-border-radius, $accordion-md-border-radius); + @include border-radius( + $accordion-md-border-radius, + $accordion-md-border-radius, + $accordion-md-border-radius, + $accordion-md-border-radius + ); } :host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-previous) { diff --git a/core/src/components/accordion-group/accordion-group.scss b/core/src/components/accordion-group/accordion-group.scss index 172e48a347..b02c96ad71 100644 --- a/core/src/components/accordion-group/accordion-group.scss +++ b/core/src/components/accordion-group/accordion-group.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "../accordion/accordion.vars"; // Accordion Group diff --git a/core/src/components/accordion/accordion.md.vars.scss b/core/src/components/accordion/accordion.md.vars.scss index 1a6ffd64a5..75f1ffe122 100644 --- a/core/src/components/accordion/accordion.md.vars.scss +++ b/core/src/components/accordion/accordion.md.vars.scss @@ -1,13 +1,14 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Accordion // -------------------------------------------------- /// @prop - Border radius applied to the accordion -$accordion-md-border-radius: 6px !default; +$accordion-md-border-radius: 6px !default; /// @prop - Box shadow of the accordion -$accordion-md-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default; +$accordion-md-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), + 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default; /// @prop - Margin of the expanded accordion -$accordion-md-expanded-margin: 16px !default; +$accordion-md-expanded-margin: 16px !default; diff --git a/core/src/components/accordion/accordion.vars.scss b/core/src/components/accordion/accordion.vars.scss index 2899324be1..627a516ea7 100644 --- a/core/src/components/accordion/accordion.vars.scss +++ b/core/src/components/accordion/accordion.vars.scss @@ -1,19 +1,19 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Accordion // -------------------------------------------------- /// @prop - Background color of the accordion -$accordion-background-color: var(--ion-background-color, #ffffff) !default; +$accordion-background-color: var(--ion-background-color, #ffffff) !default; /// @prop - Duration of the accordion transition -$accordion-transition-duration: 300ms !default; +$accordion-transition-duration: 300ms !default; /// @prop - Timing function of the accordion transition -$accordion-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1) !default; +$accordion-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1) !default; /// @prop - Opacity of the disabled accordion -$accordion-disabled-opacity: 0.4 !default; +$accordion-disabled-opacity: 0.4 !default; /// @prop - Margin of the inset accordion -$accordion-inset-margin: 16px !default; +$accordion-inset-margin: 16px !default; diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss index 672b072872..fe9bba8990 100644 --- a/core/src/components/action-sheet/action-sheet.ios.scss +++ b/core/src/components/action-sheet/action-sheet.ios.scss @@ -9,11 +9,11 @@ --backdrop-opacity: var(--ion-backdrop-opacity, 0.4); --button-background: #{$action-sheet-ios-button-background}; --button-background-activated: #{$action-sheet-ios-button-background-activated}; - --button-background-activated-opacity: .08; + --button-background-activated-opacity: 0.08; --button-background-hover: currentColor; - --button-background-hover-opacity: .04; + --button-background-hover-opacity: 0.04; --button-background-focused: currentColor; - --button-background-focused-opacity: .12; + --button-background-focused-opacity: 0.12; --button-background-selected: #{$action-sheet-ios-button-background-selected}; --button-background-selected-opacity: 1; --button-color: #{$action-sheet-ios-button-text-color}; @@ -51,10 +51,14 @@ // --------------------------------------------------- .action-sheet-container { - @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start); + @include padding( + $action-sheet-ios-padding-top, + $action-sheet-ios-padding-end, + $action-sheet-ios-padding-bottom, + $action-sheet-ios-padding-start + ); } - // iOS Action Sheet Group // --------------------------------------------------- @@ -71,7 +75,6 @@ @include margin(null, null, $action-sheet-ios-group-margin-bottom, null); } - // iOS Translucent Action Sheet // --------------------------------------------------- @@ -84,9 +87,17 @@ :host(.action-sheet-translucent) .action-sheet-title, :host(.action-sheet-translucent) .action-sheet-button { background-color: transparent; - background-image: - linear-gradient(0deg, $action-sheet-ios-translucent-background-color, $action-sheet-ios-translucent-background-color 100%), - linear-gradient(0deg, $action-sheet-ios-translucent-border-color, $action-sheet-ios-translucent-border-color 50%, $action-sheet-ios-translucent-background-color 50%); + background-image: linear-gradient( + 0deg, + $action-sheet-ios-translucent-background-color, + $action-sheet-ios-translucent-background-color 100% + ), + linear-gradient( + 0deg, + $action-sheet-ios-translucent-border-color, + $action-sheet-ios-translucent-border-color 50%, + $action-sheet-ios-translucent-background-color 50% + ); background-repeat: no-repeat; /* stylelint-disable-next-line all */ @@ -115,12 +126,16 @@ background: $action-sheet-ios-button-background; } - // iOS Action Sheet Title // --------------------------------------------------- .action-sheet-title { - @include padding($action-sheet-ios-title-padding-top, $action-sheet-ios-title-padding-end, $action-sheet-ios-title-padding-bottom, $action-sheet-ios-title-padding-start); + @include padding( + $action-sheet-ios-title-padding-top, + $action-sheet-ios-title-padding-end, + $action-sheet-ios-title-padding-bottom, + $action-sheet-ios-title-padding-start + ); color: var(--color, $action-sheet-ios-title-color); @@ -135,14 +150,18 @@ } .action-sheet-sub-title { - @include padding($action-sheet-ios-sub-title-padding-top, $action-sheet-ios-sub-title-padding-end, $action-sheet-ios-sub-title-padding-bottom, $action-sheet-ios-sub-title-padding-start); + @include padding( + $action-sheet-ios-sub-title-padding-top, + $action-sheet-ios-sub-title-padding-end, + $action-sheet-ios-sub-title-padding-bottom, + $action-sheet-ios-sub-title-padding-start + ); font-size: $action-sheet-ios-sub-title-font-size; font-weight: $action-sheet-ios-title-font-weight; } - // iOS Action Sheet Buttons // --------------------------------------------------- diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index 7aa19b4404..335f2b72c5 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -1,148 +1,163 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Action Sheet // -------------------------------------------------- /// @prop - Text align of the action sheet -$action-sheet-ios-text-align: center !default; +$action-sheet-ios-text-align: center !default; /// @prop - Padding top of the action sheet -$action-sheet-ios-padding-top: 0 !default; +$action-sheet-ios-padding-top: 0 !default; /// @prop - Padding end of the action sheet -$action-sheet-ios-padding-end: 8px !default; +$action-sheet-ios-padding-end: 8px !default; /// @prop - Padding bottom of the action sheet -$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default; +$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default; /// @prop - Padding start of the action sheet -$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default; +$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default; /// @prop - Top margin of the action sheet button group -$action-sheet-ios-group-margin-top: 10px !default; +$action-sheet-ios-group-margin-top: 10px !default; /// @prop - Bottom margin of the action sheet button group -$action-sheet-ios-group-margin-bottom: 10px !default; +$action-sheet-ios-group-margin-bottom: 10px !default; /// @prop - Background color of the action sheet -$action-sheet-ios-background-color: $overlay-ios-background-color !default; +$action-sheet-ios-background-color: $overlay-ios-background-color !default; /// @prop - Border radius of the action sheet -$action-sheet-ios-border-radius: 13px !default; - +$action-sheet-ios-border-radius: 13px !default; // Action Sheet Title // -------------------------------------------------- /// @prop - Padding top of the action sheet title -$action-sheet-ios-title-padding-top: 14px !default; +$action-sheet-ios-title-padding-top: 14px !default; /// @prop - Padding end of the action sheet title -$action-sheet-ios-title-padding-end: 10px !default; +$action-sheet-ios-title-padding-end: 10px !default; /// @prop - Padding bottom of the action sheet title -$action-sheet-ios-title-padding-bottom: 13px !default; +$action-sheet-ios-title-padding-bottom: 13px !default; /// @prop - Padding start of the action sheet title -$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default; +$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default; /// @prop - Color of the action sheet title -$action-sheet-ios-title-color: $text-color-step-600 !default; +$action-sheet-ios-title-color: $text-color-step-600 !default; /// @prop - Font size of the action sheet title -$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px) !default; +$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px) !default; /// @prop - Font weight of the action sheet title -$action-sheet-ios-title-font-weight: 400 !default; +$action-sheet-ios-title-font-weight: 400 !default; /// @prop - Font weight of the action sheet title when it has a sub title -$action-sheet-ios-title-with-sub-title-font-weight: 600 !default; +$action-sheet-ios-title-with-sub-title-font-weight: 600 !default; // Action Sheet Subtitle // -------------------------------------------------- /// @prop - Font size of the action sheet sub title -$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px) !default; +$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px) !default; /// @prop - Padding top of the action sheet sub title -$action-sheet-ios-sub-title-padding-top: 6px !default; +$action-sheet-ios-sub-title-padding-top: 6px !default; /// @prop - Padding end of the action sheet sub title -$action-sheet-ios-sub-title-padding-end: 0 !default; +$action-sheet-ios-sub-title-padding-end: 0 !default; /// @prop - Padding bottom of the action sheet sub title -$action-sheet-ios-sub-title-padding-bottom: 0 !default; +$action-sheet-ios-sub-title-padding-bottom: 0 !default; /// @prop - Padding start of the action sheet sub title -$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default; - +$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default; // Action Sheet Button // -------------------------------------------------- /// @prop - Minimum height of the action sheet button -$action-sheet-ios-button-height: 56px !default; +$action-sheet-ios-button-height: 56px !default; /// @prop - Padding of the action sheet button -$action-sheet-ios-button-padding: 14px !default; +$action-sheet-ios-button-padding: 14px !default; /// @prop - Text color of the action sheet button -$action-sheet-ios-button-text-color: ion-color(primary, base) !default; +$action-sheet-ios-button-text-color: ion-color(primary, base) !default; /// @prop - Font size of the action sheet button icon -$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px) !default; +$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px) !default; /// @prop - Padding right of the action sheet button icon -$action-sheet-ios-button-icon-padding-right: .3em !default; +$action-sheet-ios-button-icon-padding-right: 0.3em !default; /// @prop - Font size of the action sheet button -$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px) !default; +$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px) !default; /// @prop - Border color alpha of the action sheet button -$action-sheet-ios-button-border-color-alpha: .08 !default; +$action-sheet-ios-button-border-color-alpha: 0.08 !default; /// @prop - Border color of the action sheet button -$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default; +$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default; /// @prop - Background color of the action sheet button -$action-sheet-ios-button-background: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent !default; +$action-sheet-ios-button-background: linear-gradient( + 0deg, + $action-sheet-ios-button-border-color, + $action-sheet-ios-button-border-color 50%, + transparent 50% + ) + bottom / 100% 1px no-repeat transparent !default; /// @prop - Background color of the activated action sheet button -$action-sheet-ios-button-background-activated: $text-color !default; +$action-sheet-ios-button-background-activated: $text-color !default; /// @prop - Background color of the selected action sheet button -$action-sheet-ios-button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color)) !default; +$action-sheet-ios-button-background-selected: var( + --ion-color-step-150, + var(--ion-background-color-step-150, $background-color) +) !default; /// @prop - Destructive text color of the action sheet button -$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default; +$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default; /// @prop - Font weight of the action sheet cancel button -$action-sheet-ios-button-cancel-font-weight: 600 !default; - +$action-sheet-ios-button-cancel-font-weight: 600 !default; // Action Sheet Translucent // -------------------------------------------------- /// @prop - Background color alpha of the action sheet when translucent -$action-sheet-ios-translucent-background-color-alpha: .8 !default; +$action-sheet-ios-translucent-background-color-alpha: 0.8 !default; /// @prop - Background color of the action sheet when translucent -$action-sheet-ios-translucent-background-color: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha) !default; +$action-sheet-ios-translucent-background-color: rgba( + $background-color-rgb, + $action-sheet-ios-translucent-background-color-alpha +) !default; /// @prop - Border color alpha of the action sheet when translucent -$action-sheet-ios-translucent-border-color-alpha: .4 !default; +$action-sheet-ios-translucent-border-color-alpha: 0.4 !default; /// @prop - Border color of the action sheet when translucent -$action-sheet-ios-translucent-border-color: rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha) !default; +$action-sheet-ios-translucent-border-color: rgba( + $background-color-rgb, + $action-sheet-ios-translucent-border-color-alpha +) !default; /// @prop - Background color alpha of the activated action sheet when translucent -$action-sheet-ios-translucent-background-color-activated-alpha: .7 !default; +$action-sheet-ios-translucent-background-color-activated-alpha: 0.7 !default; /// @prop - Background color of the activated action sheet when translucent -$action-sheet-ios-translucent-background-color-activated: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha) !default; +$action-sheet-ios-translucent-background-color-activated: rgba( + $background-color-rgb, + $action-sheet-ios-translucent-background-color-activated-alpha +) !default; /// @prop - Filter of the translucent action-sheet group -$action-sheet-ios-group-translucent-filter: saturate(280%) blur(20px) !default; +$action-sheet-ios-group-translucent-filter: saturate(280%) blur(20px) !default; /// @prop - Filter of the translucent action-sheet button -$action-sheet-ios-button-translucent-filter: saturate(120%) !default; +$action-sheet-ios-button-translucent-filter: saturate(120%) !default; diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss index e3480feefe..8e1c7f0702 100644 --- a/core/src/components/action-sheet/action-sheet.md.scss +++ b/core/src/components/action-sheet/action-sheet.md.scss @@ -13,15 +13,14 @@ --button-background-activated: transparent; --button-background-activated-opacity: 0; --button-background-hover: currentColor; - --button-background-hover-opacity: .04; + --button-background-hover-opacity: 0.04; --button-background-focused: currentColor; - --button-background-focused-opacity: .12; + --button-background-focused-opacity: 0.12; --button-color: #{$action-sheet-md-button-text-color}; --button-color-disabled: var(--button-color); --color: #{$action-sheet-md-title-color}; } - // Material Design Action Sheet Wrapper // ----------------------------------------- @@ -30,7 +29,12 @@ } .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); + @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 + ); min-height: $action-sheet-md-title-height; @@ -42,12 +46,16 @@ } .action-sheet-sub-title { - @include padding($action-sheet-md-sub-title-padding-top, $action-sheet-md-sub-title-padding-end, $action-sheet-md-sub-title-padding-bottom, $action-sheet-md-sub-title-padding-start); + @include padding( + $action-sheet-md-sub-title-padding-top, + $action-sheet-md-sub-title-padding-end, + $action-sheet-md-sub-title-padding-bottom, + $action-sheet-md-sub-title-padding-start + ); font-size: $action-sheet-md-sub-title-font-size; } - // Material Design Action Sheet Group // ----------------------------------------- @@ -59,12 +67,16 @@ @include padding(null, null, $action-sheet-md-padding-bottom, null); } - // Material Design Action Sheet Buttons // ----------------------------------------- .action-sheet-button { - @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); + @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; @@ -79,7 +91,12 @@ } .action-sheet-icon { - @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start); + @include margin( + $action-sheet-md-icon-margin-top, + $action-sheet-md-icon-margin-end, + $action-sheet-md-icon-margin-bottom, + $action-sheet-md-icon-margin-start + ); color: var(--color); diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss index c7d945090d..3477e7cc9d 100644 --- a/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -1,103 +1,100 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Action Sheet // -------------------------------------------------- /// @prop - Text align of the action sheet -$action-sheet-md-text-align: start !default; +$action-sheet-md-text-align: start !default; /// @prop - Background color of the action sheet -$action-sheet-md-background-color: $overlay-md-background-color !default; +$action-sheet-md-background-color: $overlay-md-background-color !default; /// @prop - Padding top of the action sheet -$action-sheet-md-padding-top: 0 !default; +$action-sheet-md-padding-top: 0 !default; /// @prop - Padding bottom of the action sheet -$action-sheet-md-padding-bottom: var(--ion-safe-area-bottom) !default; - +$action-sheet-md-padding-bottom: var(--ion-safe-area-bottom) !default; // Action Sheet Title // -------------------------------------------------- /// @prop - Height of the action sheet title -$action-sheet-md-title-height: 60px !default; +$action-sheet-md-title-height: 60px !default; /// @prop - Color of the action sheet title -$action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default; +$action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default; /// @prop - Font size of the action sheet title -$action-sheet-md-title-font-size: dynamic-font(16px) !default; +$action-sheet-md-title-font-size: dynamic-font(16px) !default; /// @prop - Padding top of the action sheet title -$action-sheet-md-title-padding-top: 20px !default; +$action-sheet-md-title-padding-top: 20px !default; /// @prop - Padding end of the action sheet title -$action-sheet-md-title-padding-end: 16px !default; +$action-sheet-md-title-padding-end: 16px !default; /// @prop - Padding bottom of the action sheet title -$action-sheet-md-title-padding-bottom: 17px !default; +$action-sheet-md-title-padding-bottom: 17px !default; /// @prop - Padding start of the action sheet title -$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default; - +$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default; // Action Sheet Subtitle // -------------------------------------------------- /// @prop - Font size of the action sheet sub title -$action-sheet-md-sub-title-font-size: dynamic-font(14px) !default; +$action-sheet-md-sub-title-font-size: dynamic-font(14px) !default; /// @prop - Padding top of the action sheet sub title -$action-sheet-md-sub-title-padding-top: 16px !default; +$action-sheet-md-sub-title-padding-top: 16px !default; /// @prop - Padding end of the action sheet sub title -$action-sheet-md-sub-title-padding-end: 0 !default; +$action-sheet-md-sub-title-padding-end: 0 !default; /// @prop - Padding bottom of the action sheet sub title -$action-sheet-md-sub-title-padding-bottom: 0 !default; +$action-sheet-md-sub-title-padding-bottom: 0 !default; /// @prop - Padding start of the action sheet sub title -$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end !default; - +$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end !default; // Action Sheet Button // -------------------------------------------------- /// @prop - Minimum height of the action sheet button -$action-sheet-md-button-height: 52px !default; +$action-sheet-md-button-height: 52px !default; /// @prop - Text color of the action sheet button -$action-sheet-md-button-text-color: $text-color-step-150 !default; +$action-sheet-md-button-text-color: $text-color-step-150 !default; /// @prop - Font size of the action sheet button -$action-sheet-md-button-font-size: dynamic-font(16px) !default; +$action-sheet-md-button-font-size: dynamic-font(16px) !default; /// @prop - Padding top of the action sheet button -$action-sheet-md-button-padding-top: 12px !default; +$action-sheet-md-button-padding-top: 12px !default; /// @prop - Padding end of the action sheet button -$action-sheet-md-button-padding-end: 16px !default; +$action-sheet-md-button-padding-end: 16px !default; /// @prop - Padding bottom of the action sheet button -$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top !default; +$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top !default; /// @prop - Padding start of the action sheet button -$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default; +$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default; // Action Sheet Icon // -------------------------------------------------- /// @prop - Font size of the icon in the action sheet button -$action-sheet-md-icon-font-size: dynamic-font(24px) !default; +$action-sheet-md-icon-font-size: dynamic-font(24px) !default; /// @prop - Margin top of the icon in the action sheet button -$action-sheet-md-icon-margin-top: 0 !default; +$action-sheet-md-icon-margin-top: 0 !default; /// @prop - Margin end of the icon in the action sheet button -$action-sheet-md-icon-margin-end: 32px !default; +$action-sheet-md-icon-margin-end: 32px !default; /// @prop - Margin bottom of the icon in the action sheet button -$action-sheet-md-icon-margin-bottom: 0 !default; +$action-sheet-md-icon-margin-bottom: 0 !default; /// @prop - Margin start of the icon in the action sheet button -$action-sheet-md-icon-margin-start: 0 !default; +$action-sheet-md-icon-margin-start: 0 !default; diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss index 2519c214f3..2a2f85bb45 100644 --- a/core/src/components/action-sheet/action-sheet.scss +++ b/core/src/components/action-sheet/action-sheet.scss @@ -173,7 +173,6 @@ overflow: hidden; } - // Action Sheet: States // -------------------------------------------------- @@ -181,7 +180,6 @@ @include button-state(); } - // Action Sheet: Selected // -------------------------------------------------- @@ -195,7 +193,6 @@ } } - // Action Sheet: Activated // -------------------------------------------------- @@ -209,7 +206,6 @@ } } - // Action Sheet: Focused // -------------------------------------------------- diff --git a/core/src/components/action-sheet/action-sheet.vars.scss b/core/src/components/action-sheet/action-sheet.vars.scss index 11cb6a28bf..96632336c4 100644 --- a/core/src/components/action-sheet/action-sheet.vars.scss +++ b/core/src/components/action-sheet/action-sheet.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Action Sheet // -------------------------------------------------- /// @prop - Width of the action sheet -$action-sheet-width: 100% !default; +$action-sheet-width: 100% !default; /// @prop - Maximum width of the action sheet -$action-sheet-max-width: 500px !default; +$action-sheet-max-width: 500px !default; diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss index 259d00e011..714efc03ba 100644 --- a/core/src/components/alert/alert.ios.scss +++ b/core/src/components/alert/alert.ios.scss @@ -23,7 +23,6 @@ pointer-events: none; } - // iOS Translucent Alert // ----------------------------------------- @@ -38,7 +37,12 @@ // -------------------------------------------------- .alert-head { - @include padding($alert-ios-head-padding-top, $alert-ios-head-padding-end, $alert-ios-head-padding-bottom, $alert-ios-head-padding-start); + @include padding( + $alert-ios-head-padding-top, + $alert-ios-head-padding-end, + $alert-ios-head-padding-bottom, + $alert-ios-head-padding-start + ); text-align: $alert-ios-head-text-align; } @@ -58,13 +62,17 @@ font-size: $alert-ios-sub-title-font-size; } - // iOS Alert Message // -------------------------------------------------- .alert-message, .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); + @include padding( + $alert-ios-message-padding-top, + $alert-ios-message-padding-end, + $alert-ios-message-padding-bottom, + $alert-ios-message-padding-start + ); color: $alert-ios-message-text-color; @@ -78,17 +86,26 @@ } .alert-message:empty { - @include padding($alert-ios-message-empty-padding-top, $alert-ios-message-empty-padding-end, $alert-ios-message-empty-padding-bottom, $alert-ios-message-empty-padding-start); + @include padding( + $alert-ios-message-empty-padding-top, + $alert-ios-message-empty-padding-end, + $alert-ios-message-empty-padding-bottom, + $alert-ios-message-empty-padding-start + ); } - // iOS Alert Input // -------------------------------------------------- .alert-input { @include border-radius($alert-ios-input-border-radius); @include margin($alert-ios-input-margin-top, null, null, null); - @include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start); + @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; @@ -120,7 +137,6 @@ } } - // iOS Alert Radio/Checkbox Group // -------------------------------------------------- @@ -139,12 +155,16 @@ min-height: $alert-ios-tappable-height; } - // iOS Alert Radio Label // -------------------------------------------------- .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); + @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 + ); flex: 1; order: 0; @@ -152,15 +172,13 @@ color: $alert-ios-radio-label-text-color; } - // iOS Alert Radio Label: Checked // -------------------------------------------------- -[aria-checked=true] .alert-radio-label { +[aria-checked="true"] .alert-radio-label { color: $alert-ios-radio-label-text-color-checked; } - // iOS Alert Radio Checkmark: Unchecked // ----------------------------------------- @@ -172,11 +190,10 @@ min-width: $alert-ios-radio-min-width; } - // iOS Alert Radio Checked // ----------------------------------------- -[aria-checked=true] .alert-radio-inner { +[aria-checked="true"] .alert-radio-inner { @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start); position: absolute; @@ -193,12 +210,16 @@ border-color: $alert-ios-radio-icon-border-color; } - // iOS Alert Checkbox Label // -------------------------------------------------- .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); + @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 + ); flex: 1; @@ -210,7 +231,12 @@ .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); + @include margin( + $alert-ios-checkbox-margin-top, + $alert-ios-checkbox-margin-end, + $alert-ios-checkbox-margin-bottom, + $alert-ios-checkbox-margin-start + ); position: relative; @@ -226,21 +252,19 @@ contain: strict; } - // iOS Alert Checkbox Outer Circle: Checked // ----------------------------------------- -[aria-checked=true] .alert-checkbox-icon { +[aria-checked="true"] .alert-checkbox-icon { border-color: $alert-ios-checkbox-border-color-on; background-color: $alert-ios-checkbox-background-color-on; } - // iOS Alert Checkbox Inner Checkmark: Checked // ----------------------------------------- -[aria-checked=true] .alert-checkbox-inner { +[aria-checked="true"] .alert-checkbox-inner { @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start); position: absolute; @@ -257,7 +281,6 @@ border-color: $alert-ios-checkbox-icon-border-color; } - // iOS Alert Button // -------------------------------------------------- diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index b3ddac35a8..385708e6d6 100644 --- a/core/src/components/alert/alert.ios.vars.scss +++ b/core/src/components/alert/alert.ios.vars.scss @@ -1,141 +1,144 @@ @use "sass:math"; -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS Alert // -------------------------------------------------- /// @prop - Font size of the alert -$alert-ios-font-size: dynamic-font-min(1, 14px) !default; +$alert-ios-font-size: dynamic-font-min(1, 14px) !default; /// @prop - Max width of the alert -$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2) !default; +$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2) !default; /// @prop - Border radius of the alert -$alert-ios-border-radius: 13px !default; +$alert-ios-border-radius: 13px !default; /// @prop - Background color of the alert -$alert-ios-background-color: $overlay-ios-background-color !default; +$alert-ios-background-color: $overlay-ios-background-color !default; /// @prop - Background color alpha of the alert when translucent -$alert-ios-translucent-background-color-alpha: .9 !default; +$alert-ios-translucent-background-color-alpha: 0.9 !default; /// @prop - Background color of the alert when translucent -$alert-ios-translucent-background-color: rgba($background-color-rgb, $alert-ios-translucent-background-color-alpha) !default; +$alert-ios-translucent-background-color: rgba( + $background-color-rgb, + $alert-ios-translucent-background-color-alpha +) !default; /// @prop - Box shadow of the alert -$alert-ios-box-shadow: none !default; +$alert-ios-box-shadow: none !default; /// @prop - Padding top of the alert head -$alert-ios-head-padding-top: 12px !default; +$alert-ios-head-padding-top: 12px !default; /// @prop - Padding end of the alert head -$alert-ios-head-padding-end: 16px !default; +$alert-ios-head-padding-end: 16px !default; /// @prop - Padding bottom of the alert head -$alert-ios-head-padding-bottom: 7px !default; +$alert-ios-head-padding-bottom: 7px !default; /// @prop - Padding start of the alert head -$alert-ios-head-padding-start: $alert-ios-head-padding-end !default; +$alert-ios-head-padding-start: $alert-ios-head-padding-end !default; /// @prop - Text align of the alert head -$alert-ios-head-text-align: center !default; +$alert-ios-head-text-align: center !default; /// @prop - Color of the alert title -$alert-ios-title-color: $text-color !default; +$alert-ios-title-color: $text-color !default; /// @prop - Margin top of the alert title -$alert-ios-title-margin-top: 8px !default; +$alert-ios-title-margin-top: 8px !default; /// @prop - Font size of the alert title -$alert-ios-title-font-size: dynamic-font-min(1, 17px) !default; +$alert-ios-title-font-size: dynamic-font-min(1, 17px) !default; /// @prop - Font weight of the alert title -$alert-ios-title-font-weight: 600 !default; +$alert-ios-title-font-weight: 600 !default; /// @prop - Font size of the alert sub title -$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px) !default; +$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px) !default; /// @prop - Text color of the alert sub title -$alert-ios-sub-title-text-color: $text-color-step-400 !default; +$alert-ios-sub-title-text-color: $text-color-step-400 !default; /// @prop - Padding top of the alert message -$alert-ios-message-padding-top: 0 !default; +$alert-ios-message-padding-top: 0 !default; /// @prop - Padding end of the alert message -$alert-ios-message-padding-end: 16px !default; +$alert-ios-message-padding-end: 16px !default; /// @prop - Padding bottom of the alert message -$alert-ios-message-padding-bottom: 21px !default; +$alert-ios-message-padding-bottom: 21px !default; /// @prop - Padding start of the alert message -$alert-ios-message-padding-start: $alert-ios-message-padding-end !default; +$alert-ios-message-padding-start: $alert-ios-message-padding-end !default; /// @prop - Font size of the alert message -$alert-ios-message-font-size: dynamic-font-min(1, 13px) !default; +$alert-ios-message-font-size: dynamic-font-min(1, 13px) !default; /// @prop - Text align of the alert message -$alert-ios-message-text-align: center !default; +$alert-ios-message-text-align: center !default; /// @prop - Text color of the alert message -$alert-ios-message-text-color: $text-color !default; +$alert-ios-message-text-color: $text-color !default; /// @prop - Padding top of the alert empty message -$alert-ios-message-empty-padding-top: 0 !default; +$alert-ios-message-empty-padding-top: 0 !default; /// @prop - Padding end of the alert empty message -$alert-ios-message-empty-padding-end: 0 !default; +$alert-ios-message-empty-padding-end: 0 !default; /// @prop - Padding bottom of the alert empty message -$alert-ios-message-empty-padding-bottom: 12px !default; +$alert-ios-message-empty-padding-bottom: 12px !default; /// @prop - Padding start of the alert empty message -$alert-ios-message-empty-padding-start: 0 !default; +$alert-ios-message-empty-padding-start: 0 !default; /// @prop - Maximum height of the alert content -$alert-ios-content-max-height: 240px !default; +$alert-ios-content-max-height: 240px !default; /// @prop - Margin top of the alert input -$alert-ios-input-margin-top: 10px !default; +$alert-ios-input-margin-top: 10px !default; /// @prop - Padding top on the alert input -$alert-ios-input-padding-top: 7px !default; +$alert-ios-input-padding-top: 7px !default; /// @prop - Padding end on the alert input -$alert-ios-input-padding-end: $alert-ios-input-padding-top !default; +$alert-ios-input-padding-end: $alert-ios-input-padding-top !default; /// @prop - Padding bottom on the alert input -$alert-ios-input-padding-bottom: $alert-ios-input-padding-top !default; +$alert-ios-input-padding-bottom: $alert-ios-input-padding-top !default; /// @prop - Padding start on the alert input -$alert-ios-input-padding-start: $alert-ios-input-padding-end !default; +$alert-ios-input-padding-start: $alert-ios-input-padding-end !default; /// @prop - Placeholder Color for input -$alert-ios-input-placeholder-color: $placeholder-text-color !default; +$alert-ios-input-placeholder-color: $placeholder-text-color !default; /// @prop - Border color of the alert input -$alert-ios-input-border-color: $background-color-step-250 !default; +$alert-ios-input-border-color: $background-color-step-250 !default; /// @prop - Border of the alert input -$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default; +$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default; /// @prop - Border radius of the alert input -$alert-ios-input-border-radius: 7px !default; +$alert-ios-input-border-radius: 7px !default; /// @prop - Background color of the alert input -$alert-ios-input-background-color: $background-color !default; +$alert-ios-input-background-color: $background-color !default; /// @prop - Flex wrap of the alert button group -$alert-ios-button-group-flex-wrap: wrap !default; +$alert-ios-button-group-flex-wrap: wrap !default; /// @prop - Flex of the alert button -$alert-ios-button-flex: 1 1 auto !default; +$alert-ios-button-flex: 1 1 auto !default; /// @prop - Margin of the alert button -$alert-ios-button-margin: 0 !default; +$alert-ios-button-margin: 0 !default; /// @prop - Min width of the alert button -$alert-ios-button-min-width: 50% !default; +$alert-ios-button-min-width: 50% !default; /// @prop - Height of the alert button /** @@ -147,172 +150,175 @@ $alert-ios-button-min-width: 50% !default; * a hairline (<1px) width, this will cause subpixel rendering * differences across browsers. */ -$alert-ios-button-height: dynamic-font-min(1, 44px) !default; +$alert-ios-button-height: dynamic-font-min(1, 44px) !default; /// @prop - Padding of the alert button $alert-ios-button-padding: 8px !default; /// @prop - Font size of the alert button -$alert-ios-button-font-size: dynamic-font-min(1, 17px) !default; +$alert-ios-button-font-size: dynamic-font-min(1, 17px) !default; /// @prop - Color of the text in the alert button -$alert-ios-button-text-color: ion-color(primary, base) !default; +$alert-ios-button-text-color: ion-color(primary, base) !default; /// @prop - Destructive text color of the alert button -$alert-ios-button-destructive-text-color: ion-color(danger, base) !default; +$alert-ios-button-destructive-text-color: ion-color(danger, base) !default; /// @prop - Background color of the alert button -$alert-ios-button-background-color: transparent !default; +$alert-ios-button-background-color: transparent !default; /// @prop - Background color alpha of the alert activated button -$alert-ios-button-background-color-alpha-activated: .1 !default; +$alert-ios-button-background-color-alpha-activated: 0.1 !default; /// @prop - Background color of the alert activated button -$alert-ios-button-background-color-activated: rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated) !default; +$alert-ios-button-background-color-activated: rgba( + $text-color-rgb, + $alert-ios-button-background-color-alpha-activated +) !default; /// @prop - Border width of the alert button -$alert-ios-button-border-width: $hairlines-width !default; +$alert-ios-button-border-width: $hairlines-width !default; /// @prop - Border style of the alert button -$alert-ios-button-border-style: solid !default; +$alert-ios-button-border-style: solid !default; /// @prop - Border color alpha of the alert button -$alert-ios-button-border-color-alpha: .2 !default; +$alert-ios-button-border-color-alpha: 0.2 !default; /// @prop - Border color of the alert button -$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha) !default; +$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha) !default; /// @prop - Border radius of the alert button -$alert-ios-button-border-radius: 0 !default; +$alert-ios-button-border-radius: 0 !default; /// @prop - Font weight of the main text on the alert button -$alert-ios-button-main-font-weight: bold !default; +$alert-ios-button-main-font-weight: bold !default; /// @prop - Border top of the alert list -$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default; +$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default; /// @prop - Padding top on the label for the radio alert -$alert-ios-radio-label-padding-top: 13px !default; +$alert-ios-radio-label-padding-top: 13px !default; /// @prop - Padding end on the label for the radio alert -$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top !default; +$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top !default; /// @prop - Padding bottom on the label for the radio alert -$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top !default; +$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top !default; /// @prop - Padding start on the label for the radio alert -$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default; +$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default; /// @prop - Text color of the label for the radio alert -$alert-ios-radio-label-text-color: $text-color !default; +$alert-ios-radio-label-text-color: $text-color !default; /// @prop - Text color of the label for the checked radio alert -$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; +$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; /// @prop - Min width of the radio alert -$alert-ios-radio-min-width: 30px !default; +$alert-ios-radio-min-width: 30px !default; /// @prop - Top of the icon in the radio alert -$alert-ios-radio-icon-top: -7px !default; +$alert-ios-radio-icon-top: -7px !default; /// @prop - Start of the icon in the radio alert -$alert-ios-radio-icon-start: 7px !default; +$alert-ios-radio-icon-start: 7px !default; /// @prop - Width of the icon in the radio alert -$alert-ios-radio-icon-width: 6px !default; +$alert-ios-radio-icon-width: 6px !default; /// @prop - Height of the icon in the radio alert -$alert-ios-radio-icon-height: 12px !default; +$alert-ios-radio-icon-height: 12px !default; /// @prop - Border width of the icon in the radio alert -$alert-ios-radio-icon-border-width: 2px !default; +$alert-ios-radio-icon-border-width: 2px !default; /// @prop - Border style of the icon in the radio alert -$alert-ios-radio-icon-border-style: solid !default; +$alert-ios-radio-icon-border-style: solid !default; /// @prop - Border color of the icon in the radio alert -$alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default; +$alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default; /// @prop - Transform of the icon in the radio alert -$alert-ios-radio-icon-transform: rotate(45deg) !default; +$alert-ios-radio-icon-transform: rotate(45deg) !default; /// @prop - Padding top of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-top: 13px !default; +$alert-ios-checkbox-label-padding-top: 13px !default; /// @prop - Padding end of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top !default; +$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top !default; /// @prop - Padding bottom of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top !default; +$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top !default; /// @prop - Padding start of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default; +$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default; /// @prop - Text color of the label for the checkbox in the alert -$alert-ios-checkbox-label-text-color: $text-color !default; +$alert-ios-checkbox-label-text-color: $text-color !default; /// @prop - Margin top of the checkbox in the alert -$alert-ios-checkbox-margin-top: 10px !default; +$alert-ios-checkbox-margin-top: 10px !default; /// @prop - Margin end of the checkbox in the alert -$alert-ios-checkbox-margin-end: 6px !default; +$alert-ios-checkbox-margin-end: 6px !default; /// @prop - Margin bottom of the checkbox in the alert -$alert-ios-checkbox-margin-bottom: 10px !default; +$alert-ios-checkbox-margin-bottom: 10px !default; /// @prop - Margin start of the checkbox in the alert -$alert-ios-checkbox-margin-start: 16px !default; +$alert-ios-checkbox-margin-start: 16px !default; /// @prop - Size of the checkbox in the alert -$alert-ios-checkbox-size: dynamic-font-max(22px, 2.538) !default; +$alert-ios-checkbox-size: dynamic-font-max(22px, 2.538) !default; /// @prop - Border width of the checkbox in the alert -$alert-ios-checkbox-border-width: dynamic-font(2px) !default; +$alert-ios-checkbox-border-width: dynamic-font(2px) !default; /// @prop - Border style of the checkbox in the alert -$alert-ios-checkbox-border-style: solid !default; +$alert-ios-checkbox-border-style: solid !default; /// @prop - Border radius of the checkbox in the alert -$alert-ios-checkbox-border-radius: 50% !default; +$alert-ios-checkbox-border-radius: 50% !default; /// @prop - Border color of the checkbox in the alert when off -$alert-ios-checkbox-border-color-off: $item-ios-border-color !default; +$alert-ios-checkbox-border-color-off: $item-ios-border-color !default; /// @prop - Border color of the checkbox in the alert when on -$alert-ios-checkbox-border-color-on: ion-color(primary, base) !default; +$alert-ios-checkbox-border-color-on: ion-color(primary, base) !default; /// @prop - Background color of the checkbox in the alert when off -$alert-ios-checkbox-background-color-off: $item-ios-background !default; +$alert-ios-checkbox-background-color-off: $item-ios-background !default; /// @prop - Background color of the checkbox in the alert when on -$alert-ios-checkbox-background-color-on: ion-color(primary, base) !default; +$alert-ios-checkbox-background-color-on: ion-color(primary, base) !default; /// @prop - Top of the icon in the checkbox alert -$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 8) !default; +$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 8) !default; /// @prop - Start of the icon in the checkbox alert -$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3) !default; +$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3) !default; /// @prop - Width of the icon in the checkbox alert -$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px) !default; +$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px) !default; /// @prop - Height of the icon in the checkbox alert -$alert-ios-checkbox-icon-height: calc($alert-ios-checkbox-size * 0.5) !default; +$alert-ios-checkbox-icon-height: calc($alert-ios-checkbox-size * 0.5) !default; /// @prop - Border width of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default; +$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default; /// @prop - Border style of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default; +$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default; /// @prop - Border color of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-color: $background-color !default; +$alert-ios-checkbox-icon-border-color: $background-color !default; /// @prop - Transform of the icon in the checkbox alert -$alert-ios-checkbox-icon-transform: rotate(45deg) !default; +$alert-ios-checkbox-icon-transform: rotate(45deg) !default; /// @prop - Filter of the translucent alert -$alert-ios-translucent-filter: saturate(180%) blur(20px) !default; +$alert-ios-translucent-filter: saturate(180%) blur(20px) !default; /// @prop - Height of the tappable inputs in the checkbox alert -$alert-ios-tappable-height: $item-ios-min-height !default; +$alert-ios-tappable-height: $item-ios-min-height !default; diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss index 3ab3833e6c..5ac468c760 100644 --- a/core/src/components/alert/alert.md.scss +++ b/core/src/components/alert/alert.md.scss @@ -22,7 +22,12 @@ // -------------------------------------------------- .alert-head { - @include padding($alert-md-head-padding-top, $alert-md-head-padding-end, $alert-md-head-padding-bottom, $alert-md-head-padding-start); + @include padding( + $alert-md-head-padding-top, + $alert-md-head-padding-end, + $alert-md-head-padding-bottom, + $alert-md-head-padding-start + ); text-align: $alert-md-head-text-align; } @@ -40,13 +45,17 @@ font-size: $alert-md-sub-title-font-size; } - // Material Design Alert Message // -------------------------------------------------- .alert-message, .alert-input-group { - @include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start); + @include padding( + $alert-md-message-padding-top, + $alert-md-message-padding-end, + $alert-md-message-padding-bottom, + $alert-md-message-padding-start + ); color: $alert-md-message-text-color; } @@ -67,19 +76,28 @@ } .alert-message:empty { - @include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start); + @include padding( + $alert-md-message-empty-padding-top, + $alert-md-message-empty-padding-end, + $alert-md-message-empty-padding-bottom, + $alert-md-message-empty-padding-start + ); } .alert-head + .alert-message { padding-top: 0; } - // Material Design Alert Input // -------------------------------------------------- .alert-input { - @include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start); + @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; @@ -100,10 +118,10 @@ .alert-input:focus { @include margin(null, null, $alert-md-input-margin-bottom - 1, null); - border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused; + border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused + $alert-md-input-border-color-focused; } - // Material Design Alert Radio/Checkbox Group // -------------------------------------------------- @@ -135,12 +153,16 @@ min-height: $alert-md-tappable-height; } - // Material Design Alert Radio // -------------------------------------------------- .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); + @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 + ); flex: 1; @@ -186,28 +208,31 @@ background-color: $alert-md-radio-border-color-on; } - // Material Design Alert Radio Checked // --------------------------------------------------- -[aria-checked=true] .alert-radio-label { +[aria-checked="true"] .alert-radio-label { color: $alert-md-radio-label-text-color-checked; } -[aria-checked=true] .alert-radio-icon { +[aria-checked="true"] .alert-radio-icon { border-color: $alert-md-radio-border-color-on; } -[aria-checked=true] .alert-radio-inner { +[aria-checked="true"] .alert-radio-inner { transform: $alert-md-radio-icon-transform-on; } - // Material Design Alert Checkbox Label // -------------------------------------------------- .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); + @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 + ); flex: 1; @@ -220,7 +245,6 @@ font-size: $alert-md-checkbox-label-font-size; } - // Material Design Alert Checkbox Outline: Unchecked // -------------------------------------------------- @@ -243,13 +267,13 @@ // Material Design Alert Checkbox Checkmark: Checked // -------------------------------------------------- -[aria-checked=true] .alert-checkbox-icon { +[aria-checked="true"] .alert-checkbox-icon { border-color: $alert-md-checkbox-border-color-on; background-color: $alert-md-checkbox-border-color-on; } -[aria-checked=true] .alert-checkbox-inner { +[aria-checked="true"] .alert-checkbox-inner { @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start); position: absolute; @@ -266,7 +290,6 @@ border-color: $alert-md-checkbox-icon-border-color; } - // Material Design Alert Button // -------------------------------------------------- @@ -281,8 +304,18 @@ .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); + @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; diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index 86965476ff..a28fe3825e 100644 --- a/core/src/components/alert/alert.md.vars.scss +++ b/core/src/components/alert/alert.md.vars.scss @@ -1,14 +1,14 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../item/item.md.vars"; // Material Design Alert // -------------------------------------------------- /// @prop - Font size of the alert -$alert-md-font-size: dynamic-font(14px) !default; +$alert-md-font-size: dynamic-font(14px) !default; /// @prop - Max width of the alert -$alert-md-max-width: 280px !default; +$alert-md-max-width: 280px !default; /// @prop - Max width of the alert on a tablet /** @@ -19,313 +19,314 @@ $alert-md-max-width: 280px !default; * 3. The height can increase up to 560px. * Source: https://m2.material.io/components/dialogs#behavior */ -$alert-md-max-width-tablet: min(calc(100vw - 96px), 560px) !default; +$alert-md-max-width-tablet: min(calc(100vw - 96px), 560px) !default; /// @prop - Max width of the alert on a tablet -$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px) !default; +$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px) !default; /// @prop - Border radius of the alert -$alert-md-border-radius: 4px !default; +$alert-md-border-radius: 4px !default; /// @prop - Background color of the alert -$alert-md-background-color: $overlay-md-background-color !default; +$alert-md-background-color: $overlay-md-background-color !default; /// @prop - Box shadow color of the alert -$alert-md-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) !default; +$alert-md-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), + 0 9px 46px 8px rgba(0, 0, 0, 0.12) !default; /// @prop - Padding top of the alert head -$alert-md-head-padding-top: 20px !default; +$alert-md-head-padding-top: 20px !default; /// @prop - Padding end of the alert head -$alert-md-head-padding-end: 23px !default; +$alert-md-head-padding-end: 23px !default; /// @prop - Padding bottom of the alert head -$alert-md-head-padding-bottom: 15px !default; +$alert-md-head-padding-bottom: 15px !default; /// @prop - Padding start of the alert head -$alert-md-head-padding-start: $alert-md-head-padding-end !default; +$alert-md-head-padding-start: $alert-md-head-padding-end !default; /// @prop - Text align of the alert head -$alert-md-head-text-align: start !default; +$alert-md-head-text-align: start !default; /// @prop - Color of the alert title -$alert-md-title-color: $text-color !default; +$alert-md-title-color: $text-color !default; /// @prop - Font size of the alert title -$alert-md-title-font-size: dynamic-font(20px) !default; +$alert-md-title-font-size: dynamic-font(20px) !default; /// @prop - Font weight of the alert title -$alert-md-title-font-weight: 500 !default; +$alert-md-title-font-weight: 500 !default; /// @prop - Font size of the alert sub title -$alert-md-sub-title-font-size: dynamic-font(16px) !default; +$alert-md-sub-title-font-size: dynamic-font(16px) !default; /// @prop - Text color of the alert sub title -$alert-md-sub-title-text-color: $text-color !default; +$alert-md-sub-title-text-color: $text-color !default; /// @prop - Padding top of the alert message -$alert-md-message-padding-top: 20px !default; +$alert-md-message-padding-top: 20px !default; /// @prop - Padding end of the alert message -$alert-md-message-padding-end: 24px !default; +$alert-md-message-padding-end: 24px !default; /// @prop - Padding bottom of the alert message -$alert-md-message-padding-bottom: $alert-md-message-padding-top !default; +$alert-md-message-padding-bottom: $alert-md-message-padding-top !default; /// @prop - Padding start of the alert message -$alert-md-message-padding-start: $alert-md-message-padding-end !default; +$alert-md-message-padding-start: $alert-md-message-padding-end !default; /// @prop - Font size of the alert message -$alert-md-message-font-size: dynamic-font(16px) !default; +$alert-md-message-font-size: dynamic-font(16px) !default; /// @prop - Text color of the alert message -$alert-md-message-text-color: $text-color-step-450 !default; +$alert-md-message-text-color: $text-color-step-450 !default; /// @prop - Padding top of the alert empty message -$alert-md-message-empty-padding-top: 0 !default; +$alert-md-message-empty-padding-top: 0 !default; /// @prop - Padding end of the alert empty message -$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top !default; +$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top !default; /// @prop - Padding bottom of the alert empty message -$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top !default; +$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top !default; /// @prop - Padding start of the alert empty message -$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default; +$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default; /// @prop - Maximum height of the alert content -$alert-md-content-max-height: 266px !default; +$alert-md-content-max-height: 266px !default; /// @prop - Border width of the alert input -$alert-md-input-border-width: 1px !default; +$alert-md-input-border-width: 1px !default; /// @prop - Border style of the alert input -$alert-md-input-border-style: solid !default; +$alert-md-input-border-style: solid !default; /// @prop - Border color of the alert input -$alert-md-input-border-color: $background-color-step-150 !default; +$alert-md-input-border-color: $background-color-step-150 !default; /// @prop - Text color of the alert input -$alert-md-input-text-color: $text-color !default; +$alert-md-input-text-color: $text-color !default; /// @prop - Border width of the alert input when focused -$alert-md-input-border-width-focused: 2px !default; +$alert-md-input-border-width-focused: 2px !default; /// @prop - Border style of the alert input when focused -$alert-md-input-border-style-focused: $alert-md-input-border-style !default; +$alert-md-input-border-style-focused: $alert-md-input-border-style !default; /// @prop - Border color of the alert input when focused -$alert-md-input-border-color-focused: ion-color(primary, base) !default; +$alert-md-input-border-color-focused: ion-color(primary, base) !default; /// @prop - Margin top of the alert input -$alert-md-input-margin-top: 5px !default; +$alert-md-input-margin-top: 5px !default; /// @prop - Margin end of the alert input -$alert-md-input-margin-end: 0 !default; +$alert-md-input-margin-end: 0 !default; /// @prop - Margin bottom of the alert input -$alert-md-input-margin-bottom: 5px !default; +$alert-md-input-margin-bottom: 5px !default; /// @prop - Margin start of the alert input -$alert-md-input-margin-start: 0 !default; +$alert-md-input-margin-start: 0 !default; /// @prop - Placeholder Color for input -$alert-md-input-placeholder-color: $placeholder-text-color !default; +$alert-md-input-placeholder-color: $placeholder-text-color !default; /// @prop - Flex wrap of the alert button group -$alert-md-button-group-flex-wrap: wrap-reverse !default; +$alert-md-button-group-flex-wrap: wrap-reverse !default; /// @prop - Justify content of the alert button group -$alert-md-button-group-justify-content: flex-end !default; +$alert-md-button-group-justify-content: flex-end !default; /// @prop - Padding top of the alert button -$alert-md-button-padding-top: 10px !default; +$alert-md-button-padding-top: 10px !default; /// @prop - Padding end of the alert button -$alert-md-button-padding-end: $alert-md-button-padding-top !default; +$alert-md-button-padding-end: $alert-md-button-padding-top !default; /// @prop - Padding bottom of the alert button -$alert-md-button-padding-bottom: $alert-md-button-padding-top !default; +$alert-md-button-padding-bottom: $alert-md-button-padding-top !default; /// @prop - Padding start of the alert button -$alert-md-button-padding-start: $alert-md-button-padding-end !default; +$alert-md-button-padding-start: $alert-md-button-padding-end !default; /// @prop - Margin top of the alert button -$alert-md-button-margin-top: 0 !default; +$alert-md-button-margin-top: 0 !default; /// @prop - Margin end of the alert button -$alert-md-button-margin-end: 8px !default; +$alert-md-button-margin-end: 8px !default; /// @prop - Margin bottom of the alert button -$alert-md-button-margin-bottom: 0 !default; +$alert-md-button-margin-bottom: 0 !default; /// @prop - Margin start of the alert button -$alert-md-button-margin-start: 0 !default; +$alert-md-button-margin-start: 0 !default; /// @prop - Font weight of the alert button -$alert-md-button-font-weight: 500 !default; +$alert-md-button-font-weight: 500 !default; /// @prop - Text color of the alert button -$alert-md-button-text-color: ion-color(primary, base) !default; +$alert-md-button-text-color: ion-color(primary, base) !default; /// @prop - Background color of the alert button -$alert-md-button-background-color: transparent !default; +$alert-md-button-background-color: transparent !default; /// @prop - Border radius of the alert button -$alert-md-button-border-radius: 2px !default; +$alert-md-button-border-radius: 2px !default; /// @prop - Text transform of the alert button -$alert-md-button-text-transform: uppercase !default; +$alert-md-button-text-transform: uppercase !default; /// @prop - Text align of the alert button -$alert-md-button-text-align: end !default; +$alert-md-button-text-align: end !default; /// @prop - Border top of the alert list -$alert-md-list-border-top: 1px solid $alert-md-input-border-color !default; +$alert-md-list-border-top: 1px solid $alert-md-input-border-color !default; /// @prop - Border bottom of the alert list -$alert-md-list-border-bottom: $alert-md-list-border-top !default; +$alert-md-list-border-bottom: $alert-md-list-border-top !default; /// @prop - Top of the alert radio -$alert-md-radio-top: 0 !default; +$alert-md-radio-top: 0 !default; /// @prop - Left of the alert radio -$alert-md-radio-left: 26px !default; +$alert-md-radio-left: 26px !default; /// @prop - Width of the alert radio -$alert-md-radio-width: 20px !default; +$alert-md-radio-width: 20px !default; /// @prop - Height of the alert radio -$alert-md-radio-height: $alert-md-radio-width !default; +$alert-md-radio-height: $alert-md-radio-width !default; /// @prop - Border width of the alert radio -$alert-md-radio-border-width: 2px !default; +$alert-md-radio-border-width: 2px !default; /// @prop - Border style of the alert radio -$alert-md-radio-border-style: solid !default; +$alert-md-radio-border-style: solid !default; /// @prop - Border radius of the alert radio -$alert-md-radio-border-radius: 50% !default; +$alert-md-radio-border-radius: 50% !default; /// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: $background-color-step-550 !default; +$alert-md-radio-border-color-off: $background-color-step-550 !default; /// @prop - Border color of the alert radio when on -$alert-md-radio-border-color-on: $alert-md-button-text-color !default; +$alert-md-radio-border-color-on: $alert-md-button-text-color !default; /// @prop - Width of the icon in the alert radio -$alert-md-radio-icon-width: $alert-md-radio-width * 0.5 !default; +$alert-md-radio-icon-width: $alert-md-radio-width * 0.5 !default; /// @prop - Height of the icon in the alert radio -$alert-md-radio-icon-height: $alert-md-radio-icon-width !default; +$alert-md-radio-icon-height: $alert-md-radio-icon-width !default; /// @prop - Top of the icon in the alert radio -$alert-md-radio-icon-top: ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5 !default; +$alert-md-radio-icon-top: ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5 !default; /// @prop - Start of the icon in the radio alert -$alert-md-radio-icon-start: $alert-md-radio-icon-top !default; +$alert-md-radio-icon-start: $alert-md-radio-icon-top !default; /// @prop - Border radius of the icon in the alert radio -$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default; +$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default; /// @prop - Transform of the icon in the alert radio when off -$alert-md-radio-icon-transform-off: scale3d(0, 0, 0) !default; +$alert-md-radio-icon-transform-off: scale3d(0, 0, 0) !default; /// @prop - Transform of the icon in the alert radio when on -$alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default; +$alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default; /// @prop - Transition of the icon in the alert radio -$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default; +$alert-md-radio-icon-transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1) !default; /// @prop - Padding top on the label for the radio alert -$alert-md-radio-label-padding-top: 13px !default; +$alert-md-radio-label-padding-top: 13px !default; /// @prop - Padding end on the label for the radio alert -$alert-md-radio-label-padding-end: 26px !default; +$alert-md-radio-label-padding-end: 26px !default; /// @prop - Padding bottom on the label for the radio alert -$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default; +$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default; /// @prop - Padding start on the label for the radio alert -$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px !default; +$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px !default; /// @prop - Font size of the label for the radio alert -$alert-md-radio-label-font-size: dynamic-font(16px) !default; +$alert-md-radio-label-font-size: dynamic-font(16px) !default; /// @prop - Text color of the label for the radio alert -$alert-md-radio-label-text-color: $text-color-step-150 !default; +$alert-md-radio-label-text-color: $text-color-step-150 !default; /// @prop - Text color of the label for the checked radio alert -$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color !default; +$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color !default; /// @prop - Top of the checkbox in the alert -$alert-md-checkbox-top: 0 !default; +$alert-md-checkbox-top: 0 !default; /// @prop - Left of the checkbox in the alert -$alert-md-checkbox-left: 26px !default; +$alert-md-checkbox-left: 26px !default; /// @prop - Width of the checkbox in the alert -$alert-md-checkbox-width: 16px !default; +$alert-md-checkbox-width: 16px !default; /// @prop - Height of the checkbox in the alert -$alert-md-checkbox-height: 16px !default; +$alert-md-checkbox-height: 16px !default; /// @prop - Border width of the checkbox in the alert -$alert-md-checkbox-border-width: 2px !default; +$alert-md-checkbox-border-width: 2px !default; /// @prop - Border style of the checkbox in the alert -$alert-md-checkbox-border-style: solid !default; +$alert-md-checkbox-border-style: solid !default; /// @prop - Border radius of the checkbox in the alert -$alert-md-checkbox-border-radius: 2px !default; +$alert-md-checkbox-border-radius: 2px !default; /// @prop - Border color of the checkbox in the alert when off -$alert-md-checkbox-border-color-off: $background-color-step-550 !default; +$alert-md-checkbox-border-color-off: $background-color-step-550 !default; /// @prop - Border color of the checkbox in the alert when on -$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default; +$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default; /// @prop - Top of the icon in the checkbox alert -$alert-md-checkbox-icon-top: 0 !default; +$alert-md-checkbox-icon-top: 0 !default; /// @prop - Start of the icon in the checkbox alert -$alert-md-checkbox-icon-start: 3px !default; +$alert-md-checkbox-icon-start: 3px !default; /// @prop - Width of the icon in the checkbox alert -$alert-md-checkbox-icon-width: 6px !default; +$alert-md-checkbox-icon-width: 6px !default; /// @prop - Height of the icon in the checkbox alert -$alert-md-checkbox-icon-height: 10px !default; +$alert-md-checkbox-icon-height: 10px !default; /// @prop - Border width of the icon in the checkbox alert -$alert-md-checkbox-icon-border-width: 2px !default; +$alert-md-checkbox-icon-border-width: 2px !default; /// @prop - Border style of the icon in the checkbox alert -$alert-md-checkbox-icon-border-style: solid !default; +$alert-md-checkbox-icon-border-style: solid !default; /// @prop - Border color of the icon in the checkbox alert -$alert-md-checkbox-icon-border-color: ion-color(primary, contrast) !default; +$alert-md-checkbox-icon-border-color: ion-color(primary, contrast) !default; /// @prop - Transform of the icon in the checkbox alert -$alert-md-checkbox-icon-transform: rotate(45deg) !default; +$alert-md-checkbox-icon-transform: rotate(45deg) !default; /// @prop - Padding top of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-top: 13px !default; +$alert-md-checkbox-label-padding-top: 13px !default; /// @prop - Padding end of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left !default; +$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left !default; /// @prop - Padding bottom of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top !default; +$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top !default; /// @prop - Padding start of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px !default; +$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px !default; /// @prop - Text color of the label for the checkbox in the alert -$alert-md-checkbox-label-text-color: $text-color-step-150 !default; +$alert-md-checkbox-label-text-color: $text-color-step-150 !default; /// @prop - Font size of the label for the checkbox in the alert -$alert-md-checkbox-label-font-size: dynamic-font(16px) !default; +$alert-md-checkbox-label-font-size: dynamic-font(16px) !default; /// @prop - Height of the tappable inputs in the checkbox alert -$alert-md-tappable-height: $item-md-min-height !default; +$alert-md-tappable-height: $item-md-min-height !default; diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss index 12cdac9040..9948a4127a 100644 --- a/core/src/components/alert/alert.scss +++ b/core/src/components/alert/alert.scss @@ -198,14 +198,13 @@ min-height: inherit; } - // Alert Button: Disabled // -------------------------------------------------- .alert-input-disabled, .alert-checkbox-button-disabled .alert-button-inner, .alert-radio-button-disabled .alert-button-inner { cursor: default; - opacity: .5; + opacity: 0.5; pointer-events: none; } diff --git a/core/src/components/alert/alert.vars.scss b/core/src/components/alert/alert.vars.scss index c37269f65c..b5505a58a8 100644 --- a/core/src/components/alert/alert.vars.scss +++ b/core/src/components/alert/alert.vars.scss @@ -1,19 +1,19 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Alert // -------------------------------------------------- /// @prop - Minimum width of the alert -$alert-min-width: 250px !default; +$alert-min-width: 250px !default; /// @prop - Maximum height of the alert -$alert-max-height: 90% !default; +$alert-max-height: 90% !default; /// @prop - Line height of the alert button -$alert-button-line-height: dynamic-font(20px) !default; +$alert-button-line-height: dynamic-font(20px) !default; /// @prop - Font size of the alert button -$alert-button-font-size: dynamic-font(14px) !default; +$alert-button-font-size: dynamic-font(14px) !default; /// @prop - Minimum height of a textarea in the alert -$alert-input-min-height: 37px !default; +$alert-input-min-height: 37px !default; diff --git a/core/src/components/app/app.scss b/core/src/components/app/app.scss index e703dacc3e..d79afb7633 100644 --- a/core/src/components/app/app.scss +++ b/core/src/components/app/app.scss @@ -1,4 +1,3 @@ - html.plt-mobile ion-app { user-select: none; } diff --git a/core/src/components/avatar/avatar.ios.scss b/core/src/components/avatar/avatar.ios.scss index 774c972f07..bde09052b2 100644 --- a/core/src/components/avatar/avatar.ios.scss +++ b/core/src/components/avatar/avatar.ios.scss @@ -1,7 +1,6 @@ @import "./avatar"; @import "./avatar.ios.vars"; - // iOS Avatar // -------------------------------------------------- diff --git a/core/src/components/avatar/avatar.ios.vars.scss b/core/src/components/avatar/avatar.ios.vars.scss index 4a8a931c7b..1db3d7e271 100644 --- a/core/src/components/avatar/avatar.ios.vars.scss +++ b/core/src/components/avatar/avatar.ios.vars.scss @@ -1,14 +1,13 @@ -@import "../../themes/ionic.globals.ios"; - +@import "../../themes/native/native.globals.ios"; // iOS Avatar // -------------------------------------------------- /// @prop - Width of the avatar -$avatar-ios-width: 48px !default; +$avatar-ios-width: 48px !default; /// @prop - Height of the avatar -$avatar-ios-height: $avatar-ios-width !default; +$avatar-ios-height: $avatar-ios-width !default; /// @prop - Border radius of the avatar -$avatar-ios-border-radius: 50% !default; +$avatar-ios-border-radius: 50% !default; diff --git a/core/src/components/avatar/avatar.md.scss b/core/src/components/avatar/avatar.md.scss index 66492c7fbd..564901d808 100644 --- a/core/src/components/avatar/avatar.md.scss +++ b/core/src/components/avatar/avatar.md.scss @@ -1,7 +1,6 @@ @import "./avatar"; @import "./avatar.md.vars"; - // Material Design Avatar // -------------------------------------------------- diff --git a/core/src/components/avatar/avatar.md.vars.scss b/core/src/components/avatar/avatar.md.vars.scss index f397e61c4b..b75537d42f 100644 --- a/core/src/components/avatar/avatar.md.vars.scss +++ b/core/src/components/avatar/avatar.md.vars.scss @@ -1,14 +1,13 @@ -@import "../../themes/ionic.globals.md"; - +@import "../../themes/native/native.globals.md"; // Material Design Avatar // -------------------------------------------------- /// @prop - Width of the avatar -$avatar-md-width: 64px !default; +$avatar-md-width: 64px !default; /// @prop - Height of the avatar -$avatar-md-height: $avatar-md-width !default; +$avatar-md-height: $avatar-md-width !default; /// @prop - Border radius of the avatar -$avatar-md-border-radius: 50% !default; +$avatar-md-border-radius: 50% !default; diff --git a/core/src/components/avatar/avatar.scss b/core/src/components/avatar/avatar.scss index ef0413c5ba..2f4d5f0721 100644 --- a/core/src/components/avatar/avatar.scss +++ b/core/src/components/avatar/avatar.scss @@ -1,5 +1,4 @@ -@import "../../themes/ionic.globals"; - +@import "../../themes/native/native.globals"; // Avatar // -------------------------------------------------- diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss index 0a31e687f5..c86f87bdbf 100644 --- a/core/src/components/back-button/back-button.ios.scss +++ b/core/src/components/back-button/back-button.ios.scss @@ -8,7 +8,7 @@ --background-hover: transparent; --background-hover-opacity: 1; --background-focused: currentColor; - --background-focused-opacity: .1; + --background-focused-opacity: 0.1; --border-radius: 4px; --color: #{$back-button-ios-color}; --icon-margin-end: 1px; @@ -46,11 +46,11 @@ // -------------------------------------------------- :host(.ion-activated) .button-native { - opacity: .4; + opacity: 0.4; } @media (any-hover: hover) { :host(:hover) { - opacity: .6; + opacity: 0.6; } } diff --git a/core/src/components/back-button/back-button.ios.vars.scss b/core/src/components/back-button/back-button.ios.vars.scss index 8793d741f2..00eeba7549 100644 --- a/core/src/components/back-button/back-button.ios.vars.scss +++ b/core/src/components/back-button/back-button.ios.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Back Button // -------------------------------------------------- /// @prop - Z index of the back button -$back-button-ios-button-z-index: $z-index-toolbar-buttons !default; +$back-button-ios-button-z-index: $z-index-toolbar-buttons !default; /// @prop - Text color of the back button -$back-button-ios-color: ion-color(primary, base) !default; +$back-button-ios-color: ion-color(primary, base) !default; diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss index e6699c6096..39649aaea8 100644 --- a/core/src/components/back-button/back-button.md.scss +++ b/core/src/components/back-button/back-button.md.scss @@ -7,7 +7,7 @@ :host { --border-radius: 4px; --background-focused: currentColor; - --background-focused-opacity: .12; + --background-focused-opacity: 0.12; --background-hover: currentColor; --background-hover-opacity: 0.04; --color: #{$back-button-md-color}; @@ -49,12 +49,11 @@ } ion-icon { - line-height: .67; + line-height: 0.67; text-align: start; } - // Back Button Color: Hover // -------------------------------------------------- @@ -64,7 +63,6 @@ ion-icon { } } - // Back Button Color: Focused // -------------------------------------------------- diff --git a/core/src/components/back-button/back-button.md.vars.scss b/core/src/components/back-button/back-button.md.vars.scss index c7ce25cbb9..21ce59cc3e 100644 --- a/core/src/components/back-button/back-button.md.vars.scss +++ b/core/src/components/back-button/back-button.md.vars.scss @@ -1,7 +1,7 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Back Button // -------------------------------------------------- /// @prop - Text color of the back button -$back-button-md-color: currentColor !default; +$back-button-md-color: currentColor !default; diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss index 9876135285..38d08e4592 100644 --- a/core/src/components/back-button/back-button.scss +++ b/core/src/components/back-button/back-button.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Back Button // -------------------------------------------------- :host { - /** + /** * @prop --background: Background of the button * @prop --background-focused: Background of the button when focused with the tab key * @prop --background-focused-opacity: Opacity of the button background when focused with the tab key @@ -99,7 +99,6 @@ ion-ripple-effect { color: var(--ripple-color); } - // Back Button with Color // -------------------------------------------------- @@ -107,7 +106,6 @@ ion-ripple-effect { color: current-color(base); } - // Back Button States // -------------------------------------------------- @@ -117,7 +115,7 @@ ion-ripple-effect { :host(.back-button-disabled) { cursor: default; - opacity: .5; + opacity: 0.5; pointer-events: none; } @@ -174,12 +172,16 @@ ion-ripple-effect { z-index: 1; } - // Back Button Icon // -------------------------------------------------- ion-icon { - @include padding(var(--icon-padding-top), var(--icon-padding-end), var(--icon-padding-bottom), var(--icon-padding-start)); + @include padding( + var(--icon-padding-top), + var(--icon-padding-end), + var(--icon-padding-bottom), + var(--icon-padding-start) + ); @include margin(var(--icon-margin-top), var(--icon-margin-end), var(--icon-margin-bottom), var(--icon-margin-start)); display: inherit; @@ -190,7 +192,6 @@ ion-icon { pointer-events: none; } - // Back Button: Focused // -------------------------------------------------- @@ -204,7 +205,6 @@ ion-icon { } } - // Back Button: Hover // -------------------------------------------------- @@ -224,7 +224,6 @@ ion-icon { } } - // Back Button Color: Focused // -------------------------------------------------- @@ -232,7 +231,6 @@ ion-icon { color: #{current-color(base)}; } - // Back Button Color: Hover // -------------------------------------------------- @@ -242,7 +240,6 @@ ion-icon { } } - // Back Button in Toolbar: Global Theming // -------------------------------------------------- diff --git a/core/src/components/backdrop/backdrop.ios.vars.scss b/core/src/components/backdrop/backdrop.ios.vars.scss index c9a4083192..b62b91101c 100644 --- a/core/src/components/backdrop/backdrop.ios.vars.scss +++ b/core/src/components/backdrop/backdrop.ios.vars.scss @@ -1 +1 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; diff --git a/core/src/components/backdrop/backdrop.md.vars.scss b/core/src/components/backdrop/backdrop.md.vars.scss index 74f1acdc02..4b6e63d59c 100644 --- a/core/src/components/backdrop/backdrop.md.vars.scss +++ b/core/src/components/backdrop/backdrop.md.vars.scss @@ -1 +1 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; diff --git a/core/src/components/backdrop/backdrop.scss b/core/src/components/backdrop/backdrop.scss index 7197603a68..cd6bcd9be8 100644 --- a/core/src/components/backdrop/backdrop.scss +++ b/core/src/components/backdrop/backdrop.scss @@ -13,12 +13,11 @@ contain: strict; cursor: pointer; - opacity: .01; + opacity: 0.01; touch-action: none; z-index: $z-index-backdrop; } - :host(.backdrop-hide) { background: transparent; } @@ -26,4 +25,3 @@ :host(.backdrop-no-tappable) { cursor: auto; } - diff --git a/core/src/components/backdrop/backdrop.vars.scss b/core/src/components/backdrop/backdrop.vars.scss index e21c162d17..817fc220ad 100644 --- a/core/src/components/backdrop/backdrop.vars.scss +++ b/core/src/components/backdrop/backdrop.vars.scss @@ -1 +1 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; diff --git a/core/src/components/badge/badge.ios.vars.scss b/core/src/components/badge/badge.ios.vars.scss index 73dc0be8f7..bd9567579f 100644 --- a/core/src/components/badge/badge.ios.vars.scss +++ b/core/src/components/badge/badge.ios.vars.scss @@ -1,7 +1,7 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Badge // -------------------------------------------------- /// @prop - Border radius of the badge -$badge-ios-border-radius: 10px !default; +$badge-ios-border-radius: 10px !default; diff --git a/core/src/components/badge/badge.md.vars.scss b/core/src/components/badge/badge.md.vars.scss index 90516314ec..c158111703 100644 --- a/core/src/components/badge/badge.md.vars.scss +++ b/core/src/components/badge/badge.md.vars.scss @@ -1,7 +1,7 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Badge // -------------------------------------------------- /// @prop - Border radius of the badge -$badge-md-border-radius: 4px !default; +$badge-md-border-radius: 4px !default; diff --git a/core/src/components/badge/badge.vars.scss b/core/src/components/badge/badge.vars.scss index ebaa3490a5..cbaddce6e2 100644 --- a/core/src/components/badge/badge.vars.scss +++ b/core/src/components/badge/badge.vars.scss @@ -1,28 +1,28 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Badge // -------------------------------------------------- /// @prop - Padding top of the badge -$badge-padding-top: 3px !default; +$badge-padding-top: 3px !default; /// @prop - Padding end of the badge -$badge-padding-end: 8px !default; +$badge-padding-end: 8px !default; /// @prop - Padding bottom of the badge -$badge-padding-bottom: $badge-padding-top !default; +$badge-padding-bottom: $badge-padding-top !default; /// @prop - Padding start of the badge -$badge-padding-start: $badge-padding-end !default; +$badge-padding-start: $badge-padding-end !default; /// @prop - Minimum width of the badge -$badge-min-width: 10px !default; +$badge-min-width: 10px !default; /// @prop - Baseline font size of the badge $badge-baseline-font-size: 13px !default; /// @prop - Font size of the badge -$badge-font-size: dynamic-font($badge-baseline-font-size) !default; +$badge-font-size: dynamic-font($badge-baseline-font-size) !default; /// @prop - Font weight of the badge -$badge-font-weight: bold !default; +$badge-font-weight: bold !default; diff --git a/core/src/components/breadcrumb/breadcrumb.ios.scss b/core/src/components/breadcrumb/breadcrumb.ios.scss index 8520b3d3ee..9aa7eea049 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.scss @@ -31,7 +31,6 @@ border: 1px solid transparent; } - // Breadcrumb: Focused // ------------------------------------------ @@ -41,7 +40,7 @@ :host(.in-breadcrumbs-color.ion-focused) .breadcrumb-native, :host(.ion-color.ion-focused) .breadcrumb-native { - background: #{current-color(base, .1)}; + background: #{current-color(base, 0.1)}; color: #{current-color(base)}; } @@ -51,7 +50,6 @@ color: $breadcrumb-ios-icon-color-focused; } - // Breadcrumb Separator // ------------------------------------------ @@ -59,7 +57,6 @@ color: $breadcrumb-ios-separator-color; } - // Breadcrumb Slotted Icons // ------------------------------------------ @@ -81,7 +78,6 @@ color: $breadcrumb-ios-icon-color-active; } - // Breadcrumbs Collapsed Indicator // -------------------------------------------------- diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index 97a91a74cc..270e345518 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss @@ -1,34 +1,40 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Breadcrumb // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)) !default; +$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)) !default; /// @prop - Color of the active breadcrumb -$breadcrumb-ios-color-active: var(--ion-text-color, #03060b) !default; +$breadcrumb-ios-color-active: var(--ion-text-color, #03060b) !default; /// @prop - Background color of the focused breadcrumb -$breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))) !default; +$breadcrumb-ios-background-focused: var( + --ion-color-step-50, + var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7)) +) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)) !default; +$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)) !default; +$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)) !default; /// @prop - Color of the breadcrumb icon when focused -$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)) !default; +$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)) !default; /// @prop - Color of the breadcrumb separator -$breadcrumb-ios-separator-color: $breadcrumb-separator-color !default; +$breadcrumb-ios-separator-color: $breadcrumb-separator-color !default; /// @prop - Color of the breadcrumb indicator -$breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color !default; +$breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color !default; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)) !default; +$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)) !default; /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)) !default; +$breadcrumb-ios-indicator-background-focused: var( + --ion-color-step-150, + var(--ion-background-color-step-150, #d9e0ea) +) !default; diff --git a/core/src/components/breadcrumb/breadcrumb.md.scss b/core/src/components/breadcrumb/breadcrumb.md.scss index b73ca670e7..b9c5c41d76 100644 --- a/core/src/components/breadcrumb/breadcrumb.md.scss +++ b/core/src/components/breadcrumb/breadcrumb.md.scss @@ -20,15 +20,18 @@ @include padding(6px, 12px, 6px, 12px); } - // Breadcrumb Separator // ------------------------------------------ .breadcrumb-separator { - @include margin($breadcrumb-md-separator-margin-top, $breadcrumb-md-separator-margin-end, $breadcrumb-md-separator-margin-bottom, $breadcrumb-md-separator-margin-start); + @include margin( + $breadcrumb-md-separator-margin-top, + $breadcrumb-md-separator-margin-end, + $breadcrumb-md-separator-margin-bottom, + $breadcrumb-md-separator-margin-start + ); } - // Breadcrumb: Focused // ------------------------------------------ @@ -38,7 +41,6 @@ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.12); } - // Breadcrumb Separator // ------------------------------------------ @@ -46,7 +48,6 @@ color: $breadcrumb-md-separator-color; } - // Breadcrumb Slotted Icons // ------------------------------------------ @@ -68,7 +69,6 @@ color: $breadcrumb-md-icon-color-active; } - // Breadcrumbs Collapsed Indicator // -------------------------------------------------- diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index d638047353..6db0297a86 100644 --- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss @@ -1,46 +1,49 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Breadcrumb // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)) !default; +$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)) !default; /// @prop - Color of the active breadcrumb -$breadcrumb-md-color-active: var(--ion-text-color, #03060b) !default; +$breadcrumb-md-color-active: var(--ion-text-color, #03060b) !default; /// @prop - Color of the focused breadcrumb -$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)) !default; +$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)) !default; /// @prop - Background color of the focused breadcrumb -$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default; +$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)) !default; +$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)) !default; +$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)) !default; /// @prop - Margin top of the breadcrumb separator -$breadcrumb-md-separator-margin-top: -1px !default; +$breadcrumb-md-separator-margin-top: -1px !default; /// @prop - Margin end of the breadcrumb separator -$breadcrumb-md-separator-margin-end: 10px !default; +$breadcrumb-md-separator-margin-end: 10px !default; /// @prop - Margin bottom of the breadcrumb separator -$breadcrumb-md-separator-margin-bottom: null !default; +$breadcrumb-md-separator-margin-bottom: null !default; /// @prop - Margin start of the breadcrumb separator -$breadcrumb-md-separator-margin-start: 10px !default; +$breadcrumb-md-separator-margin-start: 10px !default; /// @prop - Color of the breadcrumb separator -$breadcrumb-md-separator-color: $breadcrumb-separator-color !default; +$breadcrumb-md-separator-color: $breadcrumb-separator-color !default; /// @prop - Color of the breadcrumb indicator -$breadcrumb-md-indicator-color: $breadcrumb-md-separator-color !default; +$breadcrumb-md-indicator-color: $breadcrumb-md-separator-color !default; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)) !default; +$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)) !default; /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)) !default; +$breadcrumb-md-indicator-background-focused: var( + --ion-color-step-150, + var(--ion-background-color-step-150, #dfe5e8) +) !default; diff --git a/core/src/components/breadcrumb/breadcrumb.scss b/core/src/components/breadcrumb/breadcrumb.scss index bf867f7ab9..228765e5f9 100644 --- a/core/src/components/breadcrumb/breadcrumb.scss +++ b/core/src/components/breadcrumb/breadcrumb.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- :host { - /** + /** * @prop --color: Text color of the breadcrumb * @prop --color-active: Text color of the active breadcrumb * @prop --color-hover: Text color of the breadcrumb on hover @@ -43,11 +43,10 @@ :host(.breadcrumb-disabled) { cursor: default; - opacity: .5; + opacity: 0.5; pointer-events: none; } - // Breadcrumb: Active // ------------------------------------------ @@ -55,7 +54,6 @@ color: var(--color-active); } - // Breadcrumb: Focused // ------------------------------------------ @@ -67,7 +65,6 @@ background: var(--background-focused); } - // Breadcrumb: Hover // ------------------------------------------ @@ -82,7 +79,6 @@ } } - // Breadcrumb Separator // ------------------------------------------ @@ -90,7 +86,6 @@ display: inline-flex; } - // Breadcrumb: Collapsed // ------------------------------------------ @@ -98,7 +93,6 @@ display: none; } - // Breadcrumbs: Color // ------------------------------------------ @@ -120,14 +114,13 @@ :host(.in-toolbar-color), :host(.in-toolbar-color) .breadcrumb-separator { - color: current-color(contrast, .8); + color: current-color(contrast, 0.8); } :host(.in-toolbar-color.breadcrumb-active) { color: current-color(contrast); } - // Breadcrumbs: Collapsed Indicator // -------------------------------------------------- diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 43129a30d9..fd6a1ea205 100644 --- a/core/src/components/breadcrumb/breadcrumb.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.vars.scss @@ -1,15 +1,15 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Breadcrumb // -------------------------------------------------- /// @prop - Font weight of the breadcrumb -$breadcrumb-font-weight: 400 !default; +$breadcrumb-font-weight: 400 !default; $breadcrumb-baseline-font-size: 16px !default; /// @prop - Font size of the breadcrumb -$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default; +$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default; /// @prop - Color of the breadcrumb separator -$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)) !default; +$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)) !default; diff --git a/core/src/components/breadcrumbs/breadcrumbs.ios.scss b/core/src/components/breadcrumbs/breadcrumbs.ios.scss index 2496ef8ec5..e5161eb4e1 100644 --- a/core/src/components/breadcrumbs/breadcrumbs.ios.scss +++ b/core/src/components/breadcrumbs/breadcrumbs.ios.scss @@ -11,4 +11,3 @@ justify-content: center; } - diff --git a/core/src/components/breadcrumbs/breadcrumbs.scss b/core/src/components/breadcrumbs/breadcrumbs.scss index 0528211428..fc2cb80919 100644 --- a/core/src/components/breadcrumbs/breadcrumbs.scss +++ b/core/src/components/breadcrumbs/breadcrumbs.scss @@ -13,7 +13,6 @@ align-items: center; } - // Breadcrumbs: In Toolbar // -------------------------------------------------- diff --git a/core/src/components/breadcrumbs/breadcrumbs.vars.scss b/core/src/components/breadcrumbs/breadcrumbs.vars.scss index 4c3f84ffca..48b35dc358 100644 --- a/core/src/components/breadcrumbs/breadcrumbs.vars.scss +++ b/core/src/components/breadcrumbs/breadcrumbs.vars.scss @@ -1,5 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Breadcrumbs // -------------------------------------------------- - diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss index b266cfaa10..c7342fe3d1 100644 --- a/core/src/components/button/button.ionic.scss +++ b/core/src/components/button/button.ionic.scss @@ -184,7 +184,6 @@ background: #{current-color(shade)}; } - // Fill Outline Button // -------------------------------------------------- diff --git a/core/src/components/button/button.ionic.vars.scss b/core/src/components/button/button.ionic.vars.scss index d543a781f3..de8e440997 100644 --- a/core/src/components/button/button.ionic.vars.scss +++ b/core/src/components/button/button.ionic.vars.scss @@ -1,164 +1,164 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // Ionic Button // ------------------------------------------------------------------------------- /// @prop - Border radius of the button -$button-ionic-border-radius: px-to-rem(8) !default; +$button-ionic-border-radius: px-to-rem(8) !default; /// @prop - Padding top of the button -$button-ionic-padding-top: px-to-rem(12) !default; +$button-ionic-padding-top: px-to-rem(12) !default; /// @prop - Padding end of the button -$button-ionic-padding-end: px-to-rem(16) !default; +$button-ionic-padding-end: px-to-rem(16) !default; /// @prop - Padding bottom of the button -$button-ionic-padding-bottom: $button-ionic-padding-top !default; +$button-ionic-padding-bottom: $button-ionic-padding-top !default; /// @prop - Padding start of the button -$button-ionic-padding-start: $button-ionic-padding-end !default; +$button-ionic-padding-start: $button-ionic-padding-end !default; /// @prop - Minimum height of the button -$button-ionic-min-height: px-to-rem(40) !default; +$button-ionic-min-height: px-to-rem(40) !default; /// @prop - Font size of the button text /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ionic-font-size: dynamic-font-max(14px, 3) !default; +$button-ionic-font-size: dynamic-font-max(14px, 3) !default; // Ionic Extra Small Button // ------------------------------------------------------------------------------- /// @prop - Border radius of the extra small button -$button-ionic-xsmall-border-radius: px-to-rem(4) !default; +$button-ionic-xsmall-border-radius: px-to-rem(4) !default; /// @prop - Padding top of the extra small button -$button-ionic-xsmall-padding-top: px-to-rem(4) !default; +$button-ionic-xsmall-padding-top: px-to-rem(4) !default; /// @prop - Padding end of the extra small button -$button-ionic-xsmall-padding-end: px-to-rem(12) !default; +$button-ionic-xsmall-padding-end: px-to-rem(12) !default; /// @prop - Padding bottom of the extra small button -$button-ionic-xsmall-padding-bottom: $button-ionic-xsmall-padding-top !default; +$button-ionic-xsmall-padding-bottom: $button-ionic-xsmall-padding-top !default; /// @prop - Padding start of the extra small button -$button-ionic-xsmall-padding-start: $button-ionic-xsmall-padding-end !default; +$button-ionic-xsmall-padding-start: $button-ionic-xsmall-padding-end !default; /// @prop - Minimum height of the extra small button -$button-ionic-xsmall-min-height: px-to-rem(24) !default; +$button-ionic-xsmall-min-height: px-to-rem(24) !default; /// @prop - Font size of the extra small button text /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ionic-xsmall-font-size: dynamic-font-max(12px, 3) !default; +$button-ionic-xsmall-font-size: dynamic-font-max(12px, 3) !default; // Ionic Small Button // ------------------------------------------------------------------------------- /// @prop - Border radius of the small button -$button-ionic-small-border-radius: px-to-rem(4) !default; +$button-ionic-small-border-radius: px-to-rem(4) !default; /// @prop - Padding top of the small button -$button-ionic-small-padding-top: px-to-rem(8) !default; +$button-ionic-small-padding-top: px-to-rem(8) !default; /// @prop - Padding end of the small button -$button-ionic-small-padding-end: px-to-rem(16) !default; +$button-ionic-small-padding-end: px-to-rem(16) !default; /// @prop - Padding bottom of the small button -$button-ionic-small-padding-bottom: $button-ionic-small-padding-top !default; +$button-ionic-small-padding-bottom: $button-ionic-small-padding-top !default; /// @prop - Padding start of the small button -$button-ionic-small-padding-start: $button-ionic-small-padding-end !default; +$button-ionic-small-padding-start: $button-ionic-small-padding-end !default; /// @prop - Minimum height of the small button -$button-ionic-small-min-height: px-to-rem(32) !default; +$button-ionic-small-min-height: px-to-rem(32) !default; /// @prop - Font size of the small button text /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ionic-small-font-size: dynamic-font-max(12px, 3) !default; +$button-ionic-small-font-size: dynamic-font-max(12px, 3) !default; // Ionic Large Button // ------------------------------------------------------------------------------- /// @prop - Padding top of the large button -$button-ionic-large-padding-top: px-to-rem(16) !default; +$button-ionic-large-padding-top: px-to-rem(16) !default; /// @prop - Padding end of the large button -$button-ionic-large-padding-end: px-to-rem(24) !default; +$button-ionic-large-padding-end: px-to-rem(24) !default; /// @prop - Padding bottom of the large button -$button-ionic-large-padding-bottom: $button-ionic-large-padding-top !default; +$button-ionic-large-padding-bottom: $button-ionic-large-padding-top !default; /// @prop - Padding start of the large button -$button-ionic-large-padding-start: $button-ionic-large-padding-end !default; +$button-ionic-large-padding-start: $button-ionic-large-padding-end !default; /// @prop - Minimum height of the large button -$button-ionic-large-min-height: px-to-rem(48) !default; +$button-ionic-large-min-height: px-to-rem(48) !default; /// @prop - Font size of the large button text /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ionic-large-font-size: dynamic-font-max(16px, 3) !default; +$button-ionic-large-font-size: dynamic-font-max(16px, 3) !default; // Ionic Extra Large Button // ------------------------------------------------------------------------------- /// @prop - Padding top of the extra large button -$button-ionic-xlarge-padding-top: px-to-rem(16) !default; +$button-ionic-xlarge-padding-top: px-to-rem(16) !default; /// @prop - Padding end of the extra large button -$button-ionic-xlarge-padding-end: px-to-rem(32) !default; +$button-ionic-xlarge-padding-end: px-to-rem(32) !default; /// @prop - Padding bottom of the extra large button -$button-ionic-xlarge-padding-bottom: $button-ionic-xlarge-padding-top !default; +$button-ionic-xlarge-padding-bottom: $button-ionic-xlarge-padding-top !default; /// @prop - Padding start of the extra large button -$button-ionic-xlarge-padding-start: $button-ionic-xlarge-padding-end !default; +$button-ionic-xlarge-padding-start: $button-ionic-xlarge-padding-end !default; /// @prop - Minimum height of the extra large button -$button-ionic-xlarge-min-height: px-to-rem(56) !default; +$button-ionic-xlarge-min-height: px-to-rem(56) !default; /// @prop - Font size of the extra large button text /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ionic-xlarge-font-size: dynamic-font-max(20px, 3) !default; +$button-ionic-xlarge-font-size: dynamic-font-max(20px, 3) !default; // Ionic Rectangular Button // ------------------------------------------------------------------------------- /// @prop - Border radius of the rectangular button -$button-ionic-rectangular-border: 0 !default; +$button-ionic-rectangular-border: 0 !default; // Ionic Round Button // ------------------------------------------------------------------------------- /// @prop - Border radius of the round button -$button-ionic-round-border: px-to-rem(999) !default; +$button-ionic-round-border: px-to-rem(999) !default; // Ionic Outline Button // ------------------------------------------------------------------------------- /// @prop - Border width of the outline button -$button-ionic-outline-border-width: 1px !default; +$button-ionic-outline-border-width: 1px !default; /// @prop - Border style of the outline button -$button-ionic-outline-border-style: solid !default; +$button-ionic-outline-border-style: solid !default; // Ionic Icon Only Button // ------------------------------------------------------------------------------- /// @prop - Padding end of the icon only button -$button-has-icon-only-padding-end: px-to-rem(13) !default; +$button-has-icon-only-padding-end: px-to-rem(13) !default; /// @prop - Padding end of the icon only extra small button -$button-has-icon-only-padding-end-xsmall: px-to-rem(6) !default; +$button-has-icon-only-padding-end-xsmall: px-to-rem(6) !default; /// @prop - Padding end of the icon only small button -$button-has-icon-only-padding-end-small: px-to-rem(10) !default; +$button-has-icon-only-padding-end-small: px-to-rem(10) !default; /// @prop - Padding end of the icon only large button -$button-has-icon-only-padding-end-large: px-to-rem(16) !default; +$button-has-icon-only-padding-end-large: px-to-rem(16) !default; /// @prop - Padding end of the icon only extra large button -$button-has-icon-only-padding-end-xlarge: px-to-rem(18) !default; +$button-has-icon-only-padding-end-xlarge: px-to-rem(18) !default; diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index 669edc7f5f..957e2ab84f 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -2,7 +2,6 @@ @import "./button.ios.vars"; @import "../toolbar/toolbar.ios.vars"; - // iOS Button // -------------------------------------------------- @@ -24,7 +23,6 @@ letter-spacing: #{$button-ios-letter-spacing}; } - // iOS Solid Button // -------------------------------------------------- @@ -37,7 +35,6 @@ --background-hover-opacity: 1; } - // iOS Outline Button // -------------------------------------------------- @@ -48,11 +45,10 @@ --background-activated: #{ion-color(primary, base)}; --background-focused: #{ion-color(primary, base)}; --background-hover: transparent; - --background-focused-opacity: .1; + --background-focused-opacity: 0.1; --color-activated: #{ion-color(primary, contrast)}; } - // iOS Clear Button // -------------------------------------------------- @@ -61,13 +57,12 @@ --background-activated-opacity: 0; --background-focused: #{ion-color(primary, base)}; --background-hover: transparent; - --background-focused-opacity: .1; + --background-focused-opacity: 0.1; font-size: #{$button-ios-clear-font-size}; font-weight: #{$button-ios-clear-font-weight}; } - // iOS Toolbar Buttons // -------------------------------------------------- @@ -81,11 +76,10 @@ * can add the different font size/weight in a toolbar * but still let "size"/"strong" override it. */ - :host(.in-buttons) { - font-size: #{$toolbar-ios-button-font-size}; - font-weight: 400; - } - +:host(.in-buttons) { + font-size: #{$toolbar-ios-button-font-size}; + font-weight: 400; +} // iOS Button Sizes // -------------------------------------------------- @@ -114,7 +108,6 @@ font-size: #{$button-ios-small-font-size}; } - // iOS Round Button // -------------------------------------------------- @@ -229,7 +222,6 @@ background: #{current-color(shade)}; } - // iOS Button Hover // -------------------------------------------------- @@ -259,14 +251,14 @@ // Solid buttons inside of a toolbar should use a tint of the current // background so use white to tint it, but this should not apply // when activated - :host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after { + :host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) + .button-native::after { background: #fff; - opacity: 0.10; + opacity: 0.1; } } - // iOS Button Activated // -------------------------------------------------- @@ -286,7 +278,6 @@ background: #{current-color(shade)}; } - // Activated Button in Toolbar // -------------------------------------------------- diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss index 9b49c47e4c..91d8e0689e 100644 --- a/core/src/components/button/button.ios.vars.scss +++ b/core/src/components/button/button.ios.vars.scss @@ -1,111 +1,109 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Button // -------------------------------------------------- /// @prop - Margin top of the button -$button-ios-margin-top: 4px !default; +$button-ios-margin-top: 4px !default; /// @prop - Margin end of the button -$button-ios-margin-end: 2px !default; +$button-ios-margin-end: 2px !default; /// @prop - Margin bottom of the button -$button-ios-margin-bottom: 4px !default; +$button-ios-margin-bottom: 4px !default; /// @prop - Margin start of the button -$button-ios-margin-start: 2px !default; +$button-ios-margin-start: 2px !default; /// @prop - Padding top of the button -$button-ios-padding-top: 13px !default; +$button-ios-padding-top: 13px !default; /// @prop - Padding end of the button -$button-ios-padding-end: 1em !default; +$button-ios-padding-end: 1em !default; /// @prop - Padding bottom of the button -$button-ios-padding-bottom: $button-ios-padding-top !default; +$button-ios-padding-bottom: $button-ios-padding-top !default; /// @prop - Padding start of the button -$button-ios-padding-start: $button-ios-padding-end !default; +$button-ios-padding-start: $button-ios-padding-end !default; /// @prop - Minimum height of the button -$button-ios-min-height: 3.1em !default; +$button-ios-min-height: 3.1em !default; /// @prop - Border radius of the button -$button-ios-border-radius: 14px !default; +$button-ios-border-radius: 14px !default; /// @prop - Font size of the button text /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ios-font-size: dynamic-font-max(16px, 3) !default; +$button-ios-font-size: dynamic-font-max(16px, 3) !default; /// @prop - Font weight of the button text -$button-ios-font-weight: 500 !default; +$button-ios-font-weight: 500 !default; // iOS Large Button // -------------------------------------------------- /// @prop - Padding top of the large button -$button-ios-large-padding-top: 17px !default; +$button-ios-large-padding-top: 17px !default; /// @prop - Padding end of the large button -$button-ios-large-padding-end: 1em !default; +$button-ios-large-padding-end: 1em !default; /// @prop - Padding bottom of the large button -$button-ios-large-padding-bottom: $button-ios-large-padding-top !default; +$button-ios-large-padding-bottom: $button-ios-large-padding-top !default; /// @prop - Padding start of the large button -$button-ios-large-padding-start: $button-ios-large-padding-end !default; +$button-ios-large-padding-start: $button-ios-large-padding-end !default; /// @prop - Minimum height of the large button -$button-ios-large-min-height: 3.1em !default; +$button-ios-large-min-height: 3.1em !default; /// @prop - Border radius of the large button -$button-ios-large-border-radius: 16px !default; +$button-ios-large-border-radius: 16px !default; /// @prop - Font size of the large button /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ios-large-font-size: dynamic-font-max(20px, 3) !default; - +$button-ios-large-font-size: dynamic-font-max(20px, 3) !default; // iOS Small Button // -------------------------------------------------- /// @prop - Padding top of the small button -$button-ios-small-padding-top: 4px !default; +$button-ios-small-padding-top: 4px !default; /// @prop - Padding end of the small button -$button-ios-small-padding-end: .9em !default; +$button-ios-small-padding-end: 0.9em !default; /// @prop - Padding bottom of the small button -$button-ios-small-padding-bottom: $button-ios-small-padding-top !default; +$button-ios-small-padding-bottom: $button-ios-small-padding-top !default; /// @prop - Padding start of the small button -$button-ios-small-padding-start: $button-ios-small-padding-end !default; +$button-ios-small-padding-start: $button-ios-small-padding-end !default; /// @prop - Minimum height of the small button -$button-ios-small-min-height: 2.1em !default; +$button-ios-small-min-height: 2.1em !default; /// @prop - Border radius of the small button -$button-ios-small-border-radius: 6px !default; +$button-ios-small-border-radius: 6px !default; /// @prop - Font size of the small button /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ios-small-font-size: dynamic-font-max(13px, 3) !default; - +$button-ios-small-font-size: dynamic-font-max(13px, 3) !default; // iOS Outline Button // -------------------------------------------------- /// @prop - Border width of the outline button -$button-ios-outline-border-width: 1px !default; +$button-ios-outline-border-width: 1px !default; /// @prop - Border style of the outline button -$button-ios-outline-border-style: solid !default; +$button-ios-outline-border-style: solid !default; /// @prop - Border radius of the outline button -$button-ios-outline-border-radius: $button-ios-border-radius !default; +$button-ios-outline-border-radius: $button-ios-border-radius !default; // iOS Clear Button // -------------------------------------------------- @@ -113,41 +111,40 @@ $button-ios-outline-border-radius: $button-ios-border-radius /// @prop - Font size of the clear button /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ios-clear-font-size: dynamic-font-max(17px, 3) !default; +$button-ios-clear-font-size: dynamic-font-max(17px, 3) !default; /// @prop - Font weight of the clear button -$button-ios-clear-font-weight: normal !default; +$button-ios-clear-font-weight: normal !default; /// @prop - Letter spacing of the button -$button-ios-letter-spacing: 0 !default; +$button-ios-letter-spacing: 0 !default; /// @prop - Opacity of the activated clear button -$button-ios-clear-opacity-activated: .4 !default; +$button-ios-clear-opacity-activated: 0.4 !default; /// @prop - Opacity of the clear button on hover -$button-ios-clear-opacity-hover: .6 !default; +$button-ios-clear-opacity-hover: 0.6 !default; // iOS Round Button // -------------------------------------------------- /// @prop - Padding top of the round button -$button-ios-round-padding-top: $button-round-padding-top !default; +$button-ios-round-padding-top: $button-round-padding-top !default; /// @prop - Padding end of the round button -$button-ios-round-padding-end: $button-round-padding-end !default; +$button-ios-round-padding-end: $button-round-padding-end !default; /// @prop - Padding bottom of the round button -$button-ios-round-padding-bottom: $button-round-padding-bottom !default; +$button-ios-round-padding-bottom: $button-round-padding-bottom !default; /// @prop - Padding start of the round button -$button-ios-round-padding-start: $button-round-padding-start !default; +$button-ios-round-padding-start: $button-round-padding-start !default; /// @prop - Border radius of the round button -$button-ios-round-border-radius: $button-round-border-radius !default; - +$button-ios-round-border-radius: $button-round-border-radius !default; // iOS Decorator Button // -------------------------------------------------- /// @prop - Font weight of the strong button -$button-ios-strong-font-weight: 600 !default; +$button-ios-strong-font-weight: 600 !default; diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index c541d5b34b..aab7bb86fc 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -10,9 +10,7 @@ --padding-bottom: #{$button-md-padding-bottom}; --padding-start: #{$button-md-padding-start}; --padding-end: #{$button-md-padding-end}; - --transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1), - background-color 15ms linear, - color 15ms linear; + --transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 15ms linear, color 15ms linear; @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start); @@ -34,8 +32,8 @@ --background-hover: #{ion-color(primary, contrast)}; --background-focused: #{ion-color(primary, contrast)}; --background-activated-opacity: 0; - --background-focused-opacity: .24; - --background-hover-opacity: .08; + --background-focused-opacity: 0.24; + --background-hover-opacity: 0.08; --box-shadow: #{$button-md-box-shadow}; } @@ -54,15 +52,14 @@ --background-focused: #{ion-color(primary, base)}; --background-hover: #{ion-color(primary, base)}; --background-activated-opacity: 0; - --background-focused-opacity: .12; - --background-hover-opacity: .04; + --background-focused-opacity: 0.12; + --background-hover-opacity: 0.04; } :host(.button-outline.ion-activated.ion-color) .button-native { background: transparent; } - // Material Design Clear Button // -------------------------------------------------- @@ -71,11 +68,10 @@ --background-focused: #{ion-color(primary, base)}; --background-hover: #{ion-color(primary, base)}; --background-activated-opacity: 0; - --background-focused-opacity: .12; - --background-hover-opacity: .04; + --background-focused-opacity: 0.12; + --background-hover-opacity: 0.04; } - // Material Design Round Button // -------------------------------------------------- @@ -87,7 +83,6 @@ --padding-bottom: #{$button-md-round-padding-bottom}; } - // Material Design Button Sizes // -------------------------------------------------- @@ -206,7 +201,7 @@ * (derived from rem) and the default font size of the icon is * 28px, then the base size would need to be increased. */ - font-size: dynamic-font-clamp(0.67, 22.4px, 1.92, 1em); + font-size: dynamic-font-clamp(0.67, 22.4px, 1.92, 1em); } // Material Design Button: Hover @@ -227,7 +222,6 @@ background: #{current-color(base)}; } - @media (any-hover: hover) { :host(.button-solid.ion-color:hover) .button-native::after { background: #{current-color(contrast)}; @@ -239,7 +233,6 @@ } } - // Activated Button in Toolbar // -------------------------------------------------- diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss index 99f942769a..1cdfdb9d5f 100644 --- a/core/src/components/button/button.md.vars.scss +++ b/core/src/components/button/button.md.vars.scss @@ -1,119 +1,119 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Button // -------------------------------------------------- /// @prop - Margin top of the button -$button-md-margin-top: 4px; +$button-md-margin-top: 4px; /// @prop - Margin end of the button -$button-md-margin-end: 2px !default; +$button-md-margin-end: 2px !default; /// @prop - Margin bottom of the button -$button-md-margin-bottom: 4px !default; +$button-md-margin-bottom: 4px !default; /// @prop - Margin start of the button -$button-md-margin-start: 2px !default; +$button-md-margin-start: 2px !default; /// @prop - Padding top of the button -$button-md-padding-top: 8px !default; +$button-md-padding-top: 8px !default; /// @prop - Padding end of the button -$button-md-padding-end: 1.1em !default; +$button-md-padding-end: 1.1em !default; /// @prop - Padding bottom of the button -$button-md-padding-bottom: $button-md-padding-top !default; +$button-md-padding-bottom: $button-md-padding-top !default; /// @prop - Padding start of the button -$button-md-padding-start: 1.1em !default; +$button-md-padding-start: 1.1em !default; /// @prop - Minimum height of the button -$button-md-min-height: 36px !default; +$button-md-min-height: 36px !default; /// @prop - Border radius of the button -$button-md-border-radius: 4px !default; +$button-md-border-radius: 4px !default; /// @prop - Font size of the button text -$button-md-font-size: dynamic-font(14px) !default; +$button-md-font-size: dynamic-font(14px) !default; /// @prop - Font weight of the button text -$button-md-font-weight: 500 !default; +$button-md-font-weight: 500 !default; /// @prop - Capitalization of the button text -$button-md-text-transform: uppercase !default; +$button-md-text-transform: uppercase !default; -$button-md-letter-spacing: 0.06em; +$button-md-letter-spacing: 0.06em; /// @prop - Box shadow of the button -$button-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; +$button-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default; /// @prop - Box shadow of the activated button -$button-md-box-shadow-activated: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default; +$button-md-box-shadow-activated: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12) !default; // Material Design Large Button // -------------------------------------------------- /// @prop - Padding top of the large button -$button-md-large-padding-top: 14px !default; +$button-md-large-padding-top: 14px !default; /// @prop - Padding end of the large button -$button-md-large-padding-end: 1em !default; +$button-md-large-padding-end: 1em !default; /// @prop - Padding bottom of the large button -$button-md-large-padding-bottom: $button-md-large-padding-top !default; +$button-md-large-padding-bottom: $button-md-large-padding-top !default; /// @prop - Padding start of the large button -$button-md-large-padding-start: $button-md-large-padding-end !default; +$button-md-large-padding-start: $button-md-large-padding-end !default; /// @prop - Minimum height of the large button -$button-md-large-min-height: 2.8em !default; +$button-md-large-min-height: 2.8em !default; /// @prop - Font size of the large button -$button-md-large-font-size: dynamic-font(20px) !default; - +$button-md-large-font-size: dynamic-font(20px) !default; // Material Design Small Button // -------------------------------------------------- /// @prop - Padding top of the small button -$button-md-small-padding-top: 4px !default; +$button-md-small-padding-top: 4px !default; /// @prop - Padding end of the small button -$button-md-small-padding-end: .9em !default; +$button-md-small-padding-end: 0.9em !default; /// @prop - Padding bottom of the small button -$button-md-small-padding-bottom: $button-md-small-padding-top !default; +$button-md-small-padding-bottom: $button-md-small-padding-top !default; /// @prop - Padding start of the small button -$button-md-small-padding-start: $button-md-small-padding-end !default; +$button-md-small-padding-start: $button-md-small-padding-end !default; /// @prop - Minimum height of the small button -$button-md-small-min-height: 2.1em !default; +$button-md-small-min-height: 2.1em !default; /// @prop - Font size of the small button -$button-md-small-font-size: dynamic-font(13px) !default; +$button-md-small-font-size: dynamic-font(13px) !default; // Material Design Round Button // -------------------------------------------------- /// @prop - Padding top of the round button -$button-md-round-padding-top: $button-round-padding-top !default; +$button-md-round-padding-top: $button-round-padding-top !default; /// @prop - Padding end of the round button -$button-md-round-padding-end: $button-round-padding-end !default; +$button-md-round-padding-end: $button-round-padding-end !default; /// @prop - Padding bottom of the round button -$button-md-round-padding-bottom: $button-round-padding-bottom !default; +$button-md-round-padding-bottom: $button-round-padding-bottom !default; /// @prop - Padding start of the round button -$button-md-round-padding-start: $button-round-padding-start !default; +$button-md-round-padding-start: $button-round-padding-start !default; /// @prop - Border radius of the round button -$button-md-round-border-radius: $button-round-border-radius !default; - +$button-md-round-border-radius: $button-round-border-radius !default; // Material Design Decorator Button // -------------------------------------------------- /// @prop - Font weight of the strong button -$button-md-strong-font-weight: bold !default; +$button-md-strong-font-weight: bold !default; diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index acb57319b4..41412b81e1 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -80,7 +80,6 @@ --color: #{ion-color(primary, contrast)}; } - // Outline Button // -------------------------------------------------- @@ -91,7 +90,6 @@ --color: #{ion-color(primary, base)}; } - // Clear Button // -------------------------------------------------- @@ -102,7 +100,6 @@ --color: #{ion-color(primary, base)}; } - // Block Button // -------------------------------------------------- @@ -124,7 +121,6 @@ clear: both; } - // Full Button // -------------------------------------------------- @@ -209,16 +205,14 @@ z-index: 1; } - // Button Slots // -------------------------------------------------- -::slotted([slot=start]), -::slotted([slot=end]) { +::slotted([slot="start"]), +::slotted([slot="end"]) { flex-shrink: 0; } - // Button Icons // -------------------------------------------------- @@ -242,7 +236,6 @@ ion-ripple-effect { color: var(--ripple-color); } - // Button: States // -------------------------------------------------- @@ -285,7 +278,6 @@ ion-ripple-effect { opacity: var(--background-activated-opacity); } - // Button Colors // -------------------------------------------------- @@ -309,7 +301,6 @@ ion-ripple-effect { color: current-color(base); } - // Button in Toolbar // -------------------------------------------------- diff --git a/core/src/components/button/button.vars.scss b/core/src/components/button/button.vars.scss index 448cc7b006..7cda29c617 100644 --- a/core/src/components/button/button.vars.scss +++ b/core/src/components/button/button.vars.scss @@ -1,19 +1,19 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Button // -------------------------------------------------- /// @prop - Padding top of the round button -$button-round-padding-top: 0 !default; +$button-round-padding-top: 0 !default; /// @prop - Padding end of the round button -$button-round-padding-end: 26px !default; +$button-round-padding-end: 26px !default; /// @prop - Padding bottom of the round button -$button-round-padding-bottom: $button-round-padding-top !default; +$button-round-padding-bottom: $button-round-padding-top !default; /// @prop - Padding start of the round button -$button-round-padding-start: $button-round-padding-end !default; +$button-round-padding-start: $button-round-padding-end !default; /// @prop - Border radius of the round button -$button-round-border-radius: 999px !default; +$button-round-border-radius: 999px !default; diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss index 316823a526..cb9c81afd8 100644 --- a/core/src/components/buttons/buttons.ios.scss +++ b/core/src/components/buttons/buttons.ios.scss @@ -1,7 +1,6 @@ @import "./buttons.ios.vars"; @import "./buttons"; - // iOS Toolbar Default Button // -------------------------------------------------- @@ -25,7 +24,6 @@ --border-radius: #{$toolbar-ios-button-border-radius}; } - // iOS Toolbar with Color: Default Buttons // -------------------------------------------------- @@ -38,9 +36,9 @@ :host-context(.ion-color)::slotted(*) .button-solid { --background: #{current-color(contrast)}; --background-focused: #000; - --background-focused-opacity: .12; + --background-focused-opacity: 0.12; --background-activated: #000; - --background-activated-opacity: .12; + --background-activated-opacity: 0.12; --background-hover: #{current-color(base)}; --background-hover-opacity: 0.45; --color: #{current-color(base)}; @@ -58,7 +56,6 @@ --background-activated: #{current-color(contrast)}; } - // iOS Toolbar Button Clear / Outline // -------------------------------------------------- @@ -69,43 +66,41 @@ --background-hover: transparent; } - // iOS Toolbar Button Solid // -------------------------------------------------- ::slotted(*) .button-solid:not(.ion-color) { --background-focused: #000; - --background-focused-opacity: .12; + --background-focused-opacity: 0.12; --background-activated: #000; - --background-activated-opacity: .12; + --background-activated-opacity: 0.12; } - // iOS Toolbar Button Icon // -------------------------------------------------- ::slotted(*) ion-icon[slot="start"] { @include margin(0); - @include margin-horizontal(null, .3em); + @include margin-horizontal(null, 0.3em); // This value is calculated by dividing the font size the // icon should be in px (24px) by the font size of its // parent button (17px). e.g. 24 / 17 = 1.4117 font-size: 1.41em; - line-height: .67; + line-height: 0.67; } ::slotted(*) ion-icon[slot="end"] { @include margin(0); - @include margin-horizontal(.4em, null); + @include margin-horizontal(0.4em, null); // This value is calculated by dividing the font size the // icon should be in px (24px) by the font size of its // parent button (17px). e.g. 24 / 17 = 1.4117 font-size: 1.41em; - line-height: .67; + line-height: 0.67; } ::slotted(*) ion-icon[slot="icon-only"] { @@ -117,5 +112,5 @@ // parent button (17px). e.g. 28 / 17 = 1.647 font-size: 1.65em; - line-height: .67; + line-height: 0.67; } diff --git a/core/src/components/buttons/buttons.ios.vars.scss b/core/src/components/buttons/buttons.ios.vars.scss index e9784ca32b..1e2cc49f9e 100644 --- a/core/src/components/buttons/buttons.ios.vars.scss +++ b/core/src/components/buttons/buttons.ios.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../toolbar/toolbar.ios.vars"; // iOS Buttons diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss index a0fe0c3033..1fb7981f52 100644 --- a/core/src/components/buttons/buttons.md.scss +++ b/core/src/components/buttons/buttons.md.scss @@ -25,7 +25,6 @@ --border-radius: #{$toolbar-md-button-border-radius}; } - // Material Design Toolbar w/ Color: Default Buttons // -------------------------------------------------- @@ -52,7 +51,6 @@ --border-color: #{current-color(contrast)}; } - // Material Design Toolbar Icon Only Clear Button // -------------------------------------------------- @@ -69,7 +67,6 @@ height: 3rem; } - ::slotted(*) .button { --background-hover: currentColor; } @@ -84,7 +81,6 @@ --background-focused: currentColor; } - // Material Design Toolbar Outline Button // -------------------------------------------------- @@ -97,7 +93,6 @@ --border-color: currentColor; } - // Material Design Toolbar Clear Button // -------------------------------------------------- @@ -109,19 +104,18 @@ --background-hover: currentColor; } - // Material Design Toolbar Button Icon // -------------------------------------------------- ::slotted(*) ion-icon[slot="start"] { @include margin(0); - @include margin-horizontal(null, .3em); + @include margin-horizontal(null, 0.3em); font-size: 1.4em; } ::slotted(*) ion-icon[slot="end"] { @include margin(0); - @include margin-horizontal(.4em, null); + @include margin-horizontal(0.4em, null); font-size: 1.4em; } diff --git a/core/src/components/buttons/buttons.md.vars.scss b/core/src/components/buttons/buttons.md.vars.scss index 55cba8ec54..8521ae92ef 100644 --- a/core/src/components/buttons/buttons.md.vars.scss +++ b/core/src/components/buttons/buttons.md.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../toolbar/toolbar.md.vars"; // Material Design Buttons diff --git a/core/src/components/buttons/buttons.scss b/core/src/components/buttons/buttons.scss index d0e30a4587..15106c1bf7 100644 --- a/core/src/components/buttons/buttons.scss +++ b/core/src/components/buttons/buttons.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; :host { display: flex; diff --git a/core/src/components/card-content/card-content.ios.vars.scss b/core/src/components/card-content/card-content.ios.vars.scss index 8bb5fa0383..22eb93e20f 100644 --- a/core/src/components/card-content/card-content.ios.vars.scss +++ b/core/src/components/card-content/card-content.ios.vars.scss @@ -1,19 +1,19 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Card Header // -------------------------------------------------- /// @prop - Padding top of the card -$card-ios-padding-top: 20px !default; +$card-ios-padding-top: 20px !default; /// @prop - Padding end of the card -$card-ios-padding-end: $card-ios-padding-top !default; +$card-ios-padding-end: $card-ios-padding-top !default; /// @prop - Padding bottom of the card -$card-ios-padding-bottom: $card-ios-padding-top !default; +$card-ios-padding-bottom: $card-ios-padding-top !default; /// @prop - Padding start of the card -$card-ios-padding-start: $card-ios-padding-top !default; +$card-ios-padding-start: $card-ios-padding-top !default; /// @prop - Font size of the card -$card-ios-font-size: dynamic-font(16px) !default; +$card-ios-font-size: dynamic-font(16px) !default; diff --git a/core/src/components/card-content/card-content.md.vars.scss b/core/src/components/card-content/card-content.md.vars.scss index 8d436c15c9..d4e491f188 100644 --- a/core/src/components/card-content/card-content.md.vars.scss +++ b/core/src/components/card-content/card-content.md.vars.scss @@ -1,22 +1,22 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Card Content // -------------------------------------------------- /// @prop - Padding top of the card -$card-md-padding-top: 13px !default; +$card-md-padding-top: 13px !default; /// @prop - Padding right of the card -$card-md-padding-end: 16px !default; +$card-md-padding-end: 16px !default; /// @prop - Padding bottom of the card -$card-md-padding-bottom: 13px !default; +$card-md-padding-bottom: 13px !default; /// @prop - Padding start of the card -$card-md-padding-start: 16px !default; +$card-md-padding-start: 16px !default; /// @prop - Font size of the card -$card-md-font-size: dynamic-font(14px) !default; +$card-md-font-size: dynamic-font(14px) !default; /// @prop - Line height of the card -$card-md-line-height: 1.5 !default; +$card-md-line-height: 1.5 !default; diff --git a/core/src/components/card-content/card-content.scss b/core/src/components/card-content/card-content.scss index 63bd558ae5..2c8ce38856 100644 --- a/core/src/components/card-content/card-content.scss +++ b/core/src/components/card-content/card-content.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Card Content // -------------------------------------------------- diff --git a/core/src/components/card-header/card-header.ios.scss b/core/src/components/card-header/card-header.ios.scss index 91f24e286d..fb188b2bf1 100644 --- a/core/src/components/card-header/card-header.ios.scss +++ b/core/src/components/card-header/card-header.ios.scss @@ -5,7 +5,12 @@ // -------------------------------------------------- :host { - @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start); + @include padding( + $card-ios-header-padding-top, + $card-ios-header-padding-end, + $card-ios-header-padding-bottom, + $card-ios-header-padding-start + ); flex-direction: column-reverse; } diff --git a/core/src/components/card-header/card-header.ios.vars.scss b/core/src/components/card-header/card-header.ios.vars.scss index b261a51f1b..c151c98f16 100644 --- a/core/src/components/card-header/card-header.ios.vars.scss +++ b/core/src/components/card-header/card-header.ios.vars.scss @@ -1,25 +1,28 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Card Header // -------------------------------------------------- /// @prop - Padding top of the card header -$card-ios-header-padding-top: 20px !default; +$card-ios-header-padding-top: 20px !default; /// @prop - Padding end of the card header -$card-ios-header-padding-end: $card-ios-header-padding-top !default; +$card-ios-header-padding-end: $card-ios-header-padding-top !default; /// @prop - Padding bottom of the card header -$card-ios-header-padding-bottom: 16px !default; +$card-ios-header-padding-bottom: 16px !default; /// @prop - Padding start of the card header -$card-ios-header-padding-start: $card-ios-header-padding-end !default; +$card-ios-header-padding-start: $card-ios-header-padding-end !default; /// @prop - Filter of the translucent card header background color alpha -$card-ios-header-translucent-background-color-alpha: .9 !default; +$card-ios-header-translucent-background-color-alpha: 0.9 !default; /// @prop - Filter of the translucent card header background color -$card-ios-header-translucent-background-color: rgba($background-color-rgb, $card-ios-header-translucent-background-color-alpha) !default; +$card-ios-header-translucent-background-color: rgba( + $background-color-rgb, + $card-ios-header-translucent-background-color-alpha +) !default; /// @prop - Filter of the translucent card header -$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default; +$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default; diff --git a/core/src/components/card-header/card-header.md.scss b/core/src/components/card-header/card-header.md.scss index eb1e27c6d6..f17d9a2581 100644 --- a/core/src/components/card-header/card-header.md.scss +++ b/core/src/components/card-header/card-header.md.scss @@ -5,7 +5,12 @@ // -------------------------------------------------- :host { - @include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start); + @include padding( + $card-md-header-padding-top, + $card-md-header-padding-end, + $card-md-header-padding-bottom, + $card-md-header-padding-start + ); } ::slotted(ion-card-title:not(:first-child)), diff --git a/core/src/components/card-header/card-header.md.vars.scss b/core/src/components/card-header/card-header.md.vars.scss index e64451a202..517d2f6968 100644 --- a/core/src/components/card-header/card-header.md.vars.scss +++ b/core/src/components/card-header/card-header.md.vars.scss @@ -1,16 +1,16 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Card Header // -------------------------------------------------- /// @prop - Padding top of the card header -$card-md-header-padding-top: 16px !default; +$card-md-header-padding-top: 16px !default; /// @prop - Padding end of the card header -$card-md-header-padding-end: $card-md-header-padding-top !default; +$card-md-header-padding-end: $card-md-header-padding-top !default; /// @prop - Padding bottom of the card header -$card-md-header-padding-bottom: $card-md-header-padding-top !default; +$card-md-header-padding-bottom: $card-md-header-padding-top !default; /// @prop - Padding start of the card header -$card-md-header-padding-start: $card-md-header-padding-end !default; +$card-md-header-padding-start: $card-md-header-padding-end !default; diff --git a/core/src/components/card-header/card-header.scss b/core/src/components/card-header/card-header.scss index 7e582af42b..0c29c80e1d 100644 --- a/core/src/components/card-header/card-header.scss +++ b/core/src/components/card-header/card-header.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Card Header // -------------------------------------------------- diff --git a/core/src/components/card-subtitle/card-subtitle.ios.scss b/core/src/components/card-subtitle/card-subtitle.ios.scss index b1d3eff6ed..d8e91973fb 100644 --- a/core/src/components/card-subtitle/card-subtitle.ios.scss +++ b/core/src/components/card-subtitle/card-subtitle.ios.scss @@ -7,8 +7,18 @@ :host { --color: #{$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); + @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; diff --git a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss index 86f221d011..68eea35048 100644 --- a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss @@ -1,43 +1,43 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Card Subtitle // -------------------------------------------------- /// @prop - Font size of the card subtitle -$card-ios-subtitle-font-size: dynamic-font(12px) !default; +$card-ios-subtitle-font-size: dynamic-font(12px) !default; /// @prop - Font weight of the card subtitle -$card-ios-subtitle-font-weight: 700 !default; +$card-ios-subtitle-font-weight: 700 !default; /// @prop - Font weight of the card subtitle -$card-ios-subtitle-text-transform: uppercase !default; +$card-ios-subtitle-text-transform: uppercase !default; /// @prop - Letter spacing of the card subtitle -$card-ios-subtitle-letter-spacing: .4px !default; +$card-ios-subtitle-letter-spacing: 0.4px !default; /// @prop - Padding top of the card subtitle -$card-ios-subtitle-padding-top: 0 !default; +$card-ios-subtitle-padding-top: 0 !default; /// @prop - Padding end of the card subtitle -$card-ios-subtitle-padding-end: $card-ios-subtitle-padding-top !default; +$card-ios-subtitle-padding-end: $card-ios-subtitle-padding-top !default; /// @prop - Padding bottom of the card subtitle -$card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default; +$card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default; /// @prop - Padding start of the card subtitle -$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default; +$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default; /// @prop - Margin top of the card subtitle -$card-ios-subtitle-margin-top: 0 !default; +$card-ios-subtitle-margin-top: 0 !default; /// @prop - Margin end of the card subtitle -$card-ios-subtitle-margin-end: $card-ios-subtitle-margin-top !default; +$card-ios-subtitle-margin-end: $card-ios-subtitle-margin-top !default; /// @prop - Margin bottom of the card subtitle -$card-ios-subtitle-margin-bottom: 4px !default; +$card-ios-subtitle-margin-bottom: 4px !default; /// @prop - Margin start of the card subtitle -$card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end !default; +$card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end !default; /// @prop - Color of the card subtitle -$card-ios-subtitle-color: $text-color-step-400 !default; +$card-ios-subtitle-color: $text-color-step-400 !default; diff --git a/core/src/components/card-subtitle/card-subtitle.md.scss b/core/src/components/card-subtitle/card-subtitle.md.scss index 1d1c8370e0..f6f4a5222e 100644 --- a/core/src/components/card-subtitle/card-subtitle.md.scss +++ b/core/src/components/card-subtitle/card-subtitle.md.scss @@ -7,8 +7,18 @@ :host { --color: #{$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); + @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; font-weight: 500; diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss index 1a0c4f69c8..dd9e979907 100644 --- a/core/src/components/card-subtitle/card-subtitle.md.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.md.vars.scss @@ -1,34 +1,34 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Card Subtitle // -------------------------------------------------- /// @prop - Font size of the card subtitle -$card-md-subtitle-font-size: dynamic-font(14px) !default; +$card-md-subtitle-font-size: dynamic-font(14px) !default; /// @prop - Padding top of the card subtitle -$card-md-subtitle-padding-top: 0 !default; +$card-md-subtitle-padding-top: 0 !default; /// @prop - Padding end of the card subtitle -$card-md-subtitle-padding-end: $card-md-subtitle-padding-top !default; +$card-md-subtitle-padding-end: $card-md-subtitle-padding-top !default; /// @prop - Padding bottom of the card subtitle -$card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default; +$card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default; /// @prop - Padding start of the card subtitle -$card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default; +$card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default; /// @prop - Margin top of the card subtitle -$card-md-subtitle-margin-top: 0 !default; +$card-md-subtitle-margin-top: 0 !default; /// @prop - Margin end of the card subtitle -$card-md-subtitle-margin-end: $card-md-subtitle-margin-top !default; +$card-md-subtitle-margin-end: $card-md-subtitle-margin-top !default; /// @prop - Margin bottom of the card subtitle -$card-md-subtitle-margin-bottom: 0 !default; +$card-md-subtitle-margin-bottom: 0 !default; /// @prop - Margin start of the card subtitle -$card-md-subtitle-margin-start: $card-md-subtitle-margin-end !default; +$card-md-subtitle-margin-start: $card-md-subtitle-margin-end !default; /// @prop - Color of the card subtitle -$card-md-subtitle-color: $text-color-step-450 !default; +$card-md-subtitle-color: $text-color-step-450 !default; diff --git a/core/src/components/card-subtitle/card-subtitle.scss b/core/src/components/card-subtitle/card-subtitle.scss index 80c50a72a1..76d934d70b 100644 --- a/core/src/components/card-subtitle/card-subtitle.scss +++ b/core/src/components/card-subtitle/card-subtitle.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Card Subtitle // -------------------------------------------------- @@ -16,4 +16,4 @@ :host(.ion-color) { color: current-color(base); -} \ No newline at end of file +} diff --git a/core/src/components/card-title/card-title.ios.scss b/core/src/components/card-title/card-title.ios.scss index 4f9cd65a9b..0679ba2836 100644 --- a/core/src/components/card-title/card-title.ios.scss +++ b/core/src/components/card-title/card-title.ios.scss @@ -7,8 +7,18 @@ :host { --color: #{$card-ios-title-text-color}; - @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); + @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 + ); font-size: $card-ios-title-font-size; font-weight: $card-ios-title-font-weight; diff --git a/core/src/components/card-title/card-title.ios.vars.scss b/core/src/components/card-title/card-title.ios.vars.scss index 43d4c74143..c8c771f2a2 100644 --- a/core/src/components/card-title/card-title.ios.vars.scss +++ b/core/src/components/card-title/card-title.ios.vars.scss @@ -1,37 +1,37 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Card Title // -------------------------------------------------- /// @prop - Font size of the card title -$card-ios-title-font-size: dynamic-font(28px) !default; +$card-ios-title-font-size: dynamic-font(28px) !default; /// @prop - Font weight of the card title -$card-ios-title-font-weight: 700 !default; +$card-ios-title-font-weight: 700 !default; /// @prop - Padding top of the card title -$card-ios-title-padding-top: 0 !default; +$card-ios-title-padding-top: 0 !default; /// @prop - Padding end of the card title -$card-ios-title-padding-end: $card-ios-title-padding-top !default; +$card-ios-title-padding-end: $card-ios-title-padding-top !default; /// @prop - Padding bottom of the card title -$card-ios-title-padding-bottom: $card-ios-title-padding-top !default; +$card-ios-title-padding-bottom: $card-ios-title-padding-top !default; /// @prop - Padding start of the card title -$card-ios-title-padding-start: $card-ios-title-padding-top !default; +$card-ios-title-padding-start: $card-ios-title-padding-top !default; /// @prop - Margin top of the card title -$card-ios-title-margin-top: 0 !default; +$card-ios-title-margin-top: 0 !default; /// @prop - Margin end of the card title -$card-ios-title-margin-end: $card-ios-title-margin-top !default; +$card-ios-title-margin-end: $card-ios-title-margin-top !default; /// @prop - Margin bottom of the card title -$card-ios-title-margin-bottom: $card-ios-title-margin-top !default; +$card-ios-title-margin-bottom: $card-ios-title-margin-top !default; /// @prop - Margin start of the card title -$card-ios-title-margin-start: $card-ios-title-margin-top !default; +$card-ios-title-margin-start: $card-ios-title-margin-top !default; /// @prop - Color of the card title -$card-ios-title-text-color: $text-color !default; +$card-ios-title-text-color: $text-color !default; diff --git a/core/src/components/card-title/card-title.md.scss b/core/src/components/card-title/card-title.md.scss index 6741606b96..e3fb1eed83 100644 --- a/core/src/components/card-title/card-title.md.scss +++ b/core/src/components/card-title/card-title.md.scss @@ -7,8 +7,18 @@ :host { --color: #{$card-md-title-text-color}; - @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); + @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; font-weight: 500; diff --git a/core/src/components/card-title/card-title.md.vars.scss b/core/src/components/card-title/card-title.md.vars.scss index 31914b32b8..5047d6a617 100644 --- a/core/src/components/card-title/card-title.md.vars.scss +++ b/core/src/components/card-title/card-title.md.vars.scss @@ -1,34 +1,34 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Card Title // -------------------------------------------------- /// @prop - Font size of the card title -$card-md-title-font-size: dynamic-font(20px) !default; +$card-md-title-font-size: dynamic-font(20px) !default; /// @prop - Padding top of the card title -$card-md-title-padding-top: 0 !default; +$card-md-title-padding-top: 0 !default; /// @prop - Padding end of the card title -$card-md-title-padding-end: $card-md-title-padding-top !default; +$card-md-title-padding-end: $card-md-title-padding-top !default; /// @prop - Padding bottom of the card title -$card-md-title-padding-bottom: $card-md-title-padding-top !default; +$card-md-title-padding-bottom: $card-md-title-padding-top !default; /// @prop - Padding start of the card title -$card-md-title-padding-start: $card-md-title-padding-end !default; +$card-md-title-padding-start: $card-md-title-padding-end !default; /// @prop - Margin top of the card title -$card-md-title-margin-top: 0 !default; +$card-md-title-margin-top: 0 !default; /// @prop - Margin end of the card title -$card-md-title-margin-end: $card-md-title-margin-top !default; +$card-md-title-margin-end: $card-md-title-margin-top !default; /// @prop - Margin bottom of the card title -$card-md-title-margin-bottom: $card-md-title-margin-top !default; +$card-md-title-margin-bottom: $card-md-title-margin-top !default; /// @prop - Margin start of the card title -$card-md-title-margin-start: $card-md-title-margin-end !default; +$card-md-title-margin-start: $card-md-title-margin-end !default; /// @prop - Color of the card title -$card-md-title-text-color: $text-color-step-150 !default; +$card-md-title-text-color: $text-color-step-150 !default; diff --git a/core/src/components/card-title/card-title.scss b/core/src/components/card-title/card-title.scss index 9f8843568f..b166f0234a 100644 --- a/core/src/components/card-title/card-title.scss +++ b/core/src/components/card-title/card-title.scss @@ -1,5 +1,4 @@ -@import "../../themes/ionic.globals"; - +@import "../../themes/native/native.globals"; // Card Title // -------------------------------------------------- diff --git a/core/src/components/card/card.ionic.scss b/core/src/components/card/card.ionic.scss index d77cf07306..944d3de75e 100755 --- a/core/src/components/card/card.ionic.scss +++ b/core/src/components/card/card.ionic.scss @@ -1,33 +1,27 @@ -@use "../../foundations/ionic.vars.scss" as tokens; -@use "../../themes/ionic.mixins" as mixins; +@use "../../themes/ionic/ionic.globals.scss" as globals; // Ionic Card // -------------------------------------------------- :host { - // TODO(FW-6178): Remove this once the Stencil bug is resolved. - /** - * @prop --background: Background of the card - * @prop --color: Color of the card - */ - --background: #{tokens.$ionic-color-neutral-0}; - --border-radius: #{tokens.$ionic-border-radius-rounded-small}; + --background: #{globals.$ionic-color-neutral-0}; + --border-radius: #{globals.$ionic-border-radius-rounded-small}; - @include mixins.padding(tokens.$ionic-space-base); - @include mixins.border-radius(var(--border-radius)); + @include globals.padding(globals.$ionic-space-base); + @include globals.border-radius(var(--border-radius)); display: block; - border: #{tokens.$ionic-border-size-small} solid #{tokens.$ionic-color-neutral-50}; + border: #{globals.$ionic-border-size-small} solid #{globals.$ionic-color-neutral-50}; background: var(--background); color: var(--color); } :host(.card-round) { - --border-radius: #{tokens.$ionic-border-radius-rounded-large}; + --border-radius: #{globals.$ionic-border-radius-rounded-large}; } :host(.card-rectangular) { - --border-radius: #{tokens.$ionic-border-radius-square}; + --border-radius: #{globals.$ionic-border-radius-square}; } diff --git a/core/src/components/card/card.ios.vars.scss b/core/src/components/card/card.ios.vars.scss index ce9876ea26..dcbaa36efa 100755 --- a/core/src/components/card/card.ios.vars.scss +++ b/core/src/components/card/card.ios.vars.scss @@ -1,34 +1,34 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Card // -------------------------------------------------- /// @prop - Margin top of the card -$card-ios-margin-top: 24px !default; +$card-ios-margin-top: 24px !default; /// @prop - Margin end of the card -$card-ios-margin-end: 16px !default; +$card-ios-margin-end: 16px !default; /// @prop - Margin bottom of the card -$card-ios-margin-bottom: $card-ios-margin-top !default; +$card-ios-margin-bottom: $card-ios-margin-top !default; /// @prop - Margin start of the card -$card-ios-margin-start: 16px !default; +$card-ios-margin-start: 16px !default; /// @prop - Box shadow color of the card -$card-ios-box-shadow-color: rgba(0, 0, 0, .12) !default; +$card-ios-box-shadow-color: rgba(0, 0, 0, 0.12) !default; /// @prop - Box shadow of the card -$card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color !default; +$card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color !default; /// @prop - Border radius of the card -$card-ios-border-radius: 8px !default; +$card-ios-border-radius: 8px !default; /// @prop - Font size of the card -$card-ios-font-size: dynamic-font(14px) !default; +$card-ios-font-size: dynamic-font(14px) !default; /// @prop - Transition timing function of the card -$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1) !default; +$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1) !default; /// @prop - Transform of the card on activate -$card-ios-transform-activated: scale3d(.97, .97, 1) !default; +$card-ios-transform-activated: scale3d(0.97, 0.97, 1) !default; diff --git a/core/src/components/card/card.md.vars.scss b/core/src/components/card/card.md.vars.scss index cb13c43aee..bc81372a70 100755 --- a/core/src/components/card/card.md.vars.scss +++ b/core/src/components/card/card.md.vars.scss @@ -1,28 +1,28 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Card // -------------------------------------------------- /// @prop - Margin top of the card -$card-md-margin-top: 10px !default; +$card-md-margin-top: 10px !default; /// @prop - Margin end of the card -$card-md-margin-end: 10px !default; +$card-md-margin-end: 10px !default; /// @prop - Margin bottom of the card -$card-md-margin-bottom: 10px !default; +$card-md-margin-bottom: 10px !default; /// @prop - Margin start of the card -$card-md-margin-start: 10px !default; +$card-md-margin-start: 10px !default; /// @prop - Box shadow of the card -$card-md-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default; +$card-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default; /// @prop - Border radius of the card -$card-md-border-radius: 4px !default; +$card-md-border-radius: 4px !default; /// @prop - Font size of the card -$card-md-font-size: dynamic-font(14px) !default; +$card-md-font-size: dynamic-font(14px) !default; /// @prop - Line height of the card -$card-md-line-height: 1.5 !default; +$card-md-line-height: 1.5 !default; diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.scss index adc828c29f..e81166ea4d 100755 --- a/core/src/components/card/card.scss +++ b/core/src/components/card/card.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Card // -------------------------------------------------- @@ -26,7 +26,6 @@ overflow: hidden; } - // Card Colors // --------------------------------------------- @@ -35,17 +34,15 @@ color: current-color(contrast); } - // Disabled Card // -------------------------------------------------- :host(.card-disabled) { cursor: default; - opacity: .3; + opacity: 0.3; pointer-events: none; } - // Native // -------------------------------------------------- @@ -74,7 +71,8 @@ border: 0; } -button, a { +button, +a { cursor: pointer; user-select: none; diff --git a/core/src/components/checkbox/checkbox.ionic.scss b/core/src/components/checkbox/checkbox.ionic.scss index ff62e8160b..ad89faeed7 100644 --- a/core/src/components/checkbox/checkbox.ionic.scss +++ b/core/src/components/checkbox/checkbox.ionic.scss @@ -16,12 +16,12 @@ --focus-ring-color: #9ec4fd; --focus-ring-width: 2px; --focus-ring-offset: 2px; - + // Size --size: #{$checkbox-ionic-size}; // Checkbox Target area - // -------------------------------------------------- + // -------------------------------------------------- &::after { @include position(50%, 0, null, 0); @@ -47,8 +47,8 @@ // Ionic Design Checkbox Sizes // -------------------------------------------------- :host(.checkbox-size-small) { - // Size - --size: #{$checkbox-ionic-small-size}; + // Size + --size: #{$checkbox-ionic-small-size}; } // Ionic Design Checkbox Invalid diff --git a/core/src/components/checkbox/checkbox.ionic.vars.scss b/core/src/components/checkbox/checkbox.ionic.vars.scss index 3ddbac40f1..b5882dacf5 100644 --- a/core/src/components/checkbox/checkbox.ionic.vars.scss +++ b/core/src/components/checkbox/checkbox.ionic.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.ionic"; +@import "../../themes/native/native.globals"; // Ionic Checkbox Variables // -------------------------------------------------- @@ -28,4 +28,4 @@ $checkbox-ionic-small-size: 16px !default; /* Rectangular */ /// @prop - Rectangular border radius of the checkbox -$checkbox-ionic-rectangular-border: 0 !default; \ No newline at end of file +$checkbox-ionic-rectangular-border: 0 !default; diff --git a/core/src/components/checkbox/checkbox.ios.scss b/core/src/components/checkbox/checkbox.ios.scss index 7c7bcafc9f..34ecc1f844 100644 --- a/core/src/components/checkbox/checkbox.ios.scss +++ b/core/src/components/checkbox/checkbox.ios.scss @@ -21,7 +21,6 @@ --checkmark-width: #{$checkbox-ios-icon-checkmark-width}; } - // iOS Checkbox: Disabled // ----------------------------------------- // The checkbox and label should use the diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss index b63650a309..77a6959830 100644 --- a/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/core/src/components/checkbox/checkbox.ios.vars.scss @@ -1,30 +1,30 @@ @use "sass:math"; -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS Checkbox // -------------------------------------------------- /// @prop - Background color of the checkbox when off -$checkbox-ios-background-color-off: $item-ios-background !default; +$checkbox-ios-background-color-off: $item-ios-background !default; /// @prop - Size of the checkbox icon -$checkbox-ios-icon-size: dynamic-font-max(22px, 2.538) !default; +$checkbox-ios-icon-size: dynamic-font-max(22px, 2.538) !default; /// @prop - Border color of the checkbox icon when off -$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23) !default; +$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23) !default; /// @prop - Border width of the checkbox icon -$checkbox-ios-icon-border-width: dynamic-font(2px) !default; +$checkbox-ios-icon-border-width: dynamic-font(2px) !default; /// @prop - Border style of the checkbox icon -$checkbox-ios-icon-border-style: solid !default; +$checkbox-ios-icon-border-style: solid !default; /// @prop - Border radius of the checkbox icon -$checkbox-ios-icon-border-radius: 50% !default; +$checkbox-ios-icon-border-radius: 50% !default; /// @prop - Opacity of the disabled checkbox -$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; /// @prop - Checkmark width of the checkbox icon -$checkbox-ios-icon-checkmark-width: 1.5px !default; +$checkbox-ios-icon-checkmark-width: 1.5px !default; diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss index e87f7bbf1a..96aafc208a 100644 --- a/core/src/components/checkbox/checkbox.md.scss +++ b/core/src/components/checkbox/checkbox.md.scss @@ -6,7 +6,7 @@ :host { // Border - --border-radius: calc(var(--size) * .125); + --border-radius: calc(var(--size) * 0.125); --border-width: #{$checkbox-md-icon-border-width}; --border-style: #{$checkbox-md-icon-border-style}; --border-color: #{$checkbox-md-icon-border-color-off}; @@ -37,7 +37,6 @@ transition: stroke-dashoffset 90ms linear 90ms; } - // Material Design Checkbox: Disabled // -------------------------------------------------------- // The checkbox itself should use the disabled diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss index d2359c4067..1f36879181 100644 --- a/core/src/components/checkbox/checkbox.md.vars.scss +++ b/core/src/components/checkbox/checkbox.md.vars.scss @@ -1,34 +1,34 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../item/item.md.vars"; // Material Design Checkbox // -------------------------------------------------- /// @prop - Opacity of the disabled checkbox label -$checkbox-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$checkbox-md-disabled-opacity: $form-control-md-disabled-opacity !default; /// @prop - Background color of the checkbox icon when off -$checkbox-md-icon-background-color-off: $item-md-background !default; +$checkbox-md-icon-background-color-off: $item-md-background !default; /// @prop - Size of the checkbox icon /// The icon size does not use dynamic font /// because it does not scale in native. -$checkbox-md-icon-size: 18px !default; +$checkbox-md-icon-size: 18px !default; /// @prop - Border width of the checkbox icon -$checkbox-md-icon-border-width: 2px !default; +$checkbox-md-icon-border-width: 2px !default; /// @prop - Border style of the checkbox icon -$checkbox-md-icon-border-style: solid !default; +$checkbox-md-icon-border-style: solid !default; /// @prop - Border color of the checkbox icon when off -$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60) !default; +$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.6) !default; /// @prop - Transition duration of the checkbox -$checkbox-md-transition-duration: 180ms !default; +$checkbox-md-transition-duration: 180ms !default; /// @prop - Transition easing of the checkbox -$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; +$checkbox-md-transition-easing: cubic-bezier(0.4, 0, 0.2, 1) !default; /// @prop - Opacity of the disabled checkbox /// This value is used because the checkbox color is set to @@ -37,4 +37,4 @@ $checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; /// opacity is applied on top of the transparent color so /// this opacity gets us the equivalent of applying `0.38` /// on top of an opaque checkbox `rgb(0, 0, 0, 1.0)` -$checkbox-md-icon-disabled-opacity: 0.63 !default; +$checkbox-md-icon-disabled-opacity: 0.63 !default; diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss index 47e9f6d704..b947a21f73 100644 --- a/core/src/components/checkbox/checkbox.scss +++ b/core/src/components/checkbox/checkbox.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "./checkbox.vars.scss"; // Checkbox diff --git a/core/src/components/checkbox/checkbox.vars.scss b/core/src/components/checkbox/checkbox.vars.scss index 2116a369e8..504a4f7933 100644 --- a/core/src/components/checkbox/checkbox.vars.scss +++ b/core/src/components/checkbox/checkbox.vars.scss @@ -2,4 +2,4 @@ $checkbox-item-label-margin-top: 10px !default; /// @prop - Bottom margin of checkbox's label when in an item -$checkbox-item-label-margin-bottom: 10px !default; \ No newline at end of file +$checkbox-item-label-margin-bottom: 10px !default; diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss index 7200d73587..d8ccf11ed6 100644 --- a/core/src/components/chip/chip.ionic.scss +++ b/core/src/components/chip/chip.ionic.scss @@ -1,5 +1,4 @@ -@use "../../themes/ionic.mixins" as mixins; -@use "../../foundations/ionic.vars.scss" as tokens; +@use "../../themes/ionic/ionic.globals.scss" as globals; // Ionic Chip // -------------------------------------------------- @@ -9,21 +8,16 @@ $ionic-states-focus-primary: #9ec4fd; $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make this in the future, as we are setting scss variables with a var() and fallback, and it doesn't work inside a rgba(). :host { - // TODO(FW-6178): Remove this once the Stencil bug is resolved. - /** - * @prop --background: Background of the chip - * @prop --color: Color of the chip - */ - --background: #{tokens.$ionic-color-neutral-10}; + --background: #{globals.$ionic-color-neutral-10}; --border-color: transparent; - --border-radius: #{tokens.$ionic-border-radius-rounded-small}; - --color: #{tokens.$ionic-color-neutral-900}; + --border-radius: #{globals.$ionic-border-radius-rounded-small}; + --color: #{globals.$ionic-color-neutral-900}; --focus-ring-color: #{$ionic-states-focus-primary}; - --focus-ring-width: #{tokens.$ionic-border-size-medium}; + --focus-ring-width: #{globals.$ionic-border-size-medium}; - @include mixins.font-smoothing; - @include mixins.padding(tokens.$ionic-space-xs, tokens.$ionic-space-xxs); - @include mixins.border-radius(var(--border-radius)); + @include globals.font-smoothing; + @include globals.padding(globals.$ionic-space-xs, globals.$ionic-space-xxs); + @include globals.border-radius(var(--border-radius)); display: inline-flex; @@ -32,11 +26,11 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi align-items: center; justify-content: center; - gap: tokens.$ionic-space-xxxs; + gap: globals.$ionic-space-xxxs; min-height: 32px; - border-width: tokens.$ionic-border-size-small; + border-width: globals.$ionic-border-size-small; border-style: solid; border-color: var(--border-color); @@ -44,11 +38,11 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi background: var(--background); color: var(--color); - font-family: tokens.$ionic-font-family; - font-size: tokens.$ionic-font-size-m; - font-weight: tokens.$ionic-font-weight-medium; + font-family: globals.$ionic-font-family; + font-size: globals.$ionic-font-size-m; + font-weight: globals.$ionic-font-weight-medium; - line-height: tokens.$ionic-font-line-height-full; + line-height: globals.$ionic-font-line-height-full; cursor: pointer; @@ -64,7 +58,7 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi :host(.chip-outline) { --background: transparent; - border-color: tokens.$ionic-color-neutral-100; + border-color: globals.$ionic-color-neutral-100; } // Chip: Focus @@ -96,15 +90,15 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi // --------------------------------------------- :host(.chip-round) { - --border-radius: #{tokens.$ionic-border-radius-rounded-large}; + --border-radius: #{globals.$ionic-border-radius-rounded-large}; } :host(.chip-rectangular) { - --border-radius: #{tokens.$ionic-border-radius-square}; + --border-radius: #{globals.$ionic-border-radius-square}; } // Chip Icon // --------------------------------------------- ::slotted(ion-icon) { - font-size: tokens.$ionic-font-size-l; + font-size: globals.$ionic-font-size-l; } diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss index 37a3f700f1..fc235d6599 100644 --- a/core/src/components/chip/chip.scss +++ b/core/src/components/chip/chip.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "./chip.vars"; :host { diff --git a/core/src/components/col/col.vars.scss b/core/src/components/col/col.vars.scss index ca89b021cc..744c0854c8 100644 --- a/core/src/components/col/col.vars.scss +++ b/core/src/components/col/col.vars.scss @@ -1,11 +1,11 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "../grid/grid.mixins"; // Grid Column // -------------------------------------------------- /// @prop - The padding for the grid column -$grid-column-padding: var(--ion-grid-column-padding, 5px) !default; +$grid-column-padding: var(--ion-grid-column-padding, 5px) !default; /// @prop - The padding for the column at different breakpoints $grid-column-paddings: ( @@ -13,5 +13,5 @@ $grid-column-paddings: ( sm: var(--ion-grid-column-padding-sm, $grid-column-padding), md: var(--ion-grid-column-padding-md, $grid-column-padding), lg: var(--ion-grid-column-padding-lg, $grid-column-padding), - xl: var(--ion-grid-column-padding-xl, $grid-column-padding) + xl: var(--ion-grid-column-padding-xl, $grid-column-padding), ) !default; diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss index 5f8b2afa83..de81ebc89b 100644 --- a/core/src/components/content/content.scss +++ b/core/src/components/content/content.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Content // -------------------------------------------------- @@ -55,7 +55,7 @@ } #background-content { - @include position(calc(var(--offset-top) * -1), 0px,calc(var(--offset-bottom) * -1), 0px); + @include position(calc(var(--offset-top) * -1), 0px, calc(var(--offset-bottom) * -1), 0px); position: absolute; @@ -63,8 +63,13 @@ } .inner-scroll { - @include position(calc(var(--offset-top) * -1), 0px,calc(var(--offset-bottom) * -1), 0px); - @include padding(calc(var(--padding-top) + var(--offset-top)), var(--padding-end), calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)), var(--padding-start)); + @include position(calc(var(--offset-top) * -1), 0px, calc(var(--offset-bottom) * -1), 0px); + @include padding( + calc(var(--padding-top) + var(--offset-top)), + var(--padding-end), + calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)), + var(--padding-start) + ); position: absolute; @@ -234,7 +239,6 @@ transform: scaleX(-1); } - // Content: Fixed // -------------------------------------------------- diff --git a/core/src/components/datetime-button/datetime-button.scss b/core/src/components/datetime-button/datetime-button.scss index 1570cfc4c7..6defd0da9b 100644 --- a/core/src/components/datetime-button/datetime-button.scss +++ b/core/src/components/datetime-button/datetime-button.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Datetime Button // -------------------------------------------------- diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss index 71bff22441..b03e56cb5a 100644 --- a/core/src/components/datetime/datetime.ios.scss +++ b/core/src/components/datetime/datetime.ios.scss @@ -1,6 +1,6 @@ @import "./datetime.scss"; @import "./datetime.ios.vars.scss"; -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; :host { --background: #{ion-color(light, base)}; @@ -182,7 +182,11 @@ * The second set of @support checks account for all other browsers that * do not support mod() yet. */ -@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))) { +@supports ( + (border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and + (not (contain-intrinsic-size: none)) + ) + or (not (border-radius: mod(1px, 1px))) { .calendar-days-of-week .day-of-week { width: auto; height: auto; @@ -198,7 +202,6 @@ // Calendar / Body // ----------------------------------- :host .calendar-body .calendar-month .calendar-month-grid { - /** * We need to apply the padding to * each month grid item otherwise @@ -206,7 +209,12 @@ * this padding a snapping point if applied * on .calendar-month */ - @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5); + @include padding( + $datetime-ios-padding * 0.5, + $datetime-ios-padding * 0.5, + $datetime-ios-padding * 0.5, + $datetime-ios-padding * 0.5 + ); align-items: center; @@ -282,7 +290,12 @@ // Footer // ----------------------------------- :host .datetime-buttons { - @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5); + @include padding( + $datetime-ios-padding * 0.5, + $datetime-ios-padding * 0.5, + $datetime-ios-padding * 0.5, + $datetime-ios-padding * 0.5 + ); border-top: $datetime-ios-border-color; } diff --git a/core/src/components/datetime/datetime.ios.vars.scss b/core/src/components/datetime/datetime.ios.vars.scss index 4cb8ad9db1..62b9b0a896 100644 --- a/core/src/components/datetime/datetime.ios.vars.scss +++ b/core/src/components/datetime/datetime.ios.vars.scss @@ -2,10 +2,10 @@ // -------------------------------------------------- /// @prop - Border color for dividers between header and footer -$datetime-ios-border-color: 0.55px solid $background-color-step-200 !default; +$datetime-ios-border-color: 0.55px solid $background-color-step-200 !default; /// @prop - Padding for content -$datetime-ios-padding: 16px !default; +$datetime-ios-padding: 16px !default; /// @prop - The font size at which layouts may change to accommodate Dynamic Type $datetime-dynamic-font-breakpoint: 24px !default; diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss index 7b3d78f5e8..3cd263f72e 100644 --- a/core/src/components/datetime/datetime.md.scss +++ b/core/src/components/datetime/datetime.md.scss @@ -1,6 +1,6 @@ @import "./datetime.scss"; @import "./datetime.md.vars.scss"; -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; :host { --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff)); @@ -10,7 +10,12 @@ // Header // ----------------------------------- :host .datetime-header { - @include padding($datetime-md-header-padding, $datetime-md-header-padding, $datetime-md-header-padding, $datetime-md-header-padding); + @include padding( + $datetime-md-header-padding, + $datetime-md-header-padding, + $datetime-md-header-padding, + $datetime-md-header-padding + ); background: current-color(base); color: var(--title-color); diff --git a/core/src/components/datetime/datetime.md.vars.scss b/core/src/components/datetime/datetime.md.vars.scss index c35c405232..032570bef5 100644 --- a/core/src/components/datetime/datetime.md.vars.scss +++ b/core/src/components/datetime/datetime.md.vars.scss @@ -2,19 +2,19 @@ // -------------------------------------------------- /// @prop - Font size for title in header -$datetime-md-title-font-size: dynamic-font(12px) !default; +$datetime-md-title-font-size: dynamic-font(12px) !default; /// @prop - Font size for selected date in header -$datetime-md-selected-date-font-size: dynamic-font(34px) !default; +$datetime-md-selected-date-font-size: dynamic-font(34px) !default; /// @prop - Font size for calendar day button -$datetime-md-calendar-item-font-size: dynamic-font(14px) !default; +$datetime-md-calendar-item-font-size: dynamic-font(14px) !default; /// @prop - Padding for content in header -$datetime-md-header-padding: 20px !default; +$datetime-md-header-padding: 20px !default; /// @prop - Padding for content -$datetime-md-padding: 16px !default; +$datetime-md-padding: 16px !default; /// @prop - Width of the calendar day $datetime-md-day-width: 42px !default; diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index 9c7a4b0a2c..30d1f5bedc 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Datetime // -------------------------------------------------- @@ -79,9 +79,9 @@ * the text alignment too. */ :host .wheel-order-year-first .day-column { - order: 3; + order: 3; - text-align: end; + text-align: end; } :host .wheel-order-year-first .month-column { @@ -238,7 +238,6 @@ // Calendar / Body // ----------------------------------- :host .calendar-body { - /** * Show all calendar months inline * and allow them to take up 100% of diff --git a/core/src/components/fab-button/fab-button.ios.scss b/core/src/components/fab-button/fab-button.ios.scss index 2147acf63d..2e92ad79bb 100755 --- a/core/src/components/fab-button/fab-button.ios.scss +++ b/core/src/components/fab-button/fab-button.ios.scss @@ -28,7 +28,6 @@ font-size: $fab-ios-icon-font-size; } - // FAB buttons in a list // -------------------------------------------------- @@ -40,15 +39,13 @@ --color: #{$fab-ios-list-button-text-color}; --color-activated: #{$fab-ios-list-button-text-color}; --color-focused: var(--color-activated); - --transition: #{transform 200ms ease 10ms, - opacity 200ms ease 10ms}; + --transition: #{transform 200ms ease 10ms, opacity 200ms ease 10ms}; } :host(.fab-button-in-list) ::slotted(ion-icon) { font-size: $fab-ios-list-button-icon-font-size; } - // FAB Button: Color // -------------------------------------------------- @@ -76,7 +73,6 @@ } } - // Translucent FAB buttons // -------------------------------------------------- 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 1d1faa392a..0d11e93d7e 100755 --- a/core/src/components/fab-button/fab-button.ios.vars.scss +++ b/core/src/components/fab-button/fab-button.ios.vars.scss @@ -1,61 +1,61 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS FAB Button // -------------------------------------------------- /// @prop - Box shadow of the FAB button -$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !default; +$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !default; /// @prop - Box shadow of the activated FAB button -$fab-ios-box-shadow-activated: $fab-ios-box-shadow !default; +$fab-ios-box-shadow-activated: $fab-ios-box-shadow !default; /// @prop - Transform of the FAB button -$fab-ios-transform: scale(1.1) !default; +$fab-ios-transform: scale(1.1) !default; /// @prop - Transition of the FAB button -$fab-ios-transition: .2s transform cubic-bezier(.25, 1.11, .78, 1.59) !default; +$fab-ios-transition: 0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59) !default; /// @prop - Transition of the activated FAB button -$fab-ios-transition-activated: .2s transform ease-out !default; +$fab-ios-transition-activated: 0.2s transform ease-out !default; /// @prop - Background color of the button -$fab-ios-background-color: ion-color(primary, base) !default; +$fab-ios-background-color: ion-color(primary, base) !default; /// @prop - Background color of the activated button -$fab-ios-background-color-activated: ion-color(primary, shade) !default; +$fab-ios-background-color-activated: ion-color(primary, shade) !default; /// @prop - Text color of the button -$fab-ios-text-color: ion-color(primary, contrast) !default; +$fab-ios-text-color: ion-color(primary, contrast) !default; /// @prop - Font size of the button icon -$fab-ios-icon-font-size: 28px !default; +$fab-ios-icon-font-size: 28px !default; /// @prop - Background color of the button in a list -$fab-ios-list-button-background-color: ion-color(light, base) !default; +$fab-ios-list-button-background-color: ion-color(light, base) !default; /// @prop - Background color of the activated button in a list -$fab-ios-list-button-background-color-activated: ion-color(light, shade) !default; +$fab-ios-list-button-background-color-activated: ion-color(light, shade) !default; /// @prop - Background color of the hovered button in a list -$fab-ios-list-button-background-color-hover: ion-color(light, tint) !default; +$fab-ios-list-button-background-color-hover: ion-color(light, tint) !default; /// @prop - Text color of the button in a list -$fab-ios-list-button-text-color: ion-color(light, contrast) !default; +$fab-ios-list-button-text-color: ion-color(light, contrast) !default; /// @prop - Font size of the button icon in a list -$fab-ios-list-button-icon-font-size: 18px !default; +$fab-ios-list-button-icon-font-size: 18px !default; // Translucent FAB Button // -------------------------------------------------- /// @prop - Backdrop filter of the translucent button -$fab-ios-translucent-filter: saturate(180%) blur(20px) !default; +$fab-ios-translucent-filter: saturate(180%) blur(20px) !default; /// @prop - Alpha level of the translucent button background -$fab-ios-translucent-background-alpha: .9 !default; +$fab-ios-translucent-background-alpha: 0.9 !default; /// @prop - Alpha level of the translucent button background on hover -$fab-ios-translucent-background-alpha-hover: .8 !default; +$fab-ios-translucent-background-alpha-hover: 0.8 !default; /// @prop - Alpha level of the translucent button background on focus -$fab-ios-translucent-background-alpha-focused: .82 !default; +$fab-ios-translucent-background-alpha-focused: 0.82 !default; diff --git a/core/src/components/fab-button/fab-button.md.scss b/core/src/components/fab-button/fab-button.md.scss index a459b52e9c..a29553cced 100755 --- a/core/src/components/fab-button/fab-button.md.scss +++ b/core/src/components/fab-button/fab-button.md.scss @@ -10,17 +10,12 @@ --background-focused: currentColor; --background-hover: currentColor; --background-activated-opacity: 0; - --background-focused-opacity: .24; - --background-hover-opacity: .08; + --background-focused-opacity: 0.24; + --background-hover-opacity: 0.08; --color: #{$fab-md-text-color}; --box-shadow: #{$fab-md-box-shadow}; - --transition: #{ - box-shadow 280ms cubic-bezier(.4, 0, .2, 1), - background-color 280ms cubic-bezier(.4, 0, .2, 1), - color 280ms cubic-bezier(.4, 0, .2, 1), - opacity 15ms linear 30ms, - transform 270ms cubic-bezier(0, 0, .2, 1) 0ms - }; + --transition: #{box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), + color 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms}; --close-icon-font-size: #{$fab-md-icon-font-size}; } @@ -32,7 +27,6 @@ font-size: $fab-md-icon-font-size; } - // FAB buttons in a list // -------------------------------------------------- @@ -50,7 +44,6 @@ font-size: $fab-md-list-button-icon-font-size; } - // FAB Button: Color // -------------------------------------------------- @@ -78,4 +71,4 @@ background: #{current-color(contrast)}; } } -} \ No newline at end of file +} diff --git a/core/src/components/fab-button/fab-button.md.vars.scss b/core/src/components/fab-button/fab-button.md.vars.scss index edd4f572a0..b644bcac0a 100755 --- a/core/src/components/fab-button/fab-button.md.vars.scss +++ b/core/src/components/fab-button/fab-button.md.vars.scss @@ -1,34 +1,36 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design FAB Button // -------------------------------------------------- /// @prop - Box shadow of the FAB button -$fab-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) !default; +$fab-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), + 0 1px 18px 0 rgba(0, 0, 0, 0.12) !default; /// @prop - Box shadow of the activated FAB button -$fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12) !default; +$fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), + 0 5px 22px 4px rgba(0, 0, 0, 0.12) !default; /// @prop - Background color of the button -$fab-md-background-color: ion-color(primary, base) !default; +$fab-md-background-color: ion-color(primary, base) !default; /// @prop - Text color of the button -$fab-md-text-color: ion-color(primary, contrast) !default; +$fab-md-text-color: ion-color(primary, contrast) !default; /// @prop - Font size of the button icon -$fab-md-icon-font-size: 24px !default; +$fab-md-icon-font-size: 24px !default; /// @prop - Background color of the button in a list -$fab-md-list-button-background-color: ion-color(light, base) !default; +$fab-md-list-button-background-color: ion-color(light, base) !default; /// @prop - Background color of the activated button in a list -$fab-md-list-button-background-color-activated: ion-color(light, shade) !default; +$fab-md-list-button-background-color-activated: ion-color(light, shade) !default; /// @prop - Background color of the activated button in a list -$fab-md-list-button-background-color-hover: ion-color(light, tint) !default; +$fab-md-list-button-background-color-hover: ion-color(light, tint) !default; /// @prop - Text color of the button in a list -$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54) !default; +$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54) !default; /// @prop - Font size of the button icon in a list -$fab-md-list-button-icon-font-size: 18px !default; +$fab-md-list-button-icon-font-size: 18px !default; diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss index 0bf1495072..5ebf49d0b6 100755 --- a/core/src/components/fab-button/fab-button.scss +++ b/core/src/components/fab-button/fab-button.scss @@ -40,7 +40,7 @@ --color-focused: var(--color); --color-hover: var(--color); --background-hover: #{ion-color(primary, contrast)}; - --background-hover-opacity: .08; + --background-hover-opacity: 0.08; --transition: background-color, opacity 100ms linear; --ripple-color: currentColor; --border-radius: #{$fab-border-radius}; @@ -68,7 +68,6 @@ font-kerning: none; } - .button-native { @include border-radius(var(--border-radius)); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); @@ -132,17 +131,15 @@ z-index: 1; } - // FAB Button: Disabled // -------------------------------------------------- :host(.fab-button-disabled) { cursor: default; - opacity: .5; + opacity: 0.5; pointer-events: none; } - // FAB Button: Hover // -------------------------------------------------- @@ -158,7 +155,6 @@ } } - // FAB Button: Focused // -------------------------------------------------- @@ -172,7 +168,6 @@ } } - // FAB Button: Activated // -------------------------------------------------- @@ -186,7 +181,6 @@ } } - // FAB Content // -------------------------------------------------- @@ -194,7 +188,6 @@ line-height: 1; } - // FAB small (mini // -------------------------------------------------- @@ -216,7 +209,7 @@ height: 100%; - transform: scale(.4) rotateZ(-45deg); + transform: scale(0.4) rotateZ(-45deg); transition: all ease-in-out 300ms; transition-property: transform, opacity; @@ -228,7 +221,6 @@ z-index: 1; } - // FAB Animation // -------------------------------------------------- @@ -239,7 +231,7 @@ } :host(.fab-button-close-active) .button-inner { - transform: scale(.4) rotateZ(45deg); + transform: scale(0.4) rotateZ(45deg); opacity: 0; } @@ -257,7 +249,6 @@ ion-ripple-effect { } } - // FAB Button: Color // -------------------------------------------------- diff --git a/core/src/components/fab-button/fab-button.vars.scss b/core/src/components/fab-button/fab-button.vars.scss index 2556fec9b3..7cd8f29729 100755 --- a/core/src/components/fab-button/fab-button.vars.scss +++ b/core/src/components/fab-button/fab-button.vars.scss @@ -1,16 +1,16 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Floating Action Buttons // -------------------------------------------------- /// @prop - Width and height of the FAB button -$fab-size: 56px !default; +$fab-size: 56px !default; /// @prop - Width and height of the mini FAB button -$fab-small-size: 40px !default; +$fab-small-size: 40px !default; /// @prop - Border radius of the FAB button -$fab-border-radius: 50% !default; +$fab-border-radius: 50% !default; /// @prop - Margin applied to the small FAB button $fab-button-small-margin: 8px !default; diff --git a/core/src/components/fab-list/fab-list.scss b/core/src/components/fab-list/fab-list.scss index 5726d77751..f93831f43d 100644 --- a/core/src/components/fab-list/fab-list.scss +++ b/core/src/components/fab-list/fab-list.scss @@ -57,7 +57,6 @@ visibility: visible; } - :host(.fab-list-side-top) { top: auto; bottom: 0; diff --git a/core/src/components/fab-list/fab-list.vars.scss b/core/src/components/fab-list/fab-list.vars.scss index eed9c736fa..1c04b51c0c 100644 --- a/core/src/components/fab-list/fab-list.vars.scss +++ b/core/src/components/fab-list/fab-list.vars.scss @@ -1,8 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "../fab-button/fab-button.vars"; // Floating Action Button List // -------------------------------------------------- /// @prop - Margin of the FAB List -$fab-list-margin: 10px !default; +$fab-list-margin: 10px !default; diff --git a/core/src/components/fab/fab.scss b/core/src/components/fab/fab.scss index 227c4b0f37..c2e3ab6c72 100644 --- a/core/src/components/fab/fab.scss +++ b/core/src/components/fab/fab.scss @@ -13,7 +13,6 @@ z-index: $z-index-fixed-content; } - // FAB Horizontal Positioning // -------------------------------------------------- @@ -48,7 +47,6 @@ /* stylelint-enable */ } - // FAB Vertical Positioning // -------------------------------------------------- diff --git a/core/src/components/fab/fab.vars.scss b/core/src/components/fab/fab.vars.scss index 13e2a09493..a367828b31 100644 --- a/core/src/components/fab/fab.vars.scss +++ b/core/src/components/fab/fab.vars.scss @@ -1,8 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "../fab-button/fab-button.vars"; // Floating Action Button Container // -------------------------------------------------- /// @prop - Margin of the FAB Container -$fab-content-margin: 10px !default; +$fab-content-margin: 10px !default; diff --git a/core/src/components/footer/footer.ios.scss b/core/src/components/footer/footer.ios.scss index 7c59624efe..3ec950baa4 100644 --- a/core/src/components/footer/footer.ios.scss +++ b/core/src/components/footer/footer.ios.scss @@ -17,7 +17,7 @@ backdrop-filter: $footer-ios-translucent-filter; } .footer-translucent-ios ion-toolbar { - --opacity: .8; + --opacity: 0.8; } } diff --git a/core/src/components/footer/footer.ios.vars.scss b/core/src/components/footer/footer.ios.vars.scss index bb1311cdcd..cd3beda4e4 100644 --- a/core/src/components/footer/footer.ios.vars.scss +++ b/core/src/components/footer/footer.ios.vars.scss @@ -1,7 +1,7 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Footer // -------------------------------------------------- /// @prop - Filter of the translucent footer -$footer-ios-translucent-filter: saturate(180%) blur(20px) !default; +$footer-ios-translucent-filter: saturate(180%) blur(20px) !default; diff --git a/core/src/components/footer/footer.md.vars.scss b/core/src/components/footer/footer.md.vars.scss index 38d8bd63a0..b81953f439 100644 --- a/core/src/components/footer/footer.md.vars.scss +++ b/core/src/components/footer/footer.md.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Footer // -------------------------------------------------- diff --git a/core/src/components/footer/footer.scss b/core/src/components/footer/footer.scss index c6b9c24d15..90aa68f993 100644 --- a/core/src/components/footer/footer.scss +++ b/core/src/components/footer/footer.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Footer // -------------------------------------------------- @@ -16,4 +16,4 @@ ion-footer { ion-footer.footer-toolbar-padding ion-toolbar:last-of-type { padding-bottom: var(--ion-safe-area-bottom, 0); -} \ No newline at end of file +} diff --git a/core/src/components/grid/grid.mixins.scss b/core/src/components/grid/grid.mixins.scss index c1ddaf1908..d4e779b703 100644 --- a/core/src/components/grid/grid.mixins.scss +++ b/core/src/components/grid/grid.mixins.scss @@ -1,10 +1,9 @@ -@import "../../themes/ionic.globals"; -@import "../../themes/ionic.mixins"; +@import "../../themes/native/native.globals"; +@import "../../themes/mixins"; // Responsive Mixins // -------------------------------------------------- - // Creates a fixed width for the grid based on the screen size // --------------------------------------------------------------------------------- @@ -18,7 +17,6 @@ max-width: 100%; } - // Adds padding to the element based on breakpoints // --------------------------------------------------------------------------------- diff --git a/core/src/components/grid/grid.vars.scss b/core/src/components/grid/grid.vars.scss index bdfd69bc9c..bca2220369 100644 --- a/core/src/components/grid/grid.vars.scss +++ b/core/src/components/grid/grid.vars.scss @@ -1,11 +1,11 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "./grid.mixins"; // Grid // -------------------------------------------------- /// @prop - The padding for the grid -$grid-padding: var(--ion-grid-padding, 5px) !default; +$grid-padding: var(--ion-grid-padding, 5px) !default; /// @prop - The padding for the grid at different breakpoints $grid-paddings: ( @@ -13,7 +13,7 @@ $grid-paddings: ( sm: var(--ion-grid-padding-sm, $grid-padding), md: var(--ion-grid-padding-md, $grid-padding), lg: var(--ion-grid-padding-lg, $grid-padding), - xl: var(--ion-grid-padding-xl, $grid-padding) + xl: var(--ion-grid-padding-xl, $grid-padding), ) !default; /// @prop - Width of the grid for different screen sizes when fixed is enabled @@ -22,5 +22,5 @@ $grid-widths: ( sm: var(--ion-grid-width-sm, var(--ion-grid-width, 540px)), md: var(--ion-grid-width-md, var(--ion-grid-width, 720px)), lg: var(--ion-grid-width-lg, var(--ion-grid-width, 960px)), - xl: var(--ion-grid-width-xl, var(--ion-grid-width, 1140px)) + xl: var(--ion-grid-width-xl, var(--ion-grid-width, 1140px)), ) !default; diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index cda084da7c..c8f9bd25d5 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -17,7 +17,7 @@ backdrop-filter: $header-ios-translucent-filter; } .header-translucent-ios ion-toolbar { - --opacity: .8; + --opacity: 0.8; } /** @@ -79,7 +79,6 @@ padding-bottom: 13px; } - .header-collapse-main { --opacity-scale: 1; } @@ -136,7 +135,9 @@ * Both headers should be scoped to iOS mode otherwise an MD app that uses an * iOS header may cause other MD headers to be unexpectedly hidden. */ -ion-header.header-ios:not(.header-collapse-main):has(~ ion-content ion-header.header-ios[collapse="condense"], -~ ion-content ion-header.header-ios.header-collapse-condense) { +ion-header.header-ios:not(.header-collapse-main):has( + ~ ion-content ion-header.header-ios[collapse="condense"], + ~ ion-content ion-header.header-ios.header-collapse-condense + ) { opacity: 0; } diff --git a/core/src/components/header/header.ios.vars.scss b/core/src/components/header/header.ios.vars.scss index a4e8272d6f..05694a6198 100644 --- a/core/src/components/header/header.ios.vars.scss +++ b/core/src/components/header/header.ios.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Header // -------------------------------------------------- /// @prop - Blur value for backdrop-filter -$header-ios-blur: 20px; +$header-ios-blur: 20px; /// @prop - Filter of the translucent header -$header-ios-translucent-filter: saturate(180%) blur($header-ios-blur) !default; +$header-ios-translucent-filter: saturate(180%) blur($header-ios-blur) !default; diff --git a/core/src/components/header/header.md.vars.scss b/core/src/components/header/header.md.vars.scss index a99c36f93f..8c0630299c 100644 --- a/core/src/components/header/header.md.vars.scss +++ b/core/src/components/header/header.md.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Header // -------------------------------------------------- diff --git a/core/src/components/header/header.scss b/core/src/components/header/header.scss index 108607ddf7..7cb29aefa5 100644 --- a/core/src/components/header/header.scss +++ b/core/src/components/header/header.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Header // -------------------------------------------------- diff --git a/core/src/components/img/img.scss b/core/src/components/img/img.scss index 9efb820274..464f47ce7a 100644 --- a/core/src/components/img/img.scss +++ b/core/src/components/img/img.scss @@ -1,4 +1,3 @@ - :host { display: block; @@ -7,7 +6,7 @@ img { display: block; - + width: 100%; height: 100%; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss index 35c84a8776..6412451abf 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // Material Design Infinite Scroll // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-ios-loading-color: $text-color-step-400 !default; +$infinite-scroll-ios-loading-color: $text-color-step-400 !default; /// @prop - Color of the infinite scroll loading indicator text -$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color !default; +$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color !default; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss index fb1b0d18ee..4b7e9454ee 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Infinite Scroll // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-md-loading-color: $text-color-step-400 !default; +$infinite-scroll-md-loading-color: $text-color-step-400 !default; /// @prop - Color of the infinite scroll loading indicator text -$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color !default; +$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color !default; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.scss index 273eace261..c3816da60c 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.scss @@ -17,20 +17,27 @@ ion-infinite-scroll-content { } .infinite-loading { - @include margin($infinite-scroll-loading-margin-top, $infinite-scroll-loading-margin-end, $infinite-scroll-loading-margin-bottom, $infinite-scroll-loading-margin-start); + @include margin( + $infinite-scroll-loading-margin-top, + $infinite-scroll-loading-margin-end, + $infinite-scroll-loading-margin-bottom, + $infinite-scroll-loading-margin-start + ); display: none; width: 100%; } - .infinite-loading-text { - @include margin($infinite-scroll-loading-text-margin-top, $infinite-scroll-loading-text-margin-end, $infinite-scroll-loading-text-margin-bottom, $infinite-scroll-loading-text-margin-start); + @include margin( + $infinite-scroll-loading-text-margin-top, + $infinite-scroll-loading-text-margin-end, + $infinite-scroll-loading-text-margin-bottom, + $infinite-scroll-loading-text-margin-start + ); } - - // Infinite Scroll Content States // -------------------------------------------------- .infinite-scroll-loading ion-infinite-scroll-content > .infinite-loading { diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss index 8fdd8d5775..6eb79b3e65 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss @@ -1,31 +1,31 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Infinite Scroll // -------------------------------------------------- /// @prop - Minimum height of the infinite scroll content -$infinite-scroll-content-min-height: 84px !default; +$infinite-scroll-content-min-height: 84px !default; /// @prop - Margin top of the infinite scroll loading icon -$infinite-scroll-loading-margin-top: 0 !default; +$infinite-scroll-loading-margin-top: 0 !default; /// @prop - Margin end of the infinite scroll loading icon -$infinite-scroll-loading-margin-end: 0 !default; +$infinite-scroll-loading-margin-end: 0 !default; /// @prop - Margin bottom of the infinite scroll loading icon -$infinite-scroll-loading-margin-bottom: 32px !default; +$infinite-scroll-loading-margin-bottom: 32px !default; /// @prop - Margin start of the infinite scroll loading icon -$infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end !default; +$infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end !default; /// @prop - Margin top of the infinite scroll loading text -$infinite-scroll-loading-text-margin-top: 4px !default; +$infinite-scroll-loading-text-margin-top: 4px !default; /// @prop - Margin end of the infinite scroll loading text -$infinite-scroll-loading-text-margin-end: 32px !default; +$infinite-scroll-loading-text-margin-end: 32px !default; /// @prop - Margin bottom of the infinite scroll loading text -$infinite-scroll-loading-text-margin-bottom: 0 !default; +$infinite-scroll-loading-text-margin-bottom: 0 !default; /// @prop - Margin start of the infinite scroll loading text -$infinite-scroll-loading-text-margin-start: $infinite-scroll-loading-text-margin-end !default; +$infinite-scroll-loading-text-margin-start: $infinite-scroll-loading-text-margin-end !default; diff --git a/core/src/components/input/input.ios.vars.scss b/core/src/components/input/input.ios.vars.scss index 238d9cd427..66803e53f4 100644 --- a/core/src/components/input/input.ios.vars.scss +++ b/core/src/components/input/input.ios.vars.scss @@ -1,11 +1,11 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS Input // -------------------------------------------------- /// @prop - Font size of the input -$input-ios-font-size: inherit !default; +$input-ios-font-size: inherit !default; /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled input $input-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss index be54121d0e..bdea2161d5 100644 --- a/core/src/components/input/input.md.outline.scss +++ b/core/src/components/input/input.md.outline.scss @@ -97,7 +97,9 @@ * Label text should not extend * beyond the bounds of the input. */ - max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale}); + max-width: calc( + (100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale} + ); } /** diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index f00e98db39..94b3dbf0c8 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -42,7 +42,7 @@ } .input-bottom .counter { - letter-spacing: .0333333333em; + letter-spacing: 0.0333333333em; } // Input Label diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss index 952bc390ff..c264d19e9d 100644 --- a/core/src/components/input/input.md.vars.scss +++ b/core/src/components/input/input.md.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.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 80ebc9896a..dd21ad8eaa 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -399,7 +399,7 @@ */ max-width: 200px; - transition: color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); + transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1); /** * This ensures that double tapping this text diff --git a/core/src/components/input/input.vars.scss b/core/src/components/input/input.vars.scss index e21c162d17..817fc220ad 100644 --- a/core/src/components/input/input.vars.scss +++ b/core/src/components/input/input.vars.scss @@ -1 +1 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss index 3f05c4499d..d6d9007011 100644 --- a/core/src/components/item-divider/item-divider.ios.scss +++ b/core/src/components/item-divider/item-divider.ios.scss @@ -21,24 +21,37 @@ font-weight: $item-divider-ios-font-weight; } - // iOS Item Divider Slots // -------------------------------------------------- :host([slot="start"]) { - @include margin($item-ios-slot-start-margin-top, $item-ios-slot-start-margin-end, $item-ios-slot-start-margin-bottom, $item-ios-slot-start-margin-start); + @include margin( + $item-ios-slot-start-margin-top, + $item-ios-slot-start-margin-end, + $item-ios-slot-start-margin-bottom, + $item-ios-slot-start-margin-start + ); } :host([slot="end"]) { - @include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start); + @include margin( + $item-ios-slot-end-margin-top, + $item-ios-slot-end-margin-end, + $item-ios-slot-end-margin-bottom, + $item-ios-slot-end-margin-start + ); } ::slotted(ion-icon[slot="start"]), ::slotted(ion-icon[slot="end"]) { - @include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start); + @include margin( + $item-ios-icon-slot-margin-top, + $item-ios-icon-slot-margin-end, + $item-ios-icon-slot-margin-bottom, + $item-ios-icon-slot-margin-start + ); } - // iOS Item Divider Content // -------------------------------------------------- @@ -58,7 +71,12 @@ } ::slotted(p) { - @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start); + @include margin( + $item-ios-paragraph-margin-top, + $item-ios-paragraph-margin-end, + $item-ios-paragraph-margin-bottom, + $item-ios-paragraph-margin-start + ); color: $item-ios-paragraph-text-color; @@ -71,8 +89,7 @@ overflow: inherit; } -::slotted(h2:last-child) -::slotted(h3:last-child), +::slotted(h2:last-child) ::slotted(h3:last-child), ::slotted(h4:last-child), ::slotted(h5:last-child), ::slotted(h6: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 73de9f08fc..c9717d97ac 100644 --- a/core/src/components/item-divider/item-divider.ios.vars.scss +++ b/core/src/components/item-divider/item-divider.ios.vars.scss @@ -1,26 +1,26 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS Item Divider // -------------------------------------------------- /// @prop - Minimum height for the divider -$item-divider-ios-min-height: 28px !default; +$item-divider-ios-min-height: 28px !default; /// @prop - Font size of the item -$item-divider-ios-font-size: dynamic-font(17px) !default; +$item-divider-ios-font-size: dynamic-font(17px) !default; /// @prop - Font weight of the item -$item-divider-ios-font-weight: 600 !default; +$item-divider-ios-font-weight: 600 !default; /// @prop - Background for the divider -$item-divider-ios-background: $background-color-step-100 !default; +$item-divider-ios-background: $background-color-step-100 !default; /// @prop - Color for the divider -$item-divider-ios-color: $text-color-step-150 !default; +$item-divider-ios-color: $text-color-step-150 !default; /// @prop - Padding start for the divider -$item-divider-ios-padding-start: $item-ios-padding-start !default; +$item-divider-ios-padding-start: $item-ios-padding-start !default; /// @prop - Padding end for the divider -$item-divider-ios-padding-end: $item-ios-padding-end !default; +$item-divider-ios-padding-end: $item-ios-padding-end !default; diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss index 9da42310b2..02ead8975e 100644 --- a/core/src/components/item-divider/item-divider.md.scss +++ b/core/src/components/item-divider/item-divider.md.scss @@ -18,7 +18,6 @@ font-size: dynamic-font($item-divider-md-font-size); } - // Material Design Item Divider Slots // -------------------------------------------------- @@ -30,7 +29,6 @@ @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end); } - // Material Design Slotted Label // -------------------------------------------------- @@ -38,7 +36,6 @@ @include margin(13px, 0, 10px, 0); } - // Material Design Slotted Icon // -------------------------------------------------- @@ -55,11 +52,16 @@ } :host(.ion-color) ::slotted(ion-icon) { - color: current-color(contrast); + color: current-color(contrast); } ::slotted(ion-icon[slot]) { - @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start); + @include margin( + $item-md-icon-slot-margin-top, + $item-md-icon-slot-margin-end, + $item-md-icon-slot-margin-bottom, + $item-md-icon-slot-margin-start + ); } ::slotted(ion-icon[slot="start"]) { @@ -70,7 +72,6 @@ @include margin-horizontal($item-md-icon-end-slot-margin-start, $item-md-icon-end-slot-margin-end); } - // Material Design Slotted Note // -------------------------------------------------- @@ -83,7 +84,12 @@ } ::slotted(ion-note[slot]) { - @include padding($item-md-note-slot-padding-top, $item-md-note-slot-padding-end, $item-md-note-slot-padding-bottom, $item-md-note-slot-padding-start); + @include padding( + $item-md-note-slot-padding-top, + $item-md-note-slot-padding-end, + $item-md-note-slot-padding-bottom, + $item-md-note-slot-padding-start + ); } // Material Design Item Divider Avatar @@ -106,7 +112,12 @@ ::slotted(ion-avatar), ::slotted(ion-thumbnail) { - @include margin($item-md-media-slot-margin-top, $item-md-media-slot-margin-end, $item-md-media-slot-margin-bottom, $item-md-media-slot-margin-start); + @include margin( + $item-md-media-slot-margin-top, + $item-md-media-slot-margin-end, + $item-md-media-slot-margin-bottom, + $item-md-media-slot-margin-start + ); } ::slotted(ion-avatar[slot="start"]), @@ -119,7 +130,6 @@ @include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end); } - // Material Design Item Divider Content // -------------------------------------------------- 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 f817b80b45..5cac46c1ed 100644 --- a/core/src/components/item-divider/item-divider.md.vars.scss +++ b/core/src/components/item-divider/item-divider.md.vars.scss @@ -1,26 +1,26 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../item/item.md.vars"; // Material Design Item Divider // -------------------------------------------------- /// @prop - Minimum height for the divider -$item-divider-md-min-height: 30px !default; +$item-divider-md-min-height: 30px !default; /// @prop - Color for the divider -$item-divider-md-color: $text-color-step-600 !default; +$item-divider-md-color: $text-color-step-600 !default; /// @prop - Background for the divider -$item-divider-md-background: $background-color !default; +$item-divider-md-background: $background-color !default; /// @prop - Font size for the divider -$item-divider-md-font-size: 14px !default; +$item-divider-md-font-size: 14px !default; /// @prop - Border bottom for the divider -$item-divider-md-border-bottom: 1px solid $item-md-border-color !default; +$item-divider-md-border-bottom: 1px solid $item-md-border-color !default; /// @prop - Padding start for the divider -$item-divider-md-padding-start: $item-md-padding-start !default; +$item-divider-md-padding-start: $item-md-padding-start !default; /// @prop - Padding end for the divider -$item-divider-md-padding-end: $item-md-padding-end !default; +$item-divider-md-padding-end: $item-md-padding-end !default; diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index 58ff5a1118..aaae4b93d4 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -1,5 +1,4 @@ -@import "../../themes/ionic.globals"; - +@import "../../themes/native/native.globals"; // Item Divider // -------------------------------------------------- diff --git a/core/src/components/item-group/item-group.ios.scss b/core/src/components/item-group/item-group.ios.scss index 120b2e26f5..706677bd3d 100644 --- a/core/src/components/item-group/item-group.ios.scss +++ b/core/src/components/item-group/item-group.ios.scss @@ -1,6 +1,5 @@ @import "./item-group"; @import "./item-group.ios.vars"; - // iOS Item Group // -------------------------------------------------- diff --git a/core/src/components/item-group/item-group.ios.vars.scss b/core/src/components/item-group/item-group.ios.vars.scss index 4658799381..aea8df0d57 100644 --- a/core/src/components/item-group/item-group.ios.vars.scss +++ b/core/src/components/item-group/item-group.ios.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Item Group // -------------------------------------------------- diff --git a/core/src/components/item-group/item-group.md.scss b/core/src/components/item-group/item-group.md.scss index 92d35465d6..be23829ae4 100644 --- a/core/src/components/item-group/item-group.md.scss +++ b/core/src/components/item-group/item-group.md.scss @@ -1,6 +1,5 @@ @import "./item-group"; @import "./item-group.md.vars"; - // Material Design Item Group // -------------------------------------------------- diff --git a/core/src/components/item-group/item-group.md.vars.scss b/core/src/components/item-group/item-group.md.vars.scss index dd1b400f56..71c4ba8e35 100644 --- a/core/src/components/item-group/item-group.md.vars.scss +++ b/core/src/components/item-group/item-group.md.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Item Group // -------------------------------------------------- diff --git a/core/src/components/item-group/item-group.scss b/core/src/components/item-group/item-group.scss index 4f2c5df800..158f874ce7 100644 --- a/core/src/components/item-group/item-group.scss +++ b/core/src/components/item-group/item-group.scss @@ -1,6 +1,5 @@ @import "./item-group.vars"; - // Item Group // -------------------------------------------------- diff --git a/core/src/components/item-group/item-group.vars.scss b/core/src/components/item-group/item-group.vars.scss index 1c7bd2a4a9..b83816e03c 100644 --- a/core/src/components/item-group/item-group.vars.scss +++ b/core/src/components/item-group/item-group.vars.scss @@ -1,5 +1,4 @@ -@import "../../themes/ionic.globals"; - +@import "../../themes/native/native.globals"; // Item Group // -------------------------------------------------- diff --git a/core/src/components/item-option/item-option.ios.vars.scss b/core/src/components/item-option/item-option.ios.vars.scss index 5c63226dc4..52b11df535 100644 --- a/core/src/components/item-option/item-option.ios.vars.scss +++ b/core/src/components/item-option/item-option.ios.vars.scss @@ -1,7 +1,7 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Item Option // -------------------------------------------------- /// @prop - Font size of the item option button -$item-option-button-ios-font-size: dynamic-font-clamp(1, 16px, 2.2) !default; +$item-option-button-ios-font-size: dynamic-font-clamp(1, 16px, 2.2) !default; diff --git a/core/src/components/item-option/item-option.md.vars.scss b/core/src/components/item-option/item-option.md.vars.scss index 3e27b73ccf..4fdcc9a396 100644 --- a/core/src/components/item-option/item-option.md.vars.scss +++ b/core/src/components/item-option/item-option.md.vars.scss @@ -1,7 +1,7 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Item Option // -------------------------------------------------- /// @prop - Font size of the sliding option button -$item-option-button-md-font-size: dynamic-font(14px) !default; +$item-option-button-md-font-size: dynamic-font(14px) !default; diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss index 56cb1138ab..6f975844af 100644 --- a/core/src/components/item-option/item-option.scss +++ b/core/src/components/item-option/item-option.scss @@ -24,7 +24,7 @@ .button-native { @include text-inherit(); - @include padding(0, .7em); + @include padding(0, 0.7em); display: inline-block; @@ -84,12 +84,11 @@ @include padding(0); @include margin(0, 10px); - min-width: .9em; + min-width: 0.9em; font-size: 1.8em; } - // Item Expandable Animation // -------------------------------------------------- @@ -98,10 +97,9 @@ transition-duration: 0; transition-property: none; - transition-timing-function: cubic-bezier(.65, .05, .36, 1); + transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); } - // Item Disabled Styling // -------------------------------------------------- @@ -111,6 +109,6 @@ :host(.item-option-disabled) .button-native { cursor: default; - opacity: .5; + opacity: 0.5; pointer-events: none; } diff --git a/core/src/components/item-option/item-option.vars.scss b/core/src/components/item-option/item-option.vars.scss index bf9f10b867..03ffac6554 100644 --- a/core/src/components/item-option/item-option.vars.scss +++ b/core/src/components/item-option/item-option.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Item Option // -------------------------------------------------- diff --git a/core/src/components/item-options/item-options.ios.scss b/core/src/components/item-options/item-options.ios.scss index 2a6c319dcb..9dba814b74 100644 --- a/core/src/components/item-options/item-options.ios.scss +++ b/core/src/components/item-options/item-options.ios.scss @@ -14,8 +14,6 @@ } } - - // iOS No Lines List // -------------------------------------------------- @@ -23,7 +21,6 @@ border-bottom-width: 0; } - // iOS Full/Inset Lines List // -------------------------------------------------- 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 3f465ef332..36b7b62465 100644 --- a/core/src/components/item-options/item-options.ios.vars.scss +++ b/core/src/components/item-options/item-options.ios.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS Item Options diff --git a/core/src/components/item-options/item-options.md.scss b/core/src/components/item-options/item-options.md.scss index 39bb207c05..09a9028d26 100644 --- a/core/src/components/item-options/item-options.md.scss +++ b/core/src/components/item-options/item-options.md.scss @@ -10,7 +10,6 @@ border-bottom-color: $item-md-border-bottom-color; } - // Material Design No Lines List // -------------------------------------------------- @@ -18,7 +17,6 @@ border-bottom-width: 0; } - // Material Design Full/Inset Lines List // -------------------------------------------------- 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 dd746708d0..20bf116b09 100644 --- a/core/src/components/item-options/item-options.md.vars.scss +++ b/core/src/components/item-options/item-options.md.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../item/item.md.vars"; // Material Design Item Options diff --git a/core/src/components/item-options/item-options.vars.scss b/core/src/components/item-options/item-options.vars.scss index b004661675..85cea21e14 100644 --- a/core/src/components/item-options/item-options.vars.scss +++ b/core/src/components/item-options/item-options.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Item Options // -------------------------------------------------- diff --git a/core/src/components/item-sliding/item-sliding.scss b/core/src/components/item-sliding/item-sliding.scss index c52b8d5d4e..8a342f5796 100644 --- a/core/src/components/item-sliding/item-sliding.scss +++ b/core/src/components/item-sliding/item-sliding.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Item Sliding // -------------------------------------------------- @@ -21,7 +21,7 @@ ion-item-sliding .item { .item-sliding-active-slide .item { position: relative; - transition: transform 500ms cubic-bezier(.36, .66, .04, 1); + transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1); opacity: 1; z-index: $z-index-item-options + 1; @@ -47,7 +47,7 @@ ion-item-sliding .item { order: -1; } - transition-duration: .6s; + transition-duration: 0.6s; transition-property: padding-left; } @@ -65,6 +65,6 @@ ion-item-sliding .item { order: 1; } - transition-duration: .6s; + transition-duration: 0.6s; transition-property: padding-right; } diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index 54d897251a..ccad159e3e 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -24,16 +24,15 @@ --background-activated: #{$text-color}; --background-focused: #{$text-color}; --background-hover: currentColor; - --background-activated-opacity: .12; - --background-focused-opacity: .15; - --background-hover-opacity: .04; + --background-activated-opacity: 0.12; + --background-focused-opacity: 0.15; + --background-hover-opacity: 0.04; --border-color: #{$item-ios-border-bottom-color}; --color: #{$item-ios-color}; font-size: $item-ios-font-size; } - // iOS Item: States // -------------------------------------------------- @@ -44,22 +43,20 @@ :host(.ion-color.ion-focused) .item-native::after { background: #000; - opacity: .15; + opacity: 0.15; } :host(.ion-color.ion-activated) .item-native { &::after { background: #000; - opacity: .12; + opacity: 0.12; } } - // iOS Item Lines // -------------------------------------------------- - // Full lines - apply the border to the item // Inset lines - apply the border to the item inner :host(.item-lines-full) { @@ -87,23 +84,36 @@ // -------------------------------------------------- ::slotted([slot="start"]) { - @include margin($item-ios-slot-start-margin-top, $item-ios-slot-start-margin-end, $item-ios-slot-start-margin-bottom, $item-ios-slot-start-margin-start); + @include margin( + $item-ios-slot-start-margin-top, + $item-ios-slot-start-margin-end, + $item-ios-slot-start-margin-bottom, + $item-ios-slot-start-margin-start + ); } ::slotted([slot="end"]) { - @include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start); + @include margin( + $item-ios-slot-end-margin-top, + $item-ios-slot-end-margin-end, + $item-ios-slot-end-margin-bottom, + $item-ios-slot-end-margin-start + ); } - // iOS Slotted Icon // -------------------------------------------------- ::slotted(ion-icon[slot="start"]), ::slotted(ion-icon[slot="end"]) { - @include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start); + @include margin( + $item-ios-icon-slot-margin-top, + $item-ios-icon-slot-margin-end, + $item-ios-icon-slot-margin-bottom, + $item-ios-icon-slot-margin-start + ); } - // iOS Slotted Toggle // -------------------------------------------------- @@ -117,7 +127,12 @@ :host(.item-label-stacked) ::slotted([slot="end"]), :host(.item-label-floating) ::slotted([slot="end"]) { - @include margin($item-ios-label-slot-end-margin-top, $item-ios-label-slot-end-margin-end, $item-ios-label-slot-end-margin-bottom, $item-ios-label-slot-end-margin-start); + @include margin( + $item-ios-label-slot-end-margin-top, + $item-ios-label-slot-end-margin-end, + $item-ios-label-slot-end-margin-bottom, + $item-ios-label-slot-end-margin-start + ); } // iOS Item Button @@ -126,8 +141,8 @@ ::slotted(.button-small) { --padding-top: 1px; --padding-bottom: 1px; - --padding-start: .5em; - --padding-end: .5em; + --padding-start: 0.5em; + --padding-end: 0.5em; min-height: 24px; @@ -157,7 +172,6 @@ @include margin(($item-ios-padding-end * 0.5)); } - // iOS Radio / Toggle Item Label // ----------------------------------------- @@ -166,7 +180,6 @@ @include margin-horizontal(0px, null); } - // iOS Slotted Label // -------------------------------------------------- diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 4ebbb24f0a..5bacf72283 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -1,110 +1,109 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Item // -------------------------------------------------- /// @prop - Minimum height of the item -$item-ios-min-height: 44px !default; +$item-ios-min-height: 44px !default; /// @prop - Font size of the item -$item-ios-font-size: dynamic-font(16px) !default; +$item-ios-font-size: dynamic-font(16px) !default; /// @prop - Margin top of the item paragraph -$item-ios-paragraph-margin-top: 0 !default; +$item-ios-paragraph-margin-top: 0 !default; /// @prop - Margin end of the item paragraph -$item-ios-paragraph-margin-end: 0 !default; +$item-ios-paragraph-margin-end: 0 !default; /// @prop - Margin bottom of the item paragraph -$item-ios-paragraph-margin-bottom: 2px !default; +$item-ios-paragraph-margin-bottom: 2px !default; /// @prop - Margin start of the item paragraph -$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default; +$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default; /// @prop - Font size of the item paragraph -$item-ios-paragraph-font-size: dynamic-font(14px) !default; +$item-ios-paragraph-font-size: dynamic-font(14px) !default; /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3) !default; +$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3) !default; /// @prop - Width of the avatar in the item -$item-ios-avatar-width: 36px !default; +$item-ios-avatar-width: 36px !default; /// @prop - Height of the avatar in the item -$item-ios-avatar-height: $item-ios-avatar-width !default; +$item-ios-avatar-height: $item-ios-avatar-width !default; /// @prop - Size of the thumbnail in the item -$item-ios-thumbnail-size: 56px !default; +$item-ios-thumbnail-size: 56px !default; /// @prop - Padding top for the item content -$item-ios-padding-top: 10px !default; +$item-ios-padding-top: 10px !default; /// @prop - Padding end for the item content -$item-ios-padding-end: 16px !default; +$item-ios-padding-end: 16px !default; /// @prop - Padding bottom for the item content -$item-ios-padding-bottom: 10px !default; +$item-ios-padding-bottom: 10px !default; /// @prop - Padding start for the item content -$item-ios-padding-start: 16px !default; +$item-ios-padding-start: 16px !default; /// @prop - Border bottom width for the item when lines are displayed -$item-ios-border-bottom-width: $hairlines-width !default; +$item-ios-border-bottom-width: $hairlines-width !default; /// @prop - Border bottom style for the item when lines are displayed -$item-ios-border-bottom-style: solid !default; +$item-ios-border-bottom-style: solid !default; /// @prop - Border bottom color for the item when lines are displayed -$item-ios-border-bottom-color: $item-ios-border-color !default; - +$item-ios-border-bottom-color: $item-ios-border-color !default; // Item Slots // -------------------------------------------------- /// @prop - Margin top for the start slot -$item-ios-slot-start-margin-top: 2px !default; +$item-ios-slot-start-margin-top: 2px !default; /// @prop - Margin end for the start slot -$item-ios-slot-start-margin-end: $item-ios-padding-end !default; +$item-ios-slot-start-margin-end: $item-ios-padding-end !default; /// @prop - Margin bottom for the start slot -$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top !default; +$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top !default; /// @prop - Margin start for the start slot -$item-ios-slot-start-margin-start: 0 !default; +$item-ios-slot-start-margin-start: 0 !default; /// @prop - Margin top for the end slot -$item-ios-slot-end-margin-top: null !default; +$item-ios-slot-end-margin-top: null !default; /// @prop - Margin end for the end slot -$item-ios-slot-end-margin-end: null !default; +$item-ios-slot-end-margin-end: null !default; /// @prop - Margin bottom for the end slot -$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top !default; +$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top !default; /// @prop - Margin start for the end slot -$item-ios-slot-end-margin-start: null !default; +$item-ios-slot-end-margin-start: null !default; /// @prop - Margin top for an icon in the start/end slot -$item-ios-icon-slot-margin-top: 7px !default; +$item-ios-icon-slot-margin-top: 7px !default; /// @prop - Margin end for an icon in the start/end slot -$item-ios-icon-slot-margin-end: null !default; +$item-ios-icon-slot-margin-end: null !default; /// @prop - Margin bottom for an icon in the start/end slot -$item-ios-icon-slot-margin-bottom: 7px !default; +$item-ios-icon-slot-margin-bottom: 7px !default; /// @prop - Margin start for an icon in the start/end slot -$item-ios-icon-slot-margin-start: null !default; +$item-ios-icon-slot-margin-start: null !default; /// @prop - Margin top for the end slot inside of a floating/stacked label -$item-ios-label-slot-end-margin-top: 7px !default; +$item-ios-label-slot-end-margin-top: 7px !default; /// @prop - Margin end for the end slot inside of a floating/stacked label -$item-ios-label-slot-end-margin-end: null !default; +$item-ios-label-slot-end-margin-end: null !default; /// @prop - Margin bottom for the end slot inside of a floating/stacked label -$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top !default; +$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top !default; /// @prop - Margin start for the end slot inside of a floating/stacked label -$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end !default; +$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end !default; diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 1083192e7c..ee0369ee23 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -13,8 +13,8 @@ --background-focused: currentColor; --background-hover: currentColor; --background-activated-opacity: 0; - --background-focused-opacity: .12; - --background-hover-opacity: .04; + --background-focused-opacity: 0.12; + --background-hover-opacity: 0.04; --border-color: #{$item-md-border-bottom-color}; --color: #{$item-md-color}; --transition: opacity 15ms linear, background-color 15ms linear; @@ -75,7 +75,12 @@ // Multi-line items should align the slotted content at the top :host(.item-multi-line) ::slotted([slot="start"]), :host(.item-multi-line) ::slotted([slot="end"]) { - @include margin($item-md-multi-line-slot-margin-top, $item-md-multi-line-slot-margin-end, $item-md-multi-line-slot-margin-bottom, $item-md-multi-line-slot-margin-start); + @include margin( + $item-md-multi-line-slot-margin-top, + $item-md-multi-line-slot-margin-end, + $item-md-multi-line-slot-margin-bottom, + $item-md-multi-line-slot-margin-start + ); align-self: flex-start; } @@ -111,7 +116,12 @@ } ::slotted(ion-icon[slot]) { - @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start); + @include margin( + $item-md-icon-slot-margin-top, + $item-md-icon-slot-margin-end, + $item-md-icon-slot-margin-bottom, + $item-md-icon-slot-margin-start + ); } ::slotted(ion-icon[slot="start"]) { @@ -130,7 +140,6 @@ @include margin(0); } - // Material Design Slotted Note // -------------------------------------------------- @@ -143,7 +152,12 @@ } ::slotted(ion-note[slot]) { - @include padding($item-md-note-slot-padding-top, $item-md-note-slot-padding-end, $item-md-note-slot-padding-bottom, $item-md-note-slot-padding-start); + @include padding( + $item-md-note-slot-padding-top, + $item-md-note-slot-padding-end, + $item-md-note-slot-padding-bottom, + $item-md-note-slot-padding-start + ); } // Material Design Item Avatar @@ -166,7 +180,12 @@ ::slotted(ion-avatar), ::slotted(ion-thumbnail) { - @include margin($item-md-media-slot-margin-top, $item-md-media-slot-margin-end, $item-md-media-slot-margin-bottom, $item-md-media-slot-margin-start); + @include margin( + $item-md-media-slot-margin-top, + $item-md-media-slot-margin-end, + $item-md-media-slot-margin-bottom, + $item-md-media-slot-margin-start + ); } ::slotted(ion-avatar[slot="start"]), @@ -179,12 +198,16 @@ @include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end); } - // Material Design Slotted Label // -------------------------------------------------- ::slotted(ion-label) { - @include margin($item-md-label-margin-top, $item-md-label-margin-end, $item-md-label-margin-bottom, $item-md-label-margin-start); + @include margin( + $item-md-label-margin-top, + $item-md-label-margin-end, + $item-md-label-margin-bottom, + $item-md-label-margin-start + ); } // Material Design Floating/Stacked Label @@ -192,7 +215,12 @@ :host(.item-label-stacked) ::slotted([slot="end"]), :host(.item-label-floating) ::slotted([slot="end"]) { - @include margin($item-md-label-slot-end-margin-top, $item-md-label-slot-end-margin-end, $item-md-label-slot-end-margin-bottom, $item-md-label-slot-end-margin-start); + @include margin( + $item-md-label-slot-end-margin-top, + $item-md-label-slot-end-margin-end, + $item-md-label-slot-end-margin-bottom, + $item-md-label-slot-end-margin-start + ); } // Material Design Toggle/Radio Item @@ -209,8 +237,8 @@ ::slotted(.button-small) { --padding-top: 2px; --padding-bottom: 2px; - --padding-start: .6em; - --padding-end: .6em; + --padding-start: 0.6em; + --padding-end: 0.6em; min-height: 25px; diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index d16d30300d..c71072cc68 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -1,185 +1,181 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Item // -------------------------------------------------- /// @prop - Minimum height of the item -$item-md-min-height: 48px !default; +$item-md-min-height: 48px !default; /// @prop - Color of the item paragraph -$item-md-paragraph-text-color: $text-color-step-400 !default; +$item-md-paragraph-text-color: $text-color-step-400 !default; /// @prop - Font size of the item -$item-md-font-size: 16px !default; +$item-md-font-size: 16px !default; /// @prop - Width of the avatar in the item -$item-md-avatar-width: 40px !default; +$item-md-avatar-width: 40px !default; /// @prop - Height of the avatar in the item -$item-md-avatar-height: $item-md-avatar-width !default; +$item-md-avatar-height: $item-md-avatar-width !default; /// @prop - Size of the thumbnail in the item -$item-md-thumbnail-size: 56px !default; +$item-md-thumbnail-size: 56px !default; /// @prop - Padding top for the item content -$item-md-padding-top: 10px !default; +$item-md-padding-top: 10px !default; /// @prop - Padding end for the item content -$item-md-padding-end: 16px !default; +$item-md-padding-end: 16px !default; /// @prop - Padding bottom for the item content -$item-md-padding-bottom: 11px !default; +$item-md-padding-bottom: 11px !default; /// @prop - Padding start for the item content -$item-md-padding-start: 16px !default; +$item-md-padding-start: 16px !default; /// @prop - Border bottom width for the item when lines are displayed -$item-md-border-bottom-width: 1px !default; +$item-md-border-bottom-width: 1px !default; /// @prop - Border bottom style for the item when lines are displayed -$item-md-border-bottom-style: solid !default; +$item-md-border-bottom-style: solid !default; /// @prop - Border bottom color for the item when lines are displayed -$item-md-border-bottom-color: $item-md-border-color !default; +$item-md-border-bottom-color: $item-md-border-color !default; // Item Label // -------------------------------------------------- /// @prop - Margin top of the label -$item-md-label-margin-top: 10px !default; +$item-md-label-margin-top: 10px !default; /// @prop - Margin end of the label -$item-md-label-margin-end: 0 !default; +$item-md-label-margin-end: 0 !default; /// @prop - Margin bottom of the label -$item-md-label-margin-bottom: 10px !default; +$item-md-label-margin-bottom: 10px !default; /// @prop - Margin start of the label -$item-md-label-margin-start: 0 !default; - +$item-md-label-margin-start: 0 !default; // Item Slots // -------------------------------------------------- /// @prop - Margin start for the start slot -$item-md-start-slot-margin-start: null !default; +$item-md-start-slot-margin-start: null !default; /// @prop - Margin end for the start slot -$item-md-start-slot-margin-end: 16px !default; +$item-md-start-slot-margin-end: 16px !default; /// @prop - Margin start for the end slot -$item-md-end-slot-margin-start: 16px !default; +$item-md-end-slot-margin-start: 16px !default; /// @prop - Margin end for the end slot -$item-md-end-slot-margin-end: null !default; +$item-md-end-slot-margin-end: null !default; /// @prop - Margin top for content in the start/end slot in a multi-line item -$item-md-multi-line-slot-margin-top: 16px !default; +$item-md-multi-line-slot-margin-top: 16px !default; /// @prop - Margin end for content in the start/end slot in a multi-line item -$item-md-multi-line-slot-margin-end: null !default; +$item-md-multi-line-slot-margin-end: null !default; /// @prop - Margin bottom for content in the start/end slot in a multi-line item -$item-md-multi-line-slot-margin-bottom: 16px !default; +$item-md-multi-line-slot-margin-bottom: 16px !default; /// @prop - Margin start for content in the start/end slot in a multi-line item -$item-md-multi-line-slot-margin-start: null !default; - +$item-md-multi-line-slot-margin-start: null !default; // Icon Slots // -------------------------------------------------- /// @prop - Margin top for an icon in the start/end slot -$item-md-icon-slot-margin-top: 12px !default; +$item-md-icon-slot-margin-top: 12px !default; /// @prop - Margin end for an icon in the start/end slot -$item-md-icon-slot-margin-end: null !default; +$item-md-icon-slot-margin-end: null !default; /// @prop - Margin bottom for an icon in the start/end slot -$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top !default; +$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top !default; /// @prop - Margin start for an icon in the start/end slot -$item-md-icon-slot-margin-start: null !default; +$item-md-icon-slot-margin-start: null !default; /// @prop - Margin start for an icon in the start slot -$item-md-icon-start-slot-margin-start: null !default; +$item-md-icon-start-slot-margin-start: null !default; /// @prop - Margin end for an icon in the start slot -$item-md-icon-start-slot-margin-end: 32px !default; +$item-md-icon-start-slot-margin-end: 32px !default; /// @prop - Margin end for an icon in the start slot -$item-md-input-icon-start-slot-margin-end: 8px !default; +$item-md-input-icon-start-slot-margin-end: 8px !default; /// @prop - Margin start for an icon in the end slot -$item-md-icon-end-slot-margin-start: 16px !default; +$item-md-icon-end-slot-margin-start: 16px !default; /// @prop - Margin end for an icon in the end slot -$item-md-icon-end-slot-margin-end: null !default; +$item-md-icon-end-slot-margin-end: null !default; /// @prop - Color for an icon in the start/end slot -$item-md-icon-slot-color: rgba($text-color-rgb, 0.54) !default; +$item-md-icon-slot-color: rgba($text-color-rgb, 0.54) !default; /// @prop - Font size of an icon in the start/end slot -$item-md-icon-slot-font-size: 24px !default; - +$item-md-icon-slot-font-size: 24px !default; // Label Slots // -------------------------------------------------- /// @prop - Margin top for the end slot inside of a floating/stacked label -$item-md-label-slot-end-margin-top: 7px !default; +$item-md-label-slot-end-margin-top: 7px !default; /// @prop - Margin end for the end slot inside of a floating/stacked label -$item-md-label-slot-end-margin-end: null !default; +$item-md-label-slot-end-margin-end: null !default; /// @prop - Margin bottom for the end slot inside of a floating/stacked label -$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top !default; +$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top !default; /// @prop - Margin start for the end slot inside of a floating/stacked label -$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end !default; - +$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end !default; // Note Slots // -------------------------------------------------- /// @prop - Font size of a note in the start/end slot -$item-md-note-slot-font-size: dynamic-font(11px) !default; +$item-md-note-slot-font-size: dynamic-font(11px) !default; /// @prop - Padding top for a note in the start/end slot -$item-md-note-slot-padding-top: 18px !default; +$item-md-note-slot-padding-top: 18px !default; /// @prop - Padding end for a note in the start/end slot -$item-md-note-slot-padding-end: 0 !default; +$item-md-note-slot-padding-end: 0 !default; /// @prop - Padding bottom for a note in the start/end slot -$item-md-note-slot-padding-bottom: 10px !default; +$item-md-note-slot-padding-bottom: 10px !default; /// @prop - Padding start for a note in the start/end slot -$item-md-note-slot-padding-start: $item-md-note-slot-padding-end !default; +$item-md-note-slot-padding-start: $item-md-note-slot-padding-end !default; // Avatar/Thumbnail Slots // -------------------------------------------------- /// @prop - Margin top for an avatar/thumbnail in the start/end slot -$item-md-media-slot-margin-top: 8px !default; +$item-md-media-slot-margin-top: 8px !default; /// @prop - Margin end for an avatar/thumbnail in the start/end slot -$item-md-media-slot-margin-end: null !default; +$item-md-media-slot-margin-end: null !default; /// @prop - Margin bottom for an avatar/thumbnail in the start/end slot -$item-md-media-slot-margin-bottom: 8px !default; +$item-md-media-slot-margin-bottom: 8px !default; /// @prop - Margin start for an avatar/thumbnail in the start/end slot -$item-md-media-slot-margin-start: $item-md-media-slot-margin-end !default; +$item-md-media-slot-margin-start: $item-md-media-slot-margin-end !default; /// @prop - Margin start for an avatar/thumbnail in the start slot -$item-md-media-start-slot-margin-start: null !default; +$item-md-media-start-slot-margin-start: null !default; /// @prop - Margin end for an avatar/thumbnail in the start slot -$item-md-media-start-slot-margin-end: 16px !default; +$item-md-media-start-slot-margin-end: 16px !default; /// @prop - Margin start for an avatar/thumbnail in the end slot -$item-md-media-end-slot-margin-start: 16px !default; +$item-md-media-end-slot-margin-start: 16px !default; /// @prop - Margin end for an avatar/thumbnail in the end slot -$item-md-media-end-slot-margin-end: null !default; +$item-md-media-end-slot-margin-end: null !default; diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index b17649265d..43bd936529 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -415,4 +415,3 @@ a { ion-ripple-effect { color: var(--ripple-color); } - diff --git a/core/src/components/item/item.vars.scss b/core/src/components/item/item.vars.scss index d0ebad2ee1..023d2a9d4c 100644 --- a/core/src/components/item/item.vars.scss +++ b/core/src/components/item/item.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Item // -------------------------------------------------- diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss index 4c277c0860..d06e86cc79 100644 --- a/core/src/components/label/label.ios.vars.scss +++ b/core/src/components/label/label.ios.vars.scss @@ -1,17 +1,17 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS Label // -------------------------------------------------- /// @prop - Text color of the stacked/floating label when it is focused -$label-ios-text-color-focused: null !default; +$label-ios-text-color-focused: null !default; /// @prop - Font size of the label when the text wraps -$label-ios-text-wrap-font-size: dynamic-font(14px) !default; +$label-ios-text-wrap-font-size: dynamic-font(14px) !default; /// @prop - Line height of the label when the text wraps -$label-ios-text-wrap-line-height: 1.5 !default; +$label-ios-text-wrap-line-height: 1.5 !default; /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: $text-color-step-600 !default; +$item-ios-paragraph-text-color: $text-color-step-600 !default; diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss index b2f3b1e474..d4f8dd26bc 100644 --- a/core/src/components/label/label.md.scss +++ b/core/src/components/label/label.md.scss @@ -8,7 +8,6 @@ line-height: $label-md-text-wrap-line-height; } - // Material Design Stacked & Floating Labels // -------------------------------------------------- @@ -16,23 +15,23 @@ * When translating the label, we need to use translateY * instead of translate3d due to a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=215731 */ - :host(.label-stacked), - :host(.label-floating) { - @include margin(0, 0, 0, 0); - /* stylelint-disable property-disallowed-list */ - transform-origin: top left; - /* stylelint-enable property-disallowed-list */ - } +:host(.label-stacked), +:host(.label-floating) { + @include margin(0, 0, 0, 0); + /* stylelint-disable property-disallowed-list */ + transform-origin: top left; + /* stylelint-enable property-disallowed-list */ +} - :host(.label-stacked.label-rtl), - :host(.label-floating.label-rtl) { - /* stylelint-disable property-disallowed-list */ - transform-origin: top right; - /* stylelint-enable property-disallowed-list */ - } +:host(.label-stacked.label-rtl), +:host(.label-floating.label-rtl) { + /* stylelint-disable property-disallowed-list */ + transform-origin: top right; + /* stylelint-enable property-disallowed-list */ +} :host(.label-stacked) { - @include transform(translateY(50%), scale(.75)); + @include transform(translateY(50%), scale(0.75)); transition: color 150ms $label-md-transition-timing-function; } @@ -40,16 +39,14 @@ :host(.label-floating) { @include transform(translateY(96%)); - transition: - color 150ms $label-md-transition-timing-function, - transform 150ms $label-md-transition-timing-function; + transition: color 150ms $label-md-transition-timing-function, transform 150ms $label-md-transition-timing-function; } :host-context(.ion-focused).label-floating, :host-context(.item-has-focus).label-floating, :host-context(.item-has-placeholder:not(.item-input)).label-floating, :host-context(.item-has-value).label-floating { - @include transform(translateY(50%), scale(.75)); + @include transform(translateY(50%), scale(0.75)); } :host-context(.ion-focused).label-stacked:not(.ion-color), diff --git a/core/src/components/label/label.md.vars.scss b/core/src/components/label/label.md.vars.scss index ed785732a8..9bda66b754 100644 --- a/core/src/components/label/label.md.vars.scss +++ b/core/src/components/label/label.md.vars.scss @@ -1,14 +1,14 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../item/item.md.vars"; // Material Design Label // -------------------------------------------------- /// @prop - Text color of the stacked/floating label when it is focused -$label-md-text-color-focused: ion-color(primary, base) !default; +$label-md-text-color-focused: ion-color(primary, base) !default; /// @prop - Line height of the label when the text wraps -$label-md-text-wrap-line-height: 1.5 !default; +$label-md-text-wrap-line-height: 1.5 !default; /// @prop - Transition timing function of the label (stacked / focused) -$label-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; +$label-md-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default; diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss index 103fcdfad0..1fb5ba654e 100644 --- a/core/src/components/label/label.scss +++ b/core/src/components/label/label.scss @@ -1,5 +1,4 @@ -@import "../../themes/ionic.globals"; - +@import "../../themes/native/native.globals"; // Label // -------------------------------------------------- @@ -32,7 +31,7 @@ :host-context(.item-interactive-disabled:not(.item-multiple-inputs)) { cursor: default; - opacity: .3; + opacity: 0.3; 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 c299612af7..4d4067fbd4 100644 --- a/core/src/components/list-header/list-header.ios.scss +++ b/core/src/components/list-header/list-header.ios.scss @@ -48,7 +48,6 @@ min-height: 1.4em; } - // List Header Lines // -------------------------------------------------- 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 f15afb19b5..f1cc931518 100644 --- a/core/src/components/list-header/list-header.ios.vars.scss +++ b/core/src/components/list-header/list-header.ios.vars.scss @@ -1,23 +1,23 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS List Header // -------------------------------------------------- /// @prop - Padding start of the list header -$list-header-ios-padding-start: $item-ios-padding-start !default; +$list-header-ios-padding-start: $item-ios-padding-start !default; /// @prop - Font size of the list header -$list-header-ios-font-size: dynamic-font-max(22px, 2.55) !default; +$list-header-ios-font-size: dynamic-font-max(22px, 2.55) !default; /// @prop - Font weight of the list header -$list-header-ios-font-weight: 700 !default; +$list-header-ios-font-weight: 700 !default; /// @prop - Letter spacing of the list header -$list-header-ios-letter-spacing: 0 !default; +$list-header-ios-letter-spacing: 0 !default; /// @prop - Text color of the list header -$list-header-ios-color: $text-color-step-150 !default; +$list-header-ios-color: $text-color-step-150 !default; /// @prop - Background color of the list header -$list-header-ios-background-color: transparent !default; +$list-header-ios-background-color: transparent !default; 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 400d02ba82..c093e06847 100644 --- a/core/src/components/list-header/list-header.md.vars.scss +++ b/core/src/components/list-header/list-header.md.vars.scss @@ -1,17 +1,17 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../item/item.md.vars"; // Material Design List Header // -------------------------------------------------- /// @prop - Padding start of the list header -$list-header-md-padding-start: $item-md-padding-start !default; +$list-header-md-padding-start: $item-md-padding-start !default; /// @prop - Minimum height of the list header -$list-header-md-min-height: 45px !default; +$list-header-md-min-height: 45px !default; /// @prop - Font size of the list header -$list-header-md-font-size: dynamic-font(14px) !default; +$list-header-md-font-size: dynamic-font(14px) !default; /// @prop - Text color of the list header -$list-header-md-color: $text-color !default; +$list-header-md-color: $text-color !default; diff --git a/core/src/components/list-header/list-header.scss b/core/src/components/list-header/list-header.scss index 9021f794d8..cc213d5bad 100644 --- a/core/src/components/list-header/list-header.scss +++ b/core/src/components/list-header/list-header.scss @@ -1,5 +1,4 @@ -@import "../../themes/ionic.globals"; - +@import "../../themes/native/native.globals"; // List Header // -------------------------------------------------- diff --git a/core/src/components/list/list.ios.scss b/core/src/components/list/list.ios.scss index ffccb9345f..0467d42aac 100644 --- a/core/src/components/list/list.ios.scss +++ b/core/src/components/list/list.ios.scss @@ -10,12 +10,16 @@ background: $item-ios-background; } - // iOS Inset List // -------------------------------------------------- .list-ios.list-inset { - @include margin($list-inset-ios-margin-top, $list-inset-ios-margin-end, $list-inset-ios-margin-bottom, $list-inset-ios-margin-start); + @include margin( + $list-inset-ios-margin-top, + $list-inset-ios-margin-end, + $list-inset-ios-margin-bottom, + $list-inset-ios-margin-start + ); @include border-radius($list-inset-ios-border-radius); } @@ -42,7 +46,6 @@ @include margin(0, null, null, null); } - // iOS No Lines List // -------------------------------------------------- diff --git a/core/src/components/list/list.ios.vars.scss b/core/src/components/list/list.ios.vars.scss index 423d6aac6a..f2a0048a18 100644 --- a/core/src/components/list/list.ios.vars.scss +++ b/core/src/components/list/list.ios.vars.scss @@ -1,35 +1,35 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS List // -------------------------------------------------- /// @prop - Margin top of the list -$list-ios-margin-top: null !default; +$list-ios-margin-top: null !default; /// @prop - Margin end of the list -$list-ios-margin-end: null !default; +$list-ios-margin-end: null !default; /// @prop - Margin bottom of the list -$list-ios-margin-bottom: null !default; +$list-ios-margin-bottom: null !default; /// @prop - Margin start of the list -$list-ios-margin-start: null !default; +$list-ios-margin-start: null !default; /// @prop - Border bottom of the item in a list -$list-ios-item-border-bottom-width: $item-ios-border-bottom-width !default; +$list-ios-item-border-bottom-width: $item-ios-border-bottom-width !default; /// @prop - Margin top of the inset list -$list-inset-ios-margin-top: 16px !default; +$list-inset-ios-margin-top: 16px !default; /// @prop - Margin end of the inset list -$list-inset-ios-margin-end: 16px !default; +$list-inset-ios-margin-end: 16px !default; /// @prop - Margin bottom of the inset list -$list-inset-ios-margin-bottom: 16px !default; +$list-inset-ios-margin-bottom: 16px !default; /// @prop - Margin start of the inset list -$list-inset-ios-margin-start: 16px !default; +$list-inset-ios-margin-start: 16px !default; /// @prop - Border radius of the inset list -$list-inset-ios-border-radius: 10px !default; +$list-inset-ios-border-radius: 10px !default; diff --git a/core/src/components/list/list.md.scss b/core/src/components/list/list.md.scss index 62a28273cc..fcedfb3df0 100644 --- a/core/src/components/list/list.md.scss +++ b/core/src/components/list/list.md.scss @@ -19,7 +19,12 @@ // -------------------------------------------------- .list-md.list-inset { - @include margin($list-inset-md-margin-top, $list-inset-md-margin-end, $list-inset-md-margin-bottom, $list-inset-md-margin-start); + @include margin( + $list-inset-md-margin-top, + $list-inset-md-margin-end, + $list-inset-md-margin-bottom, + $list-inset-md-margin-start + ); @include border-radius($list-inset-md-border-radius); } @@ -55,7 +60,6 @@ @include margin(0, null, null, null); } - // Material Design No Lines List // -------------------------------------------------- diff --git a/core/src/components/list/list.md.vars.scss b/core/src/components/list/list.md.vars.scss index dd9ff16e6b..b5074dad03 100644 --- a/core/src/components/list/list.md.vars.scss +++ b/core/src/components/list/list.md.vars.scss @@ -1,47 +1,47 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../item/item.md.vars"; // Material Design List // -------------------------------------------------- /// @prop - Margin top of the list -$list-md-margin-top: 0 !default; +$list-md-margin-top: 0 !default; /// @prop - Margin end of the list -$list-md-margin-end: 0 !default; +$list-md-margin-end: 0 !default; /// @prop - Margin bottom of the list -$list-md-margin-bottom: 0 !default; +$list-md-margin-bottom: 0 !default; /// @prop - Margin start of the list -$list-md-margin-start: 0 !default; +$list-md-margin-start: 0 !default; /// @prop - Padding top of the list -$list-md-padding-top: 8px !default; +$list-md-padding-top: 8px !default; /// @prop - Padding end of the list -$list-md-padding-end: 0 !default; +$list-md-padding-end: 0 !default; /// @prop - Padding bottom of the list -$list-md-padding-bottom: 8px !default; +$list-md-padding-bottom: 8px !default; /// @prop - Padding start of the list -$list-md-padding-start: 0 !default; +$list-md-padding-start: 0 !default; /// @prop - Border bottom of the item in a list -$list-md-item-border-bottom-width: $item-md-border-bottom-width !default; +$list-md-item-border-bottom-width: $item-md-border-bottom-width !default; /// @prop - Margin top of the inset list -$list-inset-md-margin-top: 16px !default; +$list-inset-md-margin-top: 16px !default; /// @prop - Margin end of the inset list -$list-inset-md-margin-end: 16px !default; +$list-inset-md-margin-end: 16px !default; /// @prop - Margin bottom of the inset list -$list-inset-md-margin-bottom: 16px !default; +$list-inset-md-margin-bottom: 16px !default; /// @prop - Margin start of the inset list -$list-inset-md-margin-start: 16px !default; +$list-inset-md-margin-start: 16px !default; /// @prop - Border radius of the inset list -$list-inset-md-border-radius: 2px !default; +$list-inset-md-border-radius: 2px !default; diff --git a/core/src/components/list/list.scss b/core/src/components/list/list.scss index 267b9023a2..7d7d4da943 100644 --- a/core/src/components/list/list.scss +++ b/core/src/components/list/list.scss @@ -1,5 +1,4 @@ -@import "../../themes/ionic.globals"; - +@import "../../themes/native/native.globals"; // List // -------------------------------------------------- diff --git a/core/src/components/loading/loading.ios.scss b/core/src/components/loading/loading.ios.scss index 52217e4b38..b458eaa137 100644 --- a/core/src/components/loading/loading.ios.scss +++ b/core/src/components/loading/loading.ios.scss @@ -18,10 +18,14 @@ .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); + @include padding( + $loading-ios-padding-top, + $loading-ios-padding-end, + $loading-ios-padding-bottom, + $loading-ios-padding-start + ); } - // iOS Translucent Loading // ----------------------------------------- @@ -32,7 +36,6 @@ } } - // iOS Loading Content // ----------------------------------------- diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss index 92d1946bc2..43bcf0cbc0 100644 --- a/core/src/components/loading/loading.ios.vars.scss +++ b/core/src/components/loading/loading.ios.vars.scss @@ -1,49 +1,52 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Loading Indicator // -------------------------------------------------- /// @prop - Font size of the loading wrapper -$loading-ios-font-size: dynamic-font(14px) !default; +$loading-ios-font-size: dynamic-font(14px) !default; /// @prop - Padding top of the loading wrapper -$loading-ios-padding-top: 24px !default; +$loading-ios-padding-top: 24px !default; /// @prop - Padding end of the loading wrapper -$loading-ios-padding-end: 34px !default; +$loading-ios-padding-end: 34px !default; /// @prop - Padding bottom of the loading wrapper -$loading-ios-padding-bottom: $loading-ios-padding-top !default; +$loading-ios-padding-bottom: $loading-ios-padding-top !default; /// @prop - Padding start of the loading wrapper -$loading-ios-padding-start: $loading-ios-padding-end !default; +$loading-ios-padding-start: $loading-ios-padding-end !default; /// @prop - Max width of the loading wrapper -$loading-ios-max-width: 270px !default; +$loading-ios-max-width: 270px !default; /// @prop - Maximum height of the loading wrapper -$loading-ios-max-height: 90% !default; +$loading-ios-max-height: 90% !default; /// @prop - Border radius of the loading wrapper -$loading-ios-border-radius: 8px !default; +$loading-ios-border-radius: 8px !default; /// @prop - Text color of the loading wrapper -$loading-ios-text-color: $text-color !default; +$loading-ios-text-color: $text-color !default; /// @prop - Background of the loading wrapper -$loading-ios-background-color: $overlay-ios-background-color !default; +$loading-ios-background-color: $overlay-ios-background-color !default; /// @prop - Background color alpha of the translucent loading wrapper -$loading-ios-translucent-background-color-alpha: .8 !default; +$loading-ios-translucent-background-color-alpha: 0.8 !default; /// @prop - Background color of the translucent loading wrapper -$loading-ios-translucent-background-color: rgba($background-color-rgb, $loading-ios-translucent-background-color-alpha) !default; +$loading-ios-translucent-background-color: rgba( + $background-color-rgb, + $loading-ios-translucent-background-color-alpha +) !default; /// @prop - Font weight of the loading content -$loading-ios-content-font-weight: bold !default; +$loading-ios-content-font-weight: bold !default; /// @prop - Color of the loading spinner -$loading-ios-spinner-color: $text-color-step-400 !default; +$loading-ios-spinner-color: $text-color-step-400 !default; /// @prop - Filter of the translucent loading -$loading-ios-translucent-filter: saturate(180%) blur(20px) !default; +$loading-ios-translucent-filter: saturate(180%) blur(20px) !default; diff --git a/core/src/components/loading/loading.md.scss b/core/src/components/loading/loading.md.scss index f913723fe7..5d4a1d5535 100644 --- a/core/src/components/loading/loading.md.scss +++ b/core/src/components/loading/loading.md.scss @@ -18,12 +18,16 @@ .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); + @include padding( + $loading-md-padding-top, + $loading-md-padding-end, + $loading-md-padding-bottom, + $loading-md-padding-start + ); box-shadow: $loading-md-box-shadow; } - // Material Design Loading Content // ----------------------------------------- diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss index ec8611debe..e0d6fe2b91 100644 --- a/core/src/components/loading/loading.md.vars.scss +++ b/core/src/components/loading/loading.md.vars.scss @@ -1,43 +1,43 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Loading Indicator // -------------------------------------------------- /// @prop - Font size of the loading wrapper -$loading-md-font-size: dynamic-font(14px) !default; +$loading-md-font-size: dynamic-font(14px) !default; /// @prop - Padding top of the loading wrapper -$loading-md-padding-top: 24px !default; +$loading-md-padding-top: 24px !default; /// @prop - Padding end of the loading wrapper -$loading-md-padding-end: $loading-md-padding-top !default; +$loading-md-padding-end: $loading-md-padding-top !default; /// @prop - Padding bottom of the loading wrapper -$loading-md-padding-bottom: $loading-md-padding-top !default; +$loading-md-padding-bottom: $loading-md-padding-top !default; /// @prop - Padding start of the loading wrapper -$loading-md-padding-start: $loading-md-padding-end !default; +$loading-md-padding-start: $loading-md-padding-end !default; /// @prop - Max width of the loading wrapper -$loading-md-max-width: 280px !default; +$loading-md-max-width: 280px !default; /// @prop - Maximum height of the loading wrapper -$loading-md-max-height: 90% !default; +$loading-md-max-height: 90% !default; /// @prop - Border radius of the loading wrapper -$loading-md-border-radius: 2px !default; +$loading-md-border-radius: 2px !default; /// @prop - Text color of the loading wrapper -$loading-md-text-color: $text-color-step-150 !default; +$loading-md-text-color: $text-color-step-150 !default; /// @prop - Background of the loading wrapper -$loading-md-background: $background-color-step-50 !default; +$loading-md-background: $background-color-step-50 !default; /// @prop - Box shadow color of the loading wrapper -$loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default; +$loading-md-box-shadow-color: rgba(0, 0, 0, 0.4) !default; /// @prop - Box shadow of the loading wrapper -$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default; +$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default; /// @prop - Color of the loading spinner -$loading-md-spinner-color: ion-color(primary, base) !default; +$loading-md-spinner-color: ion-color(primary, base) !default; diff --git a/core/src/components/loading/loading.vars.scss b/core/src/components/loading/loading.vars.scss index e21c162d17..817fc220ad 100644 --- a/core/src/components/loading/loading.vars.scss +++ b/core/src/components/loading/loading.vars.scss @@ -1 +1 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss index c5d3abd75d..bab590c788 100644 --- a/core/src/components/menu-button/menu-button.ios.scss +++ b/core/src/components/menu-button/menu-button.ios.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "./menu-button"; // iOS Menu Button @@ -6,7 +6,7 @@ :host { --background-focused: currentColor; - --background-focused-opacity: .1; + --background-focused-opacity: 0.1; --border-radius: 4px; --color: #{ion-color(primary, base)}; --padding-start: 5px; @@ -17,20 +17,18 @@ font-size: dynamic-font-clamp(1, 31px, 1.23); } - // Menu Button: Activated // -------------------------------------------------- :host(.ion-activated) { - opacity: .4; + opacity: 0.4; } - // Menu Button: Hover // -------------------------------------------------- @media (any-hover: hover) { :host(:hover) { - opacity: .6; + opacity: 0.6; } } diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss index 5065e5c492..6c278212e9 100644 --- a/core/src/components/menu-button/menu-button.md.scss +++ b/core/src/components/menu-button/menu-button.md.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "./menu-button"; // MD Menu Button @@ -6,9 +6,9 @@ :host { --background-focused: currentColor; - --background-focused-opacity: .12; + --background-focused-opacity: 0.12; --background-hover: currentColor; - --background-hover-opacity: .04; + --background-hover-opacity: 0.04; --border-radius: 50%; --color: initial; --padding-start: 8px; @@ -20,7 +20,6 @@ font-size: dynamic-font(24px); } - // Menu Button Color: Focused // -------------------------------------------------- @@ -28,7 +27,6 @@ background: #{current-color(base)}; } - // Menu Button Color: Hover // -------------------------------------------------- diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss index 1cc38d63e4..b372dd0819 100644 --- a/core/src/components/menu-button/menu-button.scss +++ b/core/src/components/menu-button/menu-button.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Menu Button // -------------------------------------------------- @@ -112,11 +112,10 @@ ion-icon { :host(.menu-button-disabled) { cursor: default; - opacity: .5; + opacity: 0.5; pointer-events: none; } - // Menu Button: Focused // -------------------------------------------------- @@ -130,7 +129,6 @@ ion-icon { } } - // Menu Button: Hover // -------------------------------------------------- @@ -150,7 +148,6 @@ ion-icon { } } - // Menu Button with Color // -------------------------------------------------- @@ -158,7 +155,6 @@ ion-icon { color: current-color(base); } - // Menu Button in Toolbar: Global Theming // -------------------------------------------------- diff --git a/core/src/components/menu/menu.ios.scss b/core/src/components/menu/menu.ios.scss index 84249faa44..4ba7bfc829 100644 --- a/core/src/components/menu/menu.ios.scss +++ b/core/src/components/menu/menu.ios.scss @@ -8,7 +8,6 @@ box-shadow: $menu-ios-box-shadow-overlay; } - // iOS Menu Push // -------------------------------------------------- diff --git a/core/src/components/menu/menu.ios.vars.scss b/core/src/components/menu/menu.ios.vars.scss index c2936ddff7..73f43a58dd 100644 --- a/core/src/components/menu/menu.ios.vars.scss +++ b/core/src/components/menu/menu.ios.vars.scss @@ -1,25 +1,25 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Menu // -------------------------------------------------- /// @prop - Box shadow color of the menu -$menu-ios-box-shadow-color: rgba(0, 0, 0, .08) !default; +$menu-ios-box-shadow-color: rgba(0, 0, 0, 0.08) !default; /// @prop - Box shadow of the menu -$menu-ios-box-shadow: -8px 0 42px $menu-ios-box-shadow-color !default; +$menu-ios-box-shadow: -8px 0 42px $menu-ios-box-shadow-color !default; /// @prop - Box shadow of the menu in rtl mode -$menu-ios-box-shadow-rtl: 8px 0 42px $menu-ios-box-shadow-color !default; +$menu-ios-box-shadow-rtl: 8px 0 42px $menu-ios-box-shadow-color !default; /// @prop - Box shadow of the reveal menu -$menu-ios-box-shadow-reveal: $menu-ios-box-shadow !default; +$menu-ios-box-shadow-reveal: $menu-ios-box-shadow !default; /// @prop - Box shadow of the reveal menu $menu-ios-box-shadow-reveal-rtl: $menu-ios-box-shadow-rtl !default; /// @prop - Box shadow of the push menu -$menu-ios-box-shadow-push: null !default; +$menu-ios-box-shadow-push: null !default; /// @prop - Box shadow of the overlay menu -$menu-ios-box-shadow-overlay: null !default; +$menu-ios-box-shadow-overlay: null !default; diff --git a/core/src/components/menu/menu.md.vars.scss b/core/src/components/menu/menu.md.vars.scss index 6acf939cce..c411470f31 100644 --- a/core/src/components/menu/menu.md.vars.scss +++ b/core/src/components/menu/menu.md.vars.scss @@ -1,7 +1,7 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Menu // -------------------------------------------------- /// @prop - Box shadow of the menu -$menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18) !default; +$menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18) !default; diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index 86b522b50c..792c6153e1 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -35,7 +35,6 @@ display: block; } - .menu-inner { @include transform(translateX(-9999px)); @@ -135,7 +134,7 @@ ion-backdrop { display: none; - opacity: .01; + opacity: 0.01; z-index: -1; } @@ -145,7 +144,6 @@ ion-backdrop { } } - // Menu Reveal // -------------------------------------------------- // The content slides over to reveal the menu underneath. @@ -159,7 +157,6 @@ ion-backdrop { @include transform(translate3d(0, 0, 0)); } - // Menu Overlay // -------------------------------------------------- // The menu slides over the content. The content @@ -175,7 +172,6 @@ ion-backdrop { cursor: pointer; } - // Menu Split Pane // -------------------------------------------------- @@ -222,7 +218,7 @@ ion-backdrop { order: -1; } -:host(.menu-pane-visible.split-pane-side[side=end]) { +:host(.menu-pane-visible.split-pane-side[side="end"]) { order: 1; } @@ -248,10 +244,9 @@ ion-backdrop { max-width: var(--side-max-width); } -:host(.menu-pane-visible.split-pane-side[side=end]) { +:host(.menu-pane-visible.split-pane-side[side="end"]) { @include border(0, 0, 0, var(--border)); min-width: var(--side-min-width); max-width: var(--side-max-width); } - diff --git a/core/src/components/menu/menu.vars.scss b/core/src/components/menu/menu.vars.scss index 236417c136..4709ebc128 100644 --- a/core/src/components/menu/menu.vars.scss +++ b/core/src/components/menu/menu.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Menu // -------------------------------------------------- /// @prop - Width of the menu -$menu-width: 304px !default; +$menu-width: 304px !default; /// @prop - Width of the menu on small devices (under 340px) -$menu-small-width: $menu-width - 40px !default; +$menu-small-width: $menu-width - 40px !default; diff --git a/core/src/components/modal/modal.ios.vars.scss b/core/src/components/modal/modal.ios.vars.scss index 664aefd331..be2fc9fdb2 100644 --- a/core/src/components/modal/modal.ios.vars.scss +++ b/core/src/components/modal/modal.ios.vars.scss @@ -1,7 +1,7 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Modals // -------------------------------------------------- /// @prop - Border radius for the modal -$modal-ios-border-radius: 10px !default; +$modal-ios-border-radius: 10px !default; diff --git a/core/src/components/modal/modal.md.scss b/core/src/components/modal/modal.md.scss index 6a822e8918..7367732f48 100644 --- a/core/src/components/modal/modal.md.scss +++ b/core/src/components/modal/modal.md.scss @@ -1,7 +1,6 @@ @import "./modal"; @import "./modal.md.vars"; - // Material Design Modals // -------------------------------------------------- @@ -19,6 +18,5 @@ .modal-wrapper { @include transform(translate3d(0, 40px, 0)); - opacity: .01; + opacity: 0.01; } - diff --git a/core/src/components/modal/modal.md.vars.scss b/core/src/components/modal/modal.md.vars.scss index bf77d69a7e..eaef504145 100644 --- a/core/src/components/modal/modal.md.vars.scss +++ b/core/src/components/modal/modal.md.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Modals // -------------------------------------------------- /// @prop - Box shadow color of the alert -$modal-inset-box-shadow-color: rgba(0, 0, 0, .4) !default; +$modal-inset-box-shadow-color: rgba(0, 0, 0, 0.4) !default; /// @prop - Box shadow of the alert -$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color !default; +$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color !default; diff --git a/core/src/components/modal/modal.vars.scss b/core/src/components/modal/modal.vars.scss index f881168971..e9c033c11e 100644 --- a/core/src/components/modal/modal.vars.scss +++ b/core/src/components/modal/modal.vars.scss @@ -1,25 +1,25 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Modals // -------------------------------------------------- /// @prop - Min width of the modal inset -$modal-inset-min-width: 768px !default; +$modal-inset-min-width: 768px !default; /// @prop - Minimum height of the small modal inset -$modal-inset-min-height-small: 600px !default; +$modal-inset-min-height-small: 600px !default; /// @prop - Minimum height of the large modal inset -$modal-inset-min-height-large: 768px !default; +$modal-inset-min-height-large: 768px !default; /// @prop - Width of the large modal inset -$modal-inset-width: 600px !default; +$modal-inset-width: 600px !default; /// @prop - Height of the small modal inset -$modal-inset-height-small: 500px !default; +$modal-inset-height-small: 500px !default; /// @prop - Height of the large modal inset -$modal-inset-height-large: 600px !default; +$modal-inset-height-large: 600px !default; /// @prop - Text color of the modal content -$modal-text-color: $text-color !default; +$modal-text-color: $text-color !default; diff --git a/core/src/components/nav/nav.scss b/core/src/components/nav/nav.scss index 125bb460fb..40bddf8b3a 100644 --- a/core/src/components/nav/nav.scss +++ b/core/src/components/nav/nav.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; :host { @include position(0, 0, 0, 0); diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss index b452c16e41..4a110c3db7 100644 --- a/core/src/components/note/note.ios.vars.scss +++ b/core/src/components/note/note.ios.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Note // -------------------------------------------------- /// @prop - Text color of the note -$note-ios-color: $text-color-step-650 !default; +$note-ios-color: $text-color-step-650 !default; /// @prop - Font size of the note -$note-ios-font-size: dynamic-font-min(0.875, 16px) !default; +$note-ios-font-size: dynamic-font-min(0.875, 16px) !default; diff --git a/core/src/components/note/note.md.vars.scss b/core/src/components/note/note.md.vars.scss index f08f55ef91..68e9c5a4f8 100644 --- a/core/src/components/note/note.md.vars.scss +++ b/core/src/components/note/note.md.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Note // -------------------------------------------------- /// @prop - Text color of the note -$note-md-color: $text-color-step-400 !default; +$note-md-color: $text-color-step-400 !default; /// @prop - Font size of the note -$note-md-font-size: dynamic-font(14px) !default; +$note-md-font-size: dynamic-font(14px) !default; diff --git a/core/src/components/picker-column-option/picker-column-option.scss b/core/src/components/picker-column-option/picker-column-option.scss index a414a3580e..6e1533aaf7 100644 --- a/core/src/components/picker-column-option/picker-column-option.scss +++ b/core/src/components/picker-column-option/picker-column-option.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Picker Column // -------------------------------------------------- diff --git a/core/src/components/picker-column/picker-column.scss b/core/src/components/picker-column/picker-column.scss index e4008f3824..6211b81af7 100644 --- a/core/src/components/picker-column/picker-column.scss +++ b/core/src/components/picker-column/picker-column.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Picker Column // -------------------------------------------------- @@ -115,7 +115,8 @@ scroll-snap-align: none; } -::slotted([slot="prefix"]), ::slotted([slot="suffix"]) { +::slotted([slot="prefix"]), +::slotted([slot="suffix"]) { max-width: 200px; text-overflow: ellipsis; diff --git a/core/src/components/picker-legacy-column/picker-column.ios.scss b/core/src/components/picker-legacy-column/picker-column.ios.scss index 16c9e51157..29b746690c 100644 --- a/core/src/components/picker-legacy-column/picker-column.ios.scss +++ b/core/src/components/picker-legacy-column/picker-column.ios.scss @@ -5,7 +5,12 @@ // -------------------------------------------------- .picker-col { - @include padding($picker-ios-column-padding-top, $picker-ios-column-padding-end, $picker-ios-column-padding-bottom, $picker-ios-column-padding-start); + @include padding( + $picker-ios-column-padding-top, + $picker-ios-column-padding-end, + $picker-ios-column-padding-bottom, + $picker-ios-column-padding-start + ); transform-style: preserve-3d; } @@ -26,7 +31,12 @@ } .picker-opt { - @include padding($picker-ios-option-padding-top, $picker-ios-option-padding-end, $picker-ios-option-padding-bottom, $picker-ios-option-padding-start); + @include padding( + $picker-ios-option-padding-top, + $picker-ios-option-padding-end, + $picker-ios-option-padding-bottom, + $picker-ios-option-padding-start + ); @include margin(0); @include transform-origin(center, center); diff --git a/core/src/components/picker-legacy-column/picker-column.md.scss b/core/src/components/picker-legacy-column/picker-column.md.scss index 841f30b4b8..6b40e7537c 100644 --- a/core/src/components/picker-legacy-column/picker-column.md.scss +++ b/core/src/components/picker-legacy-column/picker-column.md.scss @@ -5,7 +5,12 @@ // -------------------------------------------------- .picker-col { - @include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start); + @include padding( + $picker-md-column-padding-top, + $picker-md-column-padding-end, + $picker-md-column-padding-bottom, + $picker-md-column-padding-start + ); transform-style: preserve-3d; } @@ -25,10 +30,14 @@ pointer-events: none; } - .picker-opt { @include margin(0); - @include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start); + @include padding( + $picker-md-option-padding-top, + $picker-md-option-padding-end, + $picker-md-option-padding-bottom, + $picker-md-option-padding-start + ); height: 43px; diff --git a/core/src/components/picker-legacy-column/picker-column.scss b/core/src/components/picker-legacy-column/picker-column.scss index 9fe984c4e4..1dca6bd176 100644 --- a/core/src/components/picker-legacy-column/picker-column.scss +++ b/core/src/components/picker-legacy-column/picker-column.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Picker Column // -------------------------------------------------- diff --git a/core/src/components/picker-legacy/picker.ios.scss b/core/src/components/picker-legacy/picker.ios.scss index 38eae1ee58..f94402b6f7 100644 --- a/core/src/components/picker-legacy/picker.ios.scss +++ b/core/src/components/picker-legacy/picker.ios.scss @@ -41,7 +41,12 @@ .picker-button, .picker-button.ion-activated { @include margin(0); - @include padding($picker-ios-button-padding-top, $picker-ios-button-padding-end, $picker-ios-button-padding-bottom, $picker-ios-button-padding-start); + @include padding( + $picker-ios-button-padding-top, + $picker-ios-button-padding-end, + $picker-ios-button-padding-bottom, + $picker-ios-button-padding-start + ); height: $picker-ios-button-height; @@ -71,7 +76,8 @@ background: linear-gradient( to bottom, $picker-ios-top-background-color 20%, - $picker-ios-bottom-background-color 100%); + $picker-ios-bottom-background-color 100% + ); z-index: 10; } @@ -88,10 +94,7 @@ border-top: 1px solid var(--border-color); - background: linear-gradient( - to top, - $picker-ios-top-background-color 30%, - $picker-ios-bottom-background-color 100%); + 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-legacy/picker.ios.vars.scss b/core/src/components/picker-legacy/picker.ios.vars.scss index 6bb3e14e06..f1084d5ea9 100644 --- a/core/src/components/picker-legacy/picker.ios.vars.scss +++ b/core/src/components/picker-legacy/picker.ios.vars.scss @@ -1,88 +1,92 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Picker // -------------------------------------------------- /// @prop - Height of the picker wrapper -$picker-ios-height: 260px !default; +$picker-ios-height: 260px !default; /// @prop - Border color of the picker wrapper -$picker-ios-border-color: $item-ios-border-color !default; +$picker-ios-border-color: $item-ios-border-color !default; /// @prop - Background Color of the picker wrapper -$picker-ios-background-color: $background-color !default; +$picker-ios-background-color: $background-color !default; /// @prop - Top Background Color of the picker wrapper gradient -$picker-ios-top-background-color: var(--background, $picker-ios-background-color) !default; +$picker-ios-top-background-color: var(--background, $picker-ios-background-color) !default; /// @prop - Bottom Background Color alpha of the picker wrapper gradient -$picker-ios-bottom-background-color-alpha: .8 !default; +$picker-ios-bottom-background-color-alpha: 0.8 !default; /// @prop - Bottom Background Color of the picker wrapper gradient -$picker-ios-bottom-background-color: rgba(var(--background-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha) !default; +$picker-ios-bottom-background-color: rgba( + var(--background-rgb, $background-color-rgb), + $picker-ios-bottom-background-color-alpha +) !default; /// @prop - Height of the picker toolbar -$picker-ios-toolbar-height: 44px !default; +$picker-ios-toolbar-height: 44px !default; /// @prop - Height of the picker button -$picker-ios-button-height: $picker-ios-toolbar-height !default; +$picker-ios-button-height: $picker-ios-toolbar-height !default; /// @prop - Text color of the picker button -$picker-ios-button-text-color: ion-color(primary, base) !default; +$picker-ios-button-text-color: ion-color(primary, base) !default; /// @prop - Font size of the picker button -$picker-ios-button-font-size: 16px !default; +$picker-ios-button-font-size: 16px !default; /// @prop - Padding top of the picker button -$picker-ios-button-padding-top: 0 !default; +$picker-ios-button-padding-top: 0 !default; /// @prop - Padding end of the picker button -$picker-ios-button-padding-end: 1em !default; +$picker-ios-button-padding-end: 1em !default; /// @prop - Padding bottom of the picker button -$picker-ios-button-padding-bottom: $picker-ios-button-padding-top !default; +$picker-ios-button-padding-bottom: $picker-ios-button-padding-top !default; /// @prop - Padding start of the picker button -$picker-ios-button-padding-start: $picker-ios-button-padding-end !default; +$picker-ios-button-padding-start: $picker-ios-button-padding-end !default; /// @prop - Font weight of the strong picker button -$picker-ios-button-strong-font-weight: 600 !default; +$picker-ios-button-strong-font-weight: 600 !default; /// @prop - Padding top of the picker column -$picker-ios-column-padding-top: 0 !default; +$picker-ios-column-padding-top: 0 !default; /// @prop - Padding end of the picker column -$picker-ios-column-padding-end: 4px !default; +$picker-ios-column-padding-end: 4px !default; /// @prop - Padding bottom of the picker column -$picker-ios-column-padding-bottom: $picker-ios-column-padding-top !default; +$picker-ios-column-padding-bottom: $picker-ios-column-padding-top !default; /// @prop - Padding start of the picker column -$picker-ios-column-padding-start: $picker-ios-column-padding-end !default; +$picker-ios-column-padding-start: $picker-ios-column-padding-end !default; /// @prop - Perspective of the picker column -$picker-ios-column-perspective: 1000px !default; +$picker-ios-column-perspective: 1000px !default; /// @prop - Padding top of the picker option -$picker-ios-option-padding-top: 0 !default; +$picker-ios-option-padding-top: 0 !default; /// @prop - Padding end of the picker option -$picker-ios-option-padding-end: $picker-ios-option-padding-top !default; +$picker-ios-option-padding-end: $picker-ios-option-padding-top !default; /// @prop - Padding bottom of the picker option -$picker-ios-option-padding-bottom: $picker-ios-option-padding-top !default; +$picker-ios-option-padding-bottom: $picker-ios-option-padding-top !default; /// @prop - Padding start of the picker option -$picker-ios-option-padding-start: $picker-ios-option-padding-end !default; +$picker-ios-option-padding-start: $picker-ios-option-padding-end !default; /// @prop - Text color of the picker option -$picker-ios-option-text-color: $item-ios-color !default; +$picker-ios-option-text-color: $item-ios-color !default; /// @prop - Font size of the picker option -$picker-ios-option-font-size: 20px !default; +$picker-ios-option-font-size: 20px !default; /// @prop - Height of the picker option -$picker-ios-option-height: 42px !default; +$picker-ios-option-height: 42px !default; /// @prop - Offset y of the picker option -$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) * 0.5) - ($picker-ios-option-height * 0.5) - 10 !default; +$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) * 0.5) - + ($picker-ios-option-height * 0.5) - 10 !default; diff --git a/core/src/components/picker-legacy/picker.md.scss b/core/src/components/picker-legacy/picker.md.scss index c656e0de7b..e3b8aade7f 100644 --- a/core/src/components/picker-legacy/picker.md.scss +++ b/core/src/components/picker-legacy/picker.md.scss @@ -56,10 +56,7 @@ border-bottom: 1px solid $picker-md-border-color; - background: linear-gradient( - to bottom, - $picker-md-top-background-color 20%, - $picker-md-bottom-background-color 100%); + background: linear-gradient(to bottom, $picker-md-top-background-color 20%, $picker-md-bottom-background-color 100%); z-index: 10; } @@ -75,10 +72,7 @@ border-top: 1px solid $picker-md-border-color; - background: linear-gradient( - to top, - $picker-md-top-background-color 30%, - $picker-md-bottom-background-color 100%); + 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-legacy/picker.md.vars.scss b/core/src/components/picker-legacy/picker.md.vars.scss index d2f8675beb..312e333315 100644 --- a/core/src/components/picker-legacy/picker.md.vars.scss +++ b/core/src/components/picker-legacy/picker.md.vars.scss @@ -1,76 +1,77 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Picker // -------------------------------------------------- /// @prop - Height of the picker wrapper -$picker-md-height: 260px !default; +$picker-md-height: 260px !default; /// @prop - Border color of the picker wrapper -$picker-md-border-color: $item-md-border-color !default; +$picker-md-border-color: $item-md-border-color !default; /// @prop - Background Color of the picker wrapper -$picker-md-background-color: $background-color !default; +$picker-md-background-color: $background-color !default; /// @prop - Top Background Color of the picker wrapper gradient -$picker-md-top-background-color: $picker-md-background-color !default; +$picker-md-top-background-color: $picker-md-background-color !default; /// @prop - Bottom Background Color alpha of the picker wrapper gradient -$picker-md-bottom-background-color-alpha: .8 !default; +$picker-md-bottom-background-color-alpha: 0.8 !default; /// @prop - Bottom Background Color of the picker wrapper gradient -$picker-md-bottom-background-color: rgba($background-color-rgb, $picker-md-bottom-background-color-alpha) !default; +$picker-md-bottom-background-color: rgba($background-color-rgb, $picker-md-bottom-background-color-alpha) !default; /// @prop - Height of the picker toolbar -$picker-md-toolbar-height: 44px !default; +$picker-md-toolbar-height: 44px !default; /// @prop - Height of the picker button -$picker-md-button-height: $picker-md-toolbar-height !default; +$picker-md-button-height: $picker-md-toolbar-height !default; /// @prop - Text color of the picker button -$picker-md-button-text-color: ion-color(primary, base) !default; +$picker-md-button-text-color: ion-color(primary, base) !default; /// @prop - Background of the picker button -$picker-md-button-background-color: transparent !default; +$picker-md-button-background-color: transparent !default; /// @prop - Font size of the picker button -$picker-md-button-font-size: 14px !default; +$picker-md-button-font-size: 14px !default; /// @prop - Padding top of the picker column -$picker-md-column-padding-top: 0 !default; +$picker-md-column-padding-top: 0 !default; /// @prop - Padding end of the picker column -$picker-md-column-padding-end: 8px !default; +$picker-md-column-padding-end: 8px !default; /// @prop - Padding bottom of the picker column -$picker-md-column-padding-bottom: $picker-md-column-padding-top !default; +$picker-md-column-padding-bottom: $picker-md-column-padding-top !default; /// @prop - Padding start of the picker column -$picker-md-column-padding-start: $picker-md-column-padding-end !default; +$picker-md-column-padding-start: $picker-md-column-padding-end !default; /// @prop - Padding top of the picker option -$picker-md-option-padding-top: 0 !default; +$picker-md-option-padding-top: 0 !default; /// @prop - Padding end of the picker option -$picker-md-option-padding-end: $picker-md-option-padding-top !default; +$picker-md-option-padding-end: $picker-md-option-padding-top !default; /// @prop - Padding bottom of the picker option -$picker-md-option-padding-bottom: $picker-md-option-padding-top !default; +$picker-md-option-padding-bottom: $picker-md-option-padding-top !default; /// @prop - Padding start of the picker option -$picker-md-option-padding-start: $picker-md-option-padding-end !default; +$picker-md-option-padding-start: $picker-md-option-padding-end !default; /// @prop - Text color of the picker option -$picker-md-option-text-color: $item-md-color !default; +$picker-md-option-text-color: $item-md-color !default; /// @prop - Font size of the picker option -$picker-md-option-font-size: 22px !default; +$picker-md-option-font-size: 22px !default; /// @prop - Height of the picker option -$picker-md-option-height: 42px !default; +$picker-md-option-height: 42px !default; /// @prop - Offset y of the picker option -$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) * 0.5) - ($picker-md-option-height * 0.5) - 10 !default; +$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) * 0.5) - ($picker-md-option-height * 0.5) - + 10 !default; /// @prop - Text color of the selected picker option -$picker-md-option-selected-color: ion-color(primary, base) !default; +$picker-md-option-selected-color: ion-color(primary, base) !default; diff --git a/core/src/components/picker-legacy/picker.vars.scss b/core/src/components/picker-legacy/picker.vars.scss index 31a7ffd2b8..d6850803b5 100644 --- a/core/src/components/picker-legacy/picker.vars.scss +++ b/core/src/components/picker-legacy/picker.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Picker // -------------------------------------------------- /// @prop - Width of the picker -$picker-width: 100% !default; +$picker-width: 100% !default; /// @prop - Max width of the picker -$picker-max-width: 500px !default; +$picker-max-width: 500px !default; diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss index 76f99175c6..f474efe997 100644 --- a/core/src/components/picker/picker.ios.scss +++ b/core/src/components/picker/picker.ios.scss @@ -1,12 +1,20 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "./picker"; :host .picker-before { - background: linear-gradient(to bottom, rgba(#{$picker-fade-background}, 1) 20%, rgba(#{$picker-fade-background}, 0.8) 100%); + background: linear-gradient( + to bottom, + rgba(#{$picker-fade-background}, 1) 20%, + rgba(#{$picker-fade-background}, 0.8) 100% + ); } :host .picker-after { - background: linear-gradient(to top, rgba(#{$picker-fade-background}, 1) 20%, rgba(#{$picker-fade-background}, 0.8) 100%); + background: linear-gradient( + to top, + rgba(#{$picker-fade-background}, 1) 20%, + rgba(#{$picker-fade-background}, 0.8) 100% + ); } :host .picker-highlight { diff --git a/core/src/components/picker/picker.md.scss b/core/src/components/picker/picker.md.scss index cd5d8b9411..0a45a9334c 100644 --- a/core/src/components/picker/picker.md.scss +++ b/core/src/components/picker/picker.md.scss @@ -1,8 +1,12 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "./picker"; :host .picker-before { - background: linear-gradient(to bottom, rgba(#{$picker-fade-background}, 1) 20%, rgba(#{$picker-fade-background}, 0) 90%); + background: linear-gradient( + to bottom, + rgba(#{$picker-fade-background}, 1) 20%, + rgba(#{$picker-fade-background}, 0) 90% + ); } :host .picker-after { diff --git a/core/src/components/picker/picker.vars.scss b/core/src/components/picker/picker.vars.scss index 1a696a5e9e..7311f6fd8d 100644 --- a/core/src/components/picker/picker.vars.scss +++ b/core/src/components/picker/picker.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; $picker-fade-background-fallback: var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)); $picker-fade-background: var(--fade-background-rgb, $picker-fade-background-fallback); diff --git a/core/src/components/popover/popover.ios.scss b/core/src/components/popover/popover.ios.scss index d8feb57b55..e3ccdcb217 100644 --- a/core/src/components/popover/popover.ios.scss +++ b/core/src/components/popover/popover.ios.scss @@ -23,7 +23,6 @@ border: #{$popover-ios-desktop-border}; } - // Popover Arrow // ----------------------------------------- diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss index c5f9cbe8f4..5c6121258f 100644 --- a/core/src/components/popover/popover.ios.vars.scss +++ b/core/src/components/popover/popover.ios.vars.scss @@ -1,28 +1,31 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Popover // -------------------------------------------------- /// @prop - Width of the popover content -$popover-ios-width: 200px !default; +$popover-ios-width: 200px !default; /// @prop - Maximum height of the popover content -$popover-ios-max-height: 90% !default; +$popover-ios-max-height: 90% !default; /// @prop - Border radius of the popover content -$popover-ios-border-radius: 10px !default; +$popover-ios-border-radius: 10px !default; /// @prop - Background color alpha of the popover content -$popover-ios-translucent-background-color-alpha: .8 !default; +$popover-ios-translucent-background-color-alpha: 0.8 !default; /// @prop - Background color of the popover content -$popover-ios-translucent-background-color: rgba($background-color-rgb, $popover-ios-translucent-background-color-alpha) !default; +$popover-ios-translucent-background-color: rgba( + $background-color-rgb, + $popover-ios-translucent-background-color-alpha +) !default; /// @prop - Filter of the translucent popover -$popover-ios-translucent-filter: saturate(180%) blur(20px) !default; +$popover-ios-translucent-filter: saturate(180%) blur(20px) !default; /// $prop - Box shadow of popover on desktop -$popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !default; +$popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !default; /// $prop - Border of popover content on desktop -$popover-ios-desktop-border: 0.5px solid $background-color-step-100 !default; +$popover-ios-desktop-border: 0.5px solid $background-color-step-100 !default; diff --git a/core/src/components/popover/popover.md.vars.scss b/core/src/components/popover/popover.md.vars.scss index 4241aea4de..6d4a628e56 100644 --- a/core/src/components/popover/popover.md.vars.scss +++ b/core/src/components/popover/popover.md.vars.scss @@ -1,16 +1,17 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Popover // -------------------------------------------------- /// @prop - Width of the popover content -$popover-md-width: 250px !default; +$popover-md-width: 250px !default; /// @prop - Maximum height of the popover content -$popover-md-max-height: 90% !default; +$popover-md-max-height: 90% !default; /// @prop - Border radius of the popover content -$popover-md-border-radius: 4px !default; +$popover-md-border-radius: 4px !default; /// @prop - Box shadow of the popover content -$popover-md-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default; +$popover-md-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12) !default; diff --git a/core/src/components/popover/popover.vars.scss b/core/src/components/popover/popover.vars.scss index 2ce9fdc7ba..4b536cc1fe 100644 --- a/core/src/components/popover/popover.vars.scss +++ b/core/src/components/popover/popover.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Popover // -------------------------------------------------- /// @prop - Text color of the popover content -$popover-text-color: $text-color !default; +$popover-text-color: $text-color !default; /// @prop - Background color of the popover content -$popover-background-color: $background-color !default; \ No newline at end of file +$popover-background-color: $background-color !default; diff --git a/core/src/components/progress-bar/progress-bar.md.scss b/core/src/components/progress-bar/progress-bar.md.scss index 17becac33b..49a0125956 100644 --- a/core/src/components/progress-bar/progress-bar.md.scss +++ b/core/src/components/progress-bar/progress-bar.md.scss @@ -8,7 +8,6 @@ height: $progress-bar-md-height; } - :host(.ion-color) .progress-buffer-bar { background: #{current-color(base, 0.3)}; -} \ No newline at end of file +} diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss index 9385c03e78..83a001a056 100644 --- a/core/src/components/progress-bar/progress-bar.scss +++ b/core/src/components/progress-bar/progress-bar.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Progress bar // ------------------------------------------------------------------------ @@ -157,7 +157,12 @@ // ------------------------------------------------------------------------ :host(.ion-color) .buffer-circles { - background-image: radial-gradient(ellipse at center, #{current-color(base, 0.3)} 0%, #{current-color(base, 0.3)} 30%, transparent 30%); + background-image: radial-gradient( + ellipse at center, + #{current-color(base, 0.3)} 0%, + #{current-color(base, 0.3)} 30%, + transparent 30% + ); } :host(.ion-color) { @@ -167,7 +172,6 @@ } } - // Progress Bar: Animation Keyframes // ------------------------------------------------------------------------ // Source: https://github.com/material-components/material-components-web/blob/master/packages/mdc-linear-progress/_keyframes.scss @@ -178,13 +182,13 @@ } 20% { - animation-timing-function: cubic-bezier(.5, 0, .701732, .495819); + animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819); transform: translateX(0); } 59.15% { - animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352); + animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352); transform: translateX(83.67142%); } @@ -196,41 +200,41 @@ @keyframes primary-indeterminate-scale { 0% { - transform: scaleX(.08); + transform: scaleX(0.08); } 36.65% { - animation-timing-function: cubic-bezier(.334731, .12482, .785844, 1); + animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1); - transform: scaleX(.08); + transform: scaleX(0.08); } 69.15% { - animation-timing-function: cubic-bezier(.06, .11, .6, 1); + animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1); - transform: scaleX(.661479); + transform: scaleX(0.661479); } 100% { - transform: scaleX(.08); + transform: scaleX(0.08); } } @keyframes secondary-indeterminate-translate { 0% { - animation-timing-function: cubic-bezier(.15, 0, .515058, .409685); + animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685); transform: translateX(0); } 25% { - animation-timing-function: cubic-bezier(.31033, .284058, .8, .733712); + animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712); transform: translateX(37.651913%); } 48.35% { - animation-timing-function: cubic-bezier(.4, .627035, .6, .902026); + animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026); transform: translateX(84.386165%); } @@ -242,25 +246,25 @@ @keyframes secondary-indeterminate-scale { 0% { - animation-timing-function: cubic-bezier(.205028, .057051, .57661, .453971); + animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971); - transform: scaleX(.08); + transform: scaleX(0.08); } 19.15% { - animation-timing-function: cubic-bezier(.152313, .196432, .648374, 1.004315); + animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315); - transform: scaleX(.457104); + transform: scaleX(0.457104); } 44.15% { - animation-timing-function: cubic-bezier(.257759, -.003163, .211762, 1.38179); + animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179); - transform: scaleX(.72796); + transform: scaleX(0.72796); } 100% { - transform: scaleX(.08); + transform: scaleX(0.08); } } @@ -269,4 +273,3 @@ transform: translateX(-10px); } } - diff --git a/core/src/components/radio/radio.ios.vars.scss b/core/src/components/radio/radio.ios.vars.scss index 459e96dd15..0368e6d82f 100644 --- a/core/src/components/radio/radio.ios.vars.scss +++ b/core/src/components/radio/radio.ios.vars.scss @@ -1,23 +1,23 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS Radio // -------------------------------------------------- /// @prop - Background color of focus indicator for radio when focused -$radio-ios-background-color-focused: ion-color(primary, tint) !default; +$radio-ios-background-color-focused: ion-color(primary, tint) !default; /// @prop - Width of the radio icon -$radio-ios-icon-width: dynamic-font(15px) !default; +$radio-ios-icon-width: dynamic-font(15px) !default; /// @prop - Height of the radio icon -$radio-ios-icon-height: dynamic-font(24px) !default; +$radio-ios-icon-height: dynamic-font(24px) !default; /// @prop - Border width of the radio icon -$radio-ios-icon-border-width: dynamic-font(2px) !default; +$radio-ios-icon-border-width: dynamic-font(2px) !default; /// @prop - Border style of the radio icon -$radio-ios-icon-border-style: solid !default; +$radio-ios-icon-border-style: solid !default; /// @prop - Opacity of the disabled radio -$radio-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$radio-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/radio/radio.md.vars.scss b/core/src/components/radio/radio.md.vars.scss index 1dfa6c780f..3991e86f02 100644 --- a/core/src/components/radio/radio.md.vars.scss +++ b/core/src/components/radio/radio.md.vars.scss @@ -1,41 +1,41 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../item/item.md.vars"; // Material Design Radio // -------------------------------------------------- /// @prop - Color of the checked radio -$radio-md-color-on: current-color(base) !default; +$radio-md-color-on: current-color(base) !default; /// @prop - Background color of focus indicator for radio when focused -$radio-md-background-color-focused: ion-color(primary, tint) !default; +$radio-md-background-color-focused: ion-color(primary, tint) !default; /// @prop - Color of the unchecked radio -$radio-md-color-off: rgb($text-color-rgb, 0.60) !default; +$radio-md-color-off: rgb($text-color-rgb, 0.6) !default; /// @prop - Width of the radio icon -$radio-md-icon-width: dynamic-font(20px) !default; +$radio-md-icon-width: dynamic-font(20px) !default; /// @prop - Height of the radio icon -$radio-md-icon-height: dynamic-font(20px) !default; +$radio-md-icon-height: dynamic-font(20px) !default; /// @prop - Border width of the radio icon -$radio-md-icon-border-width: dynamic-font(2px) !default; +$radio-md-icon-border-width: dynamic-font(2px) !default; /// @prop - Border style of the radio icon -$radio-md-icon-border-style: solid !default; +$radio-md-icon-border-style: solid !default; /// @prop - Border radius of the radio icon -$radio-md-icon-border-radius: 50% !default; +$radio-md-icon-border-radius: 50% !default; /// @prop - Transition duration of the radio -$radio-md-transition-duration: 280ms !default; +$radio-md-transition-duration: 280ms !default; /// @prop - Transition easing of the radio -$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; +$radio-md-transition-easing: cubic-bezier(0.4, 0, 0.2, 1) !default; /// @prop - Opacity of the disabled radio label -$radio-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$radio-md-disabled-opacity: $form-control-md-disabled-opacity !default; /// @prop - Opacity of the disabled radio /// This value is used because the radio color is set to @@ -44,4 +44,4 @@ $radio-md-disabled-opacity: $form-control-md-disabled-opacity !default; /// opacity is applied on top of the transparent color so /// this opacity gets us the equivalent of applying `0.38` /// on top of an opaque radio `rgb(0, 0, 0, 1.0)` -$radio-md-icon-disabled-opacity: 0.63 !default; +$radio-md-icon-disabled-opacity: 0.63 !default; diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss index 0b9bc51c2d..5eba490749 100644 --- a/core/src/components/radio/radio.scss +++ b/core/src/components/radio/radio.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "./radio.vars.scss"; // Radio diff --git a/core/src/components/radio/radio.vars.scss b/core/src/components/radio/radio.vars.scss index 76dbfaf79f..af63b1a52d 100644 --- a/core/src/components/radio/radio.vars.scss +++ b/core/src/components/radio/radio.vars.scss @@ -2,4 +2,4 @@ $radio-item-label-margin-top: 10px !default; /// @prop - Bottom margin of radio's label when in an item -$radio-item-label-margin-bottom: 10px !default; \ No newline at end of file +$radio-item-label-margin-bottom: 10px !default; diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss index cb78e1ee04..ad715ded78 100644 --- a/core/src/components/range/range.ios.scss +++ b/core/src/components/range/range.ios.scss @@ -94,8 +94,13 @@ } .range-pin { - @include transform(translate3d(0, 100%, 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); + @include transform(translate3d(0, 100%, 0), scale(0.01)); + @include padding( + $range-ios-pin-padding-top, + $range-ios-pin-padding-end, + $range-ios-pin-padding-bottom, + $range-ios-pin-padding-start + ); min-width: 28px; diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index b51ed489e9..c54a794f3b 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/core/src/components/range/range.ios.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Range // -------------------------------------------------- diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss index 39315680c0..df6bea3754 100644 --- a/core/src/components/range/range.md.scss +++ b/core/src/components/range/range.md.scss @@ -88,7 +88,7 @@ } .range-knob { - transform: scale(.67); + transform: scale(0.67); transition-duration: 120ms; transition-property: transform, background-color, border; @@ -138,7 +138,7 @@ .range-pin { @include padding($range-md-pin-padding-vertical, $range-md-pin-padding-horizontal); @include border-radius(50%); - @include transform(translate3d(0, 0, 0), scale(.01)); + @include transform(translate3d(0, 0, 0), scale(0.01)); display: flex; @@ -247,7 +247,7 @@ } :host(.range-disabled) .range-knob { - transform: scale(.55); + transform: scale(0.55); outline: 5px solid #fff; @@ -255,7 +255,7 @@ } :host(.range-disabled) .label-text-wrapper, -:host(.range-disabled) ::slotted([slot=start]), -:host(.range-disabled) ::slotted([slot=end]) { +:host(.range-disabled) ::slotted([slot="start"]), +:host(.range-disabled) ::slotted([slot="end"]) { opacity: $range-md-disabled-opacity; } diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss index c5c0293c8c..aeb9869b2d 100644 --- a/core/src/components/range/range.md.vars.scss +++ b/core/src/components/range/range.md.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Range // -------------------------------------------------- /// @prop - Padding top/bottom of the range -$range-md-padding-vertical: 8px !default; +$range-md-padding-vertical: 8px !default; /// @prop - Padding start/end of the range - modern range /** @@ -14,22 +14,22 @@ $range-md-padding-vertical: 8px !default; $range-md-item-padding-horizontal: 18px !default; /// @prop - Height of the range slider -$range-md-slider-height: 42px !default; +$range-md-slider-height: 42px !default; /// @prop - Height of the range bar -$range-md-bar-height: 2px !default; +$range-md-bar-height: 2px !default; /// @prop - Background of the range bar -$range-md-bar-background-color: $background-color-step-250 !default; +$range-md-bar-background-color: $background-color-step-250 !default; /// @prop - Font size of the range pin -$range-md-pin-font-size: dynamic-font(12px) !default; +$range-md-pin-font-size: dynamic-font(12px) !default; /// @prop - Padding top/bottom of the range pin -$range-md-pin-padding-vertical: 8px !default; +$range-md-pin-padding-vertical: 8px !default; /// @prop - Padding start/end of the range pin -$range-md-pin-padding-horizontal: 0 !default; +$range-md-pin-padding-horizontal: 0 !default; /// @prop - Width and height of the range pin $range-md-pin-dimension: dynamic-font(28px) !default; diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss index 404fa5d77b..a6e67940f5 100644 --- a/core/src/components/range/range.scss +++ b/core/src/components/range/range.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "./range.vars.scss"; // Range diff --git a/core/src/components/refresher/refresher.ios.vars.scss b/core/src/components/refresher/refresher.ios.vars.scss index bc4dc4ed9c..72d3601c6b 100644 --- a/core/src/components/refresher/refresher.ios.vars.scss +++ b/core/src/components/refresher/refresher.ios.vars.scss @@ -1,16 +1,16 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; /// @prop - Color of the refresher icon -$refresher-ios-icon-color: $text-color !default; +$refresher-ios-icon-color: $text-color !default; /// @prop - Text color of the refresher content -$refresher-ios-text-color: $text-color !default; +$refresher-ios-text-color: $text-color !default; /// @prop - Color of the native refresher spinner -$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577)) !default; +$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577)) !default; /// @prop - Width of the native refresher spinner -$refresher-ios-native-spinner-width: 32px !default; +$refresher-ios-native-spinner-width: 32px !default; /// @prop - Height of the native refresher spinner $refresher-ios-native-spinner-height: 32px !default; diff --git a/core/src/components/refresher/refresher.md.scss b/core/src/components/refresher/refresher.md.scss index cff93bb394..b305b38802 100644 --- a/core/src/components/refresher/refresher.md.scss +++ b/core/src/components/refresher/refresher.md.scss @@ -95,4 +95,4 @@ ion-refresher.refresher-native { box-shadow: $refresher-md-native-spinner-box-shadow; } -} \ No newline at end of file +} diff --git a/core/src/components/refresher/refresher.md.vars.scss b/core/src/components/refresher/refresher.md.vars.scss index 3e893b0ce8..bcf3bed29c 100644 --- a/core/src/components/refresher/refresher.md.vars.scss +++ b/core/src/components/refresher/refresher.md.vars.scss @@ -1,19 +1,22 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; /// @prop - Color of the refresher icon -$refresher-md-icon-color: $text-color !default; +$refresher-md-icon-color: $text-color !default; /// @prop - Text color of the refresher content -$refresher-md-text-color: $text-color !default; +$refresher-md-text-color: $text-color !default; /// @prop - Color of the native refresher spinner -$refresher-md-native-spinner-color: #{ion-color(primary, base)} !default; +$refresher-md-native-spinner-color: #{ion-color(primary, base)} !default; /// @prop - Border of the native refresher spinner -$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec)) !default; +$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec)) !default; /// @prop - Background of the native refresher spinner -$refresher-md-native-spinner-background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff)) !default; +$refresher-md-native-spinner-background: var( + --ion-color-step-250, + var(--ion-background-color-step-250, #ffffff) +) !default; /// @prop - Box shadow of the native refresher spinner -$refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !default; +$refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !default; diff --git a/core/src/components/refresher/refresher.scss b/core/src/components/refresher/refresher.scss index 29949ebc1c..004314ea6e 100644 --- a/core/src/components/refresher/refresher.scss +++ b/core/src/components/refresher/refresher.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "./refresher.vars"; ion-refresher { @@ -69,7 +69,7 @@ ion-refresher-content .arrow-container { } } -.refresher-ready ion-refresher-content { +.refresher-ready ion-refresher-content { .refresher-pulling { display: block; } @@ -79,7 +79,7 @@ ion-refresher-content .arrow-container { } } -.refresher-refreshing ion-refresher-content { +.refresher-refreshing ion-refresher-content { .refresher-refreshing { display: block; } @@ -109,7 +109,8 @@ ion-refresher-content .arrow-container { // -------------------------------------------------- .refresher-native { - .refresher-pulling-text, .refresher-refreshing-text { + .refresher-pulling-text, + .refresher-refreshing-text { display: none; } } diff --git a/core/src/components/refresher/refresher.vars.scss b/core/src/components/refresher/refresher.vars.scss index 2f74eeb767..11a65dfc87 100644 --- a/core/src/components/refresher/refresher.vars.scss +++ b/core/src/components/refresher/refresher.vars.scss @@ -2,10 +2,10 @@ // -------------------------------------------------- /// @prop - Height of the refresher -$refresher-height: 60px !default; +$refresher-height: 60px !default; /// @prop - Font size of the refresher icon -$refresher-icon-font-size: 30px !default; +$refresher-icon-font-size: 30px !default; /// @prop - Font size of the refresher content -$refresher-text-font-size: 16px !default; +$refresher-text-font-size: 16px !default; diff --git a/core/src/components/reorder-group/reorder-group.scss b/core/src/components/reorder-group/reorder-group.scss index cf0274c2b7..fe2c96fd10 100644 --- a/core/src/components/reorder-group/reorder-group.scss +++ b/core/src/components/reorder-group/reorder-group.scss @@ -34,8 +34,8 @@ /* stylelint-disable-next-line declaration-no-important */ transition: none !important; - box-shadow: 0 0 10px rgba(0, 0, 0, .4); - opacity: .8; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); + opacity: 0.8; z-index: $z-index-reorder-selected; } diff --git a/core/src/components/reorder-group/reorder-group.vars.scss b/core/src/components/reorder-group/reorder-group.vars.scss index a43be46d56..b18f827f13 100644 --- a/core/src/components/reorder-group/reorder-group.vars.scss +++ b/core/src/components/reorder-group/reorder-group.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Reorder Group // -------------------------------------------------- diff --git a/core/src/components/reorder/reorder.ios.vars.scss b/core/src/components/reorder/reorder.ios.vars.scss index 723f9324d7..d84ed308ba 100644 --- a/core/src/components/reorder/reorder.ios.vars.scss +++ b/core/src/components/reorder/reorder.ios.vars.scss @@ -1,11 +1,10 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Reorder // -------------------------------------------------- /// @prop - Font size of the reorder icon -$reorder-ios-icon-font-size: dynamic-font(34px) !default; +$reorder-ios-icon-font-size: dynamic-font(34px) !default; /// @prop - Opacity of the reorder icon -$reorder-ios-icon-opacity: .4 !default; - +$reorder-ios-icon-opacity: 0.4 !default; diff --git a/core/src/components/reorder/reorder.md.vars.scss b/core/src/components/reorder/reorder.md.vars.scss index ebf7214b28..27824960ed 100644 --- a/core/src/components/reorder/reorder.md.vars.scss +++ b/core/src/components/reorder/reorder.md.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Reorder // -------------------------------------------------- /// @prop - Font size of the reorder icon -$reorder-md-icon-font-size: dynamic-font(31px) !default; +$reorder-md-icon-font-size: dynamic-font(31px) !default; /// @prop - Opacity of the reorder icon -$reorder-md-icon-opacity: .3 !default; +$reorder-md-icon-opacity: 0.3 !default; diff --git a/core/src/components/reorder/reorder.scss b/core/src/components/reorder/reorder.scss index d10dd930f1..08a858f170 100644 --- a/core/src/components/reorder/reorder.scss +++ b/core/src/components/reorder/reorder.scss @@ -9,7 +9,6 @@ z-index: 100; } - // Reorder Icon // -------------------------------------------------- diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.scss index f4937518f7..ed5fc4b9b8 100644 --- a/core/src/components/ripple-effect/ripple-effect.scss +++ b/core/src/components/ripple-effect/ripple-effect.scss @@ -1,5 +1,4 @@ -@import "../../themes/ionic.globals"; - +@import "../../themes/native/native.globals"; // Material Design Ripple Effect // -------------------------------------------------- @@ -32,9 +31,7 @@ $fade-out-duration: 150ms; contain: strict; opacity: 0; - animation: - $scale-duration rippleAnimation forwards, - $fade-in-duration fadeInAnimation forwards; + animation: $scale-duration rippleAnimation forwards, $fade-in-duration fadeInAnimation forwards; will-change: transform, opacity; pointer-events: none; @@ -47,7 +44,7 @@ $fade-out-duration: 150ms; @keyframes rippleAnimation { from { - animation-timing-function: cubic-bezier(.4, 0, .2, 1); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1); } diff --git a/core/src/components/router-link/router-link.scss b/core/src/components/router-link/router-link.scss index 89b4cff28b..7a3db6c3e9 100644 --- a/core/src/components/router-link/router-link.scss +++ b/core/src/components/router-link/router-link.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Anchor // -------------------------------------------------- diff --git a/core/src/components/router-outlet/router-outlet.scss b/core/src/components/router-outlet/router-outlet.scss index 125bb460fb..40bddf8b3a 100644 --- a/core/src/components/router-outlet/router-outlet.scss +++ b/core/src/components/router-outlet/router-outlet.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; :host { @include position(0, 0, 0, 0); diff --git a/core/src/components/row/row.vars.scss b/core/src/components/row/row.vars.scss index 63c075fdbe..98f5b2ea40 100644 --- a/core/src/components/row/row.vars.scss +++ b/core/src/components/row/row.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "../grid/grid.mixins"; // Row diff --git a/core/src/components/searchbar/searchbar.ios.scss b/core/src/components/searchbar/searchbar.ios.scss index f34a9ce414..b115d2d4ca 100644 --- a/core/src/components/searchbar/searchbar.ios.scss +++ b/core/src/components/searchbar/searchbar.ios.scss @@ -13,7 +13,12 @@ --color: #{$searchbar-ios-input-text-color}; --icon-color: #{$searchbar-ios-input-search-icon-color}; - @include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start); + @include padding( + $searchbar-ios-padding-top, + $searchbar-ios-padding-end, + $searchbar-ios-padding-bottom, + $searchbar-ios-padding-start + ); min-height: $searchbar-ios-input-min-height + $searchbar-ios-padding-top + $searchbar-ios-padding-bottom; @@ -24,7 +29,6 @@ min-height: $searchbar-ios-input-min-height; } - // Searchbar Search Icon // ----------------------------------------- @@ -40,7 +44,6 @@ contain: strict; } - // Searchbar Input Field // ----------------------------------------- @@ -86,7 +89,6 @@ height: 100%; } - // Searchbar Cancel // ----------------------------------------- @@ -100,7 +102,6 @@ font-size: $searchbar-ios-cancel-button-font-size; } - // Searchbar Left Aligned (iOS Only) // ----------------------------------------- @@ -112,7 +113,6 @@ @include padding-horizontal(dynamic-font(30px), null); } - // Searchbar Has Focus & Animated // ----------------------------------------- diff --git a/core/src/components/searchbar/searchbar.ios.vars.scss b/core/src/components/searchbar/searchbar.ios.vars.scss index 0bdb096617..26869d877f 100644 --- a/core/src/components/searchbar/searchbar.ios.vars.scss +++ b/core/src/components/searchbar/searchbar.ios.vars.scss @@ -1,62 +1,62 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Searchbar // -------------------------------------------------- /// @prop - Padding top of the searchbar -$searchbar-ios-padding-top: 12px !default; +$searchbar-ios-padding-top: 12px !default; /// @prop - Padding end of the searchbar -$searchbar-ios-padding-end: $searchbar-ios-padding-top !default; +$searchbar-ios-padding-end: $searchbar-ios-padding-top !default; /// @prop - Padding bottom of the searchbar -$searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default; +$searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default; /// @prop - Padding start of the searchbar -$searchbar-ios-padding-start: $searchbar-ios-padding-end !default; +$searchbar-ios-padding-start: $searchbar-ios-padding-end !default; /// @prop - Font size of the searchbar cancel button // The cancel button on iOS does not scale with Dynamic Type -$searchbar-ios-cancel-button-font-size: 17px !default; +$searchbar-ios-cancel-button-font-size: 17px !default; /// @prop - Color of the searchbar cancel button -$searchbar-ios-cancel-button-color: ion-color(primary, base) !default; +$searchbar-ios-cancel-button-color: ion-color(primary, base) !default; /// @prop - Background color of the searchbar cancel button -$searchbar-ios-cancel-button-background-color: transparent !default; +$searchbar-ios-cancel-button-background-color: transparent !default; /// @prop - Size of the searchbar input search icon -$searchbar-ios-input-search-icon-size: dynamic-font(22px) !default; +$searchbar-ios-input-search-icon-size: dynamic-font(22px) !default; /// @prop - Color of the searchbar input search icon -$searchbar-ios-input-search-icon-color: $text-color-step-400 !default; +$searchbar-ios-input-search-icon-color: $text-color-step-400 !default; /// @prop - Minimum Height of the searchbar input -$searchbar-ios-input-min-height: 36px !default; +$searchbar-ios-input-min-height: 36px !default; /// @prop - Border radius of the searchbar input -$searchbar-ios-input-border-radius: 10px !default; +$searchbar-ios-input-border-radius: 10px !default; /// @prop - Color of the searchbar input text -$searchbar-ios-input-text-color: $text-color !default; +$searchbar-ios-input-text-color: $text-color !default; /// @prop - Background color alpha of the searchbar input -$searchbar-ios-input-background-color-alpha: .07 !default; +$searchbar-ios-input-background-color-alpha: 0.07 !default; /// @prop - Background color of the searchbar input -$searchbar-ios-input-background-color: rgba($text-color-rgb, $searchbar-ios-input-background-color-alpha) !default; +$searchbar-ios-input-background-color: rgba($text-color-rgb, $searchbar-ios-input-background-color-alpha) !default; /// @prop - Transition of the searchbar input -$searchbar-ios-input-transition: all 300ms ease !default; +$searchbar-ios-input-transition: all 300ms ease !default; /// @prop - Transition of the searchbar input cancel button -$searchbar-ios-cancel-transition: all 300ms ease !default; +$searchbar-ios-cancel-transition: all 300ms ease !default; /// @prop - Alpha of the searchbar input icons -$searchbar-ios-input-icon-opacity: .5 !default; +$searchbar-ios-input-icon-opacity: 0.5 !default; /// @prop - Color of the searchbar input clear icon -$searchbar-ios-input-clear-icon-color: $text-color-step-400 !default; +$searchbar-ios-input-clear-icon-color: $text-color-step-400 !default; /// @prop - Size of the searchbar input clear icon -$searchbar-ios-input-clear-icon-size: dynamic-font(18px) !default; +$searchbar-ios-input-clear-icon-size: dynamic-font(18px) !default; diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss index 341e9e433c..639d02a44e 100644 --- a/core/src/components/searchbar/searchbar.md.scss +++ b/core/src/components/searchbar/searchbar.md.scss @@ -13,12 +13,16 @@ --color: #{$searchbar-md-input-text-color}; --icon-color: #{$searchbar-md-input-search-icon-color}; - @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start); + @include padding( + $searchbar-md-padding-top, + $searchbar-md-padding-end, + $searchbar-md-padding-bottom, + $searchbar-md-padding-start + ); background: $searchbar-md-background; } - // Searchbar Search Icon // ----------------------------------------- @@ -29,7 +33,6 @@ height: $searchbar-md-input-search-icon-size; } - // Searchbar Cancel Icon // ----------------------------------------- @@ -60,7 +63,6 @@ background-color: transparent; } - // Searchbar Input Field // ----------------------------------------- @@ -76,7 +78,6 @@ line-height: $searchbar-md-input-line-height; } - // Searchbar Clear Input Icon // ----------------------------------------- @@ -102,7 +103,6 @@ height: 100%; } - // Searchbar Focused // ----------------------------------------- @@ -120,7 +120,6 @@ display: none; } - // Searchbar in Toolbar // ----------------------------------------- diff --git a/core/src/components/searchbar/searchbar.md.vars.scss b/core/src/components/searchbar/searchbar.md.vars.scss index 0af1072dc2..be8097725e 100644 --- a/core/src/components/searchbar/searchbar.md.vars.scss +++ b/core/src/components/searchbar/searchbar.md.vars.scss @@ -1,55 +1,56 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Searchbar // -------------------------------------------------- /// @prop - Padding top of the searchbar -$searchbar-md-padding-top: 8px !default; +$searchbar-md-padding-top: 8px !default; /// @prop - Padding end of the searchbar -$searchbar-md-padding-end: $searchbar-md-padding-top !default; +$searchbar-md-padding-end: $searchbar-md-padding-top !default; /// @prop - Padding bottom of the searchbar -$searchbar-md-padding-bottom: $searchbar-md-padding-top !default; +$searchbar-md-padding-bottom: $searchbar-md-padding-top !default; /// @prop - Padding start of the searchbar -$searchbar-md-padding-start: $searchbar-md-padding-end !default; +$searchbar-md-padding-start: $searchbar-md-padding-end !default; /// @prop - Background of the searchbar -$searchbar-md-background: inherit !default; +$searchbar-md-background: inherit !default; /// @prop - Color of the searchbar cancel button -$searchbar-md-cancel-button-color: $text-color-step-100 !default; +$searchbar-md-cancel-button-color: $text-color-step-100 !default; /// @prop - Background color of the searchbar cancel button -$searchbar-md-cancel-button-background-color: transparent !default; +$searchbar-md-cancel-button-background-color: transparent !default; /// @prop - Font size of the searchbar cancel button -$searchbar-md-cancel-button-font-size: 1.5em !default; +$searchbar-md-cancel-button-font-size: 1.5em !default; /// @prop - Color of the searchbar input search icon -$searchbar-md-input-search-icon-color: $text-color-step-400 !default; +$searchbar-md-input-search-icon-color: $text-color-step-400 !default; /// @prop - Size of the searchbar input search icon -$searchbar-md-input-search-icon-size: dynamic-font(21px) !default; +$searchbar-md-input-search-icon-size: dynamic-font(21px) !default; /// @prop - Height of the searchbar input -$searchbar-md-input-height: auto !default; +$searchbar-md-input-height: auto !default; /// @prop - Line height of the searchbar input -$searchbar-md-input-line-height: 30px !default; +$searchbar-md-input-line-height: 30px !default; /// @prop - Box shadow of the searchbar input -$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; +$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), + 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default; /// @prop - Color of the searchbar input text -$searchbar-md-input-text-color: $text-color-step-150 !default; +$searchbar-md-input-text-color: $text-color-step-150 !default; /// @prop - Background of the searchbar input -$searchbar-md-input-background-color: $background-color !default; +$searchbar-md-input-background-color: $background-color !default; /// @prop - Border radius of the searchbar input -$searchbar-md-input-border-radius: 2px !default; +$searchbar-md-input-border-radius: 2px !default; /// @prop - Size of the searchbar input clear icon -$searchbar-md-input-clear-icon-size: dynamic-font(22px) !default; +$searchbar-md-input-clear-icon-size: dynamic-font(22px) !default; diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss index 0293b5b7bf..cd08a33def 100644 --- a/core/src/components/searchbar/searchbar.scss +++ b/core/src/components/searchbar/searchbar.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Searchbar // -------------------------------------------------- @@ -163,6 +163,6 @@ :host(.searchbar-disabled) { cursor: default; - opacity: .4; + opacity: 0.4; pointer-events: none; } diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss index 2c95ea0b4e..0ee589ba2e 100644 --- a/core/src/components/segment-button/segment-button.ios.scss +++ b/core/src/components/segment-button/segment-button.ios.scss @@ -46,7 +46,6 @@ line-height: #{$segment-button-ios-line-height}; } - // Segment Button: Borders // -------------------------------------------------- @@ -69,7 +68,6 @@ border-left-color: transparent; } - // Segment Button: Disabled // -------------------------------------------------- @@ -77,7 +75,6 @@ opacity: $segment-button-ios-opacity-disabled; } - // Segment Button: Icon // -------------------------------------------------- @@ -85,7 +82,6 @@ font-size: $segment-button-ios-icon-size; } - // Segment Button: Layout // -------------------------------------------------- @@ -99,7 +95,6 @@ @include margin-horizontal(0, 2px); } - // Segment Button: Checked Indicator // -------------------------------------------------- @@ -118,7 +113,6 @@ transition: var(--indicator-transition); } - // Segment Button: Checked Borders // -------------------------------------------------- @@ -127,7 +121,6 @@ opacity: 0; } - // Segment Button: Checked // -------------------------------------------------- @@ -135,7 +128,6 @@ z-index: -1; } - // Segment: States // -------------------------------------------------- @@ -158,7 +150,6 @@ } } - // Segment Button: Segment w/ Color // -------------------------------------------------- @@ -183,8 +174,6 @@ } } - - // Segment Button: Toolbar // -------------------------------------------------- @@ -196,7 +185,6 @@ --indicator-color: #{var(--ion-toolbar-segment-indicator-color, $segment-button-ios-indicator-color)}; } - // Segment Button: Toolbar w/ Color // -------------------------------------------------- diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss index 77dce9d42d..25ecc575bb 100644 --- a/core/src/components/segment-button/segment-button.ios.vars.scss +++ b/core/src/components/segment-button/segment-button.ios.vars.scss @@ -1,64 +1,67 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Segment Button // -------------------------------------------------- /// @prop - Background of the segment button -$segment-button-ios-background: none !default; +$segment-button-ios-background: none !default; /// @prop - Background of the checked segment button -$segment-button-ios-background-checked: $segment-button-ios-background !default; +$segment-button-ios-background-checked: $segment-button-ios-background !default; /// @prop - Text color of the segment button -$segment-button-ios-color: $text-color !default; +$segment-button-ios-color: $text-color !default; /// @prop - Background of the checked segment button indicator -$segment-button-ios-indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, $background-color)) !default; +$segment-button-ios-indicator-color: var( + --ion-color-step-350, + var(--ion-background-color-step-350, $background-color) +) !default; /// @prop - Margin of the segment button -$segment-button-ios-margin: 2px !default; +$segment-button-ios-margin: 2px !default; /// @prop - Opacity of the segment button on hover -$segment-button-ios-opacity-hover: .5 !default; +$segment-button-ios-opacity-hover: 0.5 !default; /// @prop - Opacity of the segment button when focused -$segment-button-ios-opacity-focused: .7 !default; +$segment-button-ios-opacity-focused: 0.7 !default; /// @prop - Opacity of the disabled segment button -$segment-button-ios-opacity-disabled: .3 !default; +$segment-button-ios-opacity-disabled: 0.3 !default; /// @prop - Background of the segment button on hover -$segment-button-ios-background-hover: none !default; +$segment-button-ios-background-hover: none !default; /// @prop - Box shadow of the checked segment button -$segment-button-ios-box-shadow-checked: 0 0 5px rgba(0, 0, 0, 0.16) !default; +$segment-button-ios-box-shadow-checked: 0 0 5px rgba(0, 0, 0, 0.16) !default; /// @prop - Border width of the segment button -$segment-button-ios-border-width: 1px !default; +$segment-button-ios-border-width: 1px !default; /// @prop - Border color of the segment button -$segment-button-ios-border-color: rgba($text-color-rgb, 0.12) !default; +$segment-button-ios-border-color: rgba($text-color-rgb, 0.12) !default; /// @prop - Minimum width of the segment button -$segment-button-ios-min-width: 70px !default; +$segment-button-ios-min-width: 70px !default; /// @prop - Minimum height of the segment button -$segment-button-ios-min-height: 28px !default; +$segment-button-ios-min-height: 28px !default; /// @prop - Line height of the segment button -$segment-button-ios-line-height: 37px !default; +$segment-button-ios-line-height: 37px !default; /// @prop - Font size of the segment button -$segment-button-ios-font-size: 13px !default; +$segment-button-ios-font-size: 13px !default; /// @prop - Border radius of the segment button -$segment-button-ios-border-radius: 7px !default; +$segment-button-ios-border-radius: 7px !default; /// @prop - Size of an icon in the segment button -$segment-button-ios-icon-size: 24px !default; +$segment-button-ios-icon-size: 24px !default; /// @prop - Transition of the segment button -$segment-button-ios-transition: 100ms all linear !default; +$segment-button-ios-transition: 100ms all linear !default; /// @prop - Transition of the animated segment button -$segment-button-ios-transition-animated: transform 260ms cubic-bezier(0.4, 0, 0.2, 1) !default; +$segment-button-ios-transition-animated: transform 260ms cubic-bezier(0.4, 0, 0.2, 1) !default; diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss index 9ee5b85f5e..73496cde23 100644 --- a/core/src/components/segment-button/segment-button.md.scss +++ b/core/src/components/segment-button/segment-button.md.scss @@ -10,8 +10,8 @@ --background-hover: var(--color-checked); --background-focused: var(--color-checked); --background-activated-opacity: 0; - --background-focused-opacity: .12; - --background-hover-opacity: .04; + --background-focused-opacity: 0.12; + --background-hover-opacity: 0.04; --color: #{$segment-button-md-text-color}; --color-checked: #{$segment-button-md-text-color-checked}; --indicator-box-shadow: none; @@ -50,7 +50,6 @@ opacity: $segment-button-md-opacity-disabled; } - // Segment Button: Segment w/ Color // -------------------------------------------------- @@ -94,7 +93,6 @@ } } - // Segment: Default Toolbar // -------------------------------------------------- @@ -106,13 +104,12 @@ --indicator-color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))}; } - // Segment Button: Toolbar w/ Color // -------------------------------------------------- // Default Segment, In a Toolbar with Color :host(.in-toolbar-color:not(.in-segment-color)) .button-native { - color: #{current-color(contrast, .6)}; + color: #{current-color(contrast, 0.6)}; } // Default Segment, In a Toolbar with Color, Checked @@ -127,7 +124,6 @@ } } - // Segment Button: Icon // -------------------------------------------------- diff --git a/core/src/components/segment-button/segment-button.md.vars.scss b/core/src/components/segment-button/segment-button.md.vars.scss index 35ce67c163..d30ba1468d 100644 --- a/core/src/components/segment-button/segment-button.md.vars.scss +++ b/core/src/components/segment-button/segment-button.md.vars.scss @@ -1,64 +1,64 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Segment Button // -------------------------------------------------- /// @prop - Opacity of the segment button -$segment-button-md-opacity: .6 !default; +$segment-button-md-opacity: 0.6 !default; /// @prop - Text color of the segment button -$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity) !default; +$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity) !default; /// @prop - Text color of the checked segment button -$segment-button-md-text-color-checked: ion-color(primary, base) !default; +$segment-button-md-text-color-checked: ion-color(primary, base) !default; /// @prop - Background of the segment button -$segment-button-md-background: none !default; +$segment-button-md-background: none !default; /// @prop - Background of the checked segment button -$segment-button-md-background-checked: $segment-button-md-background !default; +$segment-button-md-background-checked: $segment-button-md-background !default; /// @prop - Opacity of the disabled segment button -$segment-button-md-opacity-disabled: .3 !default; +$segment-button-md-opacity-disabled: 0.3 !default; /// @prop - Padding top of the segment button -$segment-button-md-padding-top: 0 !default; +$segment-button-md-padding-top: 0 !default; /// @prop - Padding end of the segment button -$segment-button-md-padding-end: 16px !default; +$segment-button-md-padding-end: 16px !default; /// @prop - Padding bottom of the segment button -$segment-button-md-padding-bottom: $segment-button-md-padding-top !default; +$segment-button-md-padding-bottom: $segment-button-md-padding-top !default; /// @prop - Padding start of the segment button -$segment-button-md-padding-start: $segment-button-md-padding-end !default; +$segment-button-md-padding-start: $segment-button-md-padding-end !default; /// @prop - Minimum height of the segment button -$segment-button-md-min-height: 48px !default; +$segment-button-md-min-height: 48px !default; /// @prop - Minimum width of the segment button -$segment-button-md-min-width: 90px !default; +$segment-button-md-min-width: 90px !default; /// @prop - Maximum width of the segment button -$segment-button-md-max-width: 360px !default; +$segment-button-md-max-width: 360px !default; /// @prop - Line height of the segment button -$segment-button-md-line-height: 40px !default; +$segment-button-md-line-height: 40px !default; /// @prop - Font size of the segment button -$segment-button-md-font-size: 14px !default; +$segment-button-md-font-size: 14px !default; /// @prop - Letter spacing of the segment button -$segment-button-md-letter-spacing: .06em !default; +$segment-button-md-letter-spacing: 0.06em !default; /// @prop - Font weight of the segment button -$segment-button-md-font-weight: 500 !default; +$segment-button-md-font-weight: 500 !default; /// @prop - Transition of the segment button -$segment-button-md-transition: color .15s linear 0s, opacity .15s linear 0s !default; +$segment-button-md-transition: color 0.15s linear 0s, opacity 0.15s linear 0s !default; /// @prop - Transition of the animated segment button -$segment-button-md-transition-animated: transform 250ms cubic-bezier(.4, 0, .2, 1) !default; +$segment-button-md-transition-animated: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) !default; /// @prop - Size of an icon in the segment button -$segment-button-md-icon-size: 24px !default; +$segment-button-md-icon-size: 24px !default; diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss index fe89437bcc..f0ea7d6ab9 100644 --- a/core/src/components/segment-button/segment-button.scss +++ b/core/src/components/segment-button/segment-button.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Segment Button // -------------------------------------------------- @@ -82,7 +82,7 @@ @include text-inherit(); @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)); - @include transform(translate3d(0,0,0)); + @include transform(translate3d(0, 0, 0)); display: flex; position: relative; @@ -135,7 +135,6 @@ z-index: 1; } - // Segment Button: Checked // -------------------------------------------------- @@ -144,7 +143,6 @@ color: var(--color-checked); } - // Segment Button: Disabled // -------------------------------------------------- @@ -153,7 +151,6 @@ pointer-events: none; } - // Segment Button: Focused // -------------------------------------------------- @@ -190,7 +187,6 @@ } } - // Segment Button Icon // -------------------------------------------------- @@ -202,7 +198,6 @@ pointer-events: none; } - // Segment Button Label // -------------------------------------------------- @@ -226,7 +221,6 @@ pointer-events: none; } - // Segment Button Layout // -------------------------------------------------- @@ -303,7 +297,6 @@ ion-ripple-effect { opacity: 1; } - // Segment: Reduced Motion // -------------------------------------------------- diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss index 59608f45ee..148179a152 100644 --- a/core/src/components/segment/segment.ios.scss +++ b/core/src/components/segment/segment.ios.scss @@ -14,7 +14,6 @@ z-index: 0; } - // Segment: Color // -------------------------------------------------- @@ -22,7 +21,6 @@ background: #{current-color(base, 0.065)}; } - // Segment: Default Toolbar // -------------------------------------------------- @@ -37,7 +35,6 @@ background: var(--ion-toolbar-segment-background, var(--background)); } - // Segment: Color Toolbar // -------------------------------------------------- diff --git a/core/src/components/segment/segment.ios.vars.scss b/core/src/components/segment/segment.ios.vars.scss index f7a9161644..b6cffb179a 100644 --- a/core/src/components/segment/segment.ios.vars.scss +++ b/core/src/components/segment/segment.ios.vars.scss @@ -1,14 +1,14 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../segment-button/segment-button.ios.vars"; // iOS Segment // -------------------------------------------------- /// @prop - Alpha of the segment for use in the backgrounds -$segment-ios-background-alpha: 0.065 !default; +$segment-ios-background-alpha: 0.065 !default; /// @prop - Background color of the segment -$segment-ios-background-color: rgba($text-color-rgb, $segment-ios-background-alpha) !default; +$segment-ios-background-color: rgba($text-color-rgb, $segment-ios-background-alpha) !default; /// @prop - Border radius of the segment -$segment-ios-border-radius: 8px !default; +$segment-ios-border-radius: 8px !default; diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss index 6efc1174e7..e61c8eba84 100644 --- a/core/src/components/segment/segment.md.scss +++ b/core/src/components/segment/segment.md.scss @@ -23,7 +23,6 @@ min-height: var(--min-height); } - // Segment: Scrollable // -------------------------------------------------- diff --git a/core/src/components/segment/segment.md.vars.scss b/core/src/components/segment/segment.md.vars.scss index ee98aab17f..8616484d09 100644 --- a/core/src/components/segment/segment.md.vars.scss +++ b/core/src/components/segment/segment.md.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../segment-button/segment-button.md.vars"; // Material Design Segment diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.scss index f4e8ca9cfe..5c1591f72e 100644 --- a/core/src/components/segment/segment.scss +++ b/core/src/components/segment/segment.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Segment // -------------------------------------------------- @@ -33,7 +33,6 @@ user-select: none; } - // Segment: Scrollable // -------------------------------------------------- diff --git a/core/src/components/select-popover/select-popover.ios.scss b/core/src/components/select-popover/select-popover.ios.scss index 22dc63cc3a..3330a261d8 100644 --- a/core/src/components/select-popover/select-popover.ios.scss +++ b/core/src/components/select-popover/select-popover.ios.scss @@ -1,3 +1,2 @@ @import "./select-popover"; @import "./select-popover.ios.vars"; - diff --git a/core/src/components/select-popover/select-popover.ios.vars.scss b/core/src/components/select-popover/select-popover.ios.vars.scss index 05ef1b1b63..188e3f5f97 100644 --- a/core/src/components/select-popover/select-popover.ios.vars.scss +++ b/core/src/components/select-popover/select-popover.ios.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS Select Popover diff --git a/core/src/components/select-popover/select-popover.md.vars.scss b/core/src/components/select-popover/select-popover.md.vars.scss index a0ea2826b9..04b2da15b2 100644 --- a/core/src/components/select-popover/select-popover.md.vars.scss +++ b/core/src/components/select-popover/select-popover.md.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../item/item.md.vars"; // Material Design Select Popover diff --git a/core/src/components/select-popover/select-popover.scss b/core/src/components/select-popover/select-popover.scss index c22aa27321..de7cb78330 100644 --- a/core/src/components/select-popover/select-popover.scss +++ b/core/src/components/select-popover/select-popover.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; :host ion-list { @include margin(0); @@ -9,7 +9,6 @@ ion-label { @include margin(0); } - /** * The main content inside of a popover has overflow: hidden * so that a descendant ion-content can be scrolled. diff --git a/core/src/components/select/select.ios.vars.scss b/core/src/components/select/select.ios.vars.scss index 57677a8438..ed17d69ee0 100644 --- a/core/src/components/select/select.ios.vars.scss +++ b/core/src/components/select/select.ios.vars.scss @@ -1,11 +1,11 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS Select // -------------------------------------------------- /// @prop - Size of the select icon -$select-ios-icon-size: dynamic-font(18px) !default; +$select-ios-icon-size: dynamic-font(18px) !default; /// @prop - Opacity of the disabled select $select-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss index e1f4d54395..a3652604e0 100644 --- a/core/src/components/select/select.md.outline.scss +++ b/core/src/components/select/select.md.outline.scss @@ -110,7 +110,9 @@ * Label text should not extend * beyond the bounds of the select. */ - max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$select-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale}); + max-width: calc( + (100% - var(--padding-start) - var(--padding-end) - #{$select-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale} + ); } /** diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss index 5d556e11f9..9b106f06db 100644 --- a/core/src/components/select/select.md.scss +++ b/core/src/components/select/select.md.scss @@ -15,7 +15,7 @@ .select-icon { width: $select-md-icon-size; - transition: transform .15s cubic-bezier(.4, 0, .2, 1); + transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); color: #{$text-color-step-500}; } diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss index a6125e618d..a8eaa7e9cb 100644 --- a/core/src/components/select/select.md.vars.scss +++ b/core/src/components/select/select.md.vars.scss @@ -1,13 +1,13 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../item/item.md.vars"; // Material Design Select // -------------------------------------------------- /// @prop - Size of the select icon -$select-md-icon-size: dynamic-font(13px) !default; +$select-md-icon-size: dynamic-font(13px) !default; /// @prop - The amount of whitespace to display on either side of the floating label -$select-md-floating-label-padding: 4px !default; +$select-md-floating-label-padding: 4px !default; /// @prop - Opacity of the disabled select $select-md-disabled-opacity: $form-control-md-disabled-opacity !default; diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index f564eec0ee..826432f417 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -292,7 +292,7 @@ button { */ max-width: 200px; - transition: color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); + transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1); /** * This ensures that double tapping this text @@ -547,7 +547,8 @@ button { // Start/End Slots // ---------------------------------------------------------------- -::slotted([slot="start"]), ::slotted([slot="end"]) { +::slotted([slot="start"]), +::slotted([slot="end"]) { /** * Prevent the slots from shrinking when the label and/or * selected item text is long enough to fill the rest of diff --git a/core/src/components/select/select.vars.scss b/core/src/components/select/select.vars.scss index ae137c052b..8d5f46cbb4 100644 --- a/core/src/components/select/select.vars.scss +++ b/core/src/components/select/select.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; /// @prop - Margin start of the select icon $select-icon-margin-start: 4px !default; diff --git a/core/src/components/skeleton-text/skeleton-text.vars.scss b/core/src/components/skeleton-text/skeleton-text.vars.scss index 3ebd68d936..8fc8c10ac3 100644 --- a/core/src/components/skeleton-text/skeleton-text.vars.scss +++ b/core/src/components/skeleton-text/skeleton-text.vars.scss @@ -1,16 +1,19 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Skeleton Text // -------------------------------------------------- /// @prop - Background color alpha of the skeleton text -$skeleton-text-background-alpha: .065 !default; +$skeleton-text-background-alpha: 0.065 !default; /// @prop - Background color of the skeleton text -$skeleton-text-background: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-alpha) !default; +$skeleton-text-background: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-alpha) !default; /// @prop - Background color alpha of the skeleton text animation -$skeleton-text-background-animated-alpha: .135 !default; +$skeleton-text-background-animated-alpha: 0.135 !default; /// @prop - Background color of the skeleton text animation -$skeleton-text-background-animated: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-animated-alpha) !default; +$skeleton-text-background-animated: rgba( + var(--background-rgb, $text-color-rgb), + $skeleton-text-background-animated-alpha +) !default; diff --git a/core/src/components/spinner/spinner.scss b/core/src/components/spinner/spinner.scss index 40dad2d102..2a8d61bce2 100644 --- a/core/src/components/spinner/spinner.scss +++ b/core/src/components/spinner/spinner.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Spinners // -------------------------------------------------- @@ -43,7 +43,6 @@ svg { transform: translateZ(0); } - // Spinner: lines / lines-small / lines-sharp / lines-sharp-small // -------------------------------------------------- @@ -72,7 +71,6 @@ svg { animation: spinner-fade-out 1s linear infinite; } - // Spinner: bubbles // -------------------------------------------------- @@ -81,7 +79,6 @@ svg { fill: currentColor; } - // Spinner: circles // -------------------------------------------------- @@ -90,7 +87,6 @@ svg { fill: currentColor; } - // Spinner: crescent // -------------------------------------------------- @@ -106,7 +102,6 @@ svg { animation: spinner-rotate 1s linear infinite; } - // Spinner: dots // -------------------------------------------------- @@ -119,7 +114,6 @@ svg { animation: spinner-dots 1s linear infinite; } - // Spinner: circular // -------------------------------------------------- @@ -136,7 +130,6 @@ svg { fill: none; } - // Spinner: paused // -------------------------------------------------- @@ -146,7 +139,6 @@ svg { animation-play-state: paused; } - // Animation Keyframes // -------------------------------------------------- @@ -158,7 +150,6 @@ svg { 100% { opacity: 0; } - } @keyframes spinner-scale-out { @@ -169,7 +160,6 @@ svg { 100% { transform: scale(0, 0); } - } @keyframes spinner-rotate { @@ -180,26 +170,25 @@ svg { 100% { transform: rotate(360deg); } - } @keyframes spinner-dots { 0% { transform: scale(1, 1); - opacity: .9; + opacity: 0.9; } 50% { - transform: scale(.4, .4); + transform: scale(0.4, 0.4); - opacity: .3; + opacity: 0.3; } 100% { transform: scale(1, 1); - opacity: .9; + opacity: 0.9; } } diff --git a/core/src/components/split-pane/split-pane.ios.vars.scss b/core/src/components/split-pane/split-pane.ios.vars.scss index 67a968d9c5..9e920e216b 100644 --- a/core/src/components/split-pane/split-pane.ios.vars.scss +++ b/core/src/components/split-pane/split-pane.ios.vars.scss @@ -1,13 +1,13 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // Split Pane // -------------------------------------------------- /// @prop - Minimum width of the split pane's side pane -$split-pane-ios-side-min-width: $split-pane-side-min-width !default; +$split-pane-ios-side-min-width: $split-pane-side-min-width !default; /// @prop - Maximum width of the split pane's side pane -$split-pane-ios-side-max-width: $split-pane-side-max-width !default; +$split-pane-ios-side-max-width: $split-pane-side-max-width !default; /// @prop - Border style of the side pane -$split-pane-ios-border: $hairlines-width solid $item-ios-border-color !default; +$split-pane-ios-border: $hairlines-width solid $item-ios-border-color !default; diff --git a/core/src/components/split-pane/split-pane.md.vars.scss b/core/src/components/split-pane/split-pane.md.vars.scss index a600f620fa..9a852bd856 100644 --- a/core/src/components/split-pane/split-pane.md.vars.scss +++ b/core/src/components/split-pane/split-pane.md.vars.scss @@ -1,13 +1,13 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Split Pane // -------------------------------------------------- /// @prop - Minimum width of the split pane's side pane -$split-pane-md-side-min-width: $split-pane-side-min-width !default; +$split-pane-md-side-min-width: $split-pane-side-min-width !default; /// @prop - Maximum width of the split pane's side pane -$split-pane-md-side-max-width: $split-pane-side-max-width !default; +$split-pane-md-side-max-width: $split-pane-side-max-width !default; /// @prop - Border style of the side pane -$split-pane-md-border: 1px solid $item-md-border-color !default; +$split-pane-md-border: 1px solid $item-md-border-color !default; diff --git a/core/src/components/split-pane/split-pane.vars.scss b/core/src/components/split-pane/split-pane.vars.scss index e7df6a8a01..76a94d6451 100644 --- a/core/src/components/split-pane/split-pane.vars.scss +++ b/core/src/components/split-pane/split-pane.vars.scss @@ -1,10 +1,10 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Split Pane // -------------------------------------------------- /// @prop - Minimum width of the split pane's side pane -$split-pane-side-min-width: 270px !default; +$split-pane-side-min-width: 270px !default; /// @prop - Maximum width of the split pane's side pane -$split-pane-side-max-width: 28% !default; +$split-pane-side-max-width: 28% !default; diff --git a/core/src/components/tab-bar/tab-bar.ios.scss b/core/src/components/tab-bar/tab-bar.ios.scss index 1993928ec3..696ff35400 100644 --- a/core/src/components/tab-bar/tab-bar.ios.scss +++ b/core/src/components/tab-bar/tab-bar.ios.scss @@ -30,6 +30,6 @@ } :host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) { - background: rgba($background-color-rgb, .6); + background: rgba($background-color-rgb, 0.6); } -} \ No newline at end of file +} diff --git a/core/src/components/tab-bar/tab-bar.ios.vars.scss b/core/src/components/tab-bar/tab-bar.ios.vars.scss index c4ba6aebcc..4e31d8ca5f 100644 --- a/core/src/components/tab-bar/tab-bar.ios.vars.scss +++ b/core/src/components/tab-bar/tab-bar.ios.vars.scss @@ -1,14 +1,17 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../tab-button/tab-button.ios.vars"; // iOS Tab Bar // -------------------------------------------------- /// @prop - Alpha of translucent tab bar background color -$tab-bar-ios-translucent-background-color-alpha: .8 !default; +$tab-bar-ios-translucent-background-color-alpha: 0.8 !default; /// @prop - Translucent tab bar background color -$tab-bar-ios-translucent-background-color: rgba($background-color-rgb, $tab-bar-ios-translucent-background-color-alpha) !default; +$tab-bar-ios-translucent-background-color: rgba( + $background-color-rgb, + $tab-bar-ios-translucent-background-color-alpha +) !default; /// @prop - Filter of the translucent tab bar background color -$tab-bar-ios-translucent-filter: saturate(210%) blur(20px) !default; \ No newline at end of file +$tab-bar-ios-translucent-filter: saturate(210%) blur(20px) !default; diff --git a/core/src/components/tab-bar/tab-bar.md.scss b/core/src/components/tab-bar/tab-bar.md.scss index 5b2346936a..6902b01a1a 100644 --- a/core/src/components/tab-bar/tab-bar.md.scss +++ b/core/src/components/tab-bar/tab-bar.md.scss @@ -1,5 +1,5 @@ @import "./tab-bar"; -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../tab-button/tab-button.md.vars"; :host { @@ -11,4 +11,4 @@ --color-selected: #{$tabbar-md-color-selected}; height: 56px; -} \ No newline at end of file +} diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.scss index 05c2472042..60b1d1b7cd 100644 --- a/core/src/components/tab-bar/tab-bar.scss +++ b/core/src/components/tab-bar/tab-bar.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; :host { /** @@ -40,12 +40,12 @@ } :host(.ion-color) ::slotted(.tab-selected) { - color: #{current-color(contrast)};; + color: #{current-color(contrast)}; } :host(.ion-color), :host(.ion-color) ::slotted(ion-tab-button) { - color: #{current-color(contrast, .7)}; + color: #{current-color(contrast, 0.7)}; } :host(.ion-color), @@ -55,7 +55,7 @@ :host(.ion-color) ::slotted(ion-tab-button.ion-focused), :host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) { - background: var(--background-focused) + background: var(--background-focused); } :host(.tab-bar-translucent) ::slotted(ion-tab-button) { diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss index 3146a3f363..b9ea2e408b 100644 --- a/core/src/components/tab-button/tab-button.ios.scss +++ b/core/src/components/tab-button/tab-button.ios.scss @@ -12,7 +12,6 @@ font-size: $tab-button-ios-font-size; } - // iOS Tab Button: Badge // -------------------------------------------------- @@ -27,7 +26,6 @@ line-height: 16px; } - // iOS Tab Button: Icon // -------------------------------------------------- @@ -41,7 +39,6 @@ vertical-align: top; } - // iOS Tab Button: Label // -------------------------------------------------- @@ -53,7 +50,6 @@ font-weight: 500; } - // iOS Tab Button Label Only // -------------------------------------------------- @@ -66,7 +62,6 @@ line-height: 1.1; } - // iOS Tab Button Layout // -------------------------------------------------- @@ -92,7 +87,6 @@ font-size: 24px; } - // iOS Tab Button: Icon Bottom Layout // -------------------------------------------------- @@ -111,7 +105,6 @@ @include margin(4px, null, null, null); } - // iOS Tab Button: Icon Start / End Layout // -------------------------------------------------- @@ -120,7 +113,6 @@ @include position(10px, null, null, calc(50% + 35px)); } - // iOS Tab Button: Icon Hide / Label Only Layout // -------------------------------------------------------------- @@ -130,7 +122,6 @@ @include position(10px, null, null, calc(50% + 30px)); } - // iOS Tab Button: Icon Only / Label Hide Layout // -------------------------------------------------------------- diff --git a/core/src/components/tab-button/tab-button.ios.vars.scss b/core/src/components/tab-button/tab-button.ios.vars.scss index 37b844d73a..321d85dc7c 100644 --- a/core/src/components/tab-button/tab-button.ios.vars.scss +++ b/core/src/components/tab-button/tab-button.ios.vars.scss @@ -1,31 +1,31 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Tabs // -------------------------------------------------- /// @prop - Padding top on the tab button -$tab-button-ios-padding-top: 0 !default; +$tab-button-ios-padding-top: 0 !default; /// @prop - Padding end on the tab button -$tab-button-ios-padding-end: 2px !default; +$tab-button-ios-padding-end: 2px !default; /// @prop - Padding bottom on the tab button -$tab-button-ios-padding-bottom: $tab-button-ios-padding-top !default; +$tab-button-ios-padding-bottom: $tab-button-ios-padding-top !default; /// @prop - Padding start on the tab button -$tab-button-ios-padding-start: $tab-button-ios-padding-end !default; +$tab-button-ios-padding-start: $tab-button-ios-padding-end !default; /// @prop - Max width of the tab button -$tab-button-ios-max-width: 240px !default; +$tab-button-ios-max-width: 240px !default; /// @prop - Text color of the inactive tab button -$tab-button-ios-text-color: $tabbar-ios-color !default; +$tab-button-ios-text-color: $tabbar-ios-color !default; /// @prop - Font size of the tab button text -$tab-button-ios-font-size: 10px !default; +$tab-button-ios-font-size: 10px !default; /// @prop - Size of the tab button icon when there is a label -$tab-button-ios-icon-size: 24px !default; +$tab-button-ios-icon-size: 24px !default; /// @prop - Size of the tab button icon when there is not a label -$tab-button-ios-icon-only-size: 30px !default; +$tab-button-ios-icon-only-size: 30px !default; diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss index e420321b4b..c863ada84f 100644 --- a/core/src/components/tab-button/tab-button.md.scss +++ b/core/src/components/tab-button/tab-button.md.scss @@ -18,22 +18,30 @@ letter-spacing: $tab-button-md-letter-spacing; } - // Material Design Tab Button: Label // -------------------------------------------------------------- ::slotted(ion-label) { - @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 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 + ); text-transform: $tab-button-md-text-capitalization; } - // Material Design Tab Button: Icon // -------------------------------------------------------------- ::slotted(ion-icon) { - @include margin($tab-button-md-icon-margin-top, $tab-button-md-icon-margin-end, $tab-button-md-icon-margin-bottom, $tab-button-md-icon-margin-start); + @include margin( + $tab-button-md-icon-margin-top, + $tab-button-md-icon-margin-end, + $tab-button-md-icon-margin-bottom, + $tab-button-md-icon-margin-start + ); @include transform-origin(center, center); font-size: $tab-button-md-icon-size; @@ -44,7 +52,12 @@ ::slotted(ion-badge) { @include border-radius($tab-button-md-badge-border-radius); - @include padding($tab-button-md-badge-padding-top, $tab-button-md-badge-padding-end, $tab-button-md-badge-padding-bottom, $tab-button-md-badge-padding-start); + @include padding( + $tab-button-md-badge-padding-top, + $tab-button-md-badge-padding-end, + $tab-button-md-badge-padding-bottom, + $tab-button-md-badge-padding-start + ); @include position(8px, null, null, calc(50% + 6px)); min-width: $tab-button-md-badge-min-width; @@ -62,7 +75,6 @@ height: $tab-button-md-badge-size-empty; } - // Material Design Tab Button: Icon Top Layout // -------------------------------------------------------------- @@ -76,7 +88,6 @@ @include margin(0, null, 6px, null); } - // Material Design Tab Button: Icon Bottom Layout // -------------------------------------------------------------- @@ -95,7 +106,6 @@ @include margin(6px, null, 0, null); } - // Material Design Tab Button: Icon Start / Icon End Layout // -------------------------------------------------------------- @@ -115,7 +125,6 @@ @include margin(null, null, null, 6px); } - // Material Design Tab Button: Icon Hide / Label Only Layout // -------------------------------------------------------------- @@ -131,7 +140,6 @@ @include margin(0, null, 0, null); } - // Material Design Tab Button: Icon Only / Label Hide Layout // -------------------------------------------------------------- @@ -147,4 +155,4 @@ @include margin(0, null, 0, null); font-size: 24px; -} \ No newline at end of file +} diff --git a/core/src/components/tab-button/tab-button.md.vars.scss b/core/src/components/tab-button/tab-button.md.vars.scss index ea005b4509..35d6c1ee72 100644 --- a/core/src/components/tab-button/tab-button.md.vars.scss +++ b/core/src/components/tab-button/tab-button.md.vars.scss @@ -1,82 +1,82 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Tabs // -------------------------------------------------- /// @prop - Padding top on the tab button -$tab-button-md-padding-top: 0 !default; +$tab-button-md-padding-top: 0 !default; /// @prop - Padding end on the tab button -$tab-button-md-padding-end: 12px !default; +$tab-button-md-padding-end: 12px !default; /// @prop - Padding bottom on the tab button -$tab-button-md-padding-bottom: 0 !default; +$tab-button-md-padding-bottom: 0 !default; /// @prop - Padding start on the tab button -$tab-button-md-padding-start: 12px !default; +$tab-button-md-padding-start: 12px !default; /// @prop - Font size of the inactive tab button text -$tab-button-md-font-size: 12px !default; +$tab-button-md-font-size: 12px !default; /// @prop - Letter spacing of the tab button -$tab-button-md-letter-spacing: .03em !default; +$tab-button-md-letter-spacing: 0.03em !default; /// @prop - Font weight of the tab button text -$tab-button-md-font-weight: normal !default; +$tab-button-md-font-weight: normal !default; /// @prop - Text color of the inactive tab button -$tab-button-md-text-color: $tabbar-md-color !default; +$tab-button-md-text-color: $tabbar-md-color !default; /// @prop - Margin top on the tab button icon -$tab-button-md-icon-margin-top: 16px !default; +$tab-button-md-icon-margin-top: 16px !default; /// @prop - Margin end on the tab button icon -$tab-button-md-icon-margin-end: 0 !default; +$tab-button-md-icon-margin-end: 0 !default; /// @prop - Margin bottom on the tab button icon -$tab-button-md-icon-margin-bottom: $tab-button-md-icon-margin-top !default; +$tab-button-md-icon-margin-bottom: $tab-button-md-icon-margin-top !default; /// @prop - Margin start on the tab button icon -$tab-button-md-icon-margin-start: $tab-button-md-icon-margin-end !default; +$tab-button-md-icon-margin-start: $tab-button-md-icon-margin-end !default; /// @prop - Margin top on the tab button text -$tab-button-md-text-margin-top: 2px !default; +$tab-button-md-text-margin-top: 2px !default; /// @prop - Margin end on the tab button text -$tab-button-md-text-margin-end: 0 !default; +$tab-button-md-text-margin-end: 0 !default; /// @prop - Margin bottom on the tab button text -$tab-button-md-text-margin-bottom: $tab-button-md-text-margin-top !default; +$tab-button-md-text-margin-bottom: $tab-button-md-text-margin-top !default; /// @prop - Margin start on the tab button text -$tab-button-md-text-margin-start: $tab-button-md-text-margin-end !default; +$tab-button-md-text-margin-start: $tab-button-md-text-margin-end !default; /// @prop - Capitalization of the tab button text -$tab-button-md-text-capitalization: none !default; +$tab-button-md-text-capitalization: none !default; /// @prop - Size of the tab button icon -$tab-button-md-icon-size: 22px !default; +$tab-button-md-icon-size: 22px !default; /// @prop - Border radius on the tab button badge -$tab-button-md-badge-border-radius: 8px !default; +$tab-button-md-badge-border-radius: 8px !default; /// @prop - Padding top on the tab button badge -$tab-button-md-badge-padding-top: 3px !default; +$tab-button-md-badge-padding-top: 3px !default; /// @prop - Padding end on the tab button badge -$tab-button-md-badge-padding-end: 2px !default; +$tab-button-md-badge-padding-end: 2px !default; /// @prop - Padding bottom on the tab button badge -$tab-button-md-badge-padding-bottom: 2px !default; +$tab-button-md-badge-padding-bottom: 2px !default; /// @prop - Padding start on the tab button badge -$tab-button-md-badge-padding-start: 2px !default; +$tab-button-md-badge-padding-start: 2px !default; /// @prop - Minimum width of the tab button badge -$tab-button-md-badge-min-width: 12px !default; +$tab-button-md-badge-min-width: 12px !default; /// @prop - Font size of the tab button badge -$tab-button-md-badge-font-size: 8px !default; +$tab-button-md-badge-font-size: 8px !default; /// @prop - Size of the empty tab button badge -$tab-button-md-badge-size-empty: 8px !default; +$tab-button-md-badge-size-empty: 8px !default; diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss index 7bfd405dd3..fd2b8cd34f 100644 --- a/core/src/components/tab-button/tab-button.scss +++ b/core/src/components/tab-button/tab-button.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; :host { /** @@ -116,10 +116,9 @@ :host(.tab-disabled) { pointer-events: none; - opacity: .4; + opacity: 0.4; } - // Tab Button: Label / Icon // -------------------------------------------------- @@ -149,12 +148,10 @@ height: 1em; } - :host(.tab-has-label-only) ::slotted(ion-label) { white-space: normal; } - // Tab Button: Badge // -------------------------------------------------- @@ -166,7 +163,6 @@ z-index: 1; } - // Tab Button: Layout // -------------------------------------------------- diff --git a/core/src/components/tabs/tabs.scss b/core/src/components/tabs/tabs.scss index 969f283f51..741f2c67c4 100644 --- a/core/src/components/tabs/tabs.scss +++ b/core/src/components/tabs/tabs.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; :host { @include position(0, 0, 0, 0); diff --git a/core/src/components/text/text.scss b/core/src/components/text/text.scss index 1d2d1413af..d86de15d20 100644 --- a/core/src/components/text/text.scss +++ b/core/src/components/text/text.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Text // -------------------------------------------------- diff --git a/core/src/components/textarea/textarea.ios.vars.scss b/core/src/components/textarea/textarea.ios.vars.scss index c6f807af1e..a1ab07d6a1 100644 --- a/core/src/components/textarea/textarea.ios.vars.scss +++ b/core/src/components/textarea/textarea.ios.vars.scss @@ -1,23 +1,23 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS Textarea // -------------------------------------------------- /// @prop - Font size of the textarea -$textarea-ios-font-size: inherit !default; +$textarea-ios-font-size: inherit !default; /// @prop - Margin top of the textarea -$textarea-ios-padding-top: $item-ios-padding-top !default; +$textarea-ios-padding-top: $item-ios-padding-top !default; /// @prop - Margin end of the textarea -$textarea-ios-padding-end: ($item-ios-padding-end * 0.5) !default; +$textarea-ios-padding-end: ($item-ios-padding-end * 0.5) !default; /// @prop - Margin bottom of the textarea -$textarea-ios-padding-bottom: $item-ios-padding-bottom !default; +$textarea-ios-padding-bottom: $item-ios-padding-bottom !default; /// @prop - Margin start of the textarea -$textarea-ios-padding-start: 0 !default; +$textarea-ios-padding-start: 0 !default; /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled textarea $textarea-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/textarea/textarea.md.vars.scss b/core/src/components/textarea/textarea.md.vars.scss index 40a864039c..0f8e092dd9 100644 --- a/core/src/components/textarea/textarea.md.vars.scss +++ b/core/src/components/textarea/textarea.md.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.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 3a54391cf4..ee42da9b61 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -669,7 +669,8 @@ // Start/End Slots // ---------------------------------------------------------------- -.start-slot-wrapper, .end-slot-wrapper { +.start-slot-wrapper, +.end-slot-wrapper { @include padding(var(--padding-top), 0, var(--padding-bottom), 0); display: flex; diff --git a/core/src/components/textarea/textarea.vars.scss b/core/src/components/textarea/textarea.vars.scss index 1b20bb6ecd..97d643997e 100644 --- a/core/src/components/textarea/textarea.vars.scss +++ b/core/src/components/textarea/textarea.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; /// @prop - The bottom padding of the textarea element. /// The value 8px is to add additional spacing for auto grow and scrollable textareas. diff --git a/core/src/components/thumbnail/thumbnail.scss b/core/src/components/thumbnail/thumbnail.scss index 8af268d95d..002d1c0236 100644 --- a/core/src/components/thumbnail/thumbnail.scss +++ b/core/src/components/thumbnail/thumbnail.scss @@ -1,5 +1,4 @@ -@import "../../themes/ionic.globals"; - +@import "../../themes/native/native.globals"; // Thumbnail // -------------------------------------------------- diff --git a/core/src/components/title/title.ios.scss b/core/src/components/title/title.ios.scss index f83ece1874..ceef38339f 100644 --- a/core/src/components/title/title.ios.scss +++ b/core/src/components/title/title.ios.scss @@ -22,7 +22,6 @@ pointer-events: none; } - // iOS Title: Small // -------------------------------------------------- @@ -35,7 +34,6 @@ font-weight: normal; } - // iOS Title: Large // -------------------------------------------------- diff --git a/core/src/components/title/title.md.scss b/core/src/components/title/title.md.scss index 8016db78e8..24458e27c8 100644 --- a/core/src/components/title/title.md.scss +++ b/core/src/components/title/title.md.scss @@ -9,10 +9,9 @@ font-size: dynamic-font(20px); font-weight: 500; - letter-spacing: .0125em; + letter-spacing: 0.0125em; } - // Material Design Title: Small // -------------------------------------------------- @@ -24,4 +23,3 @@ font-weight: normal; } - diff --git a/core/src/components/title/title.scss b/core/src/components/title/title.scss index 48680a97d3..e084b20f31 100644 --- a/core/src/components/title/title.scss +++ b/core/src/components/title/title.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Title // -------------------------------------------------- @@ -36,7 +36,6 @@ pointer-events: auto; } - // Small Title // -------------------------------------------------- diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss index 2c56f21811..e4567c4885 100644 --- a/core/src/components/toast/toast.ios.scss +++ b/core/src/components/toast/toast.ios.scss @@ -38,11 +38,16 @@ } .toast-wrapper.toast-middle { - opacity: .01; + opacity: 0.01; } .toast-content { - @include padding($toast-ios-content-padding-top, $toast-ios-content-padding-end, $toast-ios-content-padding-bottom, $toast-ios-content-padding-start); + @include padding( + $toast-ios-content-padding-top, + $toast-ios-content-padding-end, + $toast-ios-content-padding-bottom, + $toast-ios-content-padding-start + ); } .toast-header { @@ -55,7 +60,12 @@ // -------------------------------------------------- .toast-button { - @include padding($toast-ios-button-padding-top, $toast-ios-button-padding-end, $toast-ios-button-padding-bottom, $toast-ios-button-padding-start); + @include padding( + $toast-ios-button-padding-top, + $toast-ios-button-padding-end, + $toast-ios-button-padding-bottom, + $toast-ios-button-padding-start + ); min-height: $toast-ios-button-min-height; @@ -76,12 +86,11 @@ opacity: $toast-ios-button-opacity-activated; } - // iOS Toast Button: Hover // -------------------------------------------------- @media (any-hover: hover) { .toast-button:hover { - opacity: .6; + opacity: 0.6; } } diff --git a/core/src/components/toast/toast.ios.vars.scss b/core/src/components/toast/toast.ios.vars.scss index 60aa1c4a4c..73f8f15490 100644 --- a/core/src/components/toast/toast.ios.vars.scss +++ b/core/src/components/toast/toast.ios.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Toast // -------------------------------------------------- diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss index 968afe913a..c42165086f 100644 --- a/core/src/components/toast/toast.md.scss +++ b/core/src/components/toast/toast.md.scss @@ -23,13 +23,18 @@ display: block; position: absolute; - opacity: .01; + opacity: 0.01; z-index: $z-index-overlay-wrapper; } .toast-content { - @include padding($toast-md-content-padding-top, $toast-md-content-padding-end, $toast-md-content-padding-bottom, $toast-md-content-padding-start); + @include padding( + $toast-md-content-padding-top, + $toast-md-content-padding-end, + $toast-md-content-padding-bottom, + $toast-md-content-padding-start + ); } .toast-header { @@ -44,11 +49,9 @@ line-height: $toast-md-message-line-height; } - // Material Design Toast Button // -------------------------------------------------- - .toast-layout-baseline .toast-button-group-start { @include margin(null, null, null, 8px); } @@ -66,7 +69,12 @@ } .toast-button { - @include padding($toast-md-button-padding-top, $toast-md-button-padding-end, $toast-md-button-padding-bottom, $toast-md-button-padding-start); + @include padding( + $toast-md-button-padding-top, + $toast-md-button-padding-end, + $toast-md-button-padding-bottom, + $toast-md-button-padding-start + ); // necessary for ripple to work properly position: relative; @@ -96,7 +104,6 @@ height: $toast-md-button-icon-only-height; } - // Material Design Toast Button: Hover // -------------------------------------------------- diff --git a/core/src/components/toast/toast.md.vars.scss b/core/src/components/toast/toast.md.vars.scss index 158815aec6..47313b1136 100644 --- a/core/src/components/toast/toast.md.vars.scss +++ b/core/src/components/toast/toast.md.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Toast // -------------------------------------------------- diff --git a/core/src/components/toast/toast.vars.scss b/core/src/components/toast/toast.vars.scss index 98d53a85d3..52c4721122 100644 --- a/core/src/components/toast/toast.vars.scss +++ b/core/src/components/toast/toast.vars.scss @@ -1,7 +1,7 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Toast // -------------------------------------------------- /// @prop - Max width of the toast -$toast-max-width: 700px !default; +$toast-max-width: 700px !default; diff --git a/core/src/components/toggle/toggle.ios.vars.scss b/core/src/components/toggle/toggle.ios.vars.scss index e95847dd7b..ba35a18aa4 100644 --- a/core/src/components/toggle/toggle.ios.vars.scss +++ b/core/src/components/toggle/toggle.ios.vars.scss @@ -1,50 +1,51 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; @import "../item/item.ios.vars"; // iOS Toggle // -------------------------------------------------- /// @prop - Width of the toggle -$toggle-ios-width: 51px !default; +$toggle-ios-width: 51px !default; /// @prop - Height of the toggle -$toggle-ios-height: 31px !default; +$toggle-ios-height: 31px !default; /// @prop - Border width of the toggle -$toggle-ios-border-width: 2px !default; +$toggle-ios-border-width: 2px !default; /// @prop - Border radius of the toggle -$toggle-ios-border-radius: $toggle-ios-height * 0.5 !default; +$toggle-ios-border-radius: $toggle-ios-height * 0.5 !default; /// @prop - Background color of the unchecked toggle -$toggle-ios-background-color-off: rgba($text-color-rgb, .088) !default; +$toggle-ios-background-color-off: rgba($text-color-rgb, 0.088) !default; /// @prop - Width of the toggle handle -$toggle-ios-handle-width: calc(#{$toggle-ios-height} - (#{$toggle-ios-border-width} * 2)) !default; +$toggle-ios-handle-width: calc(#{$toggle-ios-height} - (#{$toggle-ios-border-width} * 2)) !default; /// @prop - Height of the toggle handle -$toggle-ios-handle-height: $toggle-ios-handle-width !default; +$toggle-ios-handle-height: $toggle-ios-handle-width !default; /// @prop - Max height of the toggle handle -$toggle-ios-handle-max-height: calc(100% - (var(--handle-spacing) * 2)) !default; +$toggle-ios-handle-max-height: calc(100% - (var(--handle-spacing) * 2)) !default; /// @prop - Border radius of the toggle handle -$toggle-ios-handle-border-radius: $toggle-ios-width * 0.5 !default; +$toggle-ios-handle-border-radius: $toggle-ios-width * 0.5 !default; /// @prop - Box shadow of the toggle handle -$toggle-ios-handle-box-shadow: 0 3px 4px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .06) !default; +$toggle-ios-handle-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.06) !default; /// @prop - Background color of the toggle handle -$toggle-ios-handle-background-color: #ffffff !default; +$toggle-ios-handle-background-color: #ffffff !default; /// @prop - Transition duration of the toggle icon -$toggle-ios-transition-duration: 300ms !default; +$toggle-ios-transition-duration: 300ms !default; /// @prop - Transition of the toggle icon -$toggle-ios-transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms !default; +$toggle-ios-transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, + left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms !default; /// @prop - Opacity of the disabled toggle -$toggle-ios-disabled-opacity: .3 !default; +$toggle-ios-disabled-opacity: 0.3 !default; /// @prop - The text color of the on/off labels when the toggle is checked $toggle-ios-on-off-label-checked-color: #fff !default; diff --git a/core/src/components/toggle/toggle.md.vars.scss b/core/src/components/toggle/toggle.md.vars.scss index 7377082f00..67a7dbd073 100644 --- a/core/src/components/toggle/toggle.md.vars.scss +++ b/core/src/components/toggle/toggle.md.vars.scss @@ -1,47 +1,49 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; @import "../item/item.md.vars"; // Material Design Toggle // -------------------------------------------------- /// @prop - Width of the toggle track -$toggle-md-track-width: 36px !default; +$toggle-md-track-width: 36px !default; /// @prop - Height of the toggle track -$toggle-md-track-height: 14px !default; +$toggle-md-track-height: 14px !default; /// @prop - Background color of the toggle track -$toggle-md-track-background-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39) !default; +$toggle-md-track-background-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39) !default; /// @prop - Background color alpha of the checked toggle track -$toggle-md-track-background-color-alpha-on: .5 !default; +$toggle-md-track-background-color-alpha-on: 0.5 !default; /// @prop - Width of the toggle handle -$toggle-md-handle-width: 20px !default; +$toggle-md-handle-width: 20px !default; /// @prop - Height of the toggle handle -$toggle-md-handle-height: 20px !default; +$toggle-md-handle-height: 20px !default; /// @prop - Max height of the toggle handle -$toggle-md-handle-max-height: calc(100% + 6px) !default; +$toggle-md-handle-max-height: calc(100% + 6px) !default; /// @prop - Border radius of the toggle handle -$toggle-md-handle-border-radius: 50% !default; +$toggle-md-handle-border-radius: 50% !default; /// @prop - Box shadow of the toggle handle -$toggle-md-handle-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; +$toggle-md-handle-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default; /// @prop - Background color of the toggle handle -$toggle-md-handle-background-color-off: #ffffff !default; +$toggle-md-handle-background-color-off: #ffffff !default; /// @prop - Transition duration of the toggle icon -$toggle-md-transition-duration: 160ms !default; +$toggle-md-transition-duration: 160ms !default; /// @prop - Transition of the toggle icon -$toggle-md-transition: transform $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1), background-color $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1) !default; +$toggle-md-transition: transform $toggle-md-transition-duration cubic-bezier(0.4, 0, 0.2, 1), + background-color $toggle-md-transition-duration cubic-bezier(0.4, 0, 0.2, 1) !default; /// @prop - Opacity of the disabled toggle -$toggle-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$toggle-md-disabled-opacity: $form-control-md-disabled-opacity !default; /// @prop - The text color of the on/off labels $toggle-md-on-off-label-color: #000 !default; diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss index 89ce182bb5..fcaaa5e638 100644 --- a/core/src/components/toggle/toggle.scss +++ b/core/src/components/toggle/toggle.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; @import "./toggle.vars.scss"; // Toggle @@ -142,7 +142,6 @@ input { // Toggle Align // -------------------------------------------------- - :host(.toggle-alignment-start) .toggle-wrapper { align-items: start; } @@ -335,7 +334,7 @@ input { :host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper { // transform by 100% - handle width - transform: translate3d(calc(100% - var(--handle-width)), 0, 0) + transform: translate3d(calc(100% - var(--handle-width)), 0, 0); } :host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper { diff --git a/core/src/components/toggle/toggle.vars.scss b/core/src/components/toggle/toggle.vars.scss index 629eb5048b..488baddc5e 100644 --- a/core/src/components/toggle/toggle.vars.scss +++ b/core/src/components/toggle/toggle.vars.scss @@ -2,4 +2,4 @@ $toggle-item-label-margin-top: 10px !default; /// @prop - Bottom margin of toggle's label when in an item -$toggle-item-label-margin-bottom: 10px !default; \ No newline at end of file +$toggle-item-label-margin-bottom: 10px !default; diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss index 7f3a1ed267..765cc35a32 100644 --- a/core/src/components/toolbar/toolbar.ios.scss +++ b/core/src/components/toolbar/toolbar.ios.scss @@ -25,7 +25,6 @@ min-width: 0; } - // Toolbar: Segment // -------------------------------------------------- @@ -75,7 +74,6 @@ text-align: end; } - // Toolbar: Large Title // -------------------------------------------------- diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss index 0648a2efe1..1108fd4476 100644 --- a/core/src/components/toolbar/toolbar.ios.vars.scss +++ b/core/src/components/toolbar/toolbar.ios.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.ios"; +@import "../../themes/native/native.globals.ios"; // iOS Toolbar // -------------------------------------------------- @@ -17,24 +17,24 @@ $toolbar-order-ios: ( ); /// @prop - Minimum height of the toolbar -$toolbar-ios-min-height: 44px !default; +$toolbar-ios-min-height: 44px !default; /// @prop - Padding top of the toolbar -$toolbar-ios-padding-top: 3px !default; +$toolbar-ios-padding-top: 3px !default; /// @prop - Padding end of the toolbar -$toolbar-ios-padding-end: 4px !default; +$toolbar-ios-padding-end: 4px !default; /// @prop - Padding bottom of the toolbar -$toolbar-ios-padding-bottom: $toolbar-ios-padding-top !default; +$toolbar-ios-padding-bottom: $toolbar-ios-padding-top !default; /// @prop - Padding start of the toolbar -$toolbar-ios-padding-start: $toolbar-ios-padding-end !default; +$toolbar-ios-padding-start: $toolbar-ios-padding-end !default; /// @prop - Font size of the toolbar button /// The minimum and maximum font sizes for a toolbar button are /// 100% and 135%, respectively, of their default font size -$toolbar-ios-button-font-size: dynamic-font-clamp(1, 17px, 1.24) !default; +$toolbar-ios-button-font-size: dynamic-font-clamp(1, 17px, 1.24) !default; /// @prop - Border radius of the toolbar button -$toolbar-ios-button-border-radius: 4px !default; +$toolbar-ios-button-border-radius: 4px !default; diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss index 9caf76c144..a3cbbbea2b 100644 --- a/core/src/components/toolbar/toolbar.md.scss +++ b/core/src/components/toolbar/toolbar.md.scss @@ -15,7 +15,6 @@ --min-height: 56px; } - // Toolbar: Content // -------------------------------------------------- @@ -44,7 +43,6 @@ @include margin-horizontal(null, 4px); } - // Material Design Toolbar Slot Placement // -------------------------------------------------- diff --git a/core/src/components/toolbar/toolbar.md.vars.scss b/core/src/components/toolbar/toolbar.md.vars.scss index dc713a3424..24c6252129 100644 --- a/core/src/components/toolbar/toolbar.md.vars.scss +++ b/core/src/components/toolbar/toolbar.md.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals.md"; +@import "../../themes/native/native.globals.md"; // Material Design Toolbar // -------------------------------------------------- @@ -16,4 +16,4 @@ $toolbar-order-md: ( ); /// @prop - Border radius of the toolbar button -$toolbar-md-button-border-radius: 2px !default; +$toolbar-md-button-border-radius: 2px !default; diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss index 92cf570651..8de5e4ec42 100644 --- a/core/src/components/toolbar/toolbar.scss +++ b/core/src/components/toolbar/toolbar.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/native/native.globals"; // Toolbar // -------------------------------------------------- @@ -101,7 +101,6 @@ pointer-events: none; } - // Toolbar: Progress Bar // -------------------------------------------------- diff --git a/core/src/css/core.scss b/core/src/css/core.scss index ae76ad3ad9..b03ab0f7a3 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -1,5 +1,5 @@ @use "sass:map"; -@import "../themes/ionic.globals"; +@import "../themes/native/native.globals"; @import "../components/menu/menu.ios.vars"; @import "../components/menu/menu.md.vars"; @@ -161,7 +161,6 @@ html.ios ion-modal.modal-card .ion-page { } } - // Page Container Structure // -------------------------------------------------- @@ -224,11 +223,11 @@ ion-toast-controller, display: block; } - // Ionic Safe Margins // -------------------------------------------------- -html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa { +html.plt-ios.plt-hybrid, +html.plt-ios.plt-pwa { --ion-statusbar-padding: 20px; } @@ -247,7 +246,6 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa { } } - // Global Card Styles // -------------------------------------------------- @@ -256,7 +254,6 @@ ion-card-header.ion-color .ion-inherit-color { color: inherit; } - // Menu Styles // -------------------------------------------------- @@ -304,7 +301,7 @@ ion-card-header.ion-color .ion-inherit-color { box-shadow: $menu-ios-box-shadow-reveal; } -[dir=rtl].ios .menu-content-reveal { +[dir="rtl"].ios .menu-content-reveal { box-shadow: $menu-ios-box-shadow-reveal-rtl; } diff --git a/core/src/css/display.scss b/core/src/css/display.scss index 30b1db4095..8f4ed43eae 100644 --- a/core/src/css/display.scss +++ b/core/src/css/display.scss @@ -1,5 +1,5 @@ -@import "../themes/ionic.globals"; -@import "../themes/ionic.mixins"; +@import "../themes/native/native.globals"; +@import "../themes/mixins"; // Display // -------------------------------------------------- diff --git a/core/src/css/flex-utils.scss b/core/src/css/flex-utils.scss index 41e9f3325c..051ef2f1a1 100644 --- a/core/src/css/flex-utils.scss +++ b/core/src/css/flex-utils.scss @@ -30,7 +30,6 @@ align-self: auto !important; } - // Flex Wrap // -------------------------------------------------- @@ -46,7 +45,6 @@ flex-wrap: wrap-reverse !important; } - // Justify Content // -------------------------------------------------- @@ -74,7 +72,6 @@ justify-content: space-evenly !important; } - // Align Items // -------------------------------------------------- diff --git a/core/src/css/float-elements.scss b/core/src/css/float-elements.scss index 0e543e3404..da4d6cbb4f 100644 --- a/core/src/css/float-elements.scss +++ b/core/src/css/float-elements.scss @@ -1,5 +1,5 @@ -@import "../themes/ionic.globals"; -@import "../themes/ionic.mixins"; +@import "../themes/native/native.globals"; +@import "../themes/mixins"; // Float Elements // -------------------------------------------------- diff --git a/core/src/css/ionic-swiper.scss b/core/src/css/ionic-swiper.scss index f5f12f9a35..f87583dc41 100644 --- a/core/src/css/ionic-swiper.scss +++ b/core/src/css/ionic-swiper.scss @@ -1,19 +1,18 @@ -@import "../themes/ionic.globals.ios.scss"; +@import "../themes/native/native.globals.ios.scss"; // Slides // -------------------------------------------------- .swiper { - // These values are the same for iOS and MD // We just do not add a .md or .ios class beforehand // so the styles are easier to override by the user. --bullet-background: $text-color-step-800; --bullet-background-active: ion-color(primary, base); - --progress-bar-background: rgba($text-color-rgb, .25); + --progress-bar-background: rgba($text-color-rgb, 0.25); --progress-bar-background-active: ion-color(primary, shade); - --scroll-bar-background: rgba($text-color-rgb, .1); - --scroll-bar-background-active: rgba($text-color-rgb, .5); + --scroll-bar-background: rgba($text-color-rgb, 0.1); + --scroll-bar-background-active: rgba($text-color-rgb, 0.5); /** * @prop --bullet-background: Background of the pagination bullets * @prop --bullet-background-active: Background of the active pagination bullet @@ -40,7 +39,6 @@ background: var(--bullet-background-active); } - // Pagination Progress Bar // -------------------------------------------------- @@ -75,7 +73,6 @@ } .swiper .swiper-slide { - // Center slide text vertically display: flex; position: relative; diff --git a/core/src/css/ionic/bundle.ionic.scss b/core/src/css/ionic/bundle.ionic.scss new file mode 100644 index 0000000000..581dd1971c --- /dev/null +++ b/core/src/css/ionic/bundle.ionic.scss @@ -0,0 +1,8 @@ +// Core CSS, always required +@import "./core.ionic"; + +// Global CSS: blocks scrolling, sets box-sizing +@import "./global.bundle.ionic"; + +// CSS Utils +@import "./utils.bundle.ionic"; diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss new file mode 100644 index 0000000000..b6011b4cca --- /dev/null +++ b/core/src/css/ionic/core.ionic.scss @@ -0,0 +1,346 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; + +// Ionic Font Family +// -------------------------------------------------- + +:root { + --ionic-global-background-color: #{globals.$ionic-color-neutral-10}; + --ionic-global-text-color: #{globals.$ionic-color-neutral-900}; +} + +html { + --ionic-dynamic-font: -apple-system-body; + font-family: #{globals.$ionic-font-family}; +} + +body { + background: var(--ionic-global-background-color); + color: var(--ionic-global-text-color); +} + +body.backdrop-no-scroll { + overflow: hidden; +} + +// Modal - Card Style +// -------------------------------------------------- +/** + * Card style modal needs additional padding on the + * top of the header. We accomplish this by targeting + * the first toolbar in the header. + * Footer also needs this. We do not adjust the bottom + * padding though because of the safe area. + */ +html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type, +html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type, +html.ios ion-modal ion-footer ion-toolbar:first-of-type { + padding-top: globals.$ionic-space-xxs; +} + +/** +* Card style modal needs additional padding on the +* bottom of the header. We accomplish this by targeting +* the last toolbar in the header. +*/ +html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type, +html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type { + padding-bottom: globals.$ionic-space-xxs; +} + +/** +* Add padding on the left and right +* of toolbars while accounting for +* safe area values when in landscape. +*/ +html.ios ion-modal ion-toolbar { + padding-right: calc(var(--ion-safe-area-right) + globals.$ionic-space-xs); + padding-left: calc(var(--ion-safe-area-left) + globals.$ionic-space-xs); +} + +/** + * Card style modal on iPadOS + * should only have backdrop on first instance. + */ +@media screen and (min-width: 768px) { + html.ios ion-modal.modal-card:first-of-type { + --backdrop-opacity: 0.18; + } +} + +/** + * Subsequent modals should not have a backdrop/box shadow + * as it will cause the screen to appear to get progressively + * darker. With Ionic 6, declarative modals made it + * possible to have multiple non-presented modals in the DOM, + * so we could no longer rely on ion-modal:first-of-type. + * Here we disable the opacity/box-shadow for every modal + * that comes after the first presented modal. + * + * Note: ion-modal:not(.overlay-hidden):first-of-type + * does not match the first modal to not have + * the .overlay-hidden class, it will match the + * first modal in general only if it does not + * have the .overlay-hidden class. + * The :nth-child() pseudo-class has support + * for selectors which would help us here. At the + * time of writing it does not have great cross browser + * support. + * + * Note 2: This should only apply to non-card and + * non-sheet modals. Card and sheet modals have their + * own criteria for displaying backdrops/box shadows. + * + * Do not use :not(.overlay-hidden) in place of + * .show-modal because that triggers a memory + * leak in Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1418768 + */ +ion-modal.modal-default.show-modal ~ ion-modal.modal-default { + --backdrop-opacity: 0; + --box-shadow: none; +} + +/** + * This works around a bug in WebKit where the + * content will overflow outside of the bottom border + * radius when re-painting. As long as a single + * border radius value is set on .ion-page, this + * issue does not happen. We set the top left radius + * here because the top left corner will always have a + * radius no matter the platform. + * This behavior only applies to card modals. + */ +html.ios ion-modal.modal-card .ion-page { + border-top-left-radius: var(--border-radius); +} + +// Page Container Structure +// -------------------------------------------------- + +.ion-page { + @include globals.position(0, 0, 0, 0); + + display: flex; + position: absolute; + + flex-direction: column; + justify-content: space-between; + + contain: layout size style; + z-index: 0; +} + +/** + * When making custom dialogs, using + * ion-content is not required. As a result, + * some developers may wish to have dialogs + * that are automatically sized by the browser. + * These changes allow certain dimension values + * such as fit-content to work correctly. + */ +ion-modal > .ion-page { + position: relative; + + height: 100%; + + contain: layout style; +} + +.split-pane-visible > .ion-page.split-pane-main { + position: relative; +} + +ion-route, +ion-route-redirect, +ion-router, +ion-select-option, +ion-nav-controller, +ion-menu-controller, +ion-action-sheet-controller, +ion-alert-controller, +ion-loading-controller, +ion-modal-controller, +ion-picker-controller, +ion-popover-controller, +ion-toast-controller, +.ion-page-hidden { + /* stylelint-disable-next-line declaration-no-important */ + display: none !important; +} + +.ion-page-invisible { + opacity: 0; +} + +.can-go-back > ion-header ion-back-button { + display: block; +} + +// Ionic Safe Margins +// -------------------------------------------------- + +html.plt-ios.plt-hybrid, +html.plt-ios.plt-pwa { + --ion-statusbar-padding: globals.$ionic-space-m; +} + +@supports (padding-top: 20px) { + html { + --ion-safe-area-top: var(--ion-statusbar-padding); + } +} + +@supports (padding-top: env(safe-area-inset-top)) { + html { + --ion-safe-area-top: env(safe-area-inset-top); + --ion-safe-area-bottom: env(safe-area-inset-bottom); + --ion-safe-area-left: env(safe-area-inset-left); + --ion-safe-area-right: env(safe-area-inset-right); + } +} + +// Global Card Styles +// -------------------------------------------------- + +ion-card.ion-color .ion-inherit-color, +ion-card-header.ion-color .ion-inherit-color { + color: inherit; +} + +// Menu Styles +// -------------------------------------------------- + +.menu-content { + transform: translate3d(0, 0, 0); +} + +.menu-content-open { + cursor: pointer; + touch-action: manipulation; + + /** + * The containing element itself should be clickable but + * everything inside of it should not clickable when menu is open + * + * Setting pointer-events after scrolling has already started + * will not cancel scrolling which is why we also set + * overflow-y below. + */ + pointer-events: none; + + /** + * This accounts for scenarios where the main content itself + * is scrollable. + */ + overflow-y: hidden; +} + +/** + * Setting overflow cancels any in-progress scrolling + * when the menu opens. This prevents users from accidentally + * scrolling the main content while also dragging the menu open. + * The code below accounts for both ion-content and then custom + * scroll containers within ion-content (such as virtual scroll) + */ +.menu-content-open ion-content { + --overflow: hidden; +} + +.menu-content-open .ion-content-scroll-host { + overflow: hidden; +} + +.menu-content-reveal { + box-shadow: #{globals.$ionic-elevation-1}; +} + +.menu-content-push { + box-shadow: #{globals.$ionic-elevation-1}; +} + +// Accordion Styles +ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type { + border-top-left-radius: globals.$ionic-border-radius-rounded-medium; + border-top-right-radius: globals.$ionic-border-radius-rounded-medium; +} +ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type { + border-bottom-left-radius: globals.$ionic-border-radius-rounded-medium; + border-bottom-right-radius: globals.$ionic-border-radius-rounded-medium; +} +ion-accordion-group > ion-accordion:last-of-type ion-item[slot="header"] { + --border-width: 0; +} + +ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon { + transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1); +} + +@media (prefers-reduced-motion: reduce) { + ion-accordion .ion-accordion-toggle-icon { + /* stylelint-disable declaration-no-important */ + transition: none !important; + } +} +/** + * The > [slot="header"] selector ensures that we do + * not modify toggle icons for any nested accordions. The state + * of one accordion should not affect any accordions inside + * of a nested accordion group. + */ +ion-accordion.accordion-expanding > [slot="header"] .ion-accordion-toggle-icon, +ion-accordion.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon { + transform: rotate(180deg); +} + +ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot="header"] { + --border-width: 0; + --inner-border-width: 0; +} + +ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type, +ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type { + margin-top: 0; +} + +// Safari/iOS 15 changes the appearance of input[type="date"]. +// For backwards compatibility from Ionic 5/Safari 14 designs, +// we override the appearance only when using within an ion-input. +ion-input input::-webkit-date-and-time-value { + text-align: start; +} + +/** + * The .ion-datetime-button-overlay class contains + * styles that allow any modal/popover to be + * sized according to the dimensions of the datetime + * when used with ion-datetime-button. + */ +.ion-datetime-button-overlay { + --width: fit-content; + --height: fit-content; +} + +/** + * The grid variant can scale down when inline. + * When used in a `fit-content` overlay, this causes + * the overlay to shrink when the month/year picker is open. + * Explicitly setting the dimensions lets us have a consistently + * sized grid interface. + */ +.ion-datetime-button-overlay ion-datetime.datetime-grid { + width: 320px; + min-height: 320px; +} + +/** + * If a popover has a child ion-content (or class equivalent) then the .popover-viewport element + * should not be scrollable to ensure the inner content does scroll. However, if the popover + * does not have a child ion-content (or class equivalent) then the .popover-viewport element + * should remain scrollable. This code exists globally because popover targets + * .popover-viewport using ::slotted which only supports simple selectors. + * + * Note that we do not need to account for .ion-content-scroll-host here because that + * class should always be placed within ion-content even if ion-content is not scrollable. + */ +.popover-viewport:has(> ion-content) { + overflow: hidden; +} diff --git a/core/src/css/ionic/global.bundle.ionic.scss b/core/src/css/ionic/global.bundle.ionic.scss new file mode 100644 index 0000000000..a4d42d5cca --- /dev/null +++ b/core/src/css/ionic/global.bundle.ionic.scss @@ -0,0 +1,5 @@ +@import "../normalize"; +@import "./structure.ionic"; +@import "./typography.ionic"; +@import "./link.ionic"; +@import "./ionic-swiper.ionic"; diff --git a/core/src/css/ionic/ionic-swiper.ionic.scss b/core/src/css/ionic/ionic-swiper.ionic.scss new file mode 100644 index 0000000000..2a5b0a20fd --- /dev/null +++ b/core/src/css/ionic/ionic-swiper.ionic.scss @@ -0,0 +1,95 @@ +@use "../../foundations/ionic.vars.scss" as tokens; + +// Slides +// -------------------------------------------------- + +.swiper { + --bullet-background: #{tokens.$ionic-color-neutral-800}; + --bullet-background-active: #{tokens.$ionic-color-primary}; + --progress-bar-background: rgba(#010408, 0.25); + --progress-bar-background-active: #{tokens.$ionic-color-primary-600}; + --scroll-bar-background: rgba(#010408, 0.1); + --scroll-bar-background-active: rgba(#010408, 0.5); + /** + * @prop --bullet-background: Background of the pagination bullets + * @prop --bullet-background-active: Background of the active pagination bullet + * + * @prop --progress-bar-background: Background of the pagination progress-bar + * @prop --progress-bar-background-active: Background of the active pagination progress-bar + * + * @prop --scroll-bar-background: Background of the pagination scroll-bar + * @prop --scroll-bar-background-active: Background of the active pagination scroll-bar + */ + display: block; + + user-select: none; +} + +// Pagination Bullets +// -------------------------------------------------- + +.swiper .swiper-pagination-bullet { + background: var(--bullet-background); +} + +.swiper .swiper-pagination-bullet-active { + background: var(--bullet-background-active); +} + +// Pagination Progress Bar +// -------------------------------------------------- + +.swiper .swiper-pagination-progressbar { + background: var(--progress-bar-background); +} + +.swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { + background: var(--progress-bar-background-active); +} + +// Scrollbar +// -------------------------------------------------- + +.swiper .swiper-scrollbar { + background: var(--scroll-bar-background); +} + +.swiper .swiper-scrollbar-drag { + background: var(--scroll-bar-background-active); +} + +// Slide +// -------------------------------------------------- + +.swiper .slide-zoom { + display: block; + + width: 100%; + + text-align: center; +} + +.swiper .swiper-slide { + // Center slide text vertically + display: flex; + position: relative; + + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + font-size: 18px; + + text-align: center; + box-sizing: border-box; +} + +.swiper .swiper-slide img { + width: auto; + max-width: 100%; + height: auto; + max-height: 100%; +} diff --git a/core/src/css/link.ionic.scss b/core/src/css/ionic/link.ionic.scss similarity index 82% rename from core/src/css/link.ionic.scss rename to core/src/css/ionic/link.ionic.scss index 9fc1f2828a..2764d5b3f7 100644 --- a/core/src/css/link.ionic.scss +++ b/core/src/css/ionic/link.ionic.scss @@ -1,4 +1,4 @@ -@use "../foundations/ionic.vars" as tokens; +@use "../../themes/ionic/ionic.globals.scss" as globals; // Link: Shared Styles (Standalone & Underline) // ------------------------------------------------------------------------------- @@ -7,11 +7,11 @@ align-items: center; - gap: 4px; + gap: globals.$ionic-space-xxxs; transition: color 0.2s ease-in-out; - font-weight: 400; + font-weight: globals.$ionic-font-weight-regular; text-decoration-color: inherit; @@ -23,7 +23,7 @@ // ------------------------------------------------------------------------------- &:visited { - color: tokens.$ionic-color-info-500; + color: globals.$ionic-color-info-500; } } @@ -42,7 +42,7 @@ } } - color: tokens.$ionic-color-info-400; + color: globals.$ionic-color-info-400; text-decoration: none; @@ -51,7 +51,7 @@ &:focus, &.ion-focused { - outline: 2px solid tokens.$ionic-color-primary-100; + outline: 2px solid globals.$ionic-color-primary-100; outline-offset: 2px; text-decoration: underline; @@ -62,7 +62,7 @@ &:active, &.ion-activated { - color: tokens.$ionic-color-info-500; + color: globals.$ionic-color-info-500; text-decoration: underline; } @@ -84,7 +84,7 @@ a.ionic-link, @media (any-hover: hover) { &:hover { - color: tokens.$ionic-color-info-400; + color: globals.$ionic-color-info-400; } } @@ -97,7 +97,7 @@ a.ionic-link, &:focus, &.ion-focused { - outline: 2px solid tokens.$ionic-color-primary-100; + outline: 2px solid globals.$ionic-color-primary-100; outline-offset: 2px; color: currentColor; @@ -110,7 +110,7 @@ a.ionic-link, &:active, &.ion-activated { - color: tokens.$ionic-color-info-500; + color: globals.$ionic-color-info-500; } } diff --git a/core/src/css/ionic/structure.ionic.scss b/core/src/css/ionic/structure.ionic.scss new file mode 100644 index 0000000000..050388d3cf --- /dev/null +++ b/core/src/css/ionic/structure.ionic.scss @@ -0,0 +1,85 @@ +@use "../../themes/mixins" as mixins; + +// Structure +// -------------------------------------------------- +// Adds structural css to the native html elements + +* { + box-sizing: border-box; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; +} + +html { + width: 100%; + height: 100%; + -webkit-text-size-adjust: 100%; + + text-size-adjust: 100%; +} + +html:not(.hydrated) body { + display: none; +} + +html.ion-ce body { + display: block; +} + +html.plt-pwa { + height: 100vh; +} + +body { + @include mixins.font-smoothing(); + @include mixins.margin(0); + @include mixins.padding(0); + + position: fixed; + + width: 100%; + max-width: 100%; + height: 100%; + max-height: 100%; + + /** + * Because body has position: fixed, + * it should be promoted to its own + * layer. + * + * WebKit does not always promote + * the body to its own layer on page + * load in Ionic apps. Once scrolling on + * ion-content starts, WebKit will promote + * body. Unfortunately, this causes a re-paint + * which results in scrolling being halted + * until the next user gesture. + * + * This impacts the Custom Elements build. + * The lazy loaded build causes the browser to + * re-paint during hydration which causes WebKit + * to promote body to its own layer. + * In the CE Build, this hydration does not + * happen, so the additional re-paint does not occur. + */ + transform: translateZ(0); + + text-rendering: optimizeLegibility; + + overflow: hidden; + + touch-action: manipulation; + + -webkit-user-drag: none; + + -ms-content-zooming: none; + + word-wrap: break-word; + + overscroll-behavior-y: none; + -webkit-text-size-adjust: none; + + text-size-adjust: none; +} diff --git a/core/src/css/ionic/typography.ionic.scss b/core/src/css/ionic/typography.ionic.scss new file mode 100644 index 0000000000..c0cc6aa991 --- /dev/null +++ b/core/src/css/ionic/typography.ionic.scss @@ -0,0 +1,91 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; + +html { + font-family: globals.$ionic-font-family; +} + +body { + font-weight: globals.$ionic-font-weight-regular; + font-size: globals.$ionic-font-size-m; + + line-height: globals.$ionic-font-line-height-m; +} + +/* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/ +h1, +.ionic-heading1, +h2, +.ionic-heading2, +h3, +.ionic-heading3, +h4, +.ionic-heading4, +h5, +.ionic-heading5, +h6, +.ionic-heading6 { + color: globals.$ionic-color-neutral-900; + + font-weight: globals.$ionic-font-weight-semi-bold; +} + +h1, +.ionic-heading1 { + font-size: globals.$ionic-font-size-h1; + + line-height: globals.$ionic-font-line-height-xxl; +} + +h2, +.ionic-heading2 { + font-size: globals.$ionic-font-size-h2; + + line-height: globals.$ionic-font-line-height-xl; +} + +h3, +.ionic-heading3 { + font-size: globals.$ionic-font-size-h3; + + line-height: globals.$ionic-font-line-height-xl; +} + +h4, +.ionic-heading4 { + font-size: globals.$ionic-font-size-h4; + + line-height: globals.$ionic-font-line-height-l; +} + +h5, +.ionic-heading5 { + font-size: globals.$ionic-font-size-h5; + + line-height: globals.$ionic-font-line-height-l; +} + +h6, +.ionic-heading6 { + font-size: globals.$ionic-font-size-h6; + + line-height: globals.$ionic-font-line-height-m; +} + +.ionic-display-s { + font-size: globals.$ionic-font-size-display-s; + font-weight: globals.$ionic-font-weight-regular; + + line-height: globals.$ionic-font-line-height-s; +} + +.ionic-display-m { + font-size: globals.$ionic-font-size-display-m; + font-weight: globals.$ionic-font-weight-regular; + + line-height: globals.$ionic-font-line-height-m; +} + +/* Common */ +.ionic-font-italic { + font-style: italic; +} diff --git a/core/src/css/ionic/utils.bundle.ionic.scss b/core/src/css/ionic/utils.bundle.ionic.scss new file mode 100644 index 0000000000..85d93d3a0b --- /dev/null +++ b/core/src/css/ionic/utils.bundle.ionic.scss @@ -0,0 +1 @@ +@import "../../foundations/ionic.utility"; diff --git a/core/src/css/normalize.scss b/core/src/css/normalize.scss index e8080fbc4e..d944d4d071 100644 --- a/core/src/css/normalize.scss +++ b/core/src/css/normalize.scss @@ -1,6 +1,5 @@ // ! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css - // HTML5 display definitions // ========================================================================== @@ -20,7 +19,6 @@ audio:not([controls]) { height: 0; } - // Text-level semantics // ========================================================================== @@ -63,7 +61,6 @@ samp { font-size: 1em; } - // Forms // ========================================================================== @@ -196,7 +193,6 @@ input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } - // Tables // ==========================================================================// diff --git a/core/src/css/padding.scss b/core/src/css/padding.scss index 3ece7b9bfc..cc92b98477 100644 --- a/core/src/css/padding.scss +++ b/core/src/css/padding.scss @@ -1,6 +1,5 @@ -@import "../themes/ionic.globals"; -@import "../themes/ionic.mixins"; - +@import "../themes/native/native.globals"; +@import "../themes/mixins"; // Element Space // -------------------------------------------------- @@ -69,7 +68,6 @@ $margin: var(--ion-margin, 16px); @include padding-horizontal($padding); } - // Margin // -------------------------------------------------- diff --git a/core/src/css/palettes/high-contrast-dark.scss b/core/src/css/palettes/high-contrast-dark.scss index 927cbeb688..9e41660545 100644 --- a/core/src/css/palettes/high-contrast-dark.scss +++ b/core/src/css/palettes/high-contrast-dark.scss @@ -1,71 +1,71 @@ @use "sass:map"; -@import "../../themes/ionic.functions.color"; +@import "../../themes/functions.color"; -$primary: #7cabff !default; -$secondary: #62bdff !default; -$tertiary: #b6b9f9 !default; -$success: #4ada71 !default; -$warning: #ffce31 !default; -$danger: #fc9aa2 !default; -$light: #222428 !default; -$medium: #a8aab3 !default; -$dark: #f4f5f8 !default; +$primary: #7cabff !default; +$secondary: #62bdff !default; +$tertiary: #b6b9f9 !default; +$success: #4ada71 !default; +$warning: #ffce31 !default; +$danger: #fc9aa2 !default; +$light: #222428 !default; +$medium: #a8aab3 !default; +$dark: #f4f5f8 !default; -$colors: ( +$colors: ( primary: ( - base: $primary, - contrast: #000, - shade: get-color-shade($primary), - tint: get-color-tint($primary) + base: $primary, + contrast: #000, + shade: get-color-shade($primary), + tint: get-color-tint($primary), ), secondary: ( - base: $secondary, - contrast: #000, - shade: get-color-shade($secondary), - tint: get-color-tint($secondary) + base: $secondary, + contrast: #000, + shade: get-color-shade($secondary), + tint: get-color-tint($secondary), ), tertiary: ( - base: $tertiary, - contrast: #000, - shade: get-color-shade($tertiary), - tint: get-color-tint($tertiary) + base: $tertiary, + contrast: #000, + shade: get-color-shade($tertiary), + tint: get-color-tint($tertiary), ), success: ( - base: $success, - contrast: #000, - shade: get-color-shade($success), - tint: get-color-tint($success) + base: $success, + contrast: #000, + shade: get-color-shade($success), + tint: get-color-tint($success), ), warning: ( - base: $warning, - contrast: #000, - shade: get-color-shade($warning), - tint: get-color-tint($warning) + base: $warning, + contrast: #000, + shade: get-color-shade($warning), + tint: get-color-tint($warning), ), danger: ( - base: $danger, - contrast: #000, - shade: get-color-shade($danger), - tint: get-color-tint($danger) + base: $danger, + contrast: #000, + shade: get-color-shade($danger), + tint: get-color-tint($danger), ), light: ( - base: $light, - contrast: #fff, - shade: get-color-shade($light), - tint: get-color-tint($light) + base: $light, + contrast: #fff, + shade: get-color-shade($light), + tint: get-color-tint($light), ), medium: ( - base: $medium, - contrast: #000, - shade: get-color-shade($medium), - tint: get-color-tint($medium) + base: $medium, + contrast: #000, + shade: get-color-shade($medium), + tint: get-color-tint($medium), ), dark: ( - base: $dark, - contrast: #000, - shade: get-color-shade($dark), - tint: get-color-tint($dark) - ) + base: $dark, + contrast: #000, + shade: get-color-shade($dark), + tint: get-color-tint($dark), + ), ) !default; /// Text step colors are generated based on @@ -105,13 +105,12 @@ $lightest-text-color: $text-color; --ion-color-#{$color-name}-shade: #{map.get($value, shade)}; --ion-color-#{$color-name}-tint: #{map.get($value, tint)}; } - } } @mixin high-contrast-dark-ios-palette() { $background-color: #000000; - + & { --ion-background-color: #{$background-color}; --ion-background-color-rgb: #{color-to-rgb-list($background-color)}; @@ -175,7 +174,7 @@ $lightest-text-color: $text-color; @mixin high-contrast-dark-md-palette() { $background-color: #121212; - + & { --ion-background-color: #{$background-color}; --ion-background-color-rgb: #{color-to-rgb-list($background-color)}; diff --git a/core/src/css/palettes/high-contrast.scss b/core/src/css/palettes/high-contrast.scss index ec7152c211..a4fae4567d 100644 --- a/core/src/css/palettes/high-contrast.scss +++ b/core/src/css/palettes/high-contrast.scss @@ -1,71 +1,71 @@ @use "sass:map"; -@import "../../themes/ionic.functions.color"; +@import "../../themes/functions.color"; -$primary: #003fae !default; -$secondary: #01487b !default; -$tertiary: #3400e6 !default; -$success: #004314 !default; -$warning: #5f4100 !default; -$danger: #9c000c !default; -$light: #f4f5f8 !default; -$medium: #444446 !default; -$dark: #222428 !default; +$primary: #003fae !default; +$secondary: #01487b !default; +$tertiary: #3400e6 !default; +$success: #004314 !default; +$warning: #5f4100 !default; +$danger: #9c000c !default; +$light: #f4f5f8 !default; +$medium: #444446 !default; +$dark: #222428 !default; -$colors: ( +$colors: ( primary: ( - base: $primary, - contrast: #fff, - shade: get-color-shade($primary), - tint: get-color-tint($primary) + base: $primary, + contrast: #fff, + shade: get-color-shade($primary), + tint: get-color-tint($primary), ), secondary: ( - base: $secondary, - contrast: #fff, - shade: get-color-shade($secondary), - tint: get-color-tint($secondary) + base: $secondary, + contrast: #fff, + shade: get-color-shade($secondary), + tint: get-color-tint($secondary), ), tertiary: ( - base: $tertiary, - contrast: #fff, - shade: get-color-shade($tertiary), - tint: get-color-tint($tertiary) + base: $tertiary, + contrast: #fff, + shade: get-color-shade($tertiary), + tint: get-color-tint($tertiary), ), success: ( - base: $success, - contrast: #fff, - shade: get-color-shade($success), - tint: get-color-tint($success) + base: $success, + contrast: #fff, + shade: get-color-shade($success), + tint: get-color-tint($success), ), warning: ( - base: $warning, - contrast: #fff, - shade: get-color-shade($warning), - tint: get-color-tint($warning) + base: $warning, + contrast: #fff, + shade: get-color-shade($warning), + tint: get-color-tint($warning), ), danger: ( - base: $danger, - contrast: #fff, - shade: get-color-shade($danger), - tint: get-color-tint($danger) + base: $danger, + contrast: #fff, + shade: get-color-shade($danger), + tint: get-color-tint($danger), ), light: ( - base: $light, - contrast: #000, - shade: get-color-shade($light), - tint: get-color-tint($light) + base: $light, + contrast: #000, + shade: get-color-shade($light), + tint: get-color-tint($light), ), medium: ( - base: $medium, - contrast: #fff, - shade: get-color-shade($medium), - tint: get-color-tint($medium) + base: $medium, + contrast: #fff, + shade: get-color-shade($medium), + tint: get-color-tint($medium), ), dark: ( - base: $dark, - contrast: #fff, - shade: get-color-shade($dark), - tint: get-color-tint($dark) - ) + base: $dark, + contrast: #fff, + shade: get-color-shade($dark), + tint: get-color-tint($dark), + ), ) !default; /// Text step colors are generated based on diff --git a/core/src/css/structure.scss b/core/src/css/structure.scss index 1e39d0296e..99803fa657 100644 --- a/core/src/css/structure.scss +++ b/core/src/css/structure.scss @@ -1,6 +1,5 @@ -@import "../themes/ionic.globals"; -@import "../themes/ionic.mixins"; - +@import "../themes/native/native.globals"; +@import "../themes/mixins"; // Structure // -------------------------------------------------- diff --git a/core/src/css/test/link/basic/index.html b/core/src/css/test/link/basic/index.html index 2b921855bd..695e9c97fc 100644 --- a/core/src/css/test/link/basic/index.html +++ b/core/src/css/test/link/basic/index.html @@ -7,8 +7,7 @@ name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> - - + @@ -28,7 +27,7 @@ - +

Standalone (.ionic-link)