mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

Merge pull request #19719 from ant-design/4.0-less-token-tweak

Browse Source 
tweak: 4.0 less token
This commit is contained in:
信鑫-King 2019-11-19 17:40:15 +08:00 committed by GitHub
commit 9da09ffb2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 61 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/calendar/style/index.less
View File

@ -111,7 +111,7 @@
color: @text-color; color: @text-color;
line-height: 24px; line-height: 24px;
background: transparent; background: transparent;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {

2
components/card/style/index.less
View File

@ -102,7 +102,7 @@
&:hover { &:hover {
position: relative; position: relative;
z-index: 1; z-index: 1;
box-shadow: @box-shadow-base; box-shadow: @card-shadow;
} }
} }
} }

2
components/cascader/style/index.less
View File

@ -204,7 +204,7 @@
&, &,
&:hover { &:hover {
font-weight: @select-item-selected-font-weight; font-weight: @select-item-selected-font-weight;
background-color: @background-color-light; background-color: @cascader-item-selected-bg;
} }
} }
&-expand { &-expand {

4
components/checkbox/style/mixin.less
View File

@ -28,7 +28,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid @checkbox-color; border: 1px solid @checkbox-color;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
visibility: hidden; visibility: hidden;
animation: antCheckboxEffect 0.36s ease-in-out; animation: antCheckboxEffect 0.36s ease-in-out;
animation-fill-mode: backwards; animation-fill-mode: backwards;
@ -49,7 +49,7 @@
height: @checkbox-size; height: @checkbox-size;
background-color: @checkbox-check-color; background-color: @checkbox-check-color;
border: @checkbox-border-width @border-style-base @border-color-base; border: @checkbox-border-width @border-style-base @border-color-base;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
// Fix IE checked style // Fix IE checked style
// https://github.com/ant-design/ant-design/issues/12597 // https://github.com/ant-design/ant-design/issues/12597
border-collapse: separate; border-collapse: separate;

6
components/date-picker/style/Calendar.less
View File

@ -242,7 +242,7 @@
text-align: center; text-align: center;
background: transparent; background: transparent;
border: @border-width-base @border-style-base transparent; border: @border-width-base @border-style-base transparent;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
transition: background 0.3s ease; transition: background 0.3s ease;
&-panel { &-panel {
@ -302,7 +302,7 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: @border-radius-sm; border-radius: @border-radius-base;
content: ''; content: '';
} }
@ -317,7 +317,7 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
border: @border-width-base @border-style-base @disabled-color; border: @border-width-base @border-style-base @disabled-color;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
content: ' '; content: ' ';
} }
} }

2
components/date-picker/style/DecadePanel.less
View File

@ -53,7 +53,7 @@
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
background: transparent; background: transparent;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
transition: background 0.3s ease; transition: background 0.3s ease;
&:hover { &:hover {

2
components/date-picker/style/MonthPanel.less
View File

@ -76,7 +76,7 @@
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
background: transparent; background: transparent;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
transition: background 0.3s ease; transition: background 0.3s ease;
&:hover { &:hover {

2
components/date-picker/style/YearPanel.less
View File

@ -57,7 +57,7 @@
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
background: transparent; background: transparent;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
transition: background 0.3s ease; transition: background 0.3s ease;
&:hover { &:hover {

2
components/mentions/style/index.less
View File

@ -156,7 +156,7 @@
} }
&-active { &-active {
background-color: @item-active-bg; background-color: @item-hover-bg;
} }
} }
} }

2
components/select/style/index.less
View File

