Visual style update

docs/components.html

@@ -1349,12 +1349,12 @@ <h4><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h4>
                 <li class="tab-item active">
                   <a href="#tabs">
                     Music
+                    <button class="btn btn-clear"></button>
                   </a>
                 </li>
                 <li class="tab-item">
                   <a href="#tabs">
                     Playlists
-                    <button class="btn btn-clear"></button>
                   </a>
                 </li>
                 <li class="tab-item">
@@ -1493,13 +1493,13 @@ <h4><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h4>
                 <li class="page-item page-prev">
                   <a href="#pagination">
                     <p class="page-item-subtitle">Previous</p>
-                    <h3 class="page-item-title">Getting started</h3>
+                    <h4 class="page-item-title">Getting started</h4>
                   </a>
                 </li>
                 <li class="page-item page-next">
                   <a href="#pagination">
                     <p class="page-item-subtitle">Next</p>
-                    <h3 class="page-item-title">Layout</h3>
+                    <h4 class="page-item-title">Layout</h4>
                   </a>
                 </li>
               </ul>
@@ -1840,6 +1840,7 @@ <h4><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h4>
 &lt;<span class="tag">/div</span>&gt;
 </code></pre>
 
+          <header class="text-center"><h4>Compact tiles</h4></header>
           <section class="notes">
             <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p>
             <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p>

docs/dist/spectre-exp.css

@@ -78,7 +78,7 @@
   color: #5764c6;
 }
 .calendar .calendar-date .date-item:focus {
-  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .1);
 }
 .calendar .calendar-date .date-item:focus,
 .calendar .calendar-date .date-item:hover {
@@ -723,7 +723,7 @@
   width: 100%;
 }
 .slider:focus {
-  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .1);
   outline: none;
 }
 .slider::-webkit-slider-thumb {

docs/dist/spectre.css

@@ -403,7 +403,7 @@ a {
   text-decoration: none;
 }
 a:focus {
-  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .1);
 }
 a:focus,
 a:hover,
@@ -452,6 +452,29 @@ u {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
+abbr[title] {
+  border-bottom: .1rem dotted;
+  cursor: help;
+  text-decoration: none;
+}
+kbd {
+  background: #454d5d;
+  border-radius: .2rem;
+  color: #fff;
+  display: inline-block;
+  line-height: 1;
+  padding: .3rem .4rem;
+  vertical-align: baseline;
+}
+mark {
+  background: #ffe9b3;
+  border-radius: .2rem;
+  color: #454d5d;
+  display: inline-block;
+  line-height: 1;
+  padding: .3rem .4rem;
+  vertical-align: baseline;
+}
 blockquote {
   border-left: .2rem solid #f0f1f4;
   margin-left: 0;
@@ -496,29 +519,6 @@ dl dt {
 dl dd {
   margin: .5rem 0 1.5rem 0;
 }
-mark {
-  background: #ffe9b3;
-  border-radius: .2rem;
-  color: #454d5d;
-  display: inline-block;
-  line-height: 1;
-  padding: .3rem .4rem;
-  vertical-align: baseline;
-}
-kbd {
-  background: #454d5d;
-  border-radius: .2rem;
-  color: #fff;
-  display: inline-block;
-  line-height: 1;
-  padding: .3rem .4rem;
-  vertical-align: baseline;
-}
-abbr[title] {
-  border-bottom: .1rem dotted;
-  cursor: help;
-  text-decoration: none;
-}
 :lang(zh),
 :lang(ja),
 :lang(ko),
@@ -611,7 +611,7 @@ abbr[title] {
 }
 .btn:focus {
   background: #fbfbfe;
-  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .1);
   text-decoration: none;
 }
 .btn:hover {
@@ -787,7 +787,7 @@ abbr[title] {
 }
 .form-input:focus {
   border-color: #5764c6;
-  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .1);
 }
 .form-input::-webkit-input-placeholder {
   color: #acb3c2;
@@ -858,7 +858,7 @@ textarea.form-input {
 }
 .form-select:focus {
   border-color: #5764c6;
-  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .1);
 }
 .form-select::-ms-expand {
   display: none;
@@ -883,7 +883,7 @@ textarea.form-input {
 .has-success .form-select:focus,
 .form-input.is-success:focus,
 .form-select.is-success:focus {
-  box-shadow: 0 0 0 .2rem rgba(50, 182, 67, .15);
+  box-shadow: 0 0 0 .2rem rgba(50, 182, 67, .1);
 }
 .has-error .form-input,
 .has-error .form-select,
@@ -895,13 +895,13 @@ textarea.form-input {
 .has-error .form-select:focus,
 .form-input.is-error:focus,
 .form-select.is-error:focus {
-  box-shadow: 0 0 0 .2rem rgba(232, 86, 0, .15);
+  box-shadow: 0 0 0 .2rem rgba(232, 86, 0, .1);
 }
 .form-input:not(:placeholder-shown):invalid {
   border-color: #e85600;
 }
 .form-input:not(:placeholder-shown):invalid:focus {
-  box-shadow: 0 0 0 .2rem rgba(232, 86, 0, .15);
+  box-shadow: 0 0 0 .2rem rgba(232, 86, 0, .1);
 }
 .form-input:not(:placeholder-shown):invalid + .form-input-hint {
   color: #e85600;
@@ -953,7 +953,7 @@ textarea.form-input {
 .form-radio input:focus + .form-icon,
 .form-switch input:focus + .form-icon {
   border-color: #5764c6;
-  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .1);
 }
 .form-checkbox input:checked + .form-icon,
 .form-radio input:checked + .form-icon,
@@ -1775,6 +1775,9 @@ code {
   padding: 4rem;
   text-align: center;
 }
+.empty .empty-icon {
+  margin-bottom: 1.5rem;
+}
 .empty .empty-title,
 .empty .empty-subtitle {
   margin: 1rem auto;
@@ -1796,7 +1799,6 @@ code {
   transition: max-height 3s ease;
 }
 .accordion .accordion-item .accordion-header {
-  background: #f8f9fa;
   display: block;
   padding: 1rem;
 }
@@ -1828,7 +1830,7 @@ code {
 }
 .form-autocomplete .form-autocomplete-input.is-focused {
   border-color: #5764c6;
-  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .1);
 }
 .form-autocomplete .form-autocomplete-input .form-input {
   border-color: transparent;
@@ -2111,8 +2113,8 @@ code {
   position: relative;
 }
 .dropdown .menu {
-  -webkit-animation: slide-down .2s ease 1;
-  animation: slide-down .2s ease 1;
+  -webkit-animation: slide-down .15s ease 1;
+  animation: slide-down .15s ease 1;
   display: none;
   left: 0;
   position: absolute;
@@ -2623,6 +2625,9 @@ code {
 .toast a.active {
   opacity: .75;
 }
+.toast .btn-clear {
+  margin: .2rem -.2rem .2rem .4rem;
+}
 .tooltip {
   position: relative;
 }