javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +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

6
ionic/components/alert/alert.ios.scss
View File

@ -41,7 +41,7 @@ $alert-ios-button-margin: 0 !default;
$alert-ios-button-min-width: 50% !default;
$alert-ios-button-min-height: 44px !default;
$alert-ios-button-font-size: 17px !default;
$alert-ios-button-text-color: map-get($colors-ios, primary) !default;
$alert-ios-button-text-color: color($colors-ios, primary) !default;
$alert-ios-button-background-color: transparent !default;
$alert-ios-button-background-color-activated: #e9e9e9 !default;
@ -75,9 +75,9 @@ $alert-ios-checkbox-border-width: 1px !default;
$alert-ios-checkbox-border-style: solid !default;
$alert-ios-checkbox-border-radius: 50% !default;
$alert-ios-checkbox-border-color-off: $list-ios-border-color !default;
$alert-ios-checkbox-border-color-on: map-get($colors-ios, primary) !default;
$alert-ios-checkbox-border-color-on: color($colors-ios, primary) !default;
$alert-ios-checkbox-background-color-off: $list-ios-background-color !default;
$alert-ios-checkbox-background-color-on: map-get($colors-ios, primary) !default;
$alert-ios-checkbox-background-color-on: color($colors-ios, primary) !default;
$alert-ios-checkbox-icon-top: 4px !default;
$alert-ios-checkbox-icon-left: 7px !default;

5
ionic/components/app/app.ios.scss
View File

@ -24,7 +24,8 @@ hr {
height: $hairlines-width;
}
@each $color-name, $color-value in $colors-ios {
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
h1,
h2,
h3,
@ -43,7 +44,7 @@ hr {
sup,
ion-icon {
&[#{$color-name}] {
color: $color-value;
color: $color-base;
}
}
}

13
ionic/components/badge/badge.ios.scss
View File

@ -3,13 +3,14 @@
// iOS Badge
// --------------------------------------------------
$badge-ios-border-radius: 10px !default;
$badge-ios-background-color: map-get($colors-ios, primary) !default;
$badge-ios-border-radius: 10px !default;
$badge-ios-background-color: color($colors-ios, primary) !default;
$badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background-color) !default;
ion-badge {
border-radius: $badge-ios-border-radius;
color: color-inverse($badge-ios-background-color);
color: $badge-ios-text-color;
background-color: $badge-ios-background-color;
}
@ -17,11 +18,11 @@ ion-badge {
// Generate iOS Badge Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
.badge-#{$color-name} {
color: color-inverse($color-value);
background-color: $color-value;
color: $color-contrast;
background-color: $color-base;
}
}

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);
}

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);
}

10
ionic/components/chip/chip.ios.scss
View File

@ -1,18 +1,18 @@
@import "./chip";
// Material Design Chip
// iOS Chip
// --------------------------------------------------
// Generate Material Design Chip Colors
// Generate iOS Chip Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
ion-chip {
ion-icon[#{$color-name}] {
color: color-inverse($color-value);
background-color: $color-value;
color: $color-contrast;
background-color: $color-base;
}
}

6
ionic/components/item/item.ios.scss
View File

@ -207,10 +207,10 @@ ion-item-divider {
// Generate iOS Item Divider Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
ion-item-divider[#{$color-name}] {
color: color-inverse($color-value);
background-color: $color-value;
color: $color-contrast;
background-color: $color-base;
}
}

4
ionic/components/label/label.ios.scss
View File

@ -64,10 +64,10 @@ ion-label[floating] {
// Generate iOS Label colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
ion-label[#{$color-name}] {
color: $color-value;
color: $color-base;
}
}

12
ionic/components/radio/radio.ios.scss
View File

