Merge pull request #208 from picturepan2/0.2.14 v0.2.14

0.2.14

9 files changed, 148 insertions, 29 deletions

diff --git a/src/accordions.less b/src/accordions.less
new file mode 100644
index 0000000..14db162
--- /dev/null
+++ b/src/accordions.less
@@ -0,0 +1,25 @@
+// Accordions
+.accordion {
+  .accordion-item {
+    input {
+      &:checked ~ .accordion-body {
+        max-height: 100rem;
+        transition: max-height 3s ease;
+      }
+    }
+
+    .accordion-header {
+      background: @bg-color;
+      display: block;
+      padding: 1rem 1.6rem;
+    }
+
+    .accordion-body {
+      margin-bottom: .8rem;
+      max-height: 0;
+      overflow: hidden;
+      padding: .2rem .8rem;
+      transition: max-height .3s ease;
+    }
+  }
+}
diff --git a/src/badges.less b/src/badges.less
index f6dfdbf..677cc9b 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -8,8 +8,8 @@
     &::after {
       background: @primary-color;
       background-clip: padding-box;
-      border: @border-width solid @bg-color-light;
       border-radius: 1rem;
+      box-shadow: 0 0 0 .2rem @bg-color-light;
       color: @light-color;
       content: attr(data-badge);
       display: inline-block;
@@ -19,9 +19,9 @@
   &[data-badge] {
     &::after {
       font-size: @font-size-sm;
-      height: 2rem;
+      height: 1.8rem;
       line-height: 1;
-      min-width: 2rem;
+      min-width: 1.8rem;
       padding: .3rem .5rem;
       text-align: center;
       white-space: nowrap;
@@ -30,10 +30,10 @@
   &:not([data-badge]),
   &[data-badge=''] {
     &::after {
-      height: .8rem;
-      min-width: .8rem;
+      height: .6rem;
+      min-width: .6rem;
       padding: 0;
-      width: .8rem;
+      width: .6rem;
     }
   }
 
diff --git a/src/buttons.less b/src/buttons.less
index 4cf1d50..88f87bf 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -123,7 +123,8 @@
     color: currentColor;
     height: 1.6rem;
     line-height: 1.6rem;
-    margin: .2rem -.2rem .2rem .4rem;
+    margin-left: .4rem;
+    margin-right: -.2rem;
     opacity: .45;
     padding: 0 .2rem;
     text-decoration: none;
@@ -169,5 +170,9 @@
 
   &.btn-group-block {
     display: flex;
+
+    .btn {
+      flex: 1 0 0;
+    }
   }
 }
diff --git a/src/forms.less b/src/forms.less
index cff52e0..6583585 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -102,10 +102,9 @@
   outline: none;
   padding: .5rem .8rem;
   vertical-align: middle;
+  width: 100%;
 
   &[multiple] {
-    width: 100%;
-
     option {
       padding: .2rem .4rem;
     }
@@ -157,6 +156,56 @@
   }
 }
 
+// validation based on :placeholder-shown (Edge doesn't support it yet)
+.form-input {
+  &:not(:placeholder-shown) {
+    &:invalid {
+      border-color: @control-color-error;
+      &:focus {
+        .control-shadow(@control-color-error);
+      }
+
+      & + .form-input-hint {
+        color: @control-color-error;
+      }
+    }
+  }
+}
+
+// Form Icons
+.has-icon-left,
+.has-icon-right {
+  position: relative;
+
+  .form-icon {
+    margin: 0 .8rem;
+    min-width: 1.4rem;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.has-icon-left {
+  .form-icon {
+    left: 0;
+  }
+
+  .form-input {
+    padding-left: 3rem;
+  }
+}
+
+.has-icon-right {
+  .form-icon {
+    right: 0;
+  }
+
+  .form-input {
+    padding-right: 3rem;
+  }
+}
+
 // Form element: Checkbox and Radio
 .form-checkbox,
 .form-radio,
@@ -196,6 +245,7 @@
   padding: .2rem 2rem;
 
   .form-icon {
+    background: @bg-color-light;
     height: 1.4rem;
     left: 0;
     top: .5rem;
@@ -337,6 +387,7 @@
   }
 
   .form-input,
+  .form-select,
   .input-group-addon,
   .input-group-btn {
     &:first-child:not(:last-child) {
@@ -357,6 +408,10 @@
     }
   }
 
+  .form-select {
+    width: auto;
+  }
+
   &.input-inline {
     display: inline-flex;
   }
diff --git a/src/labels.less b/src/labels.less
index 014afa9..dfef4b6 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,7 +1,7 @@
 // Labels
 .label {
   .label-base();
-  .label-variant(lighten(@body-font-color, 12%), @bg-color);
+  .label-variant(lighten(@body-font-color, 5%), @bg-color);
 
   &.label-primary {
     .label-variant(@light-color, @primary-color);
diff --git a/src/layout.less b/src/layout.less
index 2e4426b..1c657df 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -7,6 +7,10 @@
   width: 100%;
   &:extend(.clearfix all);
 
+  &.grid-1280 {
+    max-width: 128rem + 2 * @layout-padding;
+  }
+
   &.grid-960 {
     max-width: 96rem + 2 * @layout-padding;
   }
diff --git a/src/parallax.less b/src/parallax.less
index 6a6f03a..9886206 100644
--- a/src/parallax.less
+++ b/src/parallax.less
@@ -2,6 +2,8 @@
 @parallax-deg: 3deg;
 @parallax-offset: .65rem;
 @parallax-offset-z: 10rem;
+@parallax-perspective: 100rem;
+@parallax-scale: 1 - unit(@parallax-offset-z / @parallax-perspective);
 
 .parallax {
   display: block;
@@ -12,7 +14,7 @@
   .parallax-content {
     height: auto;
     .shadow-variant(2rem);
-    transform: perspective(100rem);
+    transform: perspective(@parallax-perspective);
     transform-style: preserve-3d;
     transition: all .4s ease;
     width: 100%;
@@ -39,7 +41,7 @@
     text-align: center;
     text-shadow: 0 0 3rem fade(@dark-color, 95%);
     top: 0;
-    transform: translateZ(@parallax-offset-z);
+    transform: translateZ(@parallax-offset-z) scale(@parallax-scale);
     transition: all .4s ease;
     width: 100%;
     z-index: @zindex-0;
@@ -51,14 +53,14 @@
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX(-@parallax-deg) rotateY(@parallax-deg);
+      transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(@parallax-deg);
 
       &::before {
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d(-@parallax-offset, -@parallax-offset, @parallax-offset-z);
+        transform: translate3d(-@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale);
       }
     }
   }
@@ -69,14 +71,14 @@
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX(-@parallax-deg) rotateY(-@parallax-deg);
+      transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(-@parallax-deg);
 
       &::before {
         background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d(@parallax-offset, -@parallax-offset, @parallax-offset-z);
+        transform: translate3d(@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale);
       }
     }
   }
@@ -87,14 +89,14 @@
     left: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX(@parallax-deg) rotateY(@parallax-deg);
+      transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(@parallax-deg);
 
       &::before {
         background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d(-@parallax-offset, @parallax-offset, @parallax-offset-z);
+        transform: translate3d(-@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale);
       }
     }
   }
@@ -105,19 +107,20 @@
     right: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX(@parallax-deg) rotateY(-@parallax-deg);
+      transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(-@parallax-deg);
 
       &::before {
         background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d(@parallax-offset, @parallax-offset, @parallax-offset-z);
+        transform: translate3d(@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale);
       }
     }
   }
 }
 
