xdesign-vue-next/es/alert/style/index.css

XDesign Component for vue-next

/* Alert */
.x-alert {
  font: var(--td-font-body-medium);
  color: var(--td-text-color-primary);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
  opacity: 1;
  transition: opacity 0.2s;
  border-radius: var(--td-radius-medium);
}
.x-alert.x-is-hidden {
  /* 隐藏 */
  display: none;
}
.x-alert--closing {
  opacity: 0;
}
.x-alert--info {
  background-color: var(--td-brand-color-focus);
}
.x-alert--info .x-alert__icon {
  color: var(--td-brand-color);
}
.x-alert--info .x-alert__swiper-trigger-wrap {
  color: var(--td-brand-color);
}
.x-alert--info .x-alert__swiper-trigger--active {
  color: var(--td-brand-color);
}
.x-alert--success {
  background-color: var(--td-success-color-focus);
}
.x-alert--success .x-alert__icon {
  color: var(--td-success-color);
}
.x-alert--success .x-alert__swiper-trigger-wrap {
  color: var(--td-success-color-focus);
}
.x-alert--success .x-alert__swiper-trigger--active {
  color: var(--td-success-color);
}
.x-alert--warning {
  background-color: var(--td-warning-color-focus);
}
.x-alert--warning .x-alert__icon {
  color: var(--td-warning-color);
}
.x-alert--warning .x-alert__swiper-trigger-wrap {
  color: var(--td-warning-color-focus);
}
.x-alert--warning .x-alert__swiper-trigger--active {
  color: var(--td-warning-color);
}
.x-alert--error {
  background-color: var(--td-error-color-focus);
}
.x-alert--error .x-alert__icon {
  color: var(--td-error-color);
}
.x-alert--error .x-alert__swiper-trigger-wrap {
  color: var(--td-error-color-focus);
}
.x-alert--error .x-alert__swiper-trigger--active {
  color: var(--td-error-color);
}
.x-alert__icon {
  font-size: var(--td-line-height-body-medium);
  display: inherit;
}
.x-alert__icon,
.x-alert__close {
  flex: 0 0 auto;
  line-height: var(--td-line-height-body-small);
}
.x-alert__content {
  flex: 1 1 0;
  font-size: var(--td-font-size-body-medium);
  line-height: var(--td-line-height-body-medium);
  overflow: hidden;
}
.x-alert__title,
.x-alert__message {
  width: 100%;
  display: flex;
}
.x-alert__title {
  color: var(--td-text-color-primary);
  font-weight: bold;
}
.x-alert__title + .x-alert__message {
  margin-top: var(--td-comp-margin-s);
}
.x-alert__description {
  color: var(--td-text-color-secondary);
  flex: 0 1 auto;
  transition: height 0.2s;
}
.x-alert__operation {
  flex: 0 0 auto;
  padding: 0 var(--td-comp-paddingLR-s);
  color: var(--td-brand-color);
  cursor: pointer;
  transition: color 0.2s;
}
.x-alert__operation:hover {
  color: var(--td-brand-color-hover);
}
.x-alert__operation:active {
  color: var(--td-brand-color-active);
}
.x-alert__icon + .x-alert__content {
  margin-left: var(--td-comp-margin-s);
}
.x-alert__collapse {
  margin-top: var(--td-comp-margin-s);
  color: var(--td-brand-color);
  cursor: pointer;
}
.x-alert__close {
  display: inline-flex;
  align-items: center;
  margin-left: var(--td-comp-margin-l);
  color: var(--td-text-color-secondary);
  cursor: pointer;
  transition: color 0.2s;
}
.x-alert__close:hover {
  color: var(--td-text-color-primary);
}
.x-alert__close > .x-icon {
  font-size: calc(var(--td-line-height-body-medium) - 2px);
  padding: calc((var(--td-line-height-body-medium) - calc(var(--td-line-height-body-medium) - 2px)) / 2) 0;
}