@kelvininc/ui-components
Version:
Kelvin UI Components
89 lines (88 loc) • 1.46 kB
CSS
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-border {
to {
--rotation: 360deg;
}
}
:host {
/**
* @prop --icon-color: Color of the icon
* @prop --icon-height: Height of icon
* @prop --icon-width: Width of icon
* @prop --icon-rotation: Rotation of icon
*/
--icon-color: var(--kv-text, #fff);
--icon-height: 16px;
--icon-width: 16px;
--icon-rotation: 0deg;
}
.icon {
display: flex;
fill: var(--icon-color);
width: var(--icon-width);
height: var(--icon-height);
transform: rotate(var(--icon-rotation));
/* SIZES */
/* ROTATIONS */
}
.icon.icon-8 {
width: 8px;
height: 8px;
}
.icon.icon-12 {
width: 12px;
height: 12px;
}
.icon.icon-16 {
width: 16px;
height: 16px;
}
.icon.icon-20 {
width: 20px;
height: 20px;
}
.icon.icon-24 {
width: 24px;
height: 24px;
}
.icon.icon-40 {
width: 40px;
height: 40px;
}
.icon.icon-full-size {
width: 100%;
height: 100%;
}
.icon.rotate-0 {
transform: rotate(0deg);
}
.icon.rotate-45 {
transform: rotate(45deg);
}
.icon.rotate-90 {
transform: rotate(90deg);
}
.icon.rotate-135 {
transform: rotate(135deg);
}
.icon.rotate-180 {
transform: rotate(180deg);
}
.icon.rotate-225 {
transform: rotate(225deg);
}
.icon.rotate-270 {
transform: rotate(270deg);
}
.icon.rotate-315 {
transform: rotate(315deg);
}