mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
chore: migrate chip sass files to use
This commit is contained in:
Brandy Carney
@@ -1,17 +1,20 @@
|
||||
@import "../../themes-migrated/ionic.globals";
|
||||
@use "../../themes-migrated/ionic.globals" as ionic4;
|
||||
@use "../../themes-migrated/ionic.functions.color" as ionic3;
|
||||
@use "../../themes-migrated/ionic.mixins" as ionic2;
|
||||
@use "../../themes-migrated/ionic.theme.default";
|
||||
|
||||
: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(ionic.$text-color-rgb, .12)};
|
||||
--color: #{rgba(ionic.$text-color-rgb, .87)};
|
||||
|
||||
@include border-radius(16px);
|
||||
@include font-smoothing();
|
||||
@include margin(4px);
|
||||
@include padding(7px, 12px);
|
||||
@include ionic2.border-radius(16px);
|
||||
@include ionic2.font-smoothing();
|
||||
@include ionic2.margin(4px);
|
||||
@include ionic2.padding(7px, 12px);
|
||||
|
||||
display: inline-flex;
|
||||
|
||||
@@ -24,7 +27,7 @@
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
|
||||
font-family: $font-family-base;
|
||||
font-family: ionic4.$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: ionic3.current-color(base, .08);
|
||||
color: ionic3.current-color(shade);
|
||||
}
|
||||
|
||||
:host(.ion-color:focus) {
|
||||
background: current-color(base, .12);
|
||||
background: ionic3.current-color(base, .12);
|
||||
}
|
||||
|
||||
:host(.ion-color.ion-activated) {
|
||||
background: current-color(base, .16);
|
||||
background: ionic3.current-color(base, .16);
|
||||
}
|
||||
|
||||
|
||||
@@ -67,21 +70,21 @@
|
||||
}
|
||||
|
||||
:host(.chip-outline) {
|
||||
border-color: rgba($text-color-rgb, .32);
|
||||
border-color: rgba(ionic.$text-color-rgb, .32);
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:host(.chip-outline.ion-color) {
|
||||
border-color: current-color(base, .32);
|
||||
border-color: ionic3.current-color(base, .32);
|
||||
}
|
||||
|
||||
:host(.chip-outline:not(.ion-color):focus) {
|
||||
background: rgba($text-color-rgb, .04);
|
||||
background: rgba(ionic.$text-color-rgb, .04);
|
||||
}
|
||||
|
||||
:host(.chip-outline.ion-activated:not(.ion-color)) {
|
||||
background: rgba($text-color-rgb, .08);
|
||||
background: rgba(ionic.$text-color-rgb, .08);
|
||||
}
|
||||
|
||||
|
||||
@@ -93,15 +96,15 @@
|
||||
}
|
||||
|
||||
:host(:not(.ion-color)) ::slotted(ion-icon) {
|
||||
color: rgba($text-color-rgb, .54);
|
||||
color: rgba(ionic.$text-color-rgb, .54);
|
||||
}
|
||||
|
||||
::slotted(ion-icon:first-child) {
|
||||
@include margin(-4px, 8px, -4px, -4px);
|
||||
@include ionic2.margin(-4px, 8px, -4px, -4px);
|
||||
}
|
||||
|
||||
::slotted(ion-icon:last-child) {
|
||||
@include margin(-4px, -4px, -4px, 8px);
|
||||
@include ionic2.margin(-4px, -4px, -4px, 8px);
|
||||
}
|
||||
|
||||
|
||||
@@ -114,11 +117,11 @@
|
||||
}
|
||||
|
||||
::slotted(ion-avatar:first-child) {
|
||||
@include margin(-4px, 8px, -4px, -8px);
|
||||
@include ionic2.margin(-4px, 8px, -4px, -8px);
|
||||
}
|
||||
|
||||
::slotted(ion-avatar:last-child) {
|
||||
@include margin(-4px, -8px, -4px, 8px);
|
||||
@include ionic2.margin(-4px, -8px, -4px, 8px);
|
||||
}
|
||||
|
||||
|
||||
@@ -130,7 +133,7 @@
|
||||
}
|
||||
|
||||
:host(:focus) {
|
||||
--background: #{rgba($text-color-rgb, .16)};
|
||||
--background: #{rgba(ionic.$text-color-rgb, .16)};
|
||||
}
|
||||
|
||||
|
||||
@@ -138,7 +141,7 @@
|
||||
// ---------------------------------------------
|
||||
|
||||
:host(.ion-activated) {
|
||||
--background: #{rgba($text-color-rgb, .20)};
|
||||
--background: #{rgba(ionic.$text-color-rgb, .20)};
|
||||
}
|
||||
|
||||
|
||||
@@ -147,14 +150,14 @@
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) {
|
||||
--background: #{rgba($text-color-rgb, .16)};
|
||||
--background: #{rgba(ionic.$text-color-rgb, .16)};
|
||||
}
|
||||
|
||||
:host(.ion-color:hover) {
|
||||
background: current-color(base, .12);
|
||||
background: ionic3.current-color(base, .12);
|
||||
}
|
||||
|
||||
:host(.chip-outline:not(.ion-color):hover) {
|
||||
background: rgba($text-color-rgb, .04);
|
||||
background: rgba(ionic.$text-color-rgb, .04);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "sass:map";
|
||||
@use "ionic.theme.default";
|
||||
|
||||
// Gets the active color's css variable from a variation. Alpha is optional.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
// Example usage:
|
||||
@@ -20,8 +24,8 @@
|
||||
// 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($colors, $name);
|
||||
$value: map-get($values, $variation);
|
||||
$values: map.get(ionic.$colors, $name);
|
||||
$value: map.get($values, $variation);
|
||||
$variable: --ion-color-#{$name}-#{$variation};
|
||||
|
||||
@if ($variation == base) {
|
||||
@@ -43,17 +47,17 @@
|
||||
// Mixes a color with black to create its shade.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function get-color-shade($color) {
|
||||
@return mix(#000, $color, 12%);
|
||||
@return color.mix(#000, $color, 12%);
|
||||
}
|
||||
|
||||
// Mixes a color with white to create its tint.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function get-color-tint($color) {
|
||||
@return mix(#fff, $color, 10%);
|
||||
@return color.mix(#fff, $color, 10%);
|
||||
}
|
||||
|
||||
// Converts a color to a comma separated rgb.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function color-to-rgb-list($color) {
|
||||
@return #{red($color)},#{green($color)},#{blue($color)};
|
||||
@return #{color.red($color)},#{color.green($color)},#{color.blue($color)};
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "sass:list";
|
||||
@use "sass:meta";
|
||||
@use "sass:string";
|
||||
// String Utility Functions
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@@ -5,10 +8,10 @@
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
$index: string.index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
@@ -22,20 +25,20 @@
|
||||
// empty array/list
|
||||
$split-arr: ();
|
||||
// first index of separator in string
|
||||
$index: str-index($string, $separator);
|
||||
$index: string.index($string, $separator);
|
||||
// loop through string
|
||||
@while $index != null {
|
||||
// get the substring from the first character to the separator
|
||||
$item: str-slice($string, 1, $index - 1);
|
||||
$item: string.slice($string, 1, $index - 1);
|
||||
// push item to array
|
||||
$split-arr: append($split-arr, $item);
|
||||
$split-arr: list.append($split-arr, $item);
|
||||
// remove item and separator from string
|
||||
$string: str-slice($string, $index + 1);
|
||||
$string: string.slice($string, $index + 1);
|
||||
// find new index of separator
|
||||
$index: str-index($string, $separator);
|
||||
$index: string.index($string, $separator);
|
||||
}
|
||||
// add the remaining string to list (the last item)
|
||||
$split-arr: append($split-arr, $string);
|
||||
$split-arr: list.append($split-arr, $string);
|
||||
|
||||
@return $split-arr;
|
||||
}
|
||||
@@ -45,14 +48,14 @@
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function str-extract($string, $start, $end) {
|
||||
$start-index: str-index($string, $start);
|
||||
$start-index: string.index($string, $start);
|
||||
|
||||
@if $start-index {
|
||||
$post: str-slice($string, $start-index + str-length($start));
|
||||
$end-index: str-index($post, $end);
|
||||
$post: string.slice($string, $start-index + string.length($start));
|
||||
$end-index: string.index($post, $end);
|
||||
|
||||
@if $end-index {
|
||||
@return str-slice($post, 1, $end-index - 1);
|
||||
@return string.slice($post, 1, $end-index - 1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,8 +67,8 @@
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function str-contains($string, $needle) {
|
||||
@if (type-of($string) == string) {
|
||||
@return str-index($string, $needle) != null;
|
||||
@if (meta.type-of($string) == string) {
|
||||
@return string.index($string, $needle) != null;
|
||||
}
|
||||
|
||||
@return false;
|
||||
@@ -102,7 +105,7 @@
|
||||
// @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: append($list, $shadow-element, comma);
|
||||
$list: list.append($list, $shadow-element, comma);
|
||||
|
||||
$new-element: ();
|
||||
$elements: str-split($selector, " ");
|
||||
@@ -123,18 +126,18 @@
|
||||
|
||||
// @include add-root-selector(":host(.fixed)", "[dir=rtl]")
|
||||
// --> :host-context([dir=rtl]).fixed
|
||||
$new-element: append($new-element, $scoped-element, space);
|
||||
$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: append($new-element, $element, space);
|
||||
$new-element: list.append($new-element, $element, space);
|
||||
}
|
||||
}
|
||||
|
||||
$list: append($list, $new-element, comma);
|
||||
$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
|
||||
@@ -153,24 +156,24 @@
|
||||
|
||||
// Add the final selector after all transformations:
|
||||
// :host -> :host-context([dir=rtl])
|
||||
$new-element: append($new-element, $updated-element, space);
|
||||
$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: append($new-element, $element, space);
|
||||
$new-element: list.append($new-element, $element, space);
|
||||
}
|
||||
}
|
||||
|
||||
$list: append($list, $new-element, comma);
|
||||
$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: append($list, "#{$addHostSelector} #{$selector}", comma);
|
||||
$list: append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma);
|
||||
$list: list.append($list, "#{$addHostSelector} #{$selector}", comma);
|
||||
$list: list.append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
|
||||
// Global Utility Functions
|
||||
@import "./ionic.functions.string";
|
||||
@use "ionic.functions.string";
|
||||
|
||||
// Global Color Functions
|
||||
@import "./ionic.functions.color";
|
||||
@use "ionic.functions.color" as ionic2;
|
||||
|
||||
// Global Mixins
|
||||
@import "./ionic.mixins";
|
||||
@use "ionic.mixins" as ionic3;
|
||||
|
||||
// Default Theme
|
||||
@import "./ionic.theme.default";
|
||||
@use "ionic.theme.default" as ionic4;
|
||||
|
||||
|
||||
// Default General
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "sass:string";
|
||||
@use "ionic.functions.string";
|
||||
@use "ionic.globals" as ionic3;
|
||||
|
||||
@mixin input-cover() {
|
||||
@include position(0, null, null, 0);
|
||||
@include margin(0);
|
||||
@@ -79,9 +85,9 @@
|
||||
|
||||
// Get the key from a map based on the index
|
||||
@function index-to-key($map, $index) {
|
||||
$keys: map-keys($map);
|
||||
$keys: map.keys($map);
|
||||
|
||||
@return nth($keys, $index);
|
||||
@return list.nth($keys, $index);
|
||||
}
|
||||
|
||||
|
||||
@@ -102,8 +108,8 @@
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@function breakpoint-min($name, $breakpoints: ionic3.$screen-breakpoints) {
|
||||
$min: map.get($breakpoints, $name);
|
||||
|
||||
@return if($name != index-to-key($breakpoints, 1), $min, null);
|
||||
}
|
||||
@@ -115,13 +121,13 @@
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {
|
||||
@function breakpoint-infix($name, $breakpoints: ionic3.$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: $screen-breakpoints) {
|
||||
@mixin media-breakpoint-up($name, $breakpoints: ionic3.$screen-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@@ -140,9 +146,9 @@
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
@function breakpoint-next($name, $breakpoints: ionic3.$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.
|
||||
@@ -155,14 +161,14 @@
|
||||
//
|
||||
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 767.98px
|
||||
@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
|
||||
$max: map-get($breakpoints, $name);
|
||||
@function breakpoint-max($name, $breakpoints: ionic3.$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: $screen-breakpoints) {
|
||||
@mixin media-breakpoint-down($name, $breakpoints: ionic3.$screen-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@@ -194,9 +200,9 @@
|
||||
@mixin rtl() {
|
||||
$root: #{&};
|
||||
|
||||
$rootSplit: str-split($root, ",");
|
||||
$selectors: #{add-root-selector($root, "[dir=rtl]")};
|
||||
$selectorsSplit: str-split($selectors, ",");
|
||||
$rootSplit: ionic.str-split($root, ",");
|
||||
$selectors: #{ionic.add-root-selector($root, "[dir=rtl]")};
|
||||
$selectorsSplit: ionic.str-split($selectors, ",");
|
||||
|
||||
$hostContextSelectors: ();
|
||||
$restSelectors: ();
|
||||
@@ -210,23 +216,23 @@
|
||||
// @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 str-index($selector, ":host-context") {
|
||||
$hostContextSelectors: append($hostContextSelectors, $selector, comma);
|
||||
@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: append($restSelectors, $selector, comma);
|
||||
$restSelectors: list.append($restSelectors, $selector, comma);
|
||||
}
|
||||
}
|
||||
|
||||
// Supported by Chrome.
|
||||
@if length($hostContextSelectors) > 0 {
|
||||
@if list.length($hostContextSelectors) > 0 {
|
||||
@at-root #{$hostContextSelectors} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Supported by all browsers.
|
||||
@if length($restSelectors) > 0 {
|
||||
@if list.length($restSelectors) > 0 {
|
||||
@at-root #{$restSelectors} {
|
||||
@content;
|
||||
}
|
||||
@@ -245,11 +251,11 @@
|
||||
@each $selector in $rootSplit {
|
||||
$dirSelector: "#{$selector}:dir(rtl)";
|
||||
// Group the selectors back into a single selector to optimize the output.
|
||||
$dirSelectors: append($dirSelectors, $dirSelector, comma);
|
||||
$dirSelectors: list.append($dirSelectors, $dirSelector, comma);
|
||||
}
|
||||
|
||||
// Supported by Firefox.
|
||||
@if length($dirSelectors) > 0 {
|
||||
@if list.length($dirSelectors) > 0 {
|
||||
@at-root #{$dirSelectors} {
|
||||
@content;
|
||||
}
|
||||
@@ -266,20 +272,20 @@
|
||||
// @param {string} $svg
|
||||
// ----------------------------------------------------------
|
||||
@mixin svg-background-image($svg, $flip-rtl: false) {
|
||||
$url: url-encode($svg);
|
||||
$viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
|
||||
$url: ionic.url-encode($svg);
|
||||
$viewBox: ionic.str-split(ionic.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(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
|
||||
$transform: "transform='translate(#{list.nth($viewBox, 3)}, 0) scale(-1, 1)'";
|
||||
$flipped-url: $svg;
|
||||
$flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
|
||||
$flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
|
||||
$flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
|
||||
$flipped-url: url-encode($flipped-url);
|
||||
$flipped-url: ionic.str-replace($flipped-url, "<path", "<path #{$transform}");
|
||||
$flipped-url: ionic.str-replace($flipped-url, "<line", "<line #{$transform}");
|
||||
$flipped-url: ionic.str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
|
||||
$flipped-url: ionic.url-encode($flipped-url);
|
||||
|
||||
@include ltr () {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
@@ -556,15 +562,15 @@
|
||||
$rtl-translate: null;
|
||||
|
||||
@each $transform in $transforms {
|
||||
@if (str-index($transform, translate3d)) {
|
||||
$transform: str-replace($transform, 'translate3d(');
|
||||
$transform: str-replace($transform, ')');
|
||||
@if (string.index($transform, translate3d)) {
|
||||
$transform: ionic.str-replace($transform, 'translate3d(');
|
||||
$transform: ionic.str-replace($transform, ')');
|
||||
|
||||
$coordinates: str-split($transform, ',');
|
||||
$coordinates: ionic.str-split($transform, ',');
|
||||
|
||||
$x: nth($coordinates, 1);
|
||||
$y: nth($coordinates, 2);
|
||||
$z: nth($coordinates, 3);
|
||||
$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);
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "sass:color";
|
||||
@use "ionic.functions.color";
|
||||
|
||||
// Ionic Theme
|
||||
// -------------------------------------------------------------------------------------------
|
||||
// This file contains the theme variables shared
|
||||
@@ -26,56 +29,56 @@ $colors: (
|
||||
primary: (
|
||||
base: $primary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($primary),
|
||||
tint: get-color-tint($primary)
|
||||
shade: ionic.get-color-shade($primary),
|
||||
tint: ionic.get-color-tint($primary)
|
||||
),
|
||||
secondary: (
|
||||
base: $secondary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($secondary),
|
||||
tint: get-color-tint($secondary)
|
||||
shade: ionic.get-color-shade($secondary),
|
||||
tint: ionic.get-color-tint($secondary)
|
||||
),
|
||||
tertiary: (
|
||||
base: $tertiary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($tertiary),
|
||||
tint: get-color-tint($tertiary)
|
||||
shade: ionic.get-color-shade($tertiary),
|
||||
tint: ionic.get-color-tint($tertiary)
|
||||
),
|
||||
success: (
|
||||
base: $success,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($success),
|
||||
tint: get-color-tint($success)
|
||||
shade: ionic.get-color-shade($success),
|
||||
tint: ionic.get-color-tint($success)
|
||||
),
|
||||
warning: (
|
||||
base: $warning,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($warning),
|
||||
tint: get-color-tint($warning)
|
||||
shade: ionic.get-color-shade($warning),
|
||||
tint: ionic.get-color-tint($warning)
|
||||
),
|
||||
danger: (
|
||||
base: $danger,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($danger),
|
||||
tint: get-color-tint($danger)
|
||||
shade: ionic.get-color-shade($danger),
|
||||
tint: ionic.get-color-tint($danger)
|
||||
),
|
||||
light: (
|
||||
base: $light,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($light),
|
||||
tint: get-color-tint($light)
|
||||
shade: ionic.get-color-shade($light),
|
||||
tint: ionic.get-color-tint($light)
|
||||
),
|
||||
medium: (
|
||||
base: $medium,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($medium),
|
||||
tint: get-color-tint($medium)
|
||||
shade: ionic.get-color-shade($medium),
|
||||
tint: ionic.get-color-tint($medium)
|
||||
),
|
||||
dark: (
|
||||
base: $dark,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($dark),
|
||||
tint: get-color-tint($dark)
|
||||
shade: ionic.get-color-shade($dark),
|
||||
tint: ionic.get-color-tint($dark)
|
||||
)
|
||||
) !default;
|
||||
|
||||
@@ -101,44 +104,44 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-va
|
||||
// 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, mix($text-color-value, $background-color-value, 5%)) !default;
|
||||
$background-color-step-100: var(--ion-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default;
|
||||
$background-color-step-150: var(--ion-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default;
|
||||
$background-color-step-200: var(--ion-color-step-200, mix($text-color-value, $background-color-value, 20%)) !default;
|
||||
$background-color-step-250: var(--ion-color-step-250, mix($text-color-value, $background-color-value, 25%)) !default;
|
||||
$background-color-step-300: var(--ion-color-step-300, mix($text-color-value, $background-color-value, 30%)) !default;
|
||||
$background-color-step-350: var(--ion-color-step-350, mix($text-color-value, $background-color-value, 35%)) !default;
|
||||
$background-color-step-400: var(--ion-color-step-400, mix($text-color-value, $background-color-value, 40%)) !default;
|
||||
$background-color-step-450: var(--ion-color-step-450, mix($text-color-value, $background-color-value, 45%)) !default;
|
||||
$background-color-step-500: var(--ion-color-step-500, mix($text-color-value, $background-color-value, 50%)) !default;
|
||||
$background-color-step-550: var(--ion-color-step-550, mix($text-color-value, $background-color-value, 55%)) !default;
|
||||
$background-color-step-600: var(--ion-color-step-600, mix($text-color-value, $background-color-value, 60%)) !default;
|
||||
$background-color-step-650: var(--ion-color-step-650, mix($text-color-value, $background-color-value, 65%)) !default;
|
||||
$background-color-step-700: var(--ion-color-step-700, mix($text-color-value, $background-color-value, 70%)) !default;
|
||||
$background-color-step-750: var(--ion-color-step-750, mix($text-color-value, $background-color-value, 75%)) !default;
|
||||
$background-color-step-800: var(--ion-color-step-800, mix($text-color-value, $background-color-value, 80%)) !default;
|
||||
$background-color-step-850: var(--ion-color-step-850, mix($text-color-value, $background-color-value, 85%)) !default;
|
||||
$background-color-step-900: var(--ion-color-step-900, mix($text-color-value, $background-color-value, 90%)) !default;
|
||||
$background-color-step-950: var(--ion-color-step-950, mix($text-color-value, $background-color-value, 95%)) !default;
|
||||
$text-color-step-50: var(--ion-color-step-950, mix($background-color-value, $text-color-value, 5%)) !default;
|
||||
$text-color-step-100: var(--ion-color-step-900, mix($background-color-value, $text-color-value, 10%)) !default;
|
||||
$text-color-step-150: var(--ion-color-step-850, mix($background-color-value, $text-color-value, 15%)) !default;
|
||||
$text-color-step-200: var(--ion-color-step-800, mix($background-color-value, $text-color-value, 20%)) !default;
|
||||
$text-color-step-250: var(--ion-color-step-750, mix($background-color-value, $text-color-value, 25%)) !default;
|
||||
$text-color-step-300: var(--ion-color-step-700, mix($background-color-value, $text-color-value, 30%)) !default;
|
||||
$text-color-step-350: var(--ion-color-step-650, mix($background-color-value, $text-color-value, 35%)) !default;
|
||||
$text-color-step-400: var(--ion-color-step-600, mix($background-color-value, $text-color-value, 40%)) !default;
|
||||
$text-color-step-450: var(--ion-color-step-550, mix($background-color-value, $text-color-value, 45%)) !default;
|
||||
$text-color-step-500: var(--ion-color-step-500, mix($background-color-value, $text-color-value, 50%)) !default;
|
||||
$text-color-step-550: var(--ion-color-step-450, mix($background-color-value, $text-color-value, 55%)) !default;
|
||||
$text-color-step-600: var(--ion-color-step-400, mix($background-color-value, $text-color-value, 60%)) !default;
|
||||
$text-color-step-650: var(--ion-color-step-350, mix($background-color-value, $text-color-value, 65%)) !default;
|
||||
$text-color-step-700: var(--ion-color-step-300, mix($background-color-value, $text-color-value, 70%)) !default;
|
||||
$text-color-step-750: var(--ion-color-step-250, mix($background-color-value, $text-color-value, 75%)) !default;
|
||||
$text-color-step-800: var(--ion-color-step-200, mix($background-color-value, $text-color-value, 80%)) !default;
|
||||
$text-color-step-850: var(--ion-color-step-150, mix($background-color-value, $text-color-value, 85%)) !default;
|
||||
$text-color-step-900: var(--ion-color-step-100, mix($background-color-value, $text-color-value, 90%)) !default;
|
||||
$text-color-step-950: var(--ion-color-step-50, mix($background-color-value, $text-color-value, 95%)) !default;
|
||||
$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
|
||||
// --------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user