@utrecht/components/blockquote/dist/index.css

Components for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/**
 * Temporarily keep the old name for backwards compatibility.
 *
 * @deprecated
 */
/**
 * Temporarily keep the old name for backwards compatibility.
 *
 * @deprecated
 */
.utrecht-blockquote {
  /* Setting `margin-inline-start` is necessary for overriding the default stylesheet of `<blockquote>` and `<figure>`.
   * Setting `margin-inline-end` is necessary for overriding the default stylesheet of `<figure>` */
  background-color: var(--utrecht-blockquote-background-color);
  border-color: var(--utrecht-blockquote-border-color);
  border-radius: var(--utrecht-blockquote-border-radius, 0);
  border-style: solid;
  border-width: var(--utrecht-blockquote-border-width, 0);
  /* stylelint-disable order/properties-alphabetical-order */
  border-inline-start-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
  /* stylelint-enable order/properties-alphabetical-order */
  color: var(--utrecht-blockquote-color);
  display: flex;
  flex-direction: column;
  font-family: var(--utrecht-document-font-family);
  font-size: var(--utrecht-blockquote-font-size);
  font-style: var(--utrecht-blockquote-font-style);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
  padding-block-end: var(--utrecht-blockquote-padding-block-end);
  padding-block-start: var(--utrecht-blockquote-padding-block-start);
  padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
  padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
  row-gap: var(--utrecht-blockquote-row-gap, 0);
}

/* `utrecht-blockquote__attribution` is deprecated */
.utrecht-blockquote__attribution,
.utrecht-blockquote__caption {
  color: var(--utrecht-blockquote-caption-color, inherit);
  font-size: var(--utrecht-blockquote-caption-font-size, inherit);
}

.utrecht-blockquote__figure {
  display: flex;
  flex-direction: column;
  /* `<figure>` is an optional semantic container, the CSS needs to reset the default stylesheet of `<figure>` */
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  row-gap: var(--utrecht-blockquote-row-gap, 0);
}

/* `utrecht-blockquote__content` is deprecated */
.utrecht-blockquote__content,
.utrecht-blockquote__quote {
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
  color: var(--utrecht-blockquote-content-color, inherit);
  font-size: var(--utrecht-blockquote-content-font-size, inherit);
}

.utrecht-blockquote--distanced {
  --utrecht-space-around: 1;
}

.utrecht-blockquote--html-blockquote {
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
  color: var(--utrecht-blockquote-content-color, inherit);
  font-size: var(--utrecht-blockquote-content-font-size, inherit);
}