forked from EVOgeek/Vmeda.Online
67 lines
2.5 KiB
SCSS
67 lines
2.5 KiB
SCSS
/**
|
|
* Imported ionic color functions for SCSS
|
|
* ----------------------------------------------------------------------------
|
|
* Extracted from
|
|
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.functions.color.scss
|
|
*/
|
|
|
|
// 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($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 mix(#000, $color, 12%);
|
|
}
|
|
|
|
// Mixes a color with white to create its tint.
|
|
// --------------------------------------------------------------------------------------------
|
|
@function get-color-tint($color) {
|
|
@return 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)};
|
|
}
|