New design for checkboxes

w3c · Feb 20, 2017 · 4781f28 · 4781f28
1 parent 8c23a88
commit 4781f28
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 97 deletions.
diff --git a/examples/checkbox/checkbox-1/checkbox-1.html b/examples/checkbox/checkbox-1/checkbox-1.html
@@ -11,8 +11,7 @@
   <script src="../../js/highlight.pack.js"></script>
   <script src="../../js/app.js"></script>
 
-  <link href="css/checkbox.css" rel="stylesheet">
-
+  <link href="../css/checkbox.css" rel="stylesheet">
   <script src="js/checkbox.js" type="text/javascript"></script>
 </head>
 <body>
@@ -34,10 +33,12 @@ <h2 id="ex_label">Example</h2>
       <div  id="ex1">
         <h3>Sandwich Condiments</h3>
         <div>
-           <div role="checkbox" aria-checked="false"  tabindex= "0">Lettuce</div>
-           <div role="checkbox" aria-checked="true"   tabindex= "0">Tomato</div>
-           <div role="checkbox" aria-checked="false"  tabindex= "0">Mustard</div>
-           <div role="checkbox" aria-checked="false"  tabindex= "0">Sprouts</div>
+          <ul>
+            <li><div role="checkbox" aria-checked="false" tabindex= "0">Lettuce</div></li>
+            <li><div role="checkbox" aria-checked="true"  tabindex= "0">Tomato</div></li>
+            <li><div role="checkbox" aria-checked="false" tabindex= "0">Mustard</div></li>
+            <li><div role="checkbox" aria-checked="false" tabindex= "0">Sprouts</div></li>
+          </ul>
         </div>
 
         <script type="text/javascript">

diff --git a/examples/checkbox/checkbox-1/css/checkbox.css b/examples/checkbox/checkbox-1/css/checkbox.css
diff --git a/examples/checkbox/checkbox-1/images/checkbox-checked.png b/examples/checkbox/checkbox-1/images/checkbox-checked.png
diff --git a/examples/checkbox/checkbox-1/images/checkbox-unchecked.png b/examples/checkbox/checkbox-1/images/checkbox-unchecked.png
diff --git a/examples/checkbox/checkbox-2/checkbox-2.html b/examples/checkbox/checkbox-2/checkbox-2.html
@@ -11,8 +11,7 @@
     <script src="../../js/highlight.pack.js"></script>
     <script src="../../js/app.js"></script>
 
-    <link href="css/checkboxMixed.css" rel="stylesheet">
-
+    <link href="../css/checkbox.css" rel="stylesheet">
     <script src="js/controlledCheckbox.js" type="text/javascript"></script>
     <script src="js/checkboxMixed.js" type="text/javascript"></script>
   </head>

diff --git a/examples/checkbox/checkbox-2/css/checkboxMixed.css b/examples/checkbox/checkbox-2/css/checkboxMixed.css
diff --git a/examples/checkbox/checkbox-2/images/checkbox-checked.png b/examples/checkbox/checkbox-2/images/checkbox-checked.png
diff --git a/examples/checkbox/checkbox-2/images/checkbox-mixed.png b/examples/checkbox/checkbox-2/images/checkbox-mixed.png
diff --git a/examples/checkbox/checkbox-2/images/checkbox-unchecked.png b/examples/checkbox/checkbox-2/images/checkbox-unchecked.png
diff --git a/examples/checkbox/css/checkbox.css b/examples/checkbox/css/checkbox.css
@@ -0,0 +1,69 @@
+[role="checkbox"] {
+  display: inline-block;
+  position: relative;
+  padding-left: 1.4em;
+  cursor: default;
+}
+
+[role="checkbox"]::before,
+[role="checkbox"]::after {
+  position: absolute;
+  top: 50%;
+  left: 7px;
+  transform: translate(-50%, -50%);
+  content: '';
+}
+
+[role="checkbox"]::before {
+  width: 14px;
+  height: 14px;
+  border: 1px solid hsl(0, 0%, 66%);
+  border-radius: .2em;
+  background-image: linear-gradient(to bottom, hsl(300, 3%, 93%), #fff 30%);
+}
+
+[role="checkbox"]:active::before {
+  background-image: linear-gradient(to bottom, hsl(300, 3%, 73%), hsl(300, 3%, 93%) 30%);
+}
+
+[role="checkbox"][aria-checked="mixed"]::before,
+[role="checkbox"][aria-checked="true"]::before {
+  border-color: hsl(216, 80%, 50%);
+  background: hsl(217, 95%, 68%);
+  background-image: linear-gradient(to bottom, hsl(217, 95%, 68%), hsl(216, 80%, 57%));
+}
+
+[role="checkbox"][aria-checked="mixed"]::after {
+  display: block;
+  width: 6px;
+  border-bottom: 0.125em solid #fff;
+}
+
+[role="checkbox"][aria-checked="mixed"]:active::after,
+[role="checkbox"][aria-checked="true"]::after {
+  display: block;
+  width: .25em;
+  height: .4em;
+  border: solid #fff;
+  border-width: 0 .125em .125em 0;
+  transform: translateY(-65%) translateX(-50%) rotate(45deg);
+}
+
+[role="checkbox"][aria-checked="mixed"]:active::before,
+[role="checkbox"][aria-checked="true"]:active::before {
+  background-image: linear-gradient(to bottom, hsl(216, 80%, 57%), hsl(217, 95%, 68%));
+}
+
+[role="checkbox"]:focus {
+  outline: none;
+}
+
+[role="checkbox"]:focus::before {
+  width: 16px;
+  height: 16px;
+  box-sizing: content-box;
+  border-color: hsl(216, 94%, 73%);
+  border-width: 3px;
+  border-radius: calc(.2em + 3px);
+  box-shadow: inset 0 0 0 1px hsl(216, 80%, 50%);
+}