mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
79b9ac2fe5 | ||
|
|
b01fc635da | ||
|
|
3deec15e16 | ||
|
|
bb4914ae46 | ||
|
|
b21a677d2b | ||
|
|
f241605b6f | ||
|
|
4ea2cd2b50 | ||
|
|
3a01811845 | ||
|
|
3f6c245656 | ||
|
|
3e9914606b | ||
|
|
a4d7ee2065 |
51
core/package-lock.json
generated
51
core/package-lock.json
generated
@@ -40,7 +40,7 @@
|
||||
"jest-cli": "^27.5.1",
|
||||
"prettier": "^2.6.1",
|
||||
"rollup": "^2.26.4",
|
||||
"sass": "^1.26.10",
|
||||
"sass": "^1.63.6",
|
||||
"serve": "^14.0.1",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-order": "^4.1.0",
|
||||
@@ -5145,6 +5145,12 @@
|
||||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
|
||||
"integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
|
||||
@@ -8767,18 +8773,20 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.30.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
|
||||
"integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
|
||||
"version": "1.63.6",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
|
||||
"integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chokidar": ">=2.0.0 <4.0.0"
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"sass": "sass.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9.0"
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/saxes": {
|
||||
@@ -8963,6 +8971,15 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-support": {
|
||||
"version": "0.5.19",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
|
||||
@@ -14055,6 +14072,12 @@
|
||||
"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
|
||||
"dev": true
|
||||
},
|
||||
"immutable": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
|
||||
"integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
|
||||
"dev": true
|
||||
},
|
||||
"import-fresh": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
|
||||
@@ -16702,12 +16725,14 @@
|
||||
"dev": true
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.30.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
|
||||
"integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
|
||||
"version": "1.63.6",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
|
||||
"integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": ">=2.0.0 <4.0.0"
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
}
|
||||
},
|
||||
"saxes": {
|
||||
@@ -16853,6 +16878,12 @@
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map-js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map-support": {
|
||||
"version": "0.5.19",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
"jest-cli": "^27.5.1",
|
||||
"prettier": "^2.6.1",
|
||||
"rollup": "^2.26.4",
|
||||
"sass": "^1.26.10",
|
||||
"sass": "^1.63.6",
|
||||
"serve": "^14.0.1",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-order": "^4.1.0",
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
@import "./badge";
|
||||
@import "./badge.ios.vars";
|
||||
@use "badge";
|
||||
@use "badge.ios.vars" as iosVars;
|
||||
|
||||
@use "../../themes-migrated/ionic.mixins" as mixins;
|
||||
|
||||
// iOS Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
@include border-radius($badge-ios-border-radius);
|
||||
@include mixins.border-radius(iosVars.$badge-ios-border-radius);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@use "../../themes-migrated/ionic.globals.ios";
|
||||
|
||||
// iOS Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@import "./badge";
|
||||
@import "./badge.md.vars";
|
||||
@use "badge";
|
||||
@use "badge.md.vars" as mdVars;
|
||||
|
||||
@use "../../themes-migrated/ionic.mixins" as mixins;
|
||||
|
||||
// Material Design Badge
|
||||
// --------------------------------------------------
|
||||
@@ -10,5 +12,5 @@
|
||||
--padding-bottom: 4px;
|
||||
--padding-start: 4px;
|
||||
|
||||
@include border-radius($badge-md-border-radius);
|
||||
@include mixins.border-radius(mdVars.$badge-md-border-radius);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@use "../../themes-migrated/ionic.globals.md";
|
||||
|
||||
// Material Design Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
@import "./badge.vars";
|
||||
@use "badge.vars" as vars;
|
||||
|
||||
@use "../../themes-migrated/ionic.globals" as globals;
|
||||
@use "../../themes-migrated/ionic.mixins" as mixins;
|
||||
|
||||
// Badge
|
||||
// --------------------------------------------------
|
||||
@@ -15,24 +18,24 @@
|
||||
*/
|
||||
--background: #{ion-color(primary, base)};
|
||||
--color: #{ion-color(primary, contrast)};
|
||||
--padding-top: #{$badge-padding-top};
|
||||
--padding-end: #{$badge-padding-end};
|
||||
--padding-bottom: #{$badge-padding-bottom};
|
||||
--padding-start: #{$badge-padding-start};
|
||||
--padding-top: #{vars.$badge-padding-top};
|
||||
--padding-end: #{vars.$badge-padding-end};
|
||||
--padding-bottom: #{vars.$badge-padding-bottom};
|
||||
--padding-start: #{vars.$badge-padding-start};
|
||||
|
||||
@include font-smoothing();
|
||||
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
@include mixins.font-smoothing();
|
||||
@include mixins.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
|
||||
display: inline-block;
|
||||
|
||||
min-width: $badge-min-width;
|
||||
min-width: vars.$badge-min-width;
|
||||
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
|
||||
font-family: $font-family-base;
|
||||
font-size: $badge-font-size;
|
||||
font-weight: $badge-font-weight;
|
||||
font-family: globals.$font-family-base;
|
||||
font-size: vars.$badge-font-size;
|
||||
font-weight: vars.$badge-font-weight;
|
||||
|
||||
line-height: 1;
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
@use "../../themes-migrated/ionic.globals";
|
||||
|
||||
// Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
@use "../../themes-migrated/ionic.globals" as globals;
|
||||
@use "../../themes-migrated/ionic.functions.color" as colorFunctions;
|
||||
@use "../../themes-migrated/ionic.mixins" as mixins;
|
||||
@use "../../themes-migrated/ionic.theme.default" as defaultTheme;
|
||||
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the chip
|
||||
* @prop --color: Color of the chip
|
||||
*/
|
||||
--background: #{rgba($text-color-rgb, .12)};
|
||||
--color: #{rgba($text-color-rgb, .87)};
|
||||
--background: #{rgba(defaultTheme.$text-color-rgb, .12)};
|
||||
--color: #{rgba(defaultTheme.$text-color-rgb, .87)};
|
||||
|
||||
@include border-radius(16px);
|
||||
@include font-smoothing();
|
||||
@include margin(4px);
|
||||
@include padding(7px, 12px);
|
||||
@include mixins.border-radius(16px);
|
||||
@include mixins.font-smoothing();
|
||||
@include mixins.margin(4px);
|
||||
@include mixins.padding(7px, 12px);
|
||||
|
||||
display: inline-flex;
|
||||
|
||||
@@ -24,7 +27,7 @@
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
|
||||
font-family: $font-family-base;
|
||||
font-family: globals.$font-family-base;
|
||||
font-size: 14px;
|
||||
|
||||
cursor: pointer;
|
||||
@@ -45,16 +48,16 @@
|
||||
// ---------------------------------------------
|
||||
|
||||
:host(.ion-color) {
|
||||
background: current-color(base, .08);
|
||||
color: current-color(shade);
|
||||
background: colorFunctions.current-color(base, .08);
|
||||
color: colorFunctions.current-color(shade);
|
||||
}
|
||||
|
||||
:host(.ion-color:focus) {
|
||||
background: current-color(base, .12);
|
||||
background: colorFunctions.current-color(base, .12);
|
||||
}
|
||||
|
||||
:host(.ion-color.ion-activated) {
|
||||
background: current-color(base, .16);
|
||||
background: colorFunctions.current-color(base, .16);
|
||||
}
|
||||
|
||||
|
||||
@@ -67,21 +70,21 @@
|
||||
}
|
||||
|
||||
:host(.chip-outline) {
|
||||
border-color: rgba($text-color-rgb, .32);
|
||||
border-color: rgba(defaultTheme.$text-color-rgb, .32);
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:host(.chip-outline.ion-color) {
|
||||
border-color: current-color(base, .32);
|
||||
border-color: colorFunctions.current-color(base, .32);
|
||||
}
|
||||
|
||||
:host(.chip-outline:not(.ion-color):focus) {
|
||||
background: rgba($text-color-rgb, .04);
|
||||
background: rgba(defaultTheme.$text-color-rgb, .04);
|
||||
}
|
||||
|
||||
:host(.chip-outline.ion-activated:not(.ion-color)) {
|
||||
background: rgba($text-color-rgb, .08);
|
||||
background: rgba(defaultTheme.$text-color-rgb, .08);
|
||||
}
|
||||
|
||||
|
||||
@@ -93,15 +96,15 @@
|
||||
}
|
||||
|
||||
:host(:not(.ion-color)) ::slotted(ion-icon) {
|
||||
color: rgba($text-color-rgb, .54);
|
||||
color: rgba(defaultTheme.$text-color-rgb, .54);
|
||||
}
|
||||
|
||||
::slotted(ion-icon:first-child) {
|
||||
@include margin(-4px, 8px, -4px, -4px);
|
||||
@include mixins.margin(-4px, 8px, -4px, -4px);
|
||||
}
|
||||
|
||||
::slotted(ion-icon:last-child) {
|
||||
@include margin(-4px, -4px, -4px, 8px);
|
||||
@include mixins.margin(-4px, -4px, -4px, 8px);
|
||||
}
|
||||
|
||||
|
||||
@@ -114,11 +117,11 @@
|
||||
}
|
||||
|
||||
::slotted(ion-avatar:first-child) {
|
||||
@include margin(-4px, 8px, -4px, -8px);
|
||||
@include mixins.margin(-4px, 8px, -4px, -8px);
|
||||
}
|
||||
|
||||
::slotted(ion-avatar:last-child) {
|
||||
@include margin(-4px, -8px, -4px, 8px);
|
||||
@include mixins.margin(-4px, -8px, -4px, 8px);
|
||||
}
|
||||
|
||||
|
||||
@@ -130,7 +133,7 @@
|
||||
}
|
||||
|
||||
:host(:focus) {
|
||||
--background: #{rgba($text-color-rgb, .16)};
|
||||
--background: #{rgba(defaultTheme.$text-color-rgb, .16)};
|
||||
}
|
||||
|
||||
|
||||
@@ -138,7 +141,7 @@
|
||||
// ---------------------------------------------
|
||||
|
||||
:host(.ion-activated) {
|
||||
--background: #{rgba($text-color-rgb, .20)};
|
||||
--background: #{rgba(defaultTheme.$text-color-rgb, .20)};
|
||||
}
|
||||
|
||||
|
||||
@@ -147,14 +150,14 @@
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) {
|
||||
--background: #{rgba($text-color-rgb, .16)};
|
||||
--background: #{rgba(defaultTheme.$text-color-rgb, .16)};
|
||||
}
|
||||
|
||||
:host(.ion-color:hover) {
|
||||
background: current-color(base, .12);
|
||||
background: colorFunctions.current-color(base, .12);
|
||||
}
|
||||
|
||||
:host(.chip-outline:not(.ion-color):hover) {
|
||||
background: rgba($text-color-rgb, .04);
|
||||
background: rgba(defaultTheme.$text-color-rgb, .04);
|
||||
}
|
||||
}
|
||||
|
||||
62
core/src/themes-migrated/ionic.functions.color.scss
Normal file
62
core/src/themes-migrated/ionic.functions.color.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@use "sass:color";
|
||||
@use "sass:map";
|
||||
|
||||
// Gets the active color's css variable from a variation. Alpha is optional.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
// Example usage:
|
||||
// current-color(base) => var(--ion-color-base)
|
||||
// current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function current-color($variation, $alpha: null) {
|
||||
@if $alpha == null {
|
||||
@return var(--ion-color-#{$variation});
|
||||
} @else {
|
||||
@return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
|
||||
}
|
||||
}
|
||||
|
||||
// Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
// Example usage:
|
||||
// ion-color(primary, base) => var(--ion-color-primary, #3880ff)
|
||||
// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
|
||||
// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function ion-color($name, $variation, $alpha: null, $rgb: null) {
|
||||
$values: map.get(defaultTheme.$colors, $name);
|
||||
$value: map.get($values, $variation);
|
||||
$variable: --ion-color-#{$name}-#{$variation};
|
||||
|
||||
@if ($variation == base) {
|
||||
$variable: --ion-color-#{$name};
|
||||
}
|
||||
|
||||
@if ($alpha) {
|
||||
$value: color-to-rgb-list($value);
|
||||
@return rgba(var(#{$variable}-rgb, $value), $alpha);
|
||||
}
|
||||
@if ($rgb) {
|
||||
$value: color-to-rgb-list($value);
|
||||
$variable: #{$variable}-rgb;
|
||||
}
|
||||
|
||||
@return var(#{$variable}, $value);
|
||||
}
|
||||
|
||||
// Mixes a color with black to create its shade.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function get-color-shade($color) {
|
||||
@return color.mix(#000, $color, 12%);
|
||||
}
|
||||
|
||||
// Mixes a color with white to create its tint.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function get-color-tint($color) {
|
||||
@return color.mix(#fff, $color, 10%);
|
||||
}
|
||||
|
||||
// Converts a color to a comma separated rgb.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function color-to-rgb-list($color) {
|
||||
@return #{color.red($color)},#{color.green($color)},#{color.blue($color)};
|
||||
}
|
||||
181
core/src/themes-migrated/ionic.functions.string.scss
Normal file
181
core/src/themes-migrated/ionic.functions.string.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
@use "sass:list";
|
||||
@use "sass:meta";
|
||||
@use "sass:string";
|
||||
// String Utility Functions
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
// String Replace Function
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: string.index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
// String Split Function
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
@function str-split($string, $separator) {
|
||||
// empty array/list
|
||||
$split-arr: ();
|
||||
// first index of separator in string
|
||||
$index: string.index($string, $separator);
|
||||
// loop through string
|
||||
@while $index != null {
|
||||
// get the substring from the first character to the separator
|
||||
$item: string.slice($string, 1, $index - 1);
|
||||
// push item to array
|
||||
$split-arr: list.append($split-arr, $item);
|
||||
// remove item and separator from string
|
||||
$string: string.slice($string, $index + 1);
|
||||
// find new index of separator
|
||||
$index: string.index($string, $separator);
|
||||
}
|
||||
// add the remaining string to list (the last item)
|
||||
$split-arr: list.append($split-arr, $string);
|
||||
|
||||
@return $split-arr;
|
||||
}
|
||||
|
||||
|
||||
// String Extract Function
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function str-extract($string, $start, $end) {
|
||||
$start-index: string.index($string, $start);
|
||||
|
||||
@if $start-index {
|
||||
$post: string.slice($string, $start-index + string.length($start));
|
||||
$end-index: string.index($post, $end);
|
||||
|
||||
@if $end-index {
|
||||
@return string.slice($post, 1, $end-index - 1);
|
||||
}
|
||||
}
|
||||
|
||||
@return null;
|
||||
}
|
||||
|
||||
|
||||
// String Contains Function
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function str-contains($string, $needle) {
|
||||
@if (meta.type-of($string) == string) {
|
||||
@return string.index($string, $needle) != null;
|
||||
}
|
||||
|
||||
@return false;
|
||||
}
|
||||
|
||||
|
||||
// URL Encode Function
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function url-encode($val) {
|
||||
$spaces: str-replace($val, " ", "%20");
|
||||
$encoded: str-replace($spaces, "#", "%23");
|
||||
@return $encoded;
|
||||
}
|
||||
|
||||
|
||||
// Add Root Selector
|
||||
// --------------------------------------------------------------------------------
|
||||
// Adds a root selector using host based on the selector passed
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function add-root-selector($root, $addHostSelector) {
|
||||
$selectors: str-split($root, ",");
|
||||
|
||||
$list: ();
|
||||
|
||||
@each $selector in $selectors {
|
||||
// If the selector contains :host( it means it is targeting a class on the host
|
||||
// element so we need to change how we target it:
|
||||
// @include add-root-selector(":host(.fixed)", "[dir=rtl]")
|
||||
// --> :host-context([dir=rtl]):host(.fixed)
|
||||
// --> :host-context([dir=rtl]).fixed
|
||||
@if str-contains($selector, ":host(") {
|
||||
// @include add-root-selector(":host(.fixed)", "[dir=rtl]")
|
||||
// --> :host-context([dir=rtl]):host(.fixed)
|
||||
$shadow-element: str-replace($selector, ":host(", ":host-context(#{$addHostSelector}):host(");
|
||||
$list: list.append($list, $shadow-element, comma);
|
||||
|
||||
$new-element: ();
|
||||
$elements: str-split($selector, " ");
|
||||
|
||||
@each $element in $elements {
|
||||
@if str-contains($element, ":host(") {
|
||||
$scoped-element: $element;
|
||||
|
||||
// Replace the :host( and ) so all we have left is the class
|
||||
// inside of it:
|
||||
// :host(.fixed) -> .fixed
|
||||
$scoped-element: str-replace($scoped-element, ")", "");
|
||||
$scoped-element: str-replace($scoped-element, ":host(", "");
|
||||
|
||||
// Add the class back inside of host with the rtl selector:
|
||||
// .fixed -> :host-context([dir=rtl]).fixed
|
||||
$scoped-element: str-replace($scoped-element, $scoped-element, ":host-context(#{$addHostSelector})#{$scoped-element}");
|
||||
|
||||
// @include add-root-selector(":host(.fixed)", "[dir=rtl]")
|
||||
// --> :host-context([dir=rtl]).fixed
|
||||
$new-element: list.append($new-element, $scoped-element, space);
|
||||
} @else {
|
||||
// Add back any selectors that followed the host after transforming the
|
||||
// first selector:
|
||||
// :host(.fixed) ::slotted(ion-icon)
|
||||
// --> :host-context([dir=rtl]):host(.fixed) ::slotted(ion-icon)
|
||||
// --> :host-context([dir=rtl]).fixed ::slotted(ion-icon)
|
||||
$new-element: list.append($new-element, $element, space);
|
||||
}
|
||||
}
|
||||
|
||||
$list: list.append($list, $new-element, comma);
|
||||
// If the selector contains :host without a parantheses
|
||||
// it means it is targeting just the host
|
||||
// element so we can change it to look for host-context
|
||||
// @include add-root-selector(":host", "[dir=rtl]")
|
||||
// --> :host-context([dir=rtl])
|
||||
// --> :host:dir(rtl)
|
||||
} @else if str-contains($selector, ":host") {
|
||||
$new-element: ();
|
||||
$elements: str-split($selector, " ");
|
||||
|
||||
@each $element in $elements {
|
||||
@if str-contains($element, ":host") {
|
||||
// Replace the :host with the addHostSelector:
|
||||
// :host -> :host-context([dir=rtl])
|
||||
$updated-element: str-replace($element, ":host", ":host-context(#{$addHostSelector})");
|
||||
|
||||
// Add the final selector after all transformations:
|
||||
// :host -> :host-context([dir=rtl])
|
||||
$new-element: list.append($new-element, $updated-element, space);
|
||||
} @else {
|
||||
// Add back any selectors that followed the host after transforming the
|
||||
// first selector:
|
||||
// :host ::slotted(ion-icon) -> :host-context([dir=rtl]) ::slotted(ion-icon)
|
||||
$new-element: list.append($new-element, $element, space);
|
||||
}
|
||||
}
|
||||
|
||||
$list: list.append($list, $new-element, comma);
|
||||
// If the selector does not contain host at all it is either a shadow
|
||||
// or normal element so append both the addHostSelector and host-context
|
||||
// @include add-root-selector("ion-component", "[dir=rtl]")
|
||||
// --> :host-context([dir=rtl]) ion-component
|
||||
// --> [dir=rtl] ion-component
|
||||
} @else {
|
||||
$list: list.append($list, "#{$addHostSelector} #{$selector}", comma);
|
||||
$list: list.append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma);
|
||||
}
|
||||
}
|
||||
|
||||
@return $list;
|
||||
}
|
||||
6
core/src/themes-migrated/ionic.globals.ios.scss
Normal file
6
core/src/themes-migrated/ionic.globals.ios.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
|
||||
// Global Core
|
||||
@use "ionic.globals" as globals;
|
||||
|
||||
// Global iOS
|
||||
@use "ionic.theme.default.ios" as iosDefaultTheme;
|
||||
6
core/src/themes-migrated/ionic.globals.md.scss
Normal file
6
core/src/themes-migrated/ionic.globals.md.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
|
||||
// Core Globals
|
||||
@use "ionic.globals" as globals;
|
||||
|
||||
// Material Design Globals
|
||||
@use "ionic.theme.default.md" as mdDefaultTheme;
|
||||
67
core/src/themes-migrated/ionic.globals.scss
Normal file
67
core/src/themes-migrated/ionic.globals.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
|
||||
// Global Utility Functions
|
||||
@use "ionic.functions.string" as stringFunctions;
|
||||
|
||||
// Global Color Functions
|
||||
@use "ionic.functions.color" as colorFunctions;
|
||||
|
||||
// Global Mixins
|
||||
@use "ionic.mixins" as mixins;
|
||||
|
||||
// Default Theme
|
||||
@use "ionic.theme.default" as defaultTheme;
|
||||
|
||||
|
||||
// Default General
|
||||
// --------------------------------------------------
|
||||
$font-family-base: var(--ion-font-family, inherit) !default;
|
||||
|
||||
// Global app direction
|
||||
$app-direction: null !default;
|
||||
|
||||
// Hairlines width
|
||||
$hairlines-width: .55px !default;
|
||||
|
||||
// The minimum dimensions at which your layout will change,
|
||||
// adapting to different screen sizes, for use in media queries
|
||||
$screen-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
) !default;
|
||||
|
||||
// Input placeholder opacity
|
||||
// Ensures that the placeholder has the
|
||||
// correct color contrast against the background.
|
||||
$placeholder-opacity: 0.6 !default;
|
||||
|
||||
$form-control-label-margin: 16px !default;
|
||||
|
||||
|
||||
// Z-Index
|
||||
// --------------------------------------------------
|
||||
// Grouped by elements which would be siblings
|
||||
|
||||
$z-index-menu-overlay: 1000;
|
||||
$z-index-overlay: 1001;
|
||||
$z-index-click-block: 99999;
|
||||
|
||||
$z-index-fixed-content: 999;
|
||||
$z-index-scroll-content: 1;
|
||||
$z-index-refresher: -1;
|
||||
|
||||
$z-index-page-container: 0;
|
||||
$z-index-toolbar: 10;
|
||||
$z-index-toolbar-background: -1;
|
||||
$z-index-toolbar-buttons: 99;
|
||||
|
||||
$z-index-backdrop: 2;
|
||||
$z-index-overlay-wrapper: 10;
|
||||
|
||||
$z-index-item-options: 1;
|
||||
$z-index-item-input: 2;
|
||||
$z-index-item-divider: 100;
|
||||
|
||||
$z-index-reorder-selected: 100;
|
||||
599
core/src/themes-migrated/ionic.mixins.scss
Normal file
599
core/src/themes-migrated/ionic.mixins.scss
Normal file
@@ -0,0 +1,599 @@
|
||||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "sass:string";
|
||||
|
||||
@use "ionic.functions.string" as stringFunctions;
|
||||
|
||||
@mixin input-cover() {
|
||||
@include position(0, null, null, 0);
|
||||
@include margin(0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
appearance: none;
|
||||
outline: none;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin visually-hidden() {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
border: 0;
|
||||
outline: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
@mixin text-inherit() {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-decoration: inherit;
|
||||
text-indent: inherit;
|
||||
text-overflow: inherit;
|
||||
text-transform: inherit;
|
||||
text-align: inherit;
|
||||
white-space: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@mixin button-state() {
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
content: "";
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin font-smoothing() {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
// Get the key from a map based on the index
|
||||
@function index-to-key($map, $index) {
|
||||
$keys: map.keys($map);
|
||||
|
||||
@return list.nth($keys, $index);
|
||||
}
|
||||
|
||||
|
||||
// Breakpoint Mixins
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
// Breakpoint viewport sizes and media queries.
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
|
||||
//
|
||||
// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: globals.$screen-breakpoints) {
|
||||
$min: map.get($breakpoints, $name);
|
||||
|
||||
@return if($name != index-to-key($breakpoints, 1), $min, null);
|
||||
}
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||
// Useful for making responsive utilities.
|
||||
//
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: globals.$screen-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: globals.$screen-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: globals.$screen-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
|
||||
$n: list.index($breakpoint-names, $name);
|
||||
@return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
// The maximum value is reduced by 0.02px to work around the limitations of
|
||||
// `min-` and `max-` prefixes and viewports with fractional widths.
|
||||
//
|
||||
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
|
||||
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
|
||||
// See https://bugs.webkit.org/show_bug.cgi?id=178261 // See https://bugs.webkit.org/show_bug.cgi?id=178261
|
||||
//
|
||||
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 767.98px
|
||||
@function breakpoint-max($name, $breakpoints: globals.$screen-breakpoints) {
|
||||
$max: map.get($breakpoints, $name);
|
||||
@return if($max and $max > 0, $max - .02, null);
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: globals.$screen-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Text Direction - ltr / rtl
|
||||
//
|
||||
// CSS defaults to use the ltr css, and adds [dir=rtl] selectors
|
||||
// to override ltr defaults.
|
||||
// ----------------------------------------------------------
|
||||
|
||||
@mixin multi-dir() {
|
||||
@content;
|
||||
|
||||
// $root: #{&};
|
||||
// @at-root [dir] {
|
||||
// #{$root} {
|
||||
// @content;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin rtl() {
|
||||
$root: #{&};
|
||||
|
||||
$rootSplit: stringFunctions.str-split($root, ",");
|
||||
$selectors: #{stringFunctions.add-root-selector($root, "[dir=rtl]")};
|
||||
$selectorsSplit: stringFunctions.str-split($selectors, ",");
|
||||
|
||||
$hostContextSelectors: ();
|
||||
$restSelectors: ();
|
||||
$dirSelectors: ();
|
||||
|
||||
// Selectors must be split into individual selectors in case the browser
|
||||
// doesn't support a specific selector.
|
||||
// For example, Firefox and Safari doesn't support `:host-context()`.
|
||||
// If an invalid selector is used, then the entire group of selectors
|
||||
// will be ignored.
|
||||
// @link https://www.w3.org/TR/selectors-3/#grouping
|
||||
@each $selector in $selectorsSplit {
|
||||
// Group the selectors back into a single selector to optimize the output.
|
||||
@if string.index($selector, ":host-context") {
|
||||
$hostContextSelectors: list.append($hostContextSelectors, $selector, comma);
|
||||
} @else {
|
||||
// Group the selectors back into a single selector to optimize the output.
|
||||
$restSelectors: list.append($restSelectors, $selector, comma);
|
||||
}
|
||||
}
|
||||
|
||||
// Supported by Chrome.
|
||||
@if list.length($hostContextSelectors) > 0 {
|
||||
@at-root #{$hostContextSelectors} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Supported by all browsers.
|
||||
@if list.length($restSelectors) > 0 {
|
||||
@at-root #{$restSelectors} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// If browser can support `:dir()`, then add the `:dir()` selectors.
|
||||
@supports selector(:dir(rtl)) {
|
||||
// Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.
|
||||
// `:host-context()` is added:
|
||||
// - through the `add-root-selector()` function.
|
||||
// - first so that it takes precedence over `:dir()`.
|
||||
// For example,
|
||||
// - Firefox doesn't support `:host-context()`, but does support `:dir()`.
|
||||
// - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`
|
||||
// @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/
|
||||
@each $selector in $rootSplit {
|
||||
$dirSelector: "#{$selector}:dir(rtl)";
|
||||
// Group the selectors back into a single selector to optimize the output.
|
||||
$dirSelectors: list.append($dirSelectors, $dirSelector, comma);
|
||||
}
|
||||
|
||||
// Supported by Firefox.
|
||||
@if list.length($dirSelectors) > 0 {
|
||||
@at-root #{$dirSelectors} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr() {
|
||||
@content;
|
||||
}
|
||||
|
||||
|
||||
// SVG Background Image Mixin
|
||||
// @param {string} $svg
|
||||
// ----------------------------------------------------------
|
||||
@mixin svg-background-image($svg, $flip-rtl: false) {
|
||||
$url: stringFunctions.url-encode($svg);
|
||||
$viewBox: stringFunctions.str-split(stringFunctions.str-extract($svg, "viewBox='", "'"), " ");
|
||||
|
||||
@if $flip-rtl != true or $viewBox == null {
|
||||
@include multi-dir() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
}
|
||||
} @else {
|
||||
$transform: "transform='translate(#{list.nth($viewBox, 3)}, 0) scale(-1, 1)'";
|
||||
$flipped-url: $svg;
|
||||
$flipped-url: stringFunctions.str-replace($flipped-url, "<path", "<path #{$transform}");
|
||||
$flipped-url: stringFunctions.str-replace($flipped-url, "<line", "<line #{$transform}");
|
||||
$flipped-url: stringFunctions.str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
|
||||
$flipped-url: stringFunctions.url-encode($flipped-url);
|
||||
|
||||
@include ltr () {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
}
|
||||
@include rtl() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add property horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin property-horizontal($prop, $start, $end: $start) {
|
||||
@if $start == 0 and $end == 0 {
|
||||
#{$prop}-left: $start;
|
||||
#{$prop}-right: $end;
|
||||
|
||||
} @else {
|
||||
-webkit-#{$prop}-start: $start;
|
||||
#{$prop}-inline-start: $start;
|
||||
-webkit-#{$prop}-end: $end;
|
||||
#{$prop}-inline-end: $end;
|
||||
}
|
||||
}
|
||||
|
||||
// Add property for all directions
|
||||
// @param {string} $prop
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// @param {boolean} $content include content or use default
|
||||
// ----------------------------------------------------------
|
||||
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property-horizontal($prop, $start, $end);
|
||||
#{$prop}-top: $top;
|
||||
#{$prop}-bottom: $bottom;
|
||||
}
|
||||
|
||||
// Add padding horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding-horizontal($start, $end: $start) {
|
||||
@include property-horizontal(padding, $start, $end);
|
||||
}
|
||||
|
||||
// Add padding for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(padding, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add margin horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin-horizontal($start, $end: $start) {
|
||||
@include property-horizontal(margin, $start, $end);
|
||||
}
|
||||
|
||||
// Add margin for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(margin, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add position horizontal
|
||||
// @param {string} $start - amount to position start
|
||||
// @param {string} $end - amount to left: 0; end
|
||||
// ----------------------------------------------------------
|
||||
@mixin position-horizontal($start: null, $end: null) {
|
||||
@if $start == $end {
|
||||
@include multi-dir() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
} @else {
|
||||
@at-root {
|
||||
@supports (inset-inline-start: 0) {
|
||||
& {
|
||||
inset-inline-start: $start;
|
||||
inset-inline-end: $end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO FW-3766
|
||||
@at-root {
|
||||
@supports not (inset-inline-start: 0) {
|
||||
& {
|
||||
@include ltr() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
@include rtl() {
|
||||
left: unset;
|
||||
right: unset;
|
||||
|
||||
left: $end;
|
||||
right: $start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add position for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
|
||||
@include position-horizontal($start, $end);
|
||||
top: $top;
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
// Add border for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(border, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add border radius for all directions
|
||||
// @param {string} $top-start
|
||||
// @param {string} $top-end
|
||||
// @param {string} $bottom-end
|
||||
// @param {string} $bottom-start
|
||||
// ----------------------------------------------------------
|
||||
@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
|
||||
@if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
|
||||
@include multi-dir() {
|
||||
border-radius: $top-start;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
border-top-left-radius: $top-start;
|
||||
border-top-right-radius: $top-end;
|
||||
border-bottom-right-radius: $bottom-end;
|
||||
border-bottom-left-radius: $bottom-start;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
border-top-left-radius: $top-end;
|
||||
border-top-right-radius: $top-start;
|
||||
border-bottom-right-radius: $bottom-start;
|
||||
border-bottom-left-radius: $bottom-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add direction for all directions
|
||||
// @param {string} $dir - Direction on LTR
|
||||
@mixin direction($dir) {
|
||||
$other-dir: null;
|
||||
|
||||
@if $dir == ltr {
|
||||
$other-dir: rtl;
|
||||
} @else {
|
||||
$other-dir: ltr;
|
||||
}
|
||||
|
||||
@include ltr() {
|
||||
direction: $dir;
|
||||
}
|
||||
@include rtl() {
|
||||
direction: $other-dir;
|
||||
}
|
||||
}
|
||||
|
||||
// Add float for all directions
|
||||
// @param {string} $side
|
||||
// @param {string} $decorator - !important
|
||||
@mixin float($side, $decorator: null) {
|
||||
@if $side == start {
|
||||
@include ltr() {
|
||||
float: left $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: right $decorator;
|
||||
}
|
||||
} @else if $side == end {
|
||||
@include ltr() {
|
||||
float: right $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: left $decorator;
|
||||
}
|
||||
} @else {
|
||||
@include multi-dir() {
|
||||
float: $side $decorator;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
|
||||
@if $horizontal == start or $horizontal == end {
|
||||
$horizontal-ltr: null;
|
||||
$horizontal-rtl: null;
|
||||
@if $horizontal == start {
|
||||
$horizontal-ltr: left;
|
||||
$horizontal-rtl: right;
|
||||
} @else {
|
||||
$horizontal-ltr: right;
|
||||
$horizontal-rtl: left;
|
||||
}
|
||||
|
||||
@include ltr() {
|
||||
background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
@include rtl() {
|
||||
background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
} @else {
|
||||
@include multi-dir() {
|
||||
background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transform-origin($x-axis, $y-axis: null) {
|
||||
@if $x-axis == start {
|
||||
@include ltr() {
|
||||
transform-origin: left $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: right $y-axis;
|
||||
}
|
||||
} @else if $x-axis == end {
|
||||
@include ltr() {
|
||||
transform-origin: right $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: left $y-axis;
|
||||
}
|
||||
} @else if $x-axis == left or $x-axis == right {
|
||||
@include multi-dir() {
|
||||
transform-origin: $x-axis $y-axis;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
transform-origin: $x-axis $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: calc(100% - #{$x-axis}) $y-axis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add transform for all directions
|
||||
// @param {string} $transforms - comma separated list of transforms
|
||||
@mixin transform($transforms...) {
|
||||
$extra: null;
|
||||
|
||||
$x: null;
|
||||
$ltr-translate: null;
|
||||
$rtl-translate: null;
|
||||
|
||||
@each $transform in $transforms {
|
||||
@if (string.index($transform, translate3d)) {
|
||||
$transform: stringFunctions.str-replace($transform, 'translate3d(');
|
||||
$transform: stringFunctions.str-replace($transform, ')');
|
||||
|
||||
$coordinates: stringFunctions.str-split($transform, ',');
|
||||
|
||||
$x: list.nth($coordinates, 1);
|
||||
$y: list.nth($coordinates, 2);
|
||||
$z: list.nth($coordinates, 3);
|
||||
|
||||
$ltr-translate: translate3d($x, $y, $z);
|
||||
$rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
|
||||
} @else {
|
||||
@if $extra == null {
|
||||
$extra: $transform;
|
||||
} @else {
|
||||
$extra: $extra $transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $x == '0' or $x == null {
|
||||
@include multi-dir() {
|
||||
transform: $ltr-translate $extra;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
transform: $ltr-translate $extra;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
transform: $rtl-translate $extra;
|
||||
}
|
||||
}
|
||||
}
|
||||
43
core/src/themes-migrated/ionic.theme.default.ios.scss
Normal file
43
core/src/themes-migrated/ionic.theme.default.ios.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
@use "ionic.theme.default" as defaultTheme;
|
||||
|
||||
// Ionic iOS Theme
|
||||
// -------------------------------------------------------------------------------------------
|
||||
// This file contains the theme variables shared
|
||||
// between modes. This should only include variables
|
||||
// used to theme the application colors for iOS.
|
||||
|
||||
// iOS General Colors
|
||||
// --------------------------------------------------
|
||||
$backdrop-ios-color: var(--ion-backdrop-color, #000) !default;
|
||||
$border-ios-color: var(--ion-border-color, var(--ion-color-step-150, #dedede)) !default;
|
||||
$box-shadow-ios-color: var(--ion-box-shadow-color, #000) !default;
|
||||
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9)) !default;
|
||||
|
||||
// iOS Tabs & Tab bar
|
||||
// --------------------------------------------------
|
||||
$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7)) !default;
|
||||
$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
|
||||
$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
|
||||
$tabbar-ios-color: var(--ion-tab-bar-color, defaultTheme.$text-color-step-400) !default;
|
||||
$tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
|
||||
|
||||
// iOS Toolbar
|
||||
// --------------------------------------------------
|
||||
$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7)) !default;
|
||||
$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
|
||||
$toolbar-ios-color: var(--ion-toolbar-color, defaultTheme.$text-color) !default;
|
||||
|
||||
// iOS List & List Items
|
||||
// --------------------------------------------------
|
||||
$item-ios-background: var(--ion-item-background, defaultTheme.$background-color) !default;
|
||||
$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))) !default;
|
||||
$item-ios-color: var(--ion-item-color, defaultTheme.$text-color) !default;
|
||||
|
||||
// iOS Card
|
||||
// --------------------------------------------------
|
||||
$card-ios-background: var(--ion-card-background, $item-ios-background) !default;
|
||||
$card-ios-color: var(--ion-card-color, var(--ion-item-color, defaultTheme.$text-color-step-400)) !default;
|
||||
|
||||
// iOS Form Controls
|
||||
// --------------------------------------------------
|
||||
$form-control-ios-disabled-opacity: 0.3;
|
||||
45
core/src/themes-migrated/ionic.theme.default.md.scss
Normal file
45
core/src/themes-migrated/ionic.theme.default.md.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
@use "ionic.theme.default" as defaultTheme;
|
||||
|
||||
// Material Design Default Theme
|
||||
// --------------------------------------------------
|
||||
// This file should only contain variables that are
|
||||
// used to theme the application colors for Material
|
||||
// Design.
|
||||
|
||||
// Material Design General Colors
|
||||
// --------------------------------------------------
|
||||
$backdrop-md-color: var(--ion-backdrop-color, #000) !default;
|
||||
$border-md-color: var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)) !default;
|
||||
$box-shadow-md-color: var(--ion-box-shadow-color, #000) !default;
|
||||
$overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)) !default;
|
||||
|
||||
// Material Design Tabs & Tab bar
|
||||
// --------------------------------------------------
|
||||
$tabbar-md-background: var(--ion-tab-bar-background, defaultTheme.$background-color) !default;
|
||||
$tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
|
||||
$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .07)))) !default;
|
||||
$tabbar-md-color: var(--ion-tab-bar-color, defaultTheme.$text-color-step-350) !default;
|
||||
$tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
|
||||
|
||||
// Material Design Toolbar
|
||||
// --------------------------------------------------
|
||||
$toolbar-md-background: var(--ion-toolbar-background, defaultTheme.$background-color) !default;
|
||||
$toolbar-md-border-color: var(--ion-toolbar-border-color, $border-md-color) !default;
|
||||
$toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242)) !default;
|
||||
|
||||
// Material Design List & List Items
|
||||
// --------------------------------------------------
|
||||
$item-md-background: var(--ion-item-background, defaultTheme.$background-color) !default;
|
||||
$item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13)))) !default;
|
||||
$item-md-color: var(--ion-item-color, defaultTheme.$text-color) !default;
|
||||
|
||||
// Material Design Card
|
||||
// --------------------------------------------------
|
||||
$card-md-background: var(--ion-card-background, $item-md-background) !default;
|
||||
$card-md-color: var(--ion-card-color, var(--ion-item-color, defaultTheme.$text-color-step-450)) !default;
|
||||
|
||||
// Material Design Form Controls
|
||||
// --------------------------------------------------
|
||||
/// This value comes from the Material Design spec:
|
||||
/// https://m3.material.io/components/text-fields/specs
|
||||
$form-control-md-disabled-opacity: 0.38;
|
||||
150
core/src/themes-migrated/ionic.theme.default.scss
Normal file
150
core/src/themes-migrated/ionic.theme.default.scss
Normal file
@@ -0,0 +1,150 @@
|
||||
@use "sass:color";
|
||||
|
||||
@use "ionic.functions.color" as colorFunctions;
|
||||
|
||||
// Ionic Theme
|
||||
// -------------------------------------------------------------------------------------------
|
||||
// This file contains the theme variables shared
|
||||
// between modes. This should only include variables
|
||||
// used to theme the application colors.
|
||||
|
||||
// Default Ionic Colors
|
||||
// -------------------------------------------------------------------------------------------
|
||||
// Color map should provide
|
||||
// - base: main color to be used.
|
||||
// - contrast: Color that will provide readable text against the base color
|
||||
// - shade: 12% darker version of the base color (mix with black)
|
||||
// - tint: 10% lighter version of the base color (mix with white)
|
||||
|
||||
$primary: #3880ff !default;
|
||||
$secondary: #3dc2ff !default;
|
||||
$tertiary: #5260ff !default;
|
||||
$success: #2dd36f !default;
|
||||
$warning: #ffc409 !default;
|
||||
$danger: #eb445a !default;
|
||||
$light: #f4f5f8 !default;
|
||||
$medium: #92949c !default;
|
||||
$dark: #222428 !default;
|
||||
|
||||
$colors: (
|
||||
primary: (
|
||||
base: $primary,
|
||||
contrast: #fff,
|
||||
shade: colorFunctions.get-color-shade($primary),
|
||||
tint: colorFunctions.get-color-tint($primary)
|
||||
),
|
||||
secondary: (
|
||||
base: $secondary,
|
||||
contrast: #fff,
|
||||
shade: colorFunctions.get-color-shade($secondary),
|
||||
tint: colorFunctions.get-color-tint($secondary)
|
||||
),
|
||||
tertiary: (
|
||||
base: $tertiary,
|
||||
contrast: #fff,
|
||||
shade: colorFunctions.get-color-shade($tertiary),
|
||||
tint: colorFunctions.get-color-tint($tertiary)
|
||||
),
|
||||
success: (
|
||||
base: $success,
|
||||
contrast: #fff,
|
||||
shade: colorFunctions.get-color-shade($success),
|
||||
tint: colorFunctions.get-color-tint($success)
|
||||
),
|
||||
warning: (
|
||||
base: $warning,
|
||||
contrast: #000,
|
||||
shade: colorFunctions.get-color-shade($warning),
|
||||
tint: colorFunctions.get-color-tint($warning)
|
||||
),
|
||||
danger: (
|
||||
base: $danger,
|
||||
contrast: #fff,
|
||||
shade: colorFunctions.get-color-shade($danger),
|
||||
tint: colorFunctions.get-color-tint($danger)
|
||||
),
|
||||
light: (
|
||||
base: $light,
|
||||
contrast: #000,
|
||||
shade: colorFunctions.get-color-shade($light),
|
||||
tint: colorFunctions.get-color-tint($light)
|
||||
),
|
||||
medium: (
|
||||
base: $medium,
|
||||
contrast: #fff,
|
||||
shade: colorFunctions.get-color-shade($medium),
|
||||
tint: colorFunctions.get-color-tint($medium)
|
||||
),
|
||||
dark: (
|
||||
base: $dark,
|
||||
contrast: #fff,
|
||||
shade: colorFunctions.get-color-shade($dark),
|
||||
tint: colorFunctions.get-color-tint($dark)
|
||||
)
|
||||
) !default;
|
||||
|
||||
// Default Foreground and Background Colors
|
||||
// -------------------------------------------------------------------------------------------
|
||||
// Used internally to calculate the default steps
|
||||
|
||||
$background-color-value: #fff !default;
|
||||
$background-color-rgb-value: 255, 255, 255 !default;
|
||||
|
||||
$text-color-value: #000 !default;
|
||||
$text-color-rgb-value: 0, 0, 0 !default;
|
||||
|
||||
$background-color: var(--ion-background-color, $background-color-value) !default;
|
||||
$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value) !default;
|
||||
$text-color: var(--ion-text-color, $text-color-value) !default;
|
||||
$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value) !default;
|
||||
|
||||
// Default Foreground and Background Step Colors
|
||||
// -------------------------------------------------------------------------------------------
|
||||
// Color Steps are used to provide variations in text and background colors of elements.
|
||||
// Steps move towards their contrasting color.
|
||||
// For example, $text-color-step-XXX will be $text-color stepping towards $background-color,
|
||||
// but a $background-color-step-XXX will be $background-color stepping towards $text-color.
|
||||
|
||||
$background-color-step-50: var(--ion-color-step-50, color.mix($text-color-value, $background-color-value, 5%)) !default;
|
||||
$background-color-step-100: var(--ion-color-step-100, color.mix($text-color-value, $background-color-value, 10%)) !default;
|
||||
$background-color-step-150: var(--ion-color-step-150, color.mix($text-color-value, $background-color-value, 15%)) !default;
|
||||
$background-color-step-200: var(--ion-color-step-200, color.mix($text-color-value, $background-color-value, 20%)) !default;
|
||||
$background-color-step-250: var(--ion-color-step-250, color.mix($text-color-value, $background-color-value, 25%)) !default;
|
||||
$background-color-step-300: var(--ion-color-step-300, color.mix($text-color-value, $background-color-value, 30%)) !default;
|
||||
$background-color-step-350: var(--ion-color-step-350, color.mix($text-color-value, $background-color-value, 35%)) !default;
|
||||
$background-color-step-400: var(--ion-color-step-400, color.mix($text-color-value, $background-color-value, 40%)) !default;
|
||||
$background-color-step-450: var(--ion-color-step-450, color.mix($text-color-value, $background-color-value, 45%)) !default;
|
||||
$background-color-step-500: var(--ion-color-step-500, color.mix($text-color-value, $background-color-value, 50%)) !default;
|
||||
$background-color-step-550: var(--ion-color-step-550, color.mix($text-color-value, $background-color-value, 55%)) !default;
|
||||
$background-color-step-600: var(--ion-color-step-600, color.mix($text-color-value, $background-color-value, 60%)) !default;
|
||||
$background-color-step-650: var(--ion-color-step-650, color.mix($text-color-value, $background-color-value, 65%)) !default;
|
||||
$background-color-step-700: var(--ion-color-step-700, color.mix($text-color-value, $background-color-value, 70%)) !default;
|
||||
$background-color-step-750: var(--ion-color-step-750, color.mix($text-color-value, $background-color-value, 75%)) !default;
|
||||
$background-color-step-800: var(--ion-color-step-800, color.mix($text-color-value, $background-color-value, 80%)) !default;
|
||||
$background-color-step-850: var(--ion-color-step-850, color.mix($text-color-value, $background-color-value, 85%)) !default;
|
||||
$background-color-step-900: var(--ion-color-step-900, color.mix($text-color-value, $background-color-value, 90%)) !default;
|
||||
$background-color-step-950: var(--ion-color-step-950, color.mix($text-color-value, $background-color-value, 95%)) !default;
|
||||
$text-color-step-50: var(--ion-color-step-950, color.mix($background-color-value, $text-color-value, 5%)) !default;
|
||||
$text-color-step-100: var(--ion-color-step-900, color.mix($background-color-value, $text-color-value, 10%)) !default;
|
||||
$text-color-step-150: var(--ion-color-step-850, color.mix($background-color-value, $text-color-value, 15%)) !default;
|
||||
$text-color-step-200: var(--ion-color-step-800, color.mix($background-color-value, $text-color-value, 20%)) !default;
|
||||
$text-color-step-250: var(--ion-color-step-750, color.mix($background-color-value, $text-color-value, 25%)) !default;
|
||||
$text-color-step-300: var(--ion-color-step-700, color.mix($background-color-value, $text-color-value, 30%)) !default;
|
||||
$text-color-step-350: var(--ion-color-step-650, color.mix($background-color-value, $text-color-value, 35%)) !default;
|
||||
$text-color-step-400: var(--ion-color-step-600, color.mix($background-color-value, $text-color-value, 40%)) !default;
|
||||
$text-color-step-450: var(--ion-color-step-550, color.mix($background-color-value, $text-color-value, 45%)) !default;
|
||||
$text-color-step-500: var(--ion-color-step-500, color.mix($background-color-value, $text-color-value, 50%)) !default;
|
||||
$text-color-step-550: var(--ion-color-step-450, color.mix($background-color-value, $text-color-value, 55%)) !default;
|
||||
$text-color-step-600: var(--ion-color-step-400, color.mix($background-color-value, $text-color-value, 60%)) !default;
|
||||
$text-color-step-650: var(--ion-color-step-350, color.mix($background-color-value, $text-color-value, 65%)) !default;
|
||||
$text-color-step-700: var(--ion-color-step-300, color.mix($background-color-value, $text-color-value, 70%)) !default;
|
||||
$text-color-step-750: var(--ion-color-step-250, color.mix($background-color-value, $text-color-value, 75%)) !default;
|
||||
$text-color-step-800: var(--ion-color-step-200, color.mix($background-color-value, $text-color-value, 80%)) !default;
|
||||
$text-color-step-850: var(--ion-color-step-150, color.mix($background-color-value, $text-color-value, 85%)) !default;
|
||||
$text-color-step-900: var(--ion-color-step-100, color.mix($background-color-value, $text-color-value, 90%)) !default;
|
||||
$text-color-step-950: var(--ion-color-step-50, color.mix($background-color-value, $text-color-value, 95%)) !default;
|
||||
|
||||
// Default General Colors
|
||||
// --------------------------------------------------
|
||||
$overlay-background-color: var(--ion-overlay-background-color, #fafafa) !default;
|
||||
$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600) !default;
|
||||
136
core/src/themes-migrated/test/css-variables/css/dark.css
Normal file
136
core/src/themes-migrated/test/css-variables/css/dark.css
Normal file
@@ -0,0 +1,136 @@
|
||||
:root {
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66,140,255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80,200,255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
|
||||
--ion-color-tertiary: #6a64ff;
|
||||
--ion-color-tertiary-rgb: 106,100,255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||
--ion-color-tertiary-shade: #5d58e0;
|
||||
--ion-color-tertiary-tint: #7974ff;
|
||||
|
||||
--ion-color-success: #2fdf75;
|
||||
--ion-color-success-rgb: 47,223,117;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0,0,0;
|
||||
--ion-color-success-shade: #29c467;
|
||||
--ion-color-success-tint: #44e283;
|
||||
|
||||
--ion-color-warning: #ffd534;
|
||||
--ion-color-warning-rgb: 255,213,52;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0,0,0;
|
||||
--ion-color-warning-shade: #e0bb2e;
|
||||
--ion-color-warning-tint: #ffd948;
|
||||
|
||||
--ion-color-danger: #ff4961;
|
||||
--ion-color-danger-rgb: 255,73,97;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255,255,255;
|
||||
--ion-color-danger-shade: #e04055;
|
||||
--ion-color-danger-tint: #ff5b71;
|
||||
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244,245,248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0,0,0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152,154,162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0,0,0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #222428;
|
||||
--ion-color-light-rgb: 34,36,40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255,255,255;
|
||||
--ion-color-light-shade: #1e2023;
|
||||
--ion-color-light-tint: #383a3e;
|
||||
}
|
||||
|
||||
.ios body {
|
||||
--ion-background-color: #000000;
|
||||
--ion-background-color-rgb: 0,0,0;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255,255,255;
|
||||
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-item-background: #1c1c1c;
|
||||
|
||||
--ion-toolbar-background: #000;
|
||||
--ion-toolbar-color: #fff;
|
||||
}
|
||||
|
||||
.md body {
|
||||
--ion-background-color: #121212;
|
||||
--ion-background-color-rgb: 18,18,18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255,255,255;
|
||||
|
||||
--ion-border-color: #222222;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-item-background: #1a1b1e;
|
||||
}
|
||||
|
||||
ion-modal.ios {
|
||||
--ion-background-color: var(--ion-color-step-100);
|
||||
--ion-toolbar-background: var(--ion-color-step-150);
|
||||
--ion-toolbar-border-color: var(--ion-color-step-250);
|
||||
--ion-item-background: var(--ion-color-step-150);
|
||||
}
|
||||
75
core/src/themes-migrated/test/css-variables/css/default.css
Normal file
75
core/src/themes-migrated/test/css-variables/css/default.css
Normal file
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* Default
|
||||
* -----------------------------------------------------
|
||||
* The default theme uses a white background with
|
||||
* varying shades of black as contrast and the Ionic
|
||||
* primary color as an accent.
|
||||
*
|
||||
* Looking to create a custom theme? Check out the generator!
|
||||
* https://ionicframework.com/docs/theming/color-generator
|
||||
**/
|
||||
|
||||
/* :root {
|
||||
--ion-color-primary: #3880ff;
|
||||
--ion-color-primary-rgb: 56, 128, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3171e0;
|
||||
--ion-color-primary-tint: #4c8dff;
|
||||
|
||||
--ion-color-secondary: #3dc2ff;
|
||||
--ion-color-secondary-rgb: 61, 194, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #36abe0;
|
||||
--ion-color-secondary-tint: #50c8ff;
|
||||
|
||||
--ion-color-tertiary: #5260ff;
|
||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #4854e0;
|
||||
--ion-color-tertiary-tint: #6370ff;
|
||||
|
||||
--ion-color-success: #2dd36f;
|
||||
--ion-color-success-rgb: 45, 211, 111;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-success-shade: #28ba62;
|
||||
--ion-color-success-tint: #42d77d;
|
||||
|
||||
--ion-color-warning: #ffc409;
|
||||
--ion-color-warning-rgb: 255, 196, 9;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0ac08;
|
||||
--ion-color-warning-tint: #ffca22;
|
||||
|
||||
--ion-color-danger: #eb445a;
|
||||
--ion-color-danger-rgb: 235, 68, 90;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #cf3c4f;
|
||||
--ion-color-danger-tint: #ed576b;
|
||||
|
||||
--ion-color-dark: #222428;
|
||||
--ion-color-dark-rgb: 34, 36, 40;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-dark-shade: #1e2023;
|
||||
--ion-color-dark-tint: #383a3e;
|
||||
|
||||
--ion-color-medium: #92949c;
|
||||
--ion-color-medium-rgb: 146, 148, 156;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-medium-shade: #808289;
|
||||
--ion-color-medium-tint: #9d9fa6;
|
||||
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244, 245, 248;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-light-shade: #d7d8da;
|
||||
--ion-color-light-tint: #f5f6f9;
|
||||
} */
|
||||
119
core/src/themes-migrated/test/css-variables/css/oceanic.css
Normal file
119
core/src/themes-migrated/test/css-variables/css/oceanic.css
Normal file
@@ -0,0 +1,119 @@
|
||||
/**
|
||||
* Oceanic
|
||||
* -----------------------------------------------------
|
||||
* The Oceanic theme uses dark backgrounds with hues
|
||||
* of gray and blue and changes the Ionic colors to
|
||||
* less vibrant shades.
|
||||
*
|
||||
* Looking to create a custom theme? Check out the generator!
|
||||
* https://ionicframework.com/docs/theming/color-generator
|
||||
**/
|
||||
|
||||
:root {
|
||||
/* Ionic Colors */
|
||||
--ion-color-primary: #549ee7;
|
||||
--ion-color-primary-contrast: #fff;
|
||||
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||
--ion-color-primary-rgb: 84,158,231;
|
||||
--ion-color-primary-shade: #498bce;
|
||||
--ion-color-primary-tint: #59aafc;
|
||||
|
||||
--ion-color-secondary: #5fb3b3;
|
||||
--ion-color-secondary-contrast: #fff;
|
||||
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||
--ion-color-secondary-rgb: 95,179,179;
|
||||
--ion-color-secondary-shade: #34a29d;
|
||||
--ion-color-secondary-tint: #6ececf;
|
||||
|
||||
--ion-color-tertiary: #fac863;
|
||||
--ion-color-tertiary-contrast: #fff;
|
||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||
--ion-color-tertiary-rgb: 250,200,99;
|
||||
--ion-color-tertiary-shade: #eab30f;
|
||||
--ion-color-tertiary-tint: #ffd36a;
|
||||
|
||||
--ion-color-success: #90d089;
|
||||
--ion-color-success-contrast: #fff;
|
||||
--ion-color-success-contrast-rgb: 255,255,255;
|
||||
--ion-color-success-rgb: 144,208,137;
|
||||
--ion-color-success-shade: #81bc7b;
|
||||
--ion-color-success-tint: #a1eb9a;
|
||||
|
||||
--ion-color-warning: #f99157;
|
||||
--ion-color-warning-contrast: #fff;
|
||||
--ion-color-warning-contrast-rgb: 255,255,255;
|
||||
--ion-color-warning-rgb: 249,145,87;
|
||||
--ion-color-warning-shade: #ec8a54;
|
||||
--ion-color-warning-tint: #ff9e60;
|
||||
|
||||
--ion-color-danger: #ec5f67;
|
||||
--ion-color-danger-contrast: #fff;
|
||||
--ion-color-danger-contrast-rgb: 255,255,255;
|
||||
--ion-color-danger-rgb: 236,95,103;
|
||||
--ion-color-danger-shade: #cb535b;
|
||||
--ion-color-danger-tint: #ff707b;
|
||||
|
||||
--ion-color-light: #d8dee9;
|
||||
--ion-color-light-contrast: #1b2b34;
|
||||
--ion-color-light-contrast-rgb: 27,43,52;
|
||||
--ion-color-light-rgb: 216,222,233;
|
||||
--ion-color-light-shade: #bcc1cd;
|
||||
--ion-color-light-tint: #ecf2ff;
|
||||
|
||||
--ion-color-medium: #65737e;
|
||||
--ion-color-medium-contrast: #fff;
|
||||
--ion-color-medium-contrast-rgb: 255,255,255;
|
||||
--ion-color-medium-rgb: 101,115,126;
|
||||
--ion-color-medium-shade: #4f5b66;
|
||||
--ion-color-medium-tint: #a7adba;
|
||||
|
||||
--ion-color-dark: #1b2b34;
|
||||
--ion-color-dark-contrast: #d8dee9;
|
||||
--ion-color-dark-contrast-rgb: 216,222,233;
|
||||
--ion-color-dark-rgb: 27,43,52;
|
||||
--ion-color-dark-shade: #070b0d;
|
||||
--ion-color-dark-tint: #343d46;
|
||||
|
||||
/* Component Colors */
|
||||
--ion-backdrop-color: #1b2b34;
|
||||
--ion-overlay-background-color: #142129;
|
||||
|
||||
--ion-border-color: #1b2b34;
|
||||
--ion-box-shadow-color: #000;
|
||||
|
||||
--ion-tab-bar-background: #343d46;
|
||||
--ion-tab-bar-background-focused: #293039;
|
||||
--ion-tab-bar-color: #a7adba;
|
||||
--ion-tab-bar-color-selected: #549ee7;
|
||||
|
||||
--ion-toolbar-background: #343d46;
|
||||
--ion-toolbar-color: #a7adba;
|
||||
|
||||
/* Background, Text, Step Colors */
|
||||
--ion-background-color: #1b2b34;
|
||||
--ion-background-color-rgb: 27,43,52;
|
||||
|
||||
--ion-text-color: #fff;
|
||||
--ion-text-color-rgb: 255,255,255;
|
||||
|
||||
--ion-color-step-50: #26363e;
|
||||
--ion-color-step-100: #324048;
|
||||
--ion-color-step-150: #3d4b52;
|
||||
--ion-color-step-200: #49555d;
|
||||
--ion-color-step-250: #546067;
|
||||
--ion-color-step-300: #5f6b71;
|
||||
--ion-color-step-350: #6b757b;
|
||||
--ion-color-step-400: #768085;
|
||||
--ion-color-step-450: #828a8f;
|
||||
--ion-color-step-500: #8d959a;
|
||||
--ion-color-step-550: #98a0a4;
|
||||
--ion-color-step-600: #a4aaae;
|
||||
--ion-color-step-650: #afb5b8;
|
||||
--ion-color-step-700: #bbbfc2;
|
||||
--ion-color-step-750: #c6cacc;
|
||||
--ion-color-step-800: #d1d5d6;
|
||||
--ion-color-step-850: #dddfe1;
|
||||
--ion-color-step-900: #e8eaeb;
|
||||
--ion-color-step-950: #f4f4f5;
|
||||
--ion-color-step-1000: #fff;
|
||||
}
|
||||
26
core/src/themes-migrated/test/css-variables/css/toolbar.css
Normal file
26
core/src/themes-migrated/test/css-variables/css/toolbar.css
Normal file
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* Toolbar
|
||||
* -----------------------------------------------------
|
||||
* The toolbar theme customizes the toolbar only
|
||||
*
|
||||
* Looking to create a custom theme? Check out the generator!
|
||||
* https://ionicframework.com/docs/theming/color-generator
|
||||
**/
|
||||
|
||||
:root {
|
||||
--ion-color-primary: #3880ff;
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244, 245, 248;
|
||||
|
||||
--ion-toolbar-background: var(--ion-color-primary);
|
||||
--ion-toolbar-color: var(--ion-color-light);
|
||||
}
|
||||
|
||||
.md body {
|
||||
--ion-toolbar-segment-color: rgba(var(--ion-color-light-rgb), .7);
|
||||
--ion-toolbar-segment-color-checked: var(--ion-color-light);
|
||||
}
|
||||
|
||||
.ios body {
|
||||
--ion-toolbar-segment-color-checked: var(--ion-color-primary);
|
||||
}
|
||||
80
core/src/themes-migrated/test/css-variables/css/vibrant.css
Normal file
80
core/src/themes-migrated/test/css-variables/css/vibrant.css
Normal file
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* Vibrant
|
||||
* -----------------------------------------------------
|
||||
* The vibrant theme uses a white background with
|
||||
* varying shades of black as contrast and the Ionic
|
||||
* colors are all changed to more vibrant shades.
|
||||
*
|
||||
* Looking to create a custom theme? Check out the generator!
|
||||
* https://ionicframework.com/docs/theming/color-generator
|
||||
**/
|
||||
|
||||
:root {
|
||||
--ion-color-primary: #ff7f50;
|
||||
--ion-color-primary-rgb: 255,127,80;
|
||||
--ion-color-primary-contrast: #000000;
|
||||
--ion-color-primary-contrast-rgb: 0,0,0;
|
||||
--ion-color-primary-shade: #e07046;
|
||||
--ion-color-primary-tint: #ff8c62;
|
||||
|
||||
--ion-color-secondary: #17deee;
|
||||
--ion-color-secondary-rgb: 23,222,238;
|
||||
--ion-color-secondary-contrast: #000000;
|
||||
--ion-color-secondary-contrast-rgb: 0,0,0;
|
||||
--ion-color-secondary-shade: #14c3d1;
|
||||
--ion-color-secondary-tint: #2ee1f0;
|
||||
|
||||
--ion-color-tertiary: #ff4162;
|
||||
--ion-color-tertiary-rgb: 255,65,98;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||
--ion-color-tertiary-shade: #e03956;
|
||||
--ion-color-tertiary-tint: #ff5472;
|
||||
|
||||
--ion-color-success: #39ff14;
|
||||
--ion-color-success-rgb: 57,255,20;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0,0,0;
|
||||
--ion-color-success-shade: #32e012;
|
||||
--ion-color-success-tint: #4dff2c;
|
||||
|
||||
--ion-color-warning: #ffce00;
|
||||
--ion-color-warning-rgb: 255,206,0;
|
||||
--ion-color-warning-contrast: #ffffff;
|
||||
--ion-color-warning-contrast-rgb: 255,255,255;
|
||||
--ion-color-warning-shade: #e0b500;
|
||||
--ion-color-warning-tint: #ffd31a;
|
||||
|
||||
--ion-color-danger: #f04141;
|
||||
--ion-color-danger-rgb: 245,61,61;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255,255,255;
|
||||
--ion-color-danger-shade: #d33939;
|
||||
--ion-color-danger-tint: #f25454;
|
||||
|
||||
--ion-color-dark: #222428;
|
||||
--ion-color-dark-rgb: 34,34,34;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255,255,255;
|
||||
--ion-color-dark-shade: #1e2023;
|
||||
--ion-color-dark-tint: #383a3e;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152,154,162;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255,255,255;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244,244,244;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--ion-color-light-contrast-rgb: 0,0,0;
|
||||
--ion-color-light-shade: #d7d8da;
|
||||
--ion-color-light-tint: #f5f6f9;
|
||||
|
||||
/* Item Backgrounds */
|
||||
--ion-background-color: #778899;
|
||||
--ion-item-background: #fff;
|
||||
--ion-item-border-color: #5bff76;
|
||||
}
|
||||
1172
core/src/themes-migrated/test/css-variables/index.html
Normal file
1172
core/src/themes-migrated/test/css-variables/index.html
Normal file
File diff suppressed because it is too large
Load Diff
225
core/src/themes-migrated/test/steps/index.html
Normal file
225
core/src/themes-migrated/test/steps/index.html
Normal file
@@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Themes - Steps</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
.block {
|
||||
display: inline-block;
|
||||
height: 60px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.background-step-50 {
|
||||
background: var(--ion-color-step-50, #f2f2f2);
|
||||
}
|
||||
|
||||
.background-step-100 {
|
||||
background: var(--ion-color-step-100, #e6e6e6);
|
||||
}
|
||||
|
||||
.background-step-150 {
|
||||
background: var(--ion-color-step-150, #d9d9d9);
|
||||
}
|
||||
|
||||
.background-step-200 {
|
||||
background: var(--ion-color-step-200, #cccccc);
|
||||
}
|
||||
|
||||
.background-step-250 {
|
||||
background: var(--ion-color-step-250, #bfbfbf);
|
||||
}
|
||||
|
||||
.background-step-300 {
|
||||
background: var(--ion-color-step-300, #b3b3b3);
|
||||
}
|
||||
|
||||
.background-step-350 {
|
||||
background: var(--ion-color-step-350, #a6a6a6);
|
||||
}
|
||||
|
||||
.background-step-400 {
|
||||
background: var(--ion-color-step-400, #999999);
|
||||
}
|
||||
|
||||
.background-step-450 {
|
||||
background: var(--ion-color-step-450, #8c8c8c);
|
||||
}
|
||||
|
||||
.background-step-500 {
|
||||
background: var(--ion-color-step-500, gray);
|
||||
}
|
||||
|
||||
.background-step-550 {
|
||||
background: var(--ion-color-step-550, #737373);
|
||||
}
|
||||
|
||||
.background-step-600 {
|
||||
background: var(--ion-color-step-600, #666666);
|
||||
}
|
||||
|
||||
.background-step-650 {
|
||||
background: var(--ion-color-step-650, #595959);
|
||||
}
|
||||
|
||||
.background-step-700 {
|
||||
background: var(--ion-color-step-700, #4d4d4d);
|
||||
}
|
||||
|
||||
.background-step-750 {
|
||||
background: var(--ion-color-step-750, #404040);
|
||||
}
|
||||
|
||||
.background-step-800 {
|
||||
background: var(--ion-color-step-800, #333333);
|
||||
}
|
||||
|
||||
.background-step-850 {
|
||||
background: var(--ion-color-step-850, #262626);
|
||||
}
|
||||
|
||||
.background-step-900 {
|
||||
background: var(--ion-color-step-900, #1a1a1a);
|
||||
}
|
||||
|
||||
.background-step-950 {
|
||||
background: var(--ion-color-step-950, #0d0d0d);
|
||||
}
|
||||
|
||||
.text-step-50 {
|
||||
color: var(--ion-color-step-950, #0d0d0d);
|
||||
}
|
||||
|
||||
.text-step-100 {
|
||||
color: var(--ion-color-step-900, #1a1a1a);
|
||||
}
|
||||
|
||||
.text-step-150 {
|
||||
color: var(--ion-color-step-850, #262626);
|
||||
}
|
||||
|
||||
.text-step-200 {
|
||||
color: var(--ion-color-step-800, #333333);
|
||||
}
|
||||
|
||||
.text-step-250 {
|
||||
color: var(--ion-color-step-750, #404040);
|
||||
}
|
||||
|
||||
.text-step-300 {
|
||||
color: var(--ion-color-step-700, #4d4d4d);
|
||||
}
|
||||
|
||||
.text-step-350 {
|
||||
color: var(--ion-color-step-650, #595959);
|
||||
}
|
||||
|
||||
.text-step-400 {
|
||||
color: var(--ion-color-step-600, #666666);
|
||||
}
|
||||
|
||||
.text-step-450 {
|
||||
color: var(--ion-color-step-550, #737373);
|
||||
}
|
||||
|
||||
.text-step-500 {
|
||||
color: var(--ion-color-step-500, gray);
|
||||
}
|
||||
|
||||
.text-step-550 {
|
||||
color: var(--ion-color-step-450, #8c8c8c);
|
||||
}
|
||||
|
||||
.text-step-600 {
|
||||
color: var(--ion-color-step-400, #999999);
|
||||
}
|
||||
|
||||
.text-step-650 {
|
||||
color: var(--ion-color-step-350, #a6a6a6);
|
||||
}
|
||||
|
||||
.text-step-700 {
|
||||
color: var(--ion-color-step-300, #b3b3b3);
|
||||
}
|
||||
|
||||
.text-step-750 {
|
||||
color: var(--ion-color-step-250, #bfbfbf);
|
||||
}
|
||||
|
||||
.text-step-800 {
|
||||
color: var(--ion-color-step-200, #cccccc);
|
||||
}
|
||||
|
||||
.text-step-850 {
|
||||
color: var(--ion-color-step-150, #d9d9d9);
|
||||
}
|
||||
|
||||
.text-step-900 {
|
||||
color: var(--ion-color-step-100, #e6e6e6);
|
||||
}
|
||||
|
||||
.text-step-950 {
|
||||
color: var(--ion-color-step-50, #f2f2f2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-content class="ion-padding">
|
||||
<div class="block">Background</div>
|
||||
<div class="block background-step-50">Step 50</div>
|
||||
<div class="block background-step-100">Step 100</div>
|
||||
<div class="block background-step-150">Step 150</div>
|
||||
<div class="block background-step-200">Step 200</div>
|
||||
<div class="block background-step-250">Step 250</div>
|
||||
<div class="block background-step-300">Step 300</div>
|
||||
<div class="block background-step-350">Step 350</div>
|
||||
<div class="block background-step-400">Step 400</div>
|
||||
<div class="block background-step-450">Step 450</div>
|
||||
<div class="block background-step-500">Step 500</div>
|
||||
<div class="block background-step-550">Step 550</div>
|
||||
<div class="block background-step-600">Step 600</div>
|
||||
<div class="block background-step-650">Step 650</div>
|
||||
<div class="block background-step-700">Step 700</div>
|
||||
<div class="block background-step-750">Step 750</div>
|
||||
<div class="block background-step-800">Step 800</div>
|
||||
<div class="block background-step-850">Step 850</div>
|
||||
<div class="block background-step-900">Step 900</div>
|
||||
<div class="block background-step-950">Step 950</div>
|
||||
<hr />
|
||||
|
||||
<div class="block">Text</div>
|
||||
<div class="block text-step-50">Step 50</div>
|
||||
<div class="block text-step-100">Step 100</div>
|
||||
<div class="block text-step-150">Step 150</div>
|
||||
<div class="block text-step-200">Step 200</div>
|
||||
<div class="block text-step-250">Step 250</div>
|
||||
<div class="block text-step-300">Step 300</div>
|
||||
<div class="block text-step-350">Step 350</div>
|
||||
<div class="block text-step-400">Step 400</div>
|
||||
<div class="block text-step-450">Step 450</div>
|
||||
<div class="block text-step-500">Step 500</div>
|
||||
<div class="block text-step-550">Step 550</div>
|
||||
<div class="block text-step-600">Step 600</div>
|
||||
<div class="block text-step-650">Step 650</div>
|
||||
<div class="block text-step-700">Step 700</div>
|
||||
<div class="block text-step-750">Step 750</div>
|
||||
<div class="block text-step-800">Step 800</div>
|
||||
<div class="block text-step-850">Step 850</div>
|
||||
<div class="block text-step-900">Step 900</div>
|
||||
<div class="block text-step-950">Step 950</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user