zarm/es/message/style/index.css

基于 React 的移动端UI库

.za-message {
  --line-height: var(--za-message-line-height, 18px);
  --font-size: var(--za-message-font-size, var(--za-font-size-xs));
  --icon-size: var(--za-message-icon-size, 14px);
  --padding: var(--za-message-padding, 6px 8px);
  display: flex;
  position: relative;
  line-height: var(--line-height);
  padding: var(--padding);
  font-size: var(--font-size);
  color: var(--za-theme-default);
  background-color: hsla(var(--za-theme-default-h), var(--za-theme-default-s), var(--za-theme-default-l), 0.1);
}
.za-message .za-icon {
  color: var(--za-theme-default);
}
.za-message__header {
  display: flex;
  align-items: center;
  line-height: 1;
}

.za-message__icon {
  margin-right: 4px;
}
.za-message__icon .za-icon {
  font-size: var(--icon-size);
}

.za-message__body {
  flex: 1;
  display: flex;
  align-items: center;
}

.za-message__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: right;
  padding-left: 10px;
}
.za-message__footer .za-icon {
  font-size: var(--icon-size);
  cursor: pointer;
}

.za-message--link {
  cursor: pointer;
}

.za-message--primary {
  color: var(--za-theme-primary);
  background-color: hsla(var(--za-theme-primary-h), var(--za-theme-primary-s), var(--za-theme-primary-l), 0.1);
}
.za-message--primary .za-icon {
  color: var(--za-theme-primary);
}

.za-message--success {
  color: var(--za-theme-success);
  background-color: hsla(var(--za-theme-success-h), var(--za-theme-success-s), var(--za-theme-success-l), 0.1);
}
.za-message--success .za-icon {
  color: var(--za-theme-success);
}

.za-message--warning {
  color: var(--za-theme-warning);
  background-color: hsla(var(--za-theme-warning-h), var(--za-theme-warning-s), var(--za-theme-warning-l), 0.1);
}
.za-message--warning .za-icon {
  color: var(--za-theme-warning);
}

.za-message--danger {
  color: var(--za-theme-danger);
  background-color: hsla(var(--za-theme-danger-h), var(--za-theme-danger-s), var(--za-theme-danger-l), 0.1);
}
.za-message--danger .za-icon {
  color: var(--za-theme-danger);
}