162 lines
3.3 KiB
SCSS
Executable File
162 lines
3.3 KiB
SCSS
Executable File
// Icon time
|
|
.icon-time {
|
|
border: $icon-border-width solid currentColor;
|
|
border-radius: 50%;
|
|
&::before {
|
|
background: currentColor;
|
|
height: .4em;
|
|
transform: translate(-50%, -75%);
|
|
width: $icon-border-width;
|
|
}
|
|
&::after {
|
|
background: currentColor;
|
|
height: .3em;
|
|
transform: translate(-50%, -75%) rotate(90deg);
|
|
transform-origin: 50% 90%;
|
|
width: $icon-border-width;
|
|
}
|
|
}
|
|
|
|
// Icon mail
|
|
.icon-mail {
|
|
&::before {
|
|
border: $icon-border-width solid currentColor;
|
|
border-radius: $border-radius;
|
|
height: .8em;
|
|
width: 1em;
|
|
}
|
|
&::after {
|
|
border: $icon-border-width solid currentColor;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
height: .5em;
|
|
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
|
|
width: .5em;
|
|
}
|
|
}
|
|
|
|
// Icon people
|
|
.icon-people {
|
|
&::before {
|
|
border: $icon-border-width solid currentColor;
|
|
border-radius: 50%;
|
|
height: .45em;
|
|
top: 25%;
|
|
width: .45em;
|
|
}
|
|
&::after {
|
|
border: $icon-border-width solid currentColor;
|
|
border-radius: 50% 50% 0 0;
|
|
height: .4em;
|
|
top: 75%;
|
|
width: .9em;
|
|
}
|
|
}
|
|
|
|
// 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-bottom-right-radius: $border-radius;
|
|
border-left: 0;
|
|
border-top: 0;
|
|
height: .8em;
|
|
left: 65%;
|
|
top: 40%;
|
|
width: .7em;
|
|
}
|
|
&::after {
|
|
background: currentColor;
|
|
border-radius: $border-radius;
|
|
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%;
|
|
height: .25em;
|
|
left: 35%;
|
|
top: 35%;
|
|
width: .25em;
|
|
}
|
|
&::after {
|
|
border: $icon-border-width solid currentColor;
|
|
border-bottom: 0;
|
|
border-left: 0;
|
|
height: .5em;
|
|
left: 60%;
|
|
transform: translate(-50%, 25%) rotate(-45deg);
|
|
width: .5em;
|
|
}
|
|
}
|
|
|
|
// Icon link
|
|
.icon-link {
|
|
&::before,
|
|
&::after {
|
|
border: $icon-border-width solid currentColor;
|
|
border-radius: 5em 0 0 5em;
|
|
border-right: 0;
|
|
height: .5em;
|
|
width: .75em;
|
|
}
|
|
&::before {
|
|
transform: translate(-70%, -45%) rotate(-45deg);
|
|
}
|
|
&::after {
|
|
transform: translate(-30%, -55%) rotate(135deg);
|
|
}
|
|
}
|
|
|
|
// Icon location
|
|
.icon-location {
|
|
&::before {
|
|
border: $icon-border-width solid currentColor;
|
|
border-radius: 50% 50% 50% 0;
|
|
height: .8em;
|
|
transform: translate(-50%, -60%) rotate(-45deg);
|
|
width: .8em;
|
|
}
|
|
&::after {
|
|
border: $icon-border-width solid currentColor;
|
|
border-radius: 50%;
|
|
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 -.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;
|
|
height: .5em;
|
|
transform: translate(-50%, -40%) rotate(-135deg);
|
|
width: .5em;
|
|
}
|
|
}
|