Add new button colors (success and error) #227 #241 #342

picturepan2 · Nov 26, 2017 · a0aad4d · a0aad4d
1 parent 2f27ca4
commit a0aad4d
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 6 deletions.
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -614,11 +614,61 @@ dl dd {
   color: #fff;
 }
 
-.btn.btn-primary.loading::after {
+.btn.btn-primary.loading::after,
+.btn.btn-success.loading::after,
+.btn.btn-error.loading::after {
   border-bottom-color: #fff;
   border-left-color: #fff;
 }
 
+.btn.btn-success {
+  background: #32b643;
+  border-color: #2faa3f;
+  color: #fff;
+}
+
+.btn.btn-success:focus {
+  box-shadow: 0 0 0 .1rem rgba(50, 182, 67, .2);
+}
+
+.btn.btn-success:focus,
+.btn.btn-success:hover {
+  background: #30ae40;
+  border-color: #2da23c;
+  color: #fff;
+}
+
+.btn.btn-success:active,
+.btn.btn-success.active {
+  background: #2a9a39;
+  border-color: #278e34;
+  color: #fff;
+}
+
+.btn.btn-error {
+  background: #e85600;
+  border-color: #d95000;
+  color: #fff;
+}
+
+.btn.btn-error:focus {
+  box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2);
+}
+
+.btn.btn-error:focus,
+.btn.btn-error:hover {
+  background: #de5200;
+  border-color: #cf4d00;
+  color: #fff;
+}
+
+.btn.btn-error:active,
+.btn.btn-error.active {
+  background: #c44900;
+  border-color: #b54300;
+  color: #fff;
+}
+
 .btn.btn-link {
   background: transparent;
   border-color: transparent;

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/elements.html b/docs/elements.html
@@ -696,6 +696,22 @@ <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Bu
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;default button&lt;<span class="tag">/button</span>&gt;
 &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;primary button&lt;<span class="tag">/button</span>&gt;
 &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;link button&lt;<span class="tag">/button</span>&gt;
+</code></pre>
+
+        <h4 id="buttons-colors" class="s-subtitle">Button colors</h4>
+        <div class="columns">
+          <div class="column col-12">
+            <button class="btn btn-success">success button</button>
+            <button class="btn btn-error">error button</button>
+          </div>
+        </div>
+        <div class="docs-note">
+          <p>Add the <code>btn-success</code> or <code>btn-error</code> class for success (green) or error (red) button color. If you need more button colors, please use <a href="getting-started.html#variables-buttons">button mixins</a> to create your own button color variants. </p>
+        </div>
+
+<!-- buttons -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-success&quot;</span>&gt;success button&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-error&quot;</span>&gt;error button&lt;<span class="tag">/button</span>&gt;
 </code></pre>
 
         <h4 id="buttons-sizes" class="s-subtitle">Button sizes</h4>

diff --git a/src/_buttons.scss b/src/_buttons.scss
@@ -73,6 +73,15 @@
     }
   }
 
+  // Button Colors
+  &.btn-success {
+    @include button-variant($success-color);
+  }
+
+  &.btn-error {
+    @include button-variant($error-color);
+  }
+
   // Button Link
   &.btn-link {
     background: transparent;

diff --git a/src/_mixins.scss b/src/_mixins.scss
@@ -38,10 +38,7 @@
     color: $light-color;
   }
   &.loading {
-    &::after {
-      border-bottom-color: $light-color;
-      border-left-color: $light-color;
-    }
+    @extend .btn-primary.loading;
   }
 }