javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 05:21:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(sass): add the ability to pass a contrast color in the colors map to iOS

Browse Source 
this adds the functions necessary for the other modes as well

BREAKING CHANGE:

Can now pass contrast to the colors map:

```
$colors-ios: (

  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 17:14:39 -04:00
parent 3e88fe9f31
commit ff1a8ac6c7
22 changed files with 372 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ionic/components/checkbox/checkbox.ios.scss
View File

@ -4,18 +4,18 @@
// --------------------------------------------------
$checkbox-ios-background-color-off: $list-ios-background-color !default;
$checkbox-ios-background-color-on: map-get($colors-ios, primary) !default;
$checkbox-ios-background-color-on: color($colors-ios, primary) !default;
$checkbox-ios-icon-size: 21px !default;
$checkbox-ios-icon-border-color-on: map-get($colors-ios, primary) !default;
$checkbox-ios-icon-border-color-off: $list-ios-border-color !default;
$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default;
$checkbox-ios-icon-border-width: 1px !default;
$checkbox-ios-icon-border-style: solid !default;
$checkbox-ios-icon-border-radius: 50% !default;
$checkbox-ios-icon-checkmark-width: 1px !default;
$checkbox-ios-icon-checkmark-style: solid !default;
$checkbox-ios-icon-checkmark-color: $background-ios-color !default;
$checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox-ios-background-color-on) !default;
$checkbox-ios-media-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
@ -99,14 +99,14 @@ ion-checkbox {
// iOS Checkbox Color Mixin
// --------------------------------------------------
@mixin checkbox-theme-ios($color-name, $bg-on) {
@mixin checkbox-theme-ios($color-name, $color-base, $color-contrast) {
ion-checkbox[#{$color-name}] .checkbox-checked {
border-color: $bg-on;
background-color: $bg-on;
border-color: $color-base;
background-color: $color-base;
.checkbox-inner {
border-color: color-inverse($bg-on);
border-color: $color-contrast;
}
}
@ -116,6 +116,6 @@ ion-checkbox {
// Generate iOS Checkbox Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@include checkbox-theme-ios($color-name, $color-value);
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include checkbox-theme-ios($color-name, $color-base, $color-contrast);
}