230 lines
4.0 KiB
CSS
230 lines
4.0 KiB
CSS
|
|
i[class*="icss-"] {
|
|
position: relative;
|
|
display:inline-block;
|
|
font-style: normal;
|
|
background-color:currentColor;
|
|
box-sizing: border-box;
|
|
vertical-align: middle;
|
|
}
|
|
i[class*="icss-"]:before,
|
|
i[class*="icss-"]:after {
|
|
content: "";
|
|
border-width: 0;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Size */
|
|
[class*="icss-"].xxsmall {
|
|
font-size: .45em;
|
|
}
|
|
[class*="icss-"].xsmall {
|
|
font-size: .5em;
|
|
}
|
|
[class*="icss-"].small {
|
|
font-size: .65em;
|
|
}
|
|
[class*="icss-"].x1_5 {
|
|
font-size: 1.5em;
|
|
}
|
|
[class*="icss-"].x2 {
|
|
font-size: 2em;
|
|
}
|
|
[class*="icss-"].x2_5 {
|
|
font-size: 2.5em;
|
|
}
|
|
[class*="icss-"].x3 {
|
|
font-size: 3em;
|
|
}
|
|
[class*="icss-"].x4 {
|
|
font-size: 4em;
|
|
}
|
|
[class*="icss-"].x5 {
|
|
font-size: 5em;
|
|
}
|
|
|
|
/* Align text-bottom */
|
|
i[class*="icss-"].bottom {
|
|
vertical-align:text-bottom;
|
|
}
|
|
|
|
/* flip */
|
|
.flip {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* rotate */
|
|
i[class*="icss-"].rot10 {
|
|
transform: rotate(10deg);
|
|
}
|
|
i[class*="icss-"].rot-10 {
|
|
transform: rotate(-10deg);
|
|
}
|
|
i[class*="icss-"].rot20 {
|
|
transform: rotate(20deg);
|
|
}
|
|
i[class*="icss-"].rot-20 {
|
|
transform: rotate(-20deg);
|
|
}
|
|
i[class*="icss-"].rot45 {
|
|
transform: rotate(45deg);
|
|
}
|
|
i[class*="icss-"].rot-45 {
|
|
transform: rotate(-45deg);
|
|
}
|
|
i[class*="icss-"].rot90 {
|
|
transform: rotate(90deg);
|
|
}
|
|
i[class*="icss-"].rot-90 {
|
|
transform: rotate(-90deg);
|
|
}
|
|
i[class*="icss-"].rot180 {
|
|
transform: rotate(180deg);
|
|
}
|
|
i[class*="icss-"].rot-180 {
|
|
transform: rotate(-180deg);
|
|
}
|
|
|
|
/* force animation */
|
|
i.icss-anim,
|
|
i.icss-anim:before,
|
|
i.icss-anim:after {
|
|
transition: all 1s;
|
|
}
|
|
|
|
/* Spin */
|
|
.icss-spin {
|
|
animation: spin 2s infinite linear;
|
|
}
|
|
.icss-pulse {
|
|
animation: spin 1s infinite steps(8);
|
|
}
|
|
|
|
.icss-spin-hover:hover {
|
|
animation: spin 2s infinite linear;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
/* BELL */
|
|
@keyframes ring {
|
|
0%{transform:rotate(-15deg)}
|
|
2%{transform:rotate(15deg)}
|
|
4%{transform:rotate(-18deg)}
|
|
6%{transform:rotate(18deg)}
|
|
8%{transform:rotate(-22deg)}
|
|
10%{transform:rotate(22deg)}
|
|
12%{transform:rotate(-18deg)}
|
|
14%{transform:rotate(18deg)}
|
|
16%{transform:rotate(-12deg)}
|
|
18%{transform:rotate(12deg)}
|
|
20%,100%{transform:rotate(0deg)}
|
|
}
|
|
|
|
.icss-ring {
|
|
animation: ring 2s infinite ease;
|
|
}
|
|
.icss-ring-hover:hover {
|
|
animation: ring 2s infinite ease;
|
|
}
|
|
|
|
/* VERTICAL */
|
|
@keyframes vertical {
|
|
0%{transform:translate(0,-3px)}
|
|
4%{transform:translate(0,3px)}
|
|
8%{transform:translate(0,-3px)}
|
|
12%{transform:translate(0,3px)}
|
|
16%{transform:translate(0,-3px)}
|
|
20%{transform:translate(0,3px)}
|
|
22%,100%{transform:translate(0,0)}
|
|
}
|
|
.icss-vibes,
|
|
.icss-vibes-hover:hover {
|
|
animation: vertical 2s ease infinite;
|
|
}
|
|
|
|
/* HORIZONTAL */
|
|
@keyframes horizontal {
|
|
0%{transform:translate(0,0)}
|
|
6%{transform:translate(5px,0)}
|
|
12%{transform:translate(0,0)}
|
|
18%{transform:translate(5px,0)}
|
|
24%{transform:translate(0,0)}
|
|
30%{transform:translate(5px,0)}
|
|
36%,100%{transform:translate(0,0)}
|
|
}
|
|
.icss-shake,
|
|
.icss-shake-hover:hover {
|
|
animation: horizontal 2s ease infinite;
|
|
}
|
|
|
|
/* TADA */
|
|
@keyframes tada {
|
|
0% {transform: scale(1)}
|
|
10%,20% {transform:scale(.9) rotate(-8deg);}
|
|
30%,50%,70% {transform:scale(1.3) rotate(8deg)}
|
|
40%,60% {transform:scale(1.3) rotate(-8deg)}
|
|
80%,100% {transform:scale(1) rotate(0)}
|
|
}
|
|
|
|
.icss-tada,
|
|
.icss-tada-hover:hover{
|
|
animation: tada 2s linear infinite;
|
|
}
|
|
|
|
/* Reverse animation */
|
|
.icss-reverse {
|
|
animation-direction: reverse;
|
|
}
|
|
[class*="-hover"].icss-reverse:hover {
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
/* Stack icons */
|
|
.icss-stack {
|
|
position: relative;
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.icss-stack i[class*="icss-"] {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-.5em, -.5em);
|
|
}
|
|
|
|
.icss-stack i[class*="icss-"].bottom {
|
|
bottom: 0;
|
|
top: auto;
|
|
}
|
|
|
|
/* shadow icon */
|
|
.icss-shadow {
|
|
position: relative;
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.icss-shadow i[class*="icss-"] {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-.5em, -.5em);
|
|
}
|
|
|
|
.icss-shadow i[class*="icss-"]:first-child {
|
|
top: 54%;
|
|
left: 54%;
|
|
}
|