mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-15 09:21:24 +08:00
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;
|
|
}
|
|
}
|
|
}
|
|
}
|