feat(buttons): add btn-tertiary class (#182)

pivotal-cf · Jun 2, 2016 · 14ca425 · 14ca425
1 parent 25cab56
commit 14ca425
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/pivotal-ui/components/buttons/buttons.scss b/src/pivotal-ui/components/buttons/buttons.scss
@@ -100,6 +100,12 @@ parent: button
         <td style="white-space: nowrap"><code class="styleguide">btn btn-secondary</code></td>
         <td>This button should be used for the secondary action on the page. e.g. the upgrade button in the signup flow</td>
     </tr>
+    <tr>
+        <td><button class="btn btn-tertiary">Tertiary</button></td>
+        <td><button class="btn btn-tertiary" disabled="">Tertiary</button></td>
+        <td style="white-space: nowrap"><code class="styleguide">btn btn-tertiary</code></td>
+        <td>This button should be used whenever necessary. e.g. the Platform dropdown on the Enterprise install page</td>
+    </tr>
     <tr>
         <td><button class="btn btn-primary">Primary</button></td>
         <td><button class="btn btn-primary" disabled="">Primary</button></td>
@@ -167,6 +173,10 @@ parent: button
   }
 }
 
+.btn-tertiary {
+  @include button-skin($btn-tertiary-color, $btn-tertiary-bg, $btn-tertiary-border, null, $btn-tertiary-border-hover, $btn-tertiary-bg-hover);
+}
+
 .btn-link {
   @include button-skin($btn-link-color, $btn-link-bg);
 }

diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
@@ -503,6 +503,12 @@ $btn-secondary-border:           $npm-brand;
 $btn-secondary-border-hover:     darken($npm-brand, 10%);
 $btn-secondary-gradient-color:   rgba(202, 56, 56, 0.15);
 
+$btn-tertiary-color:             $npm-brand;
+$btn-tertiary-bg:                $neutral-11;
+$btn-tertiary-bg-hover:          lighten($npm-brand, 47%);
+$btn-tertiary-border:            $npm-brand;
+$btn-tertiary-border-hover:      darken($npm-brand, 10%);
+
 $btn-link-color:                 $link-color !default;
 $btn-link-bg:                    transparent !default;