Summary Files Commits Branches @commit @diff @stats
path: root / src / icons.less
diff options
context:
space:
mode:
1 files changed, 147 insertions, 43 deletions
-rw-r--r--src/icons.less190
diff --git a/src/icons.less b/src/icons.less
index dd77944..ce13756 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -1,8 +1,11 @@
// CSS Icons
+@icon-border-width: .2rem;
+
.icon {
box-sizing: border-box;
display: inline-block;
font-size: inherit;
+ font-style: normal;
height: 1em;
position: relative;
text-indent: -999rem;
@@ -159,7 +162,7 @@
background: currentColor;
content: "";
height: @icon-border-width;
- width: 90%;
+ width: 100%;
}
}
.icon-plus,
@@ -167,7 +170,7 @@
&::after {
background: currentColor;
content: "";
- height: 90%;
+ height: 100%;
width: @icon-border-width;
}
}
@@ -197,6 +200,33 @@
}
}
+// Icon stop
+.icon-stop {
+ border: @icon-border-width solid currentColor;
+ border-radius: 50%;
+ &::before {
+ background: currentColor;
+ content: "";
+ height: @icon-border-width;
+ transform: translate(-50%, -50%) rotate(45deg);
+ width: 1em;
+ }
+}
+
+// Icon shutdown
+.icon-shutdown {
+ border: @icon-border-width solid currentColor;
+ border-radius: 50%;
+ border-top-color: transparent;
+ &::before {
+ background: currentColor;
+ content: "";
+ height: .5em;
+ top: .1em;
+ width: @icon-border-width;
+ }
+}
+
// Icon refresh
.icon-refresh {
&::before {
@@ -204,8 +234,8 @@
border-radius: 50%;
border-right-color: transparent;
content: "";
- height: .9em;
- width: .9em;
+ height: 1em;
+ width: 1em;
}
&::after {
border: .2em solid currentColor;
@@ -213,8 +243,8 @@
border-left-color: transparent;
content: "";
height: 0;
- left: 75%;
- top: 25%;
+ left: 80%;
+ top: 20%;
width: 0;
}
}
@@ -257,7 +287,7 @@
border-right-color: transparent;
content: "";
height: 0;
- left: 10%;
+ left: 5%;
top: 95%;
transform: translate(0, -100%);
width: 0;
@@ -266,25 +296,23 @@
// Icon delete
.icon-delete {
- height: .7em;
- margin: .15em .1em;
- width: .8em;
&::before {
border: @icon-border-width solid currentColor;
border-bottom-left-radius: @border-radius;
border-bottom-right-radius: @border-radius;
border-top: 0;
content: "";
- height: .7em;
- top: 65%;
+ height: .75em;
+ top: 60%;
width: .75em;
}
&::after {
background: currentColor;
+ box-shadow: -.25em .2em, .25em .2em;
content: "";
height: @icon-border-width;
- top: 10%;
- width: .9em;
+ top: @icon-border-width/2;
+ width: .5em;
}
}
@@ -296,22 +324,22 @@
border-top: 0;
&::before {
border: @icon-border-width solid currentColor;
- border-bottom: 0;
- border-right: 0;
+ border-left: 0;
+ border-top: 0;
content: "";
- height: .45em;
+ height: .4em;
left: 100%;
- top: 36%;
- transform: translate(-125%, -50%) rotate(135deg);
- width: .45em;
+ top: .25em;
+ transform: translate(-125%, -50%) rotate(-45deg);
+ width: .4em;
}
&::after {
border: @icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
- border-radius: 75% 5%;
+ border-radius: 75% 0;
content: "";
- height: .4em;
+ height: .5em;
width: .6em;
}
}
@@ -322,7 +350,7 @@
background: currentColor;
content: "";
height: 1em;
- left: 10%;
+ left: 15%;
width: @icon-border-width;
}
&::after {
@@ -333,8 +361,8 @@
content: "";
height: .65em;
top: 35%;
- left: 55%;
- width: .75em;
+ left: 60%;
+ width: .8em;
}
}
@@ -346,8 +374,8 @@
border-top-left-radius: @border-radius;
border-top-right-radius: @border-radius;
content: "";
- height: 90%;
- width: 90%;
+ height: .9em;
+ width: .8em;
}
&::after {
border: @icon-border-width solid currentColor;
@@ -355,9 +383,9 @@
border-left: 0;
border-radius: @border-radius;
content: "";
- height: 50%;
+ height: .5em;
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
- width: 50%;
+ width: .5em;
}
}
@@ -453,24 +481,57 @@
}
}
-// Icon file
-.icon-file {
+// Icon message
+.icon-message {
+ border: @icon-border-width solid currentColor;
+ border-bottom: 0;
+ border-radius: @border-radius;
+ border-right: 0;
&::before {
border: @icon-border-width solid currentColor;
- border-radius: @border-radius .4em @border-radius @border-radius;
+ border-left: 0;
+ border-bottom-right-radius: @border-radius;
+ border-top: 0;
content: "";
- height: 1em;
- width: .9em;
+ height: .8em;
+ left: 65%;
+ top: 40%;
+ width: .7em;
}
&::after {
- border: .2em solid currentColor;
- border-top-color: transparent;
- border-right-color: transparent;
+ background: currentColor;
+ border-radius: @border-radius;
content: "";
- height: 0;
- left: .8em;
- top: .2em;
- width: 0;
+ height: .3em;
+ left: 10%;
+ top: 100%;
+ transform: translate(0, -90%) rotate(45deg);
+ width: @icon-border-width;
+ }
+}
+
+// Icon photo
+.icon-photo {
+ border: @icon-border-width solid currentColor;
+ border-radius: @border-radius;
+ &::before {
+ border: @icon-border-width solid currentColor;
+ border-radius: 50%;
+ content: "";
+ height: .25em;
+ left: 35%;
+ top: 35%;
+ width: .25em;
+ }
+ &::after {
+ border: @icon-border-width solid currentColor;
+ border-bottom: 0;
+ border-left: 0;
+ content: "";
+ height: .5em;
+ left: 60%;
+ transform: translate(-50%, 25%) rotate(-45deg);
+ width: .5em;
}
}
@@ -479,8 +540,8 @@
&::before,
&::after {
border: @icon-border-width solid currentColor;
- border-radius: 5em;
- border-right-color: transparent;
+ border-radius: 5em 0 0 5em;
+ border-right: 0;
content: "";
height: .5em;
width: .75em;
@@ -493,6 +554,49 @@
}
}
+// Icon location
+.icon-location {
+ &::before {
+ border: @icon-border-width solid currentColor;
+ border-radius: 50% 50% 50% 0;
+ content: "";
+ height: .8em;
+ transform: translate(-50%, -60%) rotate(-45deg);
+ width: .8em;
+ }
+ &::after {
+ border: @icon-border-width solid currentColor;
+ border-radius: 50%;
+ content: "";
+ height: .2em;
+ transform: translate(-50%, -80%);
+ width: .2em;
+ }
+}
+
+// Icon emoji
+.icon-emoji {
+ border: @icon-border-width solid currentColor;
+ border-radius: 50%;
+ &::before {
+ border-radius: 50%;
+ box-shadow: -.17em -.15em, .17em -.15em;
+ content: "";
+ height: .1em;
+ width: .1em;
+ }
+ &::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;
+ }
+}
+
// Component icon support
.btn,
.toast,