From 6cc0dc7859fcdae27e80212a1cabb71d9aafc87b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 18 Jul 2016 12:28:36 +0200
Subject: [PATCH] Migrate Switch style to PostCSS

---
 components/switch/_config.scss |  22 ------
 components/switch/config.css   |  24 ++++++
 components/switch/index.js     |   2 +-
 components/switch/theme.css    | 129 +++++++++++++++++++++++++++++++++
 components/switch/theme.scss   | 123 -------------------------------
 5 files changed, 154 insertions(+), 146 deletions(-)
 delete mode 100644 components/switch/_config.scss
 create mode 100644 components/switch/config.css
 create mode 100644 components/switch/theme.css
 delete mode 100644 components/switch/theme.scss

diff --git a/components/switch/_config.scss b/components/switch/_config.scss
deleted file mode 100644
index 784084717..000000000
--- a/components/switch/_config.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-$switch-color: $color-primary !default;
-$switch-text-color: $color-black !default;
-$switch-thumb-off-color: $palette-grey-50 !default;
-$switch-track-on-color: rgba($color-primary, 0.5) !default;
-$switch-track-off-color: rgba($color-black, 0.26) !default;
-$switch-off-ripple-color: rgba($color-black, 0.4) !default;
-$switch-on-focus-color: rgba($color-primary, 0.26) !default;
-$switch-off-focus-color: rgba($color-black, 0.1) !default;
-$switch-disabled-thumb-color: $palette-grey-400 !default;
-$switch-disabled-track-color: rgba($color-black, 0.12) !default;
-$switch-disabled-text-color: rgba($color-black, 0.26) !default;
-$switch-total-height: 2.4 * $unit !default;
-$switch-track-length: 3.6 * $unit !default;
-$switch-track-height: 1.4 * $unit !default;
-$switch-thumb-size: 2 * $unit !default;
-$switch-thumb-on-color: $switch-color !default;
-$switch-focus-init-size: .8 * $unit !default;
-$switch-focus-size: $switch-total-height * 2 !default;
-$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2 !default;
-$switch-ripple-duration: 650ms !default;
-$switch-font-size: $font-size-small !default;
-$switch-field-margin-bottom: 1.5 * $unit !default;
diff --git a/components/switch/config.css b/components/switch/config.css
new file mode 100644
index 000000000..703bf9698
--- /dev/null
+++ b/components/switch/config.css
@@ -0,0 +1,24 @@
+:root {
+  --switch-color: var(--color-primary);
+  --switch-text-color: var(--color-black);
+  --switch-thumb-off-color: var(--palette-grey-50);
+  --switch-track-on-color: color(var(--color-primary) a(50%));
+  --switch-track-off-color: color(var(--color-black) a(26%));
+  --switch-off-ripple-color: color(var(--color-black) a(40%));
+  --switch-on-focus-color: color(var(--color-primary) a(26%));
+  --switch-off-focus-color: color(var(--color-black) a(10%));
+  --switch-disabled-thumb-color: var(--palette-grey-400);
+  --switch-disabled-track-color: color(var(--color-black) a(12%));
+  --switch-disabled-text-color: color(var(--color-black) a(26%));
+  --switch-total-height: calc(2.4 * var(--unit));
+  --switch-track-length: calc(3.6 * var(--unit));
+  --switch-track-height: calc(1.4 * var(--unit));
+  --switch-thumb-size: calc(2 * var(--unit));
+  --switch-thumb-on-color: var(--switch-color);
+  --switch-focus-init-size: calc(0.8 * var(--unit));
+  --switch-focus-size: calc(var(--switch-total-height) * 2);
+  --switch-focus-diff: calc((var(--switch-focus-size) - var(--switch-focus-init-size)) / 2);
+  --switch-ripple-duration: 650ms;
+  --switch-font-size: var(--font-size-small);
+  --switch-field-margin-bottom: calc(1.5 * var(--unit));
+}
diff --git a/components/switch/index.js b/components/switch/index.js
index 28c3ec386..8a9db2ad8 100644
--- a/components/switch/index.js
+++ b/components/switch/index.js
@@ -3,7 +3,7 @@ import { switchFactory } from './Switch.js';
 import { SWITCH } from '../identifiers.js';
 import thumbFactory from './Thumb.js';
 import themedRippleFactory from '../ripple';
-import theme from './theme.scss';
+import theme from './theme.css';
 
 const applyTheme = (Component) => themr(SWITCH, theme)(Component);
 const ripple = themedRippleFactory({ centered: true, spread: 2.6 });
