From 3fcefab9786d2cd719ba32ae46bc29018b325124 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Thu, 21 Nov 2024 12:16:21 +0000
Subject: [PATCH] =?UTF-8?q?Polishing:=20Aktionsmen=C3=BC=20Layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Closes #4875
Merge request studip/studip!3665
---
.../assets/stylesheets/mixins/colors.scss | 6 ++++
.../assets/stylesheets/scss/actionmenu.scss | 36 ++++++++++++-------
.../assets/stylesheets/scss/variables.scss | 9 +++++
3 files changed, 38 insertions(+), 13 deletions(-)
diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index adac77f6a5a..5fd585b2d65 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -251,6 +251,12 @@ $color--sidebar-focus: $color--gray-6;
$color--sidebar-hover: $color--gray-6;
$color--sidebar-divider: $color--gray-6;
+$color--action-menu-border: $color--gray-5;
+$color--action-menu-divider: $color--gray-6;
+$color--action-menu-hover: $color--gray-6;
+$color--action-menu-marker-hover: $color--gray-5;
+$color--action-menu-shadow: $color--gray-5;
+
$color--dialog-overlay: $color--gray-1;
$color--tile-border-focus: $color--gray-4;
diff --git a/resources/assets/stylesheets/scss/actionmenu.scss b/resources/assets/stylesheets/scss/actionmenu.scss
index 4d678eaafd9..559034a6c0c 100644
--- a/resources/assets/stylesheets/scss/actionmenu.scss
+++ b/resources/assets/stylesheets/scss/actionmenu.scss
@@ -1,4 +1,4 @@
-$action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60);
+$action-menu-shadow: 2px 2px 0 var(--color--action-menu-shadow);
.action-menu {
display: inline-block;
@@ -25,13 +25,14 @@ $action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60);
.action-menu-content {
position: absolute;
- top: -4px;
- right: -4px;
+ top: -10px;
+ right: -10px;
- padding: 4px 8px;
+ padding: 10px 10px 10px 5px;
background: var(--white);
- border: thin solid var(--dark-gray-color-45);
+ border: thin solid var(--color--action-menu-border);
+ border-radius: $border-radius;
box-shadow: $action-menu-shadow;
font-weight: normal;
text-align: left;
@@ -81,29 +82,30 @@ $action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60);
.action-menu-title {
font-weight: bold;
- margin: 0.2em 0 0.3em;
+ margin: 0 0 0 10px;
}
.action-menu-list {
list-style: none;
margin: 0;
- padding: 0;
+ padding: 20px 0 0 0;
}
.action-menu-item {
- line-height: 1;
- padding: 0;
+ line-height: 24px;
+ padding: 0 0 0 5px;
+ border-left: solid 4px transparent;
> a,
> label {
margin: 0;
- padding: 3px 0;
+ padding: 2px 30px 2px 0;
display: block;
}
.action-menu-item-icon {
display: inline-block;
- margin: 0 0.25em;
+ margin: 0 0.5em 0.25em 0;
vertical-align: middle;
width: var(--icon-size-action-menu);
@@ -129,8 +131,8 @@ $action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60);
> hr {
border-style: none;
- border-top: thin solid var(--dark-gray-color-45);
- margin: 4px 0;
+ border-top: thin solid var(--color--action-menu-divider);
+ margin: 7px 0 7px -5px;
}
&.action-menu-item-disabled {
@@ -144,6 +146,14 @@ $action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60);
}
}
}
+
+ &:hover {
+ background-color: var(--color--action-menu-hover);
+ border-color: var(--color--action-menu-marker-hover);
+ a, a:hover {
+ color: var(--color--font-primary);
+ }
+ }
}
&.is-open {
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 4deeeba9d45..4735f73b885 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -56,6 +56,9 @@ $transition-duration: .3s;
$transition-duration-slow: .5s;
$transition-duration-superslow: 1s;
+// Border radius:
+$border-radius: 4px;
+
// Layout
$page-margin: 15px;
@@ -229,6 +232,12 @@ $grid-gap: 0;
--color--sidebar-hover: #{$color--sidebar-hover};
--color--sidebar-divider: #{$color--sidebar-divider};
+ --color--action-menu-border: #{$color--action-menu-border};
+ --color--action-menu-divider: #{$color--action-menu-divider};
+ --color--action-menu-hover: #{$color--action-menu-hover};
+ --color--action-menu-marker-hover: #{$color--action-menu-marker-hover};
+ --color--action-menu-shadow: #{$color--action-menu-shadow};
+
--color--dialog-overlay: #{$color--dialog-overlay};
--color--tile-border-focus: #{$color--tile-border-focus};
--
GitLab