UNPKG

@synergy-design-system/components

Version:

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

108 lines (90 loc) 2.49 kB
// src/components/alert/alert.styles.ts import { css } from "lit"; var alert_styles_default = css` /* stylelint-disable */ :host { display: contents; /* For better DX, we'll reset the margin here so the base part can inherit it */ margin: 0; } .alert { position: relative; display: flex; align-items: stretch; background-color: var(--syn-panel-background-color); border: solid var(--syn-panel-border-width) var(--syn-panel-border-color); border-top-width: calc(var(--syn-panel-border-width) * 3); border-radius: var(--syn-border-radius-medium); font-family: var(--syn-font-sans); font-size: var(--syn-font-size-small); font-weight: var(--syn-font-weight-normal); line-height: 1.6; color: var(--syn-color-neutral-700); margin: inherit; } .alert:not(.alert--has-icon) .alert__icon, .alert:not(.alert--closable) .alert__close-button { display: none; } .alert__icon { flex: 0 0 auto; display: flex; align-items: center; font-size: var(--syn-font-size-large); padding-inline-start: var(--syn-spacing-large); } .alert--has-countdown { border-bottom: none; } .alert__message { flex: 1 1 auto; display: block; padding: var(--syn-spacing-large); } .alert__close-button { flex: 0 0 auto; display: flex; align-items: center; font-size: var(--syn-font-size-medium); margin-inline-end: var(--syn-spacing-medium); align-self: center; } .alert__countdown { position: absolute; bottom: 0; left: 0; width: 100%; height: calc(var(--syn-panel-border-width) * 3); background-color: var(--syn-panel-border-color); display: flex; } .alert__countdown--ltr { justify-content: flex-end; } .alert__countdown .alert__countdown-elapsed { height: 100%; width: 0; } .alert--primary .alert__countdown-elapsed { background-color: var(--syn-color-primary-600); } .alert--success .alert__countdown-elapsed { background-color: var(--syn-color-success-600); } .alert--neutral .alert__countdown-elapsed { background-color: var(--syn-color-neutral-600); } .alert--warning .alert__countdown-elapsed { background-color: var(--syn-color-warning-600); } .alert--danger .alert__countdown-elapsed { background-color: var(--syn-color-danger-600); } .alert__timer { display: none; } `; export { alert_styles_default }; //# sourceMappingURL=chunk.BXY667C7.js.map