@nextcloud/vue/dist/assets/NcChip-DZ8dUSFy.css

Nextcloud vue components

/**
 * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
/**
 * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
/*
* Ensure proper alignment of the vue material icons
*/
.material-design-icon[data-v-2aa1d7ea] {
  display: flex;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
}
.nc-chip[data-v-2aa1d7ea] {
  --chip-size: 24px;
  --chip-radius: calc(var(--chip-size) / 2);
  height: var(--chip-size);
  max-width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: var(--chip-radius);
  background-color: var(--color-background-hover);
}
.nc-chip--primary[data-v-2aa1d7ea] {
  background-color: var(--color-primary-element);
  color: var(--color-primary-element-text);
}
.nc-chip--secondary[data-v-2aa1d7ea] {
  background-color: var(--color-primary-element-light);
  color: var(--color-primary-element-light-text);
}
.nc-chip--error[data-v-2aa1d7ea] {
  background-color: var(--color-error);
  color: var(--color-error-text);
}
.nc-chip--warning[data-v-2aa1d7ea] {
  background-color: var(--color-warning);
  color: var(--color-warning-text);
}
.nc-chip--success[data-v-2aa1d7ea] {
  background-color: var(--color-success);
  color: var(--color-success-text);
}
.nc-chip--no-actions .nc-chip__text[data-v-2aa1d7ea] {
  padding-inline-end: calc(2 * var(--default-grid-baseline));
}
.nc-chip--no-icon .nc-chip__text[data-v-2aa1d7ea] {
  padding-inline-start: calc(2 * var(--default-grid-baseline));
}
.nc-chip__text[data-v-2aa1d7ea] {
  flex: 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}
.nc-chip__icon[data-v-2aa1d7ea] {
  flex: 0 0 var(--chip-size);
  margin-inline-end: var(--default-grid-baseline);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: var(--chip-size);
  width: var(--chip-size);
}
.nc-chip__actions[data-v-2aa1d7ea] {
  flex: 0 0 var(--chip-size);
  --default-clickable-area: var(--chip-size);
  --border-radius-element: var(--chip-radius);
}