Add pure CSS Icons

1 files changed, 73 insertions, 23 deletions

diff --git a/docs/css/spectre.css b/docs/css/spectre.css
index 3c80268..aa97586 100644
--- a/docs/css/spectre.css
+++ b/docs/css/spectre.css
@@ -412,23 +412,6 @@ a.active {
   box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
   outline: none;
 }
-.btn .icon,
-.toast .icon,
-.menu .icon {
-  font-size: 1.3333em;
-  line-height: .8em;
-  vertical-align: -20%;
-}
-.icon-caret {
-  border-left: .4rem solid transparent;
-  border-right: .4rem solid transparent;
-  border-top: .4rem solid currentColor;
-  display: inline-block;
-  height: 0;
-  margin: 0;
-  vertical-align: middle;
-  width: 0;
-}
 h1,
 h2,
 h3,
@@ -695,8 +678,8 @@ abbr[title] {
   width: 100%;
 }
 .btn.btn-action {
-  padding-left: .2rem;
-  padding-right: .2rem;
+  padding-left: 0;
+  padding-right: 0;
   width: 3.2rem;
 }
 .btn.btn-action.btn-sm {
@@ -850,10 +833,12 @@ textarea.form-input {
   color: inherit;
   font-size: 1.4rem;
   line-height: 2rem;
-  min-width: 18rem;
   padding: .5rem .8rem;
   vertical-align: middle;
 }
+.form-select[multiple] {
+  width: 100%;
+}
 .form-select[multiple] option {
   padding: .2rem .4rem;
 }
@@ -1121,6 +1106,71 @@ input.disabled + .form-icon {
 .form-horizontal .form-switch {
   margin: .4rem 0;
 }
+.icon {
+  font-size: inherit;
+  vertical-align: middle;
+}
+.icon-arrow-down,
+.icon-arrow-left,
+.icon-arrow-right,
+.icon-arrow-up {
+  display: inline-block;
+  height: 1em;
+  margin: 0;
+  position: relative;
+  width: 1em;
+}
+.icon-arrow-down::before,
+.icon-arrow-left::before,
+.icon-arrow-right::before,
+.icon-arrow-up::before {
+  border: .2rem solid currentColor;
+  border-bottom: 0;
+  border-right: 0;
+  content: "";
+  display: block;
+  height: .65em;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translate(-25%, -50%) rotate(-45deg);
+  -ms-transform: translate(-25%, -50%) rotate(-45deg);
+  transform: translate(-25%, -50%) rotate(-45deg);
+  -webkit-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+  width: .65em;
+}
+.icon-arrow-down {
+  -webkit-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+.icon-arrow-right {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.icon-arrow-up {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.icon-caret {
+  border-left: .4rem solid transparent;
+  border-right: .4rem solid transparent;
+  border-top: .4rem solid currentColor;
+  display: inline-block;
+  height: 0;
+  margin: 0;
+  vertical-align: middle;
+  width: 0;
+}
+.btn .icon,
+.toast .icon,
+.menu .icon {
+  vertical-align: -10%;
+}
 .label {
   background: #f8f9fa;
   border-radius: .2rem;
@@ -2184,9 +2234,9 @@ code {
   color: #5764c6;
 }
 .tab.tab-block .tab-item {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
+  -webkit-flex: 1 0 0;
+  -ms-flex: 1 0 0;
+  flex: 1 0 0;
   text-align: center;
 }
 .tab.tab-block .tab-item .badge[data-badge]::after {