ng-zorro-antd/badge/style/ribbon.less

An enterprise-class UI components based on Ant Design and Angular

@import '../../style/themes/index';
@import '../../style/mixins/index';

@ribbon-prefix-cls: ~'@{ant-prefix}-ribbon';

.@{ribbon-prefix-cls}-wrapper {
  position: relative;
}

.@{ribbon-prefix-cls} {
  .reset-component();

  position: absolute;
  top: 8px;
  height: 22px;
  padding: 0 8px;
  color: @badge-text-color;
  line-height: 22px;
  white-space: nowrap;
  background-color: @primary-color;
  border-radius: @border-radius-sm;

  &-text {
    color: @white;
  }

  &-corner {
    position: absolute;
    top: 100%;
    width: 8px;
    height: 8px;
    color: currentcolor;
    border: 4px solid;
    transform: scaleY(0.75);
    transform-origin: top;
    filter: brightness(75%);
  }

  // colors
  // mixin to iterate over colors and create CSS class for each one
  .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
    .make-color-classes(@i - 1);
    @color: extract(@preset-colors, @i);
    @darkColor: '@{color}-6';
    &-color-@{color} {
      color: @@darkColor;
      background: @@darkColor;
    }
  }
  .make-color-classes();

  // placement
  &.@{ribbon-prefix-cls}-placement-end {
    inset-inline-end: -8px;
    border-end-end-radius: 0;
    .@{ribbon-prefix-cls}-corner {
      inset-inline-end: 0;
      border-inline-end-color: transparent;
      border-block-end-color: transparent;
    }
  }

  &.@{ribbon-prefix-cls}-placement-start {
    inset-inline-start: -8px;
    border-end-start-radius: 0;
    .@{ribbon-prefix-cls}-corner {
      inset-inline-start: 0;
      border-inline-start-color: transparent;
      border-block-end-color: transparent;
    }
  }

  // ====================== RTL =======================
  &-rtl {
    direction: rtl;
  }
}