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

171 lines
3.0 KiB
Plaintext
Raw Normal View History

/* stylelint-disable no-duplicate-selectors */
2017-10-13 20:27:22 +08:00
.color-palettes {
margin: 0 1%;
}
2016-03-03 17:23:08 +08:00
.color-palette {
2017-10-13 20:27:22 +08:00
margin: 45px 1%;
width: 31%;
display: inline-block;
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 {
text-align: left;
2017-01-04 15:13:55 +08:00
&-item {
2017-03-10 18:04:14 +08:00
cursor: pointer;
2017-10-13 20:27:22 +08:00
height: 44px;
line-height: 44px;
padding: 0 12px;
margin-right: 4px;
2017-01-04 15:13:55 +08:00
transition: all .2s;
position: relative;
font-family: Consolas;
2017-10-13 20:27:22 +08:00
font-size: 14px;
&:first-child {
border-radius: 4px 4px 0 0;
}
&:last-child {
2017-10-13 20:27:22 +08:00
border-radius: 0 0 4px 4px;
}
2017-03-10 18:04:14 +08:00
&:hover {
2017-10-13 20:27:22 +08:00
margin-right: -8px;
border-radius: 0 4px 4px 0;
2017-03-10 18:04:14 +08:00
}
2017-01-04 15:13:55 +08:00
}
2017-10-09 18:24:12 +08:00
&-item &-text {
transition: all .3s;
2017-10-13 20:27:22 +08:00
float: left;
2017-10-09 18:24:12 +08:00
}
2017-01-04 15:13:55 +08:00
&-item &-value {
2017-10-13 20:27:22 +08:00
float: right;
transform: scale(0.85);
2017-10-19 17:02:02 +08:00
transform-origin: 100% 50%;
opacity: 0;
2017-10-13 20:27:22 +08:00
position: relative;
left: 3px;
transition: all .3s;
}
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-10-13 20:27:22 +08:00
font-size: 22px;
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-10-09 18:24:12 +08:00
font-size: 14px;
2017-03-03 13:48:22 +08:00
font-weight: lighter;
color: #777;
display: block;
2016-03-03 17:23:08 +08:00
}
.main-color:hover {
2017-01-04 15:13:55 +08:00
.main-color-value {
opacity: 0.7;
2017-10-13 20:27:22 +08:00
left: 0;
}
2016-03-03 17:23:08 +08:00
}
2017-12-26 14:57:49 +08:00
.color-palette-horizontal {
width: 100%;
.main-color {
display: flex;
&-item {
flex: 1;
position: relative;
padding: 0;
margin-right: 0;
border-radius: 0;
height: 86px;
text-align: center;
padding-top: 37px;
line-height: normal;
.main-color-text {
float: none;
}
&:hover {
margin-top: -10px;
height: 96px;
border-radius: 4px 4px 0 0;
}
}
&-value {
position: absolute;
text-align: center;
width: 100%;
left: 0;
bottom: 0;
float: none;
transform-origin: unset;
}
&:hover {
.main-color-item {
padding-top: 8px;
}
.main-color-value {
opacity: 0.7;
bottom: 8px;
}
}
}
}
.make-palatte(@color, @index: 1) when (@index <= 10) {
.palatte-@{color}-@{index} {
@background: "@{color}-@{index}";
background: @@background;
}
.make-palatte(@color, (@index + 1)); // next iteration
}
2017-10-19 17:02:02 +08:00
@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%);
2017-03-03 13:48:22 +08:00
@border-color: rgba(229, 231, 235, 100);
2017-01-03 20:11:13 +08:00
.main-color {
.make-palatte(blue);
.make-palatte(purple);
.make-palatte(cyan);
.make-palatte(green);
2017-10-09 18:24:12 +08:00
.make-palatte(magenta);
2017-01-03 20:11:13 +08:00
.make-palatte(red);
2017-10-09 18:24:12 +08:00
.make-palatte(volcano);
2017-01-03 20:11:13 +08:00
.make-palatte(orange);
2017-10-09 18:24:12 +08:00
.make-palatte(gold);
2017-01-03 20:11:13 +08:00
.make-palatte(yellow);
2017-10-09 18:24:12 +08:00
.make-palatte(lime);
.make-palatte(geekblue);
2017-03-03 13:48:22 +08:00
.make-palatte(grey);
2017-01-03 20:11:13 +08:00
}