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

refactor(sass): replace all instances of bg in sass variables with background

Browse Source 
references #5651
This commit is contained in:
Brandy Carney
2016-03-03 12:39:49 -05:00
parent 374efde03f
commit 8db6a855b8
3 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,15 +55,15 @@ $button-ios-small-icon-font-size: 1.3em !default;
@mixin ios-button-default($color-name, $color-value) { @mixin ios-button-default($color-name, $color-value) {
.button-#{$color-name} { .button-#{$color-name} {
$bg-color: $color-value; $background-color: $color-value;
$bg-color-activated: color-shade($bg-color); $background-color-activated: color-shade($background-color);
$fg-color: color-inverse($bg-color); $fg-color: color-inverse($background-color);
color: $fg-color; color: $fg-color;
background-color: $bg-color; background-color: $background-color;
&.activated { &.activated {
background-color: $bg-color-activated; background-color: $background-color-activated;
} }
} }

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

@ -78,20 +78,20 @@ $button-md-small-icon-font-size: 1.4em !default;
@mixin md-button-default($color-name, $color-value) { @mixin md-button-default($color-name, $color-value) {
.button-#{$color-name} { .button-#{$color-name} {
$bg-color: $color-value; $background-color: $color-value;
$bg-color-activated: color-shade($bg-color); $background-color-activated: color-shade($background-color);
$fg-color: color-inverse($bg-color); $fg-color: color-inverse($background-color);
color: $fg-color; color: $fg-color;
background-color: $bg-color; background-color: $background-color;
&:hover:not(.disable-hover) { &:hover:not(.disable-hover) {
background-color: $bg-color; background-color: $background-color;
} }
&.activated { &.activated {
opacity: 1; opacity: 1;
background-color: $bg-color-activated; background-color: $background-color-activated;
} }
ion-button-effect { ion-button-effect {

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

@ -4,10 +4,10 @@
// iOS Segment // iOS Segment
// -------------------------------------------------- // --------------------------------------------------
$segment-button-ios-bg-color: transparent !default; $segment-button-ios-background-color: transparent !default;
$segment-button-ios-bg-color-activated: $toolbar-ios-active-color !default; $segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;
$segment-button-ios-text-color: color-inverse($segment-button-ios-bg-color-activated) !default; $segment-button-ios-text-color: color-inverse($segment-button-ios-background-color-activated) !default;
$segment-button-ios-activated-transition: 100ms all linear !default; $segment-button-ios-activated-transition: 100ms all linear !default;
$segment-button-ios-hover-transition: 100ms all linear !default; $segment-button-ios-hover-transition: 100ms all linear !default;
$segment-button-ios-active-transition: 100ms all linear !default; $segment-button-ios-active-transition: 100ms all linear !default;
@ -37,10 +37,10 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
border-width: $segment-button-ios-border-width; border-width: $segment-button-ios-border-width;
border-style: solid; border-style: solid;
border-color: $segment-button-ios-bg-color-activated; border-color: $segment-button-ios-background-color-activated;
color: $segment-button-ios-bg-color-activated; color: $segment-button-ios-background-color-activated;
background-color: $segment-button-ios-bg-color; background-color: $segment-button-ios-background-color;
ion-icon { ion-icon {
font-size: $segment-button-ios-icon-size; font-size: $segment-button-ios-icon-size;
@ -50,17 +50,17 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
&.segment-activated { &.segment-activated {
opacity: 1; opacity: 1;
color: $segment-button-ios-text-color; color: $segment-button-ios-text-color;
background-color: $segment-button-ios-bg-color-activated; background-color: $segment-button-ios-background-color-activated;
transition: $segment-button-ios-activated-transition; transition: $segment-button-ios-activated-transition;
} }
&:hover:not(.segment-activated) { &:hover:not(.segment-activated) {
background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity); background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-hover-opacity);
transition: $segment-button-ios-hover-transition; transition: $segment-button-ios-hover-transition;
} }
&:active:not(.segment-activated) { &:active:not(.segment-activated) {
background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-active-opacity); background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-active-opacity);
transition: $segment-button-ios-active-transition; transition: $segment-button-ios-active-transition;
} }