disabled buttons

Author: smakosh

source/app/index.html

@@ -39,7 +39,7 @@ <h2>Unnamed</h2>
       frameborder="0" scrolling="0" width="90px" height="20px">
     </iframe>
     <iframe class="iframe forkit" src="https://ghbtns.com/github-btn.html?user=smakosh&repo=unnamed-css-framework&type=fork&count=true"
-    frameborder="0" scrolling="0" width="80px" height="20px">
+    frameborder="0" scrolling="0" width="90px" height="20px">
   </iframe>
 
   <div class="flexed-links">
@@ -71,31 +71,14 @@ <h3>Easy to contribute</h3>
   <div class="container instalation" id="installation">
     <h3 class="title">Installation</h3>
     <div class="divider"></div>
-    <h4>Include one of these links</h4>
+    <h4>Include one of these links:</h4>
     <pre>&lt;link rel="stylesheet" href="http://smakosh.com/unnamed.css"&gt;</pre>
     <h4>Minimized</h4>
     <pre>&lt;link rel="stylesheet" href="http://smakosh.com/unnamed.min.css"&gt;</pre>
-    <h4 class="download">Or download both</h4>
+    <h4 class="download">Or download both:</h4>
     <a href="http://smakosh.com/unnamed-css.zip" class="btn btn-rounded btn-outlined purple-btn push-up" download>Download</a>
-  </div>
-
-  <div class="container navbar">
-    <h3 class="title">
-      Navbar
-    </h3>
-    <div class="divider"></div>
-
-    <div class="nav navbar-green">
-      <div class="brand-logo">
-        <a href="" class="branding"></a>
-      </div>
-      <div class="links">
-        <a href="">Home</a>
-        <a href="">About</a>
-        <a href="">Help</a>
-        <a href="">Contact</a>
-      </div>
-    </div>
+    <h4>Or use this starter repository:</h4>
+    <pre>git clone https://github.com/smakosh/Unnamed-getting-started.git</pre>
   </div>
 
   <div class="container buttons" id="doc">
@@ -128,22 +111,11 @@ <h3 class="title">Buttons</h3>
 
     <h3 class="title">Disabled buttons</h3>
     <div class="divider"></div>
-    <div class="type-buttons">
-      <button href="#" class="btn btn-primary gradient-black" disabled>btn-primary</button>
-      <button href="#" class="btn btn-rounded gradient-black" disabled>btn-rounded</button>
-      <button href="#" class="btn btn-rounded btn-outlined black-btn" disabled>btn-outlined</button>
-    </div>
-
-    <div class="type-buttons">
-      <button href="#" class="btn btn-primary gradient-green" disabled>btn-primary</button>
-      <button href="#" class="btn btn-rounded gradient-green" disabled>btn-rounded</button>
-      <button href="#" class="btn btn-rounded btn-outlined green-btn" disabled>btn-outlined</button>
-    </div>
 
     <div class="type-buttons">
-      <button href="#" class="btn btn-primary gradient-orange" disabled>btn-primary</button>
-      <button href="#" class="btn btn-rounded gradient-orange" disabled>btn-rounded</button>
-      <button href="#" class="btn btn-rounded btn-outlined orange-btn" disabled>btn-outlined</button>
+      <button href="#" class="btn btn-primary" disabled>btn-primary</button>
+      <button href="#" class="btn btn-rounded" disabled>btn-rounded</button>
+      <button href="#" class="btn btn-rounded btn-outlined" disabled>btn-outlined</button>
     </div>
 
     <h4 class="description">There are 3 types of buttons and you can change the colors just

source/app/styles/buttons.scss

@@ -80,13 +80,13 @@ button:disabled  {
 
   box-shadow: unset;
   opacity: .8;
-  background: #505050;
+  background: $disabled;
   color: #fff;
   border: unset;
 }
 
 button:disabled:hover  {
 
   box-shadow: unset;
-  background: #505050;
+  background: $disabled;
 }

source/app/styles/colors.scss

@@ -26,4 +26,5 @@ $purple-btn: #7274ff;
 // other colors============================================
 $red: #f44336;
 $black: #212121;
+$disabled: #fa5151;
 //=========================================================

source/app/styles/forms.scss

@@ -6,42 +6,6 @@ form  {
   width: 100%;
 }
 
-.input-field  {
-
-  span:before  {
-
-    cursor: pointer;
-    position: relative;
-    font-family: 'fontawesome';
-    top: 3rem;
-    left: .6rem;
-    color: $black;
-  }
-}
-
-.text-area-field  {
-
-  span:before  {
-
-    top: 1.8rem;
-  }
-}
-
-.user-icon:before  {
-
-  content: '';
-}
-
-.email-icon:before  {
-
-  content: '';
-}
-
-.edit-icon:before  {
-
-  content: '';
-}
-
 input[type="text"],
 input[type="password"],
 input[type="email"],
@@ -54,7 +18,6 @@ select,
 textarea,
 textarea[type=text]  {
 
-  -webkit-appearance:none;
   width: 100%;
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -76,6 +39,7 @@ textarea[type=text]  {
 input, textarea  {
 
   padding: .9rem 1rem .9rem 2rem;
+  -webkit-appearance:none;
 }
 
 select  {
@@ -92,6 +56,42 @@ textarea  {
   margin: 0;
 }
 
+.input-field  {
+
+  span:before  {
+
+    cursor: pointer;
+    position: relative;
+    font-family: 'fontawesome';
+    top: 3rem;
+    left: .6rem;
+    color: $black;
+  }
+}
+
+.text-area-field  {
+
+  span:before  {
+
+    top: 1.8rem;
+  }
+}
+
+.user-icon:before  {
+
+  content: '';
+}
+
+.email-icon:before  {
+
+  content: '';
+}
+
+.edit-icon:before  {
+
+  content: '';
+}
+
 label  {
 
   cursor: pointer;

source/app/styles/gradient.scss

@@ -79,21 +79,3 @@
     transition: all 0.5s;
   }
 }
-
-.navbar-green {
-  @include linear-gradient($green, $blue);
-  box-shadow: 0px 4px 7px 0px rgba(18, 194, 211, 0.48);
-  transition: all 0.5s;
-}
-
-.navbar-orange {
-  @include linear-gradient($yellow, $orange);
-  box-shadow: 0px 4px 7px 0px rgba(255, 50, 39, 0.48);
-  transition: all 0.5s;
-}
-
-.navbar-purple {
-  @include linear-gradient($dark-blue, $purple);
-  box-shadow: 0px 4px 7px 0px rgba(170, 49, 255, 0.48);
-  transition: all 0.5s;
-}

source/app/styles/main.scss

@@ -8,7 +8,6 @@
 @import "default";
 @import "gradient";
 @import "buttons";
-@import "navbar";
 
 body {
   font-family: 'roboto';