From b2a755ba564439e481c1fddf6e1cb969cc3fef5e Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Wed, 28 Mar 2018 23:55:46 +0200
Subject: [PATCH] styling for modal-closer and grid-fallback for forms

---
 templates/standalone/inputs.lucius |  3 +++
 templates/widgets/modal.julius     |  1 +
 templates/widgets/modal.lucius     | 30 ++++++++++++++++++++++--------
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius
index 5fe20077a..67a49fd45 100644
--- a/templates/standalone/inputs.lucius
+++ b/templates/standalone/inputs.lucius
@@ -196,6 +196,8 @@ input[type="checkbox"]:checked::after {
   color: var(--fontsec);
   transform: translate(0, 0);
   transition: all .1s;
+  display: inline-block;
+  width: 30%;
 }
 .reactive-label--small {
   cursor: default;
@@ -211,6 +213,7 @@ input[type="checkbox"]:checked::after {
   .reactive-label {
     position: relative;
     transform: translate(2px, 30px);
+    display: block;
   }
   .reactive-label--small {
     transform: translate(2px, 0px);
diff --git a/templates/widgets/modal.julius b/templates/widgets/modal.julius
index 53b118672..5033f05b2 100644
--- a/templates/widgets/modal.julius
+++ b/templates/widgets/modal.julius
@@ -42,6 +42,7 @@ document.addEventListener('DOMContentLoaded', function() {
       document.addEventListener('modal-open', this.openOnEvent.bind(this), false);
       closeBound = this.close.bind(this);
       if (trigger) {
+        trigger.classList.add('modal__trigger');
         trigger.addEventListener('click', this.open.bind(this), false);
       }
     }
diff --git a/templates/widgets/modal.lucius b/templates/widgets/modal.lucius
index 0a07956c6..c5406febc 100644
--- a/templates/widgets/modal.lucius
+++ b/templates/widgets/modal.lucius
@@ -8,11 +8,11 @@
   min-width: 60vw;
   min-height: 100px;
   max-height: calc(100vh - 30px);
-  border-radius: 20px;
+  border-radius: 7px;
   z-index: -1;
   color: var(--fontbase);
   padding: 20px;
-  overflow: scroll;
+  overflow: auto;
 
   &.modal--open {
     z-index: 200;
@@ -51,14 +51,28 @@
   }
 }
 
+.modal__trigger {
+  cursor: pointer;
+}
+
 .modal__closer {
   position: absolute;
-  top: 10px;
-  right: 10px;
-  display: block;
-  width: 20px;
-  height: 50px;
-  background-color: blue;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background-color: var(--darkbase);
+  border-radius: 2px;
+  cursor: pointer;
+
+  &::before {
+    content: '\e014';
+    font-family: 'Glyphicons Halflings';
+    color: white;
+  }
 }
 
 .no-scroll {