added icons and moved to the css directory
This commit is contained in:
44
css/arrow.css
Normal file
44
css/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
css/arrow_circle.css
Normal file
36
css/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
css/calculator.css
Normal file
39
css/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
css/close.css
Normal file
31
css/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);
|
||||
}
|
||||
36
css/code_slash.css
Normal file
36
css/code_slash.css
Normal file
@@ -0,0 +1,36 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.code.slash {
|
||||
position: relative;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
transform: rotate(15deg);
|
||||
background: currentColor;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 5px;
|
||||
left: -8px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 3px;
|
||||
right: -8px;
|
||||
border-right: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
}
|
||||
46
css/coffe.css
Normal file
46
css/coffe.css
Normal file
@@ -0,0 +1,46 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.coffe {
|
||||
position: relative;
|
||||
margin-top: 3px;
|
||||
margin-left: -4px;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border: 2px solid;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -7px;
|
||||
left: 2px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
border-radius: 3px;
|
||||
background: currentColor;
|
||||
box-shadow:
|
||||
4px 0 0,
|
||||
8px 0 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -1px;
|
||||
right: -6px;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
border-radius: 100px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border: 2px solid;
|
||||
}
|
||||
}
|
||||
40
css/comment.css
Normal file
40
css/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
css/corner.css
Normal file
62
css/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
css/display_grid.css
Normal file
29
css/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
css/enter.css
Normal file
39
css/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
css/hashtag.css
Normal file
24
css/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
css/house.css
Normal file
78
css/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
css/house_panelka.css
Normal file
75
css/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
css/layout_grid.css
Normal file
30
css/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
css/list_add.css
Normal file
55
css/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
css/loading_spinner.css
Normal file
32
css/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
css/minus.css
Normal file
15
css/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
css/pen.css
Normal file
45
css/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
css/pin.css
Normal file
38
css/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
css/plus.css
Normal file
35
css/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
css/search.css
Normal file
28
css/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
css/share.css
Normal file
37
css/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
css/shopping_bag.css
Normal file
24
css/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
css/shopping_cart.css
Normal file
41
css/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
css/site.css
Normal file
39
css/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
css/smile.css
Normal file
46
css/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;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
css/telegram.css
Normal file
33
css/telegram.css
Normal file
@@ -0,0 +1,33 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
i.icon.telegram {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: transparent;
|
||||
|
||||
&::before {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 7px;
|
||||
left: 9px;
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 8px solid currentColor;
|
||||
color: #ffffff;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
}
|
||||
49
css/trash.css
Normal file
49
css/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
css/user.css
Normal file
34
css/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