+// Mixin: Parallax direction
 .parallax-dir() {
   height: 50%;
   position: absolute;
diff --git a/src/tabs.less b/src/tabs.less
index b072f39..781c2f2 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -1,7 +1,6 @@
 // Tabs
 .tab {
   align-items: center;
-  border-bottom: @border-width solid @border-color;
   display: flex;
   flex-wrap: wrap;
 
@@ -18,7 +17,7 @@
       color: inherit;
       display: block;
       margin-top: 0;
-      padding: .5rem 1.2rem;
+      padding: .6rem 1.2rem .4rem 1.2rem;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -50,7 +49,7 @@
 
   &:not(.tab-block) {
     .badge {
-      padding-right: 0;
+      padding-right: .2rem;
     }
   }
 }
diff --git a/src/utilities.less b/src/utilities.less
index 5541243..2e4643a 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -1,13 +1,11 @@
 // Divider
-.divider {
-  border-top: @border-width solid @border-color;
+.divider,
+.divider-vert {
   display: block;
-  height: .1rem;
-  margin: 1rem 0;
   position: relative;
 
-  &[data-content]::before {
-    background: @light-color;
+  &[data-content]::after {
+    background: @bg-color-light;
     color: @gray-color-light;
     content: attr(data-content);
     display: inline-block;
@@ -17,6 +15,36 @@
   }
 }
 
+.divider {
+  border-top: @border-width solid @border-color;
+  height: .1rem;
+  margin: 1rem 0;
+}
+
+.divider-vert {
+  display: block;
+  padding: @layout-padding;
+
+  &::before {
+    border-left: @border-width solid @border-color;
+    bottom: @layout-padding;
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: @layout-padding;
+    transform: translateX(-50%);
+  }
+
+  &[data-content]::after {
+    left: 50%;
+    padding: .4rem 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
 // Loading
 .loading {
   color: transparent !important;