Merge pull request #20 from picturepan2/feature/add-variables

Feature/add variables

11 files changed, 30 insertions, 37 deletions

diff --git a/src/avatars.less b/src/avatars.less
index 3679372..bd8c2ce 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -49,7 +49,7 @@
   }
 
   &[data-initial]::after {
-    color: #fff;
+    color: @core-text-color;
     content: attr(data-initial);
     left: 50%;
     position: absolute;
diff --git a/src/badges.less b/src/badges.less
index c18757b..741b738 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -6,7 +6,7 @@
     background-color: @core-color;
     border: .1rem solid #fff;
     border-radius: 1rem;
-    color: #fff;
+    color: @core-text-color;
     content: attr(data-badge);
     display: inline-block;
     font-size: 1.2rem;
diff --git a/src/buttons.less b/src/buttons.less
index 96cd96b..847abe7 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -22,37 +22,37 @@
   &:focus {
     background-color: @core-color;
     border-color: darken(@core-color, 5%);
-    color: #fff;
+    color: @core-text-color;
   }
   &:active,
   &.active {
     background-color: darken(@core-color, 5%);
     border-color: darken(@core-color, 10%);
-    color: #fff;
+    color: @core-text-color;
   }
 
   // Button Primary
   &.btn-primary {
     background-color: @core-color;
     border-color: darken(@core-color, 5%);
-    color: #fff;
+    color: @core-text-color;
 
     &:hover,
     &:focus {
       background-color: darken(@core-color, 5%);
       border-color: darken(@core-color, 10%);
-      color: #fff;
+      color: @core-text-color;
     }
     &:active,
     &.active {
       background-color: darken(@core-color, 10%);
       border-color: darken(@core-color, 15%);
-      color: #fff;
+      color: @core-text-color;
     }
 
     &.loading {
       &::after {
-        border-color: #fff;
+        border-color: @core-text-color;
         border-right-color: transparent;
         border-top-color: transparent;
       }
diff --git a/src/chips.less b/src/chips.less
index a6f05f8..9866704 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -70,7 +70,7 @@
 
   &.selected {
     background-color: @core-color;
-    color: #fff;
+    color: @core-text-color;
 
     .btn {
       &::before,
diff --git a/src/fileicons.less b/src/fileicons.less
index 534ed0c..e7ccb82 100644
--- a/src/fileicons.less
+++ b/src/fileicons.less
@@ -29,7 +29,7 @@
   &::after {
     border-bottom-left-radius: .2rem;
     border-color: rgba(255, 255, 255, .5);
-    color: #fff;
+    color: @core-text-color;
     content: attr(data-type);
     font-size: 1rem;
     line-height: 3.6rem;
diff --git a/src/forms.less b/src/forms.less
index af115bf..a01ab3c 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -51,7 +51,7 @@
   color: @body-font-color;
   font-size: 1.4rem;
   line-height: 1.6rem;
-  padding: .5rem .8rem;
+  padding: .7rem .8rem;
   -webkit-appearance: none;
   outline: 0;
 
@@ -68,13 +68,14 @@
     height: 2.4rem;
     border-radius: .2rem;
     font-size: 1.2rem;
-    padding: .4rem .6rem;
+    padding: .3rem .6rem;
   }
 
   &.input-lg {
     height: 4.2rem;
     border-radius: .4rem;
     font-size: 1.6rem;
+    line-height: 2rem;
     padding: 1rem 1.2rem;
   }
 
@@ -127,12 +128,12 @@
     display: none;
   }
 
-  // Select size
+  // Select small
   &.select-sm {
     height: 2.4rem;
     border-radius: .2rem;
     font-size: 1.2rem;
-    padding: .4rem .6rem;
+    padding: .4rem 2rem .4rem .6rem;
   }
 }
 
diff --git a/src/labels.less b/src/labels.less
index 3d1c457..f92f2d0 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,15 +1,8 @@
 // Labels
 .label {
   background-color: @core-border-color;
-  border-radius: .2rem;
   color: lighten(@body-font-color, 20%);
-  display: inline-block;
-  font-size: 1em;
-  line-height: 1;
-  margin: -.2rem 0;
-  padding: .2rem .3rem;
-  text-align: center;
-  vertical-align: baseline;
+  .label-base;
   white-space: nowrap;
 
   &.label-primary {
diff --git a/src/navigation.less b/src/navigation.less
index 5f51b0e..ffcf0fc 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -102,7 +102,7 @@
     &.active {
       a {
         background-color: @core-color;
-        color: #fff;
+        color: @core-text-color;
       }
     }
   }
diff --git a/src/tooltips.less b/src/tooltips.less
index 6659604..7eecfe0 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -6,7 +6,7 @@
     background-color: fade(#333, 90%);
     border-radius: .3rem;
     bottom: 100%;
-    color: #fff;
+    color: @core-text-color;
     content: attr(data-tooltip);
     display: block;
     font-size: 1.2rem;
diff --git a/src/typography.less b/src/typography.less
index 188ae1c..4fd681f 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -79,9 +79,7 @@ ol {
 mark,
 .highlight {
   background-color: lighten(@control-color-warning, 32%);
-  border-radius: .2rem;
-  line-height: 1.6rem;
-  padding: .2rem;
+  .label-base;
 }
 
 // Code
@@ -96,12 +94,7 @@ pre {
 }
 code {
   background-color: @core-border-color;
-  border-radius: .2rem;
-  font-size: 1em;
-  line-height: 1.4;
-  margin: -.2em 0;
-  padding: .2em .3em;
-  vertical-align: middle;
+  .label-base;
   white-space: nowrap;
 
   pre & {
diff --git a/src/variables.less b/src/variables.less
index 198ab0e..404cd1f 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -8,6 +8,7 @@
 
 // Colors
 @core-color: #5764c6;
+@core-text-color: #fff;
 @core-link-color: #5764c6;
 @core-border-color: #efefef;
 @control-color: #c5c5c5;
@@ -16,7 +17,6 @@
 @control-color-warning: #ffb700;
 @control-color-danger: #e85600;
 
-
 // Mixins
 .clearfix() {
   &::after {
@@ -25,13 +25,19 @@
     display: table;
   }
 }
-
 .toast-variant(@color) {
   background-color: @color;
   border-color: darken(@color, 2%);
-  color: #fff;
+  color: @core-text-color;
+}
+.label-base {
+  border-radius: .2rem;
+  display: inline;
+  font-size: 1em;
+  padding: .1em .3em;
+  vertical-align: baseline;
 }
 .label-variant(@color) {
   background-color: @color;
-  color: #fff;
+  color: @core-text-color;
 }