mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-02 15:59:38 +08:00
a73abb9487
* feat: Badge.Ribbon, wip * feat: Badge.Ribbon * test: Badge.Ribbon * chore * test: update snapshot * fix: Badge.RibbonStyle IE 11 * chore * docs * chore * chore * refactor * docs * refactor: remove placement left & right * Update components/badge/index.zh-CN.md Co-authored-by: xrkffgg <xrkffgg@gmail.com> * Update components/badge/index.en-US.md Co-authored-by: xrkffgg <xrkffgg@gmail.com> * docs: demo change * docs * refactor: use css * refactor: use css rtl * refactor Co-authored-by: xrkffgg <xrkffgg@gmail.com>
85 lines
2.0 KiB
Plaintext
85 lines
2.0 KiB
Plaintext
@import '../../style/themes/index';
|
|
@import '../../style/mixins/index';
|
|
|
|
@ribbon-prefix-cls: ~'@{ant-prefix}-ribbon';
|
|
@ribbon-wrapper-prefix-cls: ~'@{ant-prefix}-ribbon-wrapper';
|
|
|
|
.@{ribbon-wrapper-prefix-cls} {
|
|
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;
|
|
|
|
&-corner {
|
|
position: absolute;
|
|
top: 100%;
|
|
width: 8px;
|
|
height: 8px;
|
|
color: @primary-color;
|
|
border: 4px solid;
|
|
transform: scaleY(0.75);
|
|
transform-origin: top;
|
|
// If not support IE 11, use filter: brightness(75%) instead
|
|
&::after {
|
|
position: absolute;
|
|
top: -4px;
|
|
left: -4px;
|
|
width: inherit;
|
|
height: inherit;
|
|
color: rgba(0, 0, 0, 0.25);
|
|
border: inherit;
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
// 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} {
|
|
background-color: @@darkColor;
|
|
.@{ribbon-prefix-cls}-corner {
|
|
color: @@darkColor;
|
|
}
|
|
}
|
|
}
|
|
.make-color-classes();
|
|
|
|
// placement
|
|
&.@{ribbon-prefix-cls}-placement-end {
|
|
right: -8px;
|
|
border-bottom-right-radius: 0;
|
|
.@{ribbon-prefix-cls}-corner {
|
|
right: 0;
|
|
border-color: currentColor transparent transparent currentColor;
|
|
&::after {
|
|
border-color: currentColor transparent transparent currentColor;
|
|
}
|
|
}
|
|
}
|
|
&.@{ribbon-prefix-cls}-placement-start {
|
|
left: -8px;
|
|
border-bottom-left-radius: 0;
|
|
.@{ribbon-prefix-cls}-corner {
|
|
left: 0;
|
|
border-color: currentColor currentColor transparent transparent;
|
|
&::after {
|
|
border-color: currentColor currentColor transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|