Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Design: Updated buttons to be a bit friendlier

Browse Source 
Old all-caps button design made them a bit angry, and kinda odd and
outdated. This updates them to use their original source text casing
(which may help for translation variations) while being a bit rounder
with a better defined shadow for outline buttons.
This commit is contained in:
Dan Brown 2023-12-16 14:03:12 +00:00
parent 7250671889
commit 0c4dd7874c
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
resources/sass/_buttons.scss
View File

@ -14,7 +14,7 @@ button {
display: inline-block; display: inline-block;
font-weight: 400; font-weight: 400;
outline: 0; outline: 0;
border-radius: 2px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: background-color ease-in-out 120ms, transition: background-color ease-in-out 120ms,
filter ease-in-out 120ms, filter ease-in-out 120ms,
@ -22,7 +22,6 @@ button {
box-shadow: none; box-shadow: none;
background-color: var(--color-primary); background-color: var(--color-primary);
color: #FFF; color: #FFF;
text-transform: uppercase;
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary);
vertical-align: top; vertical-align: top;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
@ -52,10 +51,11 @@ button {
border: 1px solid; border: 1px solid;
@include lightDark(border-color, #CCC, #666); @include lightDark(border-color, #CCC, #666);
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
@include lightDark(color, #444, #BBB);
border: 1px solid #CCC; border: 1px solid #CCC;
box-shadow: none; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #F2F2F2; background-color: #F2F2F2;
@include lightDark(background-color, #f2f2f2, #555); @include lightDark(background-color, #f8f8f8, #444);
filter: none; filter: none;
} }
&:active { &:active {