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

fix(sass): rename brightness/inverse sass functions

Browse Source 
Prefix custom sass color functions with color-
Closes #5542
This commit is contained in:
Adam Bradley
2016-02-20 20:34:59 -06:00
parent 27eacd4e0d
commit 892b0071cb
17 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ $badge-ios-background-color: map-get($colors-ios, primary) !default;
ion-badge {
border-radius: $badge-ios-border-radius;
background-color: $badge-ios-background-color;
color: inverse($badge-ios-background-color);
color: color-inverse($badge-ios-background-color);
}
@ -21,7 +21,7 @@ ion-badge {
.badge-#{$color-name} {
background-color: $color-value;
color: inverse($color-value);
color: color-inverse($color-value);
}
}

4
ionic/components/badge/badge.md.scss
View File

@ -10,7 +10,7 @@ $badge-md-background-color: map-get($colors-md, primary) !default;
ion-badge {
border-radius: $badge-md-border-radius;
background-color: $badge-md-background-color;
color: inverse($badge-md-background-color);
color: color-inverse($badge-md-background-color);
}
@ -21,7 +21,7 @@ ion-badge {
.badge-#{$color-name} {
background-color: $color-value;
color: inverse($color-value);
color: color-inverse($color-value);
}
}

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

@ -10,7 +10,7 @@ $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-activated: color-shade($button-ios-color) !default;
$button-ios-text-color: inverse($button-ios-color) !default;
$button-ios-text-color: color-inverse($button-ios-color) !default;
$button-ios-hover-opacity: 0.8 !default;
$button-ios-border-radius: 4px !default;
@ -57,7 +57,7 @@ $button-ios-small-icon-font-size: 1.3em !default;
.button-#{$color-name} {
$bg-color: $color-value;
$bg-color-activated: color-shade($bg-color);
$fg-color: inverse($bg-color);
$fg-color: color-inverse($bg-color);
color: $fg-color;
background-color: $bg-color;

4
ionic/components/button/button.md.scss
View File

@ -23,7 +23,7 @@ $button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
$button-md-color: map-get($colors-md, primary) !default;
$button-md-color-activated: color-shade($button-md-color) !default;
$button-md-text-color: inverse($button-md-color) !default;
$button-md-text-color: color-inverse($button-md-color) !default;
$button-md-hover-opacity: 0.8 !default;
$button-md-large-font-size: 2rem !default;
@ -80,7 +80,7 @@ $button-md-small-icon-font-size: 1.4em !default;
.button-#{$color-name} {
$bg-color: $color-value;
$bg-color-activated: color-shade($bg-color);
$fg-color: inverse($bg-color);
$fg-color: color-inverse($bg-color);
color: $fg-color;
background-color: $bg-color;

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

@ -100,7 +100,7 @@ ion-checkbox {
border-color: $bg-on;
.checkbox-inner {
border-color: inverse($bg-on);
border-color: color-inverse($bg-on);
}
}

2
ionic/components/checkbox/checkbox.md.scss
View File

@ -115,7 +115,7 @@ ion-checkbox + .item-inner ion-label {
border-color: $bg-on;
.checkbox-inner {
border-color: inverse($bg-on);
border-color: color-inverse($bg-on);
}
}

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

