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

feat(windows): add toggles

Browse Source 
references #5565
This commit is contained in:
Brandy Carney
2016-02-23 17:44:13 -05:00
parent fe11eccb46
commit b7bcd3930c
2 changed files with 148 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components.wp.scss
View File

@ -15,4 +15,5 @@
"components/content/content.wp",
"components/radio/radio.wp",
"components/segment/segment.wp",
"components/toggle/toggle.wp",
"components/toolbar/toolbar.wp";

147
ionic/components/toggle/toggle.wp.scss Normal file
View File

@ -0,0 +1,147 @@
@import "../../globals.wp";
// Windows Toggle
// --------------------------------------------------
$toggle-wp-inactive-color: #323232 !default;
$toggle-wp-active-color: map-get($colors-wp, primary) !default;
$toggle-wp-track-width: 40px !default;
$toggle-wp-track-height: 18px !default;
$toggle-wp-track-background-color-off: transparent !default;
$toggle-wp-track-background-color-on: $toggle-wp-active-color !default;
$toggle-wp-track-border-width: 2px !default;
$toggle-wp-track-border-color-off: $toggle-wp-inactive-color !default;
$toggle-wp-track-border-color-on: $toggle-wp-active-color !default;
$toggle-wp-handle-width: 10px !default;
$toggle-wp-handle-height: 10px !default;
$toggle-wp-handle-top: 2px !default;
$toggle-wp-handle-left: 2px !default;
$toggle-wp-handle-background-color-off: $toggle-wp-inactive-color !default;
$toggle-wp-handle-background-color-on: color-inverse($toggle-wp-active-color) !default;
$toggle-wp-handle-border-radius: 50% !default;
$toggle-wp-media-margin: 0 !default;
$toggle-wp-media-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default;
$toggle-wp-disabled-opacity: 0.3 !default;
// Windows Toggle
// -----------------------------------------
ion-toggle {
position: relative;
}
// Windows Toggle Background Track: Unchecked
// -----------------------------------------
.toggle-icon {
position: relative;
display: block;
width: $toggle-wp-track-width;
height: $toggle-wp-track-height;
pointer-events: none;
border-radius: $toggle-wp-track-height;
background-color: $toggle-wp-track-background-color-off;
border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off;
}
// Windows Toggle Inner Knob: Unchecked
// -----------------------------------------
.toggle-inner {
position: absolute;
top: $toggle-wp-handle-top;
left: $toggle-wp-handle-left;
width: $toggle-wp-handle-width;
height: $toggle-wp-handle-height;
border-radius: $toggle-wp-handle-border-radius;
background-color: $toggle-wp-handle-background-color-off;
}
// Windows Toggle Background Track: Checked
// -----------------------------------------
.toggle-checked {
background-color: $toggle-wp-track-background-color-on;
border-color: $toggle-wp-track-background-color-on;
}
// Windows Toggle Inner Knob: Checked
// -----------------------------------------
.toggle-checked .toggle-inner {
background-color: $toggle-wp-handle-background-color-on;
// transform: translate3d(23px, 0, 0);
transform: translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ( $toggle-wp-track-border-width * 2 ) - ( $toggle-wp-handle-left * 2 ), 0, 0);
}
// Windows Toggle: Disabled
// -----------------------------------------
.toggle-disabled,
.item-toggle-disabled ion-label {
opacity: $toggle-wp-disabled-opacity;
pointer-events: none;
}
.toggle-disabled ion-radio {
opacity: $toggle-wp-disabled-opacity;
}
// Windows Toggle Within An Item
// -----------------------------------------
.item ion-toggle {
margin: $toggle-wp-media-margin;
padding: $toggle-wp-media-padding;
cursor: pointer;
}
.item-toggle ion-label {
margin-left: 0;
}
// Windows Color Mixin
// --------------------------------------------------
@mixin toggle-theme-wp($color-name, $color-value) {
ion-toggle[#{$color-name}] {
.toggle-checked {
background-color: $color-value;
border-color: $color-value;
}
.toggle-checked .toggle-inner {
background-color: color-inverse($color-value);
}
}
}
// Generate Windows Toggle Auxiliary Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-wp {
@include toggle-theme-wp($color-name, $color-value);
}