javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
77fc7926449c7c1e49af55cdd3343ed8a320529b
ionic-framework/core/src/themes/ionic.theme.default.ios.scss
Manu Mtz.-Almeida 77fc792644 feat(ripple): css variable color
2018-03-24 03:57:18 +01:00

119 lines
12 KiB
SCSS
Raw Blame History

@import "./ionic.theme.default";
// iOS Default Theme
// ----------------------------------
$colors-ios: () !default;
$ion-colors-ios: ();
$colors-ios: ion-extend-colors($colors, $ion-colors-ios, $colors-ios);
// iOS General
// --------------------------------------------------
$content-ios-margin: $content-margin !default;
$content-ios-padding: $content-padding !default;
$font-family-ios-base: $font-family-base !default;
$font-size-ios-base: $font-size-base !default;
// Default iOS Alpha levels
// --------------------------------------------------
$alpha-ios-activated: css-var($alpha-activated, alpha-ios-activated) !default;
$alpha-ios-border-low: css-var($alpha-border-low, alpha-ios-border-low) !default;
$alpha-ios-border-medium: css-var($alpha-border-medium, alpha-ios-border-medium) !default;
$alpha-ios-border-high: css-var($alpha-border-high, alpha-ios-border-high) !default;
$alpha-ios-disabled: css-var($alpha-disabled, alpha-ios-disabled) !default;
$alpha-ios-focused: css-var($alpha-focused, alpha-ios-focused) !default;
$alpha-ios-hover: css-var($alpha-hover, alpha-ios-hover) !default;
$alpha-ios-lowest: css-var($alpha-lowest, alpha-ios-lowest) !default;
$alpha-ios-low: css-var($alpha-low, alpha-ios-low) !default;
$alpha-ios-medium: css-var($alpha-medium, alpha-ios-medium) !default;
$alpha-ios-high: css-var($alpha-high, alpha-ios-high) !default;
$alpha-ios-highest: css-var($alpha-highest, alpha-ios-highest) !default;
// Default Foreground and Background Colors values
// Allows users to override an foreground / background colors
// TODO: @color-mod: remove all this
$background-ios-color-value: $background-color-value !default;
$text-ios-color-value: $text-color-value !default;
// Default iOS Foreground and Background Colors
// --------------------------------------------------
$background-ios-color: css-var($background-ios-color-value, background-ios-color) !default;
$text-ios-color: css-var($text-ios-color-value, text-ios-color) !default;
$placeholder-text-ios-color: css-var($placeholder-text-color, placeholder-text-ios-color) !default;
// Default iOS Background & Text Color Steps
// --------------------------------------------------
$background-ios-color-step-50: css-var(mix($text-ios-color-value, $background-ios-color-value, 5%), background-ios-color-step-50) !default;
$background-ios-color-step-100: css-var(mix($text-ios-color-value, $background-ios-color-value, 10%), background-ios-color-step-100) !default;
$background-ios-color-step-150: css-var(mix($text-ios-color-value, $background-ios-color-value, 15%), background-ios-color-step-150) !default;
$background-ios-color-step-200: css-var(mix($text-ios-color-value, $background-ios-color-value, 20%), background-ios-color-step-200) !default;
$background-ios-color-step-250: css-var(mix($text-ios-color-value, $background-ios-color-value, 25%), background-ios-color-step-250) !default;
$background-ios-color-step-300: css-var(mix($text-ios-color-value, $background-ios-color-value, 30%), background-ios-color-step-300) !default;
$background-ios-color-step-350: css-var(mix($text-ios-color-value, $background-ios-color-value, 35%), background-ios-color-step-350) !default;
$background-ios-color-step-400: css-var(mix($text-ios-color-value, $background-ios-color-value, 40%), background-ios-color-step-400) !default;
$background-ios-color-step-450: css-var(mix($text-ios-color-value, $background-ios-color-value, 45%), background-ios-color-step-450) !default;
$background-ios-color-step-500: css-var(mix($text-ios-color-value, $background-ios-color-value, 50%), background-ios-color-step-500) !default;
$background-ios-color-step-550: css-var(mix($text-ios-color-value, $background-ios-color-value, 55%), background-ios-color-step-550) !default;
$background-ios-color-step-600: css-var(mix($text-ios-color-value, $background-ios-color-value, 60%), background-ios-color-step-600) !default;
$background-ios-color-step-650: css-var(mix($text-ios-color-value, $background-ios-color-value, 65%), background-ios-color-step-650) !default;
$background-ios-color-step-700: css-var(mix($text-ios-color-value, $background-ios-color-value, 70%), background-ios-color-step-700) !default;
$background-ios-color-step-750: css-var(mix($text-ios-color-value, $background-ios-color-value, 75%), background-ios-color-step-750) !default;
$background-ios-color-step-800: css-var(mix($text-ios-color-value, $background-ios-color-value, 80%), background-ios-color-step-800) !default;
$background-ios-color-step-850: css-var(mix($text-ios-color-value, $background-ios-color-value, 85%), background-ios-color-step-850) !default;
$background-ios-color-step-900: css-var(mix($text-ios-color-value, $background-ios-color-value, 90%), background-ios-color-step-900) !default;
$background-ios-color-step-950: css-var(mix($text-ios-color-value, $background-ios-color-value, 95%), background-ios-color-step-950) !default;
$background-ios-color-step-1000: css-var(mix($text-ios-color-value, $background-ios-color-value, 100%), background-ios-color-step-1000) !default;
$text-ios-color-step-50: css-var(mix($background-ios-color-value, $text-ios-color-value, 5%), text-ios-color-step-50) !default;
$text-ios-color-step-100: css-var(mix($background-ios-color-value, $text-ios-color-value, 10%), text-ios-color-step-100) !default;
$text-ios-color-step-150: css-var(mix($background-ios-color-value, $text-ios-color-value, 15%), text-ios-color-step-150) !default;
$text-ios-color-step-200: css-var(mix($background-ios-color-value, $text-ios-color-value, 20%), text-ios-color-step-200) !default;
$text-ios-color-step-250: css-var(mix($background-ios-color-value, $text-ios-color-value, 25%), text-ios-color-step-250) !default;
$text-ios-color-step-300: css-var(mix($background-ios-color-value, $text-ios-color-value, 30%), text-ios-color-step-300) !default;
$text-ios-color-step-350: css-var(mix($background-ios-color-value, $text-ios-color-value, 35%), text-ios-color-step-350) !default;
$text-ios-color-step-400: css-var(mix($background-ios-color-value, $text-ios-color-value, 40%), text-ios-color-step-400) !default;
$text-ios-color-step-450: css-var(mix($background-ios-color-value, $text-ios-color-value, 45%), text-ios-color-step-450) !default;
$text-ios-color-step-500: css-var(mix($background-ios-color-value, $text-ios-color-value, 50%), text-ios-color-step-500) !default;
$text-ios-color-step-550: css-var(mix($background-ios-color-value, $text-ios-color-value, 55%), text-ios-color-step-550) !default;
$text-ios-color-step-600: css-var(mix($background-ios-color-value, $text-ios-color-value, 60%), text-ios-color-step-600) !default;
$text-ios-color-step-650: css-var(mix($background-ios-color-value, $text-ios-color-value, 65%), text-ios-color-step-650) !default;
$text-ios-color-step-700: css-var(mix($background-ios-color-value, $text-ios-color-value, 70%), text-ios-color-step-700) !default;
$text-ios-color-step-750: css-var(mix($background-ios-color-value, $text-ios-color-value, 75%), text-ios-color-step-750) !default;
$text-ios-color-step-800: css-var(mix($background-ios-color-value, $text-ios-color-value, 80%), text-ios-color-step-800) !default;
$text-ios-color-step-850: css-var(mix($background-ios-color-value, $text-ios-color-value, 85%), text-ios-color-step-850) !default;
$text-ios-color-step-900: css-var(mix($background-ios-color-value, $text-ios-color-value, 90%), text-ios-color-step-900) !default;
$text-ios-color-step-950: css-var(mix($background-ios-color-value, $text-ios-color-value, 95%), text-ios-color-step-950) !default;
$text-ios-color-step-1000: css-var(mix($background-ios-color-value, $text-ios-color-value, 100%), text-ios-color-step-1000) !default;
// iOS General Colors
// --------------------------------------------------
$backdrop-ios-color: css-var($backdrop-color, backdrop-ios-color) !default;
$border-ios-color: css-var(#dedede, border-ios-color) !default;
$box-shadow-ios-color: css-var($box-shadow-color, box-shadow-ios-color) !default;
$overlay-ios-background-color: css-var(#f9f9f9, overlay-ios-background-color) !default;
// iOS Tabs & Tab bar
// --------------------------------------------------
$tabbar-ios-background-color: css-var($tabbar-background-color, tabbar-ios-background-color) !default;
$tabbar-ios-background-color-focused: css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default;
$tabbar-ios-translucent-background-color: css-var(rgb(248,248,248), tabbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove
$tabbar-ios-border-color: css-var(rgb(0, 0, 0), tabbar-ios-border-color, $alpha-ios-border-medium) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
$tabbar-ios-text-color: css-var($tabbar-text-color, tabbar-ios-text-color) !default;
$tabbar-ios-text-color-active: css-var(ion-color($colors-ios, primary, base, ios), tabbar-ios-text-color-active) !default;
// iOS Toolbar
// --------------------------------------------------
$toolbar-ios-height: 44px !default;
$toolbar-ios-padding: 4px !default;
$toolbar-ios-background-color: css-var($toolbar-background-color, toolbar-ios-background-color) !default;
$toolbar-ios-translucent-background-color: css-var(rgb(248,248,248), toolbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove
$toolbar-ios-border-color: css-var(rgb(0, 0, 0), toolbar-ios-border-color, $alpha-ios-border-medium) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
$toolbar-ios-color-active: css-var(ion-color($colors-ios, primary, base, ios), toolbar-ios-color-active) !default;
$toolbar-ios-color-inactive: css-var($toolbar-color-inactive, toolbar-ios-color-inactive) !default;
$toolbar-ios-text-color: css-var($toolbar-text-color, toolbar-ios-text-color) !default;
// iOS List & List Items
// --------------------------------------------------
$item-ios-background-color: css-var($background-ios-color, item-ios-background-color) !default;
$item-ios-background-color-active: css-var(#d9d9d9, item-ios-background-color-active) !default;
$item-ios-border-color: css-var($item-border-color, item-ios-border-color) !default;
$item-ios-text-color: css-var($item-text-color, item-ios-text-color) !default;
Reference in New Issue View Git Blame Copy Permalink