From cda6e9be13745c8ec6d86fd7a00530dd74959fb7 Mon Sep 17 00:00:00 2001 From: Ron Lucke Date: Wed, 15 Jan 2025 11:14:05 +0000 Subject: deaktivierte Buttons in Dialogen haben falsche Farben und zu wenig Kontrast Closes #5114 Merge request studip/studip!3837 --- resources/assets/stylesheets/scss/buttons.scss | 17 +--------------- resources/assets/stylesheets/scss/dialog.scss | 25 ++++++++++++------------ resources/assets/stylesheets/scss/variables.scss | 16 +++++++++++++++ 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 -- cgit v1.0