@kelvininc/ui-components/dist/collection/components/icon/icon.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

: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(--icon-surface-neutral-primary);
  --icon-height: var(--size-md);
  --icon-width: var(--size-md);
  --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);
}