Add Button variant mixins

trilbymedia · Aug 28, 2017 · 00f87b2 · 00f87b2
1 parent e5ae885
commit 00f87b2
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 45 deletions.
diff --git a/docs/css/docs.css b/docs/css/docs.css
@@ -158,7 +158,7 @@
   margin: 2rem auto;
 }
 .s-content .code {
-  color: #5b657a;
+  color: #667189;
 }
 .s-content .code .com {
   color: #acb3c2;
@@ -167,7 +167,7 @@
   color: #5764c6;
 }
 .s-content .code .atn {
-  color: #5b657a;
+  color: #667189;
 }
 .s-content .code .atv {
   color: #e06870;
@@ -266,7 +266,7 @@
 }
 .section-updates .card {
   border: 0;
-  color: #667189;
+  color: #727e96;
   margin-bottom: 1rem;
 }
 .section-features {
@@ -289,12 +289,12 @@
   margin-top: 6rem;
 }
 .grid-hero h1 {
-  color: #454d5d;
+  color: #50596c;
   font-size: 1.6rem;
   margin-bottom: 1.5rem;
 }
 .grid-hero h2 {
-  color: #50596c;
+  color: #5b657a;
   font-size: .9rem;
   font-weight: 400;
   line-height: 1.5rem;
@@ -308,7 +308,7 @@
 .grid-hero .card {
   background: none;
   border: 0;
-  color: #667189;
+  color: #727e96;
   padding: .5rem;
 }
 .grid-hero .card .card-title {

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -391,7 +391,7 @@ html {
 }
 body {
   background: #fff;
-  color: #454d5d;
+  color: #50596c;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size: .7rem;
   overflow-x: hidden;
@@ -481,7 +481,7 @@ kbd {
 mark {
   background: #ffe9b3;
   border-radius: .1rem;
-  color: #454d5d;
+  color: #50596c;
   line-height: 1;
   padding: .15rem .2rem;
 }
@@ -493,9 +493,6 @@ blockquote {
 blockquote p:last-child {
   margin-bottom: 0;
 }
-blockquote cite {
-  color: #acb3c2;
-}
 ul,
 ol {
   margin: .8rem 0 .8rem .8rem;
@@ -623,10 +620,9 @@ dl dd {
   white-space: nowrap;
 }
 .btn:focus {
-  background: #eff1fa;
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
-  text-decoration: none;
 }
+.btn:focus,
 .btn:hover {
   background: #eff1fa;
   border-color: #4c59c2;
@@ -793,7 +789,7 @@ legend {
   background-image: none;
   border: .05rem solid #caced7;
   border-radius: .1rem;
-  color: #454d5d;
+  color: #50596c;
   display: block;
   font-size: .7rem;
   height: 1.6rem;
@@ -1209,7 +1205,7 @@ input.disabled + .form-icon {
 .label {
   background: #f8f9fa;
   border-radius: .1rem;
-  color: #50596c;
+  color: #5b657a;
   display: inline-block;
   line-height: 1;
   padding: .15rem .2rem;
@@ -1249,7 +1245,7 @@ code {
 }
 .code {
   border-radius: .1rem;
-  color: #454d5d;
+  color: #50596c;
   line-height: 1rem;
   position: relative;
 }
@@ -1934,7 +1930,7 @@ code {
 .avatar .avatar-presence {
   background: #acb3c2;
   border-radius: 50%;
-  box-shadow: 0 0 0 .05rem #fff;
+  box-shadow: 0 0 0 .1rem #fff;
   height: .5em;
   width: .5em;
 }

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/elements.html b/docs/elements.html
@@ -420,11 +420,11 @@ <h4 id="typography-fonts" class="s-subtitle">Fonts</h4>
 <span class="com">&lt;!-- Monospace typography targeted --&gt;</span>
 <span class="atn">font-family</span>: <span class="atv">"SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace</span>;
 
-<span class="com">&lt;!-- Chinese typography targeted --&gt;</span>
+<span class="com">&lt;!-- Chinese (lang="zh-Hans" and lang="zh-Hant") targeted --&gt;</span>
 <span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif</span>;
-<span class="com">&lt;!-- Japanese typography targeted --&gt;</span>
+<span class="com">&lt;!-- Japanese (lang="ja") targeted --&gt;</span>
 <span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif</span>;
-<span class="com">&lt;!-- Korean typography targeted --&gt;</span>
+<span class="com">&lt;!-- Korean (lang="ko") targeted --&gt;</span>
 <span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif</span>;
 </code></pre>
 
@@ -573,7 +573,7 @@ <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Bu
           </div>
           <div class="columns">
             <div class="column col-xs-12">
-              <button class="btn loading-inline">default button</button>
+              <button class="btn">default button</button>
               <button class="btn btn-primary">primary button</button>
               <button class="btn btn-link">link button</button>
             </div>

diff --git a/docs/getting-started.html b/docs/getting-started.html
@@ -337,6 +337,7 @@ <h4 id="compiling-steps" class="s-subtitle">Compiling CSS</h4>
           </div>
 
           <h4 id="compiling-gulptasks" class="s-subtitle">Folder Structure</h4>
+
 <!-- folder structure -->
 <pre class="code"><code>spectre/
 ├── dist/                               <span class="com">// Build folder (Git ignored)</span>
@@ -456,6 +457,27 @@ <h5 id="variables-colors" class="s-subtitle">Colors</h5>
               </div>
             </div>
           </div>
+
+          <h5 id="variables-buttons" class="s-subtitle">Buttons</h5>
+          <div class="docs-note">
+            <p>There are 2 button variant mixins in <code>mixins.less</code> to generate different color variants. </p>
+            <ul>
+              <li>.button-variant(<code>@color</code>: @primary-color);</li>
+              <li>.button-outline-variant(<code>@color</code>: @primary-color);</li>
+            </ul>
+
+<!-- button variables example -->
+<pre class="code" data-lang="LESS"><code><span class="com">&lt;!-- filled button with the success color --&gt;</span>
+<span class="tag">.btn-success</span> {
+  .button-variant(<span class="atv">@success-color</span>);
+}
+
+<span class="com">&lt;!-- outlined button with the success color --&gt;</span>
+<span class="tag">.btn-outline-success</span> {
+  .button-outline-variant(<span class="atv">@success-color</span>);
+}
+</code></pre>
+          </div>
 
           <h5 id="variables-sizes" class="s-subtitle">Sizes</h5>
           <div class="docs-note">

diff --git a/src/avatars.less b/src/avatars.less
@@ -47,7 +47,7 @@
 
   .avatar-presence {
     background: @gray-color;
-    box-shadow: 0 0 0 @border-width @light-color;
+    box-shadow: 0 0 0 @border-width-lg @light-color;
     border-radius: 50%;
     height: .5em;
     width: .5em;

diff --git a/src/buttons.less b/src/buttons.less
@@ -19,10 +19,9 @@
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    background: @secondary-color;
     .control-shadow();
-    text-decoration: none;
   }
+  &:focus,
   &:hover {
     background: @secondary-color;
     border-color: @primary-color-dark;

diff --git a/src/mixins.less b/src/mixins.less
@@ -6,6 +6,66 @@
   width: @size;
 }
 
+// Background color utility mixin
+.bg-color-variant(@color: @primary-color) {
+  background: @color;
+}
+
+// Button variant mixin
+.button-variant(@color: @primary-color) {
+  background: @color;
+  border-color: darken(@color, 3%);
+  color: @light-color;
+  &:focus {
+    .control-shadow(@color);
+  }
+  &:focus,
+  &:hover {
+    background: darken(@color, 2%);
+    border-color: darken(@color, 5%);
+    color: @light-color;
+  }
+  &:active,
+  &.active {
+    background: darken(@color, 7%);
+    border-color: darken(@color, 10%);
+    color: @light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: @light-color;
+      border-left-color: @light-color;
+    }
+  }
+}
+
+.button-outline-variant(@color: @primary-color) {
+  background: @light-color;
+  border-color: @color;
+  color: @color;
+  &:focus {
+    .control-shadow(@color);
+  }
+  &:focus,
+  &:hover {
+    background: lighten(@color, 50%);
+    border-color: darken(@color, 2%);
+    color: @color;
+  }
+  &:active,
+  &.active {
+    background: @color;
+    border-color: darken(@color, 5%);
+    color: @light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: @color;
+      border-left-color: @color;
+    }
+  }
+}
+
 // Clearfix mixin
 .clearfix() {
   &::after {
@@ -25,12 +85,6 @@
   transition: all .2s ease;
 }
 
-// Toast variant
-.toast-variant(@color: @dark-color) {
-  background: fade(@color, 90%);
-  border-color: @color;
-}
-
 // Label base style
 .label-base() {
   border-radius: @border-radius;
@@ -43,12 +97,7 @@
   color: @color;
 }
 
-// Shadow mixin
-.shadow-variant(@offset) {
-  box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%);
-}
-
-// Position utility mixin
+// Margin utility mixin
 .margin-variant(@id: 1, @size: 1) {
   .m-@{id} {
     margin: @size;
@@ -75,6 +124,7 @@
   }
 }
 
+// Padding utility mixin
 .padding-variant(@id: 1, @size: 1) {
   .p-@{id} {
     padding: @size;
@@ -101,7 +151,12 @@
   }
 }
 
-// Colors mixin
+// Shadow mixin
+.shadow-variant(@offset) {
+  box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%);
+}
+
+// Text color utility mixin
 .text-color-variant(@color: @primary-color) {
   color: @color;
 
@@ -113,6 +168,8 @@
   }
 }
 
-.bg-color-variant(@color: @primary-color) {
-  background: @color;
+// Toast variant mixin
+.toast-variant(@color: @dark-color) {
+  background: fade(@color, 90%);
+  border-color: @color;
 }
diff --git a/src/typography.less b/src/typography.less
@@ -83,10 +83,6 @@ blockquote {
   p:last-child {
     margin-bottom: 0;
   }
-
-  cite {
-    color: @gray-color;
-  }
 }
 
 // Lists

diff --git a/src/variables.less b/src/variables.less
@@ -4,7 +4,7 @@
 @html-font-size: 20px;
 @html-line-height: 1.428571429;
 @body-bg: @bg-color-light;
-@body-font-color: @dark-color;
+@body-font-color: lighten(@dark-color, 5%);
 @font-size: .7rem;
 @font-size-sm: .6rem;
 @font-size-lg: .8rem;