From 8c81030eb8222e9c5380c54a3b6dc39c0c51df10 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) --- koha-tmpl/intranet-tmpl/prog/css/login.css | 53 ++---------------- .../intranet-tmpl/prog/css/src/_mixins.scss | 43 ++++++++++++-- .../intranet-tmpl/prog/css/src/_toolbar.scss | 4 ++ .../prog/css/src/_variables.scss | 2 + .../prog/css/src/staff-global.scss | 56 +++++++++---------- 5 files changed, 77 insertions(+), 81 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/login.css b/koha-tmpl/intranet-tmpl/prog/css/login.css index 8d18dbf05f..150f2f9a23 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,36 +112,14 @@ 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%; } - textarea, input, select { background: #fff; border: 1px solid #b2b2b2; diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss index aa2e870101..4896094d69 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss @@ -8,24 +8,31 @@ $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: none; + } } &:active { - box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); } &:active:hover { @@ -34,6 +41,34 @@ $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 { + background: $btn-primary-hover none; + border: 1px solid $btn-primary; + } + + &:active { + 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 115128e8bb..ca65532445 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 { @@ -1566,9 +1562,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; @@ -3064,23 +3058,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 { @@ -3375,8 +3370,13 @@ label { select { font-size: 13px; } + + > .btn:first-child:not( :last-child ):not( .dropdown-toggle ) { + border-right: 1px solid darken( saturate( $btn-primary, 15 ), 15 ); + } } +.btn-group .tooltip-inner { white-space: pre-wrap; } -- 2.20.1