Merge pull request #188 from picturepan2/0.2.13 v0.2.13

0.2.13

20 files changed, 271 insertions, 88 deletions

diff --git a/src/calendars.less b/src/calendars.less
index 46fd286..621b9d1 100644
--- a/src/calendars.less
+++ b/src/calendars.less
@@ -25,7 +25,7 @@
 
     .calendar-date {
       flex: 0 0 14.28%; // 7 calendar-items each row
-      width: 14.28%;
+      max-width: 14.28%;
     }
   }
 
diff --git a/src/cards.less b/src/cards.less
index 107bfb5..3a68b3a 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -41,7 +41,7 @@
   }
 
   .card-subtitle {
+    color: lighten(@body-font-color, 40%);
     font-size: @font-size-sm;
-    opacity: .5;
   }
 }
diff --git a/src/carousels.less b/src/carousels.less
index 8b01e94..ee30edf 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -2,7 +2,6 @@
 .carousel {
   background: @bg-color;
   display: block;
-  height: 50vh;
   overflow: hidden;
   position: relative;
   width: 100%;
@@ -11,6 +10,11 @@
     height: 100%;
     left: 0;
     position: relative;
+    &::before {
+      content: "";
+      display: block;
+      padding-bottom: 56.25%;
+    }
 
     .carousel-item {
       animation: carousel-slideout 1s ease-in-out 1;
@@ -97,12 +101,6 @@
       }
     }
   }
-
-  &.carousel-autoplay {
-    .carousel-item {
-      //animation: carousel-autoplay .15s infinite;
-    }
-  }
 }
 
 @keyframes carousel-slidein {
diff --git a/src/codes.less b/src/codes.less
index 80e881b..bdb73ee 100644
--- a/src/codes.less
+++ b/src/codes.less
@@ -1,8 +1,7 @@
 // Codes
 code {
-  background: @bg-color;
-  color: @code-color;
   .label-base();
+  .label-variant(@code-color, lighten(@code-color, 33%));
 }
 
 .code {
@@ -21,6 +20,7 @@ code {
   }
 
   code {
+    background: @bg-color;
     color: inherit;
     display: block;
     line-height: inherit;
diff --git a/src/comparison-sliders.less b/src/comparison-sliders.less
index 5007f70..84a7a31 100644
--- a/src/comparison-sliders.less
+++ b/src/comparison-sliders.less
@@ -1,5 +1,5 @@
 // Image comparison slider
-// Credit: http://jsfiddle.net/os8bj2xq/
+// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
 .comparison-slider {
   height: 50vh;
   overflow: hidden;
diff --git a/src/dropdowns.less b/src/dropdowns.less
index 1a44122..4d835e7 100644
--- a/src/dropdowns.less
+++ b/src/dropdowns.less
@@ -23,4 +23,12 @@
   .menu:hover {
     display: block;
   }
+
+  // Fix dropdown-toggle border radius in button groups
+  .btn-group {
+    .dropdown-toggle:nth-last-child(2) {
+      border-bottom-right-radius: @border-radius;
+      border-top-right-radius: @border-radius;
+    }
+  }
 }
diff --git a/src/empty.less b/src/empty.less
index a82a1da..295758c 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -12,7 +12,7 @@
   }
 
   .empty-subtitle {
-    opacity: .5;
+    color: lighten(@body-font-color, 40%);
   }
 
   .empty-action {
diff --git a/src/forms.less b/src/forms.less
index fe08dc7..cff52e0 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -85,9 +85,9 @@
     color: @control-color-success;
   }
 
-  .has-danger &,
-  .is-danger + & {
-    color: @control-color-danger;
+  .has-error &,
+  .is-error + & {
+    color: @control-color-error;
   }
 }
 
@@ -148,11 +148,11 @@
     }
   }
 
-  .has-danger &,
-  &.is-danger {
-    border-color: @control-color-danger;
+  .has-error &,
+  &.is-error {
+    border-color: @control-color-error;
     &:focus {
-      .control-shadow(@control-color-danger);
+      .control-shadow(@control-color-error);
     }
   }
 }
@@ -362,7 +362,7 @@
   }
 }
 
-// Form disabled
+// Form disabled and readonly
 .form-input,
 .form-select {
   &:disabled,
@@ -373,6 +373,12 @@
   }
 }
 
