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> Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
parent
c13692cc4b
commit
4bef47bba8
GPG key ID:
0A272EA1B2F3C15F
5 changed files with 86 additions and 80 deletions
|
|
@ -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 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.submit input:active, .button:active {
|
||||
background: #fff;
|
||||
border: 1px solid #999;
|
||||
border-left-color: #999;
|
||||
border-top-color: #999;
|
||||
#submit-button {
|
||||
font-size: 135%;
|
||||
}
|
||||
|
||||
.submit, .editform th, #postcustomsubmit {
|
||||
text-align: right;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -70,5 +70,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue