@kelvininc/ui-components/dist/collection/components/alert/alert.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

/* stylelint-disable csstools/value-no-unknown-custom-properties */
/* stylelint-enable csstools/value-no-unknown-custom-properties */
.alert-container {
  height: var(--alert-container-height, unset);
  border-radius: var(--alert-radius-default);
}

.alert {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.alert--type-info {
  background-color: var(--alert-background-primary-info);
}
.alert--type-info kv-icon {
  --icon-color: var(--alert-icon-color-primary-info);
}
.alert--type-info ::slotted(*) {
  --icon-color-default-secondary: var(--alert-button-text-info-default);
  --icon-color-hover-secondary: var(--alert-button-text-info-hover);
  --icon-color-focus-secondary: var(--alert-button-text-info-pressed);
  --icon-color-active-secondary: var(--alert-button-text-info-pressed);
  --text-color-default-secondary: var(--alert-button-text-info-default);
  --text-color-hover-secondary: var(--alert-button-text-info-hover);
  --text-color-focus-secondary: var(--alert-button-text-info-pressed);
  --text-color-active-secondary: var(--alert-button-text-info-pressed);
  --background-color-hover-secondary: var(--alert-button-background-info);
  --background-color-focus-secondary: var(--alert-button-background-info);
  --background-color-active-secondary: var(--alert-button-background-info);
  --border-color-default-secondary: var(--alert-button-border-info);
  --border-color-hover-secondary: var(--alert-button-background-info);
  --border-color-focus-secondary: var(--alert-button-background-info);
  --border-color-active-secondary: var(--alert-button-background-info);
  --icon-color-default-tertiary: var(--alert-button-text-info-default);
  --icon-color-hover-tertiary: var(--alert-button-text-info-hover);
  --icon-color-focus-tertiary: var(--alert-button-text-info-pressed);
  --icon-color-active-tertiary: var(--alert-button-text-info-pressed);
  --text-color-default-tertiary: var(--alert-button-text-info-default);
  --text-color-hover-tertiary: var(--alert-button-text-info-hover);
  --text-color-focus-tertiary: var(--alert-button-text-info-pressed);
  --text-color-active-tertiary: var(--alert-button-text-info-pressed);
  --background-color-hover-tertiary: var(--alert-button-background-info);
  --background-color-focus-tertiary: var(--alert-button-background-info);
  --background-color-active-tertiary: var(--alert-button-background-info);
  --border-color-hover-tertiary: var(--alert-button-background-info);
  --border-color-focus-tertiary: var(--alert-button-background-info);
  --border-color-active-tertiary: var(--alert-button-background-info);
}
.alert--type-info .close-button {
  --icon-color-default-text: var(--alert-button-icon-info);
  --icon-color-hover-text: var(--alert-button-icon-info);
  --icon-color-focus-text: var(--alert-button-icon-info);
  --icon-color-active-text: var(--alert-button-icon-info);
}
.alert--type-error {
  background-color: var(--alert-background-primary-error);
}
.alert--type-error kv-icon {
  --icon-color: var(--alert-icon-color-primary-danger);
}
.alert--type-error ::slotted(*) {
  --icon-color-default-secondary: var(--alert-button-text-danger-default);
  --icon-color-hover-secondary: var(--alert-button-text-danger-hover);
  --icon-color-focus-secondary: var(--alert-button-text-danger-pressed);
  --icon-color-active-secondary: var(--alert-button-text-danger-pressed);
  --text-color-default-secondary: var(--alert-button-text-danger-default);
  --text-color-hover-secondary: var(--alert-button-text-danger-hover);
  --text-color-focus-secondary: var(--alert-button-text-danger-pressed);
  --text-color-active-secondary: var(--alert-button-text-danger-pressed);
  --background-color-hover-secondary: var(--alert-button-background-danger);
  --background-color-focus-secondary: var(--alert-button-background-danger);
  --background-color-active-secondary: var(--alert-button-background-danger);
  --border-color-default-secondary: var(--alert-button-border-danger);
  --border-color-hover-secondary: var(--alert-button-background-danger);
  --border-color-focus-secondary: var(--alert-button-background-danger);
  --border-color-active-secondary: var(--alert-button-background-danger);
  --icon-color-default-tertiary: var(--alert-button-text-danger-default);
  --icon-color-hover-tertiary: var(--alert-button-text-danger-hover);
  --icon-color-focus-tertiary: var(--alert-button-text-danger-pressed);
  --icon-color-active-tertiary: var(--alert-button-text-danger-pressed);
  --text-color-default-tertiary: var(--alert-button-text-danger-default);
  --text-color-hover-tertiary: var(--alert-button-text-danger-hover);
  --text-color-focus-tertiary: var(--alert-button-text-danger-pressed);
  --text-color-active-tertiary: var(--alert-button-text-danger-pressed);
  --background-color-hover-tertiary: var(--alert-button-background-danger);
  --background-color-focus-tertiary: var(--alert-button-background-danger);
  --background-color-active-tertiary: var(--alert-button-background-danger);
  --border-color-hover-tertiary: var(--alert-button-background-danger);
  --border-color-focus-tertiary: var(--alert-button-background-danger);
  --border-color-active-tertiary: var(--alert-button-background-danger);
}
.alert--type-error .close-button {
  --icon-color-default-text: var(--alert-button-icon-danger);
  --icon-color-hover-text: var(--alert-button-icon-danger);
  --icon-color-focus-text: var(--alert-button-icon-danger);
  --icon-color-active-text: var(--alert-button-icon-danger);
}
.alert--type-success {
  background-color: var(--alert-background-primary-success);
}
.alert--type-success kv-icon {
  --icon-color: var(--alert-icon-color-primary-success);
}
.alert--type-success ::slotted(*) {
  --icon-color-default-secondary: var(--alert-button-text-success-default);
  --icon-color-hover-secondary: var(--alert-button-text-success-hover);
  --icon-color-focus-secondary: var(--alert-button-text-success-pressed);
  --icon-color-active-secondary: var(--alert-button-text-success-pressed);
  --text-color-default-secondary: var(--alert-button-text-success-default);
  --text-color-hover-secondary: var(--alert-button-text-success-hover);
  --text-color-focus-secondary: var(--alert-button-text-success-pressed);
  --text-color-active-secondary: var(--alert-button-text-success-pressed);
  --background-color-hover-secondary: var(--alert-button-background-success);
  --background-color-focus-secondary: var(--alert-button-background-success);
  --background-color-active-secondary: var(--alert-button-background-success);
  --border-color-default-secondary: var(--alert-button-border-success);
  --border-color-hover-secondary: var(--alert-button-background-success);
  --border-color-focus-secondary: var(--alert-button-background-success);
  --border-color-active-secondary: var(--alert-button-background-success);
  --icon-color-default-tertiary: var(--alert-button-text-success-default);
  --icon-color-hover-tertiary: var(--alert-button-text-success-hover);
  --icon-color-focus-tertiary: var(--alert-button-text-success-pressed);
  --icon-color-active-tertiary: var(--alert-button-text-success-pressed);
  --text-color-default-tertiary: var(--alert-button-text-success-default);
  --text-color-hover-tertiary: var(--alert-button-text-success-hover);
  --text-color-focus-tertiary: var(--alert-button-text-success-pressed);
  --text-color-active-tertiary: var(--alert-button-text-success-pressed);
  --background-color-hover-tertiary: var(--alert-button-background-success);
  --background-color-focus-tertiary: var(--alert-button-background-success);
  --background-color-active-tertiary: var(--alert-button-background-success);
  --border-color-hover-tertiary: var(--alert-button-background-success);
  --border-color-focus-tertiary: var(--alert-button-background-success);
  --border-color-active-tertiary: var(--alert-button-background-success);
}
.alert--type-success .close-button {
  --icon-color-default-text: var(--alert-button-icon-success);
  --icon-color-hover-text: var(--alert-button-icon-success);
  --icon-color-focus-text: var(--alert-button-icon-success);
  --icon-color-active-text: var(--alert-button-icon-success);
}
.alert--type-warning {
  background-color: var(--alert-background-primary-warning);
}
.alert--type-warning kv-icon {
  --icon-color: var(--alert-icon-color-primary-warning);
}
.alert--type-warning ::slotted(*) {
  --icon-color-default-secondary: var(--alert-button-text-warning-default);
  --icon-color-hover-secondary: var(--alert-button-text-warning-hover);
  --icon-color-focus-secondary: var(--alert-button-text-warning-pressed);
  --icon-color-active-secondary: var(--alert-button-text-warning-pressed);
  --text-color-default-secondary: var(--alert-button-text-warning-default);
  --text-color-hover-secondary: var(--alert-button-text-warning-hover);
  --text-color-focus-secondary: var(--alert-button-text-warning-pressed);
  --text-color-active-secondary: var(--alert-button-text-warning-pressed);
  --background-color-hover-secondary: var(--alert-button-background-warning);
  --background-color-focus-secondary: var(--alert-button-background-warning);
  --background-color-active-secondary: var(--alert-button-background-warning);
  --border-color-default-secondary: var(--alert-button-border-warning);
  --border-color-hover-secondary: var(--alert-button-background-warning);
  --border-color-focus-secondary: var(--alert-button-background-warning);
  --border-color-active-secondary: var(--alert-button-background-warning);
  --icon-color-default-tertiary: var(--alert-button-text-warning-default);
  --icon-color-hover-tertiary: var(--alert-button-text-warning-hover);
  --icon-color-focus-tertiary: var(--alert-button-text-warning-pressed);
  --icon-color-active-tertiary: var(--alert-button-text-warning-pressed);
  --text-color-default-tertiary: var(--alert-button-text-warning-default);
  --text-color-hover-tertiary: var(--alert-button-text-warning-hover);
  --text-color-focus-tertiary: var(--alert-button-text-warning-pressed);
  --text-color-active-tertiary: var(--alert-button-text-warning-pressed);
  --background-color-hover-tertiary: var(--alert-button-background-warning);
  --background-color-focus-tertiary: var(--alert-button-background-warning);
  --background-color-active-tertiary: var(--alert-button-background-warning);
  --border-color-hover-tertiary: var(--alert-button-background-warning);
  --border-color-focus-tertiary: var(--alert-button-background-warning);
  --border-color-active-tertiary: var(--alert-button-background-warning);
}
.alert--type-warning .close-button {
  --icon-color-default-text: var(--alert-button-icon-warning);
  --icon-color-hover-text: var(--alert-button-icon-warning);
  --icon-color-focus-text: var(--alert-button-icon-warning);
  --icon-color-active-text: var(--alert-button-icon-warning);
}
.alert .main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--alert-gap-vertical-small);
  padding: var(--alert-padding-y-default) var(--alert-padding-x-default);
}
.alert .information {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: var(--alert-gap-vertical-small);
}
.alert .information kv-icon {
  height: 20px;
  align-items: center;
  display: flex;
  --icon-height: var(--size-default);
  --icon-width: var(--size-default);
}
.alert .information .title {
  font-family: Proxima Nova;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--alert-text-default);
}
.alert .information .description {
  font-family: Proxima Nova;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--alert-text-default);
  margin-top: var(--spacing-xs);
}
.alert .close-button::part(button) {
  display: flex;
}

.alert--size-small .main {
  flex-wrap: wrap;
  row-gap: var(--alert-gap-horizontal-large);
}
.alert--size-small .main .close-button {
  order: 1;
  align-self: start;
}
.alert--size-small .main ::slotted([slot=actions]) {
  order: 2;
  flex-basis: 100%;
}
.alert--size-small .main.show-icon ::slotted([slot=actions]) {
  margin-left: calc(var(--size-default) + var(--alert-gap-vertical-small)) !important;
}