v4web-components

Version:
Stencil Component Starter
69 lines (60 loc) • 2.42 kB
CSS
.v4-icon-selectable {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: Material Symbols Outlined;
}

.v4-icon-selectable:hover {
  background-color: var(--lab-ds-semantic-selectable-color-bg-hover);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-pill);
  cursor: pointer;
}

.v4-icon-selectable.x-large {
  box-sizing: var(--lab-ds-semantic-size-icon-xxxl);
  width: var(--lab-ds-semantic-size-icon-xxxl);
  height: var(--lab-ds-semantic-size-icon-xxxl);
  padding: var(--lab-ds-semantic-selectable-space-padding-xs);
  font-size: var(--lab-ds-semantic-size-icon-xxl);
}

.v4-icon-selectable.large {
  box-sizing: var(--lab-ds-semantic-size-icon-xl);
  width: var(--lab-ds-semantic-size-icon-xl);
  height: var(--lab-ds-semantic-size-icon-xl);
  padding: var(--lab-ds-semantic-selectable-space-padding-xs);
  font-size: var(--lab-ds-semantic-size-icon-l);
}

.v4-icon-selectable.medium {
  box-sizing: var(--lab-ds-semantic-size-icon-l);
  width: var(--lab-ds-semantic-size-icon-l);
  height: var(--lab-ds-semantic-size-icon-l);
  padding: var(--lab-ds-semantic-selectable-space-padding-xs);
  font-size: var(--lab-ds-semantic-size-icon-m);
}

.v4-icon-selectable.s-medium {
  box-sizing: var(--lab-ds-semantic-size-icon-m);
  width: var(--lab-ds-semantic-size-icon-m);
  height: var(--lab-ds-semantic-size-icon-m);
  padding: var(--lab-ds-semantic-selectable-space-padding-xs);
  font-size: var(--lab-ds-semantic-size-icon-sm);
}

.v4-icon-selectable.small {
  box-sizing: var(--lab-ds-semantic-size-icon-sm);
  width: var(--lab-ds-semantic-size-icon-sm);
  height: var(--lab-ds-semantic-size-icon-sm);
  padding: var(--lab-ds-semantic-selectable-space-padding-xs);
  font-size: var(--lab-ds-semantic-size-icon-s);
}

.v4-icon-selectable.x-small {
  box-sizing: var(--lab-ds-semantic-size-icon-s);
  width: var(--lab-ds-semantic-size-icon-s);
  height: var(--lab-ds-semantic-size-icon-s);
  padding: var(--lab-ds-semantic-selectable-space-padding-xxs);
  font-size: var(--lab-ds-semantic-size-icon-xs);
}

.v4-icon-selectable.xx-small {
  box-sizing: var(--lab-ds-semantic-size-icon-xs);
  width: var(--lab-ds-semantic-size-icon-xs);
  height: var(--lab-ds-semantic-size-icon-xs);
  padding: var(--lab-ds-semantic-selectable-space-padding-xxs);
  font-size: var(--lab-ds-semantic-size-icon-xxs);
}