+.form-input {
+  &[readonly] {
+    background-color: @bg-color;
+  }
+}
+
 input {
   &:disabled,
   &.disabled {
diff --git a/src/icons.less b/src/icons.less
index dd77944..ce13756 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -1,8 +1,11 @@
 // CSS Icons
+@icon-border-width: .2rem;
+
 .icon {
   box-sizing: border-box;
   display: inline-block;
   font-size: inherit;
+  font-style: normal;
   height: 1em;
   position: relative;
   text-indent: -999rem;
@@ -159,7 +162,7 @@
     background: currentColor;
     content: "";
     height: @icon-border-width;
-    width: 90%;
+    width: 100%;
   }
 }
 .icon-plus,
@@ -167,7 +170,7 @@
   &::after {
     background: currentColor;
     content: "";
-    height: 90%;
+    height: 100%;
     width: @icon-border-width;
   }
 }
@@ -197,6 +200,33 @@
   }
 }
 
+// Icon stop
+.icon-stop {
+  border: @icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: @icon-border-width;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: 1em;
+  }
+}
+
+// Icon shutdown
+.icon-shutdown {
+  border: @icon-border-width solid currentColor;
+  border-radius: 50%;
+  border-top-color: transparent;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: .5em;
+    top: .1em;
+    width: @icon-border-width;
+  }
+}
+
 // Icon refresh
 .icon-refresh {
   &::before {
@@ -204,8 +234,8 @@
     border-radius: 50%;
     border-right-color: transparent;
     content: "";
-    height: .9em;
-    width: .9em;
+    height: 1em;
+    width: 1em;
   }
   &::after {
     border: .2em solid currentColor;
@@ -213,8 +243,8 @@
     border-left-color: transparent;
     content: "";
     height: 0;
-    left: 75%;
-    top: 25%;
+    left: 80%;
+    top: 20%;
     width: 0;
   }
 }
@@ -257,7 +287,7 @@
     border-right-color: transparent;
     content: "";
     height: 0;
-    left: 10%;
+    left: 5%;
     top: 95%;
     transform: translate(0, -100%);
     width: 0;
@@ -266,25 +296,23 @@
 
 // Icon delete
 .icon-delete {
-  height: .7em;
-  margin: .15em .1em;
-  width: .8em;
   &::before {
     border: @icon-border-width solid currentColor;
     border-bottom-left-radius: @border-radius;
     border-bottom-right-radius: @border-radius;
     border-top: 0;
     content: "";
-    height: .7em;
-    top: 65%;
+    height: .75em;
+    top: 60%;
     width: .75em;
   }
   &::after {
     background: currentColor;
+    box-shadow: -.25em .2em, .25em .2em;
     content: "";
     height: @icon-border-width;
-    top: 10%;
-    width: .9em;
+    top: @icon-border-width/2;
+    width: .5em;
   }
 }
 
@@ -296,22 +324,22 @@
   border-top: 0;
   &::before {
     border: @icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-right: 0;
+    border-left: 0;
+    border-top: 0;
     content: "";
-    height: .45em;
+    height: .4em;
     left: 100%;
-    top: 36%;
-    transform: translate(-125%, -50%) rotate(135deg);
-    width: .45em;
+    top: .25em;
+    transform: translate(-125%, -50%) rotate(-45deg);
+    width: .4em;
   }
   &::after {
     border: @icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
-    border-radius: 75% 5%;
+    border-radius: 75% 0;
     content: "";
-    height: .4em;
+    height: .5em;
     width: .6em;
   }
 }
@@ -322,7 +350,7 @@
     background: currentColor;
     content: "";
     height: 1em;
-    left: 10%;
+    left: 15%;
     width: @icon-border-width;
   }
   &::after {
@@ -333,8 +361,8 @@
     content: "";
     height: .65em;
     top: 35%;
-    left: 55%;
-    width: .75em;
+    left: 60%;
+    width: .8em;
   }
 }
 
@@ -346,8 +374,8 @@
     border-top-left-radius: @border-radius;
     border-top-right-radius: @border-radius;
     content: "";
-    height: 90%;
-    width: 90%;
+    height: .9em;
+    width: .8em;
   }
   &::after {
     border: @icon-border-width solid currentColor;
@@ -355,9 +383,9 @@
     border-left: 0;
     border-radius: @border-radius;
     content: "";
-    height: 50%;
+    height: .5em;
     transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
-    width: 50%;
+    width: .5em;
   }
 }
 
@@ -453,24 +481,57 @@
   }
 }
 
