CHG: Update docs css

1 files changed, 96 insertions, 1 deletions

diff --git a/docs/css/spectre.css b/docs/css/spectre.css
index 2599d85..535486e 100644
--- a/docs/css/spectre.css
+++ b/docs/css/spectre.css
@@ -638,6 +638,7 @@ pre > code::before {
   padding: .7rem 1.2rem;
   text-align: center;
   text-decoration: none;
+  -webkit-transition: all .15s ease;
   transition: all .15s ease;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -752,10 +753,12 @@ pre > code::before {
 .btn-group {
   display: inline-flex;
   display: -ms-inline-flexbox;
+  display: -webkit-inline-box;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
 .btn-group .btn {
+  -webkit-box-flex: 1;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
 }
@@ -781,6 +784,7 @@ pre > code::before {
 .btn-group.btn-group-block {
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
 }
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
@@ -802,6 +806,7 @@ pre > code::before {
   outline: 0;
   padding: .6rem .8rem;
   position: relative;
+  -webkit-transition: all .15s ease;
   transition: all .15s ease;
   width: 100%;
 }
@@ -941,6 +946,7 @@ textarea.form-input {
   padding: 0;
   position: absolute;
   top: .5rem;
+  -webkit-transition: all .15s ease;
   transition: all .15s ease;
   vertical-align: top;
   width: 1.4rem;
@@ -973,6 +979,7 @@ textarea.form-input {
   margin-top: -.6rem;
   position: absolute;
   top: 50%;
+  -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
   width: .6rem;
@@ -1039,6 +1046,7 @@ textarea.form-input {
   left: 0;
   position: absolute;
   top: 0;
+  -webkit-transition: left .15s ease;
   transition: left .15s ease;
   width: 1.6rem;
 }
@@ -1055,6 +1063,7 @@ textarea.form-input {
 .input-group {
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
 }
 .input-group .input-group-addon {
   background: #f9f9f9;
@@ -1074,6 +1083,7 @@ textarea.form-input {
 }
 .input-group .input-group-addon,
 .input-group .input-group-btn {
+  -webkit-box-flex: 1;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
 }
@@ -1104,6 +1114,7 @@ textarea.form-input {
 .input-group.input-inline {
   display: inline-flex;
   display: -ms-inline-flexbox;
+  display: -webkit-inline-box;
 }
 .label {
   background: #efefef;
@@ -1214,6 +1225,7 @@ textarea.form-input {
 .columns {
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin-left: -1rem;
@@ -1233,6 +1245,7 @@ textarea.form-input {
   overflow-x: auto;
 }
 .column {
+  -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   padding: 1rem;
@@ -1249,6 +1262,7 @@ textarea.form-input {
 .column.col-3,
 .column.col-2,
 .column.col-1 {
+  -webkit-box-flex: 0;
   -ms-flex: none;
   flex: none;
 }
@@ -1301,6 +1315,7 @@ textarea.form-input {
   .col-xl-3,
   .col-xl-2,
   .col-xl-1 {
+    -webkit-box-flex: 0;
     -ms-flex: none;
     flex: none;
   }
@@ -1354,6 +1369,7 @@ textarea.form-input {
   .col-lg-3,
   .col-lg-2,
   .col-lg-1 {
+    -webkit-box-flex: 0;
     -ms-flex: none;
     flex: none;
   }
@@ -1407,6 +1423,7 @@ textarea.form-input {
   .col-md-3,
   .col-md-2,
   .col-md-1 {
+    -webkit-box-flex: 0;
     -ms-flex: none;
     flex: none;
   }
@@ -1460,6 +1477,7 @@ textarea.form-input {
   .col-sm-3,
   .col-sm-2,
   .col-sm-1 {
+    -webkit-box-flex: 0;
     -ms-flex: none;
     flex: none;
   }
@@ -1513,6 +1531,7 @@ textarea.form-input {
   .col-xs-3,
   .col-xs-2,
   .col-xs-1 {
+    -webkit-box-flex: 0;
     -ms-flex: none;
     flex: none;
   }
@@ -1559,6 +1578,7 @@ textarea.form-input {
 .form-horizontal .form-group {
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
 }
 .form-horizontal .form-label {
   margin-bottom: 0;
@@ -1595,7 +1615,10 @@ textarea.form-input {
 }
 .navbar {
   align-items: center;
+  -webkit-box-align: center;
+  -webkit-box-pack: justify;
   display: flex;
+  display: -webkit-box;
   display: -ms-flexbox;
   -ms-flex-align: center;
   -ms-flex-pack: justify;
@@ -1605,8 +1628,10 @@ textarea.form-input {
 }
 .navbar .navbar-section {
   align-items: center;
+  -webkit-box-align: center;
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
   -ms-flex-align: center;
   padding: 1rem 0;
 }
@@ -1642,8 +1667,9 @@ textarea.form-input {
   border: .1rem solid #c5c5c5;
   border-radius: .2rem;
   color: #333;
-  display: -ms-flexbox;
   display: flex;
+  display: -webkit-box;
+  display: -ms-flexbox;
   -ms-flex-line-pack: start;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -1658,6 +1684,7 @@ textarea.form-input {
 }
 .form-autocomplete .form-autocomplete-input .form-input {
   border-color: transparent;
+  -webkit-box-flex: 1;
   box-shadow: none;
   display: inline-block;
   -ms-flex: 1 0 auto;
@@ -1724,6 +1751,7 @@ textarea.form-input {
   left: 50%;
   position: absolute;
   top: 50%;
+  -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   z-index: 0;
@@ -1741,6 +1769,7 @@ 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);
 }
@@ -1805,9 +1834,11 @@ textarea.form-input {
   align-items: center;
   background: #efefef;
   border-radius: .2rem;
+  -webkit-box-align: center;
   color: #666;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  display: -webkit-inline-box;
   -ms-flex-align: center;
   height: 3rem;
   margin: .1rem .2rem .1rem 0;
@@ -1843,6 +1874,7 @@ textarea.form-input {
   position: relative;
 }
 .dropdown .menu {
+  -webkit-animation: slide-down .216s;
   animation: slide-down .216s;
   display: none;
   left: 0;
@@ -1863,6 +1895,7 @@ textarea.form-input {
   min-width: 18rem;
   padding: .8rem;
   text-align: left;
+  -webkit-transform: translateY(.5rem);
   -ms-transform: translateY(.5rem);
   transform: translateY(.5rem);
   z-index: 999;
@@ -1909,6 +1942,7 @@ textarea.form-input {
   content: "";
   display: block;
   height: .1rem;
+  -webkit-transform: translateY(-1rem);
   -ms-transform: translateY(-1rem);
   transform: translateY(-1rem);
   width: 100%;
@@ -1924,6 +1958,8 @@ textarea.form-input {
 .modal {
   align-items: center;
   bottom: 0;
+  -webkit-box-align: center;
+  -webkit-box-pack: center;
   display: none;
   -ms-flex-align: center;
   -ms-flex-pack: center;
@@ -1940,6 +1976,7 @@ textarea.form-input {
 .modal.active {
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
   opacity: 1;
   z-index: 1988;
 }
@@ -1955,6 +1992,7 @@ textarea.form-input {
 }
 .modal:target .modal-container,
 .modal.active .modal-container {
+  -webkit-animation: slide-down .216s;
   animation: slide-down .216s;
   max-width: 64rem;
 }
@@ -2013,8 +2051,10 @@ textarea.form-input {
 .tab {
   align-items: center;
   border-bottom: .1rem solid #efefef;
+  -webkit-box-align: center;
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
   -ms-flex-align: center;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -2023,6 +2063,7 @@ textarea.form-input {
   margin-top: 0;
 }
 .tab .tab-item.tab-action {
+  -webkit-box-flex: 1;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
   text-align: right;
@@ -2049,6 +2090,7 @@ textarea.form-input {
   color: #5764c6;
 }
 .tab.tab-block .tab-item {
+  -webkit-box-flex: 1;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
   text-align: center;
@@ -2057,12 +2099,14 @@ textarea.form-input {
   position: absolute;
   right: -1.4rem;
   top: 1rem;
+  -webkit-transform: translate(-50%, -1rem);
   -ms-transform: translate(-50%, -1rem);
   transform: translate(-50%, -1rem);
 }
 .pagination {
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
 }
 .pagination .page-item {
   margin: 1rem .1rem;
@@ -2088,6 +2132,7 @@ textarea.form-input {
 }
 .pagination .page-item.page-prev,
 .pagination .page-item.page-next {
+  -webkit-box-flex: 1;
   -ms-flex: 1 0 50%;
   flex: 1 0 50%;
 }
@@ -2102,8 +2147,11 @@ textarea.form-input {
   opacity: .5;
 }
 .nav {
+  -webkit-box-direction: normal;
+  -webkit-box-orient: vertical;
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
   -ms-flex-direction: column;
   flex-direction: column;
 }
@@ -2134,6 +2182,7 @@ textarea.form-input {
 .step {
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   list-style: none;
@@ -2141,6 +2190,7 @@ textarea.form-input {
   width: 100%;
 }
 .step .step-item {
+  -webkit-box-flex: 1;
   -ms-flex: 1 1 0;
   flex: 1 1 0;
   margin-top: 0;
@@ -2173,6 +2223,7 @@ textarea.form-input {
   left: 50%;
   position: absolute;
   top: .4rem;
+  -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
   width: 1.2rem;
@@ -2191,18 +2242,22 @@ textarea.form-input {
 .tile {
   align-content: space-between;
   align-items: flex-start;
+  -webkit-box-align: start;
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
   -ms-flex-align: start;
   -ms-flex-line-pack: justify;
   margin: 0;
   padding: .5rem 0;
 }
 .tile .tile-icon {
+  -webkit-box-flex: 0;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
 }
 .tile .tile-content {
+  -webkit-box-flex: 1;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
 }
@@ -2213,6 +2268,7 @@ textarea.form-input {
   padding-right: 1rem;
 }
 .tile .tile-action {
+  -webkit-box-flex: 0;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
 }
@@ -2226,6 +2282,7 @@ textarea.form-input {
 }
 .tile.tile-centered {
   align-items: center;
+  -webkit-box-align: center;
   -ms-flex-align: center;
 }
 .tile.tile-centered .tile-content {
@@ -2282,8 +2339,10 @@ textarea.form-input {
   pointer-events: none;
   position: absolute;
   text-overflow: ellipsis;
+  -webkit-transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
+  -webkit-transition: all .216s ease;
   transition: all .216s ease;
   white-space: nowrap;
   z-index: 99;
@@ -2291,6 +2350,7 @@ textarea.form-input {
 .tooltip:focus::after,
 .tooltip:hover::after {
   opacity: 1;
+  -webkit-transform: translate(-50%, -.5rem);
   -ms-transform: translate(-50%, -.5rem);
   transform: translate(-50%, -.5rem);
 }
@@ -2301,22 +2361,26 @@ textarea.form-input {
 .tooltip.tooltip-right::after {
   bottom: 50%;
   left: 100%;
+  -webkit-transform: translate(0, 50%);
   -ms-transform: translate(0, 50%);
   transform: translate(0, 50%);
 }
 .tooltip.tooltip-right:focus::after,
 .tooltip.tooltip-right:hover::after {
+  -webkit-transform: translate(.5rem, 50%);
   -ms-transform: translate(.5rem, 50%);
   transform: translate(.5rem, 50%);
 }
 .tooltip.tooltip-bottom::after {
   bottom: auto;
   top: 100%;
+  -webkit-transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
 }
 .tooltip.tooltip-bottom:focus::after,
 .tooltip.tooltip-bottom:hover::after {
+  -webkit-transform: translate(-50%, .5rem);
   -ms-transform: translate(-50%, .5rem);
   transform: translate(-50%, .5rem);
 }
@@ -2324,29 +2388,57 @@ textarea.form-input {
   bottom: 50%;
   left: auto;
   right: 100%;
+  -webkit-transform: translate(0, 50%);
   -ms-transform: translate(0, 50%);
   transform: translate(0, 50%);
 }
 .tooltip.tooltip-left:focus::after,
 .tooltip.tooltip-left:hover::after {
+  -webkit-transform: translate(-.5rem, 50%);
   -ms-transform: translate(-.5rem, 50%);
   transform: translate(-.5rem, 50%);
 }
+@-webkit-keyframes loading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes loading {
   0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
+@-webkit-keyframes slide-down {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-3rem);
+    transform: translateY(-3rem);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
 @keyframes slide-down {
   0% {
     opacity: 0;
+    -webkit-transform: translateY(-3rem);
     transform: translateY(-3rem);
   }
   100% {
     opacity: 1;
+    -webkit-transform: translateY(0);
     transform: translateY(0);
   }
 }
@@ -2362,6 +2454,7 @@ textarea.form-input {
   position: relative;
 }
 .loading::after {
+  -webkit-animation: loading 500ms infinite linear;
   animation: loading 500ms infinite linear;
   border: .2rem solid #5764c6;
   border-radius: .8rem;
@@ -2464,10 +2557,12 @@ textarea.form-input {
 .flex {
   display: flex;
   display: -ms-flexbox;
+  display: -webkit-box;
 }
 .inline-flex {
   display: inline-flex;
   display: -ms-inline-flexbox;
+  display: -webkit-inline-box;
 }
 .hide {
   display: none !important;