Initial Codebase (untested)
This commit is contained in:
James Mills
229
internal/static/css/02-icss.css
Normal file
229
internal/static/css/02-icss.css
Normal file
@@ -0,0 +1,229 @@
|
||||
|
||||
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%;
|
||||
}
|
||||
Reference in New Issue
Block a user