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

Merge pull request #749 from georgiknox/toggle-colors

Browse Source 
Fixes #630 added utility colors to toggles
This commit is contained in:
Adam Bradley
2014-03-09 21:27:14 -05:00
parent 8652e487c6 35a052970b
commit a5305ec43f
3 changed files with 61 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
scss/_mixins.scss
View File

@@ -136,6 +136,18 @@
}
// Toggle Mixins
// --------------------------------------------------
@mixin toggle-style($on-border-color, $on-bg-color) {
/* the track when the toggle is "on" */
& input:checked + .track {
border-color: $on-border-color;
background-color: $on-bg-color;
}
}
// Clearfix
// --------------------------------------------------

37
scss/_toggle.scss
View File

@@ -6,6 +6,9 @@
/* the overall container of the toggle */
.toggle {
// set the color defaults
@include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
position: relative;
display: inline-block;
margin: -$toggle-hit-area-expansion;
@@ -16,6 +19,34 @@
background-color: $toggle-handle-dragging-bg-color !important;
}
}
&.toggle-light {
@include toggle-style($toggle-on-light-border, $toggle-on-light-bg);
}
&.toggle-stable {
@include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg);
}
&.toggle-positive {
@include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg);
}
&.toggle-calm {
@include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg);
}
&.toggle-assertive {
@include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg);
}
&.toggle-balanced {
@include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg);
}
&.toggle-energized {
@include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg);
}
&.toggle-royal {
@include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg);
}
&.toggle-dark {
@include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg);
}
}
/* hide the actual input checkbox */
@@ -63,12 +94,6 @@
}
}
/* the track when the toggle is "on" */
.toggle input:checked + .track {
border-color: $toggle-on-border-color;
background-color: $toggle-on-bg-color;
}
/* the handle when the toggle is "on" */
.toggle input:checked + .track .handle {
@include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);

21
scss/_variables.scss
View File

@@ -423,11 +423,26 @@ $toggle-handle-dragging-bg-color: darken(#fff, 5%) !default;
$toggle-off-bg-color: #E5E5E5 !default;
$toggle-off-border-color: #E5E5E5 !default;
$toggle-on-bg-color: $positive !default;
$toggle-on-border-color: $toggle-on-bg-color !default;
$toggle-on-light-bg: $button-light-border !default;
$toggle-on-light-border: $toggle-on-light-bg !default;
$toggle-on-stable-bg: $button-stable-border !default;
$toggle-on-stable-border: $toggle-on-stable-bg !default;
$toggle-on-positive-bg: $positive !default;
$toggle-on-positive-border: $toggle-on-positive-bg !default;
$toggle-on-calm-bg: $calm !default;
$toggle-on-calm-border: $toggle-on-calm-bg !default;
$toggle-on-assertive-bg: $assertive !default;
$toggle-on-assertive-border: $toggle-on-assertive-bg !default;
$toggle-on-balanced-bg: $balanced !default;
$toggle-on-balanced-border: $toggle-on-balanced-bg !default;
$toggle-on-energized-bg: $energized !default;
$toggle-on-energized-border: $toggle-on-energized-bg !default;
$toggle-on-royal-bg: $royal !default;
$toggle-on-royal-border: $toggle-on-royal-bg !default;
$toggle-on-dark-bg: $dark !default;
$toggle-on-dark-border: $toggle-on-dark-bg !default;
$toggle-on-default-bg: $positive !default;
$toggle-on-default-border: $toggle-on-default-bg !default;
$toggle-handle-off-bg-color: $light !default;
$toggle-handle-on-bg-color: $toggle-handle-off-bg-color !default;