mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 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;
line-height: 24px;
background: transparent;
border-radius: @border-radius-sm;
border-radius: @border-radius-base;
transition: all 0.3s;
&:hover {

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

@ -102,7 +102,7 @@
&:hover {
position: relative;
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 {
font-weight: @select-item-selected-font-weight;
background-color: @background-color-light;
background-color: @cascader-item-selected-bg;
}
}
&-expand {

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

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

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

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

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

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

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

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

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

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

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

@ -156,7 +156,7 @@
}
&-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;
}
&-selected {
&-selected:not(&-disabled) {
color: @text-color;
font-weight: @select-item-selected-font-weight;
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
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
border-top-width: @border-width-base + 0.4px;
border-radius: @border-radius-sm;
border-radius: @border-radius-base;
cursor: default;
transition: font-size 0.3s, line-height 0.3s, height 0.3s;
user-select: none;

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

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

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

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

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

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

1
components/transfer/ListItem.tsx
View File

@ -24,6 +24,7 @@ export default class ListItem extends React.Component<any, any> {
const className = classNames({
[`${prefixCls}-content-item`]: true,
[`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
[`${prefixCls}-content-item-checked`]: checked,
});
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"
>
<li
class="ant-transfer-list-content-item"
class="ant-transfer-list-content-item ant-transfer-list-content-item-checked"
>
<label
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"
>
<li
class="ant-transfer-list-content-item"
class="ant-transfer-list-content-item ant-transfer-list-content-item-checked"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"

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

@ -106,10 +106,6 @@
padding: 0;
overflow: auto;
list-style: none;
> .LazyLoad {
animation: transferHighlightIn 1s;
}
&-item {
min-height: 32px;
padding: 6px @control-padding-horizontal;
@ -130,6 +126,10 @@
cursor: pointer;
}
&-item-checked {
background-color: @item-active-bg;
}
&-item-disabled {
color: @btn-disable-color;
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;
line-height: @tree-title-height;
background: transparent;
border-radius: @border-radius-sm;
border-radius: @border-radius-base;
cursor: pointer;
transition: all 0.3s;

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

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

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

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

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

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

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

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