Merge pull request #127 from picturepan2/feature/navbar

Feature/navbar

8 files changed, 42 insertions, 27 deletions

diff --git a/src/buttons.less b/src/buttons.less
index 03179d3..a21566b 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -11,7 +11,7 @@
   height: 3.2rem;
   line-height: 1.6rem;
   outline: 0;
-  padding: .7rem 1.5rem;
+  padding: .7rem 1rem;
   text-align: center;
   text-decoration: none;
   user-select: none;
@@ -85,7 +85,7 @@
     font-size: 1.2rem;
     height: 2.4rem;
     line-height: 1.4rem;
-    padding: .4rem 1rem;
+    padding: .4rem .8rem;
   }
 
   // Button Large
@@ -94,7 +94,7 @@
     font-size: 1.8rem;
     height: 4.2rem;
     line-height: 2rem;
-    padding: 1rem 1.8rem;
+    padding: 1rem 1.5rem;
   }
 
   // Button Block
@@ -112,6 +112,7 @@
     margin-left: .3rem;
     opacity: .45;
     padding: 0;
+    text-decoration: none;
 
     &:hover {
       opacity: .85;
diff --git a/src/forms.less b/src/forms.less
index bfa032d..cd26924 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -347,4 +347,8 @@
       z-index: 99;
     }
   }
+
+  &.input-inline {
+    display: inline-flex;
+  }
 }
diff --git a/src/navbar.less b/src/navbar.less
new file mode 100755
index 0000000..264dd3b
--- /dev/null
+++ b/src/navbar.less
@@ -0,0 +1,13 @@
+// Navbar
+.navbar {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .navbar-section {
+    align-items: center;
+    display: flex;
+    padding: 1rem 0;
+  }
+}
diff --git a/src/navigation.less b/src/navigation.less
index 4918a7d..00bf86d 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -98,7 +98,7 @@
       border-radius: .3rem;
       display: inline-block;
       margin: 0 .1rem;
-      padding: .6rem 1.2rem;
+      padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
diff --git a/src/tables.less b/src/tables.less
index 5e70608..b9b9ac9 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -2,6 +2,7 @@
 .table {
   border-collapse: collapse;
   border-spacing: 0;
+  text-align: left;
   width: 100%;
 
   &.table-striped {
@@ -27,7 +28,6 @@
   td {
     border-bottom: .1rem solid @core-border-color;
     padding: 1.5rem 1rem;
-    text-align: left;
   }
   th {
     border-color: darken(@core-border-color, 15%);
diff --git a/src/toasts.less b/src/toasts.less
index 2384b94..8fe2a44 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -1,11 +1,11 @@
 // Toasts
 .toast {
-  background: @core-border-color;
-  border: .1rem solid darken(@core-border-color, 2%);
+  border: .1rem solid @core-dark-color;
   border-radius: .3rem;
-  color: #666;
+  color: @core-light-color;
   display: block;
   padding: 1.4rem;
+  .toast-variant(@core-dark-color);
   width: 100%;
 
   &.toast-primary {
@@ -20,11 +20,18 @@
     .toast-variant(@control-color-danger);
   }
 
-  &.toast-primary,
-  &.toast-success,
-  &.toast-danger {
-    .btn-clear {
-      color: @core-light-color;
+  a {
+    color: @core-light-color;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus,
+    &:active {
+      opacity: .75;
     }
   }
+
+  .btn-clear {
+    color: @core-light-color;
+  }
 }
diff --git a/src/tooltips.less b/src/tooltips.less
index 2ef0fc0..7eb25c0 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -2,7 +2,7 @@
 .tooltip {
   position: relative;
   &::after {
-    background: fade(#333, 90%);
+    background: fade(@core-dark-color, 90%);
     border-radius: .3rem;
     bottom: 100%;
     color: @core-light-color;
diff --git a/src/variables.less b/src/variables.less
index a983efd..1fe2f86 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -15,6 +15,7 @@
 // Colors
 @core-color: #5764c6;
 @core-secondary-color: lighten(@core-color, 40%);
+@core-dark-color: #333;
 @core-light-color: #fff;
 @core-meta-color: #888;
 @core-link-color: #5764c6;
@@ -42,19 +43,8 @@
   }
 }
 .toast-variant(@color) {
-  background: @color;
-  border-color: darken(@color, 2%);
-  color: @core-light-color;
-
-  a {
-    color: @core-light-color;
-
-    &:hover,
-    &:focus,
-    &:active {
-      opacity: .75;
-    }
-  }
+  background: fade(@color, 90%);
+  border-color: @color;
 }
 .label-base() {
   border-radius: .2rem;