Button design (#298)

* New style for examples pages * Correct breadcrumb links * New design for code example pages * Update button design
w3c · Feb 18, 2017 · 18d9133 · 18d9133
1 parent c4f2b7d
commit 18d9133
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 11 deletions.
diff --git a/examples/button/button.html b/examples/button/button.html
@@ -15,6 +15,35 @@
 <script src="js/button.js" type="text/javascript"></script>
 </head>
 <body>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 0; height: 0;">
+    <defs>
+      <symbol id="icon-mute" viewBox="0 0 75 75">
+        <polygon
+           id="polygon1"
+           points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
+           style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;" />
+
+        <path
+           id="path3003"
+           d="M 48.651772,50.269646 69.395223,25.971024"
+           style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round" />
+        <path
+           id="path3003-1"
+           d="M 69.395223,50.269646 48.651772,25.971024"
+           style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+      </symbol>
+      <symbol id="icon-sound" viewBox="0 0 75 75">
+        <polygon points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
+          style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;"/>
+        <path d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577"
+          style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+        <path d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076"
+          style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+        <path d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01"
+          style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+      </symbol>
+    </defs>
+  </svg>
   <main>
     <h1>Button Examples</h1>
   <p>
@@ -34,7 +63,7 @@ <h3>Action Button</h3>
       <h3>Toggle Button</h3>
       <p>Mute button uses a <code>a</code> element.</p>
       <div>
-        <a tabindex="0" role="button" id="toggle" aria-pressed="false">Mute</a>
+        <a tabindex="0" role="button" id="toggle" aria-pressed="false">Mute <svg  aria-hidden="true"><use xlink:href="#icon-sound"></use></svg></a>
       </div>
 
     </div>

diff --git a/examples/button/css/button.css b/examples/button/css/button.css
@@ -1,23 +1,88 @@
 [role="button"] {
   display: inline-block;
-  padding: 5px 10px;
-  border: 2px solid #555;
+  position: relative;
+  padding: .4em .7em;
+  border: 1px solid hsl(213, 71%, 49%);
   border-radius: 5px;
-  color: #000;
-  background: #ddd;
+  box-shadow: 0 1px 2px hsl(216, 27%, 55%);
+  overflow: visible;
+  color: #fff;
+  text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
+  background: hsl(216, 82%, 51%);
+  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
 }
 
-[role="button"]:hover,
-[role="button"]:focus {
-  background-color: #eee;
+[role="button"]:hover {
+  border-color: hsl(213, 71%, 29%);
+  background: hsl(216, 82%, 31%);
+  background-image: linear-gradient(to bottom, hsl(216, 82%, 33%), hsl(216, 82%, 27%));
 	cursor: default;
+  outline: none;
+}
+
+[role="button"]:focus {
+  outline: none;
+}
+
+[role="button"]:focus::before {
+  position: absolute;
+  z-index: -1;
+  /* button border width - outline width - offset */
+  top: calc(-1px - 3px - 3px);
+  right: calc(-1px - 3px - 3px);
+  bottom: calc(-1px - 3px - 3px);
+  left: calc(-1px - 3px - 3px);
+  border: 3px solid hsl(213, 71%, 49%);
+  /* button border radius + outline width + offset */
+  border-radius: calc(5px + 3px + 3px);
+  content: '';
 }
 
 [role="button"]:active {
-  background-color: #bbb;
+  border-color: hsl(213, 71%, 49%);
+  background: hsl(216, 82%, 31%);
+  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
+  box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
+}
+
+[role="button"][aria-pressed] {
+  border-color: hsl(261, 71%, 49%);
+  box-shadow: 0 1px 2px hsl(261, 27%, 55%);
+  text-shadow: 0 -1px 1px hsl(261, 27%, 25%);
+  background: hsl(261, 82%, 51%);
+  background-image: linear-gradient(to bottom, hsl(261, 82%, 53%), hsl(261, 82%, 47%));
+}
+
+[role="button"][aria-pressed]:hover {
+  border-color: hsl(261, 71%, 29%);
+  background: hsl(261, 82%, 31%);
+  background-image: linear-gradient(to bottom, hsl(261, 82%, 33%), hsl(261, 82%, 27%));
+	cursor: default;
 }
 
 [role="button"][aria-pressed="true"] {
-  color: #fff;
-  background: #333;
+  padding-top: .5em;
+  padding-bottom: .3em;
+  border-color: hsl(261, 71%, 49%);
+  background: hsl(261, 82%, 31%);
+  background-image: linear-gradient(to bottom, hsl(261, 82%, 63%), hsl(261, 82%, 57%));
+  box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 30%);
+}
+
+[role="button"][aria-pressed="true"]:hover {
+  border-color: hsl(261, 71%, 49%);
+  background: hsl(261, 82%, 31%);
+  background-image: linear-gradient(to bottom, hsl(261, 82%, 43%), hsl(261, 82%, 37%));
+  box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 20%);
+}
+
+[role="button"][aria-pressed]:focus::before {
+  border-color: hsl(261, 71%, 49%);
+}
+
+[role="button"] svg {
+  margin: .15em auto -.15em;
+  height: 1em;
+  width: 1em;
+  //vertical-align: middle;
 }
diff --git a/examples/button/js/button.js b/examples/button/js/button.js
@@ -62,13 +62,19 @@ function toggleButtonState (event) {
   var currentState = button.getAttribute('aria-pressed');
   var newState = 'true';
 
+  var icon = button.getElementsByTagName('use')[0];
+  var currentIconState = icon.getAttribute('xlink:href');
+  var newIconState = '#icon-mute';
+
   // If aria-pressed is set to true, set newState to false
   if (currentState === 'true') {
     newState = 'false';
+    newIconState = '#icon-sound';
   }
 
   // Set the new aria-pressed state on the button
   button.setAttribute('aria-pressed', newState);
+  icon.setAttribute('xlink:href', newIconState);
 }
 
 window.onload = init;