Bugzilla – Attachment 142890 Details for
Bug 32044
Yellow buttons are styled differently in different spots
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 32044: Improve consistency in primary submit buttons
Bug-32044-Improve-consistency-in-primary-submit-bu.patch (text/plain), 9.47 KB, created by
Katrin Fischer
on 2022-11-01 14:59:08 UTC
(
hide
)
Description:
Bug 32044: Improve consistency in primary submit buttons
Filename:
MIME Type:
Creator:
Katrin Fischer
Created:
2022-11-01 14:59:08 UTC
Size:
9.47 KB
patch
obsolete
>From 2bd7637f0cc245a755cda3e94817991dff815411 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >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 <katrin.fischer.83@web.de> >--- > 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 115128e8bb..fb23ca66ce 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,6 +3370,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.30.2
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 32044
:
142854
|
142862
| 142890