ant-design/components/badge/style/ribbon.less
偏右 3ef6ea3ead
refactor: 📦 some styles to reduce css bundle size (#27129)
* refactor: some styles to reduce css bundle size

* test: update snapshot

* fix snapshot

* fix test case

* fix addonAfter

* fix firefox style

* reduce riddon css size

* fix Input.Group border radius

* remove unused css selectors

* fix test cov

* fix search button hover border

* fix rtl textarea clear icon style

* update demos

* fix search rtl style

* fix input search style
2020-10-13 21:16:20 +08:00

82 lines
1.8 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;
&-text {
color: @white;
}
&-corner {
position: absolute;
top: 100%;
width: 8px;
height: 8px;
color: currentColor;
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} {
color: @@darkColor;
background: @@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;
}
}
&.@{ribbon-prefix-cls}-placement-start {
left: -8px;
border-bottom-left-radius: 0;
.@{ribbon-prefix-cls}-corner {
left: 0;
border-color: currentColor currentColor transparent transparent;
}
}
}