diff options
1 files changed, 82 insertions, 40 deletions
| -rw-r--r-- | docs/dist/spectre-icons.css | 122 |
diff --git a/docs/dist/spectre-icons.css b/docs/dist/spectre-icons.css index f2be32f..252fff2 100644 --- a/docs/dist/spectre-icons.css +++ b/docs/dist/spectre-icons.css @@ -10,15 +10,16 @@ vertical-align: middle; width: 1em; } + .icon::before, .icon::after { display: block; left: 50%; position: absolute; top: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } + .icon-arrow-down::before, .icon-arrow-left::before, .icon-arrow-right::before, @@ -34,22 +35,23 @@ height: .65em; width: .65em; } + .icon-arrow-down::before { - -ms-transform: translate(-50%, -75%) rotate(225deg); transform: translate(-50%, -75%) rotate(225deg); } + .icon-arrow-left::before { - -ms-transform: translate(-25%, -50%) rotate(-45deg); transform: translate(-25%, -50%) rotate(-45deg); } + .icon-arrow-right::before { - -ms-transform: translate(-75%, -50%) rotate(135deg); transform: translate(-75%, -50%) rotate(135deg); } + .icon-arrow-up::before { - -ms-transform: translate(-50%, -25%) rotate(45deg); transform: translate(-50%, -25%) rotate(45deg); } + .icon-back::after, .icon-forward::after { background: currentColor; @@ -57,6 +59,7 @@ height: .1rem; width: .8em; } + .icon-downward::after, .icon-upward::after { background: currentColor; @@ -64,44 +67,49 @@ height: .8em; width: .1rem; } + .icon-back::after { left: 55%; } + .icon-back::before { - -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } + .icon-downward::after { top: 45%; } + .icon-downward::before { - -ms-transform: translate(-50%, -50%) rotate(-135deg); transform: translate(-50%, -50%) rotate(-135deg); } + .icon-forward::after { left: 45%; } + .icon-forward::before { - -ms-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg); } + .icon-upward::after { top: 55%; } + .icon-upward::before { - -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } + .icon-caret::before { border-left: .3em solid transparent; border-right: .3em solid transparent; border-top: .3em solid currentColor; content: ""; height: 0; - -ms-transform: translate(-50%, -25%); - transform: translate(-50%, -25%); + transform: translate(-50%, -25%); width: 0; } + .icon-menu::before { background: currentColor; box-shadow: 0 -.35em, 0 .35em; @@ -109,6 +117,7 @@ height: .1rem; 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; @@ -116,9 +125,10 @@ height: 3px; width: 3px; } + .icon-resize-horiz::before, -.icon-resize-vert::before, .icon-resize-horiz::after, +.icon-resize-vert::before, .icon-resize-vert::after { border: .1rem solid currentColor; border-bottom: 0; @@ -127,24 +137,25 @@ height: .45em; width: .45em; } + .icon-resize-horiz::before, .icon-resize-vert::before { - -ms-transform: translate(-50%, -90%) rotate(45deg); transform: translate(-50%, -90%) rotate(45deg); } + .icon-resize-horiz::after, .icon-resize-vert::after { - -ms-transform: translate(-50%, -10%) rotate(225deg); transform: translate(-50%, -10%) rotate(225deg); } + .icon-resize-horiz::before { - -ms-transform: translate(-90%, -50%) rotate(-45deg); transform: translate(-90%, -50%) rotate(-45deg); } + .icon-resize-horiz::after { - -ms-transform: translate(-10%, -50%) rotate(135deg); transform: translate(-10%, -50%) rotate(135deg); } + .icon-more-horiz::before, .icon-more-vert::before { background: currentColor; @@ -154,9 +165,11 @@ height: 3px; width: 3px; } + .icon-more-vert::before { box-shadow: 0 -.4em, 0 .4em; } + .icon-plus::before, .icon-minus::before, .icon-cross::before { @@ -165,6 +178,7 @@ height: .1rem; width: 100%; } + .icon-plus::after, .icon-cross::after { background: currentColor; @@ -172,44 +186,49 @@ height: 100%; width: .1rem; } + .icon-cross::before { width: 100%; } + .icon-cross::after { height: 100%; } + .icon-cross::before, .icon-cross::after { - -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } + .icon-check::before { border: .1rem solid currentColor; border-right: 0; border-top: 0; content: ""; height: .5em; - -ms-transform: translate(-50%, -75%) rotate(-45deg); - transform: translate(-50%, -75%) rotate(-45deg); + transform: translate(-50%, -75%) rotate(-45deg); width: .9em; } + .icon-stop { border: .1rem solid currentColor; border-radius: 50%; } + .icon-stop::before { background: currentColor; content: ""; height: .1rem; - -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); width: 1em; } + .icon-shutdown { border: .1rem solid currentColor; border-radius: 50%; border-top-color: transparent; } + .icon-shutdown::before { background: currentColor; content: ""; @@ -217,6 +236,7 @@ top: .1em; width: .1rem; } + .icon-refresh::before { border: .1rem solid currentColor; border-radius: 50%; @@ -225,6 +245,7 @@ height: 1em; width: 1em; } + .icon-refresh::after { border: .2em solid currentColor; border-left-color: transparent; @@ -235,6 +256,7 @@ top: 20%; width: 0; } + .icon-search::before { border: .1rem solid currentColor; border-radius: 50%; @@ -242,28 +264,28 @@ height: .75em; left: 5%; top: 5%; - -ms-transform: translate(0, 0) rotate(45deg); transform: translate(0, 0) rotate(45deg); width: .75em; } + .icon-search::after { background: currentColor; content: ""; height: .1rem; left: 80%; top: 80%; - -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); width: .4em; } + .icon-edit::before { border: .1rem solid currentColor; content: ""; height: .4em; - -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; @@ -272,10 +294,10 @@ height: 0; left: 5%; top: 95%; - -ms-transform: translate(0, -100%); transform: translate(0, -100%); width: 0; } + .icon-delete::before { border: .1rem solid currentColor; border-bottom-left-radius: .1rem; @@ -286,6 +308,7 @@ top: 60%; width: .75em; } + .icon-delete::after { background: currentColor; box-shadow: -.25em .2em, .25em .2em; @@ -294,12 +317,14 @@ top: .05rem; width: .5em; } + .icon-share { border: .1rem solid currentColor; border-radius: .1rem; border-right: 0; border-top: 0; } + .icon-share::before { border: .1rem solid currentColor; border-left: 0; @@ -308,10 +333,10 @@ height: .4em; left: 100%; top: .25em; - -ms-transform: translate(-125%, -50%) rotate(-45deg); transform: translate(-125%, -50%) rotate(-45deg); width: .4em; } + .icon-share::after { border: .1rem solid currentColor; border-bottom: 0; @@ -321,6 +346,7 @@ height: .5em; width: .6em; } + .icon-flag::before { background: currentColor; content: ""; @@ -328,6 +354,7 @@ left: 15%; width: .1rem; } + .icon-flag::after { border: .1rem solid currentColor; border-bottom-right-radius: .1rem; @@ -339,6 +366,7 @@ top: 35%; width: .8em; } + .icon-bookmark::before { border: .1rem solid currentColor; border-bottom: 0; @@ -348,6 +376,7 @@ height: .9em; width: .8em; } + .icon-bookmark::after { border: .1rem solid currentColor; border-bottom: 0; @@ -355,14 +384,15 @@ border-radius: .1rem; content: ""; height: .5em; - -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: .1rem solid currentColor; } + .icon-download::before, .icon-upload::before { border: .1rem solid currentColor; @@ -370,10 +400,10 @@ border-right: 0; content: ""; height: .5em; - -ms-transform: translate(-50%, -60%) rotate(-135deg); - transform: translate(-50%, -60%) rotate(-135deg); + transform: translate(-50%, -60%) rotate(-135deg); width: .5em; } + .icon-download::after, .icon-upload::after { background: currentColor; @@ -382,35 +412,37 @@ top: 40%; width: .1rem; } + .icon-upload::before { - -ms-transform: translate(-50%, -60%) rotate(45deg); transform: translate(-50%, -60%) rotate(45deg); } + .icon-upload::after { top: 50%; } + .icon-time { border: .1rem solid currentColor; border-radius: 50%; } + .icon-time::before { background: currentColor; content: ""; height: .4em; - -ms-transform: translate(-50%, -75%); transform: translate(-50%, -75%); width: .1rem; } + .icon-time::after { background: currentColor; content: ""; height: .3em; - -ms-transform: translate(-50%, -75%) rotate(90deg); transform: translate(-50%, -75%) rotate(90deg); - -ms-transform-origin: 50% 90%; transform-origin: 50% 90%; width: .1rem; } + .icon-mail::before { border: .1rem solid currentColor; border-radius: .1rem; @@ -418,16 +450,17 @@ height: .8em; width: 1em; } + .icon-mail::after { border: .1rem solid currentColor; border-right: 0; border-top: 0; content: ""; height: .5em; - -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: .1rem solid currentColor; border-radius: 50%; @@ -436,6 +469,7 @@ top: 25%; width: .45em; } + .icon-people::after { border: .1rem solid currentColor; border-radius: 50% 50% 0 0; @@ -444,12 +478,14 @@ top: 75%; width: .9em; } + .icon-message { border: .1rem solid currentColor; border-bottom: 0; border-radius: .1rem; border-right: 0; } + .icon-message::before { border: .1rem solid currentColor; border-bottom-right-radius: .1rem; @@ -461,6 +497,7 @@ top: 40%; width: .7em; } + .icon-message::after { background: currentColor; border-radius: .1rem; @@ -468,14 +505,15 @@ height: .3em; left: 10%; top: 100%; - -ms-transform: translate(0, -90%) rotate(45deg); transform: translate(0, -90%) rotate(45deg); width: .1rem; } + .icon-photo { border: .1rem solid currentColor; border-radius: .1rem; } + .icon-photo::before { border: .1rem solid currentColor; border-radius: 50%; @@ -485,6 +523,7 @@ top: 35%; width: .25em; } + .icon-photo::after { border: .1rem solid currentColor; border-bottom: 0; @@ -492,10 +531,10 @@ content: ""; height: .5em; left: 60%; - -ms-transform: translate(-50%, 25%) rotate(-45deg); transform: translate(-50%, 25%) rotate(-45deg); width: .5em; } + .icon-link::before, .icon-link::after { border: .1rem solid currentColor; @@ -505,36 +544,38 @@ height: .5em; width: .75em; } + .icon-link::before { - -ms-transform: translate(-70%, -45%) rotate(-45deg); transform: translate(-70%, -45%) rotate(-45deg); } + .icon-link::after { - -ms-transform: translate(-30%, -55%) rotate(135deg); transform: translate(-30%, -55%) rotate(135deg); } + .icon-location::before { border: .1rem solid currentColor; border-radius: 50% 50% 50% 0; content: ""; height: .8em; - -ms-transform: translate(-50%, -60%) rotate(-45deg); transform: translate(-50%, -60%) rotate(-45deg); width: .8em; } + .icon-location::after { border: .1rem solid currentColor; border-radius: 50%; content: ""; height: .2em; - -ms-transform: translate(-50%, -80%); transform: translate(-50%, -80%); width: .2em; } + .icon-emoji { border: .1rem solid currentColor; border-radius: 50%; } + .icon-emoji::before { border-radius: 50%; box-shadow: -.17em -.15em, .17em -.15em; @@ -542,6 +583,7 @@ height: .1em; width: .1em; } + .icon-emoji::after { border: .1rem solid currentColor; border-bottom-color: transparent; @@ -549,10 +591,10 @@ border-right-color: transparent; content: ""; height: .5em; - -ms-transform: translate(-50%, -40%) rotate(-135deg); transform: translate(-50%, -40%) rotate(-135deg); width: .5em; } + .accordion .icon, .btn .icon, .toast .icon, |