@ -3,7 +3,7 @@
// iOS Radio
// --------------------------------------------------
$radio-ios-color-on: map-get($colors-ios, primary) !default;
$radio-ios-color-on: color($colors-ios, primary) !default;
$radio-ios-icon-width: 16px !default;
$radio-ios-icon-height: 21px !default;
@ -88,13 +88,13 @@ ion-radio {
// iOS Radio Color Mixin
// --------------------------------------------------
@mixin radio-theme-ios($color-name, $color-value) {
@mixin radio-theme-ios($color-name, $color-base) {
ion-radio[#{$color-name}] .radio-checked {
color: $color-value;
color: $color-base;
.radio-inner {
border-color: $color-value;
border-color: $color-base;
}
}
@ -105,8 +105,8 @@ ion-radio {
// Generate iOS Radio Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include radio-theme-ios($color-name, $color-value);
@include radio-theme-ios($color-name, $color-base);
}

8
ionic/components/searchbar/searchbar.ios.scss
View File

@ -194,21 +194,21 @@ ion-searchbar {
// Generate Default Search Bar Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
ion-searchbar[#{$color-name}] {
.searchbar-ios-cancel {
color: $color-value;
color: $color-base;
&:hover:not(.disable-hover) {
color: color-shade($color-value);
color: color-shade($color-base);
}
}
}
.toolbar[#{$color-name}] ion-searchbar {
.searchbar-ios-cancel {
color: color-inverse($color-value);
color: $color-contrast;
}
}

23
ionic/components/segment/segment.ios.scss
View File

@ -7,7 +7,7 @@
$segment-button-ios-background-color: transparent !default;
$segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;
$segment-button-ios-text-color: color-inverse($segment-button-ios-background-color-activated) !default;
$segment-button-ios-text-color: color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default;
$segment-button-ios-activated-transition: 100ms all linear !default;
$segment-button-ios-hover-transition: 100ms all linear !default;
$segment-button-ios-active-transition: 100ms all linear !default;
@ -115,23 +115,23 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
// iOS Segment Button Mixin
// --------------------------------------------------
@mixin ios-segment-button($color-name, $color-value) {
@mixin ios-segment-button($color-name, $color-base, $color-contrast) {
ion-segment[#{$color-name}] .segment-button {
border-color: $color-value;
color: $color-value;
border-color: $color-base;
color: $color-base;
&:hover:not(.segment-activated) {
background-color: rgba($color-value, $segment-button-ios-hover-opacity);
background-color: rgba($color-base, $segment-button-ios-hover-opacity);
}
&:active:not(.segment-activated) {
background-color: rgba($color-value, $segment-button-ios-active-opacity);
background-color: rgba($color-base, $segment-button-ios-active-opacity);
}
&.segment-activated {
color: color-inverse($color-value);
background-color: $color-value;
color: $color-contrast;
background-color: $color-base;
}
}
@ -141,10 +141,11 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
// iOS Segment Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@include ios-segment-button($color-name, $color-value);
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include ios-segment-button($color-name, $color-base, $color-contrast);
.toolbar[#{$color-name}] .segment-button.segment-activated {
color: $color-value;
color: $color-base;
}
}

15
ionic/components/tabs/tabs.ios.scss
View File

@ -114,19 +114,19 @@ ion-tabs[tabbarPlacement=top] tabbar {
// iOS Tabbar Color Mixin
// --------------------------------------------------
@mixin tabbar-ios($color-name, $color-value) {
@mixin tabbar-ios($color-name, $color-base, $color-contrast) {
ion-tabs[#{$color-name}] tabbar {
border-color: darken($color-value, 10%);
background-color: $color-value;
border-color: darken($color-base, 10%);
background-color: $color-base;
.tab-button {
color: color-inverse($color-value);
color: $color-contrast;
}
.tab-button:hover:not(.disable-hover),
.tab-button[aria-selected=true] {
color: color-inverse($color-value);
color: $color-contrast;
}
}
@ -136,6 +136,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
// iOS Tabbar Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@include tabbar-ios($color-name, $color-value);
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include tabbar-ios($color-name, $color-base, $color-contrast);
}

1
ionic/components/tabs/test/colors/e2e.ts Normal file
View File

@ -0,0 +1 @@

17
ionic/components/tabs/test/colors/index.ts Normal file
View File

@ -0,0 +1,17 @@
import {App, Page} from 'ionic-angular';
@Page({template:'hi'})
class E2EPage{}
@App({
templateUrl: 'main.html'
})
class E2EApp {
constructor() {
this.root = E2EPage;
}
}
document.body.innerHTML += '<link href="styles.css" rel="stylesheet">'

71
ionic/components/tabs/test/colors/main.html Normal file
View File

@ -0,0 +1,71 @@
<!-- Default -->
<ion-tabs no-navbar>
<ion-tab tabTitle="Recents" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- Icons -->
<ion-tabs no-navbar selectedIndex="1" primary>
<ion-tab tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- Icons on top of text -->
<ion-tabs no-navbar selectedIndex="2" secondary>
<ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="root"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
</ion-tabs>
<!-- Icons below text -->
<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1" dark>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- Icons right of text -->
<ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0" danger>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- Icons left of text -->
<ion-tabs tabbarLayout="icon-left" no-navbar light>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- No icons -->
<ion-tabs tabbarLayout="icon-hide" no-navbar primary>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- No title -->
<ion-tabs tabbarLayout="title-hide" no-navbar secondary>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- No overflow text -->
<ion-tabs no-navbar danger>
<ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark" [root]="root"></ion-tab>
<ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
<ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
</ion-tabs>

12
ionic/components/tabs/test/colors/styles.css Normal file
View File

@ -0,0 +1,12 @@
ion-tabs {
position: relative;
top: auto;
height: auto;
margin-bottom: 20px;
}
ion-navbar-section,
ion-content-section {
display: none !important;
}

10
ionic/components/toggle/toggle.ios.scss
View File

@ -11,7 +11,7 @@ $toggle-ios-border-radius: $toggle-ios-height / 2 !default;
$toggle-ios-background-color-off: $list-ios-background-color !default;
$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default;
$toggle-ios-background-color-on: map-get($colors-ios, primary) !default;
$toggle-ios-background-color-on: color($colors-ios, primary) !default;
$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
$toggle-ios-handle-height: $toggle-ios-handle-width !default;
@ -171,10 +171,10 @@ ion-toggle {
// iOS Toggle Color Mixin
// --------------------------------------------------
@mixin ios-toggle-theme($color-name, $color-value) {
@mixin ios-toggle-theme($color-name, $color-base) {
ion-toggle[#{$color-name}] .toggle-checked {
background-color: $color-value;
background-color: $color-base;
}
}
@ -183,8 +183,8 @@ ion-toggle {
// Generate iOS Toggle Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include ios-toggle-theme($color-name, $color-value);
@include ios-toggle-theme($color-name, $color-base);
}

29
ionic/components/toolbar/test/colors/main.html
View File

@ -147,6 +147,35 @@
<ion-title>Danger</ion-title>
</ion-toolbar>
<ion-toolbar light>
<ion-buttons start>
<button>
<ion-icon name="contact"></ion-icon>
Clear
</button>
</ion-buttons>
<ion-buttons end>
<button>
Edit
<ion-icon name="create"></ion-icon>
</button>
</ion-buttons>
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar light>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-buttons start>
<button>
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar transparent>
<ion-buttons end>

50
ionic/components/toolbar/toolbar.ios.scss
View File

@ -86,17 +86,17 @@ ion-title {
pointer-events: none;
}
@mixin ios-toolbar-theme($color-name, $color-value) {
@mixin ios-toolbar-theme($color-name, $color-base, $color-contrast) {
.toolbar[#{$color-name}] {
.toolbar-background {
border-color: darken($color-value, 10%);
background: $color-value;
border-color: darken($color-base, 10%);
background: $color-base;
}
.toolbar-title,
.bar-button-default {
color: color-inverse($color-value);
color: $color-contrast;
}
}
}
@ -142,15 +142,14 @@ ion-buttons[right] {
font-size: $toolbar-ios-button-font-size;
}
@mixin ios-bar-button-default($color-name, $color-value) {
@mixin ios-bar-button-default($color-name, $color-base, $color-contrast) {
.bar-button-#{$color-name} {
$fg-color: $color-value;
color: $fg-color;
color: $color-base;
background-color: transparent;
&:hover:not(.disable-hover) {
color: $fg-color;
color: $color-base;
}
&.activated {
@ -176,21 +175,21 @@ ion-buttons[right] {
}
&.activated {
color: color-inverse($bar-button-ios-color);
color: color-contrast($colors-ios, $bar-button-ios-color);
background-color: $bar-button-ios-color;
}
}
@mixin ios-bar-button-outline($color-name, $color-value) {
@mixin ios-bar-button-outline($color-name, $color-base, $color-contrast) {
.bar-button-outline-#{$color-name} {
$fg-color: color-shade($color-value);
$fg-color: color-shade($color-base);
border-color: $fg-color;
color: $fg-color;
background-color: transparent;
&.activated {
color: color-inverse($fg-color);
color: $color-contrast;
background-color: $fg-color;
}
}
@ -202,29 +201,30 @@ ion-buttons[right] {
// --------------------------------------------------
.bar-button-solid {
color: color-inverse($bar-button-ios-color);
color: color-contrast($colors-ios, $bar-button-ios-color);
background-color: $bar-button-ios-color;
&:hover:not(.disable-hover) {
color: color-inverse($bar-button-ios-color);
color: color-contrast($colors-ios, $bar-button-ios-color);
opacity: .4;
}
&.activated {
color: color-inverse($bar-button-ios-color);
color: color-contrast($colors-ios, $bar-button-ios-color);
background-color: color-shade($bar-button-ios-color);
opacity: .4;
}
}
@mixin ios-bar-button-solid($color-name, $color-value) {
@mixin ios-bar-button-solid($color-name, $color-base, $color-contrast) {
.bar-button-solid-#{$color-name} {
color: color-inverse($color-value);
background-color: $color-value;
color: $color-contrast;
background-color: $color-base;
&.activated {
background-color: color-shade($color-value);
color: $color-contrast;
background-color: color-shade($color-base);
}
}
@ -327,11 +327,11 @@ ion-buttons[right] {
// iOS Toolbar Color Generation
// --------------------------------------------------
@include ios-bar-button-default(default, $bar-button-ios-color);
@include ios-bar-button-default(default, $bar-button-ios-color, color-contrast($colors-ios, $bar-button-ios-color));
@each $color-name, $color-value in $colors-ios {
@include ios-toolbar-theme($color-name, $color-value);
@include ios-bar-button-default($color-name, $color-value);
@include ios-bar-button-outline($color-name, $color-value);
@include ios-bar-button-solid($color-name, $color-value);
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include ios-toolbar-theme($color-name, $color-base, $color-contrast);
@include ios-bar-button-default($color-name, $color-base, $color-contrast);
@include ios-bar-button-outline($color-name, $color-base, $color-contrast);
@include ios-bar-button-solid($color-name, $color-base, $color-contrast);
}

20
ionic/themes/dark.ios.scss
View File

@ -3,30 +3,34 @@
// iOS Dark Theme
// ----------------------------------
$colors-ios: map-merge($colors, ()) !default;
$colors-ios: copy-colors($colors) !default;
$text-ios-color: $text-color !default;
$paragraph-ios-color: $paragraph-color !default;
$link-ios-color: map-get($colors-ios, primary) !default;
$link-ios-color: color($colors-ios, primary) !default;
$background-ios-color: $background-color !default;
$subdued-text-ios-color: $subdued-text-color !default;
$font-family-ios-base: $font-family-base !default;
$font-size-ios-base: $font-size-base !default;
// iOS Outer content
// --------------------------------------------------
$outer-content-ios-background-color: $background-color !default;
$content-ios-outer-background: $background-color !default;
// iOS Card
// --------------------------------------------------
$card-ios-header-color: #ddd !default;
// iOS Note
// --------------------------------------------------
$item-ios-note-color: map-get($colors-ios, light) !default;
$item-ios-note-color: color($colors-ios, light) !default;
// iOS Toolbar
// --------------------------------------------------
@ -46,15 +50,13 @@ $list-ios-border-color: $list-border-color !default;
$list-ios-background-color: $list-background-color !default;
$list-ios-activated-background-color: #d9d9d9 !default;
// iOS List header
// --------------------------------------------------
$list-ios-header-color: $text-color !default;
$item-ios-divider-background: #151515 !default;
$item-ios-divider-color: $text-color !default;
ion-list-header {
background-color: $item-ios-divider-background;
}
// iOS Item
// --------------------------------------------------
@ -68,10 +70,12 @@ $item-ios-padding-media-bottom: 10px !default;
$item-ios-padding-icon-top: 10px !default;
$item-ios-padding-icon-bottom: 9px !default;
// iOS Toggle
// --------------------------------------------------
$toggle-ios-handle-background-color: map-get($colors-ios, light) !default;
$toggle-ios-handle-background-color: color($colors-ios, light) !default;
// iOS Icon
// --------------------------------------------------

2
ionic/themes/default.ios.scss
View File

@ -8,7 +8,7 @@ $colors-ios: copy-colors($colors) !default;
$text-ios-color: $text-color !default;
$paragraph-ios-color: $paragraph-color !default;
$link-ios-color: map-get($colors-ios, primary) !default;
$link-ios-color: color($colors-ios, primary) !default;
$background-ios-color: $background-color !default;
$subdued-text-ios-color: $subdued-text-color !default;

120
ionic/util/functions.scss
View File

@ -74,3 +74,123 @@
@function url-encode($val) {
@return str-replace($val, " ", "%20");
}
// Fetch nested keys
// @param {Map} $map - Map
// @param {Arglist} $keys - Keys to fetch
// @return {*}
// --------------------------------------------------
@function map-fetch($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
// Fetch map color value
// @param {Map} $map - Map
// @param {String} $color-name - Color name to get
// @param {String} $color-key - Color key (optional), default base
// @return {Color}
// --------------------------------------------------
@function color($map, $color-name, $color-key:null) {
// Get the value from $color-name in the map
// this can be of type color or a map
$color-value: map-get($map, $color-name);
// If we were given a map we need to grab the value
// of the key that is passed or the base key
@if(type-of($color-value) == map) {
@if($color-key) {
$color-value: map-fetch($map, $color-name, $color-key);
} @else {
$color-value: map-fetch($map, $color-name, base);
}
}
// If it isn't a map then return the value
@return $color-value;
}
// Get the color map key based on the value
// if it doesn't exist then return the value
// --------------------------------------------------
@function color-key($colors, $value) {
@each $color-name, $color-value in $colors {
$base-value: color($colors, $color-name);
@if ($base-value == $value) {
@return map-get($colors, $color-name);
}
}
@return $value;
}
// Fetch map color contrast
// @param {Map} $colors - colors map
// @param {String} $value - color value or color name
//
// Example values
// --------------------------------------------------
// primary | #327eff | #444
// map key | map value | hex color not in map
// --------------------------------------------------
//
// @return {Color}
// --------------------------------------------------
@function color-contrast($colors, $value) {
$color-value: null;
// If the value is a color (i.e. #fff)
// we need to call color-key to see if
// it exists in the color map or not
@if(type-of($value) == color) {
$color-value: color-key($colors, $value);
// If the value is a string (i.e. primary)
// we want to get the value from the map
// where it is the key
} @else {
$color-value: map-get($colors, $value);
}
// If the value is a map
@if(type-of($color-value) == map) {
$color-value: map-get($color-value, contrast);
} @else {
$color-value: color-inverse($color-value);
}
@return $color-value;
}
// Create a list using the colors map
// @param {Map} $colors - colors map
// @return {List} $color-name, $color-base, $color-contrast
// ----------------------------------------------------------
@function get-colors($colors) {
$colors-list: ();
@each $color-name, $color-value in $colors {
$color-base: null;
$color-contrast: null;
@if(type-of($color-value) == map) {
$color-base: map-get($color-value, base);
$color-contrast: map-get($color-value, contrast);
} @else {
$color-base: $color-value;
$color-contrast: color-inverse($color-value);
}
$colors-list: append($colors-list, ( $color-name, $color-base, $color-contrast ), comma);
}
@return $colors-list;
}