Sass (#34)

* rename css to scss

* add sass

Author: codeBelt

.stylelintrc

@@ -6,6 +6,7 @@
   "rules": {
     "indentation": 4,
     "color-hex-length": "long",
-    "order/properties-alphabetical-order": true
+    "order/properties-alphabetical-order": true,
+    "at-rule-no-unknown": null
   }
 }

package.json

@@ -77,13 +77,11 @@
     "extract-text-webpack-plugin": "3.0.2",
     "html-webpack-harddisk-plugin": "0.2.0",
     "html-webpack-plugin": "3.0.6",
+    "node-sass": "4.8.1",
     "nodemon": "1.17.2",
-    "postcss-apply": "0.9.0",
-    "postcss-cssnext": "3.1.0",
-    "postcss-import": "11.1.0",
-    "postcss-loader": "2.1.1",
     "rimraf": "2.6.2",
     "robotstxt-webpack-plugin": "4.0.1",
+    "sass-loader": "6.0.7",
     "style-loader": "0.20.3",
     "stylelint": "9.1.3",
     "stylelint-config-standard": "18.2.0",
@@ -95,7 +93,7 @@
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",
-    "bootstrap": "next",
+    "bootstrap": "4.0.0",
     "classnames": "2.2.5",
     "fetch-everywhere": "1.0.5",
     "form2js": "1.0.0",

postcss.config.js

@@ -1,4 +1,4 @@
 form:not(.u-validate) input:invalid {
     background-color: #fafad2;
-    border: 1px solid var(--COLOR_BRAND_PRIMARY);
+    border: 1px solid $COLOR_BRAND_PRIMARY;
 }

src/assets/styles/base/elements.css renamed to src/assets/styles/base/elements.scss

@@ -6,21 +6,21 @@
 .inputField-input {
     appearance: none;
     background-color: #ffffff;
-    border: 1px solid var(--COLOR_DARKGRAY_MEDIUM);
-    box-shadow: inset 0 0 0 1px color(var(--COLOR_PRIMARY) alpha(0%));
+    border: 1px solid $COLOR_DARKGRAY_MEDIUM;
+    box-shadow: inset 0 0 0 1px rgba($COLOR_PRIMARY, 0);
     font-size: 16px;
     max-width: 100%;
     padding: 9px;
     transition:
-        border-color 300ms var(--EASE_IN_QUAD),
-        box-shadow 300ms var(--EASE_IN_QUAD);
+        border-color 300ms $EASE_IN_QUAD,
+        box-shadow 300ms $EASE_IN_QUAD;
 
     &:focus {
-        border-color: var(--COLOR_PRIMARY);
-        box-shadow: inset 0 0 0 1px color(var(--COLOR_PRIMARY) alpha(100%));
+        border-color: $COLOR_PRIMARY;
+        box-shadow: inset 0 0 0 1px rgba($COLOR_PRIMARY, 100%);
         transition:
-            border-color 250ms var(--EASE_OUT_QUAD),
-            box-shadow 250ms var(--EASE_OUT_QUAD);
+            border-color 250ms $EASE_OUT_QUAD,
+            box-shadow 250ms $EASE_OUT_QUAD;
     }
 }
 
@@ -36,5 +36,5 @@
 }
 
 .inputField_noLabel .inputField-label {
-    @apply --isVisuallyHidden;
+    @include isVisuallyHidden;
 }

src/assets/styles/components/inputField.css renamed to src/assets/styles/components/inputField.scss

@@ -6,15 +6,7 @@
     position: fixed;
     right: 0;
     top: 0;
-    z-index: var(--Z_INDEX_MODAL);
-
-    @media (--SM) {
-        padding-top: 50px;
-    }
-
-    @media (--MD) {
-        padding-top: 100px;
-    }
+    z-index: 6;
 }
 
 .modal-overlay {
@@ -23,11 +15,10 @@
     bottom: 0;
     cursor: pointer;
     left: 0;
-    opacity: 0;
     position: fixed;
     right: 0;
     top: 0;
-    z-index: var(--Z_INDEX_MODAL_OVERLAY);
+    z-index: 7;
 }
 
 .modal-overlay_required {
@@ -46,23 +37,12 @@
     margin: auto auto 5px;
     max-width: 800px;
     min-height: 250px;
-    opacity: 0;
     overflow: hidden;
     padding: 20px;
     position: relative;
     transform: translateY(-5px);
     width: calc(100% - 10px);
-    z-index: var(--Z_INDEX_MODAL_CONTENT);
-
-    @media (--SM) {
-        margin-bottom: 20px;
-        transform: translateY(-50px);
-    }
-
-    @media (--MD) {
-        margin-bottom: 20px;
-        transform: translateY(-100px);
-    }
+    z-index: 8;
 }
 
 .modal-content_sm {
@@ -148,11 +128,6 @@
 .modal-footer_stack {
     display: block;
 
-    @media (--XS) {
-        display: flex;
-        justify-content: flex-end;
-    }
-
     & > * {
         margin-bottom: 10px;
         width: 100%;

src/assets/styles/components/modal.css renamed to src/assets/styles/components/modal.scss

@@ -0,0 +1,4 @@
+/* stylelint-disable number-no-trailing-zeros */
+$EASE_IN_QUAD: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$EASE_OUT_QUAD: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$EASE_OUT_CUBIC: cubic-bezier(0.215, 0.610, 0.355, 1.000);