@bixi/theme
Version:
64 lines (62 loc) • 1.36 kB
text/less
.color-box {
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 4px 8px;
.inner-box {
padding: 8px 0;
background: #0092ff;
}
.color-example {
width: 100%;
.color-group {
padding: 36px 0;
.color-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
margin-right: 0;
padding: 6px 25px 6px 16px;
font-weight:400;
cursor: pointer;
transition: all .3s linear;
.value {
padding-left: 10px;
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
opacity: 0;
transition: all .5s linear;
}
&:last-child {
border-radius: 0 0 5px 5px;
}
&:first-child {
border-radius: 5px 5px 0 0;
}
&:hover {
margin-right: -15px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
}
&:hover {
.color-item {
.value {
opacity: 1;
}
}
}
.color-item-main {
height: 64px;
}
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}