moved from kodorvan/understyle
This commit is contained in:
12
LICENCE
Normal file
12
LICENCE
Normal file
@@ -0,0 +1,12 @@
|
||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||
Version 2, December 2004
|
||||
|
||||
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
|
||||
|
||||
Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.
|
||||
|
||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. You just DO WHAT THE FUCK YOU WANT TO.
|
||||
|
||||
15
README.md
Normal file
15
README.md
Normal file
@@ -0,0 +1,15 @@
|
||||
# Pure CSS icons
|
||||
Icons for a wide variety of tasks, drawn entirely in **pure CSS**
|
||||
|
||||
*Inspired by and partially borrowed from **[css.gg](https://css.gg/)***
|
||||
|
||||
## Intstruction
|
||||
```HTML
|
||||
<link type="text/css" rel="stylesheet" href="/css/icons/shopping_cart.css" />
|
||||
|
||||
<i class="icon shopping cart"></i>
|
||||
```
|
||||
more real and complex:
|
||||
```HTML
|
||||
<button style="display: flex; gap: 1rem;"><i class="icon shopping cart"></i>Cart: 0</button>
|
||||
```
|
||||
44
arrow.css
Normal file
44
arrow.css
Normal file
@@ -0,0 +1,44 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.arrow:not(.circle, .square) {
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
transform: rotate(var(--rotate));
|
||||
}
|
||||
|
||||
i.icon.arrow.short:not(.circle, .square) {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
i.icon.arrow:not(.circle, .square)::after,
|
||||
i.icon.arrow:not(.circle, .square)::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
i.icon.arrow:not(.circle, .square)::after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 7px;
|
||||
}
|
||||
|
||||
i.icon.arrow.small:not(.circle, .square)::after {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
i.icon.arrow:not(.circle, .square, .short)::before {
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
bottom: 10px;
|
||||
background-color: currentColor;
|
||||
}
|
||||
36
arrow_circle.css
Normal file
36
arrow_circle.css
Normal file
@@ -0,0 +1,36 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.arrow.circle {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
i.icon.arrow.circle::after,
|
||||
i.icon.arrow.circle::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
i.icon.arrow.circle::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 6px;
|
||||
}
|
||||
|
||||
i.icon.arrow.circle::before {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
bottom: 8px;
|
||||
background: currentColor;
|
||||
}
|
||||
39
calculator.css
Normal file
39
calculator.css
Normal file
@@ -0,0 +1,39 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.calculator {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
height: 22px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
border: 2px solid;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 6px;
|
||||
width: 2px;
|
||||
box-shadow:
|
||||
4px 0 0,
|
||||
8px 0 0,
|
||||
0 4px 0,
|
||||
4px 4px 0,
|
||||
8px 4px 0,
|
||||
0 8px 0,
|
||||
4px 8px 0,
|
||||
8px 8px 0,
|
||||
8px 6px 0;
|
||||
}
|
||||
}
|
||||
31
close.css
Normal file
31
close.css
Normal file
@@ -0,0 +1,31 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.close {
|
||||
--diameter: 22px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: var(--diameter);
|
||||
height: var(--diameter);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
i.icon.close::after,
|
||||
i.icon.close::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 5px;
|
||||
top: 8px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
i.icon.close::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
40
comment.css
Normal file
40
comment.css
Normal file
@@ -0,0 +1,40 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.comment {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid;
|
||||
border-bottom: 0;
|
||||
box-shadow:
|
||||
-6px 8px 0 -6px,
|
||||
6px 8px 0 -6px;
|
||||
}
|
||||
|
||||
i.icon.comment::after,
|
||||
i.icon.comment::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
i.icon.comment::before {
|
||||
right: 4px;
|
||||
bottom: -6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
border-top-color: transparent;
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
|
||||
i.icon.comment::after {
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
height: 2px;
|
||||
background-color: currentColor;
|
||||
box-shadow: 0 4px 0 0;
|
||||
}
|
||||
62
corner.css
Normal file
62
corner.css
Normal file
@@ -0,0 +1,62 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.corner {
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
i.icon.corner::after,
|
||||
i.icon.corner::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
i.icon.corner.left::after,
|
||||
i.icon.corner.left::before {
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
i.icon.corner.right::after,
|
||||
i.icon.corner.right::before {
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
i.icon.corner::after {
|
||||
bottom: 3px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
i.icon.corner.left::after {
|
||||
border-left: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
i.icon.corner.right::after {
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
}
|
||||
|
||||
i.icon.corner::before {
|
||||
bottom: 6px;
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
i.icon.corner.left::before {
|
||||
border-bottom-right-radius: 4px;
|
||||
border-right: 2px solid;
|
||||
}
|
||||
|
||||
i.icon.corner.right::before {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-left: 2px solid;
|
||||
}
|
||||
|
||||
29
display_grid.css
Normal file
29
display_grid.css
Normal file
@@ -0,0 +1,29 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.display.grid {
|
||||
display: block;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: 0 0 0 2px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 4px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border-right: 4px solid;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
39
enter.css
Normal file
39
enter.css
Normal file
@@ -0,0 +1,39 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.enter {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border: 2px solid;
|
||||
border-left: 0;
|
||||
box-shadow:
|
||||
-8px -6px 0 -6px,
|
||||
-8px 6px 0 -6px;
|
||||
}
|
||||
|
||||
i.icon.enter::after,
|
||||
i.icon.enter::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
i.icon.enter::before {
|
||||
top: 6px;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
i.icon.enter::after {
|
||||
top: 4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-right: 2px solid;
|
||||
border-top: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
24
hashtag.css
Normal file
24
hashtag.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.hashtag {
|
||||
position: relative;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border-left: 2px solid;
|
||||
border-right: 2px solid;
|
||||
|
||||
&::before {
|
||||
top: 4px;
|
||||
left: -6px;
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 8px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border-top: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
}
|
||||
78
house.css
Normal file
78
house.css
Normal file
@@ -0,0 +1,78 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.house:not(.panelka) {
|
||||
position: relative;
|
||||
margin-bottom: -7px;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
border-top-right-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
background:
|
||||
linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0
|
||||
bottom/4px 2px,
|
||||
linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right
|
||||
bottom/4px 2px;
|
||||
}
|
||||
|
||||
i.icon.house:not(.panelka).small {
|
||||
margin-bottom: -5px;
|
||||
width: 14px;
|
||||
height: 12px;
|
||||
background:
|
||||
linear-gradient(to left, currentColor 4px, transparent 0) no-repeat 0
|
||||
bottom / 4px 2px,
|
||||
linear-gradient(to left, currentColor 2px, transparent 0) no-repeat right
|
||||
bottom / 2px 2px;
|
||||
}
|
||||
|
||||
i.icon.house:not(.panelka)::after,
|
||||
i.icon.house:not(.panelka)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
i.icon.house:not(.panelka)::before {
|
||||
left: 0;
|
||||
top: -5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
transform: rotate(45deg);
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
i.icon.house:not(.panelka).small::before {
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
|
||||
i.icon.house:not(.panelka)::after {
|
||||
left: 3px;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
height: 10px;
|
||||
border: 2px solid;
|
||||
border-radius: 100px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
i.icon.house:not(.panelka).small::after {
|
||||
left: 2px;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
75
house_panelka.css
Normal file
75
house_panelka.css
Normal file
@@ -0,0 +1,75 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.house.panelka {
|
||||
position: relative;
|
||||
left: -8px;
|
||||
width: 12px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border: 2px solid;
|
||||
background:
|
||||
linear-gradient(to bottom, currentColor 5px, transparent 0) no-repeat center
|
||||
2px/12px 2px,
|
||||
linear-gradient(to bottom, currentColor 5px, transparent 0) no-repeat center
|
||||
6px/12px 2px,
|
||||
linear-gradient(to bottom, currentColor 5px, transparent 0) no-repeat center
|
||||
10px/12px 2px,
|
||||
linear-gradient(to bottom, currentColor 18px, transparent 0) no-repeat
|
||||
center/2px 18px;
|
||||
}
|
||||
|
||||
i.icon.house.panelka.small {
|
||||
width: 10px;
|
||||
height: 14px;
|
||||
background:
|
||||
linear-gradient(to bottom, currentColor 3px, transparent 0) no-repeat center
|
||||
2px / 10px 2px,
|
||||
linear-gradient(to bottom, currentColor 3px, transparent 0) no-repeat center
|
||||
6px / 10px 2px,
|
||||
linear-gradient(to bottom, currentColor 14px, transparent 0) no-repeat
|
||||
center / 2px 14px;
|
||||
}
|
||||
|
||||
i.icon.house.panelka::after,
|
||||
i.icon.house.panelka::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
i.icon.house.panelka::before {
|
||||
top: 6px;
|
||||
right: -8px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
box-shadow:
|
||||
0 4px 0,
|
||||
-4px 4px 0,
|
||||
-4px 0 0;
|
||||
}
|
||||
|
||||
i.icon.house.panelka.small::before {
|
||||
top: 4px;
|
||||
right: -8px;
|
||||
box-shadow:
|
||||
0 3px 0,
|
||||
-3px 3px 0,
|
||||
-3px 0 0;
|
||||
}
|
||||
|
||||
i.icon.house.panelka::after {
|
||||
left: 8px;
|
||||
bottom: -2px;
|
||||
width: 12px;
|
||||
height: 14px;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
i.icon.house.panelka.small::after {
|
||||
left: 6px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
30
layout_grid.css
Normal file
30
layout_grid.css
Normal file
@@ -0,0 +1,30 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.layout.grid,
|
||||
i.icon.layout.grid::after,
|
||||
i.icon.layout.grid::before {
|
||||
position: relative;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
i.icon.layout.grid {
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 4px;
|
||||
border-left: 4px solid;
|
||||
border-right: 4px solid;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
55
list_add.css
Normal file
55
list_add.css
Normal file
@@ -0,0 +1,55 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.list.add {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 6px;
|
||||
border-top: 0 solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
box-shadow:
|
||||
inset 0 -2px 0,
|
||||
-2px 4px 0 -2px,
|
||||
0 -2px 0 0;
|
||||
}
|
||||
|
||||
i.icon.list.add.small {
|
||||
width: 10px;
|
||||
box-shadow:
|
||||
inset 0 -2px 0,
|
||||
-1px 3px 0 -1px,
|
||||
0 -2px 0 0;
|
||||
}
|
||||
|
||||
i.icon.list.add::after,
|
||||
i.icon.list.add::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
top: 6px;
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
i.icon.list.add.small::after,
|
||||
i.icon.list.add.small::before {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
i.icon.list.add::before {
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
top: 2px;
|
||||
right: -4px;
|
||||
}
|
||||
|
||||
i.icon.list.add.small::before {
|
||||
width: 2px;
|
||||
height: 8px;
|
||||
top: 3px;
|
||||
right: -5px;
|
||||
}
|
||||
32
loading_spinner.css
Normal file
32
loading_spinner.css
Normal file
@@ -0,0 +1,32 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@keyframes loading_spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
i.icon.loading.spinner,
|
||||
i.icon.loading.spinner::before {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
i.icon.loading.spinner::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 100px;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: currentColor;
|
||||
}
|
||||
|
||||
i.icon.loading.spinner.animated::before {
|
||||
animation: loading_spinner 1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
|
||||
}
|
||||
15
minus.css
Normal file
15
minus.css
Normal file
@@ -0,0 +1,15 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.minus {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
background-color: currentColor;
|
||||
|
||||
&:is(.small) {
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
45
pen.css
Normal file
45
pen.css
Normal file
@@ -0,0 +1,45 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.pen {
|
||||
position: relative;
|
||||
margin-right: -2px;
|
||||
width: 14px;
|
||||
height: 4px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border-top-right-radius: 1px;
|
||||
border-bottom-right-radius: 1px;
|
||||
border-right: 2px solid transparent;
|
||||
box-shadow:
|
||||
0 0 0 2px,
|
||||
inset -2px 0 0;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
right: -6px;
|
||||
width: 3px;
|
||||
height: 4px;
|
||||
border-radius: 1px;
|
||||
border-left: 0;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: -2px;
|
||||
left: -11px;
|
||||
width: 8px;
|
||||
height: 7px;
|
||||
border-top: 4px solid transparent;
|
||||
border-right: 7px solid;
|
||||
border-bottom: 4px solid transparent;
|
||||
}
|
||||
}
|
||||
38
pin.css
Normal file
38
pin.css
Normal file
@@ -0,0 +1,38 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.pin {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin-top: -4px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
border: 2px solid;
|
||||
border-radius: 100% 100% 0 100%;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
i.icon.pin.small {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
i.icon.pin::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
i.icon.pin.small::before {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
35
plus.css
Normal file
35
plus.css
Normal file
@@ -0,0 +1,35 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.plus,
|
||||
i.icon.plus::after {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
background: currentColor;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
i.icon.plus {
|
||||
margin-top: -2px;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
i.icon.plus.small {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
i.icon.plus::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
top: -7px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
i.icon.plus.small::after {
|
||||
height: 10px;
|
||||
top: -4px;
|
||||
left: 4px;
|
||||
}
|
||||
28
search.css
Normal file
28
search.css
Normal file
@@ -0,0 +1,28 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.search {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(1);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid;
|
||||
border-radius: 100%;
|
||||
margin-left: -4px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
i.icon.search::after {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
width: 2px;
|
||||
height: 8px;
|
||||
background: currentColor;
|
||||
transform: rotate(-45deg);
|
||||
top: 10px;
|
||||
left: 12px;
|
||||
}
|
||||
37
share.css
Normal file
37
share.css
Normal file
@@ -0,0 +1,37 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.share {
|
||||
position: relative;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 100px;
|
||||
background-color: currentColor;
|
||||
box-shadow:
|
||||
10px -6px 0,
|
||||
10px 6px 0;
|
||||
}
|
||||
|
||||
i.icon.share::after,
|
||||
i.icon.share::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
i.icon.share::before {
|
||||
top: 0;
|
||||
transform: rotate(-35deg);
|
||||
}
|
||||
|
||||
i.icon.share::after {
|
||||
bottom: 0;
|
||||
transform: rotate(35deg);
|
||||
}
|
||||
24
shopping_bag.css
Normal file
24
shopping_bag.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.shopping.bag,
|
||||
i.icon.shopping.bag::after {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
i.icon.shopping.bag::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 2px;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
border-top: 0;
|
||||
border-bottom-left-radius: 120px;
|
||||
border-bottom-right-radius: 120px;
|
||||
}
|
||||
41
shopping_cart.css
Normal file
41
shopping_cart.css
Normal file
@@ -0,0 +1,41 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.shopping.cart {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 21px;
|
||||
background:
|
||||
linear-gradient(to left, currentColor 12px, transparent 0) no-repeat -1px
|
||||
6px/18px 2px,
|
||||
linear-gradient(to left, currentColor 12px, transparent 0) no-repeat 6px
|
||||
14px/11px 2px,
|
||||
linear-gradient(to left, currentColor 12px, transparent 0) no-repeat 0
|
||||
2px/4px 2px,
|
||||
radial-gradient(circle, currentColor 60%, transparent 40%) no-repeat 12px
|
||||
17px/4px 4px,
|
||||
radial-gradient(circle, currentColor 60%, transparent 40%) no-repeat 6px
|
||||
17px/4px 4px;
|
||||
}
|
||||
|
||||
i.icon.shopping.cart::after,
|
||||
i.icon.shopping.cart::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: currentColor;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
transform: skew(12deg);
|
||||
}
|
||||
|
||||
i.icon.shopping.cart::after {
|
||||
height: 10px;
|
||||
top: 6px;
|
||||
left: 16px;
|
||||
transform: skew(-12deg);
|
||||
}
|
||||
39
site.css
Normal file
39
site.css
Normal file
@@ -0,0 +1,39 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.site {
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
border: 2px solid;
|
||||
box-shadow: 0 -1px 0;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
top: 2px;
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 6px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 2px;
|
||||
height: 2px;
|
||||
border-radius: 3px;
|
||||
background-color: currentColor;
|
||||
box-shadow:
|
||||
0 4px 0,
|
||||
0 8px 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 2px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
border: 2px solid;
|
||||
}
|
||||
}
|
||||
46
smile.css
Normal file
46
smile.css
Normal file
@@ -0,0 +1,46 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.smile {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border-radius: 100px;
|
||||
border: 2px solid;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 5px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
box-shadow: 6px 0 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 9px;
|
||||
width: 8px;
|
||||
height: 4px;
|
||||
border-radius: 150px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border: 2px solid;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
&:is(.open) {
|
||||
&::after {
|
||||
border-top-color: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
49
trash.css
Normal file
49
trash.css
Normal file
@@ -0,0 +1,49 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.trash {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
border: 2px solid transparent;
|
||||
box-shadow:
|
||||
0 0 0 2px,
|
||||
inset -2px 0 0,
|
||||
inset 2px 0 0;
|
||||
border-bottom-left-radius: 1px;
|
||||
border-bottom-right-radius: 1px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
i.icon.trash.small {
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
i.icon.trash::after,
|
||||
i.icon.trash::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
i.icon.trash::after {
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
top: -4px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
i.icon.trash::before {
|
||||
width: 10px;
|
||||
height: 4px;
|
||||
border: 2px solid;
|
||||
border-bottom: transparent;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
top: -7px;
|
||||
left: -2px;
|
||||
}
|
||||
34
user.css
Normal file
34
user.css
Normal file
@@ -0,0 +1,34 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.user {
|
||||
width: 12px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
i.icon.user::after,
|
||||
i.icon.user::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
i.icon.user::before {
|
||||
left: 2px;
|
||||
top: calc(0px - var(--grow, 0px));
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
i.icon.user::after {
|
||||
top: calc(9px - var(--grow, -0px));
|
||||
width: 12px;
|
||||
height: calc(9px + var(--grow, 0px));
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
Reference in New Issue
Block a user