PromoCursed/node_modules/rc-segmented/assets/index.less

101 lines
1.6 KiB
Plaintext
Raw Normal View History

2024-08-20 23:25:37 +04:00
@segmented-prefix-cls: rc-segmented;
.segmented-disabled-item() {
&,
&:hover,
&:focus {
color: fade(#000, 25%);
cursor: not-allowed;
}
}
.segmented-item-selected() {
background-color: white;
}
.@{segmented-prefix-cls} {
display: inline-block;
padding: 2px;
background-color: rgba(0, 0, 0, 0.04);
&-group {
position: relative;
display: flex;
align-items: stretch;
justify-items: flex-start;
width: 100%;
border-radius: 2px;
}
&-item {
position: relative;
min-height: 28px;
padding: 4px 10px;
color: fade(#000, 85%);
text-align: center;
cursor: pointer;
&-selected {
.segmented-item-selected();
color: #262626;
}
&:hover,
&:focus {
color: #262626;
}
&-disabled {
.segmented-disabled-item();
}
&-label {
z-index: 2;
line-height: 24px;
}
&-input {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
}
// disabled styles
&-disabled &-item,
&-disabled &-item:hover,
&-disabled &-item:focus {
.segmented-disabled-item();
}
&-thumb {
.segmented-item-selected();
position: absolute;
// top: 0;
// left: 0;
width: 0;
height: 100%;
padding: 4px 0;
}
// transition effect when `enter-active`
&-thumb-motion-appear-active,
&-thumb-motion-enter-active {
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
will-change: transform, width;
}
&-rtl {
direction: rtl;
}
}