diff --git a/components/switch/theme.css b/components/switch/theme.css
new file mode 100644
index 000000000..f2c8341dd
--- /dev/null
+++ b/components/switch/theme.css
@@ -0,0 +1,129 @@
+@import '../colors.css';
+@import '../variables.css';
+@import './config.css';
+
+.field {
+  display: block;
+  height: var(--switch-total-height);
+  margin-bottom: var(--switch-field-margin-bottom);
+  position: relative;
+  white-space: nowrap;
+}
+
+.text {
+  color: var(--switch-text-color);
+  display: inline-block;
+  font-size: var(--switch-font-size);
+  line-height: var(--switch-total-height);
+  padding-left: var(--unit);
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.thumb {
+  border-radius: 50%;
+  cursor: pointer;
+  height: var(--switch-thumb-size);
+  position: absolute;
+  top: calc((var(--switch-track-height) - var(--switch-thumb-size)) / 2);
+  transition-duration: 0.28s;
+  transition-property: left;
+  transition-timing-function: var(--animation-curve-default);
+  width: var(--switch-thumb-size);
+
+  & .ripple {
+    background-color: var(--switch-color);
+    opacity: 0.3;
+    transition-duration: var(--switch-ripple-duration);
+  }
+}
+
+.on,
+.off {
+  border-radius: var(--switch-track-height);
+  cursor: pointer;
+  display: inline-block;
+  height: var(--switch-track-height);
+  margin-top: calc((var(--switch-total-height) - var(--switch-track-height)) / 2);
+  position: relative;
+  vertical-align: top;
+  width: var(--switch-track-length);
+}
+
+.on {
+  background: var(--switch-track-on-color);
+
+  & .thumb {
+    background: var(--switch-thumb-on-color);
+    box-shadow: var(--shadow-3p);
+    left: calc(var(--switch-track-length) - var(--switch-thumb-size));
+  }
+}
+
+.off {
+  background: var(--switch-track-off-color);
+
+  & .thumb {
+    background: var(--switch-thumb-off-color);
+    box-shadow: var(--shadow-2p);
+    left: 0;
+  }
+
+  & .ripple {
+    background: var(--switch-off-ripple-color);
+  }
+}
+
+.input {
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  width: 0;
+
+  &:focus:not(:active) {
+    & + .switch-on > .thumb::before,
+    & + .switch-off > .thumb::before {
+      background-color: transparent;
+      border-radius: 50%;
+      box-sizing: border-box;
+      content: '';
+      display: inline-block;
+      height: var(--switch-focus-init-size);
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(calc(-1 * var(--switch-focus-init-size) / 2), calc(-1 * var(--switch-focus-init-size) / 2));
+      width: var(--switch-focus-init-size);
+    }
+
+    & + .switch-on > .thumb::before {
+      background-color: var(--switch-on-focus-color);
+      box-shadow: 0 0 0 var(--switch-focus-diff) var(--switch-on-focus-color);
+    }
+
+    & + .switch-off > .thumb::before {
+      background-color: var(--switch-off-focus-color);
+      box-shadow: 0 0 0 var(--switch-focus-diff) var(--switch-off-focus-color);
+    }
+  }
+}
+
+.disabled {
+  composes: field;
+
+  & .text {
+    color: var(--switch-disabled-text-color);
+  }
+
+  & .on,
+  & .off {
+    background: var(--switch-disabled-track-color);
+    cursor: auto;
+  }
+
+  & .thumb {
+    background-color: var(--switch-disabled-thumb-color);
+    border-color: transparent;
+    cursor: auto;
+  }
+}
diff --git a/components/switch/theme.scss b/components/switch/theme.scss
deleted file mode 100644
index c01664379..000000000
--- a/components/switch/theme.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-@import "../colors";
-@import "../globals";
-@import "../mixins";
-@import "./config";
-
-.field {
-  position: relative;
-  display: block;
-  height: $switch-total-height;
-  margin-bottom: $switch-field-margin-bottom;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.text {
-  display: inline-block;
-  padding-left: $unit;
-  font-size: $switch-font-size;
-  line-height: $switch-total-height;
-  color: $switch-text-color;
-  white-space: nowrap;
-  vertical-align: top;
-}
-
-%switch {
-  position: relative;
-  display: inline-block;
-  width: $switch-track-length;
-  height: $switch-track-height;
-  margin-top: ($switch-total-height - $switch-track-height) / 2;
-  vertical-align: top;
-  cursor: pointer;
-  border-radius: $switch-track-height;
-}
-
-.thumb {
-  @include material-animation-default(.28s);
-  position: absolute;
-  top: ($switch-track-height - $switch-thumb-size) / 2;
-  width: $switch-thumb-size;
-  height: $switch-thumb-size;
-  cursor: pointer;
-  border-radius: 50%;
-  transition-property: left;
-
-  .ripple {
-    background-color: $switch-color;
-    opacity: .3;
-    transition-duration: $switch-ripple-duration;
-  }
-}
-
-.on {
-  @extend %switch;
-  background: $switch-track-on-color;
-  .thumb {
-    @include shadow-3dp();
-    left: $switch-track-length - $switch-thumb-size;
-    background: $switch-thumb-on-color;
-  }
-}
-
-.off {
-  @extend %switch;
-  background: $switch-track-off-color;
-  .thumb {
-    @include shadow-2dp();
-    left: 0;
-    background: $switch-thumb-off-color;
-  }
-  .ripple {
-    background: $switch-off-ripple-color;
-  }
-}
-
-%thumb-focus {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  box-sizing: border-box;
-  display: inline-block;
-  width: $switch-focus-init-size;
-  height: $switch-focus-init-size;
-  content: "";
-  background-color: transparent;
-  border-radius: 50%;
-  transform: translate(- $switch-focus-init-size / 2, - $switch-focus-init-size / 2);
-}
-
-.input {
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  opacity: 0;
-  &:focus:not(:active) {
-    + .switch-on > .thumb:before {
-      @extend %thumb-focus;
-      background-color: $switch-on-focus-color;
-      box-shadow: 0 0 0 $switch-focus-diff $switch-on-focus-color;
-    }
-    + .switch-off > .thumb:before {
-      @extend %thumb-focus;
-      background-color: $switch-off-focus-color;
-      box-shadow: 0 0 0 $switch-focus-diff $switch-off-focus-color;
-    }
-  }
-}
-
-.disabled {
-  @extend .field;
-  .text {
-    color: $switch-disabled-text-color;
-  }
-  .on, .off {
-    cursor: auto;
-    background: $switch-disabled-track-color;
-  }
-  .thumb {
-    cursor: auto;
-    background-color: $switch-disabled-thumb-color;
-    border-color: transparent;
-  }
-}