From 3d618fd707bdde0094bfba848aa69156b2a0150c Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Mon, 10 May 2021 15:26:40 +0100 Subject: [PATCH 1/3] Properly align appnavigationtoggle Signed-off-by: Marco Ambrosini --- src/assets/variables.scss | 3 +++ src/components/AppNavigationToggle/AppNavigationToggle.vue | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/assets/variables.scss b/src/assets/variables.scss index 6446799450..eee36cb36b 100644 --- a/src/assets/variables.scss +++ b/src/assets/variables.scss @@ -55,3 +55,6 @@ $navigation-width: 300px; // mobile breakpoint $breakpoint-mobile: 1024px; + +// top-bar spacing +$topbar-margin: 4px; diff --git a/src/components/AppNavigationToggle/AppNavigationToggle.vue b/src/components/AppNavigationToggle/AppNavigationToggle.vue index f4172f2a56..ca05c90a98 100644 --- a/src/components/AppNavigationToggle/AppNavigationToggle.vue +++ b/src/components/AppNavigationToggle/AppNavigationToggle.vue @@ -76,8 +76,8 @@ export default { button.app-navigation-toggle { position: absolute; - top: 0; - right: 0; + top: $topbar-margin; + right: - $topbar-margin; margin-right: - $clickable-area; } From 2e21c0867290fd496609ce18af09e1d947260ad5 Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Tue, 6 Jul 2021 17:17:33 +0200 Subject: [PATCH 2/3] Make topbar-margin variable available to AppContent children Signed-off-by: Marco Ambrosini --- src/components/AppContent/AppContent.vue | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/AppContent/AppContent.vue b/src/components/AppContent/AppContent.vue index 25eed4dcf6..89db736dc2 100644 --- a/src/components/AppContent/AppContent.vue +++ b/src/components/AppContent/AppContent.vue @@ -29,6 +29,10 @@ This components provides a wrapper around the main app's content. Single-column layouts can just use the default slot. A resizable column can be added by providing content to the named slot `list`. +### CSS variables +In the css section some css variables are declared and will be available for +all the children of the AppContent component + ### Examples #### Usage: Single-column content @@ -325,6 +329,10 @@ export default { // Overriding server styles TODO: cleanup! margin: 0 !important; background-color: var(--color-main-background); + + // Variables + // the whitespace between the topbar content and its edges + --topbar-margin: $topbar-margin: 4px; } // Mobile list/details handling From 371999d034555303b34e950c23f3b30dceba04b5 Mon Sep 17 00:00:00 2001 From: Marco Date: Thu, 9 Jun 2022 10:47:38 +0200 Subject: [PATCH 3/3] Update src/components/AppContent/AppContent.vue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Raimund Schlüßler --- src/components/AppContent/AppContent.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AppContent/AppContent.vue b/src/components/AppContent/AppContent.vue index 89db736dc2..f1f14a818d 100644 --- a/src/components/AppContent/AppContent.vue +++ b/src/components/AppContent/AppContent.vue @@ -332,7 +332,7 @@ export default { // Variables // the whitespace between the topbar content and its edges - --topbar-margin: $topbar-margin: 4px; + --topbar-margin: $topbar-margin; } // Mobile list/details handling