remove sass dependency

Author: shanehughes3

.storybook/config.js

@@ -3,7 +3,7 @@ import { configure } from '@kadira/storybook';
 //import 'normalize.css'
 import 'react-mdl/extra/material.js'
 import 'react-mdl/extra/material.css'
-import './storybook.scss'
+import './storybook.css'
 
 function loadStories () {
   require('../stories/AutoComplete.story');

.storybook/storybook.scss renamed to .storybook/storybook.css

@@ -4,8 +4,8 @@ module.exports = {
   devtool: 'cheap-module-eval-source-map',
   module: {
     loaders: [{
-      test  : /\.(scss|css)$/,
-      loader: 'style!css?sourceMap!postcss!sass?sourceMap',
+      test  : /\.css$/,
+      loader: 'style!css?sourceMap!postcss?sourceMap',
     },{
       test: /\.(png|jpg|svg|woff|woff2|eot|ttf)$/,
       loader: 'url-loader?limit=100000',

.storybook/webpack.config.js

@@ -76,12 +76,10 @@
     "istanbul": "^1.1.0-alpha.1",
     "jsdom": "^9.9.1",
     "mocha": "^3.2.0",
-    "node-sass": "^4.2.0",
     "normalize.css": "^5.0.0",
     "postcss": "^5.2.9",
     "postcss-loader": "^1.2.1",
     "rimraf": "^2.5.4",
-    "sass-loader": "^4.1.1",
     "semantic-release": "^6.3.2",
     "sinon": "^1.17.7",
     "style-loader": "^0.13.1",

package.json

@@ -1,10 +1,10 @@
-cp src/AutoComplete/AutoComplete.scss es/AutoComplete/AutoComplete.scss
-cp src/Dropdown/Dropdown.scss es/Dropdown/Dropdown.scss
-cp src/Menu/Menu.scss es/Menu/Menu.scss
-cp src/MenuList/MenuList.scss es/MenuList/MenuList.scss
-cp src/MenuItem/MenuItem.scss es/MenuItem/MenuItem.scss
-cp src/SelectField/SelectField.scss es/SelectField/SelectField.scss
-cp src/OptionList/OptionList.scss es/OptionList/OptionList.scss
-cp src/Option/Option.scss es/Option/Option.scss
-cp src/MultiSelectField/MultiSelectField.scss es/MultiSelectField/MultiSelectField.scss
-cp src/Stepper/Stepper.scss es/Stepper/Stepper.scss
+cp src/AutoComplete/AutoComplete.css es/AutoComplete/AutoComplete.css
+cp src/Dropdown/Dropdown.css es/Dropdown/Dropdown.css
+cp src/Menu/Menu.css es/Menu/Menu.css
+cp src/MenuList/MenuList.css es/MenuList/MenuList.css
+cp src/MenuItem/MenuItem.css es/MenuItem/MenuItem.css
+cp src/SelectField/SelectField.css es/SelectField/SelectField.css
+cp src/OptionList/OptionList.css es/OptionList/OptionList.css
+cp src/Option/Option.css es/Option/Option.css
+cp src/MultiSelectField/MultiSelectField.css es/MultiSelectField/MultiSelectField.css
+cp src/Stepper/Stepper.css es/Stepper/Stepper.css

scrips/copy_es_styles.sh

@@ -1,10 +1,10 @@
-cp src/AutoComplete/AutoComplete.scss lib/AutoComplete/AutoComplete.scss
-cp src/Dropdown/Dropdown.scss lib/Dropdown/Dropdown.scss
-cp src/Menu/Menu.scss lib/Menu/Menu.scss
-cp src/MenuList/MenuList.scss lib/MenuList/MenuList.scss
-cp src/MenuItem/MenuItem.scss lib/MenuItem/MenuItem.scss
-cp src/SelectField/SelectField.scss lib/SelectField/SelectField.scss
-cp src/OptionList/OptionList.scss lib/OptionList/OptionList.scss
-cp src/Option/Option.scss lib/Option/Option.scss
-cp src/MultiSelectField/MultiSelectField.scss lib/MultiSelectField/MultiSelectField.scss
-cp src/Stepper/Stepper.scss lib/Stepper/Stepper.scss
+cp src/AutoComplete/AutoComplete.css lib/AutoComplete/AutoComplete.css
+cp src/Dropdown/Dropdown.css lib/Dropdown/Dropdown.css
+cp src/Menu/Menu.css lib/Menu/Menu.css
+cp src/MenuList/MenuList.css lib/MenuList/MenuList.css
+cp src/MenuItem/MenuItem.css lib/MenuItem/MenuItem.css
+cp src/SelectField/SelectField.css lib/SelectField/SelectField.css
+cp src/OptionList/OptionList.css lib/OptionList/OptionList.css
+cp src/Option/Option.css lib/Option/Option.css
+cp src/MultiSelectField/MultiSelectField.css lib/MultiSelectField/MultiSelectField.css
+cp src/Stepper/Stepper.css lib/Stepper/Stepper.css

scrips/copy_lib_styles.sh

@@ -0,0 +1,37 @@
+.mdl-autocomplete {
+    position: relative;
+    width: 300px;
+    box-sizing: border-box;
+}
+.mdl-autocomplete *, .mdl-autocomplete *:before, .mdl-autocomplete *:after {
+    box-sizing: inherit;
+}
+.mdl-autocomplete .mdl-textfield {
+    width: 100%;
+}
+.mdl-autocomplete .mdl-textfield.is-invalid .mdl-textfield__label {
+    color: #d50000;
+}
+.mdl-autocomplete .mdl-autocomplete__arrow {
+    pointer-events: none;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    margin: -2px 0 0 -4px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 4px 0 4px;
+    border-color: rgba(0, 0, 0, 0.26) transparent transparent transparent;
+}
+.mdl-autocomplete.mdl-autocomplete--error .mdl-autocomplete__arrow {
+    border-color: #d50000 transparent transparent transparent;
+}
+.mdl-autocomplete.mdl-autocomplete--focused:not(.mdl-autocomplete--empty) .mdl-autocomplete__arrow {
+    border-width: 0 4px 4px 4px;
+    border-color: transparent transparent rgba(0, 0, 0, 0.26) transparent;
+}
+.mdl-autocomplete.mdl-autocomplete--focused:not(.mdl-autocomplete--empty).mdl-autocomplete--error .mdl-autocomplete__arrow {
+    border-color: transparent transparent #d50000 transparent;
+}

src/AutoComplete/AutoComplete.css

@@ -6,7 +6,7 @@ import Dropdown from '../Dropdown'
 import OptionList from '../OptionList'
 import Option from '../Option'
 
-import './AutoComplete.scss'
+import './AutoComplete.css'
 
 export default class AutoComplete extends Component {
 

src/AutoComplete/AutoComplete.js

@@ -0,0 +1,16 @@
+.mdl-dropdown {
+    position: absolute;
+    display: flex;
+    z-index: 9999;
+    opacity: 0;
+    margin: 0;
+    padding: 5px 0;
+    border-radius: 2px;
+    background: #fff;
+    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    box-sizing: border-box;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+.mdl-dropdown *, .mdl-dropdown *:before, .mdl-dropdown *:after {
+    box-sizing: inherit;
+}