pleroma-fe

commit: 5d203e93ae6bc55988c6f4672d589787308099f0
parent fe8b5b62ae284c5e105d2b1063815dc28582194d
Author: Henry Jameson <me@hjkos.com>
Date:   Sun, 10 Apr 2022 22:37:08 +0300

improvements to relative panel sizing

Diffstat:
M
src/App.scss
2
+-
M
src/panel.scss
12
++++++------

2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -2,7 +2,7 @@
 @import './_variables.scss';
 
 :root {
-  --navbar-height: 3.5em;
+  --navbar-height: 3.5rem;
 }
 
 html {
diff --git a/src/panel.scss b/src/panel.scss
@@ -34,6 +34,10 @@
 }
 
 .panel-heading {
+  --panel-heading-height: 3.2em;
+  --panel-heading-height-padding: 0.6em;
+  --__panel-heading-height-inner: calc(var(--panel-heading-height) - 2 * var(--panel-heading-height-padding));
+
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -43,7 +47,7 @@
   background-size: cover;
   padding: 0.6em 0.6em;
   text-align: left;
-  line-height: calc(var(--panel-heading-height) / 2);
+  line-height: var(--__panel-heading-height-inner);
   color: var(--panelText);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
@@ -51,8 +55,6 @@
   height: var(--panel-heading-height);
   z-index: -2;
 
-  --panel-heading-height: 3.2em;
-
   &.-flexible-height {
     --panel-heading-height: auto;
 
@@ -120,14 +122,12 @@
 
   .button-default,
   .alert {
-    // height: 100%;
-    line-height: 21px;
+    height: var(--__panel-heading-height-inner);
     min-height: 0;
     box-sizing: border-box;
     margin: 0;
     margin-left: 0.5em;
     min-width: 1px;
-    align-self: stretch;
   }
 
   .button-default {