Merge pull request #259 from picturepan2/0.2.16 v0.3.1

0.3.1

17 files changed, 131 insertions, 129 deletions

diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
index 280250b..0b0f757 100644
--- a/src/breadcrumbs.less
+++ b/src/breadcrumbs.less
@@ -1,5 +1,7 @@
 // Breadcrumbs
 .breadcrumb {
+  list-style: none;
+  margin: @unit-1 0;
   padding: @unit-1 0;
 
   .breadcrumb-item {
diff --git a/src/buttons.less b/src/buttons.less
index 3f1e326..1beba4d 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -91,13 +91,13 @@
   &.btn-sm {
     font-size: @font-size-sm;
     height: @control-size-sm;
-    padding: @control-padding-v-sm @control-padding-h;
+    padding: @control-padding-v-sm @control-padding-h * .75;
   }
 
   &.btn-lg {
     font-size: @font-size-lg;
     height: @control-size-lg;
-    padding: @control-padding-v-lg @control-padding-h;
+    padding: @control-padding-v-lg @control-padding-h * 1.5;
   }
 
   // Button Block
diff --git a/src/cards.less b/src/cards.less
index 1a84c21..dadfa8b 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -3,7 +3,8 @@
   background: @bg-color-light;
   border: @border-width solid @border-color;
   border-radius: @border-radius;
-  display: block;
+  display: flex;
+  flex-direction: column;
 
   .card-header,
   .card-body,
@@ -35,8 +36,4 @@
       }
     }
   }
-
-  .card-subtitle {
-    color: lighten(@body-font-color, 40%);
-  }
-}
+}
\ No newline at end of file
diff --git a/src/empty.less b/src/empty.less
index acfc8a0..b6cb1ae 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -15,10 +15,6 @@
     margin: @layout-spacing auto;
   }
 
-  .empty-subtitle {
-    color: lighten(@body-font-color, 40%);
-  }
-
   .empty-action {
     margin-top: @layout-spacing-lg;
   }
diff --git a/src/forms.less b/src/forms.less
index b0e9a9e..bc9b571 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -81,7 +81,7 @@ legend {
 
   // Input types
   &[type="file"] {
-    height: auto;
+    padding: .125rem;
   }
 }
 
@@ -109,20 +109,23 @@ legend {
   border-radius: @border-radius;
   color: inherit;
   font-size: @font-size;
+  height: @control-size;
   line-height: @line-height;
   outline: none;
   padding: @control-padding-v @control-padding-h;
   vertical-align: middle;
   width: 100%;
 
+  &[size],
   &[multiple] {
+    height: auto;
+    
     option {
       padding: @unit-h @unit-1;
     }
   }
-  &:not([multiple]) {
+  &:not([multiple]):not([size]) {
     background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right (@control-icon-size / 2) center / .4rem .5rem;
-    height: @control-size;
     padding-right: @control-icon-size + @control-padding-h;
   }
   &:focus {
diff --git a/src/labels.less b/src/labels.less
index dfef4b6..c67759b 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -7,6 +7,10 @@
     .label-variant(@light-color, @primary-color);
   }
 
+  &.label-secondary {
+    .label-variant(@primary-color, @secondary-color);
+  }
+
   &.label-success {
     .label-variant(@light-color, @control-color-success);
   }
diff --git a/src/layout.less b/src/layout.less
index 36323ff..7fd2c60 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -28,6 +28,15 @@
   }
 }
 
