Merge pull request #534 from picturepan2/0.5.6 v0.5.6

0.5.6

24 files changed, 83 insertions, 77 deletions

diff --git a/src/_accordions.scss b/src/_accordions.scss
index 4c69686..fd21585 100644
--- a/src/_accordions.scss
+++ b/src/_accordions.scss
@@ -18,7 +18,7 @@
     padding: $unit-1 $unit-2;
 
     .icon {
-      transition: all .2s ease;
+      transition: transform .25s;
     }
   }
 
@@ -26,7 +26,7 @@
     margin-bottom: $layout-spacing;
     max-height: 0;
     overflow: hidden;
-    transition: max-height .2s ease;
+    transition: max-height .25s;
   }
 }
 
diff --git a/src/_buttons.scss b/src/_buttons.scss
index 7de387a..9158f0f 100644
--- a/src/_buttons.scss
+++ b/src/_buttons.scss
@@ -1,6 +1,5 @@
 // Buttons
 .btn {
-  @include control-transition();
   appearance: none;
   background: $bg-color-light;
   border: $border-width solid $primary-color;
@@ -15,6 +14,7 @@
   padding: $control-padding-y $control-padding-x;
   text-align: center;
   text-decoration: none;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
@@ -134,16 +134,18 @@
     background: transparent;
     border: 0;
     color: currentColor;
-    height: $unit-4;
+    height: $unit-5;
     line-height: $unit-4;
     margin-left: $unit-1;
     margin-right: -2px;
     opacity: 1;
-    padding: 0;
+    padding: $unit-h;
     text-decoration: none;
-    width: $unit-4;
+    width: $unit-5;
 
+    &:focus,
     &:hover {
+      background: rgba($bg-color, .5);
       opacity: .95;
     }
 
diff --git a/src/_calendars.scss b/src/_calendars.scss
index ff00145..1e9fd15 100644
--- a/src/_calendars.scss
+++ b/src/_calendars.scss
@@ -45,7 +45,6 @@
     padding: $unit-1;
 
     .date-item {
-      @include control-transition();
       appearance: none;
       background: transparent;
       border: $border-width solid transparent;
@@ -60,6 +59,7 @@
       position: relative;
       text-align: center;
       text-decoration: none;
+      transition: background .2s, border .2s, box-shadow .2s, color .2s;
       vertical-align: middle;
       white-space: nowrap;
       width: $unit-7;
diff --git a/src/_carousels.scss b/src/_carousels.scss
index 55dc31c..5b4eaf5 100644
--- a/src/_carousels.scss
+++ b/src/_carousels.scss
@@ -44,7 +44,7 @@
       opacity: 0;
       position: absolute;
       top: 50%;
-      transition: all .4s ease;
+      transition: all .4s;
       transform: translateY(-50%);
       z-index: $zindex-1;
     }
diff --git a/src/_chips.scss b/src/_chips.scss
index f89a362..6729c56 100644
--- a/src/_chips.scss
+++ b/src/_chips.scss
@@ -27,6 +27,7 @@
   }
 
   .btn-clear {
+    border-radius: 50%;
     transform: scale(.75);
   }
 }
