From 300a7b8b080da2273d1d855d2b639db7c55d75d3 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 6 Sep 2018 11:03:37 +0200
Subject: [PATCH] Clean up SCSS

---
 client/src/components/ContentBlockChooserWidget.vue |  1 +
 client/src/components/ContentBlockTitleInput.vue    | 10 ++--------
 client/src/components/Modal.vue                     |  8 +++++---
 client/src/styles/_forms.scss                       |  9 +++++++++
 client/src/styles/_variables.scss                   |  7 +++++++
 client/src/styles/main.scss                         |  1 +
 6 files changed, 25 insertions(+), 11 deletions(-)
 create mode 100644 client/src/styles/_forms.scss

diff --git a/client/src/components/ContentBlockChooserWidget.vue b/client/src/components/ContentBlockChooserWidget.vue
index 26af8f59..e79b80c7 100644
--- a/client/src/components/ContentBlockChooserWidget.vue
+++ b/client/src/components/ContentBlockChooserWidget.vue
@@ -62,6 +62,7 @@
     border-radius: 12px;
     margin-top: 20px;
     position: relative;
+    margin-bottom: 20px;
 
     &::before {
       content: "";
diff --git a/client/src/components/ContentBlockTitleInput.vue b/client/src/components/ContentBlockTitleInput.vue
index e40b5482..53cec2c2 100644
--- a/client/src/components/ContentBlockTitleInput.vue
+++ b/client/src/components/ContentBlockTitleInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="content-block-title-input">
-    <input placeholder="Titel für Inhaltsblock erfassen" class="content-block-title-input__inputfield"/>
+    <input placeholder="Titel für Inhaltsblock erfassen" class="content-block-title-input__inputfield skillbox-input">
   </div>
 </template>
 
@@ -9,13 +9,7 @@
 
   .content-block-title-input {
     &__inputfield {
-      display: flex;
-      width: 100%;
-      padding: 16px;
-      box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
-      border-radius: 4px;
-      box-sizing: border-box;
-      border: 1px solid $color-lightgrey;
+      width: $modal-input-width;
     }
   }
 </style>
diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index a1059a5a..d8dddbad 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -42,6 +42,7 @@
     display: grid;
     grid-template-rows: auto 1fr 65px;
     grid-template-areas: "header" "body" "footer";
+    position: relative;
 
     &__backdrop {
       display: grid;
@@ -56,19 +57,20 @@
 
     &__header {
       grid-area: header;
-      padding: 10px 30px;
+      padding: 10px $modal-lateral-padding;
       border-bottom: 1px solid $color-lightgrey;
     }
 
     &__body {
       grid-area: body;
-      padding: 10px 34px;
+      padding: 10px $modal-lateral-padding;
+      overflow: auto;
     }
 
     &__footer {
       grid-area: footer;
       border-top: 1px solid $color-lightgrey;
-      padding: 16px 30px;
+      padding: 16px $modal-lateral-padding;
     }
   }
 </style>
diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss
new file mode 100644
index 00000000..3fcf50d2
--- /dev/null
+++ b/client/src/styles/_forms.scss
@@ -0,0 +1,9 @@
+.skillbox-input {
+  display: flex;
+  padding: 16px;
+  box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-sizing: border-box;
+  border: 1px solid $color-lightgrey;
+  max-width: 100%;
+}
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 9ace0181..76424358 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -42,3 +42,10 @@ $base-font-size-pixels: 16px; // used to calculate rem
 $red: #FA5F5F;
 $green: #6DD79A;
 $brown: #EB9E77;
+
+
+
+
+//modal stuff
+$modal-lateral-padding: 34px;
+$modal-input-width: 500px;
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 5b261af5..eb8a1665 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -7,6 +7,7 @@
 @import "typography";
 @import "variables";
 @import "buttons";
+@import "forms";