/**
* MyIcons CSS
* Base styles for the self-hosted SVG icon system.
* Mirrors Font Awesome's sizing and utility conventions.
*
* Include this stylesheet in your :
*
*/
/* ─── Base Icon ─────────────────────────────────────────────────────────── */
.mi-icon {
/* Scales with surrounding text */
display: inline-block;
width: 1em;
height: 1em;
/* Inherits text colour */
fill: currentColor;
/* Aligns nicely on the text baseline */
vertical-align: -0.125em;
/* Prevents icon from shrinking in flex containers */
flex-shrink: 0;
/* Remove pointer events so icons don't interfere with clicks on parent */
pointer-events: none;
/* Smooth colour transitions */
transition: fill 0.2s ease, opacity 0.2s ease;
}
/* ─── Sizes ──────────────────────────────────────────────────────────────── */
/* Mirrors Font Awesome: xs, sm, lg, 2x … 10x */
.mi-xs { font-size: 0.75em; }
.mi-sm { font-size: 0.875em; }
.mi-lg { font-size: 1.25em; line-height: 0.75em; vertical-align: -0.0667em; }
.mi-xl { font-size: 1.5em; }
.mi-2x { font-size: 2em; }
.mi-3x { font-size: 3em; }
.mi-4x { font-size: 4em; }
.mi-5x { font-size: 5em; }
.mi-6x { font-size: 6em; }
.mi-7x { font-size: 7em; }
.mi-8x { font-size: 8em; }
.mi-9x { font-size: 9em; }
.mi-10x { font-size: 10em; }
/* ─── Fixed Width ────────────────────────────────────────────────────────── */
/* Useful for icon lists / nav items where icons need to align */
.mi-fw {
width: 1.25em;
text-align: center;
}
/* ─── Rotation ───────────────────────────────────────────────────────────── */
.mi-rotate-90 { transform: rotate(90deg); }
.mi-rotate-180 { transform: rotate(180deg); }
.mi-rotate-270 { transform: rotate(270deg); }
/* ─── Flip ───────────────────────────────────────────────────────────────── */
.mi-flip-horizontal { transform: scaleX(-1); }
.mi-flip-vertical { transform: scaleY(-1); }
.mi-flip-both { transform: scale(-1); }
/* ─── Spin Animation ─────────────────────────────────────────────────────── */
.mi-spin {
animation: mi-spin 1.5s linear infinite;
}
.mi-spin-reverse {
animation: mi-spin 1.5s linear infinite reverse;
}
.mi-pulse {
animation: mi-spin 1.5s steps(8, end) infinite;
}
@keyframes mi-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ─── Beat / Bounce Animation ───────────────────────────────────────────── */
.mi-beat {
animation: mi-beat 1s ease-in-out infinite;
}
@keyframes mi-beat {
0%, 90%, 100% { transform: scale(1); }
45% { transform: scale(1.25); }
}
.mi-bounce {
animation: mi-bounce 1s ease infinite;
}
@keyframes mi-bounce {
0%, 100% { transform: translateY(0); }
40% { transform: translateY(-30%); }
60% { transform: translateY(-15%); }
}
/* ─── Fade Animation ─────────────────────────────────────────────────────── */
.mi-fade {
animation: mi-fade 1.5s ease-in-out infinite;
}
@keyframes mi-fade {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
/* ─── Stacked Icons ──────────────────────────────────────────────────────── */
/* Usage:
*/
.mi-stack {
display: inline-block;
position: relative;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.mi-stack-1x,
.mi-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.mi-stack-1x { font-size: 1em; line-height: 2em; }
.mi-stack-2x { font-size: 2em; }
/* ─── Colour Utilities ───────────────────────────────────────────────────── */
.mi-inverse { fill: #fff; }
.mi-muted { opacity: 0.4; }
/* ─── List Icons ─────────────────────────────────────────────────────────── */
/* Usage:
*/
.mi-ul {
padding-left: 0;
margin-left: 2.5em;
list-style-type: none;
}
.mi-ul > li {
position: relative;
}
.mi-li {
position: absolute;
left: -2em;
width: 2em;
top: 0.14286em;
text-align: center;
}
/* ─── Border ─────────────────────────────────────────────────────────────── */
.mi-border {
border: 0.08em solid currentColor;
border-radius: 0.1em;
padding: 0.2em 0.25em 0.15em;
}
/* ─── Pull (float) ───────────────────────────────────────────────────────── */
.mi-pull-left { float: left; margin-right: 0.3em; }
.mi-pull-right { float: right; margin-left: 0.3em; }
/* ─── Screen-reader only ─────────────────────────────────────────────────── */
.mi-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}