more form-styling

static/css/reactive_input.css

@@ -1,14 +1,21 @@
 .reactive-label {
-  position: absolute;
-  left: 4px;
-  top: 2px;
-  transition: all .1s;
   cursor: text;
   color: #666;
+  transform: translate(0, 0);
+  transition: all .1s;
 }
 .reactive-label.small {
-  transform: translateY(-100%);
-  font-size: 12px;
   cursor: default;
   color: #333;
 }
+@media (max-width: 768px) {
+  .reactive-label {
+    position: absolute;
+    left: 4px;
+    top: 8px;
+  }
+  .reactive-label.small {
+    transform: translate(0, -120%);
+    font-size: 12px;
+  }
+}

static/css/show_hide.css

@@ -1,6 +1,8 @@
 .js-show-hide {
-  border-left: 1px solid #ccb3e6;
+  position: relative;
-  padding: 0 20px;
+}
+
+.js-show-hide-toggle {
   position: relative;
 }
 
@@ -9,22 +11,28 @@
 }
 
 .js-show-hide-toggle::before {
-  content: 'v';
+  content: '';
   position: absolute;
-  margin-left: -13px;
+  width: 0;
-  font-weight: 800;
+  height: 0;
-}
+  border-right: 8px solid transparent;
-
+  border-bottom: 8px solid transparent;
-.js-show-hide-toggle:hover::before {
-  content: '>';
-}
-
-.js-show-hide.collapsed .js-show-hide-toggle::before {
-  content: '>';
 }
 
