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

feat(sass): add support for contrast in color map for wp mode

Browse Source 
BREAKING CHANGE:

Can now pass contrast to the colors map:

```
$colors-wp: (

  primary: (
    base: #327eff,
    contrast: yellow
  ),
  secondary: (
    base: #32db64,
    contrast: hotpink
  ),
  danger: #d91e18,
  light: #f4f4f4,
  dark: #222
) !default;
```

references #5445
This commit is contained in:
Brandy Carney
2016-03-22 18:07:59 -04:00
parent 9efa3ea3e6
commit 5f2e737904
17 changed files with 109 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ionic/components/toggle/toggle.wp.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
$toggle-wp-inactive-color: #323232 !default;
$toggle-wp-active-color: map-get($colors-wp, primary) !default;
$toggle-wp-active-color: color($colors-wp, primary) !default;
$toggle-wp-track-width: 40px !default;
$toggle-wp-track-height: 18px !default;
@@ -20,7 +20,7 @@ $toggle-wp-handle-height: 10px !default;
$toggle-wp-handle-top: 2px !default;
$toggle-wp-handle-left: 2px !default;
$toggle-wp-handle-background-color-off: $toggle-wp-inactive-color !default;
$toggle-wp-handle-background-color-on: color-inverse($toggle-wp-active-color) !default;
$toggle-wp-handle-background-color-on: color-contrast($colors-wp, $toggle-wp-active-color) !default;
$toggle-wp-handle-border-radius: 50% !default;
$toggle-wp-media-margin: 0 !default;
@@ -123,17 +123,17 @@ ion-toggle {
// Windows Color Mixin
// --------------------------------------------------
@mixin toggle-theme-wp($color-name, $color-value) {
@mixin toggle-theme-wp($color-name, $color-base) {
ion-toggle[#{$color-name}] {
.toggle-checked {
border-color: $color-value;
background-color: $color-value;
border-color: $color-base;
background-color: $color-base;
}
.toggle-checked .toggle-inner {
background-color: color-inverse($color-value);
background-color: $color-contrast;
}
}
@@ -144,8 +144,8 @@ ion-toggle {
// Generate Windows Toggle Auxiliary Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-wp {
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
@include toggle-theme-wp($color-name, $color-value);
@include toggle-theme-wp($color-name, $color-base);
}