From 4bef47bba8f56a1ab7da87a07123582ad4055c0d Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Mon, 31 Oct 2022 18:19:03 +0000 Subject: [PATCH] Bug 32044: Improve consistency in primary submit buttons We currently have a mix of ways to style buttons, including some using Bootstrap's btn-primary class and some with CSS targeting input[type='submit']. This patch works to make these buttons more consistent in their appearance and to improve the modularity of related SCSS. The patch also removes some unused CSS from login.css. To test, apply the patch and rebuild the staff interface CSS. Test various page to see if main submit buttons look correct in their default, hover, and active states: - The login page - Circulation -> Checkouts -> Check out button (btn-primary) - Circulation -> Set library (input[type='submit']) - Cataloging -> Basic MARC editor (split button) Also check "default" buttons: - Patrons -> Sidebar filter (input[type='button']) - Circulation -> Checkouts -> Show checkouts (btn-default) Signed-off-by: Katrin Fischer Signed-off-by: Tomas Cohen Arazi --- koha-tmpl/intranet-tmpl/prog/css/login.css | 63 +++++-------------- .../intranet-tmpl/prog/css/src/_mixins.scss | 46 ++++++++++++-- .../intranet-tmpl/prog/css/src/_toolbar.scss | 4 ++ .../prog/css/src/_variables.scss | 2 + .../prog/css/src/staff-global.scss | 55 ++++++++-------- 5 files changed, 88 insertions(+), 82 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/login.css b/koha-tmpl/intranet-tmpl/prog/css/login.css index 8d18dbf05f..cccbb1e7b2 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/login.css +++ b/koha-tmpl/intranet-tmpl/prog/css/login.css @@ -105,29 +105,6 @@ label { text-align: center; } -#login #submit-button, #login .button { - font-size: 1.4em; - padding : .3em .6em; - background: rgba(254, 195, 44, 1); - border: none; - color: #000; -} - -#login #submit-button:hover, #login #submit-button:focus, #login #submit-button:active { - background: rgba(254, 195, 44, 0.7); - border: none; -} - -#login #onerror_actions { - margin-bottom: 1em; - text-align: center; -} - -#login #onerror_actions .button { - margin: 3px; - color: #333333; -} - #footer { text-align: center; border-top: 1px solid #ccc; @@ -135,35 +112,25 @@ label { font-style: italic; } -.submit input, .submit input:focus, .button { - border: 1px outset #999999; - border-top-color: #666; - border-left-color: #666; - -moz-border-radius : 2px; - padding: 0.25em; - background: #ffffff; /* Old browsers */ - background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 35%, #e0e0e0 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(35%,#f7f7f7), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* IE10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */ - background: linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* W3C */ - color: #333333; - padding: 0.25em; -} - -.submit input:active, .button:active { - background: #fff; - border: 1px solid #999; - border-left-color: #999; - border-top-color: #999; +.submit { + text-align: right; } -.submit, .editform th, #postcustomsubmit { - text-align: right; +#submit-button { + font-size: 135%; } +input[type="submit"]:active, +input[type="submit"]:focus { + box-shadow: inset 0 0 0 1px #edb423; +} + +input[type="submit"]:active, +input[type="submit"]:focus, +input[type="submit"]:hover { + background: #ffd15e none; + border: 1px solid #ffc32b; +} textarea, input, select { background: #fff; diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss index aa2e870101..4b8b773976 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss @@ -8,24 +8,28 @@ $table-odd-row: #f3f4f4; $nav-menu-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 25 25'%3E%3Cpath fill='%23999' d='M9.66.95h4.56l9.21 11.85-9.21 10.53H9.66l5.08-10.53z'/%3E%3C/svg%3E"); @mixin default-button { - background-color: #fff; - border: 1px solid #ccc; + background: #FFF none; + border: 1px solid #555; border-radius: 4px; - color: #333; + cursor: pointer; display: inline-block; font-size: inherit; + font-weight: normal; line-height: 1.42857143; + margin-bottom: 0; padding: .5em 1em; text-align: center; + touch-action: manipulation; + user-select: none; vertical-align: middle; white-space: nowrap; &:hover { background-color: #e0e0e0; - } - &:active { - box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); + &:active { + box-shadow: none; + } } &:active:hover { @@ -34,6 +38,36 @@ $nav-menu-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s } } +@mixin primary-button { + background: $btn-primary none; + border: 1px solid $btn-primary; + border-radius: 4px; + cursor: pointer; + display: inline-block; + font-size: inherit; + font-weight: normal; + line-height: 1.42857143; + margin-bottom: 0; + padding: .5em 1em; + text-align: center; + touch-action: manipulation; + user-select: none; + vertical-align: middle; + white-space: nowrap; + + &:hover, + &:active, + &:focus { + background: $btn-primary-hover none; + border: 1px solid $btn-primary; + } + + &:active, + &:focus { + box-shadow: inset 0 0 0 1px darken( desaturate( $btn-primary, 15 ), 5 ); + } +} + @mixin disabled-button { background: #EEE none; border: 1px solid #C0C0C0; diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_toolbar.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_toolbar.scss index a82d8d2a0e..e18ff3dce1 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_toolbar.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_toolbar.scss @@ -70,5 +70,9 @@ } } } + + &.btn-link { + font-size: 100%; + } } } diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss index 72a8aa17ba..3222c5caa5 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss @@ -2,6 +2,8 @@ $green-text-color: #006100; $background-color-primary: #408540; $background-color-secondary: lighten(saturate(adjust-hue($background-color-primary, -24), 9), 9); $background-color-modal: lighten( saturate( $background-color-secondary, 5 ), 40 ); +$btn-primary: #FFC32B; +$btn-primary-hover: lighten( $btn-primary, 10 ); // Copied from Bootstrap 5 without system-ui because of // https://infinnie.github.io/blog/2017/systemui.html diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 8c75733d9a..497b060314 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -14,7 +14,9 @@ .btn-success, .btn-info, .btn-warning, -.btn-danger { +.btn-danger, +button { + box-shadow: unset; text-shadow: unset; } @@ -566,7 +568,10 @@ textarea { } input { - &[type="submit"], + &[type="submit"] { + @include primary-button; + } + &[type="reset"], &[type="button"] { @include default-button; @@ -584,21 +589,12 @@ input { } &.submit { - @include default-button; + @include primary-button; &:disabled { @include disabled-button; } } - - &[type="submit"], &.submit { - background-color: #FEC32C; - border: 0; - - &:hover { - background-color: #fec22c9f; - } - } } .input-warning { @@ -1557,9 +1553,7 @@ i { button, a.approve { background: #FFF none; - border: 1px outset #999999; - border-left-color: #666; - border-top-color: #666; + border: 1px solid #555; margin: .4em; padding: .4em; white-space: pre-line; @@ -3055,23 +3049,24 @@ nav { button, .btn { - display: inline-block; - margin-bottom: 0; - font-weight: normal; - text-align: center; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - background-image: none; - font-size: 12px; - line-height: 1.42857143; - border-radius: 4px; - user-select: none; + @include default-button; + + &.btn-default { + color: #555; + } &.btn-link { + background: transparent none; border: 0; } + + &.btn-primary { + @include primary-button; + + &.dropdown-toggle { + border-left: 1px solid darken( saturate( $btn-primary, 15 ), 15 ); + } + } } #merge-patrons { @@ -3366,6 +3361,10 @@ label { select { font-size: 13px; } + + > .btn:first-child:not( :last-child ):not( .dropdown-toggle ) { + border-right: 1px solid darken( saturate( $btn-primary, 15 ), 15 ); + } } .tooltip-inner { -- 2.39.5