@zplane-web/craft-licensing

Alert 

<div class="alert alert--info">
    <div class="alert__inner">
        <div class="alert__icon">
            <svg class="icon icon--circle-info" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="/assets/icons/icons.dcaca1c147.svg#circle-info"></use>
            </svg>
        </div>

        <div class="alert__text">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </div>
</div>
 
{% set icons = {
  info: 'circle-info',
  error: 'circle-xmark',
  success: 'circle-check',
  warning: 'circle-exclamation',
  hint: 'circle-arrow-right',
  question: 'circle-question',
} -%}

{% set type = type ??? 'success' %}
{% set icon = icon ?? icons[type] %}

<div {{ html_attributes({
  id: id ?? false,
  class: html_cva(
    base: 'alert',
    variants: {
      type: {
        info: 'alert--info',
        error: 'alert--error',
        success: 'alert--success',
        warning: 'alert--warning',
        hint: 'alert--hint',
        question: 'alert--question',
      },
    },
  ).apply({ type }),
  role: role ?? false,
}, attrs ?? {}) }}>
  <div class="alert__inner">
    <div class="alert__icon">
      {% include '@icon' with {
        icon: icon,
      } only %}
    </div>

    <div class="alert__text">
      {{- text | componentize(inline_only=true) -}}
    </div>
  </div>
</div>
 
{
  "text": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>\n"
}
  • Content: 
    .alert {
  container-name: alert;
  container-type: inline-size;
}

.alert--info {
  --alert-background-color: var(--color-steel-050);
  --alert-color: var(--color-steel-900);
  --alert-icon-color: var(--color-steel-900);
}

.alert--success {
  --alert-background-color: var(--color-green-050);
  --alert-color: var(--color-green-900);
  --alert-icon-color: var(--color-green-900);
}

.alert--warning {
  --alert-background-color: var(--color-yellow-100);
  --alert-color: var(--color-yellow-900);
  --alert-icon-color: var(--color-yellow-900);
}

.alert--error {
  --alert-background-color: var(--color-red-050);
  --alert-color: var(--color-red-900);
  --alert-icon-color: var(--color-red-900);
}

.alert__inner {
  --icon-size: 3.2rem;

  align-items: flex-start;
  background-color: var(--alert-background-color, var(--color-gray-100));
  border-color: var(--alert-border-color, transparent);
  border-radius: var(--border-radius-large);
  border-style: var(--alert-border-style, solid);
  border-width: var(--alert-border-width, 0);
  color: var(--alert-color, var(--text-color));
  column-gap: 1.6rem;
  display: flex;
  font-size: var(--alert-font-size, var(--font-size-default));
  justify-content: flex-start;
  line-height: var(--alert-line-height, var(--line-height-wide));
  padding-block: 2.4rem;
  padding-inline: 2.4rem;
  text-align: start;

  @container alert (inline-size >= 40rem) {
    --icon-size: 4rem;

    border-radius: var(--border-radius-x-large);
    column-gap: 2.4rem;
    padding-block: 3.2rem;
    padding-inline: 3.2rem;
  }
}

.alert__icon {
  color: var(--alert-icon-color, inherit);
  display: flex;
  flex-shrink: 0;
  margin-block-start: calc((1lh - var(--icon-size)) / 2);

  @container alert (inline-size >= 40rem) {
    margin-block-start: 0;
  }
}

.alert__text {
  align-self: center;
  color: var(--alert-text-color, inherit);
  flex-grow: 1;
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/components/3-molecules/alert/alert.scss
  • Size: 1.9 KB

No notes defined.