Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/picturepan2/spectre.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorYan Zhu <picturepan2@hotmail.com>2018-11-17 08:15:28 +0300
committerYan Zhu <picturepan2@hotmail.com>2018-11-17 08:15:28 +0300
commit4e3564bd6f8ae18fe3f2ec224171655f892e7ec1 (patch)
tree982f386ae2a602ba1852e20e40e97c577519722c
parent371ba0e24350b60d768f21a3299d1b99608aac26 (diff)
Update Icons
-rw-r--r--dist/spectre-icons.css52
-rw-r--r--dist/spectre-icons.min.css2
-rw-r--r--docs/dist/spectre-icons.css52
-rw-r--r--docs/dist/spectre-icons.min.css2
-rw-r--r--docs/layout/responsive.html20
-rw-r--r--docs/src/layout/responsive.pug28
-rw-r--r--src/icons/_icons-action.scss25
-rw-r--r--src/icons/_icons-core.scss1
-rw-r--r--src/icons/_icons-navigation.scss6
-rw-r--r--src/icons/_icons-object.scss21
10 files changed, 46 insertions, 163 deletions
diff --git a/dist/spectre-icons.css b/dist/spectre-icons.css
index d0e57ff..74f507f 100644
--- a/dist/spectre-icons.css
+++ b/dist/spectre-icons.css
@@ -13,6 +13,7 @@
.icon::before,
.icon::after {
+ content: "";
display: block;
left: 50%;
position: absolute;
@@ -54,7 +55,6 @@
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
- content: "";
height: .65em;
width: .65em;
}
@@ -78,7 +78,6 @@
.icon-back::after,
.icon-forward::after {
background: currentColor;
- content: "";
height: .1rem;
width: .8em;
}
@@ -86,7 +85,6 @@
.icon-downward::after,
.icon-upward::after {
background: currentColor;
- content: "";
height: .8em;
width: .1rem;
}
@@ -127,7 +125,6 @@
border-left: .3em solid transparent;
border-right: .3em solid transparent;
border-top: .3em solid currentColor;
- content: "";
height: 0;
transform: translate(-50%, -25%);
width: 0;
@@ -136,7 +133,6 @@
.icon-menu::before {
background: currentColor;
box-shadow: 0 -.35em, 0 .35em;
- content: "";
height: .1rem;
width: 100%;
}
@@ -144,7 +140,6 @@
.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: 3px;
width: 3px;
}
@@ -156,7 +151,6 @@
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
- content: "";
height: .45em;
width: .45em;
}
@@ -184,7 +178,6 @@
background: currentColor;
border-radius: 50%;
box-shadow: -.4em 0, .4em 0;
- content: "";
height: 3px;
width: 3px;
}
@@ -197,7 +190,6 @@
.icon-minus::before,
.icon-cross::before {
background: currentColor;
- content: "";
height: .1rem;
width: 100%;
}
@@ -205,7 +197,6 @@
.icon-plus::after,
.icon-cross::after {
background: currentColor;
- content: "";
height: 100%;
width: .1rem;
}
@@ -227,7 +218,6 @@
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
- content: "";
height: .5em;
transform: translate(-50%, -75%) rotate(-45deg);
width: .9em;
@@ -240,7 +230,6 @@
.icon-stop::before {
background: currentColor;
- content: "";
height: .1rem;
transform: translate(-50%, -50%) rotate(45deg);
width: 1em;
@@ -264,7 +253,6 @@
border: .1rem solid currentColor;
border-radius: 50%;
border-right-color: transparent;
- content: "";
height: 1em;
width: 1em;
}
@@ -273,7 +261,6 @@
border: .2em solid currentColor;
border-left-color: transparent;
border-top-color: transparent;
- content: "";
height: 0;
left: 80%;
top: 20%;
@@ -283,7 +270,6 @@
.icon-search::before {
border: .1rem solid currentColor;
border-radius: 50%;
- content: "";
height: .75em;
left: 5%;
top: 5%;
@@ -293,7 +279,6 @@
.icon-search::after {
background: currentColor;
- content: "";
height: .1rem;
left: 80%;
top: 80%;
@@ -303,7 +288,6 @@
.icon-edit::before {
border: .1rem solid currentColor;
- content: "";
height: .4em;
transform: translate(-40%, -60%) rotate(-45deg);
width: .85em;
@@ -313,7 +297,6 @@
border: .15em solid currentColor;
border-right-color: transparent;
border-top-color: transparent;
- content: "";
height: 0;
left: 5%;
top: 95%;
@@ -326,7 +309,6 @@
border-bottom-left-radius: .1rem;
border-bottom-right-radius: .1rem;
border-top: 0;
- content: "";
height: .75em;
top: 60%;
width: .75em;
@@ -335,7 +317,6 @@
.icon-delete::after {
background: currentColor;
box-shadow: -.25em .2em, .25em .2em;
- content: "";
height: .1rem;
top: .05rem;
width: .5em;
@@ -352,7 +333,6 @@
border: .1rem solid currentColor;
border-left: 0;
border-top: 0;
- content: "";
height: .4em;
left: 100%;
top: .25em;
@@ -365,14 +345,12 @@
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: .1rem;
@@ -383,7 +361,6 @@
border-bottom-right-radius: .1rem;
border-left: 0;
border-top-right-radius: .1rem;
- content: "";
height: .65em;
left: 60%;
top: 35%;
@@ -395,7 +372,6 @@
border-bottom: 0;
border-top-left-radius: .1rem;
border-top-right-radius: .1rem;
- content: "";
height: .9em;
width: .8em;
}
@@ -405,7 +381,6 @@
border-bottom: 0;
border-left: 0;
border-radius: .1rem;
- content: "";
height: .5em;
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
width: .5em;
@@ -421,7 +396,6 @@
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
- content: "";
height: .5em;
transform: translate(-50%, -60%) rotate(-135deg);
width: .5em;
@@ -430,7 +404,6 @@
.icon-download::after,
.icon-upload::after {
background: currentColor;
- content: "";
height: .6em;
top: 40%;
width: .1rem;
@@ -449,7 +422,6 @@
border-bottom: 0;
border-radius: .1rem;
border-right: 0;
- content: "";
height: .8em;
left: 40%;
top: 35%;
@@ -459,7 +431,6 @@
.icon-copy::after {
border: .1rem solid currentColor;
border-radius: .1rem;
- content: "";
height: .8em;
left: 60%;
top: 60%;
@@ -473,7 +444,6 @@
.icon-time::before {
background: currentColor;
- content: "";
height: .4em;
transform: translate(-50%, -75%);
width: .1rem;
@@ -481,7 +451,6 @@
.icon-time::after {
background: currentColor;
- content: "";
height: .3em;
transform: translate(-50%, -75%) rotate(90deg);
transform-origin: 50% 90%;
@@ -491,7 +460,6 @@
.icon-mail::before {
border: .1rem solid currentColor;
border-radius: .1rem;
- content: "";
height: .8em;
width: 1em;
}
@@ -500,7 +468,6 @@
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
- content: "";
height: .5em;
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
width: .5em;
@@ -509,7 +476,6 @@
.icon-people::before {
border: .1rem solid currentColor;
border-radius: 50%;
- content: "";
height: .45em;
top: 25%;
width: .45em;
@@ -518,7 +484,6 @@
.icon-people::after {
border: .1rem solid currentColor;
border-radius: 50% 50% 0 0;
- content: "";
height: .4em;
top: 75%;
width: .9em;
@@ -536,7 +501,6 @@
border-bottom-right-radius: .1rem;
border-left: 0;
border-top: 0;
- content: "";
height: .8em;
left: 65%;
top: 40%;
@@ -546,7 +510,6 @@
.icon-message::after {
background: currentColor;
border-radius: .1rem;
- content: "";
height: .3em;
left: 10%;
top: 100%;
@@ -562,7 +525,6 @@
.icon-photo::before {
border: .1rem solid currentColor;
border-radius: 50%;
- content: "";
height: .25em;
left: 35%;
top: 35%;
@@ -573,7 +535,6 @@
border: .1rem solid currentColor;
border-bottom: 0;
border-left: 0;
- content: "";
height: .5em;
left: 60%;
transform: translate(-50%, 25%) rotate(-45deg);
@@ -585,7 +546,6 @@
border: .1rem solid currentColor;
border-radius: 5em 0 0 5em;
border-right: 0;
- content: "";
height: .5em;
width: .75em;
}
@@ -601,7 +561,6 @@
.icon-location::before {
border: .1rem solid currentColor;
border-radius: 50% 50% 50% 0;
- content: "";
height: .8em;
transform: translate(-50%, -60%) rotate(-45deg);
width: .8em;
@@ -610,7 +569,6 @@
.icon-location::after {
border: .1rem solid currentColor;
border-radius: 50%;
- content: "";
height: .2em;
transform: translate(-50%, -80%);
width: .2em;
@@ -623,10 +581,9 @@
.icon-emoji::before {
border-radius: 50%;
- box-shadow: -.17em -.15em, .17em -.15em;
- content: "";
- height: .1em;
- width: .1em;
+ box-shadow: -.17em -.1em, .17em -.1em;
+ height: .15em;
+ width: .15em;
}
.icon-emoji::after {
@@ -634,7 +591,6 @@
border-bottom-color: transparent;
border-radius: 50%;
border-right-color: transparent;
- content: "";
height: .5em;
transform: translate(-50%, -40%) rotate(-135deg);
width: .5em;
diff --git a/dist/spectre-icons.min.css b/dist/spectre-icons.min.css
index 53790a5..9d1df0d 100644
--- a/dist/spectre-icons.min.css
+++ b/dist/spectre-icons.min.css
@@ -1 +1 @@
-/*! Spectre.css Icons v0.5.6 | 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:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{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;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";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;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{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:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;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;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:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem 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:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;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%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;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;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem 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:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;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;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-copy::before{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0;content:"";height:.8em;left:40%;top:35%;width:.8em}.icon-copy::after{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;left:60%;top:60%;width:.8em}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;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;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;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%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;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;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em} \ No newline at end of file
+/*! Spectre.css Icons v0.5.6 | 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:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{content:"";display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;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;height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{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;height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;height:.1rem;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:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;height:.1rem;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;border-top:0;height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;height:.5em;width:.6em}.icon-flag::before{background:currentColor;height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;height:.5em;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;border-bottom:0;border-right:0;height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-copy::before{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0;height:.8em;left:40%;top:35%;width:.8em}.icon-copy::after{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;left:60%;top:60%;width:.8em}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;height:.4em;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;border-left:0;border-top:0;height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;height:.3em;left:10%;top:100%;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%;height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.1em,.17em -.1em;height:.15em;width:.15em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em} \ No newline at end of file
diff --git a/docs/dist/spectre-icons.css b/docs/dist/spectre-icons.css
index d0e57ff..74f507f 100644
--- a/docs/dist/spectre-icons.css
+++ b/docs/dist/spectre-icons.css
@@ -13,6 +13,7 @@
.icon::before,
.icon::after {
+ content: "";
display: block;
left: 50%;
position: absolute;
@@ -54,7 +55,6 @@
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
- content: "";
height: .65em;
width: .65em;
}
@@ -78,7 +78,6 @@
.icon-back::after,
.icon-forward::after {
background: currentColor;
- content: "";
height: .1rem;
width: .8em;
}
@@ -86,7 +85,6 @@
.icon-downward::after,
.icon-upward::after {
background: currentColor;
- content: "";
height: .8em;
width: .1rem;
}
@@ -127,7 +125,6 @@
border-left: .3em solid transparent;
border-right: .3em solid transparent;
border-top: .3em solid currentColor;
- content: "";
height: 0;
transform: translate(-50%, -25%);
width: 0;
@@ -136,7 +133,6 @@
.icon-menu::before {
background: currentColor;
box-shadow: 0 -.35em, 0 .35em;
- content: "";
height: .1rem;
width: 100%;
}
@@ -144,7 +140,6 @@
.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: 3px;
width: 3px;
}
@@ -156,7 +151,6 @@
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
- content: "";
height: .45em;
width: .45em;
}
@@ -184,7 +178,6 @@
background: currentColor;
border-radius: 50%;
box-shadow: -.4em 0, .4em 0;
- content: "";
height: 3px;
width: 3px;
}
@@ -197,7 +190,6 @@
.icon-minus::before,
.icon-cross::before {
background: currentColor;
- content: "";
height: .1rem;
width: 100%;
}
@@ -205,7 +197,6 @@
.icon-plus::after,
.icon-cross::after {
background: currentColor;
- content: "";
height: 100%;
width: .1rem;
}
@@ -227,7 +218,6 @@
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
- content: "";
height: .5em;
transform: translate(-50%, -75%) rotate(-45deg);
width: .9em;
@@ -240,7 +230,6 @@
.icon-stop::before {
background: currentColor;
- content: "";
height: .1rem;
transform: translate(-50%, -50%) rotate(45deg);
width: 1em;
@@ -264,7 +253,6 @@
border: .1rem solid currentColor;
border-radius: 50%;
border-right-color: transparent;
- content: "";
height: 1em;
width: 1em;
}
@@ -273,7 +261,6 @@
border: .2em solid currentColor;
border-left-color: transparent;
border-top-color: transparent;
- content: "";
height: 0;
left: 80%;
top: 20%;
@@ -283,7 +270,6 @@
.icon-search::before {
border: .1rem solid currentColor;
border-radius: 50%;
- content: "";
height: .75em;
left: 5%;
top: 5%;
@@ -293,7 +279,6 @@
.icon-search::after {
background: currentColor;
- content: "";
height: .1rem;
left: 80%;
top: 80%;
@@ -303,7 +288,6 @@
.icon-edit::before {
border: .1rem solid currentColor;
- content: "";
height: .4em;
transform: translate(-40%, -60%) rotate(-45deg);
width: .85em;
@@ -313,7 +297,6 @@
border: .15em solid currentColor;
border-right-color: transparent;
border-top-color: transparent;
- content: "";
height: 0;
left: 5%;
top: 95%;
@@ -326,7 +309,6 @@
border-bottom-left-radius: .1rem;
border-bottom-right-radius: .1rem;
border-top: 0;
- content: "";
height: .75em;
top: 60%;
width: .75em;
@@ -335,7 +317,6 @@
.icon-delete::after {
background: currentColor;
box-shadow: -.25em .2em, .25em .2em;
- content: "";
height: .1rem;
top: .05rem;
width: .5em;
@@ -352,7 +333,6 @@
border: .1rem solid currentColor;
border-left: 0;
border-top: 0;
- content: "";
height: .4em;
left: 100%;
top: .25em;
@@ -365,14 +345,12 @@
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: .1rem;
@@ -383,7 +361,6 @@
border-bottom-right-radius: .1rem;
border-left: 0;
border-top-right-radius: .1rem;
- content: "";
height: .65em;
left: 60%;
top: 35%;
@@ -395,7 +372,6 @@
border-bottom: 0;
border-top-left-radius: .1rem;
border-top-right-radius: .1rem;
- content: "";
height: .9em;
width: .8em;
}
@@ -405,7 +381,6 @@
border-bottom: 0;
border-left: 0;
border-radius: .1rem;
- content: "";
height: .5em;
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
width: .5em;
@@ -421,7 +396,6 @@
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
- content: "";
height: .5em;
transform: translate(-50%, -60%) rotate(-135deg);
width: .5em;
@@ -430,7 +404,6 @@
.icon-download::after,
.icon-upload::after {
background: currentColor;
- content: "";
height: .6em;
top: 40%;
width: .1rem;
@@ -449,7 +422,6 @@
border-bottom: 0;
border-radius: .1rem;
border-right: 0;
- content: "";
height: .8em;
left: 40%;
top: 35%;
@@ -459,7 +431,6 @@
.icon-copy::after {
border: .1rem solid currentColor;
border-radius: .1rem;
- content: "";
height: .8em;
left: 60%;
top: 60%;
@@ -473,7 +444,6 @@
.icon-time::before {
background: currentColor;
- content: "";
height: .4em;
transform: translate(-50%, -75%);
width: .1rem;
@@ -481,7 +451,6 @@
.icon-time::after {
background: currentColor;
- content: "";
height: .3em;
transform: translate(-50%, -75%) rotate(90deg);
transform-origin: 50% 90%;
@@ -491,7 +460,6 @@
.icon-mail::before {
border: .1rem solid currentColor;
border-radius: .1rem;
- content: "";
height: .8em;
width: 1em;
}
@@ -500,7 +468,6 @@
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
- content: "";
height: .5em;
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
width: .5em;
@@ -509,7 +476,6 @@
.icon-people::before {
border: .1rem solid currentColor;
border-radius: 50%;
- content: "";
height: .45em;
top: 25%;
width: .45em;
@@ -518,7 +484,6 @@
.icon-people::after {
border: .1rem solid currentColor;
border-radius: 50% 50% 0 0;
- content: "";
height: .4em;
top: 75%;
width: .9em;
@@ -536,7 +501,6 @@
border-bottom-right-radius: .1rem;
border-left: 0;
border-top: 0;
- content: "";
height: .8em;
left: 65%;
top: 40%;
@@ -546,7 +510,6 @@
.icon-message::after {
background: currentColor;
border-radius: .1rem;
- content: "";
height: .3em;
left: 10%;
top: 100%;
@@ -562,7 +525,6 @@
.icon-photo::before {
border: .1rem solid currentColor;
border-radius: 50%;
- content: "";
height: .25em;
left: 35%;
top: 35%;
@@ -573,7 +535,6 @@
border: .1rem solid currentColor;
border-bottom: 0;
border-left: 0;
- content: "";
height: .5em;
left: 60%;
transform: translate(-50%, 25%) rotate(-45deg);
@@ -585,7 +546,6 @@
border: .1rem solid currentColor;
border-radius: 5em 0 0 5em;
border-right: 0;
- content: "";
height: .5em;
width: .75em;
}
@@ -601,7 +561,6 @@
.icon-location::before {
border: .1rem solid currentColor;
border-radius: 50% 50% 50% 0;
- content: "";
height: .8em;
transform: translate(-50%, -60%) rotate(-45deg);
width: .8em;
@@ -610,7 +569,6 @@
.icon-location::after {
border: .1rem solid currentColor;
border-radius: 50%;
- content: "";
height: .2em;
transform: translate(-50%, -80%);
width: .2em;
@@ -623,10 +581,9 @@
.icon-emoji::before {
border-radius: 50%;
- box-shadow: -.17em -.15em, .17em -.15em;
- content: "";
- height: .1em;
- width: .1em;
+ box-shadow: -.17em -.1em, .17em -.1em;
+ height: .15em;
+ width: .15em;
}
.icon-emoji::after {
@@ -634,7 +591,6 @@
border-bottom-color: transparent;
border-radius: 50%;
border-right-color: transparent;
- content: "";
height: .5em;
transform: translate(-50%, -40%) rotate(-135deg);
width: .5em;
diff --git a/docs/dist/spectre-icons.min.css b/docs/dist/spectre-icons.min.css
index 53790a5..9d1df0d 100644
--- a/docs/dist/spectre-icons.min.css
+++ b/docs/dist/spectre-icons.min.css
@@ -1 +1 @@
-/*! Spectre.css Icons v0.5.6 | 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:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{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;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";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;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{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:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;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;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:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem 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:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;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%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;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;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem 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:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;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;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-copy::before{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0;content:"";height:.8em;left:40%;top:35%;width:.8em}.icon-copy::after{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;left:60%;top:60%;width:.8em}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;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;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;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%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;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;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em} \ No newline at end of file
+/*! Spectre.css Icons v0.5.6 | 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:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{content:"";display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;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;height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{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;height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;height:.1rem;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:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;height:.1rem;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;border-top:0;height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;height:.5em;width:.6em}.icon-flag::before{background:currentColor;height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;height:.5em;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;border-bottom:0;border-right:0;height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-copy::before{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0;height:.8em;left:40%;top:35%;width:.8em}.icon-copy::after{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;left:60%;top:60%;width:.8em}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;height:.4em;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;border-left:0;border-top:0;height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;height:.3em;left:10%;top:100%;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%;height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.1em,.17em -.1em;height:.15em;width:.15em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em} \ No newline at end of file
diff --git a/docs/layout/responsive.html b/docs/layout/responsive.html
index e0612ee..d063927 100644
--- a/docs/layout/responsive.html
+++ b/docs/layout/responsive.html
@@ -204,10 +204,26 @@
<p>Spectre provides a neat responsive layout grid system and responsive visibility utilities.</p>
<div class="docs-demo columns">
<div class="column col-10 col-lg-8 col-md-6 col-sm-4">
- <div class="bg-gray docs-block">col-10 <br> col-lg-8 <br> col-md-6 <br> col-sm-4</div>
+ <div class="bg-gray docs-block">
+ <div class="text-primary">col-10</div>
+ <div class="text-dark hide-lg">col-lg-8</div>
+ <div class="text-primary show-lg">col-lg-8</div>
+ <div class="text-dark hide-md">col-md-6</div>
+ <div class="text-primary show-md">col-md-6</div>
+ <div class="text-dark hide-sm">col-sm-4</div>
+ <div class="text-primary show-sm">col-sm-4</div>
+ </div>
</div>
<div class="column col-2 col-lg-4 col-md-6 col-sm-8">
- <div class="bg-gray docs-block">col-2 <br> col-lg-4 <br> col-md-6 <br> col-sm-8</div>
+ <div class="bg-gray docs-block">
+ <div class="text-primary">col-2</div>
+ <div class="text-dark hide-lg">col-lg-4</div>
+ <div class="text-primary show-lg">col-lg-4</div>
+ <div class="text-dark hide-md">col-md-6</div>
+ <div class="text-primary show-md">col-md-6</div>
+ <div class="text-dark hide-sm">col-sm-8</div>
+ <div class="text-primary show-sm">col-sm-8</div>
+ </div>
</div>
</div>
<p>There are <code>col-xs-<1-12></code>, <code>col-sm-<1-12></code>, <code>col-md-<1-12></code>, <code>col-lg-<1-12></code> and <code>col-xl-<1-12></code> available for flexible grid across mobile, tablet and desktop viewport usage.</p>
diff --git a/docs/src/layout/responsive.pug b/docs/src/layout/responsive.pug
index 6516b26..1d0109a 100644
--- a/docs/src/layout/responsive.pug
+++ b/docs/src/layout/responsive.pug
@@ -15,22 +15,22 @@ block docs-content
.docs-demo.columns
.column.col-10.col-lg-8.col-md-6.col-sm-4
.bg-gray.docs-block
- | col-10
- br
- | col-lg-8
- br
- | col-md-6
- br
- | col-sm-4
+ .text-primary col-10
+ .text-dark.hide-lg col-lg-8
+ .text-primary.show-lg col-lg-8
+ .text-dark.hide-md col-md-6
+ .text-primary.show-md col-md-6
+ .text-dark.hide-sm col-sm-4
+ .text-primary.show-sm col-sm-4
.column.col-2.col-lg-4.col-md-6.col-sm-8
.bg-gray.docs-block
- | col-2
- br
- | col-lg-4
- br
- | col-md-6
- br
- | col-sm-8
+ .text-primary col-2
+ .text-dark.hide-lg col-lg-4
+ .text-primary.show-lg col-lg-4
+ .text-dark.hide-md col-md-6
+ .text-primary.show-md col-md-6
+ .text-dark.hide-sm col-sm-8
+ .text-primary.show-sm col-sm-8
p
| There are #[code col-xs-<1-12>], #[code col-sm-<1-12>], #[code col-md-<1-12>], #[code col-lg-<1-12>] and #[code col-xl-<1-12>] available for flexible grid across mobile, tablet and desktop viewport usage.
diff --git a/src/icons/_icons-action.scss b/src/icons/_icons-action.scss
index 38d42db..1b952ea 100644
--- a/src/icons/_icons-action.scss
+++ b/src/icons/_icons-action.scss
@@ -1,4 +1,3 @@
-
// Icon resize
.icon-resize-horiz,
.icon-resize-vert {
@@ -7,7 +6,6 @@
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
- content: "";
height: .45em;
width: .45em;
}
@@ -35,7 +33,6 @@
background: currentColor;
box-shadow: -.4em 0, .4em 0;
border-radius: 50%;
- content: "";
height: 3px;
width: 3px;
}
@@ -53,7 +50,6 @@
.icon-cross {
&::before {
background: currentColor;
- content: "";
height: $icon-border-width;
width: 100%;
}
@@ -63,7 +59,6 @@
.icon-cross {
&::after {
background: currentColor;
- content: "";
height: 100%;
width: $icon-border-width;
}
@@ -88,7 +83,6 @@
border: $icon-border-width solid currentColor;
border-right: 0;
border-top: 0;
- content: "";
height: .5em;
width: .9em;
transform: translate(-50%, -75%) rotate(-45deg);
@@ -101,7 +95,6 @@
border-radius: 50%;
&::before {
background: currentColor;
- content: "";
height: $icon-border-width;
transform: translate(-50%, -50%) rotate(45deg);
width: 1em;
@@ -128,7 +121,6 @@
border: $icon-border-width solid currentColor;
border-radius: 50%;
border-right-color: transparent;
- content: "";
height: 1em;
width: 1em;
}
@@ -136,7 +128,6 @@
border: .2em solid currentColor;
border-top-color: transparent;
border-left-color: transparent;
- content: "";
height: 0;
left: 80%;
top: 20%;
@@ -149,7 +140,6 @@
&::before {
border: $icon-border-width solid currentColor;
border-radius: 50%;
- content: "";
height: .75em;
left: 5%;
top: 5%;
@@ -158,7 +148,6 @@
}
&::after {
background: currentColor;
- content: "";
height: $icon-border-width;
left: 80%;
top: 80%;
@@ -171,7 +160,6 @@
.icon-edit {
&::before {
border: $icon-border-width solid currentColor;
- content: "";
height: .4em;
transform: translate(-40%, -60%) rotate(-45deg);
width: .85em;
@@ -180,7 +168,6 @@
border: .15em solid currentColor;
border-top-color: transparent;
border-right-color: transparent;
- content: "";
height: 0;
left: 5%;
top: 95%;
@@ -196,7 +183,6 @@
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
border-top: 0;
- content: "";
height: .75em;
top: 60%;
width: .75em;
@@ -204,7 +190,6 @@
&::after {
background: currentColor;
box-shadow: -.25em .2em, .25em .2em;
- content: "";
height: $icon-border-width;
top: $icon-border-width/2;
width: .5em;
@@ -221,7 +206,6 @@
border: $icon-border-width solid currentColor;
border-left: 0;
border-top: 0;
- content: "";
height: .4em;
left: 100%;
top: .25em;
@@ -233,7 +217,6 @@
border-bottom: 0;
border-right: 0;
border-radius: 75% 0;
- content: "";
height: .5em;
width: .6em;
}
@@ -243,7 +226,6 @@
.icon-flag {
&::before {
background: currentColor;
- content: "";
height: 1em;
left: 15%;
width: $icon-border-width;
@@ -253,7 +235,6 @@
border-bottom-right-radius: $border-radius;
border-left: 0;
border-top-right-radius: $border-radius;
- content: "";
height: .65em;
top: 35%;
left: 60%;
@@ -268,7 +249,6 @@
border-bottom: 0;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
- content: "";
height: .9em;
width: .8em;
}
@@ -277,7 +257,6 @@
border-bottom: 0;
border-left: 0;
border-radius: $border-radius;
- content: "";
height: .5em;
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
width: .5em;
@@ -292,14 +271,12 @@
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
- content: "";
height: .5em;
width: .5em;
transform: translate(-50%, -60%) rotate(-135deg);
}
&::after {
background: currentColor;
- content: "";
height: .6em;
top: 40%;
width: $icon-border-width;
@@ -322,7 +299,6 @@
border-radius: $border-radius;
border-right: 0;
border-bottom: 0;
- content: "";
height: .8em;
left: 40%;
top: 35%;
@@ -331,7 +307,6 @@
&::after {
border: $icon-border-width solid currentColor;
border-radius: $border-radius;
- content: "";
height: .8em;
left: 60%;
top: 60%;
diff --git a/src/icons/_icons-core.scss b/src/icons/_icons-core.scss
index 577024d..9a67ae4 100644
--- a/src/icons/_icons-core.scss
+++ b/src/icons/_icons-core.scss
@@ -15,6 +15,7 @@ $icon-prefix: "icon";
width: 1em;
&::before,
&::after {
+ content: "";
display: block;
left: 50%;
position: absolute;
diff --git a/src/icons/_icons-navigation.scss b/src/icons/_icons-navigation.scss
index 7d7fcd3..92ab231 100644
--- a/src/icons/_icons-navigation.scss
+++ b/src/icons/_icons-navigation.scss
@@ -11,7 +11,6 @@
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
- content: "";
height: .65em;
width: .65em;
}
@@ -45,7 +44,6 @@
.icon-forward {
&::after {
background: currentColor;
- content: "";
height: $icon-border-width;
width: .8em;
}
@@ -55,7 +53,6 @@
.icon-upward {
&::after {
background: currentColor;
- content: "";
height: .8em;
width: $icon-border-width;
}
@@ -103,7 +100,6 @@
border-top: .3em solid currentColor;
border-right: .3em solid transparent;
border-left: .3em solid transparent;
- content: "";
height: 0;
transform: translate(-50%, -25%);
width: 0;
@@ -115,7 +111,6 @@
&::before {
background: currentColor;
box-shadow: 0 -.35em, 0 .35em;
- content: "";
height: $icon-border-width;
width: 100%;
}
@@ -126,7 +121,6 @@
&::before {
background: currentColor;
box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
- content: "";
height: 3px;
width: 3px;
}
diff --git a/src/icons/_icons-object.scss b/src/icons/_icons-object.scss
index 746d25b..00597d8 100644
--- a/src/icons/_icons-object.scss
+++ b/src/icons/_icons-object.scss
@@ -4,14 +4,12 @@
border-radius: 50%;
&::before {
background: currentColor;
- content: "";
height: .4em;
transform: translate(-50%, -75%);
width: $icon-border-width;
}
&::after {
background: currentColor;
- content: "";
height: .3em;
transform: translate(-50%, -75%) rotate(90deg);
transform-origin: 50% 90%;
@@ -24,7 +22,6 @@
&::before {
border: $icon-border-width solid currentColor;
border-radius: $border-radius;
- content: "";
height: .8em;
width: 1em;
}
@@ -32,7 +29,6 @@
border: $icon-border-width solid currentColor;
border-right: 0;
border-top: 0;
- content: "";
height: .5em;
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
width: .5em;
@@ -44,7 +40,6 @@
&::before {
border: $icon-border-width solid currentColor;
border-radius: 50%;
- content: "";
height: .45em;
top: 25%;
width: .45em;
@@ -52,7 +47,6 @@
&::after {
border: $icon-border-width solid currentColor;
border-radius: 50% 50% 0 0;
- content: "";
height: .4em;
top: 75%;
width: .9em;
@@ -70,7 +64,6 @@
border-bottom-right-radius: $border-radius;
border-left: 0;
border-top: 0;
- content: "";
height: .8em;
left: 65%;
top: 40%;
@@ -79,7 +72,6 @@
&::after {
background: currentColor;
border-radius: $border-radius;
- content: "";
height: .3em;
left: 10%;
top: 100%;
@@ -95,7 +87,6 @@
&::before {
border: $icon-border-width solid currentColor;
border-radius: 50%;
- content: "";
height: .25em;
left: 35%;
top: 35%;
@@ -105,7 +96,6 @@
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-left: 0;
- content: "";
height: .5em;
left: 60%;
transform: translate(-50%, 25%) rotate(-45deg);
@@ -120,7 +110,6 @@
border: $icon-border-width solid currentColor;
border-radius: 5em 0 0 5em;
border-right: 0;
- content: "";
height: .5em;
width: .75em;
}
@@ -137,7 +126,6 @@
&::before {
border: $icon-border-width solid currentColor;
border-radius: 50% 50% 50% 0;
- content: "";
height: .8em;
transform: translate(-50%, -60%) rotate(-45deg);
width: .8em;
@@ -145,7 +133,6 @@
&::after {
border: $icon-border-width solid currentColor;
border-radius: 50%;
- content: "";
height: .2em;
transform: translate(-50%, -80%);
width: .2em;
@@ -158,17 +145,15 @@
border-radius: 50%;
&::before {
border-radius: 50%;
- box-shadow: -.17em -.15em, .17em -.15em;
- content: "";
- height: .1em;
- width: .1em;
+ box-shadow: -.17em -.1em, .17em -.1em;
+ height: .15em;
+ width: .15em;
}
&::after {
border: $icon-border-width solid currentColor;
border-bottom-color: transparent;
border-radius: 50%;
border-right-color: transparent;
- content: "";
height: .5em;
transform: translate(-50%, -40%) rotate(-135deg);
width: .5em;