mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(css): scope component css to mode
This commit is contained in:
Brandy Carney
committed by
Adam Bradley
Adam Bradley
parent
a154d837a0
commit
750cde38e2
@@ -1,4 +1,4 @@
|
||||
@import "../../globals.ios";
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Toggle
|
||||
// --------------------------------------------------
|
||||
@@ -33,7 +33,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
|
||||
// iOS Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
ion-toggle {
|
||||
.toggle-ios {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ ion-toggle {
|
||||
// iOS Toggle Background Track: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-icon {
|
||||
.toggle-ios .toggle-icon {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
@@ -60,7 +60,7 @@ ion-toggle {
|
||||
// iOS Toggle Background Oval: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-icon::before {
|
||||
.toggle-ios .toggle-icon::before {
|
||||
position: absolute;
|
||||
top: $toggle-ios-border-width;
|
||||
right: $toggle-ios-border-width;
|
||||
@@ -79,7 +79,7 @@ ion-toggle {
|
||||
// iOS Toggle Inner Knob: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-inner {
|
||||
.toggle-ios .toggle-inner {
|
||||
position: absolute;
|
||||
top: $toggle-ios-border-width;
|
||||
left: $toggle-ios-border-width;
|
||||
@@ -98,7 +98,7 @@ ion-toggle {
|
||||
// iOS Toggle Background Track: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-checked {
|
||||
.toggle-ios .toggle-checked {
|
||||
background-color: $toggle-ios-background-color-on;
|
||||
}
|
||||
|
||||
@@ -106,8 +106,8 @@ ion-toggle {
|
||||
// iOS Toggle Background Oval: Activated or Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-activated::before,
|
||||
.toggle-checked::before {
|
||||
.toggle-ios .toggle-activated::before,
|
||||
.toggle-ios .toggle-checked::before {
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@@ -115,7 +115,7 @@ ion-toggle {
|
||||
// iOS Toggle Inner Knob: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-checked .toggle-inner {
|
||||
.toggle-ios .toggle-checked .toggle-inner {
|
||||
transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
|
||||
|
||||
}
|
||||
@@ -123,7 +123,7 @@ ion-toggle {
|
||||
// iOS Toggle Background Oval: Activated and Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-activated.toggle-checked::before {
|
||||
.toggle-ios .toggle-activated.toggle-checked::before {
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@@ -131,7 +131,7 @@ ion-toggle {
|
||||
// iOS Toggle Inner Knob: Activated and Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-activated .toggle-inner {
|
||||
.toggle-ios .toggle-activated .toggle-inner {
|
||||
width: $toggle-ios-handle-width + 6;
|
||||
}
|
||||
|
||||
@@ -139,7 +139,7 @@ ion-toggle {
|
||||
// iOS Toggle Inner Knob: Activated and Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-activated.toggle-checked .toggle-inner {
|
||||
.toggle-ios .toggle-activated.toggle-checked .toggle-inner {
|
||||
// when pressing down on the toggle and IS checked
|
||||
// make the knob wider and move it left a bit
|
||||
left: $toggle-ios-border-width - 6;
|
||||
@@ -149,28 +149,24 @@ ion-toggle {
|
||||
// iOS Toggle: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-disabled,
|
||||
.item-toggle-disabled ion-label {
|
||||
.toggle-ios.toggle-disabled,
|
||||
.item-ios.item-toggle-disabled ion-label {
|
||||
opacity: $toggle-ios-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toggle-disabled ion-radio {
|
||||
opacity: $toggle-ios-disabled-opacity;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-toggle {
|
||||
.item-ios .toggle-ios {
|
||||
margin: $toggle-ios-media-margin;
|
||||
padding: $toggle-ios-item-right-padding;
|
||||
}
|
||||
|
||||
&[item-left] {
|
||||
padding: $toggle-ios-item-left-padding;
|
||||
}
|
||||
.item-ios .toggle-ios[item-left] {
|
||||
padding: $toggle-ios-item-left-padding;
|
||||
}
|
||||
|
||||
|
||||
@@ -179,7 +175,7 @@ ion-toggle {
|
||||
|
||||
@mixin ios-toggle-theme($color-name, $color-base) {
|
||||
|
||||
.toggle-#{$color-name} .toggle-checked {
|
||||
.toggle-ios-#{$color-name} .toggle-checked {
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
@@ -190,7 +186,5 @@ ion-toggle {
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
|
||||
@include ios-toggle-theme($color-name, $color-base);
|
||||
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../globals.md";
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Toggle
|
||||
// --------------------------------------------------
|
||||
@@ -30,7 +30,7 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
|
||||
// Material Design Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
ion-toggle {
|
||||
.toggle-md {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@ ion-toggle {
|
||||
// Material Design Toggle Background Track: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-icon {
|
||||
.toggle-md .toggle-icon {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
@@ -57,7 +57,7 @@ ion-toggle {
|
||||
// Material Design Toggle Inner Knob: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-inner {
|
||||
.toggle-md .toggle-inner {
|
||||
position: absolute;
|
||||
top: ($toggle-md-handle-height - $toggle-md-track-height) / -2;
|
||||
left: 0;
|
||||
@@ -78,7 +78,7 @@ ion-toggle {
|
||||
// Material Design Toggle Background Track: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-checked {
|
||||
.toggle-md .toggle-checked {
|
||||
background-color: $toggle-md-track-background-color-on;
|
||||
}
|
||||
|
||||
@@ -86,7 +86,7 @@ ion-toggle {
|
||||
// Material Design Toggle Inner Knob: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-checked .toggle-inner {
|
||||
.toggle-md .toggle-checked .toggle-inner {
|
||||
background-color: $toggle-md-handle-background-color-on;
|
||||
transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
|
||||
}
|
||||
@@ -95,14 +95,14 @@ ion-toggle {
|
||||
// Material Design Toggle: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-disabled,
|
||||
.item-toggle-disabled ion-label {
|
||||
.toggle-md.toggle-disabled,
|
||||
.item-md.item-toggle-disabled ion-label {
|
||||
opacity: $toggle-md-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toggle-disabled ion-radio {
|
||||
.toggle-md.toggle-disabled ion-radio {
|
||||
opacity: $toggle-md-disabled-opacity;
|
||||
}
|
||||
|
||||
@@ -110,18 +110,18 @@ ion-toggle {
|
||||
// Material Design Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-toggle {
|
||||
.item-md .toggle-md {
|
||||
margin: $toggle-md-media-margin;
|
||||
padding: $toggle-md-item-right-padding;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&[item-left] {
|
||||
padding: $toggle-md-item-left-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.item-toggle ion-label {
|
||||
.item-md .toggle-md[item-left] {
|
||||
padding: $toggle-md-item-left-padding;
|
||||
}
|
||||
|
||||
.item-md.item-toggle ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@@ -131,16 +131,12 @@ ion-toggle {
|
||||
|
||||
@mixin toggle-theme-md($color-name, $color-base) {
|
||||
|
||||
.toggle-#{$color-name} {
|
||||
|
||||
.toggle-checked {
|
||||
background-color: lighten($color-base, 25%);
|
||||
}
|
||||
|
||||
.toggle-checked .toggle-inner {
|
||||
background-color: $color-base;
|
||||
}
|
||||
.toggle-md-#{$color-name} .toggle-checked {
|
||||
background-color: lighten($color-base, 25%);
|
||||
}
|
||||
|
||||
.toggle-md-#{$color-name} .toggle-checked .toggle-inner {
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -150,7 +146,5 @@ ion-toggle {
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
|
||||
@include toggle-theme-md($color-name, $color-base);
|
||||
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../globals.wp";
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
|
||||
// Windows Toggle
|
||||
// --------------------------------------------------
|
||||
@@ -36,7 +36,7 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
|
||||
// Windows Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
ion-toggle {
|
||||
.toggle-wp {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -44,7 +44,7 @@ ion-toggle {
|
||||
// Windows Toggle Background Track: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-icon {
|
||||
.toggle-wp .toggle-icon {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
@@ -62,7 +62,7 @@ ion-toggle {
|
||||
// Windows Toggle Inner Knob: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-inner {
|
||||
.toggle-wp .toggle-inner {
|
||||
position: absolute;
|
||||
top: $toggle-wp-handle-top;
|
||||
left: $toggle-wp-handle-left;
|
||||
@@ -81,7 +81,7 @@ ion-toggle {
|
||||
// Windows Toggle Background Track: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-checked {
|
||||
.toggle-wp .toggle-checked {
|
||||
border-color: $toggle-wp-track-background-color-on;
|
||||
background-color: $toggle-wp-track-background-color-on;
|
||||
}
|
||||
@@ -90,7 +90,7 @@ ion-toggle {
|
||||
// Windows Toggle Inner Knob: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-checked .toggle-inner {
|
||||
.toggle-wp .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);
|
||||
@@ -100,14 +100,14 @@ ion-toggle {
|
||||
// Windows Toggle: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-disabled,
|
||||
.item-toggle-disabled ion-label {
|
||||
.toggle-wp.toggle-disabled,
|
||||
.item-wp.item-toggle-disabled ion-label {
|
||||
opacity: $toggle-wp-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toggle-disabled ion-radio {
|
||||
.toggle-wp.toggle-disabled ion-radio {
|
||||
opacity: $toggle-wp-disabled-opacity;
|
||||
}
|
||||
|
||||
@@ -115,18 +115,18 @@ ion-toggle {
|
||||
// Windows Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-toggle {
|
||||
.item-wp .toggle-wp {
|
||||
margin: $toggle-wp-media-margin;
|
||||
padding: $toggle-wp-item-right-padding;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&[item-left] {
|
||||
padding: $toggle-wp-item-left-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.item-toggle ion-label {
|
||||
.item-wp .toggle-wp[item-left] {
|
||||
padding: $toggle-wp-item-left-padding;
|
||||
}
|
||||
|
||||
.item-wp.item-toggle ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@@ -136,19 +136,14 @@ ion-toggle {
|
||||
|
||||
@mixin toggle-theme-wp($color-name, $color-base, $color-contrast) {
|
||||
|
||||
.toggle-#{$color-name} {
|
||||
|
||||
.toggle-checked {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.toggle-checked .toggle-inner {
|
||||
background-color: $color-contrast;
|
||||
}
|
||||
|
||||
.toggle-wp-#{$color-name} .toggle-checked {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.toggle-wp-#{$color-name} .toggle-checked .toggle-inner {
|
||||
background-color: $color-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user