repairs project

Signed-off-by: Anthony Veaudry <[email protected]>

source/scss/base/_base.scss

@@ -0,0 +1,30 @@
+// ? ==========================================================================
+// ? Base
+// ? ==========================================================================
+
+// ? In your base folder, include a normalize.css file and create a base.scss file.
+//? In the base.scss file, you can only apply styles to three different elements directly:
+// ? the universal selector (*)
+// ? ul elements
+// ? p elements
+
+* {
+  box-sizing: border-box;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+p {
+  font-family: $font-family--primary;
+}
+
+.container {
+  margin: 0;
+  width: 80%;
+  padding-top: em(40px);
+  margin: auto;
+}

source/scss/base/_index.scss

@@ -0,0 +1,2 @@
+@import "../node_modules/normalize.css/normalize.css";
+@import "./_base.scss"

source/scss/components/_buttons.scss

@@ -0,0 +1,29 @@
+.btn {
+  width: 100%;
+  text-transform: uppercase;
+  border: none;
+  border-radius: $br--rounded;
+  color: $white;
+  padding: em(10px);
+  margin: em(10px) 0;
+  [type="submit"] {
+    width: 100%;
+  }
+    &:focus {
+    outline: none;
+  }
+    @each $theme, $color in $ui-colors {
+    @include m($theme) {
+      @extend .btn;
+      background-color: $color;
+      &:active {
+        -moz-box-shadow:    inset 0 0 10px darken($color, 20%);
+        -webkit-box-shadow: inset 0 0 10px darken($color, 20%);
+        box-shadow:         inset 0 0 10px darken($color, 20%);
+      }
+    }
+  }
+  @include mq(large) {
+    width: em(150px)
+  }
+}

source/scss/components/_components.scss

@@ -0,0 +1,3 @@
+// ? ==========================================================================
+// ? Components
+// ? ==========================================================================

source/scss/components/_forms.scss

@@ -0,0 +1,30 @@
+// ? ==========================================================================
+// ? Forms
+// ? ==========================================================================
+
+// ? Forms:
+// ? .form
+// ? .form__label--hidden
+// ? .form__input
+
+
+.form {
+  @include flex(flex,column);
+  width: 100%;
+}
+
+.form__input {
+  margin: 0 auto;
+  width: 100%;
+  height: 40px;
+  border: none;
+  border-bottom: 5px solid $color-accent;
+  margin-bottom: 20px;
+  &:focus {
+    outline: none;
+  }
+}
+
+.form__label--hidden {
+  display: none;
+}