@limetech/lime-elements
Version:
67 lines (58 loc) • 1.31 kB
CSS
/**
* @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.
*/
:host {
background-color: var(--icon-background-color, transparent);
border-radius: 50%;
display: inline-block;
line-height: 0;
box-sizing: border-box;
}
:host svg {
fill: currentColor;
height: 100%;
pointer-events: none;
width: 100%;
}
:host div {
margin: var(--limel-icon-svg-margin, 0);
}
:host([hidden]) {
display: none;
}
:host([size=x-small]) {
height: 1rem ;
width: 1rem ;
}
:host([size=small]) {
height: 1.25rem ;
width: 1.25rem ;
}
:host([size=medium]) {
height: 1.5rem ;
width: 1.5rem ;
}
:host([size=large]) {
height: 1.75rem ;
width: 1.75rem ;
}
:host([badge][size=x-small]) {
height: 1.5rem ;
width: 1.5rem ;
--limel-icon-svg-margin: 0.25rem;
}
:host([badge][size=small]) {
height: 1.75rem ;
width: 1.75rem ;
--limel-icon-svg-margin: 0.25rem;
}
:host([badge][size=medium]) {
height: 2.5rem ;
width: 2.5rem ;
--limel-icon-svg-margin: 0.5rem;
}
:host([badge][size=large]) {
height: 2.75rem ;
width: 2.75rem ;
--limel-icon-svg-margin: 0.5rem;
}