@ -15,7 +15,7 @@ ion-chip {
ion-chip {
> ion-icon[#{$color-name}] {
background-color: $color-value;
color: inverse($color-value) !important;
color: color-inverse($color-value) !important;
}
}

2
ionic/components/chip/chip.md.scss
View File

@ -15,7 +15,7 @@ ion-chip {
ion-chip {
> ion-icon [#{$color-name}] {
background-color: $color-value;
color: inverse($color-value) !important;
color: color-inverse($color-value) !important;
}
}

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

@ -198,7 +198,7 @@ ion-item-divider {
@each $color-name, $color-value in $colors-ios {
ion-item-divider[#{$color-name}] {
background-color: $color-value;
color: inverse($color-value);
color: color-inverse($color-value);
}
}

2
ionic/components/item/item.md.scss
View File

@ -165,7 +165,7 @@ ion-item-divider {
@each $color-name, $color-value in $colors-md {
ion-item-divider[#{$color-name}] {
background-color: $color-value;
color: inverse($color-value);
color: color-inverse($color-value);
}
}

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

@ -196,7 +196,7 @@ ion-searchbar {
.toolbar[#{$color-name}] ion-searchbar {
.searchbar-ios-cancel {
color: inverse($color-value);
color: color-inverse($color-value);
}
}

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

@ -7,7 +7,7 @@
$segment-button-ios-bg-color: transparent !default;
$segment-button-ios-bg-color-activated: $toolbar-ios-active-color !default;
$segment-button-ios-text-color: inverse($segment-button-ios-bg-color-activated) !default;
$segment-button-ios-text-color: color-inverse($segment-button-ios-bg-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;
@ -122,7 +122,7 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
}
&.segment-activated {
color: inverse($color-value);
color: color-inverse($color-value);
background-color: $color-value;
}
}

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

@ -117,12 +117,12 @@ ion-tabs[tabbarPlacement=top] tabbar {
background-color: $color-value;
.tab-button {
color: inverse($color-value);
color: color-inverse($color-value);
}
.tab-button:hover:not(.disable-hover),
.tab-button[aria-selected=true] {
color: inverse($color-value);
color: color-inverse($color-value);
}
}

6
ionic/components/tabs/tabs.md.scss
View File

@ -98,16 +98,16 @@ tab-highlight {
background-color: $color-value;
.tab-button {
color: inverse($color-value);
color: color-inverse($color-value);
}
.tab-button:hover:not(.disable-hover),
.tab-button[aria-selected=true] {
color: inverse($color-value);
color: color-inverse($color-value);
}
tab-highlight {
background: inverse($color-value);
background: color-inverse($color-value);
}
}

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

@ -88,7 +88,7 @@ ion-title {
.toolbar-title,
.bar-button-default {
color: inverse($color-value);
color: color-inverse($color-value);
}
}
}
@ -163,7 +163,7 @@ ion-buttons[right] {
}
&.activated {
color: inverse($bar-button-ios-color);
color: color-inverse($bar-button-ios-color);
background-color: $bar-button-ios-color;
}
}
@ -177,7 +177,7 @@ ion-buttons[right] {
background-color: transparent;
&.activated {
color: inverse($fg-color);
color: color-inverse($fg-color);
background-color: $fg-color;
}
}
@ -189,17 +189,17 @@ ion-buttons[right] {
// --------------------------------------------------
.bar-button-solid {
color: inverse($bar-button-ios-color);
color: color-inverse($bar-button-ios-color);
background-color: $bar-button-ios-color;
&:hover:not(.disable-hover) {
opacity: 0.4;
color: inverse($bar-button-ios-color);
color: color-inverse($bar-button-ios-color);
}
&.activated {
opacity: 0.4;
color: inverse($bar-button-ios-color);
color: color-inverse($bar-button-ios-color);
background-color: color-shade($bar-button-ios-color);
}
}
@ -207,7 +207,7 @@ ion-buttons[right] {
@mixin ios-bar-button-solid($color-name, $color-value) {
.bar-button-solid-#{$color-name} {
color: inverse($color-value);
color: color-inverse($color-value);
background-color: $color-value;
&.activated {

12
ionic/components/toolbar/toolbar.md.scss
View File

@ -174,7 +174,7 @@ ion-buttons[right] {
}
&.activated {
color: inverse($bar-button-md-color);
color: color-inverse($bar-button-md-color);
background-color: $bar-button-md-color;
}
}
@ -188,7 +188,7 @@ ion-buttons[right] {
background-color: transparent;
&.activated {
color: inverse($fg-color);
color: color-inverse($fg-color);
background-color: $fg-color;
}
}
@ -200,15 +200,15 @@ ion-buttons[right] {
// --------------------------------------------------
.bar-button-solid {
color: inverse($bar-button-md-color);
color: color-inverse($bar-button-md-color);
background-color: $bar-button-md-color;
&:hover:not(.disable-hover) {
color: inverse($bar-button-md-color);
color: color-inverse($bar-button-md-color);
}
&.activated {
color: inverse($bar-button-md-color);
color: color-inverse($bar-button-md-color);
background-color: color-shade($bar-button-md-color);
}
}
@ -216,7 +216,7 @@ ion-buttons[right] {
@mixin md-bar-button-solid($color-name, $color-value) {
.bar-button-solid-#{$color-name} {
color: inverse($color-value);
color: color-inverse($color-value);
background-color: $color-value;
&.activated {

8
ionic/util/functions.scss
View File

@ -2,13 +2,13 @@
// Color Functions
// --------------------------------------------------
@function brightness($color-value) {
@function color-brightness($color-value) {
@return (red($color-value) * 0.299 + green($color-value) * 0.587 + blue($color-value) * 0.114) / 255 * 100%;
}
@function inverse($color-value, $dark: black, $light: white) {
$brightness: brightness($color-value);
@function color-inverse($color-value, $dark: black, $light: white) {
$brightness: color-brightness($color-value);
$red: red($color-value);
$green: green($color-value);
@ -29,7 +29,7 @@
@function toolbar-button-inverse($color-value) {
@return inverse($color-value, $dark: $toolbar-md-button-color, $light: white);
@return color-inverse($color-value, $dark: $toolbar-md-button-color, $light: white);
}