Migrate Input style to PostCSS

components/input/config.css

@@ -0,0 +1,22 @@
+:root {
+  --input-padding: calc(2 * var(--unit));
+  --input-field-padding: calc(0.8 * var(--unit));
+  --input-field-font-size: calc(1.6 * var(--unit));
+  --input-field-height: calc(var(--input-field-padding) * 2 + var(--input-field-font-size) * 1.4);
+  --input-label-font-size: calc(1.2 * var(--unit));
+  --input-focus-label-top: calc(0.6 * var(--unit));
+  --input-text-background-color: transparent;
+  --input-text-label-color: color(var(--color-black) a(26%));
+  --input-text-bottom-border-color: color(var(--color-black) a(12%));
+  --input-text-highlight-color: var(--color-primary);
+  --input-text-disabled-color: var(--input-text-bottom-border-color);
+  --input-text-disabled-text-color: var(--input-text-label-color);
+  --input-text-error-color: rgb(222, 50, 38);
+  --input-text-required-color: rgb(222, 50, 38);
+  --input-underline-height: calc(2 * var(--unit));
+  --input-icon-font-size: calc(2.4 * var(--unit));
+  --input-icon-size: calc(2 * var(--input-icon-font-size));
+  --input-icon-offset: calc(1.6 * var(--unit));
+  --input-chevron-offset: calc(0.8 * var(--unit));
+  --input-hint-opacity: 1;
+}

components/input/index.js

@@ -2,7 +2,7 @@ import { INPUT } from '../identifiers.js';
 import { themr } from 'react-css-themr';
 import { inputFactory } from './Input.js';
 import FontIcon from '../font_icon/FontIcon.js';
-import theme from './theme.scss';
+import theme from './theme.css';
 
 const Input = inputFactory(FontIcon);
 const ThemedInput = themr(INPUT, theme)(Input);

components/input/theme.css

@@ -0,0 +1,177 @@
+@import '../colors.css';
+@import '../variables.css';
+@import './config.css';
+
+.input {
+  padding: var(--input-padding) 0;
+  position: relative;
+
+  &.withIcon {
+    margin-left: var(--input-icon-size);
+  }
+}
+
+.icon {
+  color: var(--input-text-label-color);
+  display: block;
+  font-size: var(--input-icon-font-size) !important;
+  height: var(--input-icon-size);
+  left: calc(-1 * var(--input-icon-size));
+  line-height: var(--input-icon-size) !important;
+  position: absolute;
+  text-align: center;
+  top: var(--input-icon-offset);
+  transition: color var(--animation-duration) var(--animation-curve-default);
+  width: var(--input-icon-size);
+}
+
+.inputElement {
+  background-color: var(--input-text-background-color);
+  border-bottom: 1px solid var(--input-text-bottom-border-color);
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  color: var(--color-text);
+  display: block;
+  font-size: var(--input-field-font-size);
+  outline: none;
+  padding: var(--input-field-padding) 0;
+  width: 100%;
+
+  &:focus {
+    & ~ .bar::before,
+    & ~ .bar::after {
+      width: 50%;
+    }
+
+    & ~ .label:not(.fixed) {
+      color: var(--input-text-highlight-color);
+    }
+
+    & ~ .label > .required {
+      color: var(--input-text-required-color);
+    }
+
+    & ~ .hint {
+      opacity: var(--input-hint-opacity);
+    }
+
+    & ~ .icon {
+      color: var(--input-text-highlight-color);
+    }
+  }
+
+  &:focus,
+  &.filled,
+  &[type='date'],
+  &[type='time'] {
+    & ~ .label:not(.fixed) {
+      font-size: var(--input-label-font-size);
+      top: var(--input-focus-label-top);
+    }
+  }
+
+  &.filled ~ .label.fixed,
+  &.filled ~ .hint {
+    display: none;
+  }
+}
+
+.label {
+  color: var(--input-text-label-color);
+  font-size: var(--input-field-font-size);
+  left: 0;
+  line-height: var(--input-field-font-size);
+  pointer-events: none;
+  position: absolute;
+  top: calc(var(--input-padding) + 1.5 * var(--input-field-padding));
+  transition-duration: var(--animation-duration);
+  transition-property: top, font-size, color;
+  transition-timing-function: var(--animation-curve-default);
+
+  &.fixed ~ .hint {
+    display: none;
+  }
+}
+
+.hint {
+  color: var(--input-text-label-color);
+  font-size: var(--input-field-font-size);
+  left: 0;
+  line-height: var(--input-field-font-size);
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: calc(var(--input-padding) + 1.5 * var(--input-field-padding));
+  transition-duration: var(--animation-duration);
+  transition-property: opacity;
+  transition-timing-function: var(--animation-curve-default);
+}
+
+.bar {
+  display: block;
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    background-color: var(--input-text-highlight-color);
+    bottom: 0;
+    content: '';
+    height: 2px;
+    position: absolute;
+    transition-duration: 0.2s;
+    transition-property: width, background-color;
+    transition-timing-function: var(--animation-curve-default);
+    width: 0;
+  }
+
+  &::before {
+    left: 50%;
+  }
+
+  &::after {
+    right: 50%;
+  }
+}
+
+.error,
+.counter {
+  color: var(--input-text-error-color);
+  font-size: var(--input-label-font-size);
+  line-height: var(--input-underline-height);
+  margin-bottom: calc(-1 * var(--input-underline-height));
+}
+
+.counter {
+  color: var(--input-text-label-color);
+  position: absolute;
+  right: 0;
+}
+
+.disabled > .inputElement {
+  border-bottom-style: dotted;
+  color: var(--input-text-disabled-text-color);
+}
+
+.errored {
+  padding-bottom: 0;
+
+  & > .inputElement {
+    border-bottom-color: var(--input-text-error-color);
+    margin-top: 1px;
+  }
+
+  & > .counter,
+  & > .label {
+    color: var(--input-text-error-color);
+  }
+
+  & > .label > .required {
+    color: var(--input-text-required-color);
+  }
+}
+
+.hidden {
+  display: none;
+}

spec/style.scss

@@ -3,7 +3,9 @@
 @import "../components/mixins";
 @import "../components/button/config";
 
+
 $offset: 1.8 * $unit;
+$button-floating-height: $unit * 5.6;
 $appbar-height: 6.4 * $unit;
 
 .app {