vuestic-ui/dist/esm-node/VaAlert.css

Vue 3 UI Framework

:root,
:host {
  /* General */
  --va-alert-position: relative;
  --va-alert-display: flex;
  --va-alert-align-items: center;
  --va-alert-margin-y: 0.25rem;
  --va-alert-padding-x: 0.75rem;
  --va-alert-padding-y: 0.75rem;
  --va-alert-padding-y-dense: 0.25rem;
  --va-alert-border-width: 0;
  --va-alert-border-radius: 4px;
  --va-alert-box-shadow: var(--va-box-shadow);
  --va-alert-color: transparent;
  --va-alert-title-font-weight: 600;
  --va-alert-top-border-radius: 4px 4px 0 0;
  --va-alert-right-border-radius: 0 4px 4px 0;
  --va-alert-bottom-border-radius: 0 0 4px 4px;
  --va-alert-left-border-radius: 4px 0 0 4px;
  --va-badge-margin-right: 0.5rem;
  --va-badge-padding-x: 0.5rem;
  --va-badge-padding-y: 0.125rem;
  --va-badge-border-radius: 0.5rem;
  --va-badge-font-size: 0.625rem;
  --va-badge-letter-spacing: 0.0625rem;
  --va-alert-close-padding-x: 0.5rem;
  --va-alert-close-padding-y: 0.0625rem;
  --va-alert-close-font-size: 1rem;
  --va-alert-stripe-border-size: var(--va-stripe-border-size);
}
.va-alert {
  position: var(--va-alert-position);
  padding: var(--va-alert-padding-y) var(--va-alert-padding-x);
  margin: var(--va-alert-margin-y) auto;
  display: var(--va-alert-display);
  align-items: var(--va-alert-align-items);
  border: var(--va-alert-border-width, var(--va-control-border)) solid transparent;
  border-radius: var(--va-alert-border-radius, var(--va-block-border-radius));
  font-family: var(--va-font-family);
}
.va-alert__border {
  content: "";
  position: absolute;
}
.va-alert__border--top {
  border-radius: var(--va-alert-top-border-radius);
  width: 100%;
  height: var(--va-alert-stripe-border-size);
  top: 0;
  left: 0;
}
.va-alert__border--right {
  border-radius: var(--va-alert-right-border-radius);
  height: 100%;
  width: var(--va-alert-stripe-border-size);
  bottom: 0;
  right: 0;
}
.va-alert__border--bottom {
  border-radius: var(--va-alert-bottom-border-radius);
  width: 100%;
  height: var(--va-alert-stripe-border-size);
  bottom: 0;
  left: 0;
}
.va-alert__border--left {
  border-radius: var(--va-alert-left-border-radius);
  height: 100%;
  width: var(--va-alert-stripe-border-size);
  bottom: 0;
  left: 0;
}
.va-alert__icon {
  display: flex;
  align-items: center;
  padding-right: var(--va-alert-padding-x);
}
.va-alert__title {
  display: flex;
  align-items: center;
}
.va-alert__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  color: var(--va-alert-color);
}
.va-alert:focus-visible {
  outline: 2px solid var(--va-focus) !important;
  border-radius: "inherit";
}
.va-alert__close {
  padding-left: var(--va-alert-close-padding-x);
  font-size: var(--va-alert-close-font-size);
}
.va-alert__close--closeable {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.va-alert__close--closeable:focus-visible {
  outline: 2px solid var(--va-focus) !important;
  border-radius: "inherit";
}
@media (max-width: 575.98px) {
.va-alert__content {
    flex-direction: column;
    align-items: flex-start;
}
.va-alert__close {
    align-self: flex-start;
    display: flex;
    align-items: flex-start;
    padding: 0 var(--va-alert-close-padding-x) 0 0;
    margin: 0;
}
}