mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
@@ -16,7 +16,7 @@ $toggle-ios-background-color-on: map-get($colors-ios, primary) !default;
|
||||
$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
|
||||
$toggle-ios-handle-height: $toggle-ios-handle-width !default;
|
||||
$toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default;
|
||||
$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
|
||||
$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default;
|
||||
|
||||
$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default;
|
||||
|
||||
@@ -25,7 +25,7 @@ $toggle-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($i
|
||||
|
||||
$toggle-ios-transition-duration: 300ms !default;
|
||||
|
||||
$toggle-ios-disabled-opacity: 0.3 !default;
|
||||
$toggle-ios-disabled-opacity: .3 !default;
|
||||
|
||||
|
||||
// iOS Toggle
|
||||
@@ -45,27 +45,27 @@ ion-toggle {
|
||||
width: $toggle-ios-width;
|
||||
height: $toggle-ios-height;
|
||||
border-radius: $toggle-ios-border-radius;
|
||||
pointer-events: none;
|
||||
|
||||
background-color: $toggle-ios-border-color-off;
|
||||
transition: background-color $toggle-ios-transition-duration;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Oval: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-icon:before {
|
||||
content: '';
|
||||
.toggle-icon::before {
|
||||
position: absolute;
|
||||
top: $toggle-ios-border-width;
|
||||
right: $toggle-ios-border-width;
|
||||
left: $toggle-ios-border-width;
|
||||
bottom: $toggle-ios-border-width;
|
||||
left: $toggle-ios-border-width;
|
||||
|
||||
border-radius: $toggle-ios-border-radius;
|
||||
background-color: $toggle-ios-background-color-off;
|
||||
|
||||
content: "";
|
||||
transform: scale3d(1, 1, 1);
|
||||
transition: transform $toggle-ios-transition-duration;
|
||||
}
|
||||
@@ -101,8 +101,8 @@ ion-toggle {
|
||||
// iOS Toggle Background Oval: Activated or Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-activated:before,
|
||||
.toggle-checked:before {
|
||||
.toggle-activated::before,
|
||||
.toggle-checked::before {
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@@ -118,7 +118,7 @@ ion-toggle {
|
||||
// iOS Toggle Background Oval: Activated and Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-activated.toggle-checked:before {
|
||||
.toggle-activated.toggle-checked::before {
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@@ -155,15 +155,6 @@ ion-toggle {
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle within an item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-toggle {
|
||||
margin: $toggle-ios-media-margin;
|
||||
padding: $toggle-ios-media-padding;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ $toggle-md-handle-width: 20px !default;
|
||||
$toggle-md-handle-height: 20px !default;
|
||||
$toggle-md-handle-background-color-off: $background-md-color !default;
|
||||
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;
|
||||
$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
|
||||
$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
|
||||
$toggle-md-handle-border-radius: 50% !default;
|
||||
|
||||
$toggle-md-media-margin: 0 !default;
|
||||
@@ -22,7 +22,7 @@ $toggle-md-media-padding: 12px ($item-md-padding-right / 2) 12px
|
||||
|
||||
$toggle-md-transition-duration: 300ms !default;
|
||||
|
||||
$toggle-md-disabled-opacity: 0.3 !default;
|
||||
$toggle-md-disabled-opacity: .3 !default;
|
||||
|
||||
|
||||
// Material Design Toggle
|
||||
@@ -41,11 +41,11 @@ ion-toggle {
|
||||
display: block;
|
||||
width: $toggle-md-track-width;
|
||||
height: $toggle-md-track-height;
|
||||
pointer-events: none;
|
||||
border-radius: $toggle-md-track-height;
|
||||
|
||||
background-color: $toggle-md-track-background-color-off;
|
||||
transition: background-color $toggle-md-transition-duration
|
||||
|
||||
transition: background-color $toggle-md-transition-duration;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -61,12 +61,12 @@ ion-toggle {
|
||||
height: $toggle-md-handle-height;
|
||||
|
||||
border-radius: $toggle-md-handle-border-radius;
|
||||
box-shadow: $toggle-md-handle-box-shadow;
|
||||
|
||||
background-color: $toggle-md-handle-background-color-off;
|
||||
|
||||
transition-property: transform, background-color;
|
||||
box-shadow: $toggle-md-handle-box-shadow;
|
||||
|
||||
transition-duration: $toggle-md-transition-duration;
|
||||
transition-property: transform, background-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ $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;
|
||||
$toggle-wp-disabled-opacity: .3 !default;
|
||||
|
||||
|
||||
// Windows Toggle
|
||||
@@ -45,11 +45,10 @@ ion-toggle {
|
||||
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;
|
||||
border-radius: $toggle-wp-track-height;
|
||||
background-color: $toggle-wp-track-background-color-off;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -73,8 +72,8 @@ ion-toggle {
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-checked {
|
||||
background-color: $toggle-wp-track-background-color-on;
|
||||
border-color: $toggle-wp-track-background-color-on;
|
||||
background-color: $toggle-wp-track-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
@@ -84,7 +83,7 @@ ion-toggle {
|
||||
.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);
|
||||
transform: translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0);
|
||||
}
|
||||
|
||||
|
||||
@@ -124,8 +123,8 @@ ion-toggle {
|
||||
ion-toggle[#{$color-name}] {
|
||||
|
||||
.toggle-checked {
|
||||
background-color: $color-value;
|
||||
border-color: $color-value;
|
||||
background-color: $color-value;
|
||||
}
|
||||
|
||||
.toggle-checked .toggle-inner {
|
||||
|
||||
Reference in New Issue
Block a user