diff options
1 files changed, 569 insertions, 0 deletions
| -rw-r--r-- | docs/dist/spectre-icons.css | 569 |
diff --git a/docs/dist/spectre-icons.css b/docs/dist/spectre-icons.css new file mode 100644 index 0000000..9fc54b8 --- /dev/null +++ b/docs/dist/spectre-icons.css @@ -0,0 +1,569 @@ +/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */ +.icon { + box-sizing: border-box; + display: inline-block; + font-size: inherit; + font-style: normal; + height: 1em; + position: relative; + text-indent: -999rem; + vertical-align: middle; + width: 1em; +} +.icon::before, +.icon::after { + display: block; + left: 50%; + position: absolute; + top: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +.icon-arrow-down::before, +.icon-arrow-left::before, +.icon-arrow-right::before, +.icon-arrow-up::before, +.icon-downward::before, +.icon-back::before, +.icon-forward::before, +.icon-upward::before { + border: .2rem solid currentColor; + border-bottom: 0; + border-right: 0; + content: ""; + height: .65em; + -webkit-transform: translate(-25%, -50%) rotate(-45deg); + -ms-transform: translate(-25%, -50%) rotate(-45deg); + transform: translate(-25%, -50%) rotate(-45deg); + width: .65em; +} +.icon-arrow-down, +.icon-downward { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.icon-arrow-right, +.icon-forward { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.icon-arrow-up, +.icon-upward { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.icon-downward::before, +.icon-back::before, +.icon-forward::before, +.icon-upward::before { + -webkit-transform: translate(-50%, -50%) rotate(-45deg); + -ms-transform: translate(-50%, -50%) rotate(-45deg); + transform: translate(-50%, -50%) rotate(-45deg); +} +.icon-downward::after, +.icon-back::after, +.icon-forward::after, +.icon-upward::after { + background: currentColor; + content: ""; + height: .2rem; + left: 55%; + width: .8em; +} +.icon-caret::before { + border-left: .3em solid transparent; + border-right: .3em solid transparent; + border-top: .3em solid currentColor; + content: ""; + height: 0; + -webkit-transform: translate(-50%, -25%); + -ms-transform: translate(-50%, -25%); + transform: translate(-50%, -25%); + width: 0; +} +.icon-menu::before { + background: currentColor; + box-shadow: 0 -.35em, 0 .35em; + content: ""; + height: .2rem; + width: 100%; +} +.icon-apps::before { + background: currentColor; + box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em; + content: ""; + height: .3rem; + width: .3rem; +} +.icon-resize-horiz::before, +.icon-resize-vert::before, +.icon-resize-horiz::after, +.icon-resize-vert::after { + border: .2rem solid currentColor; + border-bottom: 0; + border-right: 0; + content: ""; + height: .45em; + width: .45em; +} +.icon-resize-horiz::before, +.icon-resize-vert::before { + -webkit-transform: translate(-50%, -90%) rotate(45deg); + -ms-transform: translate(-50%, -90%) rotate(45deg); + transform: translate(-50%, -90%) rotate(45deg); +} +.icon-resize-horiz::after, +.icon-resize-vert::after { + -webkit-transform: translate(-50%, -10%) rotate(225deg); + -ms-transform: translate(-50%, -10%) rotate(225deg); + transform: translate(-50%, -10%) rotate(225deg); +} +.icon-resize-horiz::before { + -webkit-transform: translate(-90%, -50%) rotate(-45deg); + -ms-transform: translate(-90%, -50%) rotate(-45deg); + transform: translate(-90%, -50%) rotate(-45deg); +} +.icon-resize-horiz::after { + -webkit-transform: translate(-10%, -50%) rotate(135deg); + -ms-transform: translate(-10%, -50%) rotate(135deg); + transform: translate(-10%, -50%) rotate(135deg); +} +.icon-more-horiz::before, +.icon-more-vert::before { + background: currentColor; + border-radius: 50%; + box-shadow: -.4em 0, .4em 0; + content: ""; + height: .3rem; + width: .3rem; +} +.icon-more-vert::before { + box-shadow: 0 -.4em, 0 .4em; +} +.icon-plus::before, +.icon-minus::before, +.icon-cross::before { + background: currentColor; + content: ""; + height: .2rem; + width: 100%; +} +.icon-plus::after, +.icon-cross::after { + background: currentColor; + content: ""; + height: 100%; + width: .2rem; +} +.icon-cross::before { + width: 100%; +} +.icon-cross::after { + height: 100%; +} +.icon-cross::before, +.icon-cross::after { + -webkit-transform: translate(-50%, -50%) rotate(45deg); + -ms-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); +} +.icon-check::before { + border: .2rem solid currentColor; + border-right: 0; + border-top: 0; + content: ""; + height: .5em; + -webkit-transform: translate(-50%, -75%) rotate(-45deg); + -ms-transform: translate(-50%, -75%) rotate(-45deg); + transform: translate(-50%, -75%) rotate(-45deg); + width: .9em; +} +.icon-stop { + border: .2rem solid currentColor; + border-radius: 50%; +} +.icon-stop::before { + background: currentColor; + content: ""; + height: .2rem; + -webkit-transform: translate(-50%, -50%) rotate(45deg); + -ms-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); + width: 1em; +} +.icon-shutdown { + border: .2rem solid currentColor; + border-radius: 50%; + border-top-color: transparent; +} +.icon-shutdown::before { + background: currentColor; + content: ""; + height: .5em; + top: .1em; + width: .2rem; +} +.icon-refresh::before { + border: .2rem solid currentColor; + border-radius: 50%; + border-right-color: transparent; + content: ""; + height: 1em; + width: 1em; +} +.icon-refresh::after { + border: .2em solid currentColor; + border-left-color: transparent; + border-top-color: transparent; + content: ""; + height: 0; + left: 80%; + top: 20%; + width: 0; +} +.icon-search::before { + border: .2rem solid currentColor; + border-radius: 50%; + content: ""; + height: .75em; + left: 5%; + top: 5%; + -webkit-transform: translate(0, 0) rotate(45deg); + -ms-transform: translate(0, 0) rotate(45deg); + transform: translate(0, 0) rotate(45deg); + width: .75em; +} +.icon-search::after { + background: currentColor; + content: ""; + height: .2rem; + left: 80%; + top: 80%; + -webkit-transform: translate(-50%, -50%) rotate(45deg); + -ms-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); + width: .4em; +} +.icon-edit::before { + border: .2rem solid currentColor; + content: ""; + height: .4em; + -webkit-transform: translate(-40%, -60%) rotate(-45deg); + -ms-transform: translate(-40%, -60%) rotate(-45deg); + transform: translate(-40%, -60%) rotate(-45deg); + width: .85em; +} +.icon-edit::after { + border: .15em solid currentColor; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + height: 0; + left: 5%; + top: 95%; + -webkit-transform: translate(0, -100%); + -ms-transform: translate(0, -100%); + transform: translate(0, -100%); + width: 0; +} +.icon-delete::before { + border: .2rem solid currentColor; + border-bottom-left-radius: .2rem; + border-bottom-right-radius: .2rem; + border-top: 0; + content: ""; + height: .75em; + top: 60%; + width: .75em; +} +.icon-delete::after { + background: currentColor; + box-shadow: -.25em .2em, .25em .2em; + content: ""; + height: .2rem; + top: .1rem; + width: .5em; +} +.icon-share { + border: .2rem solid currentColor; + border-radius: .2rem; + border-right: 0; + border-top: 0; +} +.icon-share::before { + border: .2rem solid currentColor; + border-left: 0; + border-top: 0; + content: ""; + height: .4em; + left: 100%; + top: .25em; + -webkit-transform: translate(-125%, -50%) rotate(-45deg); + -ms-transform: translate(-125%, -50%) rotate(-45deg); + transform: translate(-125%, -50%) rotate(-45deg); + width: .4em; +} +.icon-share::after { + border: .2rem solid currentColor; + border-bottom: 0; + border-radius: 75% 0; + border-right: 0; + content: ""; + height: .5em; + width: .6em; +} +.icon-flag::before { + background: currentColor; + content: ""; + height: 1em; + left: 15%; + width: .2rem; +} +.icon-flag::after { + border: .2rem solid currentColor; + border-bottom-right-radius: .2rem; + border-left: 0; + border-top-right-radius: .2rem; + content: ""; + height: .65em; + left: 60%; + top: 35%; + width: .8em; +} +.icon-bookmark::before { + border: .2rem solid currentColor; + border-bottom: 0; + border-top-left-radius: .2rem; + border-top-right-radius: .2rem; + content: ""; + height: .9em; + width: .8em; +} +.icon-bookmark::after { + border: .2rem solid currentColor; + border-bottom: 0; + border-left: 0; + border-radius: .2rem; + content: ""; + height: .5em; + -webkit-transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); + -ms-transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); + transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); + width: .5em; +} +.icon-download, +.icon-upload { + border-bottom: .2rem solid currentColor; +} +.icon-download::before, +.icon-upload::before { + border: .2rem solid currentColor; + border-bottom: 0; + border-right: 0; + content: ""; + height: .5em; + -webkit-transform: translate(-50%, -60%) rotate(-135deg); + -ms-transform: translate(-50%, -60%) rotate(-135deg); + transform: translate(-50%, -60%) rotate(-135deg); + width: .5em; +} +.icon-download::after, +.icon-upload::after { + background: currentColor; + content: ""; + height: .6em; + top: 40%; + width: .2rem; +} +.icon-upload::before { + -webkit-transform: translate(-50%, -60%) rotate(45deg); + -ms-transform: translate(-50%, -60%) rotate(45deg); + transform: translate(-50%, -60%) rotate(45deg); +} +.icon-upload::after { + top: 50%; +} +.icon-time { + border: .2rem solid currentColor; + border-radius: 50%; +} +.icon-time::before { + background: currentColor; + content: ""; + height: .4em; + -webkit-transform: translate(-50%, -75%); + -ms-transform: translate(-50%, -75%); + transform: translate(-50%, -75%); + width: .2rem; +} +.icon-time::after { + background: currentColor; + content: ""; + height: .3em; + -webkit-transform: translate(-50%, -75%) rotate(90deg); + -ms-transform: translate(-50%, -75%) rotate(90deg); + transform: translate(-50%, -75%) rotate(90deg); + -webkit-transform-origin: 50% 90%; + -ms-transform-origin: 50% 90%; + transform-origin: 50% 90%; + width: .2rem; +} +.icon-mail::before { + border: .2rem solid currentColor; + border-radius: .2rem; + content: ""; + height: .8em; + width: 1em; +} +.icon-mail::after { + border: .2rem solid currentColor; + border-right: 0; + border-top: 0; + content: ""; + height: .5em; + -webkit-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); + -ms-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); + transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); + width: .5em; +} +.icon-people::before { + border: .2rem solid currentColor; + border-radius: 50%; + content: ""; + height: .45em; + top: 25%; + width: .45em; +} +.icon-people::after { + border: .2rem solid currentColor; + border-radius: 50% 50% 0 0; + content: ""; + height: .4em; + top: 75%; + width: .9em; +} +.icon-message { + border: .2rem solid currentColor; + border-bottom: 0; + border-radius: .2rem; + border-right: 0; +} +.icon-message::before { + border: .2rem solid currentColor; + border-bottom-right-radius: .2rem; + border-left: 0; + border-top: 0; + content: ""; + height: .8em; + left: 65%; + top: 40%; + width: .7em; +} +.icon-message::after { + background: currentColor; + border-radius: .2rem; + content: ""; + height: .3em; + left: 10%; + top: 100%; + -webkit-transform: translate(0, -90%) rotate(45deg); + -ms-transform: translate(0, -90%) rotate(45deg); + transform: translate(0, -90%) rotate(45deg); + width: .2rem; +} +.icon-photo { + border: .2rem solid currentColor; + border-radius: .2rem; +} +.icon-photo::before { + border: .2rem solid currentColor; + border-radius: 50%; + content: ""; + height: .25em; + left: 35%; + top: 35%; + width: .25em; +} +.icon-photo::after { + border: .2rem solid currentColor; + border-bottom: 0; + border-left: 0; + content: ""; + height: .5em; + left: 60%; + -webkit-transform: translate(-50%, 25%) rotate(-45deg); + -ms-transform: translate(-50%, 25%) rotate(-45deg); + transform: translate(-50%, 25%) rotate(-45deg); + width: .5em; +} +.icon-link::before, +.icon-link::after { + border: .2rem solid currentColor; + border-radius: 5em 0 0 5em; + border-right: 0; + content: ""; + height: .5em; + width: .75em; +} +.icon-link::before { + -webkit-transform: translate(-70%, -45%) rotate(-45deg); + -ms-transform: translate(-70%, -45%) rotate(-45deg); + transform: translate(-70%, -45%) rotate(-45deg); +} +.icon-link::after { + -webkit-transform: translate(-30%, -55%) rotate(135deg); + -ms-transform: translate(-30%, -55%) rotate(135deg); + transform: translate(-30%, -55%) rotate(135deg); +} +.icon-location::before { + border: .2rem solid currentColor; + border-radius: 50% 50% 50% 0; + content: ""; + height: .8em; + -webkit-transform: translate(-50%, -60%) rotate(-45deg); + -ms-transform: translate(-50%, -60%) rotate(-45deg); + transform: translate(-50%, -60%) rotate(-45deg); + width: .8em; +} +.icon-location::after { + border: .2rem solid currentColor; + border-radius: 50%; + content: ""; + height: .2em; + -webkit-transform: translate(-50%, -80%); + -ms-transform: translate(-50%, -80%); + transform: translate(-50%, -80%); + width: .2em; +} +.icon-emoji { + border: .2rem solid currentColor; + border-radius: 50%; +} +.icon-emoji::before { + border-radius: 50%; + box-shadow: -.17em -.15em, .17em -.15em; + content: ""; + height: .1em; + width: .1em; +} +.icon-emoji::after { + border: .2rem solid currentColor; + border-bottom-color: transparent; + border-radius: 50%; + border-right-color: transparent; + content: ""; + height: .5em; + -webkit-transform: translate(-50%, -40%) rotate(-135deg); + -ms-transform: translate(-50%, -40%) rotate(-135deg); + transform: translate(-50%, -40%) rotate(-135deg); + width: .5em; +} +.btn .icon, +.toast .icon, +.menu .icon { + vertical-align: -10%; +}
\ No newline at end of file |