summaryrefslogtreecommitdiff
path: root/ext/css/context.css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-02-20 20:56:20 -0500
committerGitHub <noreply@github.com>2021-02-20 20:56:20 -0500
commitad0f8bfe39018563033a82ac1ee7d38dd5034594 (patch)
tree17388952bf4539658a7e5668b5d4fff007e875c3 /ext/css/context.css
parent7315ecdd1ae36df20b36ca3102359e9c64270154 (diff)
Focus visible styles (#1426)
* Add focus-visible styles * Add focus-visible styles * Add focus-visible styles * Add focus-visible styles * Add focus-visible styles
Diffstat (limited to 'ext/css/context.css')
-rw-r--r--ext/css/context.css68
1 files changed, 53 insertions, 15 deletions
diff --git a/ext/css/context.css b/ext/css/context.css
index a77511ad..4345d3a6 100644
--- a/ext/css/context.css
+++ b/ext/css/context.css
@@ -144,7 +144,13 @@ label {
/* Toggle */
.toggle>input[type=checkbox] {
- display: none;
+ width: 0;
+ height: 0;
+ opacity: 0;
+ display: block;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
}
.toggle>input[type=checkbox]:not(:checked)~.toggle-group {
transform: translateX(-50%);
@@ -205,12 +211,21 @@ body[data-loaded=true] .toggle-group {
background-image: linear-gradient(#337ab7, #265a88);
background-repeat: repeat-x;
}
-.toggle-on:focus,
-.toggle-on:hover {
+input[type=checkbox]:focus~.toggle-group>.toggle-on,
+input[type=checkbox]~.toggle-group>.toggle-on:hover {
background-color: #265a88;
background-image: linear-gradient(#2d65a0, #265a88 50%);
}
-.toggle-on:active {
+input[type=checkbox]:focus:not(:focus-visible)~.toggle-group>.toggle-on:not(:hover) {
+ background-color: #337ab7;
+ background-image: linear-gradient(#337ab7, #265a88);
+}
+input[type=checkbox]:focus-visible~.toggle-group>.toggle-on {
+ background-color: #265a88;
+ background-image: linear-gradient(#2d65a0, #265a88 50%);
+}
+input[type=checkbox]~.toggle-group>.toggle-on:active,
+input[type=checkbox]~.toggle-group>.toggle-on:active:focus {
background-color: #204d74;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -244,16 +259,28 @@ body[data-loaded=true] .toggle-group {
background-repeat: repeat-x;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}
-.toggle-off:focus,
-.toggle-off:hover,
-.toggle-handle:focus,
-.toggle-handle:hover {
+input[type=checkbox]:focus~.toggle-group>.toggle-off,
+input[type=checkbox]~.toggle-group>.toggle-off:hover,
+input[type=checkbox]~.toggle-group>.toggle-handle:hover {
+ background-color: #e6e6e6;
+ background-image: linear-gradient(#e0e0e0, #e6e6e6 50%);
+ border-color: #adadad;
+}
+input[type=checkbox]:focus:not(:focus-visible)~.toggle-group>.toggle-off:not(:hover) {
+ background-color: #ffffff;
+ background-image: linear-gradient(#ffffff, #e0e0e0);
+ border-color: #cccccc;
+}
+input[type=checkbox]:focus-visible~.toggle-group>.toggle-off,
+input[type=checkbox]~.toggle-group>.toggle-off:hover {
background-color: #e6e6e6;
background-image: linear-gradient(#e0e0e0, #e6e6e6 50%);
border-color: #adadad;
}
-.toggle-off:active,
-.toggle-handle:active {
+input[type=checkbox]~.toggle-group>.toggle-off:active,
+input[type=checkbox]~.toggle-group>.toggle-handle:active,
+input[type=checkbox]~.toggle-group>.toggle-off:active:focus,
+input[type=checkbox]~.toggle-group>.toggle-handle:active:focus {
background-color: #d4d4d4;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -279,21 +306,32 @@ body[data-loaded=true] .toggle-group {
.nav-button+.nav-button {
margin-left: -1px;
}
-.nav-button:hover {
+.nav-button:hover,
+.nav-button:focus {
z-index: 1;
border-color: #aaaaaa;
background-image: linear-gradient(#e8e8e8, #d0d0d0);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+ outline: none;
+}
+.nav-button:focus:not(:focus-visible) {
+ background-image: linear-gradient(#f8f8f8, #e0e0e0);
+ border-color: #cccccc;
+ box-shadow: none;
}
-.nav-button:active {
+.nav-button:focus-visible {
+ z-index: 1;
+ border-color: #aaaaaa;
+ background-image: linear-gradient(#e8e8e8, #d0d0d0);
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+}
+.nav-button:active,
+.nav-button:active:focus {
z-index: 1;
border-color: #808080;
background-image: linear-gradient(#c8c8c8, #e0e0e0);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}
-.nav-button:focus {
- outline: none;
-}
.nav-button>.icon {
--icon-size: 16px 16px;
display: block;