ant-design/site/theme/static/colors.less

109 lines
1.8 KiB
Plaintext
Raw Normal View History

2016-03-03 17:23:08 +08:00
.color-palette {
margin: 45px 0;
2017-03-17 20:14:11 +08:00
&-pick {
text-align: center;
font-size: 20px;
margin-bottom: 8px;
}
&-picker {
margin: 12px 0 24px;
&-value {
font-size: 13px;
font-family: Consolas;
}
}
2016-03-03 17:23:08 +08:00
}
2016-05-11 00:24:00 +08:00
2016-03-03 17:23:08 +08:00
.main-color {
display: flex;
2017-01-04 15:13:55 +08:00
&-item {
2017-03-10 18:04:14 +08:00
cursor: pointer;
flex: 1;
height: 80px;
2017-01-04 15:13:55 +08:00
border-radius: 4px;
float: left;
margin-right: 4px;
2017-01-04 15:13:55 +08:00
transition: all .2s;
position: relative;
text-align: center;
padding-top: 28px;
2017-01-04 15:13:55 +08:00
font-family: Consolas;
font-size: 12px;
&:last-child {
margin-right: 0;
}
2017-03-10 18:04:14 +08:00
&:hover {
margin-top: -10px;
height: 90px;
}
2017-01-04 15:13:55 +08:00
}
&-item &-value {
font-size: 12px;
position: absolute;
bottom: -4px;
transform: scale(0.85);
left: 0;
width: 100%;
text-align: center;
opacity: 0;
transition: all .2s ease .1s;
}
2016-03-03 17:23:08 +08:00
}
.color-title {
2017-03-03 13:48:22 +08:00
margin: 0 0 24px;
font-weight: 500;
2017-02-26 15:41:50 +08:00
color: #5c6b77;
2017-03-03 13:48:22 +08:00
font-size: 26px;
text-transform: capitalize;
2017-03-03 13:48:22 +08:00
text-align: center;
2016-03-03 17:23:08 +08:00
}
.color-description {
2017-03-03 13:48:22 +08:00
font-size: 12px;
font-weight: lighter;
color: #777;
display: block;
2016-03-03 17:23:08 +08:00
}
.main-color:hover {
.main-color-item {
padding-top: 4px;
2017-01-04 15:13:55 +08:00
}
.main-color-value {
opacity: 0.7;
bottom: 3px;
}
2016-03-03 17:23:08 +08:00
}
.make-palatte(@color, @index: 1) when (@index <= 10) {
.palatte-@{color}-@{index} {
@background: "@{color}-@{index}";
background: @@background;
}
.make-palatte(@color, (@index + 1)); // next iteration
}
2017-03-03 13:48:22 +08:00
@grey-1: #fbfbfb;
@grey-2: #f7f7f7;
@grey-3: #f5f5f5;
@grey-4: #e9e9e9;
@grey-5: #d9d9d9;
@grey-6: #bfbfbf;
@grey-7: #919191;
@grey-8: #5a5a5a;
@grey-9: #404040;
@grey-10: #222;
2017-01-03 20:11:13 +08:00
.main-color {
.make-palatte(blue);
.make-palatte(purple);
.make-palatte(cyan);
.make-palatte(green);
.make-palatte(pink);
.make-palatte(red);
.make-palatte(orange);
.make-palatte(yellow);
2017-03-03 13:48:22 +08:00
.make-palatte(grey);
2017-01-03 20:11:13 +08:00
}