Merge pull request #9 from mohouyizme/develop

Add buttons sizing classes

Author: smakosh

README.md

@@ -7,6 +7,8 @@ Unnamed is a simple colorful css framework that is recommended to be used while
 [![Package Version](https://img.shields.io/npm/v/unnamed.svg?style=flat-square)](https://www.npmjs.com/package/unnamed)
 [![Package Downloads](https://img.shields.io/npm/dt/unnamed.svg?style=flat-square)](https://www.npmjs.com/package/unnamed)
 
+[![Support me on Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/smakosh)
+
 Npm
 
 	npm install --save unnamed

source/app/index.html

@@ -71,6 +71,27 @@ <h3 class="title">Disabled buttons</h3>
       <button href="#" class="btn btn-rounded" disabled>btn-rounded</button>
       <button href="#" class="btn btn-rounded btn-outlined" disabled>btn-outlined</button>
     </div>
+
+    <h3 class="title">Buttons Sizes</h3>
+    <div class="divider"></div>
+
+    <div class="type-buttons">
+      <button href="#" class="btn btn-primary gradient-green btn-small">btn-small</button>
+      <button href="#" class="btn btn-primary gradient-purple">default size</button>
+      <button href="#" class="btn btn-primary gradient-orange btn-large">btn-large</button>
+    </div>
+
+    <div class="type-buttons">
+      <button href="#" class="btn btn-rounded gradient-green btn-small">btn-small</button>
+      <button href="#" class="btn btn-rounded gradient-purple">default size</button>
+      <button href="#" class="btn btn-rounded gradient-orange btn-large">btn-large</button>
+    </div>
+
+    <div class="type-buttons">
+      <button href="#" class="btn btn-rounded btn-outlined green-btn btn-small">btn-small</button>
+      <button href="#" class="btn btn-rounded btn-outlined purple-btn">default size</button>
+      <button href="#" class="btn btn-rounded btn-outlined orange-btn btn-large">btn-large</button>
+    </div>
   </div>
   <div class="container">
     <h3 class="title">Forms</h3>

source/app/styles/buttons.scss

@@ -1,22 +1,22 @@
 @import "colors";
 
-.btn  {
+.btn {
   padding: 1rem 1.5rem;
   color: #fff;
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
 }
 
-.btn-primary  {
+.btn-primary {
   border-radius: 5px;
 }
 
-.btn-rounded  {
-  border-radius: 30px;
+.btn-rounded {
+  border-radius: 60px;
 }
 
-.btn-outlined  {
+.btn-outlined {
   border-width: 3px;
   border-style: solid;
   transition: all 0.5s;
@@ -31,7 +31,7 @@
   background: $black !important;
 }
 
-.black-btn  {
+.black-btn {
   border-color: $black;
   color: $black;
 
@@ -40,7 +40,7 @@
   }
 }
 
-.green-btn  {
+.green-btn {
   border-color: $green;
   color: $green;
 
@@ -49,7 +49,7 @@
   }
 }
 
-.orange-btn  {
+.orange-btn {
   border-color: $orange-btn;
   color: $orange-btn;
 
@@ -58,7 +58,7 @@
   }
 }
 
-.purple-btn  {
+.purple-btn {
   border-color: $purple-btn;
   color: $purple-btn;
 
@@ -67,15 +67,23 @@
   }
 }
 
-button:disabled  {
+.btn-small {
+  padding: 0.5rem 1rem;
+}
+
+.btn-large {
+  padding: 1.5rem 2rem;
+}
+
+button:disabled {
   box-shadow: unset;
-  opacity: .8;
+  opacity: 0.8;
   background: $disabled;
   color: #fff;
   border: unset;
 
-  &:hover  {
+  &:hover {
     box-shadow: unset;
     background: $disabled;
   }
-}
+}

source/yarn.lock

@@ -3506,8 +3506,8 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
 lodash.mergewith@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
 
 lodash.restparam@^3.0.0:
   version "3.6.1"
@@ -5283,8 +5283,8 @@ string_decoder@~1.0.3:
     safe-buffer "~5.1.0"
 
 stringstream@~0.0.4:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"
 
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"