From e71f0c20adc4dc2f49bca99a859241fdadf376d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Tue, 30 Nov 2021 01:09:53 +0100
Subject: Rework tab system.

This sepparates popup-elements from their tabbed contents, allowing
clearer sepparations of concerns, along with easier adding and removing
of tabs to the tabset!
---
 static/style.scss | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

(limited to 'static/style.scss')

diff --git a/static/style.scss b/static/style.scss
index bd29f4cc..e0a7e21e 100644
--- a/static/style.scss
+++ b/static/style.scss
@@ -782,20 +782,19 @@ popup-element {
         display: block;
     }
 
-    main {
+    > * {
         resize: both;
+        /* This overflow: auto gives us the correct resize handle */
         overflow: auto;
 
+        /* TODO this doesn't work, since tabcount is sepparate fronm
+         * popup... */
         min-height: calc(var(--tabcount) * #{$tablabel-margin + $tablabel-height});
 
         /* some form of sensible minimi and default size for the popup (s main area). */
         min-width: 150px;
         width: 350px;
         height: 250px;
-
-        article {
-            padding: 1em;
-        }
     }
 }
 
@@ -839,9 +838,6 @@ popup-element {
 }
 
 .popup-root {
-    background-color: #dedede;
-    color: black;
-
     display: flex;
 
     @if $popup-style == "left" {
@@ -849,7 +845,20 @@ popup-element {
     } @else {
         flex-direction: column;
     }
+}
+
+tab-group {
+    background-color: #dedede;
+    color: black;
 
+    width: 100%;
+    height: 100%;
+    /* This overflow: auto gives us the correct rendering of the content */
+    overflow: auto;
+
+    [role="tabpanel"] {
+        padding: 1em;
+    }
 
     [role="tablist"] {
         display: flex;
@@ -922,6 +931,15 @@ vevent-edit {
     }
 }
 
+.checkboxes {
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    justify-items: baseline;
+
+    label {grid-row: 1;}
+    input {grid-row: 2;}
+}
+
 vevent-dl {
     font-size: 80%;
 
-- 
cgit v1.2.3