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

refactor(components): update to use shadow DOM and work with css variables

Browse Source 
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
2018-07-09 12:57:21 -04:00
parent a4659f03b4
commit a7f1f4daa7
710 changed files with 21327 additions and 21181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
core/src/components/toggle/toggle.md.scss
View File

@ -4,7 +4,7 @@
// Material Design Toggle
// -----------------------------------------
.toggle-md {
:host {
@include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
box-sizing: content-box;
@ -15,13 +15,16 @@
height: $toggle-md-track-height;
contain: strict;
--checked-background: #{current-color(base, $toggle-md-track-background-color-alpha-on)};
--checked-knob: #{current-color(base)};
}
// Material Design Toggle Background Track: Unchecked
// -----------------------------------------
.toggle-md .toggle-icon {
.toggle-icon {
@include border-radius($toggle-md-track-height);
position: relative;
@ -41,7 +44,7 @@
// Material Design Toggle Inner Knob: Unchecked
// -----------------------------------------
.toggle-md .toggle-inner {
.toggle-inner {
@include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0);
@include border-radius($toggle-md-handle-border-radius);
@ -66,75 +69,52 @@
// Material Design Toggle Background Track: Checked
// -----------------------------------------
.toggle-md.toggle-checked .toggle-icon {
background-color: $toggle-md-track-background-color-on;
:host(.toggle-checked) .toggle-icon {
background-color: var(--checked-background);
}
// Material Design Toggle Inner Knob: Checked
// -----------------------------------------
.toggle-md.toggle-checked .toggle-inner {
:host(.toggle-checked) .toggle-inner {
@include transform(translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0));
background-color: $toggle-md-handle-background-color-on;
background-color: var(--checked-knob);
}
// Material Design Toggle: Disabled
// -----------------------------------------
.toggle-md.toggle-disabled,
.item-md.item-toggle-disabled ion-label {
:host(.toggle-disabled) {
opacity: $toggle-md-disabled-opacity;
pointer-events: none;
}
.toggle-md.toggle-disabled ion-radio {
opacity: $toggle-md-disabled-opacity;
}
// TODO: move to item
// .item-md.item-toggle-disabled ion-label {
// opacity: $toggle-md-disabled-opacity;
// pointer-events: none;
// }
// .toggle-md.toggle-disabled ion-radio {
// opacity: $toggle-md-disabled-opacity;
// }
// Material Design Toggle Within An Item
// -----------------------------------------
.item-md .toggle-md[slot] {
:host(.in-item[slot]) {
@include margin($toggle-md-media-margin-top, $toggle-md-media-margin-end, $toggle-md-media-margin-bottom, $toggle-md-media-margin-start);
@include padding($toggle-md-item-end-padding-top, $toggle-md-item-end-padding-end, $toggle-md-item-end-padding-bottom, $toggle-md-item-end-padding-start);
cursor: pointer;
}
.item-md .toggle-md[slot="start"] {
:host(.in-item[slot="start"]) {
@include padding($toggle-md-item-start-padding-top, $toggle-md-item-start-padding-end, $toggle-md-item-start-padding-bottom, $toggle-md-item-start-padding-start);
}
.item-md.item-toggle ion-label {
@include margin-horizontal(0, null);
}
// Material Design Color Mixin
// --------------------------------------------------
@mixin toggle-theme-md($color-name) {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-tint: ion-color($colors-md, $color-name, tint, md);
.toggle-md-#{$color-name}.toggle-checked .toggle-icon {
background-color: $color-tint;
}
.toggle-md-#{$color-name}.toggle-checked .toggle-inner {
background-color: $color-base;
}
}
// Generate Material Design Toggle Auxiliary Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@include toggle-theme-md($color-name);
}