deaktivierte Buttons in Dialogen haben falsche Farben und zu wenig Kontrast

Closes #5114

Merge request studip/studip!3837

3 files changed, 29 insertions, 29 deletions

diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss
index 55171f5..2b39a21 100644
--- a/resources/assets/stylesheets/scss/buttons.scss
+++ b/resources/assets/stylesheets/scss/buttons.scss
@@ -76,22 +76,7 @@ button.button {
         }
     }
 }
-
-$button-icons: (
-    accept: accept,
-    cancel: decline,
-    edit: edit,
-    move-up: arr_1up,
-    move-down: arr_1down,
-    add: add,
-    trash: trash,
-    download: download,
-    search: search,
-    arr_left: arr_1left,
-    arr_right: arr_1right,
-    refresh: refresh,
-);
-
+// $button-icons is a map of class names and icon names located in resources/assets/stylesheets/scss/_variables.scss
 @each $class, $icon in $button-icons {
     .button {
         &.#{'' + $class} {
diff --git a/resources/assets/stylesheets/scss/dialog.scss b/resources/assets/stylesheets/scss/dialog.scss
index 1e5d02d..6a5b29b 100644
--- a/resources/assets/stylesheets/scss/dialog.scss
+++ b/resources/assets/stylesheets/scss/dialog.scss
@@ -79,24 +79,23 @@
                 margin-right: 0;
             }
 
-            &.accept {
-              @include button-with-icon(accept, clickable, info_alt);
-            }
-
-            &.cancel {
-              @include button-with-icon(decline, clickable, info_alt);
-            }
-
-            &.download {
-              @include button-with-icon(download2, clickable, info_alt);
+            // $button-icons is a map of class names and icon names located in resources/assets/stylesheets/scss/_variables.scss
+            @each $class, $icon in $button-icons {
+                &.#{'' + $class} {
+                    @include button-with-icon($icon, clickable, info_alt);
+                    &.disabled,
+                    &[disabled] {
+                        @include button-with-icon($icon, inactive, inactive);
+                    }
+                }
             }
 
             &.disabled,
             &[disabled] {
                 box-shadow: none;
-                color: var(--white);
-                background: var(--dark-gray-color-60);
-                border: 1px solid var(--dark-gray-color-60);
+                color: var(--color--font-inactive);
+                background: var(--color--button-inactive-background);
+                border: 1px solid var(--color--button-inactive-border);
                 cursor: not-allowed;
             }
 
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index c3565dd..b7b54f8 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -78,6 +78,22 @@ $page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2
 
 $grid-gap: 0;
 
+// Buttons
+$button-icons: (
+    accept: accept,
+    cancel: decline,
+    edit: edit,
+    move-up: arr_1up,
+    move-down: arr_1down,
+    add: add,
+    trash: trash,
+    download: download,
+    search: search,
+    arr_left: arr_1left,
+    arr_right: arr_1right,
+    refresh: refresh,
+);
+
 :root {
     // The special handling for -- as -- seems to be neccessary to make
     // scss evaluate the color variables