Merge pull request smakosh#2 from smakosh/refactoring

Restyling and refactoring

Author: smakosh

sass/buttons.scss

@@ -1,9 +1,12 @@
 @import "colors";
 
 .btn  {
-  padding: 1rem 3rem;
+  width: 140px;
+  height: 45px;
   color: #fff;
   cursor: pointer;
+  text-transform: uppercase;
+  font-weight: bold;
 }
 
 .btn-primary  {
@@ -18,7 +21,7 @@
   border-width: 3px;
   border-style: solid;
   transition: all 0.5s;
-  padding: 0.8rem 3rem;
+
   &:hover {
     color: #fff;
     transition: all 0.5s;
@@ -32,6 +35,7 @@
 .black-btn  {
   border-color: $black;
   color: $black;
+
   &:hover {
     background-color: $black;
   }
@@ -40,6 +44,7 @@
 .green-btn  {
   border-color: $green;
   color: $green;
+
   &:hover {
     background-color: $green;
   }
@@ -48,6 +53,7 @@
 .orange-btn  {
   border-color: $orange-btn;
   color: $orange-btn;
+
   &:hover {
     background-color: $orange-btn;
   }
@@ -56,6 +62,7 @@
 .purple-btn  {
   border-color: $purple-btn;
   color: $purple-btn;
+
   &:hover {
     background-color: $purple-btn;
   }
@@ -67,9 +74,9 @@ button:disabled  {
   background: $disabled;
   color: #fff;
   border: unset;
-}
 
-button:disabled:hover  {
-  box-shadow: unset;
-  background: $disabled;
-}
+  &:hover  {
+    box-shadow: unset;
+    background: $disabled;
+  }
+}

sass/cards.scss

@@ -1,15 +1,19 @@
 .card  {
   border-radius: 5px;
   box-shadow: 0px 1px 10px 0px rgba(5, 5, 5, 0.13);
+
   .card-header  {
-    padding: 1.5rem 0 1.5rem 1.5rem;
+    padding: 1.5rem;
+
     h4  {
       font-weight: bold;
       margin: 0;
     }
   }
+
   .card-img  {
     overflow: hidden;
+
     img  {
       position: relative;
       left: 0;
@@ -20,25 +24,28 @@
       display: block;
     }
   }
+
   .card-footer  {
     padding: 1.5rem 0 1.5rem 1.5rem;
+
     h4  {
       font-weight: bold;
       margin: 0;
     }
   }
 }
 
-.card-nofooter  {
+.card-no-footer  {
   .card-img  {
+
     img  {
       border-bottom-left-radius: 5px;
       border-bottom-right-radius: 5px;
     }
   }
 }
 
-.card-noheader  {
+.card-no-header  {
   .card-img  {
     img  {
       border-top-left-radius: 5px;
@@ -47,7 +54,7 @@
   }
 }
 
-.card-hoverable  {
+.card-hover  {
   transition: all .3s;
   &:hover  {
     box-shadow: 0px 11px 16px 0px rgba(5, 5, 5, 0.23);

sass/colors.scss

@@ -9,4 +9,4 @@ $purple: #B721FF;
 $purple-btn: #7274ff;
 $red: #f44336;
 $black: #212121;
-$disabled: #fa5151;
+$disabled: #c1c1c1;

sass/default.scss

@@ -2,12 +2,12 @@ a  {
   text-decoration: none;
 }
 
-select, input, textarea  {
+select, input, textarea, button  {
   -webkit-appearance: none;
-}
 
-button, input, select, textarea:focus  {
-  outline: none;
+  &:focus  {
+    outline: none;
+  }
 }
 
 button  {

sass/fonts.scss

@@ -1,2 +1 @@
-@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i');
+@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

sass/forms.scss

@@ -20,11 +20,11 @@ textarea[type=text]  {
   margin-bottom: 1rem;
   box-sizing: border-box;
   transition: all .2s ease;
-  text-align: left;
   border-width: 1px;
   border-color: $black;
   border-style: solid;
   border-radius: 2px;
+
   &:focus  {
     border-color: $black;
     transition: all .2s ease;
@@ -33,7 +33,6 @@ textarea[type=text]  {
 
 input, textarea  {
   padding: .9rem 1rem .9rem 2rem;
-  -webkit-appearance:none;
 }
 
 select  {
@@ -43,9 +42,8 @@ select  {
 }
 
 textarea  {
-
   resize: vertical;
-  min-height: 8rem;
+  min-height: 12rem;
   margin: 0;
 }
 
@@ -78,10 +76,16 @@ textarea  {
   content: '';
 }
 
+.caret-icon:before {
+  content: '▼';
+}
+
 label  {
   cursor: pointer;
+
   input[type="checkbox"] {
     display: none;
+
     + span:before  {
       content: '';
       font-family: 'fontawesome';
@@ -107,6 +111,7 @@ label  {
 
   input[type="radio"] {
     display: none;
+
     + span:before  {
       content: '';
       font-family: 'fontawesome';
@@ -144,13 +149,13 @@ label  {
   textarea,
   textarea[type="text"]  {
     border-color: $green;
-    &:focus  {
 
+    &:focus  {
       border-color: $blue;
     }
   }
-  span:before  {
 
+  span:before  {
     color: $green;
   }
 }
@@ -168,10 +173,12 @@ label  {
   textarea,
   textarea[type="text"]  {
     border-color: $black;
+
     &:focus  {
       border-color: lighten($black, 10);
     }
   }
+
   span:before  {
     color: $black;
   }
@@ -190,10 +197,12 @@ label  {
   textarea,
   textarea[type="text"]  {
     border-color: $orange-btn;
+
     &:focus  {
       border-color: $yellow;
     }
   }
+
   span:before  {
     color: $orange-btn;
   }
@@ -212,57 +221,58 @@ label  {
   textarea,
   textarea[type="text"]  {
     border-color: $purple-btn;
-    &:focus  {
 
+    &:focus  {
       border-color: $dark-blue;
     }
   }
+
   span:before  {
     color: $purple-btn;
   }
 }
 
-// green
 .green-checkbox  {
   + span:before  {
     border-color: $green !important;
     color: rgba(255, 255, 255, 0) !important;
   }
 }
+
 .green-checkbox:checked + span:before  {
   color: $green !important;
 }
 
-// black
 .black-checkbox  {
   + span:before  {
     border-color: $black !important;
     color: rgba(255, 255, 255, 0) !important;
   }
 }
+
 .black-checkbox:checked + span:before  {
   color: $black !important;
 }
 
-// orange
 .orange-checkbox  {
   + span:before  {
     border-color: $orange-btn !important;
     color: rgba(255, 255, 255, 0) !important;
   }
 }
+
 .orange-checkbox:checked + span:before  {
   color: $orange-btn !important;
 }
 
-// purple
 .purple-checkbox  {
   + span:before  {
 
     border-color: $purple-btn !important;
     color: rgba(255, 255, 255, 0) !important;
   }
 }
+
 .purple-checkbox:checked + span:before  {
   color: $purple-btn !important;
-}
+}