tntd/lib/notification/notification.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@notification-padding-horizontal-sm: 20px;
@notification-prefix-cls: ~'@{ant-prefix}-notification';
@tnt-notification-prefix-cls: ~'tnt-notification';
@notification-padding-vertical: 16px;
@tnt-notification-padding: @notification-padding-vertical @notification-padding-horizontal-sm;


.@{notification-prefix-cls}-notice-message {
  font-weight: 500;
}
.@{notification-prefix-cls}-notice-description {
  color: @text-color-secondary;
}


.@{notification-prefix-cls}-notice-with-icon:has(.@{tnt-notification-prefix-cls}-notice-icon) {
  .@{notification-prefix-cls}-notice-icon {
    left: 10px;
    top: 9px;
    margin: 0;
    padding: 0;
    font-size: @font-size-xl;
  }

  .@{notification-prefix-cls}-notice-message {
    margin-left: 28px;
  }
  .@{notification-prefix-cls}-notice-description {
    margin-left: 28px;
  }
 
}

.@{notification-prefix-cls}-notice:has(.img-icon) {
  .@{notification-prefix-cls}-notice-icon {
    left: 20px;
    margin: 0;
  }
  .@{notification-prefix-cls}-notice-message {
    margin-left: 64px;
  }
  .@{notification-prefix-cls}-notice-description {
    margin-left: 64px;
  }
}

.@{notification-prefix-cls} {
  &-notice{
    padding: @notification-padding !important;
    border-radius: @border-radius-lg !important;
  }
  
  &-close-icon {
    // font-size: @font-size-base;
    font-size: @font-size-lg;
    cursor: pointer;
    color: tint(@text-color, 50%);
  }
}