[UI] Notification settings tabs functional

public/assets/css/settings/settings.css

@@ -39,21 +39,6 @@
       box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
 }
 
-#form-tabs ul {
-      display: flex;
-      align-items: stretch;
-      justify-content: space-evenly;
-      width: 100%;
-      margin-left: calc(2 * var(--side-margin));
-      margin-right: calc(2 * var(--side-margin));
-      padding: 0;
-}
-#form-tabs li {
-      display: block;
-      flex: 0 1 auto;
-      list-style-type: none;
-      font-weight: 700;
-}
 #form-content {
       order: 3;
       background-color: #00000050;
@@ -265,7 +250,14 @@ select {
       margin-left: var(--unit-size);
 }
 
-/* JS Cropping */
+button {
+      background-color: #f6f6f6;
+      padding: var(--small-size);
+      border: none;
+      border-radius: var(--small-size);
+}
+
+/* JS CROPPING */
 #img-cropped {
       display: block;
       max-width: 100%;
@@ -279,9 +271,32 @@ select {
       border-radius: 50%;
 }
 
-button {
-      background-color: #f6f6f6;
-      padding: var(--small-size);
-      border: none;
-      border-radius: var(--small-size);
+/* NOTIFICATIONS TABS */
+/* visual feedback */
+ul input[type=radio] + label {
+      color: #91B9D0;
+}
+ul input[type=radio]:checked + label {
+      color: #F6F6F6;
+}
+ul input[type=radio]:focus + label {
+      color: #F6F6F6;
+}
+
+/* show/hide each tab */
+ul input[type=radio]:not(:checked) + label + div {
+      display: none;
+}
+ul input[type=radio]:checked + label + div {
+      display: flex;
+}
+
+/* hide radio buttons */
+input[type=radio] {
+      position: absolute;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+      clip: rect(1px, 1px, 1px, 1px);
 }

templates/settings/notifications.html.twig

@@ -12,18 +12,15 @@
             <div id='form-tabs'>
                 <ul>
                     {% for transport, form in tabbed_forms %}
-            <li class='hover-effect'>
+                        <input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}">
+                        <label for="toggle-{{ transport }}" id='tabs' style = "text-transform:capitalize;">
                             {{ transport }}
-            </li>
-          {% endfor %}
-        </ul>
-      </div>
-      <div id='form-content'>
-        {% for transport, form in tabbed_forms %}
+                        </label>
                         <div id="form_{{ transport }}" class='form'>
                             {{ form(form) }}
                         </div>
                     {% endfor %}
+                </ul>
             </div>
         {% endblock form %}
     </div>