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 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

35
ionic/components/button/button.ios.scss
View File

@@ -8,9 +8,9 @@ $button-ios-margin: .4rem .2rem !default;
$button-ios-padding: 0 1em !default;
$button-ios-font-size: 1.6rem !default;
$button-ios-height: 2.8em !default;
$button-ios-color: map-get($colors-ios, primary) !default;
$button-ios-color: color($colors-ios, primary) !default;
$button-ios-color-activated: color-shade($button-ios-color) !default;
$button-ios-text-color: color-inverse($button-ios-color) !default;
$button-ios-text-color: color-contrast($colors-ios, $button-ios-color) !default;
$button-ios-hover-opacity: .8 !default;
$button-ios-border-radius: 4px !default;
@@ -53,12 +53,12 @@ $button-ios-small-icon-font-size: 1.3em !default;
// iOS Default Button Color Mixin
// --------------------------------------------------
@mixin ios-button-default($color-name, $color-value) {
@mixin ios-button-default($color-name, $color-base, $color-contrast) {
.button-#{$color-name} {
$background-color: $color-value;
$background-color: $color-base;
$background-color-activated: color-shade($background-color);
$fg-color: color-inverse($background-color);
$fg-color: $color-contrast;
color: $fg-color;
background-color: $background-color;
@@ -126,7 +126,7 @@ $button-ios-small-icon-font-size: 1.3em !default;
background-color: transparent;
&.activated {
color: $background-ios-color;
color: color-contrast($colors-ios, $button-ios-color);
background-color: $button-ios-color;
opacity: 1;
}
@@ -139,17 +139,16 @@ $button-ios-small-icon-font-size: 1.3em !default;
// iOS Outline Button Color Mixin
// --------------------------------------------------
@mixin ios-button-outline($color-name, $color-value) {
@mixin ios-button-outline($color-name, $color-base, $color-contrast) {
.button-outline-#{$color-name} {
$fg-color: color-shade($color-value, 5%);
border-color: $fg-color;
color: $fg-color;
border-color: $color-base;
color: $color-base;
background-color: transparent;
&.activated {
color: $background-ios-color;
background-color: $fg-color;
color: $color-contrast;
background-color: $color-base;
}
}
@@ -179,10 +178,10 @@ $button-ios-small-icon-font-size: 1.3em !default;
// iOS Clear Button Color Mixin
// --------------------------------------------------
@mixin ios-button-clear($color-name, $color-value) {
@mixin ios-button-clear($color-name, $color-base, $color-contrast) {
.button-clear-#{$color-name} {
$fg-color: $color-value;
$fg-color: $color-base;
border-color: transparent;
color: $fg-color;
background-color: transparent;
@@ -217,10 +216,10 @@ ion-button-effect {
// Generate iOS Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@include ios-button-default($color-name, $color-value);
@include ios-button-outline($color-name, $color-value);
@include ios-button-clear($color-name, $color-value);
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include ios-button-default($color-name, $color-base, $color-contrast);
@include ios-button-outline($color-name, $color-base, $color-contrast);
@include ios-button-clear($color-name, $color-base, $color-contrast);
}