New design for accordion example

examples/accordion/accordion1.html

@@ -12,7 +12,7 @@
 <script src="../js/app.js"></script>
 
 <!--  js and css for this example. -->
-<link rel="stylesheet" type="text/css" href="css/customize.css" />
+<link rel="stylesheet" type="text/css" href="css/accordion.css" />
 <script type="text/javascript" src="js/helpers.js"></script>
 <script type="text/javascript" src="js/setup.js"></script>
 
@@ -32,7 +32,7 @@ <h2 id="ex_label">Example</h2>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
     <div id="coding-arena">
       <div class="demo-block">
-        <dl id="accordionGroup" role="presentation">
+        <dl id="accordionGroup" role="presentation" class="accordion">
           <dt role="heading" aria-level="3" class="clearfix">
             <a role="button" aria-expanded="false" href="#" class="accAccordion"
               aria-controls="sect1" data-defaultopen="true" id="accordion1id"
@@ -45,13 +45,13 @@ <h2 id="ex_label">Example</h2>
               <!-- Variable content within section, may include any type of markup or interactive widgets. -->
               <fieldset class="contact flex">
                 <p>
-                  <label for="cufc1"><span class="cRed">*</span>Name:</label>
+                  <label for="cufc1">Name<span class="cRed">*</span>:</label>
                   <input type="text" value="" name="Name" id="cufc1" class="required"
                     aria-required="true"
                   >
                 </p>
                 <p>
-                  <label for="cufc2"><span class="cRed">*</span>Email:</label>
+                  <label for="cufc2">Email<span class="cRed">*</span>:</label>
                   <input type="text" value="" name="Email" id="cufc2" class="required"
                     aria-required="true"
                   >

examples/accordion/css/accordion.css

@@ -0,0 +1,92 @@
+/* Contains the accordion elements */
+.accordion {
+  border: 1px solid hsl(0, 0%, 82%);
+  border-radius: .3em;
+  box-shadow: 0 1px 2px hsl(0, 0%, 82%);
+}
+
+.accordion > * + * {
+  border-top: 1px solid hsl(0, 0%, 82%);
+}
+
+/* Heading containing accordion button */
+.accordion dt[role="heading"] {
+
+}
+
+.accordion dt[role="heading"]:first-of-type > [role="button"] {
+  border-radius: .3em .3em 0 0;
+}
+
+.accordion dt[role="heading"]:last-of-type > [role="button"] {
+  border-radius: 0 0 .3em .3em;
+}
+
+.accordion dt[role="heading"]:last-of-type > [role="button"][aria-expanded="true"] {
+  border-radius: 0;
+}
+
+/* Accordion button */
+.accordion dt > [role="button"] {
+  display: block;
+  position: relative;
+  margin: 0;
+  padding: 1em 1.5em;
+  border-bottom: 0;
+  color: hsl(0, 0%, 13%);
+  font-weight: normal;
+}
+
+.accordion dt > [role="button"]:hover,
+.accordion dt > [role="button"]:focus {
+  margin: inherit;
+  background: hsl(0, 0%, 93%);
+}
+
+/* Accordion button icon */
+.accordion dt > [role="button"] .icon {
+  position: absolute;
+  top: 50%;
+  right: 1.5em;
+  transform: translateY(-60%) rotate(45deg);
+  width: 8px;
+  height: 8px;
+  border: solid hsl(0, 0%, 62%);
+  border-width: 0 2px 2px 0;
+}
+
+.accordion dt > [role="button"][aria-expanded="true"] .icon {
+  transform: translateY(-50%) rotate(-135deg);
+}
+
+.accordion dt > [role="button"]:hover .icon,
+.accordion dt > [role="button"]:focus .icon {
+  border-color: hsl(0, 0%, 13%);
+}
+
+/* Accordion panel */
+.accordion dd[role="region"] {
+  margin: 0;
+  padding: 1em 1.5em;
+  /*border: solid hsl(0, 0%, 82%);
+  border-width: 0 1px;*/
+}
+
+.accordion dd[role="region"].hidden {
+  display: none;
+}
+
+/* Basic stuff */
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+input[type="text"] {
+  display: block;
+  padding: .3em .5em;
+  border: 1px solid hsl(0, 0%, 62%);
+  border-radius: .3em;
+  font-size: inherit;
+}