@ -206,7 +206,7 @@
background-color: @select-item-active-bg; background-color: @select-item-active-bg;
} }
&-selected { &-selected:not(&-disabled) {
color: @text-color; color: @text-color;
font-weight: @select-item-selected-font-weight; font-weight: @select-item-selected-font-weight;
background-color: @select-item-selected-bg; background-color: @select-item-selected-bg;

2
components/select/style/multiple.less
View File

@ -39,7 +39,7 @@
// strange align fix for chrome but works // strange align fix for chrome but works
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
border-top-width: @border-width-base + 0.4px; border-top-width: @border-width-base + 0.4px;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
cursor: default; cursor: default;
transition: font-size 0.3s, line-height 0.3s, height 0.3s; transition: font-size 0.3s, line-height 0.3s, height 0.3s;
user-select: none; user-select: none;

2
components/slider/style/index.less
View File

@ -24,7 +24,7 @@
width: 100%; width: 100%;
height: 4px; height: 4px;
background-color: @slider-rail-background-color; background-color: @slider-rail-background-color;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
transition: background-color 0.3s; transition: background-color 0.3s;
} }

49
components/style/themes/default.less
View File

@ -12,8 +12,8 @@
@info-color: @blue-6; @info-color: @blue-6;
@success-color: @green-6; @success-color: @green-6;
@processing-color: @blue-6; @processing-color: @blue-6;
@error-color: @red-6; @error-color: @red-5;
@highlight-color: @red-6; @highlight-color: @red-5;
@warning-color: @gold-6; @warning-color: @gold-6;
@normal-color: #d9d9d9; @normal-color: #d9d9d9;
@white: #fff; @white: #fff;
@ -65,8 +65,7 @@
@heading-3-size: ceil(@font-size-base * 1.71); @heading-3-size: ceil(@font-size-base * 1.71);
@heading-4-size: ceil(@font-size-base * 1.42); @heading-4-size: ceil(@font-size-base * 1.42);
@line-height-base: 1.5; @line-height-base: 1.5;
@border-radius-base: 4px; @border-radius-base: 2px;
@border-radius-sm: 2px;
// vertical paddings // vertical paddings
@padding-lg: 24px; // containers @padding-lg: 24px; // containers
@ -81,7 +80,7 @@
// The background colors for active and hover states for things like // The background colors for active and hover states for things like
// list items or table cells. // list items or table cells.
@item-active-bg: @primary-1; @item-active-bg: @primary-1;
@item-hover-bg: @primary-1; @item-hover-bg: #f5f5f5;
// ICONFONT // ICONFONT
@iconfont-css-prefix: anticon; @iconfont-css-prefix: anticon;
@ -111,7 +110,7 @@
// Border color // Border color
@border-color-base: hsv(0, 0, 85%); // base border outline a component @border-color-base: hsv(0, 0, 85%); // base border outline a component
@border-color-split: hsv(0, 0, 91%); // split border inside a component @border-color-split: hsv(0, 0, 94%); // split border inside a component
@border-color-inverse: @white; @border-color-inverse: @white;
@border-width-base: 1px; // width of the border for a component @border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border @border-style-base: solid; // style of a components border
@ -132,12 +131,17 @@
// Shadow // Shadow
@shadow-color: rgba(0, 0, 0, 0.15); @shadow-color: rgba(0, 0, 0, 0.15);
@shadow-color-inverse: @component-background; @shadow-color-inverse: @component-background;
@box-shadow-base: @shadow-1-down; @box-shadow-base: @shadow-2;
@shadow-1-up: 0 -2px 8px @shadow-color; @shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
@shadow-1-down: 0 2px 8px @shadow-color; 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-left: -2px 0 8px @shadow-color; @shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
@shadow-1-right: 2px 0 8px @shadow-color; 0 12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-2: 0 4px 12px @shadow-color; @shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
-12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),
12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
// Buttons // Buttons
@btn-font-weight: 400; @btn-font-weight: 400;
@ -337,10 +341,14 @@
@select-border-color: @border-color-base; @select-border-color: @border-color-base;
@select-item-selected-font-weight: 600; @select-item-selected-font-weight: 600;
@select-dropdown-bg: @component-background; @select-dropdown-bg: @component-background;
@select-item-selected-bg: @background-color-light; @select-item-selected-bg: @blue-1;
@select-item-active-bg: @item-active-bg; @select-item-active-bg: @item-hover-bg;
@select-background: @component-background; @select-background: @component-background;
// Cascader
// ---
@cascader-item-selected-bg: @blue-1;
// Anchor // Anchor
// --- // ---
@anchor-border-color: @border-color-split; @anchor-border-color: @border-color-split;
@ -403,7 +411,7 @@
@menu-popup-bg: @component-background; @menu-popup-bg: @component-background;
@menu-item-color: @text-color; @menu-item-color: @text-color;
@menu-highlight-color: @primary-color; @menu-highlight-color: @primary-color;
@menu-item-active-bg: @item-active-bg; @menu-item-active-bg: @primary-1;
@menu-item-active-border-width: 3px; @menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary; @menu-item-group-title-color: @text-color-secondary;
@menu-icon-size: @font-size-base; @menu-icon-size: @font-size-base;
@ -435,9 +443,9 @@
@table-header-color: @heading-color; @table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base; @table-header-sort-bg: @background-color-base;
@table-body-sort-bg: rgba(0, 0, 0, 0.01); @table-body-sort-bg: rgba(0, 0, 0, 0.01);
@table-row-hover-bg: @primary-1; @table-row-hover-bg: @item-hover-bg;
@table-selected-row-color: inherit; @table-selected-row-color: inherit;
@table-selected-row-bg: #fafafa; @table-selected-row-bg: @primary-1;
@table-body-selected-sort-bg: @table-selected-row-bg; @table-body-selected-sort-bg: @table-selected-row-bg;
@table-selected-row-hover-bg: @table-selected-row-bg; @table-selected-row-hover-bg: @table-selected-row-bg;
@table-expanded-row-bg: #fbfbfb; @table-expanded-row-bg: #fbfbfb;
@ -457,7 +465,7 @@
// --- // ---
@time-picker-panel-column-width: 56px; @time-picker-panel-column-width: 56px;
@time-picker-panel-width: @time-picker-panel-column-width * 3; @time-picker-panel-width: @time-picker-panel-column-width * 3;
@time-picker-selected-bg: @background-color-base; @time-picker-selected-bg: @item-active-bg;
// Carousel // Carousel
// --- // ---
@ -489,8 +497,9 @@
@card-actions-background: @background-color-light; @card-actions-background: @background-color-light;
@card-skeleton-bg: #cfd8dc; @card-skeleton-bg: #cfd8dc;
@card-background: @component-background; @card-background: @component-background;
@card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); @card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
@card-radius: @border-radius-sm; 0 5px 12px 4px rgba(0, 0, 0, 0.09);
@card-radius: @border-radius-base;
// Comment // Comment
// --- // ---

