chore(packages): move the packages to root

2025-11-10 00:27:41 +08:00 · 2018-03-12 16:02:25 -04:00
parent 097f1a2cd3
commit d37623a2ca
1255 changed files with 38 additions and 38 deletions
--- a/core/src/components/toggle/toggle.md.scss
+++ b/core/src/components/toggle/toggle.md.scss
@ -0,0 +1,140 @@
+@import "./toggle";
+@import "./toggle.md.vars";
+
+// Material Design Toggle
+// -----------------------------------------
+
+.toggle-md {
+  @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
+
+  box-sizing: content-box;
+
+  position: relative;
+
+  width: $toggle-md-track-width;
+  height: $toggle-md-track-height;
+
+  contain: strict;
+}
+
+
+// Material Design Toggle Background Track: Unchecked
+// -----------------------------------------
+
+.toggle-md .toggle-icon {
+  @include border-radius($toggle-md-track-height);
+
+  position: relative;
+  display: block;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: $toggle-md-track-background-color-off;
+
+  transition: background-color $toggle-md-transition-duration;
+
+  pointer-events: none;
+}
+
+
+// Material Design Toggle Inner Knob: Unchecked
+// -----------------------------------------
+
+.toggle-md .toggle-inner {
+  @include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0);
+  @include border-radius($toggle-md-handle-border-radius);
+
+  position: absolute;
+
+  width: $toggle-md-handle-width;
+  height: $toggle-md-handle-height;
+
+  background-color: $toggle-md-handle-background-color-off;
+
+  box-shadow: $toggle-md-handle-box-shadow;
+
+  transition-duration: $toggle-md-transition-duration;
+  transition-property: transform, background-color;
+
+  will-change: transform, background-color;
+
+  contain: strict;
+}
+
+
+// Material Design Toggle Background Track: Checked
+// -----------------------------------------
+
+.toggle-md.toggle-checked .toggle-icon {
+  background-color: $toggle-md-track-background-color-on;
+}
+
+
+// Material Design Toggle Inner Knob: Checked
+// -----------------------------------------
+
+.toggle-md.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;
+}
+
+
+// Material Design Toggle: Disabled
+// -----------------------------------------
+
+.toggle-md.toggle-disabled,
+.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] {
+  @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"] {
+  @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);
+}