mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
fix: colorPalette and @tree-bg
This commit is contained in:
ycjcl868
parent
fcae72cd9f
commit
28306fb304
@ -37,7 +37,12 @@
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
& when (@theme = default) {
|
||||
color: fade(@black, 85%);
|
||||
}
|
||||
& when (@theme = dark) {
|
||||
color: fade(@white, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,12 @@
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
color: fade(@black, 80%);
|
||||
& when (@theme = default) {
|
||||
color: fade(@black, 85%);
|
||||
}
|
||||
& when (@theme = dark) {
|
||||
color: fade(@white, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
@theme: dark;
|
||||
// color palettes
|
||||
@blue-1: mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%);
|
||||
@blue-2: mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 30%);
|
||||
@blue-2: mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 25%);
|
||||
@blue-3: mix(@blue-base, @component-background, 30%);
|
||||
@blue-4: mix(@blue-base, @component-background, 45%);
|
||||
@blue-5: mix(@blue-base, @component-background, 65%);
|
||||
@ -14,10 +14,10 @@
|
||||
@blue-10: mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@purple-1: mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%);
|
||||
@purple-2: mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 30%);
|
||||
@purple-3: mix(@purple-6, @component-background, 30%);
|
||||
@purple-4: mix(@purple-6, @component-background, 45%);
|
||||
@purple-5: mix(@purple-6, @component-background, 65%);
|
||||
@purple-2: mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%);
|
||||
@purple-3: mix(@purple-base, @component-background, 30%);
|
||||
@purple-4: mix(@purple-base, @component-background, 45%);
|
||||
@purple-5: mix(@purple-base, @component-background, 65%);
|
||||
@purple-6: mix(@purple-base, @component-background, 85%);
|
||||
@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 85%);
|
||||
@purple-8: mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%);
|
||||
@ -25,10 +25,10 @@
|
||||
@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@cyan-1: mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%);
|
||||
@cyan-2: mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 30%);
|
||||
@cyan-3: mix(@cyan-6, @component-background, 30%);
|
||||
@cyan-4: mix(@cyan-6, @component-background, 45%);
|
||||
@cyan-5: mix(@cyan-6, @component-background, 65%);
|
||||
@cyan-2: mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%);
|
||||
@cyan-3: mix(@cyan-base, @component-background, 30%);
|
||||
@cyan-4: mix(@cyan-base, @component-background, 45%);
|
||||
@cyan-5: mix(@cyan-base, @component-background, 65%);
|
||||
@cyan-6: mix(@cyan-base, @component-background, 85%);
|
||||
@cyan-7: mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 85%);
|
||||
@cyan-8: mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%);
|
||||
@ -36,10 +36,10 @@
|
||||
@cyan-10: mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@green-1: mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%);
|
||||
@green-2: mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 30%);
|
||||
@green-3: mix(@green-6, @component-background, 30%);
|
||||
@green-4: mix(@green-6, @component-background, 45%);
|
||||
@green-5: mix(@green-6, @component-background, 65%);
|
||||
@green-2: mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%);
|
||||
@green-3: mix(@green-base, @component-background, 30%);
|
||||
@green-4: mix(@green-base, @component-background, 45%);
|
||||
@green-5: mix(@green-base, @component-background, 65%);
|
||||
@green-6: mix(@green-base, @component-background, 85%);
|
||||
@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 85%);
|
||||
@green-8: mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%);
|
||||
@ -47,10 +47,10 @@
|
||||
@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@magenta-1: mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%);
|
||||
@magenta-2: mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 30%);
|
||||
@magenta-3: mix(@magenta-6, @component-background, 30%);
|
||||
@magenta-4: mix(@magenta-6, @component-background, 45%);
|
||||
@magenta-5: mix(@magenta-6, @component-background, 65%);
|
||||
@magenta-2: mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%);
|
||||
@magenta-3: mix(@magenta-base, @component-background, 30%);
|
||||
@magenta-4: mix(@magenta-base, @component-background, 45%);
|
||||
@magenta-5: mix(@magenta-base, @component-background, 65%);
|
||||
@magenta-6: mix(@magenta-base, @component-background, 85%);
|
||||
@magenta-7: mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 85%);
|
||||
@magenta-8: mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%);
|
||||
@ -58,10 +58,10 @@
|
||||
@magenta-10: mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@pink-1: mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%);
|
||||
@pink-2: mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 30%);
|
||||
@pink-3: mix(@pink-6, @component-background, 30%);
|
||||
@pink-4: mix(@pink-6, @component-background, 45%);
|
||||
@pink-5: mix(@pink-6, @component-background, 65%);
|
||||
@pink-2: mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%);
|
||||
@pink-3: mix(@pink-base, @component-background, 30%);
|
||||
@pink-4: mix(@pink-base, @component-background, 45%);
|
||||
@pink-5: mix(@pink-base, @component-background, 65%);
|
||||
@pink-6: mix(@pink-base, @component-background, 85%);
|
||||
@pink-7: mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 85%);
|
||||
@pink-8: mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%);
|
||||
@ -69,7 +69,7 @@
|
||||
@pink-10: mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@red-1: mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%);
|
||||
@red-2: mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 30%);
|
||||
@red-2: mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%);
|
||||
@red-3: mix(@red-base, @component-background, 30%);
|
||||
@red-4: mix(@red-base, @component-background, 45%);
|
||||
@red-5: mix(@red-base, @component-background, 65%);
|
||||
@ -80,10 +80,10 @@
|
||||
@red-10: mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@orange-1: mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%);
|
||||
@orange-2: mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 30%);
|
||||
@orange-3: mix(@orange-6, @component-background, 30%);
|
||||
@orange-4: mix(@orange-6, @component-background, 45%);
|
||||
@orange-5: mix(@orange-6, @component-background, 65%);
|
||||
@orange-2: mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%);
|
||||
@orange-3: mix(@orange-base, @component-background, 30%);
|
||||
@orange-4: mix(@orange-base, @component-background, 45%);
|
||||
@orange-5: mix(@orange-base, @component-background, 65%);
|
||||
@orange-6: mix(@orange-base, @component-background, 85%);
|
||||
@orange-7: mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 85%);
|
||||
@orange-8: mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%);
|
||||
@ -91,10 +91,10 @@
|
||||
@orange-10: mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@yellow-1: mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%);
|
||||
@yellow-2: mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 30%);
|
||||
@yellow-3: mix(@yellow-6, @component-background, 30%);
|
||||
@yellow-4: mix(@yellow-6, @component-background, 45%);
|
||||
@yellow-5: mix(@yellow-6, @component-background, 65%);
|
||||
@yellow-2: mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%);
|
||||
@yellow-3: mix(@yellow-base, @component-background, 30%);
|
||||
@yellow-4: mix(@yellow-base, @component-background, 45%);
|
||||
@yellow-5: mix(@yellow-base, @component-background, 65%);
|
||||
@yellow-6: mix(@yellow-base, @component-background, 85%);
|
||||
@yellow-7: mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 85%);
|
||||
@yellow-8: mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%);
|
||||
@ -102,10 +102,10 @@
|
||||
@yellow-10: mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@volcano-1: mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%);
|
||||
@volcano-2: mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 30%);
|
||||
@volcano-3: mix(@volcano-6, @component-background, 30%);
|
||||
@volcano-4: mix(@volcano-6, @component-background, 45%);
|
||||
@volcano-5: mix(@volcano-6, @component-background, 65%);
|
||||
@volcano-2: mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%);
|
||||
@volcano-3: mix(@volcano-base, @component-background, 30%);
|
||||
@volcano-4: mix(@volcano-base, @component-background, 45%);
|
||||
@volcano-5: mix(@volcano-base, @component-background, 65%);
|
||||
@volcano-6: mix(@volcano-base, @component-background, 85%);
|
||||
@volcano-7: mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 85%);
|
||||
@volcano-8: mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%);
|
||||
@ -113,10 +113,10 @@
|
||||
@volcano-10: mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@geekblue-1: mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%);
|
||||
@geekblue-2: mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 30%);
|
||||
@geekblue-3: mix(@geekblue-6, @component-background, 30%);
|
||||
@geekblue-4: mix(@geekblue-6, @component-background, 45%);
|
||||
@geekblue-5: mix(@geekblue-6, @component-background, 65%);
|
||||
@geekblue-2: mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%);
|
||||
@geekblue-3: mix(@geekblue-base, @component-background, 30%);
|
||||
@geekblue-4: mix(@geekblue-base, @component-background, 45%);
|
||||
@geekblue-5: mix(@geekblue-base, @component-background, 65%);
|
||||
@geekblue-6: mix(@geekblue-base, @component-background, 85%);
|
||||
@geekblue-7: mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 85%);
|
||||
@geekblue-8: mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%);
|
||||
@ -124,10 +124,10 @@
|
||||
@geekblue-10: mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@lime-1: mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%);
|
||||
@lime-2: mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 30%);
|
||||
@lime-3: mix(@lime-6, @component-background, 30%);
|
||||
@lime-4: mix(@lime-6, @component-background, 45%);
|
||||
@lime-5: mix(@lime-6, @component-background, 65%);
|
||||
@lime-2: mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%);
|
||||
@lime-3: mix(@lime-base, @component-background, 30%);
|
||||
@lime-4: mix(@lime-base, @component-background, 45%);
|
||||
@lime-5: mix(@lime-base, @component-background, 65%);
|
||||
@lime-6: mix(@lime-base, @component-background, 85%);
|
||||
@lime-7: mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 85%);
|
||||
@lime-8: mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%);
|
||||
@ -135,10 +135,10 @@
|
||||
@lime-10: mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 95%);
|
||||
|
||||
@gold-1: mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%);
|
||||
@gold-2: mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 30%);
|
||||
@gold-3: mix(@gold-6, @component-background, 30%);
|
||||
@gold-4: mix(@gold-6, @component-background, 45%);
|
||||
@gold-5: mix(@gold-6, @component-background, 65%);
|
||||
@gold-2: mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%);
|
||||
@gold-3: mix(@gold-base, @component-background, 30%);
|
||||
@gold-4: mix(@gold-base, @component-background, 45%);
|
||||
@gold-5: mix(@gold-base, @component-background, 65%);
|
||||
@gold-6: mix(@gold-base, @component-background, 85%);
|
||||
@gold-7: mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 85%);
|
||||
@gold-8: mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%);
|
||||
@ -187,7 +187,12 @@
|
||||
@disabled-bg: @background-color-base;
|
||||
@disabled-color-dark: fade(@white, 30%);
|
||||
|
||||
// Tree
|
||||
// ---
|
||||
@tree-bg: transparent;
|
||||
|
||||
// Shadow
|
||||
// ---
|
||||
@shadow-color: rgba(0, 0, 0, 0.15);
|
||||
@shadow-color-inverse: @component-background;
|
||||
@box-shadow-base: @shadow-2;
|
||||
|
||||
@ -652,6 +652,7 @@
|
||||
|
||||
// Tree
|
||||
// ---
|
||||
@tree-bg: @component-background;
|
||||
@tree-title-height: 24px;
|
||||
@tree-child-padding: 18px;
|
||||
@tree-directory-selected-color: #fff;
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
.antTreeFn(@tree-prefix-cls) {
|
||||
.@{tree-prefix-cls} {
|
||||
.reset-component;
|
||||
background: @component-background;
|
||||
background: @tree-bg;
|
||||
border-radius: @border-radius-base;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user