-// Icon file
-.icon-file {
+// Icon message
+.icon-message {
+  border: @icon-border-width solid currentColor;
+  border-bottom: 0;
+  border-radius: @border-radius;
+  border-right: 0;
   &::before {
     border: @icon-border-width solid currentColor;
-    border-radius: @border-radius .4em @border-radius @border-radius;
+    border-left: 0;
+    border-bottom-right-radius: @border-radius;
+    border-top: 0;
     content: "";
-    height: 1em;
-    width: .9em;
+    height: .8em;
+    left: 65%;
+    top: 40%;
+    width: .7em;
   }
   &::after {
-    border: .2em solid currentColor;
-    border-top-color: transparent;
-    border-right-color: transparent;
+    background: currentColor;
+    border-radius: @border-radius;
     content: "";
-    height: 0;
-    left: .8em;
-    top: .2em;
-    width: 0;
+    height: .3em;
+    left: 10%;
+    top: 100%;
+    transform: translate(0, -90%) rotate(45deg);
+    width: @icon-border-width;
+  }
+}
+
+// Icon photo
+.icon-photo {
+  border: @icon-border-width solid currentColor;
+  border-radius: @border-radius;
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: .25em;
+    left: 35%;
+    top: 35%;
+    width: .25em;
+  }
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    content: "";
+    height: .5em;
+    left: 60%;
+    transform: translate(-50%, 25%) rotate(-45deg);
+    width: .5em;
   }
 }
 
@@ -479,8 +540,8 @@
   &::before,
   &::after {
     border: @icon-border-width solid currentColor;
-    border-radius: 5em;
-    border-right-color: transparent;
+    border-radius: 5em 0 0 5em;
+    border-right: 0;
     content: "";
     height: .5em;
     width: .75em;
@@ -493,6 +554,49 @@
   }
 }
 
+// Icon location
+.icon-location {
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-radius: 50% 50% 50% 0;
+    content: "";
+    height: .8em;
+    transform: translate(-50%, -60%) rotate(-45deg);
+    width: .8em;
+  }
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: .2em;
+    transform: translate(-50%, -80%);
+    width: .2em;
+  }
+}
+
+// Icon emoji
+.icon-emoji {
+  border: @icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    border-radius: 50%;
+    box-shadow: -.17em -.15em, .17em -.15em;
+    content: "";
+    height: .1em;
+    width: .1em;
+  }
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    border-right-color: transparent;
+    content: "";
+    height: .5em;
+    transform: translate(-50%, -40%) rotate(-135deg);
+    width: .5em;
+  }
+}
+
 // Component icon support
 .btn,
 .toast,
diff --git a/src/labels.less b/src/labels.less
index f6dc24d..014afa9 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,22 +1,21 @@
 // Labels
 .label {
-  background: @bg-color;
-  color: inherit;
   .label-base();
+  .label-variant(lighten(@body-font-color, 12%), @bg-color);
 
   &.label-primary {
-    .label-variant(@primary-color);
+    .label-variant(@light-color, @primary-color);
   }
 
   &.label-success {
-    .label-variant(@control-color-success);
+    .label-variant(@light-color, @control-color-success);
   }
 
   &.label-warning {
-    .label-variant(@control-color-warning);
+    .label-variant(@light-color, @control-color-warning);
   }
 
-  &.label-danger {
-    .label-variant(@control-color-danger);
+  &.label-error {
+    .label-variant(@light-color, @control-color-error);
   }
 }
diff --git a/src/layout.less b/src/layout.less
index a868ca7..2e4426b 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -39,6 +39,7 @@
 }
 .column {
   flex: 1;
+  max-width: 100%;
   padding: @layout-padding;
 
   &.col-12,
diff --git a/src/meters.less b/src/meters.less
index 57d2551..bf4d0b9 100644
--- a/src/meters.less
+++ b/src/meters.less
@@ -33,7 +33,7 @@
   }
 
   &::-webkit-meter-even-less-good-value {
-    background: @control-color-danger;
+    background: @control-color-error;
   }
 
   &::-moz-meter-bar,
@@ -52,6 +52,6 @@
   }
 
   &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-    background: @control-color-danger;
+    background: @control-color-error;
   }
 }
diff --git a/src/mixins.less b/src/mixins.less
index a2ab1ae..84af7a4 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -6,16 +6,24 @@
     display: table;
   }
 }
+
+// Component focus shadow
 .control-shadow(@color: @primary-color) {
   box-shadow: 0 0 0 .2rem fade(@color, 15%);
 }
+
+// Component transition
 .control-transition() {
   transition: all .2s ease;
 }
+
+// Toast variant
 .toast-variant(@color: @dark-color) {
   background: fade(@color, 90%);
   border-color: @color;
 }
+
+// Label base style
 .label-base() {
   border-radius: @border-radius;
   display: inline-block;
@@ -23,10 +31,12 @@
   padding: .3rem .4rem;
   vertical-align: baseline;
 }
