Notice

Source

• Notice.css

Example

<div class="x-notice accent-success" role="alert">
    Success notice
</div>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/notice/props/default.css" layer(theme);
@import "winduum/src/components/notice/default.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-notice-padding-block: 0.5rem;
    --x-notice-padding-inline: 0.75rem;
  }
}

Winduum CSS Code

winduum/src/components/notice/props/default.css

:root, :host {
  --x-notice-padding-block: 1.25rem;
  --x-notice-padding-inline: 1.5rem;
  --x-notice-font-size: var(--text-sm);
  --x-notice-border-radius: var(--radius-xl);
  --x-notice-outline-width: 1px;
  --x-notice-outline-offset: calc(var(--x-notice-outline-width, 1px) * -1);
}

winduum/src/components/notice/default.css

.x-notice {
  padding: var(--x-notice-padding-block) var(--x-notice-padding-inline);
  font-size: var(--x-notice-font-size);
  border-radius: var(--x-notice-border-radius);
  background-color:
    color-mix(
      in var(--x-notice-background-color-space, srgb),
      var(--x-notice-background-color, var(--color-accent)) var(--x-notice-background-color-opacity, 10%),
      var(--x-notice-background-color-mix, transparent)
    );
  color: var(--x-notice-color, var(--color-accent));
  outline:
    var(--x-notice-outline-width) solid
    color-mix(
      in var(--x-notice-outline-color-space, srgb),
      var(--x-notice-outline-color, var(--color-accent)) var(--x-notice-outline-color-opacity, 10%),
      var(--x-notice-outline-color-mix, transparent)
    );
  outline-offset: var(--x-notice-outline-offset);
  text-wrap: pretty;
}