@@ -192,6 +192,7 @@
.timelines-chevron {
margin-left: 0.8em;
+ margin-right: 0.8em;
font-size: 1.1em;
}
@@ -209,9 +210,13 @@
background-color: var(--bg, $fallback--bg);
}
+ .nav-panel-heading {
+ // breaks without a unit
+ --panel-heading-height-padding: 0em;
+ }
+
.fa-scale-110 {
margin-right: 0.8em;
}
-
}
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index fc89ca3d..7942f23c 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -30,6 +30,7 @@
.NavigationPins {
display: flex;
overflow: hidden;
+ height: 100%;
.alert-dot {
border-radius: 100%;
@@ -49,6 +50,7 @@
flex: 0 0 3em;
min-width: 2em;
text-align: center;
+ overflow: visible;
& .svg-inline--fa,
& .iconLetter {
@@ -56,10 +58,13 @@
}
&.router-link-active {
+ color: $fallback--text;
+ color: var(--selectedMenuText, $fallback--text);
+ border-bottom: 4px solid;
+
& .svg-inline--fa,
& .iconLetter {
- color: $fallback--text;
- color: var(--selectedMenuText, $fallback--text);
+ color: inherit;
}
}
}
diff --git a/src/panel.scss b/src/panel.scss
index 3a814269..1022758a 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -46,7 +46,7 @@
.panel-footer {
--panel-heading-height-padding: 0.6em;
--__panel-heading-height: 3.2em;
- --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
+ --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
position: relative;
box-sizing: border-box;
@@ -57,7 +57,7 @@
grid-column-gap: 0.5em;
flex: none;
background-size: cover;
- padding: 0.6em;
+ padding: var(--panel-heading-height-padding);
height: var(--__panel-heading-height);
line-height: var(--__panel-heading-height-inner);
z-index: 4;