+.js-show-hide-toggle::before,
 .js-show-hide.collapsed .js-show-hide-toggle:hover::before {
-  content: 'v';
+  left: -28px;
+  top: 10px;
+  border-left: 8px solid transparent;
+  border-top: 8px solid rebeccapurple;
+}
+
+.js-show-hide-toggle:hover::before,
+.js-show-hide.collapsed .js-show-hide-toggle::before {
+  border-left: 8px solid rebeccapurple;
+  border-top: 8px solid transparent;
+  top: 5px;
+  left: -22px;
 }
 
 .js-show-hide.collapsed > .js-show-hide-target {

static/css/sortable.css

@@ -16,7 +16,7 @@ table.js-sortable th.sorted-desc::after {
   right: 0;
   width: 0;
   height: 0;
-  top: 7px;
+  top: 3px;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
 }

templates/default-layout.lucius

@@ -93,13 +93,14 @@ input[type="text"],
 input[type="password"],
 input[type="email"] {
   background-color: rgba(0, 0, 0, 0.05);
-  padding: 7px 3px 4px;
+  padding: 13px 3px 4px;
   border: none;
   outline: 0;
   border-bottom: 2px solid rebeccapurple;
   color: var(--base-font-color);
   transition: all .1s;
   font-size: 16px;
+  min-width: 300px;
 }
 
 input[type="text"]:focus,
@@ -142,4 +143,67 @@ button:not([disabled]):hover {
 
 .form-group {
   position: relative;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
+  align-items: center;
+}
+
+/*CUSTOM CHECKBOXES AND RADIO BOXES*/
+.checkbox,
+.radio {
+  position: relative;
+}
+.checkbox > [type="checkbox"],
+.radio > [type="radio"] {
+  display: none;
+}
+.checkbox > label,
+.radio > label {
+  padding: 7px 13px 7px 30px;
+  background-color: rebeccapurple;
+  border-radius: 4px;
+  color: white;
+  cursor: pointer;
+}
+.checkbox > label::before,
+.radio > label::before,
+.checkbox > label::after,
+.radio > label::after {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: 4px;
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-color: white;
+  transform: scale(0.2, 0.2);
+  transition: all .2s;
+}
+.radio > label::before,
+.radio > label::after {
+  transform: scale(0.01, 0.01);
+}
+.checkbox > label::before,
+.radio > label::before {
+  width: 20px;
+  height: 2px;
+}
+.checkbox > label::after,
+.radio > label::after {
+  width: 20px;
+  height: 2px;
+}
+.checkbox > :checked + label,
+.radio > :checked + label {
+  background-color: #451477;
+  text-decoration: underline;
+}
+.checkbox > :checked + label::before,
+.radio > :checked + label::before {
+  transform: rotate(45deg);
+}
+.checkbox > :checked + label::after,
+.radio > :checked + label::after {
+  transform: rotate(-45deg);
 }

templates/home.hamlet

@@ -9,6 +9,7 @@
   <p .alert .alert-danger>Das System ist noch nicht produktiv einsetzbar
 
 <!-- SHOW-HIDE-TEST -->
+<hr>
 <div .js-show-hide>
   <h2 .js-show-hide-toggle>Teilweise funktionierende Abschnitte
 
@@ -25,12 +26,13 @@
     <li .list-group-item>
       <a href=@{SubmissionListR}>Dateien hochladen und abrufen
 
+<hr>
 <div>
-  <h2>SORTABLE-TEST
+  <h2>Sortierbare Tabelle
   <table .js-sortable>
     <thead>
       <tr>
-        <th>ID
+        <th .sorted-asc>ID
         <th>TH1
         <th>TH2
         <th>TH3
@@ -56,8 +58,10 @@
         <td>T2C2
         <td>35
 
+<hr>
 <div>
-  <h2>FORM-TEST & STYLEGUIDE
+  <h2>form-Tests
+  <p>(Senden-Button wird aktiviert, sobald alle benötigten Felder ausgefüllt sind.)
   <form method=post action=@{HomeR}>
     <div .form-group>
       <label .reactive-label for=text>Vorname*
@@ -69,8 +73,44 @@
       <label .reactive-label for=email>Email*
       <input type=email id=email required=true>
     <div .form-group>
-      <label for=date>Date
+      <label for=date>Geburtsdatum:
       <input type=date id=date>
+
+    <div .form-group>
+      <div>
+      <input type=submit value="Senden" id=submit-btn>
+
+    <div .form-group>
+      <textarea>No content yet
+
+    <p>Bitte wähle aus (auch mehrere):
+    <div .form-group>
+      <div .checkbox>
+        <input type=checkbox id=chkbox1>
+        <label for=chkbox1>Opt A
+      <div .checkbox>
+        <input type=checkbox id=chkbox2>
+        <label for=chkbox2>Opt B
+      <div .checkbox>
+        <input type=checkbox id=chkbox3>
+        <label for=chkbox3>Opt C
+      <div .checkbox>
+        <input type=checkbox id=chkbox4>
+        <label for=chkbox4>Opt D
+
+    <p>Wähle aus diesen Optionen eines aus:
+    <div .form-group>
+      <div .radio>
+        <input type=radio name=group1[] id=rdbtn1>
+        <label for=rdbtn1>Opt A
+      <div .radio>
+        <input type=radio name=group1[] id=rdbtn2>
+        <label for=rdbtn2>Opt B
+      <div .radio>
+        <input type=radio name=group1[] id=rdbtn3>
+        <label for=rdbtn3>Opt C
+
+    <p>Wähle eines aus der Liste aus:
     <div .form-group>
       <select required=true>
         <option>Option 1
@@ -78,24 +118,10 @@
         <option>Option 3
 
     <div .form-group>
-      <textarea>No content yet
+      <h3>Test-Button. Does nothing.
-
+      <input type=button value="Test">
-    <div .form-group>
-      <label for=chkbox1>Opt A
-      <input type=checkbox id=chkbox1>
-      <label for=chkbox2>Opt B
-      <input type=checkbox id=chkbox2>
-
-    <div .form-group>
-      <label for=rdbtn1>Exkl Opt A
-      <input type=radio name=group1[] id=rdbtn1>
-      <label for=rdbtn2>Exkl Opt B
-      <input type=radio name=group1[] id=rdbtn2>
-
-    <input type=submit value="Senden" id=submit-btn>
-
-    <input type=button value="Test">
 
+<hr>
 <div>
   <h2>Funktionen zum Testen