diff --git a/src/_forms.scss b/src/_forms.scss
index 68de202..2c60dfc 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -34,7 +34,6 @@ legend {
 
 // Form element: Input
 .form-input {
-  @include control-transition();
   appearance: none;
   background: $bg-color-light;
   background-image: none;
@@ -49,6 +48,7 @@ legend {
   outline: none;
   padding: $control-padding-y $control-padding-x;
   position: relative;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
   width: 100%;
   &:focus {
     @include control-shadow();
@@ -221,11 +221,11 @@ textarea.form-input {
   }
 
   .form-icon {
-    @include control-transition();
     border: $border-width solid $border-color-dark;
     cursor: pointer;
     display: inline-block;
     position: absolute;
+    transition: background .2s, border .2s, box-shadow .2s, color .2s;
   }
 
   // Input checkbox, radio and switch sizes
@@ -331,7 +331,6 @@ textarea.form-input {
     top: ($control-size-sm - $unit-4) / 2 - $border-width;
     width: $unit-8;
     &::before {
-      @include control-transition();
       background: $bg-color-light;
       border-radius: 50%;
       content: "";
@@ -340,6 +339,7 @@ textarea.form-input {
       left: 0;
       position: absolute;
       top: 0;
+      transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
       width: $unit-4;
     }
   }
@@ -486,7 +486,7 @@ textarea.form-input {
       border-color: $error-color;
       &:focus {
         @include control-shadow($error-color);
-        background: lighten($error-color, 10%);
+        background: lighten($error-color, 53%);
       }
 
       & + .form-input-hint {
diff --git a/src/_hero.scss b/src/_hero.scss
new file mode 100644
index 0000000..0044461
--- /dev/null
+++ b/src/_hero.scss
@@ -0,0 +1,22 @@
+// Hero
+.hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+
+  &.hero-sm {
+    padding-bottom: 2rem;
+    padding-top: 2rem;
+  }
+
+  &.hero-lg {
+    padding-bottom: 8rem;
+    padding-top: 8rem;
+  }
+
+  .hero-body {
+    padding: $layout-spacing;
+  }
+}
\ No newline at end of file
diff --git a/src/_layout.scss b/src/_layout.scss
index 83e2c18..b416e6b 100644
--- a/src/_layout.scss
+++ b/src/_layout.scss
@@ -5,7 +5,6 @@
   padding-left: $layout-spacing;
   padding-right: $layout-spacing;
   width: 100%;
-  @extend .clearfix;
 
   $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
 
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 54bed34..d3a28d5 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -7,5 +7,4 @@
 @import "mixins/position";
 @import "mixins/shadow";
 @import "mixins/text";
-@import "mixins/toast";
-@import "mixins/transition";
+@import "mixins/toast";
\ No newline at end of file
diff --git a/src/_off-canvas.scss b/src/_off-canvas.scss
index 32cefb6..f3b8b9f 100644
--- a/src/_off-canvas.scss
+++ b/src/_off-canvas.scss
@@ -28,7 +28,7 @@ $off-canvas-breakpoint: $size-lg !default;
     overflow-y: auto;
     position: fixed;
     top: 0;
-    transition: transform .25s ease;
+    transition: transform .25s;
     z-index: $zindex-2;
     @if $rtl == true {
       right: 0;
diff --git a/src/_parallax.scss b/src/_parallax.scss
index acc05be..ea244e5 100644
--- a/src/_parallax.scss
+++ b/src/_parallax.scss
@@ -52,7 +52,7 @@ $parallax-fade-color: rgba(255, 255, 255, .35) !default;
     text-shadow: 0 0 20px rgba($dark-color, .75);
     top: 0;
     transform: translateZ($parallax-offset-z) scale($parallax-scale);
-    transition: all .4s ease;
+    transition: transform .4s;
     width: 100%;
     z-index: $zindex-0;
   }
diff --git a/src/_popovers.scss b/src/_popovers.scss
index 6fbac0f..35b6bcd 100644
--- a/src/_popovers.scss
+++ b/src/_popovers.scss
@@ -10,7 +10,7 @@
     position: absolute;
     top: 0;
     transform: translate(-50%, -50%) scale(0);
-    transition: transform .2s ease;
+    transition: transform .2s;
     width: $control-width-sm;
     z-index: $zindex-3;
   }
diff --git a/src/_sliders.scss b/src/_sliders.scss
index 01576b9..3ff38e8 100644
--- a/src/_sliders.scss
+++ b/src/_sliders.scss
@@ -26,7 +26,7 @@
     border-radius: 50%;
     height: $unit-3;
     margin-top: -($unit-3 - $unit-h) / 2;
-    transition: transform .2s ease;
+    transition: transform .2s;
     width: $unit-3;
   }
   &::-moz-range-thumb {
@@ -34,7 +34,7 @@
     border: 0;
     border-radius: 50%;
     height: $unit-3;
-    transition: transform .2s ease;
+    transition: transform .2s;
     width: $unit-3;
   }
   &::-ms-thumb {
@@ -42,7 +42,7 @@
     border: 0;
     border-radius: 50%;
     height: $unit-3;
-    transition: transform .2s ease;
+    transition: transform .2s;
     width: $unit-3;
   }
 
diff --git a/src/_tables.scss b/src/_tables.scss
index 732718c..656c03e 100644
--- a/src/_tables.scss
+++ b/src/_tables.scss
@@ -38,7 +38,7 @@
     }
   }
 
-  // Tables with horizontal scrollbar
+  // Scollable tables
   &.table-scroll {
     display: block;
     overflow-x: auto;
diff --git a/src/_toasts.scss b/src/_toasts.scss
index 61e7c5f..fef15f8 100644
--- a/src/_toasts.scss
+++ b/src/_toasts.scss
@@ -37,6 +37,12 @@
   }
 
   .btn-clear {
-    margin: 4px -2px 4px 4px;
+    margin: $unit-h;
+  }
+
+  p {
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 }
diff --git a/src/_tooltips.scss b/src/_tooltips.scss
index d6929e1..8693b67 100644
--- a/src/_tooltips.scss
+++ b/src/_tooltips.scss
@@ -18,7 +18,7 @@
     position: absolute;
     text-overflow: ellipsis;
     transform: translate(-50%, $unit-2);
-    transition: all .2s ease;
+    transition: opacity .2s, transform .2s;
     white-space: pre;
     z-index: $zindex-3;
   }
diff --git a/src/_typography.scss b/src/_typography.scss
index d15d39e..bbeb876 100644
--- a/src/_typography.scss
+++ b/src/_typography.scss
@@ -71,8 +71,9 @@ kbd {
 
 mark {
   @include label-variant($body-font-color, $highlight-color);
+  border-bottom: $unit-o solid darken($highlight-color, 15%);
   border-radius: $border-radius;
-  padding: .05rem;
+  padding: $unit-o $unit-h 0;
 }
 
 // Blockquote
diff --git a/src/_variables.scss b/src/_variables.scss
index 0af2bf5..e2cf715 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,5 +1,5 @@
 // Core variables
-$version: "0.5.5";
+$version: "0.5.6";
 
 // Core features
 $rtl: false !default;
diff --git a/src/icons/_icons-action.scss b/src/icons/_icons-action.scss
index 807f05e..1b952ea 100644
--- a/src/icons/_icons-action.scss
+++ b/src/icons/_icons-action.scss
@@ -1,4 +1,3 @@
-
 // Icon resize
 .icon-resize-horiz,
 .icon-resize-vert {
@@ -7,7 +6,6 @@
     border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
-    content: "";
     height: .45em;
     width: .45em;
   }
@@ -35,7 +33,6 @@
     background: currentColor;
     box-shadow: -.4em 0, .4em 0;
     border-radius: 50%;
-    content: "";
     height: 3px;
     width: 3px;
   }
@@ -53,7 +50,6 @@
 .icon-cross {
   &::before {
     background: currentColor;
-    content: "";
     height: $icon-border-width;
     width: 100%;
   }
@@ -63,7 +59,6 @@
 .icon-cross {
   &::after {
     background: currentColor;
-    content: "";
     height: 100%;
     width: $icon-border-width;
   }
@@ -88,7 +83,6 @@
     border: $icon-border-width solid currentColor;
     border-right: 0;
     border-top: 0;
-    content: "";
     height: .5em;
     width: .9em;
     transform: translate(-50%, -75%) rotate(-45deg);
@@ -101,7 +95,6 @@
   border-radius: 50%;
   &::before {
     background: currentColor;
-    content: "";
     height: $icon-border-width;
     transform: translate(-50%, -50%) rotate(45deg);
     width: 1em;
@@ -128,7 +121,6 @@
     border: $icon-border-width solid currentColor;
     border-radius: 50%;
     border-right-color: transparent;
-    content: "";
     height: 1em;
     width: 1em;
   }
@@ -136,7 +128,6 @@
     border: .2em solid currentColor;
     border-top-color: transparent;
     border-left-color: transparent;
-    content: "";
     height: 0;
     left: 80%;
     top: 20%;
@@ -149,7 +140,6 @@
   &::before {
     border: $icon-border-width solid currentColor;
     border-radius: 50%;
-    content: "";
     height: .75em;
     left: 5%;
     top: 5%;
@@ -158,7 +148,6 @@
   }
   &::after {
     background: currentColor;
-    content: "";
     height: $icon-border-width;
     left: 80%;
     top: 80%;
@@ -171,7 +160,6 @@
 .icon-edit {
   &::before {
     border: $icon-border-width solid currentColor;
-    content: "";
     height: .4em;
     transform: translate(-40%, -60%) rotate(-45deg);
     width: .85em;
@@ -180,7 +168,6 @@
     border: .15em solid currentColor;
     border-top-color: transparent;
     border-right-color: transparent;
-    content: "";
     height: 0;
     left: 5%;
     top: 95%;
@@ -196,7 +183,6 @@
     border-bottom-left-radius: $border-radius;
     border-bottom-right-radius: $border-radius;
     border-top: 0;
-    content: "";
     height: .75em;
     top: 60%;
     width: .75em;
@@ -204,7 +190,6 @@
   &::after {
     background: currentColor;
     box-shadow: -.25em .2em, .25em .2em;
-    content: "";
     height: $icon-border-width;
     top: $icon-border-width/2;
     width: .5em;
@@ -221,7 +206,6 @@
     border: $icon-border-width solid currentColor;
     border-left: 0;
     border-top: 0;
-    content: "";
     height: .4em;
     left: 100%;
     top: .25em;
@@ -233,7 +217,6 @@
     border-bottom: 0;
     border-right: 0;
     border-radius: 75% 0;
-    content: "";
     height: .5em;
     width: .6em;
   }
@@ -243,7 +226,6 @@
 .icon-flag {
   &::before {
     background: currentColor;
-    content: "";
     height: 1em;
     left: 15%;
     width: $icon-border-width;
@@ -253,7 +235,6 @@
     border-bottom-right-radius: $border-radius;
     border-left: 0;
     border-top-right-radius: $border-radius;
-    content: "";
     height: .65em;
     top: 35%;
     left: 60%;
@@ -268,7 +249,6 @@
     border-bottom: 0;
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
-    content: "";
     height: .9em;
     width: .8em;
   }
@@ -277,7 +257,6 @@
     border-bottom: 0;
     border-left: 0;
     border-radius: $border-radius;
-    content: "";
     height: .5em;
     transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
     width: .5em;
@@ -292,14 +271,12 @@
     border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
-    content: "";
     height: .5em;
     width: .5em;
     transform: translate(-50%, -60%) rotate(-135deg);
   }
   &::after {
     background: currentColor;
-    content: "";
     height: .6em;
     top: 40%;
     width: $icon-border-width;
@@ -314,3 +291,25 @@
     top: 50%;
   }
 }
+
+// Icon copy
+.icon-copy {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    border-right: 0;
+    border-bottom: 0;
+    height: .8em;
+    left: 40%;
+    top: 35%;
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    height: .8em;
+    left: 60%;
+    top: 60%;
+    width: .8em;
+  }
+}
\ No newline at end of file
diff --git a/src/icons/_icons-core.scss b/src/icons/_icons-core.scss
index 577024d..9a67ae4 100644
--- a/src/icons/_icons-core.scss
+++ b/src/icons/_icons-core.scss
@@ -15,6 +15,7 @@ $icon-prefix: "icon";
   width: 1em;
   &::before,
   &::after {
+    content: "";
     display: block;
     left: 50%;
     position: absolute;
diff --git a/src/icons/_icons-navigation.scss b/src/icons/_icons-navigation.scss
index 7d7fcd3..92ab231 100644
--- a/src/icons/_icons-navigation.scss
+++ b/src/icons/_icons-navigation.scss
@@ -11,7 +11,6 @@
     border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
-    content: "";
     height: .65em;
     width: .65em;
   }
@@ -45,7 +44,6 @@
 .icon-forward {
   &::after {
     background: currentColor;
-    content: "";
     height: $icon-border-width;
     width: .8em;
   }
@@ -55,7 +53,6 @@
 .icon-upward {
   &::after {
     background: currentColor;
-    content: "";
     height: .8em;
     width: $icon-border-width;
   }
@@ -103,7 +100,6 @@
     border-top: .3em solid currentColor;
     border-right: .3em solid transparent;
     border-left: .3em solid transparent;
-    content: "";
     height: 0;
     transform: translate(-50%, -25%);
     width: 0;
@@ -115,7 +111,6 @@
   &::before {
     background: currentColor;
     box-shadow: 0 -.35em, 0 .35em;
-    content: "";
     height: $icon-border-width;
     width: 100%;
   }
@@ -126,7 +121,6 @@
   &::before {
     background: currentColor;
     box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
-    content: "";
     height: 3px;
     width: 3px;
   }
diff --git a/src/icons/_icons-object.scss b/src/icons/_icons-object.scss
index 746d25b..00597d8 100644
--- a/src/icons/_icons-object.scss
+++ b/src/icons/_icons-object.scss
@@ -4,14 +4,12 @@
   border-radius: 50%;
   &::before {
     background: currentColor;
-    content: "";
     height: .4em;
     transform: translate(-50%, -75%);
     width: $icon-border-width;
   }
   &::after {
     background: currentColor;
-    content: "";
     height: .3em;
     transform: translate(-50%, -75%) rotate(90deg);
     transform-origin: 50% 90%;
@@ -24,7 +22,6 @@
   &::before {
     border: $icon-border-width solid currentColor;
     border-radius: $border-radius;
-    content: "";
     height: .8em;
     width: 1em;
   }
@@ -32,7 +29,6 @@
     border: $icon-border-width solid currentColor;
     border-right: 0;
     border-top: 0;
-    content: "";
     height: .5em;
     transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
     width: .5em;
@@ -44,7 +40,6 @@
   &::before {
     border: $icon-border-width solid currentColor;
     border-radius: 50%;
-    content: "";
     height: .45em;
     top: 25%;
     width: .45em;
@@ -52,7 +47,6 @@
   &::after {
     border: $icon-border-width solid currentColor;
     border-radius: 50% 50% 0 0;
-    content: "";
     height: .4em;
     top: 75%;
     width: .9em;
@@ -70,7 +64,6 @@
     border-bottom-right-radius: $border-radius;
     border-left: 0;
     border-top: 0;
-    content: "";
     height: .8em;
     left: 65%;
     top: 40%;
@@ -79,7 +72,6 @@
   &::after {
     background: currentColor;
     border-radius: $border-radius;
-    content: "";
     height: .3em;
     left: 10%;
     top: 100%;
@@ -95,7 +87,6 @@
   &::before {
     border: $icon-border-width solid currentColor;
     border-radius: 50%;
-    content: "";
     height: .25em;
     left: 35%;
     top: 35%;
@@ -105,7 +96,6 @@
     border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-left: 0;
-    content: "";
     height: .5em;
     left: 60%;
     transform: translate(-50%, 25%) rotate(-45deg);
@@ -120,7 +110,6 @@
     border: $icon-border-width solid currentColor;
     border-radius: 5em 0 0 5em;
     border-right: 0;
-    content: "";
     height: .5em;
     width: .75em;
   }
@@ -137,7 +126,6 @@
   &::before {
     border: $icon-border-width solid currentColor;
     border-radius: 50% 50% 50% 0;
-    content: "";
     height: .8em;
     transform: translate(-50%, -60%) rotate(-45deg);
     width: .8em;
@@ -145,7 +133,6 @@
   &::after {
     border: $icon-border-width solid currentColor;
     border-radius: 50%;
-    content: "";
     height: .2em;
     transform: translate(-50%, -80%);
     width: .2em;
@@ -158,17 +145,15 @@
   border-radius: 50%;
   &::before {
     border-radius: 50%;
-    box-shadow: -.17em -.15em, .17em -.15em;
-    content: "";
-    height: .1em;
-    width: .1em;
+    box-shadow: -.17em -.1em, .17em -.1em;
+    height: .15em;
+    width: .15em;
   }
   &::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;
diff --git a/src/mixins/_transition.scss b/src/mixins/_transition.scss
deleted file mode 100644
index 0b7497b..0000000
--- a/src/mixins/_transition.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Component transition
-@mixin control-transition() {
-  transition: all .2s ease;
-}
diff --git a/src/spectre.scss b/src/spectre.scss
index c0d9001..cff1fde 100644
--- a/src/spectre.scss
+++ b/src/spectre.scss
@@ -19,6 +19,7 @@
 
 // Layout
 @import "layout";
+@import "hero";
 @import "navbar";
 
 // Components