+// Responsive breakpoint system
+.show-xs,
+.show-sm,
+.show-md,
+.show-lg,
+.show-xl {
+  display: none !important;
+}
+
 // Responsive grid system
 .columns {
   display: flex;
@@ -39,7 +48,7 @@
     margin-left: 0;
     margin-right: 0;
 
-    .column {
+    & > .column {
       padding-left: 0;
       padding-right: 0;
     }
@@ -106,6 +115,21 @@
 .col-1 {
   width: 8.33333333%;
 }
+.col-auto {
+  flex: 0 0 auto;
+  max-width: none;
+  width: auto;
+}
+.col-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.col-ml-auto {
+  margin-left: auto;
+}
+.col-mr-auto {
+  margin-right: auto;
+}
 @media screen and (max-width: @size-xl ) {
   .col-xl-12,
   .col-xl-11,
@@ -157,6 +181,12 @@
   .col-xl-1 {
     width: 8.33333333%;
   }
+  .hide-xl {
+    display: none !important;
+  }
+  .show-xl {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-lg ) {
   .col-lg-12,
@@ -209,6 +239,12 @@
   .col-lg-1 {
     width: 8.33333333%;
   }
+  .hide-lg {
+    display: none !important;
+  }
+  .show-lg {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-md ) {
   .col-md-12,
@@ -261,6 +297,12 @@
   .col-md-1 {
     width: 8.33333333%;
   }
+  .hide-md {
+    display: none !important;
+  }
+  .show-md {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-sm ) {
   .col-sm-12,
@@ -313,6 +355,12 @@
   .col-sm-1 {
     width: 8.33333333%;
   }
+  .hide-sm {
+    display: none !important;
+  }
+  .show-sm {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-xs) {
   .col-xs-12,
@@ -365,17 +413,6 @@
   .col-xs-1 {
     width: 8.33333333%;
   }
-}
-
-// Responsive breakpoint system
-.show-xs,
-.show-sm,
-.show-md,
-.show-lg,
-.show-xl {
-  display: none !important;
-}
-@media screen and (max-width: @size-xs) {
   .hide-xs {
     display: none !important;
   }
@@ -383,35 +420,3 @@
     display: block !important;
   }
 }
-@media screen and (max-width: @size-sm) {
-  .hide-sm {
-    display: none !important;
-  }
-  .show-sm {
-    display: block !important;
-  }
-}
-@media screen and (max-width: @size-md) {
-  .hide-md {
-    display: none !important;
-  }
-  .show-md {
-    display: block !important;
-  }
-}
-@media screen and (max-width: @size-lg) {
-  .hide-lg {
-    display: none !important;
-  }
-  .show-lg {
-    display: block !important;
-  }
-}
-@media screen and (max-width: @size-xl) {
-  .hide-xl {
-    display: none !important;
-  }
-  .show-xl {
-    display: block !important;
-  }
-}
diff --git a/src/media.less b/src/media.less
index 455d77c..a55b8cb 100644
--- a/src/media.less
+++ b/src/media.less
@@ -32,6 +32,7 @@
   iframe,
   object,
   embed {
+    border: 0;
     bottom: 0;
     height: 100%;
     left: 0;
diff --git a/src/mixins.less b/src/mixins.less
index 52cd743..6fd4d6d 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -35,8 +35,8 @@
 .label-base() {
   border-radius: @border-radius;
   display: inline-block;
-  line-height: 1;
-  padding: .2em .3em;
+  line-height: 1.2;
+  padding: .1em .3em;
   vertical-align: baseline;
 }
 
@@ -51,55 +51,55 @@
 }
 
 // Position utility mixin
-.margin-variant(@size: 1) {
-  .m-@{size} {
-    padding: @size * @unit-1;
+.margin-variant(@id: 1, @size: 1) {
+  .m-@{id} {
+    margin: @size;
   }
-  .mb-@{size} {
-    padding-bottom: @size * @unit-1;
+  .mb-@{id} {
+    margin-bottom: @size;
   }
-  .ml-@{size} {
-    padding-left: @size * @unit-1;
+  .ml-@{id} {
+    margin-left: @size;
   }
-  .mr-@{size} {
-    padding-right: @size * @unit-1;
+  .mr-@{id} {
+    margin-right: @size;
   }
-  .mt-@{size} {
-    padding-top: @size * @unit-1;
+  .mt-@{id} {
+    margin-top: @size;
   }
-  .mx-@{size} {
-    padding-left: @size * @unit-1;
-    padding-right: @size * @unit-1;
+  .mx-@{id} {
+    margin-left: @size;
+    margin-right: @size;
   }
-  .my-@{size} {
-    padding-bottom: @size * @unit-1;
-    padding-top: @size * @unit-1;
+  .my-@{id} {
+    margin-bottom: @size;
+    margin-top: @size;
   }
 }
 
-.padding-variant(@size: 1) {
-  .p-@{size} {
-    padding: @size * @unit-1;
+.padding-variant(@id: 1, @size: 1) {
+  .p-@{id} {
+    padding: @size;
   }
-  .pb-@{size} {
-    padding-bottom: @size * @unit-1;
+  .pb-@{id} {
+    padding-bottom: @size;
   }
-  .pl-@{size} {
-    padding-left: @size * @unit-1;
+  .pl-@{id} {
+    padding-left: @size;
   }
-  .pr-@{size} {
-    padding-right: @size * @unit-1;
+  .pr-@{id} {
+    padding-right: @size;
   }
-  .pt-@{size} {
-    padding-top: @size * @unit-1;
+  .pt-@{id} {
+    padding-top: @size;
   }
-  .px-@{size} {
-    padding-left: @size * @unit-1;
-    padding-right: @size * @unit-1;
+  .px-@{id} {
+    padding-left: @size;
+    padding-right: @size;
   }
-  .py-@{size} {
-    padding-bottom: @size * @unit-1;
-    padding-top: @size * @unit-1;
+  .py-@{id} {
+    padding-bottom: @size;
+    padding-top: @size;
   }
 }
 
diff --git a/src/navigation.less b/src/navigation.less
deleted file mode 100644
index a129886..0000000
--- a/src/navigation.less
+++ /dev/null
@@ -1,13 +0,0 @@
-// Navigation
-.breadcrumb,
-.tab,
-.pagination,
-.nav {
-  list-style: none;
-  margin: @unit-1 0;
-}
-
-@import 'breadcrumbs.less';
-@import 'tabs.less';
-@import 'pagination.less';
-@import 'navs.less';
diff --git a/src/navs.less b/src/navs.less
index edfc3d3..5f471b0 100644
--- a/src/navs.less
+++ b/src/navs.less
@@ -2,6 +2,8 @@
 .nav {
   display: flex;
   flex-direction: column;
+  list-style: none;
+  margin: @unit-1 0;
 
   .nav-item {
     a {
diff --git a/src/pagination.less b/src/pagination.less
index 0523bad..7372c59 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -1,6 +1,8 @@
 // Pagination
 .pagination {
   display: flex;
+  list-style: none;
+  margin: @unit-1 0;
   padding: @unit-1 0;
 
   .page-item {
diff --git a/src/panels.less b/src/panels.less
index 873d21f..3c6bae8 100644
--- a/src/panels.less
+++ b/src/panels.less
@@ -20,8 +20,4 @@
     overflow-y: auto;
     padding: 0 @layout-spacing-lg;
   }
-
-  .panel-subtitle {
-    color: lighten(@body-font-color, 40%);
-  }
 }
diff --git a/src/tabs.less b/src/tabs.less
index 1abfe75..c5af2b6 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -1,8 +1,11 @@
 // Tabs
 .tab {
   align-items: center;
+  border-bottom: @border-width solid @border-color;
   display: flex;
   flex-wrap: wrap;
+  list-style: none;
+  margin: @unit-1 0 @unit-1 - @border-width 0;
 
   .tab-item {
     margin-top: 0;
@@ -16,8 +19,8 @@
       border-bottom: @border-width-lg solid transparent;
       color: inherit;
       display: block;
-      margin-top: 0;
-      padding: 6px 12px 4px 12px;
+      margin: 0 @unit-2 0 0;
+      padding: @unit-2 @unit-1 @unit-2 - @border-width-lg @unit-1;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -36,6 +39,10 @@
       flex: 1 0 0;
       text-align: center;
 
+      a {
+        margin: 0;
+      }
+
       .badge {
         &[data-badge]::after {
           position: absolute;
diff --git a/src/tiles.less b/src/tiles.less
index 79c1a69..a99540e 100644
--- a/src/tiles.less
+++ b/src/tiles.less
@@ -17,11 +17,8 @@
       padding-right: @unit-2;
     }
   }
-  .tile-title {
-    line-height: @line-height;
-  }
+  .tile-title,
   .tile-subtitle {
-    color: lighten(@body-font-color, 40%);
     line-height: @line-height;
   }
 
diff --git a/src/utilities/display.less b/src/utilities/display.less
index a00aa4a..26e611e 100644
--- a/src/utilities/display.less
+++ b/src/utilities/display.less
@@ -1,26 +1,27 @@
 // Display
-.block {
+.d-block {
   display: block;
 }
-.inline {
+.d-inline {
   display: inline;
 }
-.inline-block {
+.d-inline-block {
   display: inline-block;
 }
-.flex {
+.d-flex {
   display: flex;
 }
-.inline-flex {
+.d-inline-flex {
   display: inline-flex;
 }
+.d-none,
 .hide {
   display: none !important;
 }
-.visible {
+.d-visible {
   visibility: visible;
 }
-.invisible {
+.d-invisible {
   visibility: hidden;
 }
 .text-hide {
diff --git a/src/utilities/position.less b/src/utilities/position.less
index 1bf33b5..235d6a6 100644
--- a/src/utilities/position.less
+++ b/src/utilities/position.less
@@ -26,8 +26,10 @@
 }
 
 // Spacing
-.margin-variant(1);
-.margin-variant(2);
+.margin-variant(0, 0);
+.margin-variant(1, @unit-1);
+.margin-variant(2, @unit-2);
 
-.padding-variant(1);
-.padding-variant(2);
\ No newline at end of file
+.padding-variant(0, 0);
+.padding-variant(1, @unit-1);
+.padding-variant(2, @unit-2);
\ No newline at end of file