From ab4204e17edf99b66fac77fa5e4925e70fe30cc6 Mon Sep 17 00:00:00 2001 From: Etheryte Date: Tue, 10 Sep 2024 18:53:53 +0300 Subject: [PATCH 1/2] Make button styles more consistent --- .../css/susemanager/components/alerts.less | 2 +- .../css/susemanager/components/alerts.scss | 2 +- .../css/susemanager/components/buttons.less | 2 + .../css/susemanager/components/buttons.scss | 2 + .../susemanager/components/buttons.suma.less | 45 +++++----- .../susemanager/components/buttons.suma.scss | 27 +++--- .../susemanager/components/buttons.uyuni.less | 90 +++++++++++++++++-- .../susemanager/components/buttons.uyuni.scss | 84 ++++++++++++----- .../css/susemanager/components/label.scss | 2 +- .../css/susemanager/components/text.scss | 2 +- .../branding/css/susemanager/variables.less | 3 +- .../branding/css/susemanager/variables.scss | 5 +- web/spacewalk-web.changes.eth.minor-fixes | 1 + 13 files changed, 196 insertions(+), 71 deletions(-) create mode 100644 web/spacewalk-web.changes.eth.minor-fixes diff --git a/web/html/src/branding/css/susemanager/components/alerts.less b/web/html/src/branding/css/susemanager/components/alerts.less index c5d7234c2a78..104c6a932bce 100644 --- a/web/html/src/branding/css/susemanager/components/alerts.less +++ b/web/html/src/branding/css/susemanager/components/alerts.less @@ -75,7 +75,7 @@ .alert-danger, .Toastify__toast--error { background-color: @eos-bc-red-100; - border-left: 5px solid @eos-bc-red-900; + border-left: 5px solid @eos-bc-red-600; color: @eos-bc-gray-1000; &:before { diff --git a/web/html/src/branding/css/susemanager/components/alerts.scss b/web/html/src/branding/css/susemanager/components/alerts.scss index 5ac6f5952994..0a1ad3daee9a 100644 --- a/web/html/src/branding/css/susemanager/components/alerts.scss +++ b/web/html/src/branding/css/susemanager/components/alerts.scss @@ -75,7 +75,7 @@ .alert-danger, .Toastify__toast--error { background-color: $eos-bc-red-100; - border-left: 5px solid $eos-bc-red-900; + border-left: 5px solid $eos-bc-red-600; color: $eos-bc-gray-1000; &:before { diff --git a/web/html/src/branding/css/susemanager/components/buttons.less b/web/html/src/branding/css/susemanager/components/buttons.less index 99dfe97eef7e..cf9296f63948 100644 --- a/web/html/src/branding/css/susemanager/components/buttons.less +++ b/web/html/src/branding/css/susemanager/components/buttons.less @@ -5,6 +5,8 @@ .btn-success, .btn-warning, .btn-danger { + user-select: auto; + i.fa::before { // No text-decoration for the icon text, see https://stackoverflow.com/a/19529256/1470607 display: inline-block; diff --git a/web/html/src/branding/css/susemanager/components/buttons.scss b/web/html/src/branding/css/susemanager/components/buttons.scss index 5c69a93c9031..0ed2e30813a1 100644 --- a/web/html/src/branding/css/susemanager/components/buttons.scss +++ b/web/html/src/branding/css/susemanager/components/buttons.scss @@ -5,6 +5,8 @@ .btn-success, .btn-warning, .btn-danger { + user-select: auto; + i.fa::before { // No text-decoration for the icon text, see https://stackoverflow.com/a/19529256/1470607 display: inline-block; diff --git a/web/html/src/branding/css/susemanager/components/buttons.suma.less b/web/html/src/branding/css/susemanager/components/buttons.suma.less index 4f250bea181a..1b226df5195e 100644 --- a/web/html/src/branding/css/susemanager/components/buttons.suma.less +++ b/web/html/src/branding/css/susemanager/components/buttons.suma.less @@ -77,26 +77,15 @@ } } -.btn-link { - &, - &:active, - &:focus, - &:disabled, - &.disabled { - &, - &:hover { - color: @link-color; - font-weight: normal; - } +.btn { + background: transparent; - &:not(:disabled):not(.disabled):not(.text-muted):hover { - text-decoration: underline; - } + &.disabled, + &:disabled { + border-color: transparent; } } -// TODO: Add :active and :focus states for green etc -// NB! Here and below, these are not nested because they're not used consistently along with .btn .btn-default { &, &:active, @@ -116,6 +105,7 @@ } } +// TODO: Make this obsolete and move it into the search module instead .btn-default-inverse { &, &:active, @@ -173,6 +163,24 @@ } } +.btn-info { + &, + &:active, + &:focus, + &:disabled, + &.disabled { + &, + &:hover { + background: @eos-bc-cerulean-400; + border-color: @eos-bc-cerulean-400; + + &:not(:disabled):not(.disabled):not(.text-muted):hover::after { + background: @eos-bc-gray-900; + } + } + } +} + // Warning shouldn't currently be used anywhere, but cover it just in case .btn-warning, .btn-danger { @@ -187,11 +195,6 @@ border-color: @eos-bc-red-500; color: @eos-bc-white; - &:not(:disabled):not(.disabled):not(.text-muted):hover { - background: @eos-bc-red-900; - border-color: @eos-bc-red-900; - } - &:not(:disabled):not(.disabled):not(.text-muted):hover::after { background: @eos-bc-gray-900; } diff --git a/web/html/src/branding/css/susemanager/components/buttons.suma.scss b/web/html/src/branding/css/susemanager/components/buttons.suma.scss index 66c8dcda97a3..52fe8f9ece9f 100644 --- a/web/html/src/branding/css/susemanager/components/buttons.suma.scss +++ b/web/html/src/branding/css/susemanager/components/buttons.suma.scss @@ -8,8 +8,7 @@ font-weight: bold; padding: 8px 16px; position: relative; - border-style: solid; - border-width: 2px; + border: 2px solid transparent; filter: none; transition: none; text-decoration: none; @@ -71,8 +70,15 @@ } } -// TODO: Add :active and :focus states for green etc -// NB! Here and below, these are not nested because they're not used consistently along with .btn +.btn { + background: transparent; + + &.disabled, + &:disabled { + border-color: transparent; + } +} + .btn-default { &, &:active, @@ -92,6 +98,7 @@ } } +// TODO: Make this obsolete and move it into the search module instead .btn-default-inverse { &, &:active, @@ -157,10 +164,11 @@ &.disabled { &, &:hover { - border-color: $eos-bc-cerulean-500; + background: $eos-bc-cerulean-400; + border-color: $eos-bc-cerulean-400; - &:not(:disabled):not(.disabled):not(.text-muted):hover { - color: $white; + &:not(:disabled):not(.disabled):not(.text-muted):hover::after { + background: $eos-bc-gray-900; } } } @@ -180,11 +188,6 @@ border-color: $eos-bc-red-500; color: $eos-bc-white; - &:not(:disabled):not(.disabled):not(.text-muted):hover { - background: $eos-bc-red-900; - border-color: $eos-bc-red-900; - } - &:not(:disabled):not(.disabled):not(.text-muted):hover::after { background: $eos-bc-gray-900; } diff --git a/web/html/src/branding/css/susemanager/components/buttons.uyuni.less b/web/html/src/branding/css/susemanager/components/buttons.uyuni.less index 78ea3417bf93..7cf9477d5b6b 100644 --- a/web/html/src/branding/css/susemanager/components/buttons.uyuni.less +++ b/web/html/src/branding/css/susemanager/components/buttons.uyuni.less @@ -1,18 +1,92 @@ +.btn { + &, &:hover { + color: @body-color; + background: transparent; + + &.disabled, + &:disabled { + border-color: transparent; + } + } +} + +// These are grandfathered old styles so we're consistent between Bootstrap 3 and 5 .btn-default { - background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%); - border-color: #ccc;; - color: #5F5F5F; + &, &:hover { + background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%); + border-color: #e6e6e6; + color: #5F5F5F; + + &:hover { + border-color: #929292; + } + + &, &:disabled, &.disabled { + border-color: #ccc; + } + } } .btn-primary, .btn-success { - background-image: linear-gradient(to bottom, #00da92 0%, #00C081 100%); - border-color: #00C081; - color: #fff; + &, &:hover { + background-image: linear-gradient(to bottom, #00da92 0%, #00C081 100%); + color: #fff; + + &:hover { + border-color: #009060; + } + + &, &:disabled, &.disabled { + border-color: #00C081; + } + } } +.btn-warning { + &, &:hover { + background-image: linear-gradient(to bottom, #ffb638 0%, #e59409 100%); + color: #fff; + + &:hover { + border-color: #b46c00; + } + + &, &:disabled, &.disabled { + color: #fff; + border-color: #e59409; + } + } +} -.btn-warning, .btn-danger { - // Use the default Bootstrap styles + &, &:hover { + background-image: linear-gradient(to bottom, #f53933 0%, #c81b16 100%); + color: #fff; + + &:hover { + border-color: #840703; + } + + &, &:disabled, &.disabled { + color: #fff; + border-color: #c81b16; + } + } +} + +.btn-info { + &, &:hover { + background-image: linear-gradient(to bottom, #59d4f9 0%, #23bdea 100%); + color: #fff; + + &:hover { + border-color: #047fa4; + } + + &, &:disabled, &.disabled { + color: #fff; + border-color: #23bdea; + } + } } diff --git a/web/html/src/branding/css/susemanager/components/buttons.uyuni.scss b/web/html/src/branding/css/susemanager/components/buttons.uyuni.scss index ba76aecead4a..27aefca1b3c3 100644 --- a/web/html/src/branding/css/susemanager/components/buttons.uyuni.scss +++ b/web/html/src/branding/css/susemanager/components/buttons.uyuni.scss @@ -23,52 +23,90 @@ border: 1px solid; } +.btn { + &.disabled, + &:disabled { + border-color: transparent; + } +} + // These are grandfathered old styles so we're consistent between Bootstrap 3 and 5 .btn-default { - background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%); - color: #5F5F5F; + &, &:hover { + background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%); + border-color: #e6e6e6; + color: #5F5F5F; - &, &:disabled, &.disabled { - border-color: #ccc; + &:hover { + border-color: #929292; + } + + &, &:disabled, &.disabled { + border-color: #ccc; + } } } .btn-primary, .btn-success { - background-image: linear-gradient(to bottom, #00da92 0%, #00C081 100%); - color: #fff; + &, &:hover { + background-image: linear-gradient(to bottom, #00da92 0%, #00C081 100%); + color: #fff; + + &:hover { + border-color: #009060; + } - &, &:disabled, &.disabled { - border-color: #00C081; + &, &:disabled, &.disabled { + border-color: #00C081; + } } } .btn-warning { - color: #fff; - background: #f0ad4e; + &, &:hover { + background-image: linear-gradient(to bottom, #ffb638 0%, #e59409 100%); + color: #fff; + + &:hover { + border-color: #b46c00; + } - &, &:disabled, &.disabled { - border-color: #eea236; + &, &:disabled, &.disabled { + color: #fff; + border-color: #e59409; + } } } .btn-danger { - color: #fff; - background: #d9534f; + &, &:hover { + background-image: linear-gradient(to bottom, #f53933 0%, #c81b16 100%); + color: #fff; - &, &:disabled, &.disabled { - border-color: #d43f3a; + &:hover { + border-color: #840703; + } + + &, &:disabled, &.disabled { + color: #fff; + border-color: #c81b16; + } } } .btn-info { - color: #fff; - background-color: #5bc0de; - border-color: #46b8da; - - &:hover{ + &, &:hover { + background-image: linear-gradient(to bottom, #59d4f9 0%, #23bdea 100%); color: #fff; - background-color: #31b0d5; - border-color: #269abc; + + &:hover { + border-color: #047fa4; + } + + &, &:disabled, &.disabled { + color: #fff; + border-color: #23bdea; + } } } diff --git a/web/html/src/branding/css/susemanager/components/label.scss b/web/html/src/branding/css/susemanager/components/label.scss index 06a98cda7295..e228c12b913b 100644 --- a/web/html/src/branding/css/susemanager/components/label.scss +++ b/web/html/src/branding/css/susemanager/components/label.scss @@ -25,5 +25,5 @@ .label-danger { color: $white; - background-color: $eos-bc-red-900; + background-color: $eos-bc-red-600; } diff --git a/web/html/src/branding/css/susemanager/components/text.scss b/web/html/src/branding/css/susemanager/components/text.scss index fecf0a1e345d..1e4739f7f88f 100644 --- a/web/html/src/branding/css/susemanager/components/text.scss +++ b/web/html/src/branding/css/susemanager/components/text.scss @@ -31,7 +31,7 @@ .text-danger { &, &:hover, &:focus { - color: $eos-bc-red-900 !important; + color: $eos-bc-red-600 !important; } } diff --git a/web/html/src/branding/css/susemanager/variables.less b/web/html/src/branding/css/susemanager/variables.less index 81304eb32708..2ad836d7ef75 100644 --- a/web/html/src/branding/css/susemanager/variables.less +++ b/web/html/src/branding/css/susemanager/variables.less @@ -9,11 +9,12 @@ // TODO: This name should be -1000 or similar @eos-bc-pine-500: #0c322c; @eos-bc-cerulean-100: #b3e8f6; +@eos-bc-cerulean-400: #1acdff; @eos-bc-cerulean-500: #00b2e2; @eos-bc-cerulean-900: #008acf; @eos-bc-red-100: #f5c2c7; @eos-bc-red-500: #dc3545; -@eos-bc-red-900: #c5161f; +@eos-bc-red-600: #BE1324; @eos-bc-yellow-100: #ffecb5; @eos-bc-yellow-500: #ffc107; @eos-bc-yellow-600: #cc7e00; diff --git a/web/html/src/branding/css/susemanager/variables.scss b/web/html/src/branding/css/susemanager/variables.scss index 2d7733ba3bc0..7663570a6d1b 100644 --- a/web/html/src/branding/css/susemanager/variables.scss +++ b/web/html/src/branding/css/susemanager/variables.scss @@ -9,11 +9,12 @@ $eos-bc-green-900: #0e7e3c; // TODO: This name should be -1000 or similar $eos-bc-pine-500: #0c322c; $eos-bc-cerulean-100: #b3e8f6; +$eos-bc-cerulean-400: #1acdff; $eos-bc-cerulean-500: #00b2e2; $eos-bc-cerulean-900: #008acf; $eos-bc-red-100: #f5c2c7; -$eos-bc-red-500: #dc3545; -$eos-bc-red-900: #c5161f; +$eos-bc-red-500: #e81b2e; +$eos-bc-red-600: #BE1324; $eos-bc-yellow-100: #ffecb5; $eos-bc-yellow-500: #ffc107; $eos-bc-yellow-600: #cc7e00; diff --git a/web/spacewalk-web.changes.eth.minor-fixes b/web/spacewalk-web.changes.eth.minor-fixes new file mode 100644 index 000000000000..2c29fe4d6c59 --- /dev/null +++ b/web/spacewalk-web.changes.eth.minor-fixes @@ -0,0 +1 @@ +- Make button styles more consistent From 2afccb5930b24d5a888c573de5a0d074b540023d Mon Sep 17 00:00:00 2001 From: Etheryte Date: Tue, 10 Sep 2024 18:58:22 +0300 Subject: [PATCH 2/2] Fix casing --- web/html/src/branding/css/susemanager/variables.less | 2 +- web/html/src/branding/css/susemanager/variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/html/src/branding/css/susemanager/variables.less b/web/html/src/branding/css/susemanager/variables.less index 2ad836d7ef75..d30f360261f1 100644 --- a/web/html/src/branding/css/susemanager/variables.less +++ b/web/html/src/branding/css/susemanager/variables.less @@ -14,7 +14,7 @@ @eos-bc-cerulean-900: #008acf; @eos-bc-red-100: #f5c2c7; @eos-bc-red-500: #dc3545; -@eos-bc-red-600: #BE1324; +@eos-bc-red-600: #be1324; @eos-bc-yellow-100: #ffecb5; @eos-bc-yellow-500: #ffc107; @eos-bc-yellow-600: #cc7e00; diff --git a/web/html/src/branding/css/susemanager/variables.scss b/web/html/src/branding/css/susemanager/variables.scss index 7663570a6d1b..4827d980668f 100644 --- a/web/html/src/branding/css/susemanager/variables.scss +++ b/web/html/src/branding/css/susemanager/variables.scss @@ -14,7 +14,7 @@ $eos-bc-cerulean-500: #00b2e2; $eos-bc-cerulean-900: #008acf; $eos-bc-red-100: #f5c2c7; $eos-bc-red-500: #e81b2e; -$eos-bc-red-600: #BE1324; +$eos-bc-red-600: #be1324; $eos-bc-yellow-100: #ffecb5; $eos-bc-yellow-500: #ffc107; $eos-bc-yellow-600: #cc7e00;