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

color updates

Browse Source
This commit is contained in:
Adam Bradley
2015-08-11 22:10:25 -05:00
parent f70aff1895
commit 147a7e68ff
23 changed files with 265 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
ionic/components/switch/extensions/ios.scss
View File

@@ -2,27 +2,27 @@
// iOS Switch
// --------------------------------------------------
$switch-ios-width: 51px !default;
$switch-ios-height: 32px !default;
$switch-ios-border-width: 2px !default;
$switch-ios-border-radius: 30px !default;
$switch-ios-width: 51px !default;
$switch-ios-height: 32px !default;
$switch-ios-border-width: 2px !default;
$switch-ios-border-radius: 30px !default;
$switch-ios-off-bg-color: #fff !default;
$switch-ios-off-border-color: #e6e6e6 !default;
$switch-ios-off-bg-color: $list-background-color !default;
$switch-ios-off-border-color: $list-border-color !default;
$switch-ios-on-bg-color: get-color(primary, base) !default;
$switch-ios-on-border-color: $switch-ios-on-bg-color !default;
$switch-ios-on-bg-color: color(primary) !default;
$switch-ios-on-border-color: $switch-ios-on-bg-color !default;
$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default;
$switch-ios-handle-height: $switch-ios-handle-width !default;
$switch-ios-handle-radius: $switch-ios-handle-width !default;
$switch-ios-handle-dragging-bg-color: darken(#fff, 5%) !default;
$switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.15) !default;
$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default;
$switch-ios-handle-height: $switch-ios-handle-width !default;
$switch-ios-handle-radius: $switch-ios-handle-width !default;
$switch-ios-handle-dragging-bg-color: darken($switch-ios-off-bg-color, 5%) !default;
$switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.15) !default;
$switch-ios-handle-off-bg-color: #fff !default;
$switch-ios-handle-on-bg-color: #fff !default;
$switch-ios-handle-off-bg-color: $switch-ios-off-bg-color !default;
$switch-ios-handle-on-bg-color: $switch-ios-off-bg-color !default;
$switch-ios-transition-duration: 200ms !default;
$switch-ios-transition-duration: 200ms !default;
.switch[mode="ios"] {
@@ -55,6 +55,19 @@ $switch-ios-transition-duration: 200ms !default;
transition-delay: 100ms;
}
.switch-track::before {
position: absolute;
top: $switch-ios-border-width;
left: $switch-ios-border-width;
right: 50%;
bottom: $switch-ios-border-width;
content: '';
border-radius: $switch-ios-border-radius;
background-color: $switch-ios-off-border-color;
will-change: right;
transition: right $switch-ios-transition-duration;
}
.switch-handle {
position: absolute;
top: $switch-ios-border-width;
@@ -88,6 +101,10 @@ $switch-ios-transition-duration: 200ms !default;
&[aria-checked=true] .switch-track {
opacity: 0;
&::before {
right: 15%;
}
}
&[aria-checked=true] .switch-handle {
@@ -100,3 +117,29 @@ $switch-ios-transition-duration: 200ms !default;
}
}
// iOS Switch Color Mixin
// --------------------------------------------------
@mixin switch-theme-ios($color-name, $bg-on) {
.switch[mode=ios][#{$color-name}] {
&[aria-checked=true] .switch-icon {
background-color: $bg-on;
}
}
}
// Generate iOS Switch Auxiliary Colors
// --------------------------------------------------
@each $color-name, $value in auxiliary-colors() {
@include switch-theme-ios($color-name, $value);
}

2
ionic/components/switch/switch.scss
View File

@@ -15,5 +15,5 @@
.switch[aria-disabled=true] {
pointer-events: none;
opacity: 0.5;
color: gray;
color: $subdued-text-color;
}

4
ionic/components/switch/test/basic/main.html
View File

@@ -24,6 +24,10 @@
Grape, value=grape, init checked, disabled
</ion-switch>
<ion-switch secondary checked="true">
Secondary color
</ion-switch>
</ion-list>
</form>