Merge pull request #138 from rackerlabs/test-cog-disabled

feat(button): Cog Button

Author: CITguy

docs/components/box/index.html

@@ -29,7 +29,6 @@ <h3>Options</h3>
       </div>
       <div class="hxCol hxSpan-12-xs hxSpan-9-lg hxOrder-1-lg">
         <h3>Basic Box</h3>
-
         <div class="demo box-demo">
           <div :class="size.value">
             <p>

docs/components/menus/index.html

@@ -36,6 +36,30 @@ <h2 id="menu">Basic Menu</h2>
     {% endcode %}
   </section>
 
+  <section>
+    <h2 id="cog-menu">Cog Menu</h2>
+    <div class="demo">
+      <hx-disclosure class="hxBtn hxCog" aria-controls="cogmenuId">
+        <hx-icon type="cog"></hx-icon>
+      </hx-disclosure>
+      <hx-menu id="cogmenuId">
+        <hx-menuitem>Action 1</hx-menuitem>
+        <hx-menuitem>Action 2</hx-menuitem>
+        <hx-menuitem>Action 3</hx-menuitem>
+      </hx-menu>
+    </div>
+    {% code 'html' %}
+      <hx-disclosure class="hxBtn hxCog" aria-controls="cogmenuId">
+        <hx-icon type="cog"></hx-icon>
+      </hx-disclosure>
+      <hx-menu id="cogmenuId">
+        <hx-menuitem>Action 1</hx-menuitem>
+        <hx-menuitem>Action 2</hx-menuitem>
+        <hx-menuitem>Action 3</hx-menuitem>
+      </hx-menu>
+    {% endcode %}
+  </section>
+
   <section>
     <h2 id="advanced-menu">Advanced Menu</h2>
     <div class="demo">

src/helix-ui/styles/modules/button.less

@@ -163,6 +163,37 @@
   }
 }//.hxBtnGroup
 
+// COG BUTTON STYLES
+.hxBtn.hxCog {
+  border: none;
+  padding: 0.25rem;
+
+  hx-icon {
+    color: @gray-900;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  &:hover, &:active  {
+    background-color: transparent;
+
+    hx-icon {
+      color: @gray-700;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 4px 0 fade(@cyan-500, 50%);
+    outline: none;
+  }
+
+  &[disabled] {
+    hx-icon {
+      color: @gray-500;
+    }
+  }
+}
+
 // DEPRECATED: Remove in v1.0.0
 .hxBtn--primary {
   &:extend(.hxBtn.hxPrimary all);