CHG: Fixed a number of bugs

1 files changed, 74 insertions, 60 deletions

diff --git a/docs/css/spectre.css b/docs/css/spectre.css
index 4cb2889..6c27b11 100644
--- a/docs/css/spectre.css
+++ b/docs/css/spectre.css
@@ -429,7 +429,7 @@ a:hover {
   border-top: .4rem solid currentColor;
   display: inline-block;
   height: 0;
-  margin: 0 .2rem;
+  margin: 0;
   vertical-align: middle;
   width: 0;
 }
@@ -514,14 +514,18 @@ dl dd {
 mark {
   background: #ffe9b3;
   border-radius: .2rem;
-  padding: .1em .3em;
+  display: inline-block;
+  line-height: 1;
+  padding: .3rem;
   vertical-align: baseline;
 }
 kbd {
   background: #333;
   border-radius: .2rem;
   color: #fff;
-  padding: .1em .3em;
+  display: inline-block;
+  line-height: 1;
+  padding: .3rem;
   vertical-align: baseline;
 }
 abbr[title] {
@@ -530,15 +534,17 @@ abbr[title] {
   text-decoration: none;
 }
 code {
-  background: #efefef;
+  background: #f8f8f8;
   border-radius: .2rem;
   color: #666;
-  padding: .1em .3em;
+  display: inline-block;
+  line-height: 1;
+  padding: .3rem;
   vertical-align: baseline;
 }
 pre {
   background: #f9f9f9;
-  line-height: 1.8rem;
+  line-height: 2rem;
   margin-bottom: 1em;
   margin-top: 1em;
   overflow: auto;
@@ -547,8 +553,7 @@ pre {
 }
 pre > code {
   background: transparent;
-  border-left: 0;
-  line-height: 1.8rem;
+  line-height: 2rem;
   padding: 0;
 }
 pre > code::before {
@@ -634,11 +639,11 @@ pre > code::before {
   display: inline-block;
   font-size: 1.4rem;
   height: 3.2rem;
-  line-height: 1.6rem;
-  padding: .7rem 1.2rem;
+  line-height: 2rem;
+  padding: .5rem 1.2rem;
   text-align: center;
   text-decoration: none;
-  transition: all .15s ease;
+  transition: all .2s ease;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -704,14 +709,12 @@ pre > code::before {
 .btn.btn-sm {
   font-size: 1.2rem;
   height: 2.4rem;
-  line-height: 1.4rem;
-  padding: .4rem .8rem;
+  padding: .1rem .8rem;
 }
 .btn.btn-lg {
   font-size: 1.8rem;
-  height: 4.2rem;
-  line-height: 2rem;
-  padding: 1rem 1.5rem;
+  height: 4rem;
+  padding: .9rem 1.5rem;
 }
 .btn.btn-block {
   display: block;
@@ -732,9 +735,7 @@ pre > code::before {
   background: transparent;
   border: 0;
   color: currentColor;
-  font-family: sans-serif;
   height: 2rem;
-  line-height: 1.8rem;
   margin-left: .2rem;
   margin-right: -.4rem;
   opacity: .45;
@@ -747,6 +748,8 @@ pre > code::before {
 }
 .btn.btn-clear::before {
   content: "\00d7";
+  display: inline-block;
+  font-family: sans-serif;
   font-size: 2rem;
 }
 .btn-group {
@@ -806,7 +809,7 @@ pre > code::before {
   outline: 0;
   padding: .6rem .8rem;
   position: relative;
-  transition: all .15s ease;
+  transition: all .2s ease;
   width: 100%;
 }
 .form-input:focus {
@@ -945,7 +948,7 @@ textarea.form-input {
   padding: 0;
   position: absolute;
   top: .5rem;
-  transition: all .15s ease;
+  transition: all .2s ease;
   vertical-align: top;
   width: 1.4rem;
 }
@@ -1044,7 +1047,7 @@ textarea.form-input {
   left: 0;
   position: absolute;
   top: 0;
-  transition: left .15s ease;
+  transition: left .2s ease;
   width: 1.6rem;
 }
 .form-switch input:checked + .form-icon {
@@ -1114,10 +1117,12 @@ textarea.form-input {
   display: -webkit-inline-flex;
 }
 .label {
-  background: #efefef;
+  background: #f8f8f8;
   border-radius: .2rem;
   color: #888;
-  padding: .1em .3em;
+  display: inline-block;
+  line-height: 1;
+  padding: .3rem;
   vertical-align: baseline;
 }
 .label.label-primary {
@@ -1638,7 +1643,7 @@ textarea.form-input {
 .navbar .navbar-brand {
   font-size: 1.6rem;
   font-weight: 500;
-  padding-right: 2rem;
+  margin-right: 2rem;
   text-decoration: none;
   vertical-align: middle;
 }
@@ -1712,12 +1717,12 @@ textarea.form-input {
   width: 3.2rem;
 }
 .avatar.avatar-xs {
-  font-size: .8rem;
+  font-size: 1.2rem;
   height: 1.6rem;
   width: 1.6rem;
 }
 .avatar.avatar-sm {
-  font-size: 1rem;
+  font-size: 1.2rem;
   height: 2.4rem;
   width: 2.4rem;
 }
@@ -1727,7 +1732,7 @@ textarea.form-input {
   width: 4.8rem;
 }
 .avatar.avatar-xl {
-  font-size: 2.6rem;
+  font-size: 2.8rem;
   height: 6.4rem;
   width: 6.4rem;
 }
@@ -1747,7 +1752,7 @@ textarea.form-input {
   right: -.2em;
   width: 50%;
 }
-.avatar[data-initial]::after {
+.avatar[data-initial]::before {
   color: currentColor;
   content: attr(data-initial);
   left: 50%;
@@ -1756,14 +1761,18 @@ textarea.form-input {
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
-  z-index: 0;
+  z-index: 1;
+}
+.avatar.avatar-xs[data-initial]::before {
+  -webkit-transform: translate(-50%, -50%) scale(.65);
+  -ms-transform: translate(-50%, -50%) scale(.65);
+  transform: translate(-50%, -50%) scale(.65);
 }
 .badge {
   position: relative;
 }
 .badge[data-badge]::after,
-.badge:not([data-badge])::after,
-.badge[data-badge=""]::after {
+.badge:not([data-badge])::after {
   background: #5764c6;
   background-clip: padding-box;
   border: .1rem solid #fff;
@@ -1771,16 +1780,19 @@ textarea.form-input {
   color: #fff;
   content: attr(data-badge);
   display: inline-block;
-  -webkit-transform: translate(-.2rem, -.8rem);
-  -ms-transform: translate(-.2rem, -.8rem);
-  transform: translate(-.2rem, -.8rem);
+  position: absolute;
+  right: 0;
+  top: 0;
+  -webkit-transform: translate(100%, -50%);
+  -ms-transform: translate(100%, -50%);
+  transform: translate(100%, -50%);
 }
 .badge[data-badge]::after {
-  font-size: 1.1rem;
-  height: 1.8rem;
-  line-height: 1.2rem;
-  min-width: 1.8rem;
-  padding: .2rem .4rem;
+  font-size: 1.2rem;
+  height: 2rem;
+  line-height: 1.4rem;
+  min-width: 2rem;
+  padding: .2rem .5rem;
   text-align: center;
   white-space: nowrap;
 }
@@ -1845,7 +1857,7 @@ textarea.form-input {
   height: 3rem;
   margin: .1rem .2rem .1rem 0;
   max-width: 100%;
-  padding: .5rem .8rem;
+  padding: .3rem .8rem;
   text-decoration: none;
   vertical-align: middle;
 }
@@ -1854,20 +1866,14 @@ textarea.form-input {
   color: #fff;
 }
 .chip .avatar {
-  font-size: 1rem;
-  height: 2rem;
   margin-right: .4rem;
-  width: 2rem;
-}
-.chip .btn-clear::before {
-  font-size: 1.6rem;
 }
 .dropdown {
   position: relative;
 }
 .dropdown .menu {
-  -webkit-animation: slide-down .216s;
-  animation: slide-down .216s;
+  -webkit-animation: slide-down .2s;
+  animation: slide-down .2s;
   display: none;
   left: 0;
   position: absolute;
@@ -1984,8 +1990,8 @@ textarea.form-input {
 }
 .modal:target .modal-container,
 .modal.active .modal-container {
-  -webkit-animation: slide-down .216s;
-  animation: slide-down .216s;
+  -webkit-animation: slide-down .2s;
+  animation: slide-down .2s;
   max-width: 64rem;
 }
 .modal.modal-sm .modal-container {
@@ -2067,16 +2073,13 @@ textarea.form-input {
   display: block;
   margin-bottom: -.1rem;
   margin-top: 0;
-  padding: .6rem .8rem;
+  padding: .6rem 1.2rem;
   text-decoration: none;
 }
 .tab .tab-item a:focus,
 .tab .tab-item a:hover {
   color: #5764c6;
 }
-.tab .tab-item a.badge {
-  padding-right: 0;
-}
 .tab .tab-item.active a,
 .tab .tab-item a.active {
   border-bottom-color: #5764c6;
@@ -2090,11 +2093,20 @@ textarea.form-input {
 }
 .tab.tab-block .tab-item .badge[data-badge]::after {
   position: absolute;
-  right: -1.4rem;
-  top: 1rem;
-  -webkit-transform: translate(-50%, -1rem);
-  -ms-transform: translate(-50%, -1rem);
-  transform: translate(-50%, -1rem);
+  right: -.4rem;
+  top: -.4rem;
+  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
+  transform: translate(0, 0);
+}
+.tab:not(.tab-block) a.badge {
+  padding-right: 0;
+}
+.tab:not(.tab-block) a.badge::after {
+  position: static;
+  -webkit-transform: translate(-.2rem, -1rem);
+  -ms-transform: translate(-.2rem, -1rem);
+  transform: translate(-.2rem, -1rem);
 }
 .pagination {
   display: flex;
@@ -2336,7 +2348,9 @@ textarea.form-input {
   -webkit-transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
-  transition: all .216s ease;
+  transition: transform .2s ease, -webkit-transform .2s ease;
+  transition: transform .2s ease;
+  transition: -webkit-transform .2s ease;
   white-space: nowrap;
   z-index: 99;
 }