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

0.5.6

1 files changed, 58 insertions, 646 deletions

diff --git a/docs/dist/spectre-rtl.css b/docs/dist/spectre-rtl.css
index cb8042f..0fe5bbb 100644
--- a/docs/dist/spectre-rtl.css
+++ b/docs/dist/spectre-rtl.css
@@ -1,5 +1,5 @@
 /*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre */
-/*! Spectre.css v0.5.5 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css v0.5.6 | MIT License | github.com/picturepan2/spectre */
 /* Manually forked from Normalize.css */
 /* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 /** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
@@ -397,9 +397,10 @@ kbd {
 
 mark {
   background: #ffe9b3;
+  border-bottom: .05rem solid #ffd367;
   border-radius: .1rem;
   color: #3b4351;
-  padding: .05rem;
+  padding: .05rem .1rem 0;
 }
 
 blockquote {
@@ -567,7 +568,7 @@ html:lang(ko),
   padding: .25rem .4rem;
   text-align: center;
   text-decoration: none;
-  transition: all .2s ease;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -740,17 +741,19 @@ html:lang(ko),
   background: transparent;
   border: 0;
   color: currentColor;
-  height: .8rem;
+  height: 1rem;
   line-height: .8rem;
   margin-left: .2rem;
   margin-right: -2px;
   opacity: 1;
-  padding: 0;
+  padding: .1rem;
   text-decoration: none;
-  width: .8rem;
+  width: 1rem;
 }
 
+.btn.btn-clear:focus,
 .btn.btn-clear:hover {
+  background: rgba(247, 248, 249, .5);
   opacity: .95;
 }
 
@@ -850,7 +853,7 @@ legend {
   outline: none;
   padding: .25rem .4rem;
   position: relative;
-  transition: all .2s ease;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
   width: 100%;
 }
 
@@ -1045,8 +1048,8 @@ textarea.form-input {
   border: .05rem solid #bcc3ce;
   cursor: pointer;
   display: inline-block;
-  position: absolute; 
-  transition: all .2s ease;
+  position: absolute;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
 }
 
 .form-checkbox.input-sm,
@@ -1153,7 +1156,7 @@ textarea.form-input {
   left: 0;
   position: absolute;
   top: 0;
-  transition: all .2s ease;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
   width: .8rem;
 }
 
@@ -1311,7 +1314,7 @@ textarea.form-input {
 }
 
 .form-input:not(:placeholder-shown):invalid:focus {
-  background: #ff701c; 
+  background: #fffaf7; 
   box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2);
 }
 
@@ -1953,6 +1956,31 @@ video.video-responsive::before {
   }
 }
 
+.hero {
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+}
+
+.hero.hero-sm {
+  padding-bottom: 2rem;
+  padding-top: 2rem;
+}
+
+.hero.hero-lg {
+  padding-bottom: 8rem;
+  padding-top: 8rem;
+}
+
+.hero .hero-body {
+  padding: .4rem;
+}
+
 .navbar {
   align-items: stretch;
   display: flex;
@@ -2008,14 +2036,14 @@ video.video-responsive::before {
 }
 
 .accordion .accordion-header .icon {
-  transition: all .2s ease;
+  transition: transform .25s;
 }
 
 .accordion .accordion-body {
   margin-bottom: .4rem;
   max-height: 0;
   overflow: hidden;
-  transition: max-height .2s ease;
+  transition: max-height .25s;
 }
 
 summary.accordion-header::-webkit-details-marker {
@@ -2341,6 +2369,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .chip .btn-clear {
+  border-radius: 50%;
   transform: scale(.75);
 }
 
@@ -2687,7 +2716,7 @@ summary.accordion-header::-webkit-details-marker {
   position: absolute;
   top: 0;
   transform: translate(-50%, -50%) scale(0);
-  transition: transform .2s ease;
+  transition: transform .2s;
   width: 320px;
   z-index: 300;
 }
@@ -2963,7 +2992,11 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .toast .btn-clear {
-  margin: 4px -2px 4px 4px;
+  margin: .1rem;
+}
+
+.toast p:last-child {
+  margin-bottom: 0;
 }
 
 .tooltip {
@@ -2987,7 +3020,7 @@ summary.accordion-header::-webkit-details-marker {
   position: absolute;
   text-overflow: ellipsis;
   transform: translate(-50%, .4rem);
-  transition: all .2s ease;
+  transition: opacity .2s, transform .2s;
   white-space: pre;
   z-index: 300;
 }
@@ -3360,8 +3393,7 @@ a.text-error:visited {
   width: 1.6rem;
 }
 
-.clearfix::after,
-.container::after {
+.clearfix::after {
   clear: both;
   content: "";
   display: table;
@@ -3660,627 +3692,7 @@ a.text-error:visited {
   word-wrap: break-word;
 }
 
-/*! Spectre.css Icons v0.5.5 | MIT License | github.com/picturepan2/spectre */
-.icon {
-  box-sizing: border-box;
-  display: inline-block;
-  font-size: inherit;
-  font-style: normal;
-  height: 1em;
-  position: relative;
-  text-indent: -9999px;
-  vertical-align: middle;
-  width: 1em;
-}
-
-.icon::before,
-.icon::after {
-  display: block;
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.icon.icon-2x {
-  font-size: 1.6rem;
-}
-
-.icon.icon-3x {
-  font-size: 2.4rem;
-}
-
-.icon.icon-4x {
-  font-size: 3.2rem;
-}
-
-.accordion .icon,
-.btn .icon,
-.toast .icon,
-.menu .icon {
-  vertical-align: -10%;
-}
-
-.btn-lg .icon {
-  vertical-align: -15%;
-}
-
-.icon-arrow-down::before,
-.icon-arrow-left::before,
-.icon-arrow-right::before,
-.icon-arrow-up::before,
-.icon-downward::before,
-.icon-back::before,
-.icon-forward::before,
-.icon-upward::before {
-  border: .1rem solid currentColor;
-  border-bottom: 0;
-  border-right: 0;
-  content: "";
-  height: .65em;
-  width: .65em;
-}
-
-.icon-arrow-down::before {
-  transform: translate(-50%, -75%) rotate(225deg);
-}
-
-.icon-arrow-left::before {
-  transform: translate(-25%, -50%) rotate(-45deg);
-}
-
-.icon-arrow-right::before {
-  transform: translate(-75%, -50%) rotate(135deg);
-}
-
-.icon-arrow-up::before {
-  transform: translate(-50%, -25%) rotate(45deg);
-}
-
-.icon-back::after,
-.icon-forward::after {
-  background: currentColor;
-  content: "";
-  height: .1rem;
-  width: .8em;
-}
-
-.icon-downward::after,
-.icon-upward::after {
-  background: currentColor;
-  content: "";
-  height: .8em;
-  width: .1rem;
-}
-
-.icon-back::after {
-  left: 55%;
-}
-
-.icon-back::before {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-.icon-downward::after {
-  top: 45%;
-}
-
-.icon-downward::before {
-  transform: translate(-50%, -50%) rotate(-135deg);
-}
-
-.icon-forward::after {
-  left: 45%;
-}
-
-.icon-forward::before {
-  transform: translate(-50%, -50%) rotate(135deg);
-}
-
-.icon-upward::after {
-  top: 55%;
-}
-
-.icon-upward::before {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.icon-caret::before {
-  border-left: .3em solid transparent;
-  border-right: .3em solid transparent;
-  border-top: .3em solid currentColor;
-  content: "";
-  height: 0;
-  transform: translate(-50%, -25%);
-  width: 0;
-}
-
-.icon-menu::before {
-  background: currentColor;
-  box-shadow: 0 -.35em, 0 .35em;
-  content: "";
-  height: .1rem;
-  width: 100%;
-}
-
-.icon-apps::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;
-}
-
-.icon-resize-horiz::before,
-.icon-resize-horiz::after,
-.icon-resize-vert::before,
-.icon-resize-vert::after {
-  border: .1rem solid currentColor;
-  border-bottom: 0;
-  border-right: 0;
-  content: "";
-  height: .45em;
-  width: .45em;
-}
-
-.icon-resize-horiz::before,
-.icon-resize-vert::before {
-  transform: translate(-50%, -90%) rotate(45deg);
-}
-
-.icon-resize-horiz::after,
-.icon-resize-vert::after {
-  transform: translate(-50%, -10%) rotate(225deg);
-}
-
-.icon-resize-horiz::before {
-  transform: translate(-90%, -50%) rotate(-45deg);
-}
-
-.icon-resize-horiz::after {
-  transform: translate(-10%, -50%) rotate(135deg);
-}
-
-.icon-more-horiz::before,
-.icon-more-vert::before {
-  background: currentColor;
-  border-radius: 50%;
-  box-shadow: -.4em 0, .4em 0;
-  content: "";
-  height: 3px;
-  width: 3px;
-}
-
-.icon-more-vert::before {
-  box-shadow: 0 -.4em, 0 .4em;
-}
-
-.icon-plus::before,
-.icon-minus::before,
-.icon-cross::before {
-  background: currentColor;
-  content: "";
-  height: .1rem;
-  width: 100%;
-}
-
-.icon-plus::after,
-.icon-cross::after {
-  background: currentColor;
-  content: "";
-  height: 100%;
-  width: .1rem;
-}
-
-.icon-cross::before {
-  width: 100%;
-}
-
-.icon-cross::after {
-  height: 100%;
-}
-
-.icon-cross::before,
-.icon-cross::after {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.icon-check::before {
-  border: .1rem solid currentColor;
-  border-right: 0;
-  border-top: 0;
-  content: "";
-  height: .5em;
-  transform: translate(-50%, -75%) rotate(-45deg); 
-  width: .9em;
-}
-
-.icon-stop {
-  border: .1rem solid currentColor;
-  border-radius: 50%;
-}
-
-.icon-stop::before {
-  background: currentColor;
-  content: "";
-  height: .1rem;
-  transform: translate(-50%, -50%) rotate(45deg);
-  width: 1em;
-}
-
-.icon-shutdown {
-  border: .1rem solid currentColor;
-  border-radius: 50%;
-  border-top-color: transparent;
-}
-
-.icon-shutdown::before {
-  background: currentColor;
-  content: "";
-  height: .5em;
-  top: .1em;
-  width: .1rem;
-}
-
-.icon-refresh::before {
-  border: .1rem solid currentColor;
-  border-radius: 50%;
-  border-right-color: transparent;
-  content: "";
-  height: 1em;
-  width: 1em;
-}
-
-.icon-refresh::after {
-  border: .2em solid currentColor;
-  border-left-color: transparent;
-  border-top-color: transparent;
-  content: "";
-  height: 0;
-  left: 80%;
-  top: 20%;
-  width: 0;
-}
-
-.icon-search::before {
-  border: .1rem solid currentColor;
-  border-radius: 50%;
-  content: "";
-  height: .75em;
-  left: 5%;
-  top: 5%;
-  transform: translate(0, 0) rotate(45deg);
-  width: .75em;
-}
-
-.icon-search::after {
-  background: currentColor;
-  content: "";
-  height: .1rem;
-  left: 80%;
-  top: 80%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  width: .4em;
-}
-
-.icon-edit::before {
-  border: .1rem solid currentColor;
-  content: "";
-  height: .4em;
-  transform: translate(-40%, -60%) rotate(-45deg);
-  width: .85em;
-}
-
-.icon-edit::after {
-  border: .15em solid currentColor;
-  border-right-color: transparent;
-  border-top-color: transparent;
-  content: "";
-  height: 0;
-  left: 5%;
-  top: 95%;
-  transform: translate(0, -100%);
-  width: 0;
-}
-
-.icon-delete::before {
-  border: .1rem solid currentColor;
-  border-bottom-left-radius: .1rem;
-  border-bottom-right-radius: .1rem;
-  border-top: 0;
-  content: "";
-  height: .75em;
-  top: 60%;
-  width: .75em;
-}
-
-.icon-delete::after {
-  background: currentColor;
-  box-shadow: -.25em .2em, .25em .2em;
-  content: "";
-  height: .1rem;
-  top: .05rem;
-  width: .5em;
-}
-
-.icon-share {
-  border: .1rem solid currentColor;
-  border-radius: .1rem;
-  border-right: 0;
-  border-top: 0;
-}
-
-.icon-share::before {
-  border: .1rem solid currentColor;
-  border-left: 0;
-  border-top: 0;
-  content: "";
-  height: .4em;
-  left: 100%;
-  top: .25em;
-  transform: translate(-125%, -50%) rotate(-45deg);
-  width: .4em;
-}
-
-.icon-share::after {
-  border: .1rem solid currentColor;
-  border-bottom: 0;
-  border-radius: 75% 0;
-  border-right: 0;
-  content: "";
-  height: .5em;
-  width: .6em;
-}
-
-.icon-flag::before {
-  background: currentColor;
-  content: "";
-  height: 1em;
-  left: 15%;
-  width: .1rem;
-}
-
-.icon-flag::after {
-  border: .1rem solid currentColor;
-  border-bottom-right-radius: .1rem;
-  border-left: 0;
-  border-top-right-radius: .1rem;
-  content: "";
-  height: .65em;
-  left: 60%;
-  top: 35%;
-  width: .8em;
-}
-
-.icon-bookmark::before {
-  border: .1rem solid currentColor;
-  border-bottom: 0;
-  border-top-left-radius: .1rem;
-  border-top-right-radius: .1rem;
-  content: "";
-  height: .9em;
-  width: .8em;
-}
-
-.icon-bookmark::after {
-  border: .1rem solid currentColor;
-  border-bottom: 0;
-  border-left: 0;
-  border-radius: .1rem;
-  content: "";
-  height: .5em;
-  transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
-  width: .5em;
-}
-
-.icon-download,
-.icon-upload {
-  border-bottom: .1rem solid currentColor;
-}
-
-.icon-download::before,
-.icon-upload::before {
-  border: .1rem solid currentColor;
-  border-bottom: 0;
-  border-right: 0;
-  content: "";
-  height: .5em;
-  transform: translate(-50%, -60%) rotate(-135deg); 
-  width: .5em;
-}
-
-.icon-download::after,
-.icon-upload::after {
-  background: currentColor;
-  content: "";
-  height: .6em;
-  top: 40%;
-  width: .1rem;
-}
-
-.icon-upload::before {
-  transform: translate(-50%, -60%) rotate(45deg);
-}
-
-.icon-upload::after {
-  top: 50%;
-}
-
-.icon-time {
-  border: .1rem solid currentColor;
-  border-radius: 50%;
-}
-
-.icon-time::before {
-  background: currentColor;
-  content: "";
-  height: .4em;
-  transform: translate(-50%, -75%);
-  width: .1rem;
-}
-
-.icon-time::after {
-  background: currentColor;
-  content: "";
-  height: .3em;
-  transform: translate(-50%, -75%) rotate(90deg);
-  transform-origin: 50% 90%;
-  width: .1rem;
-}
-
-.icon-mail::before {
-  border: .1rem solid currentColor;
-  border-radius: .1rem;
-  content: "";
-  height: .8em;
-  width: 1em;
-}
-
-.icon-mail::after {
-  border: .1rem solid currentColor;
-  border-right: 0;
-  border-top: 0;
-  content: "";
-  height: .5em;
-  transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
-  width: .5em;
-}
-
-.icon-people::before {
-  border: .1rem solid currentColor;
-  border-radius: 50%;
-  content: "";
-  height: .45em;
-  top: 25%;
-  width: .45em;
-}
-
-.icon-people::after {
-  border: .1rem solid currentColor;
-  border-radius: 50% 50% 0 0;
-  content: "";
-  height: .4em;
-  top: 75%;
-  width: .9em;
-}
-
-.icon-message {
-  border: .1rem solid currentColor;
-  border-bottom: 0;
-  border-radius: .1rem;
-  border-right: 0;
-}
-
-.icon-message::before {
-  border: .1rem solid currentColor;
-  border-bottom-right-radius: .1rem;
-  border-left: 0;
-  border-top: 0;
-  content: "";
-  height: .8em;
-  left: 65%;
-  top: 40%;
-  width: .7em;
-}
-
-.icon-message::after {
-  background: currentColor;
-  border-radius: .1rem;
-  content: "";
-  height: .3em;
-  left: 10%;
-  top: 100%;
-  transform: translate(0, -90%) rotate(45deg);
-  width: .1rem;
-}
-
-.icon-photo {
-  border: .1rem solid currentColor;
-  border-radius: .1rem;
-}
-
-.icon-photo::before {
-  border: .1rem solid currentColor;
-  border-radius: 50%;
-  content: "";
-  height: .25em;
-  left: 35%;
-  top: 35%;
-  width: .25em;
-}
-
-.icon-photo::after {
-  border: .1rem solid currentColor;
-  border-bottom: 0;
-  border-left: 0;
-  content: "";
-  height: .5em;
-  left: 60%;
-  transform: translate(-50%, 25%) rotate(-45deg);
-  width: .5em;
-}
-
-.icon-link::before,
-.icon-link::after {
-  border: .1rem solid currentColor;
-  border-radius: 5em 0 0 5em;
-  border-right: 0;
-  content: "";
-  height: .5em;
-  width: .75em;
-}
-
-.icon-link::before {
-  transform: translate(-70%, -45%) rotate(-45deg);
-}
-
-.icon-link::after {
-  transform: translate(-30%, -55%) rotate(135deg);
-}
-
-.icon-location::before {
-  border: .1rem solid currentColor;
-  border-radius: 50% 50% 50% 0;
-  content: "";
-  height: .8em;
-  transform: translate(-50%, -60%) rotate(-45deg);
-  width: .8em;
-}
-
-.icon-location::after {
-  border: .1rem solid currentColor;
-  border-radius: 50%;
-  content: "";
-  height: .2em;
-  transform: translate(-50%, -80%);
-  width: .2em;
-}
-
-.icon-emoji {
-  border: .1rem solid currentColor;
-  border-radius: 50%;
-}
-
-.icon-emoji::before {
-  border-radius: 50%;
-  box-shadow: -.17em -.15em, .17em -.15em;
-  content: "";
-  height: .1em;
-  width: .1em;
-}
-
-.icon-emoji::after {
-  border: .1rem solid currentColor;
-  border-bottom-color: transparent;
-  border-radius: 50%;
-  border-right-color: transparent;
-  content: "";
-  height: .5em;
-  transform: translate(-50%, -40%) rotate(-135deg);
-  width: .5em;
-}
-
-/*! Spectre.css Experimentals v0.5.5 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Experimentals v0.5.6 | MIT License | github.com/picturepan2/spectre */
 .form-autocomplete {
   position: relative;
 }
@@ -4403,7 +3815,7 @@ a.text-error:visited {
   position: relative;
   text-align: center;
   text-decoration: none;
-  transition: all .2s ease;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
   vertical-align: middle;
   white-space: nowrap;
   width: 1.4rem;
@@ -4600,7 +4012,7 @@ a.text-error:visited {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  transition: all .4s ease;
+  transition: all .4s;
   z-index: 100;
 }
 
@@ -4921,7 +4333,7 @@ a.text-error:visited {
   right: 0;
   top: 0;
   transform: translateX(100%); 
-  transition: transform .25s ease;
+  transition: transform .25s;
   z-index: 200;
 }
 
@@ -5013,7 +4425,7 @@ a.text-error:visited {
   text-shadow: 0 0 20px rgba(48, 55, 66, .75);
   top: 0;
   transform: translateZ(50px) scale(.95);
-  transition: all .4s ease;
+  transition: transform .4s;
   width: 100%;
   z-index: 1;
 }
@@ -5190,7 +4602,7 @@ a.text-error:visited {
   border-radius: 50%;
   height: .6rem;
   margin-top: -.25rem;
-  transition: transform .2s ease;
+  transition: transform .2s;
   width: .6rem;
 }
 
@@ -5199,7 +4611,7 @@ a.text-error:visited {
   border: 0;
   border-radius: 50%;
   height: .6rem;
-  transition: transform .2s ease;
+  transition: transform .2s;
   width: .6rem;
 }
 
@@ -5208,7 +4620,7 @@ a.text-error:visited {
   border: 0;
   border-radius: 50%;
   height: .6rem;
-  transition: transform .2s ease;
+  transition: transform .2s;
   width: .6rem;
 }