-.label-variant(@color) {
-  background: @color;
-  color: @light-color;
+
+.label-variant(@color: @light-color, @bg-color: @primary-color) {
+  background: @bg-color;
+  color: @color;
 }
+
 .shadow-variant(@offset) {
   box-shadow: 0 @offset (@offset+.1rem)*2 fade(@dark-color, 30%);
 }
diff --git a/src/panels.less b/src/panels.less
index 09a7c74..e361e25 100644
--- a/src/panels.less
+++ b/src/panels.less
@@ -26,6 +26,6 @@
   }
 
   .panel-subtitle {
-    opacity: .5;
+    color: lighten(@body-font-color, 40%);
   }
 }
diff --git a/src/tables.less b/src/tables.less
index 17c70f3..fdb04c9 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -40,7 +40,7 @@
   }
 
   th {
-    border-bottom: @border-width + .1rem solid @gray-color-dark;
+    border-bottom: @border-width solid @gray-color-dark;
     padding: 1.5rem 1rem;
   }
 }
diff --git a/src/tiles.less b/src/tiles.less
index cf1758d..1214064 100644
--- a/src/tiles.less
+++ b/src/tiles.less
@@ -18,11 +18,11 @@
     }
   }
   .tile-title {
-    font-weight: 500;
+    line-height: 2rem;
   }
   .tile-subtitle {
+    color: lighten(@body-font-color, 40%);
     line-height: 2rem;
-    opacity: .5;
   }
 
   &.tile-centered {
@@ -34,6 +34,7 @@
 
     .tile-title,
     .tile-subtitle {
+      margin-bottom: 0;
       .text-ellipsis;
     }
   }
diff --git a/src/timelines.less b/src/timelines.less
new file mode 100644
index 0000000..277d10c
--- /dev/null
+++ b/src/timelines.less
@@ -0,0 +1,55 @@
+// Timelines
+.timeline {
+  .timeline-item {
+    display: flex;
+    margin-bottom: 2.4rem;
+    position: relative;
+    &::before {
+      background: @border-color;
+      content: "";
+      height: 100%;
+      left: 1.1rem;
+      position: absolute;
+      top: 2.4rem;
+      width: .2rem;
+    }
+
+    .timeline-left {
+      flex: 0 0 auto;
+    }
+
+    .timeline-content {
+      flex: 1 1 auto;
+      padding: .2rem 0 .2rem @layout-padding-lg;
+    }
+
+    .timeline-icon {
+      border-radius: 50%;
+      color: @light-color;
+      display: block;
+      height: 2.4rem;
+      text-align: center;
+      width: 2.4rem;
+      &::before {
+        border: .2rem solid @primary-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: .8rem;
+        left: .8rem;
+        position: absolute;
+        top: .8rem;
+        width: .8rem;
+      }
+
+      &.icon-lg {
+        background: @primary-color;
+        font-size: 1.6rem;
+        line-height: 2rem;
+        &::before {
+          content: none;
+        }
+      }
+    }
+  }
+}
diff --git a/src/toasts.less b/src/toasts.less
index 68c9ffc..ac7c4a4 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -16,8 +16,12 @@
     .toast-variant(@control-color-success);
   }
 
-  &.toast-danger {
-    .toast-variant(@control-color-danger);
+  &.toast-warning {
+    .toast-variant(@control-color-warning);
+  }
+
+  &.toast-error {
+    .toast-variant(@control-color-error);
   }
 
   a {
diff --git a/src/typography.less b/src/typography.less
index 70043a7..246fef7 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -88,14 +88,12 @@ dl {
   }
 }
 mark {
-  background: @highlight-color;
-  color: @body-font-color;
   .label-base();
+  .label-variant(@body-font-color, @highlight-color);
 }
 kbd {
-  background: @dark-color;
-  color: @light-color;
   .label-base();
+  .label-variant(@light-color, @dark-color);
 }
 abbr[title] {
   border-bottom: .1rem dotted;
diff --git a/src/variables.less b/src/variables.less
index 9547cfd..42e9aaf 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -22,7 +22,6 @@
 @control-min-width: 18rem;
 @border-radius: .2rem;
 @border-width: .1rem;
-@icon-border-width: .2rem;
 
 // Colors
 // Core colors
@@ -52,7 +51,7 @@
 // Control colors
 @control-color-success: #32b643;
 @control-color-warning: #ffb700;
-@control-color-danger: #e85600;
+@control-color-error: #e85600;
 
 // Other colors
 @code-color: #e06870;