styling for modal-closer and grid-fallback for forms

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);

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);
       }
     }

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 {