ant-design/site/theme/static/colors.less
2017-12-08 14:44:24 +08:00

120 lines
2.2 KiB
Plaintext

/* stylelint-disable no-duplicate-selectors */
.color-palettes {
margin: 0 1%;
}
.color-palette {
margin: 45px 1%;
width: 31%;
display: inline-block;
&-pick {
text-align: center;
font-size: 20px;
margin-bottom: 8px;
}
&-picker {
margin: 12px 0 24px;
&-value {
font-size: 13px;
font-family: Consolas;
}
}
}
.main-color {
text-align: left;
&-item {
cursor: pointer;
height: 44px;
line-height: 44px;
padding: 0 12px;
margin-right: 4px;
transition: all .2s;
position: relative;
font-family: Consolas;
font-size: 14px;
&:first-child {
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
}
&:hover {
margin-right: -8px;
border-radius: 0 4px 4px 0;
}
}
&-item &-text {
transition: all .3s;
float: left;
}
&-item &-value {
float: right;
transform: scale(0.85);
transform-origin: 100% 50%;
opacity: 0;
position: relative;
left: 3px;
transition: all .3s;
}
}
.color-title {
margin: 0 0 24px;
font-weight: 500;
color: #5c6b77;
font-size: 22px;
text-transform: capitalize;
text-align: center;
}
.color-description {
font-size: 14px;
font-weight: lighter;
color: #777;
display: block;
}
.main-color:hover {
.main-color-value {
opacity: 0.7;
left: 0;
}
}
.make-palatte(@color, @index: 1) when (@index <= 10) {
.palatte-@{color}-@{index} {
@background: "@{color}-@{index}";
background: @@background;
}
.make-palatte(@color, (@index + 1)); // next iteration
}
@grey-1: hsv(0, 0, 100%);
@grey-2: hsv(0, 0, 98%);
@grey-3: hsv(0, 0, 96%);
@grey-4: hsv(0, 0, 91%);
@grey-5: hsv(0, 0, 85%);
@grey-6: rgba(0, 0, 0, 25%);
@grey-7: rgba(0, 0, 0, 45%);
@grey-8: rgba(0, 0, 0, 65%);
@grey-9: rgba(0, 0, 0, 85%);
@grey-10: rgba(0, 0, 0, 100%);
@border-color: rgba(229, 231, 235, 100);
.main-color {
.make-palatte(blue);
.make-palatte(purple);
.make-palatte(cyan);
.make-palatte(green);
.make-palatte(magenta);
.make-palatte(red);
.make-palatte(volcano);
.make-palatte(orange);
.make-palatte(gold);
.make-palatte(yellow);
.make-palatte(lime);
.make-palatte(geekblue);
.make-palatte(grey);
}