mirror_php/formwork
1
0
Fork 0
mirror of https://github.com/getformwork/formwork.git synced 2025-02-24 01:32:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve focus state on buttons

Browse Source
This commit is contained in:
Giuseppe Criscione 2020-06-01 13:07:33 +02:00
parent a39f443dcf
commit 99c134ff8f
4 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
admin/assets/css/admin.css
View File

@ -416,14 +416,14 @@ button,
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
button:hover,
.button:hover {
button:hover, button:focus,
.button:hover,
.button:focus {
border-color: #e3e3e3;
background-color: #e3e3e3;
color: #262626; }
background-color: #e3e3e3; }
button:focus,
.button:focus {
box-shadow: 0 0 0 2px rgba(4, 138, 255, 0.25); }
box-shadow: 0 0 0 2px rgba(38, 38, 38, 0.25); }
button[disabled], button[disabled]:hover, button.disabled, button.disabled:hover,
.button[disabled],
.button[disabled]:hover,
@ -454,6 +454,8 @@ a.button {
border-color: #166dba;
background-color: #166dba;
color: #fff; }
.button-accent:focus {
box-shadow: 0 0 0 2px rgba(4, 138, 255, 0.25); }
.button-success {
border: 1px solid #2ecc70;
@ -463,6 +465,8 @@ a.button {
border-color: #25a259;
background-color: #25a259;
color: #fff; }
.button-success:focus {
box-shadow: 0 0 0 2px rgba(37, 162, 89, 0.25); }
.button-warning {
border: 1px solid #f39c11;
@ -472,6 +476,8 @@ a.button {
border-color: #c77e0a;
background-color: #c77e0a;
color: #fff; }
.button-warning:focus {
box-shadow: 0 0 0 2px rgba(199, 126, 10, 0.25); }
.button-error {
border: 1px solid #e74c3b;
@ -481,6 +487,8 @@ a.button {
border-color: #d52d1a;
background-color: #d52d1a;
color: #fff; }
.button-error:focus {
box-shadow: 0 0 0 2px rgba(213, 45, 26, 0.25); }
.button-link {
margin: 0;
@ -488,11 +496,10 @@ a.button {
background-color: transparent;
font-size: inherit;
cursor: pointer; }
.button-link:hover {
.button-link:hover, .button-link:focus {
background-color: transparent;
color: #1e88e5; }
.button-link:focus {
color: #1e88e5;
box-shadow: 0 0 0 2px rgba(4, 138, 255, 0.25); }
.button-link[disabled], .button-link[disabled]:hover, .button-link.disabled, .button-link.disabled:hover {
background-color: transparent;
@ -2580,9 +2587,11 @@ span.CodeMirror-selectedtext {
font-weight: 400;
font-size: 0.875rem;
cursor: pointer; }
.page-children-toggle:hover {
.page-children-toggle:hover, .page-children-toggle:focus {
border-color: transparent;
background-color: transparent; }
.page-children-toggle:focus {
box-shadow: 0 0 0 2px rgba(4, 138, 255, 0.25); }
.toggle-collapsed::before {
font-family: Icons, sans-serif; }

2
admin/assets/css/admin.min.css vendored
View File

File diff suppressed because one or more lines are too long

22
admin/assets/scss/components/_buttons.scss
View File

@ -20,13 +20,13 @@ button,
cursor: default;
transition: border-color $transition-time-s, background-color $transition-time-s, color $transition-time-s;
@include user-select-none;
&:hover {
&:hover,
&:focus {
border-color: $color-gray-light;
background-color: $color-gray-light;
color: $color-gray-xxdark;
}
&:focus {
@include focusring;
@include focusring($color-gray-xxdark);
}
&[disabled],
&[disabled]:hover,
@ -63,6 +63,9 @@ a.button {
background-color: $color-accent-dark;
color: #fff;
}
&:focus {
@include focusring;
}
}
.button-success {
@ -75,6 +78,9 @@ a.button {
background-color: $color-success-dark;
color: #fff;
}
&:focus {
@include focusring($color-success-dark);
}
}
.button-warning {
@ -87,6 +93,9 @@ a.button {
background-color: $color-warning-dark;
color: #fff;
}
&:focus {
@include focusring($color-warning-dark);
}
}
.button-error {
@ -99,6 +108,9 @@ a.button {
background-color: $color-error-dark;
color: #fff;
}
&:focus {
@include focusring($color-error-dark);
}
}
.button-link {
@ -107,12 +119,12 @@ a.button {
background-color: transparent;
font-size: inherit;
cursor: pointer;
&:hover {
&:hover,
&:focus {
background-color: transparent;
color: $color-accent;
}
&:focus {
color: $color-accent;
@include focusring;
}
&[disabled],

6
admin/assets/scss/components/_pages.scss
View File

@ -27,10 +27,14 @@
font-weight: 400;
font-size: $font-size-s;
cursor: pointer;
&:hover {
&:hover,
&:focus {
border-color: transparent;
background-color: transparent;
}
&:focus {
@include focusring;
}
}
.toggle-collapsed::before {