2
components/table/style/index.less
View File

@ -361,7 +361,7 @@
vertical-align: floor((@font-size-base - ceil(@font-size-sm * 1.4)) / 2); vertical-align: floor((@font-size-base - ceil(@font-size-sm * 1.4)) / 2);
background: @component-background; background: @component-background;
border: @border-width-base @border-style-base @border-color-split; border: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
outline: none; outline: none;
transition: all 0.3s; transition: all 0.3s;
user-select: none; user-select: none;

2
components/tabs/style/card-style.less
View File

@ -84,7 +84,7 @@
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
border: @border-width-base @border-style-base @border-color-split; border: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {

1
components/transfer/ListItem.tsx
View File

@ -24,6 +24,7 @@ export default class ListItem extends React.Component<any, any> {
const className = classNames({ const className = classNames({
[`${prefixCls}-content-item`]: true, [`${prefixCls}-content-item`]: true,
[`${prefixCls}-content-item-disabled`]: disabled || item.disabled, [`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
[`${prefixCls}-content-item-checked`]: checked,
}); });
let title: string | undefined; let title: string | undefined;

2
components/transfer/__tests__/__snapshots__/index.test.js.snap
View File

@ -44,7 +44,7 @@ exports[`Transfer should render correctly 1`] = `
class="ant-transfer-list-content" class="ant-transfer-list-content"
> >
<li <li
class="ant-transfer-list-content-item" class="ant-transfer-list-content-item ant-transfer-list-content-item-checked"
> >
<label <label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked" class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"

2
components/transfer/__tests__/__snapshots__/list.test.js.snap
View File

@ -41,7 +41,7 @@ exports[`Transfer.List should render correctly 1`] = `
class="ant-transfer-list-content" class="ant-transfer-list-content"
> >
<li <li
class="ant-transfer-list-content-item" class="ant-transfer-list-content-item ant-transfer-list-content-item-checked"
> >
<label <label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked" class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"

17
components/transfer/style/index.less
View File

@ -106,10 +106,6 @@
padding: 0; padding: 0;
overflow: auto; overflow: auto;
list-style: none; list-style: none;
> .LazyLoad {
animation: transferHighlightIn 1s;
}
&-item { &-item {
min-height: 32px; min-height: 32px;
padding: 6px @control-padding-horizontal; padding: 6px @control-padding-horizontal;
@ -130,6 +126,10 @@
cursor: pointer; cursor: pointer;
} }
&-item-checked {
background-color: @item-active-bg;
}
&-item-disabled { &-item-disabled {
color: @btn-disable-color; color: @btn-disable-color;
cursor: not-allowed; cursor: not-allowed;
@ -180,12 +180,3 @@
} }
} }
} }
@keyframes transferHighlightIn {
0% {
background: @primary-2;
}
100% {
background: transparent;
}
}

2
components/tree/style/index.less
View File

@ -113,7 +113,7 @@
color: inherit; color: inherit;
line-height: @tree-title-height; line-height: @tree-title-height;
background: transparent; background: transparent;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;

2
site/theme/static/colors.less
View File

@ -10,7 +10,7 @@
@gray-1: #fff; @gray-1: #fff;
@gray-2: #fafafa; @gray-2: #fafafa;
@gray-3: #f5f5f5; @gray-3: #f5f5f5;
@gray-4: #e8e8e8; @gray-4: #f0f0f0;
@gray-5: #d9d9d9; @gray-5: #d9d9d9;
@gray-6: #bfbfbf; @gray-6: #bfbfbf;
@gray-7: #8c8c8c; @gray-7: #8c8c8c;

8
site/theme/static/demo.less
View File

@ -13,7 +13,7 @@
width: 100%; width: 100%;
margin: 0 0 16px; margin: 0 0 16px;
border: 1px solid @site-border-color-split; border: 1px solid @site-border-color-split;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
transition: all 0.2s; transition: all 0.2s;
&:target { &:target {
@ -37,7 +37,7 @@
padding: 1px 8px; padding: 1px 8px;
color: #777; color: #777;
background: #fff; background: #fff;
border-radius: @border-radius-sm @border-radius-sm 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
transition: background-color 0.4s; transition: background-color 0.4s;
a, a,
@ -79,7 +79,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
font-size: @font-size-base; font-size: @font-size-base;
border-radius: 0 0 @border-radius-sm @border-radius-sm; border-radius: 0 0 @border-radius-base @border-radius-base;
transition: background-color 0.4s; transition: background-color 0.4s;
} }
@ -143,7 +143,7 @@
.highlight-wrapper { .highlight-wrapper {
display: none; display: none;
overflow: auto; overflow: auto;
border-radius: 0 0 @border-radius-sm @border-radius-sm; border-radius: 0 0 @border-radius-base @border-radius-base;
&-expand { &-expand {
display: block; display: block;

2
site/theme/static/highlight.less
View File

@ -14,7 +14,7 @@ pre code {
white-space: pre; white-space: pre;
background: white; background: white;
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
} }
code[class*='language-'], code[class*='language-'],

2
site/theme/static/markdown.less
View File

@ -111,7 +111,7 @@
.markdown pre { .markdown pre {
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
background: #f2f4f5; background: #f2f4f5;
border-radius: @border-radius-sm; border-radius: @border-radius-base;
} }
.markdown pre code { .markdown pre code {