updated focus styling

w3c · May 10, 2021 · c382f33 · c382f33
1 parent 5d0d599
commit c382f33
Showing 1 changed file with 6 additions and 8 deletions.
diff --git a/examples/checkbox/css/checkbox-mixed.css b/examples/checkbox/css/checkbox-mixed.css
@@ -35,7 +35,7 @@
 .checkbox-mixed [role="checkbox"]::before {
   width: 14px;
   height: 14px;
-  border: 1px solid hsl(0, 0%, 66%);
+  border: 2px solid hsl(0, 0%, 66%);
   border-radius: 0.2em;
   background-image: linear-gradient(to bottom, hsl(300, 3%, 93%), #fff 30%);
 }
@@ -62,7 +62,7 @@
 .checkbox-mixed [role="checkbox"][aria-checked="mixed"]::after {
   display: block;
   width: 8px;
-  border-bottom: 0.125em solid #fff;
+  border-bottom: 2px solid #fff;
   transform: translate(-50%, -50%) rotateZ(45deg);
   transform-origin: center center;
 }
@@ -73,7 +73,7 @@
   width: 0.25em;
   height: 0.4em;
   border: solid #fff;
-  border-width: 0 0.125em 0.125em 0;
+  border-width: 0 2px 2px 0;
   transform: translateY(-65%) translateX(-50%) rotate(45deg);
 }
 
@@ -86,17 +86,16 @@
   );
 }
 
+.checkbox-mixed input:focus,
+.checkbox-mixed [role="checkbox"].focus,
 .checkbox-mixed [role="checkbox"]:focus {
   outline: none;
 }
 
 .checkbox-mixed [role="checkbox"]:focus::before {
-  width: 16px;
-  height: 16px;
   box-sizing: content-box;
   border-color: hsl(216, 94%, 73%);
-  border-width: 3px;
-  border-radius: calc(0.2em + 3px);
+  border-width: 2px;
   box-shadow: inset 0 0 0 1px hsl(216, 80%, 50%);
 }
 
@@ -106,7 +105,6 @@
   border: 2px solid #765;
   border-radius: 5px;
   background-color: #def;
-  outline: none;
 }
 
 .checkbox-mixed label.focus {