Merge pull request #36 from picturepan2/feature/more-layout v0.1.19

Feature/more layout

13 files changed, 68 insertions, 33 deletions

diff --git a/src/avatars.less b/src/avatars.less
index e0f18c8..e744e1f 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -49,7 +49,7 @@
   }
 
   &[data-initial]::after {
-    color: @core-text-color;
+    color: @core-light-color;
     content: attr(data-initial);
     left: 50%;
     position: absolute;
diff --git a/src/badges.less b/src/badges.less
index 0e727eb..f1e2512 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -7,7 +7,7 @@
     background-clip: padding-box;
     border: .1rem solid #fff;
     border-radius: 1rem;
-    color: @core-text-color;
+    color: @core-light-color;
     content: attr(data-badge);
     display: inline-block;
     font-size: 1.1rem;
diff --git a/src/base.less b/src/base.less
index 256930f..78da9f9 100644
--- a/src/base.less
+++ b/src/base.less
@@ -6,8 +6,8 @@
 }
 html {
   box-sizing: border-box;
-  font-size: 10px;
-  line-height: 1.428571429;
+  font-size: @html-font-size;
+  line-height: @html-line-height;
   -webkit-tap-highlight-color: transparent;
 }
 body {
diff --git a/src/buttons.less b/src/buttons.less
index 2070bfd..cb97f5c 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -22,37 +22,37 @@
   &:focus {
     background: @core-color;
     border-color: darken(@core-color, 5%);
-    color: @core-text-color;
+    color: @core-light-color;
   }
   &:active,
   &.active {
     background: darken(@core-color, 5%);
     border-color: darken(@core-color, 10%);
-    color: @core-text-color;
+    color: @core-light-color;
   }
 
   // Button Primary
   &.btn-primary {
     background: @core-color;
     border-color: darken(@core-color, 5%);
-    color: @core-text-color;
+    color: @core-light-color;
 
     &:hover,
     &:focus {
       background: darken(@core-color, 5%);
       border-color: darken(@core-color, 10%);
-      color: @core-text-color;
+      color: @core-light-color;
     }
     &:active,
     &.active {
       background: darken(@core-color, 10%);
       border-color: darken(@core-color, 15%);
-      color: @core-text-color;
+      color: @core-light-color;
     }
 
     &.loading {
       &::after {
-        border-color: @core-text-color;
+        border-color: @core-light-color;
         border-right-color: transparent;
         border-top-color: transparent;
       }
diff --git a/src/chips.less b/src/chips.less
index 6a0c777..51e4f53 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -59,7 +59,7 @@
 
   &.selected {
     background: @core-color;
-    color: @core-text-color;
+    color: @core-light-color;
 
     .btn-clear {
       &::before {
diff --git a/src/empty.less b/src/empty.less
new file mode 100644
index 0000000..b460f50
--- /dev/null
+++ b/src/empty.less
@@ -0,0 +1,18 @@
+// Empty states (or Blank slates)
+.empty {
+  background: #f8f8f8;
+  border-radius: .3rem;
+  text-align: center;
+  padding: 2 * @layout-gutter;
+
+  .empty-title {
+    font-size: 1.8rem;
+    margin: 1.5rem 0 .5rem 0;
+  }
+  .empty-meta {
+    color: @core-meta-color;
+  }
+  .btn {
+    margin-top: 1.5rem;
+  }
+}
\ No newline at end of file
diff --git a/src/fileicons.less b/src/fileicons.less
index a6e1f89..0e2c7eb 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: @core-text-color;
+    color: @core-light-color;
     content: attr(data-type);
     font-size: 1rem;
     line-height: 3.6rem;
diff --git a/src/forms.less b/src/forms.less
index 5527b52..96049c9 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -230,13 +230,12 @@
     }
   }
 }
-
 // Form element: Input groups
 .input-group {
   display: flex;
 
   .input-group-addon {
-    background: @core-border-color;
+    background: lighten(@core-border-color, 4%);
     border: .1rem solid @control-color;
     border-radius: .3rem;
     line-height: 1.6rem;
@@ -268,3 +267,9 @@
     }
   }
 }
+// Form inline
+.form-inline {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+}
diff --git a/src/layout.less b/src/layout.less
index 6a9a643..dbc48c9 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -8,18 +8,15 @@
   width: 100%;
   &:extend(.clearfix all);
 }
-@media screen and (min-width: 981px) {
+// Grid sizes
+@media screen and (min-width: (960px + 2 * @html-font-size * @layout-gutter)) {
   .grid-960 {
-    margin-left: auto;
-    margin-right: auto;
-    width: 96rem;
+    width: 96rem + 2 * @layout-gutter;
   }
 }
-@media screen and (min-width: 481px) {
+@media screen and (min-width: (480px + 2 * @html-font-size * @layout-gutter)) {
   .grid-480 {
-    margin-left: auto;
-    margin-right: auto;
-    width: 48rem;
+    width: 48rem + 2 * @layout-gutter;
   }
 }
 
@@ -84,7 +81,7 @@
 .col-1 {
   width: 8.33333333%;
 }
-@media screen and (min-width: (@size-xs+1px)) {
+@media screen and (min-width: (@size-xs + 1px)) {
   .col-xs-12,
   .col-xs-11,
   .col-xs-10,
@@ -136,7 +133,7 @@
     width: 8.33333333%;
   }
 }
-@media screen and (min-width: (@size-sm+1px)) {
+@media screen and (min-width: (@size-sm + 1px)) {
   .col-sm-12,
   .col-sm-11,
   .col-sm-10,
@@ -188,7 +185,7 @@
     width: 8.33333333%;
   }
 }
-@media screen and (min-width: (@size-md+1px)) {
+@media screen and (min-width: (@size-md + 1px)) {
   .col-md-12,
   .col-md-11,
   .col-md-10,
@@ -240,7 +237,7 @@
     width: 8.33333333%;
   }
 }
-@media screen and (min-width: (@size-md+1px)) {
+@media screen and (min-width: (@size-md + 1px)) {
   .form-horizontal {
     padding: 1rem;
 
diff --git a/src/navbar.less b/src/navbar.less
new file mode 100644
index 0000000..2fa4eac
--- /dev/null
+++ b/src/navbar.less
@@ -0,0 +1,13 @@
+// Navbar
+.navbar {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem;
+
+  .navbar-brand {
+    font-size: 2rem;
+    text-decoration: none;
+    vertical-align: middle;
+  }
+}
\ No newline at end of file
diff --git a/src/navigation.less b/src/navigation.less
index 7e1967b..0fd8d0c 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -108,7 +108,7 @@
     &.active {
       a {
         background: @core-color;
-        color: @core-text-color;
+        color: @core-light-color;
       }
     }
   }
diff --git a/src/tooltips.less b/src/tooltips.less
index 9e71540..33928ae 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -6,7 +6,7 @@
     background: fade(#333, 90%);
     border-radius: .3rem;
     bottom: 100%;
-    color: @core-text-color;
+    color: @core-light-color;
     content: attr(data-tooltip);
     display: block;
     font-size: 1.2rem;
diff --git a/src/variables.less b/src/variables.less
index 0b32da0..4b3e163 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -1,6 +1,7 @@
 // Core variables
-
 // Global
+@html-font-size: 10px;
+@html-line-height: 1.428571429;
 @body-bg: #fff;
 @body-font-color: #333;
 @body-font-size: 1.4rem;
@@ -11,7 +12,8 @@
 
 // Colors
 @core-color: #5764c6;
-@core-text-color: #fff;
+@core-light-color: #fff;
+@core-meta-color: #888;
 @core-link-color: #5764c6;
 @core-border-color: #efefef;
 @control-color: #c5c5c5;
@@ -20,7 +22,7 @@
 @control-color-warning: #ffb700;
 @control-color-danger: #e85600;
 
-// Responsive Breakpoints
+// Responsive breakpoints
 @size-xs: 480px;
 @size-sm: 600px;
 @size-md: 840px;
@@ -38,7 +40,7 @@
 .toast-variant(@color) {
   background: @color;
   border-color: darken(@color, 2%);
-  color: @core-text-color;
+  color: @core-light-color;
 }
 .label-base() {
   border-radius: .2rem;
@@ -49,5 +51,5 @@
 }
 .label-variant(@color) {
   background: @color;
-  color: @core-text-color;
+  color: @core-light-color;
 }