Merge pull request #180 from picturepan2/feature/0.2.12 v0.2.12

Feature/0.2.12

1 files changed, 45 insertions, 24 deletions

diff --git a/docs/css/spectre.css b/docs/css/spectre.css
index 981172c..2f74731 100644
--- a/docs/css/spectre.css
+++ b/docs/css/spectre.css
@@ -399,8 +399,12 @@ body {
 }
 a {
   color: #5764c6;
+  outline: none;
   text-decoration: none;
 }
+a:focus {
+  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+}
 a:focus,
 a:hover,
 a:active,
@@ -408,10 +412,6 @@ a.active {
   color: #3b49af;
   text-decoration: underline;
 }
-:focus {
-  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
-  outline: none;
-}
 h1,
 h2,
 h3,
@@ -597,6 +597,7 @@ abbr[title] {
   font-size: 1.4rem;
   height: 3.2rem;
   line-height: 2rem;
+  outline: none;
   padding: .5rem .8rem;
   text-align: center;
   text-decoration: none;
@@ -610,6 +611,7 @@ abbr[title] {
 }
 .btn:focus {
   background: #fbfbfe;
+  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
   text-decoration: none;
 }
 .btn:hover {
@@ -771,7 +773,7 @@ abbr[title] {
   height: 3.2rem;
   line-height: 2rem;
   max-width: 100%;
-  outline: 0;
+  outline: none;
   padding: .5rem .8rem;
   position: relative;
   transition: all .2s ease;
@@ -779,6 +781,7 @@ abbr[title] {
 }
 .form-input:focus {
   border-color: #5764c6;
+  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
 }
 .form-input::-webkit-input-placeholder {
   color: #acb3c2;
@@ -834,6 +837,7 @@ textarea.form-input {
   color: inherit;
   font-size: 1.4rem;
   line-height: 2rem;
+  outline: none;
   padding: .5rem .8rem;
   vertical-align: middle;
 }
@@ -850,6 +854,7 @@ textarea.form-input {
 }
 .form-select:focus {
   border-color: #5764c6;
+  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
 }
 .form-select::-ms-expand {
   display: none;
@@ -1168,6 +1173,12 @@ code {
   height: auto;
   max-width: 100%;
 }
+.img-fit-cover {
+  object-fit: cover;
+}
+.img-fit-contain {
+  object-fit: contain;
+}
 .video-responsive {
   display: block;
   overflow: hidden;
@@ -1179,7 +1190,6 @@ code {
   content: "";
   display: block;
   padding-bottom: 56.25%;
-  /* Default 16:9, you can calculate this value by dividing 9 by 16 */
 }
 .video-responsive iframe,
 .video-responsive object,
@@ -1199,11 +1209,9 @@ code {
 }
 .video-responsive-4-3::before {
   padding-bottom: 75%;
-  /* 4:3 */
 }
 .video-responsive-1-1::before {
   padding-bottom: 100%;
-  /* 1:1 */
 }
 .figure {
   margin: 0 0 1rem 0;
@@ -1654,7 +1662,7 @@ code {
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
 }
-.navbar .navbar-primary {
+.navbar .navbar-center {
   -webkit-align-items: center;
   align-items: center;
   display: flex;
@@ -1737,7 +1745,7 @@ code {
   flex-wrap: wrap;
   height: auto;
   min-height: 3.2rem;
-  padding: .1rem 0 .1rem .2rem;
+  padding: .1rem 0 0 .1rem;
 }
 .form-autocomplete .form-autocomplete-input.is-focused {
   border-color: #5764c6;
@@ -1751,7 +1759,7 @@ code {
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
   height: 2.8rem;
-  padding: .3rem;
+  padding: .3rem .8rem;
   width: auto;
 }
 .form-autocomplete mark {
@@ -1807,11 +1815,14 @@ code {
 }
 .avatar .avatar-icon {
   background: #fff;
-  bottom: -.2em;
+  bottom: 14.64%;
   height: 50%;
-  padding: 5%;
+  padding: .2rem;
   position: absolute;
-  right: -.2em;
+  right: 14.64%;
+  -webkit-transform: translate(50%, 50%);
+  -ms-transform: translate(50%, 50%);
+  transform: translate(50%, 50%);
   width: 50%;
 }
 .avatar[data-initial]::before {
@@ -1845,9 +1856,9 @@ code {
 .badge[data-badge]::after {
   font-size: 1.2rem;
   height: 2rem;
-  line-height: 1.4rem;
+  line-height: 1;
   min-width: 2rem;
-  padding: .2rem .5rem;
+  padding: .3rem .5rem;
   text-align: center;
   white-space: nowrap;
 }
@@ -1866,6 +1877,22 @@ code {
   -ms-transform: translate(50%, -50%);
   transform: translate(50%, -50%);
 }
+.badge.avatar::after {
+  position: absolute;
+  right: 14.64%;
+  top: 14.64%;
+  -webkit-transform: translate(50%, -50%);
+  -ms-transform: translate(50%, -50%);
+  transform: translate(50%, -50%);
+  z-index: 100;
+}
+.badge.avatar-xs::after {
+  content: "";
+  height: .8rem;
+  min-width: .8rem;
+  padding: 0;
+  width: .8rem;
+}
 .bar {
   background: #f0f1f4;
   border-radius: .2rem;
@@ -1922,13 +1949,9 @@ code {
   z-index: 1;
 }
 .bar-slider .bar-slider-btn {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   background: #5764c6;
   border: 0;
   border-radius: 50%;
-  cursor: pointer;
   height: 1.2rem;
   padding: 0;
   position: absolute;
@@ -1937,7 +1960,6 @@ code {
   -webkit-transform: translate(50%, -50%);
   -ms-transform: translate(50%, -50%);
   transform: translate(50%, -50%);
-  transition: all .2s ease;
   width: 1.2rem;
 }
 .bar-slider .bar-slider-btn:active {
@@ -1991,8 +2013,8 @@ code {
   display: inline-flex;
   display: -webkit-inline-flex;
   -ms-flex-align: center;
-  height: 2.6rem;
-  margin: .1rem .2rem .1rem 0;
+  height: 2.8rem;
+  margin: 0 .1rem .1rem 0;
   max-width: 100%;
   padding: .1rem .8rem;
   text-decoration: none;
@@ -2124,7 +2146,6 @@ code {
   border-radius: .2rem;
   box-shadow: 0 .4rem 1rem rgba(69, 77, 93, .3);
   display: block;
-  margin: 0 auto;
   padding: 0;
   text-align: left;
 }