vuestic-ui/dist/esm-node/VaChip.css

Vue 3 UI Framework

:root,
:host {
  --va-chip-display: inline-flex;
  --va-chip-border: 0.125rem solid transparent;
  --va-chip-position: relative;
  --va-chip-border-radius: 2rem;
  --va-chip-width: auto;
  --va-chip-height: auto;
  --va-chip-min-width: initial;
  --va-chip-min-height: initial;
  --va-chip-padding: 0 0.375rem;
  --va-chip-color: #ffffff;
  --va-chip-cursor: default;
  --va-chip-font-size: 1rem;
  --va-chip-vertical-align: middle;
  --va-chip-inner-display: inline-flex;
  --va-chip-inner-align-items: center;
  --va-chip-inner-width: 100%;
  --va-chip-hover-opacity: 0.85;
  --va-chip-content-display: flex;
  --va-chip-content-width: var(--va-chip-inner-width, 100%);
  --va-chip-content-align-items: center;
  --va-chip-content-justify-content: center;
  --va-chip-content-padding: 0 var(--va-gap-medium, 0.5rem);
  --va-chip-content-line-height: 1.6;
  /* Square */
  --va-chip-square-border-radius: 0.2rem;
  /* Small */
  --va-chip-sm-height: 1.5rem;
  --va-chip-sm-font-size: 0.875rem;
  --va-chip-sm-content-padding: 0 var(--va-gap-small, 0.5rem);
  /* Large */
  --va-chip-lg-height: 2.5rem;
  --va-chip-lg-font-size: 1.25rem;
  --va-chip-lg-content-padding: 0 var(--va-gap-large, 0.5rem);
}
.va-chip {
  display: var(--va-chip-display);
  border: var(--va-chip-border, var(--va-control-border));
  position: var(--va-chip-position);
  border-radius: var(--va-chip-border-radius);
  width: var(--va-chip-width);
  height: var(--va-chip-height);
  min-width: var(--va-chip-min-width);
  min-height: var(--va-chip-min-height);
  padding: var(--va-chip-padding);
  color: var(--va-chip-color);
  cursor: var(--va-chip-cursor);
  font-size: var(--va-chip-font-size);
  font-family: var(--va-font-family);
  vertical-align: var(--va-chip-vertical-align);
}
.va-chip__inner {
  display: var(--va-chip-inner-display);
  align-items: var(--va-chip-inner-align-items);
  width: var(--va-chip-inner-width);
  vertical-align: inherit;
}
.va-chip:hover:not(.va-chip--readonly) {
  opacity: var(--va-chip-hover-opacity);
}
.va-chip__content {
  display: var(--va-chip-content-display);
  justify-content: var(--va-chip-content-justify-content);
  align-items: var(--va-chip-content-align-items);
  padding: var(--va-chip-content-padding);
  line-height: var(--va-chip-content-line-height);
  width: var(--va-chip-content-width);
}
.va-chip__close-icon {
  cursor: pointer;
}
.va-chip--disabled .va-chip__close-icon {
  cursor: default !important;
}
.va-chip--square {
  border-radius: var(--va-chip-square-border-radius, var(--va-square-border-radius));
}
.va-chip--small {
  height: var(--va-chip-sm-height);
  font-size: var(--va-chip-sm-font-size);
}
.va-chip--small .va-chip__content {
  padding: var(--va-chip-sm-content-padding);
}
.va-chip--large {
  height: var(--va-chip-lg-height);
  font-size: var(--va-chip-lg-font-size);
}
.va-chip--large .va-chip__content {
  padding: var(--va-chip-lg-content-padding);
}
.va-chip.va-chip--disabled {
  cursor: default;
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}