diff --git a/components/button/style/index.less b/components/button/style/index.less index e9b930802..2627c4ecb 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -12,6 +12,7 @@ // Button styles // ----------------------------- .@{btn-prefix-cls} { + line-height: @line-height-base; .btn; .btn-default; @@ -127,7 +128,7 @@ // To ensure that a space will be placed between character and `Icon`. > .@{iconfont-css-prefix} + span, > span + .@{iconfont-css-prefix} { - margin-left: 0.5em; + margin-left: 8px; } &-clicked:after { @@ -161,6 +162,15 @@ &-background-ghost&-danger { .button-variant-ghost(@btn-danger-color); } + + &-two-chinese-chars:first-letter { + letter-spacing: .34em; + } + + &-two-chinese-chars > * { + letter-spacing: .34em; + margin-right: -.34em; + } } @keyframes buttonEffect { @@ -173,3 +183,13 @@ border-width: 6px; } } + +a.@{btn-prefix-cls} { + line-height: @btn-height-base - 2px; + &-lg { + line-height: @btn-height-lg - 2px; + } + &-sm { + line-height: @btn-height-sm - 2px; + } +} diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index c8cfb0910..d4995fe32 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -40,7 +40,7 @@ &:hover, &:focus { - .button-color(@primary-color; @background; @primary-color); + .button-color(@primary-5; @background; @primary-5); } &:active, @@ -56,12 +56,12 @@ &:hover, &:focus { - .button-color(@btn-primary-color; @color; @color;); + .button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`); } &:active, &.active { - .button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`;); + .button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`); } .button-disabled(); @@ -109,7 +109,7 @@ > .@{btnClassName} { position: relative; z-index: 1; - float: left; + &:hover, &:focus, &:active, @@ -139,7 +139,6 @@ // -------------------------------------------------- .btn() { display: inline-block; - margin-bottom: 0; font-weight: @btn-font-weight; text-align: center; touch-action: manipulation; @@ -147,7 +146,6 @@ background-image: none; border: @border-width-base @border-style-base transparent; white-space: nowrap; - line-height: 1.15; // https://github.com/ant-design/ant-design/issues/7070 .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base); user-select: none; transition: all .3s @ease-in-out; @@ -185,7 +183,7 @@ } &-sm { - .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @btn-border-radius-sm); + .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm); } } @@ -251,8 +249,6 @@ .@{btnClassName}:not(:first-child):not(:last-child) { border-radius: 0; - padding-left: 8px; - padding-right: 8px; } > .@{btnClassName}:first-child { @@ -260,14 +256,12 @@ &:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; - padding-right: 8px; } } > .@{btnClassName}:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; - padding-left: 8px; } & > & { diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 7a940f36e..2851d2b68 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -4,13 +4,15 @@ @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner"; // 一般状态 .@{checkbox-prefix-cls} { + .reset-component; white-space: nowrap; cursor: pointer; outline: none; display: inline-block; line-height: 1; position: relative; - vertical-align: text-bottom; + vertical-align: middle; + top: -0.09em; .@{checkbox-prefix-cls}-wrapper:hover &-inner, &:hover &-inner, @@ -72,7 +74,7 @@ left: 0; z-index: 1; cursor: pointer; - .opacity(0); + opacity: 0; top: 0; bottom: 0; right: 0; @@ -148,8 +150,9 @@ } .@{checkbox-prefix-cls}-wrapper { + .reset-component; + line-height: unset; cursor: pointer; - font-size: @font-size-base; display: inline-block; & + & { margin-left: 8px; @@ -163,7 +166,8 @@ } .@{checkbox-prefix-cls}-group { - font-size: @font-size-base; + .reset-component; + display: inline-block; &-item { display: inline-block; margin-right: 8px; @@ -175,23 +179,6 @@ margin-left: 0; } } - - @ie8: \0screen; - - // IE8 hack for https://github.com/ant-design/ant-design/issues/2148 - @media @ie8 { - .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:before, - .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:after { - .iconfont-font("\e632"); - font-weight: bold; - font-size: 8px; - border: 0; - color: #fff; - left: 2px; - top: 3px; - position: absolute; - } - } } @keyframes antCheckboxEffect { diff --git a/components/grid/style/index.less b/components/grid/style/index.less index 9671dc96d..ad23d6d96 100644 --- a/components/grid/style/index.less +++ b/components/grid/style/index.less @@ -6,6 +6,7 @@ .@{ant-prefix}-row { .make-row(); display: block; + box-sizing: border-box; } .@{ant-prefix}-row-flex { @@ -105,3 +106,11 @@ @media (min-width: @screen-xl-min) { .make-grid(-xl); } + +// Extra Extra Large grid +// +// Columns, offsets, pushes, and pulls for the full hd device range. + +@media (min-width: @screen-xxl-min) { + .make-grid(-xxl); +} diff --git a/components/grid/style/mixin.less b/components/grid/style/mixin.less index ad6ed9623..fd95df193 100644 --- a/components/grid/style/mixin.less +++ b/components/grid/style/mixin.less @@ -53,6 +53,7 @@ .loop-grid-columns(@index, @class) when (@index > 0) { .@{ant-prefix}-col@{class}-@{index} { display: block; + box-sizing: border-box; width: percentage((@index / @grid-columns)); } .@{ant-prefix}-col@{class}-push-@{index} { diff --git a/components/input/demo/index.vue b/components/input/demo/index.vue new file mode 100644 index 000000000..e8deb705c --- /dev/null +++ b/components/input/demo/index.vue @@ -0,0 +1,34 @@ +<template> + <div> + <h1>Basic</h1> + <Basic /> + <h1>AutosizeTextarea</h1> + <AutosizeTextarea /> + <h1>Presuffix</h1> + <Presuffix /> + <h1>SearchInput</h1> + <SearchInput /> + <h1>Size</h1> + <Size /> + <h1>TextArea</h1> + <TextArea /> + </div> +</template> +<script> +import Basic from './basic' +import AutosizeTextarea from './autosize-textarea' +import Presuffix from './presuffix' +import SearchInput from './search-input' +import Size from './size' +import TextArea from './textarea' +export default { + components: { + Basic, + AutosizeTextarea, + Presuffix, + SearchInput, + Size, + TextArea, + }, +} +</script> diff --git a/components/input/style/index.less b/components/input/style/index.less index 6271e4e96..0d93f4343 100644 --- a/components/input/style/index.less +++ b/components/input/style/index.less @@ -1,15 +1,16 @@ @import "../../style/themes/default"; @import "../../style/mixins/index"; @import "./mixin"; -@import "./search-input"; // Input styles .@{ant-prefix}-input { + .reset-component; .input; } //== Style for input-group: input with label, with button or dropdown... .@{ant-prefix}-input-group { + .reset-component; .input-group(~"@{ant-prefix}-input"); &-wrapper { display: inline-block; @@ -20,6 +21,7 @@ // Input with affix: prefix or suffix .@{ant-prefix}-input-affix-wrapper { + .reset-component; .input-affix-wrapper(~"@{ant-prefix}-input"); // https://github.com/ant-design/ant-design/issues/6144 @@ -27,3 +29,5 @@ min-height: 100%; // use min-height, assume that no smaller height to override } } + +@import "./search-input"; diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index d465800d5..14a73557f 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -1,12 +1,13 @@ @import "../../style/themes/default"; @import "../../style/mixins/index"; -@input-affix-width: 17px; +@input-affix-width: 19px; // size mixins for input .input-lg() { padding: @input-padding-vertical-lg @input-padding-horizontal-lg; height: @input-height-lg; + font-size: @font-size-lg; } .input-sm() { @@ -72,6 +73,7 @@ height: auto; vertical-align: bottom; transition: all .3s, height 0s; + min-height: @input-height-base; } // Size @@ -137,7 +139,7 @@ } &-addon { - padding: @input-padding-vertical-base @input-padding-horizontal-base; + padding: 0 @input-padding-horizontal-base; font-size: @font-size-base; font-weight: normal; line-height: 1; @@ -257,7 +259,7 @@ & > * { border-radius: 0; border-right-width: 0; - vertical-align: middle; + vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139 float: none; display: inline-block; } @@ -328,11 +330,11 @@ } .@{inputClass}-prefix { - left: @input-padding-horizontal-base; + left: @input-padding-horizontal-base + 1px; } .@{inputClass}-suffix { - right: @input-padding-horizontal-base; + right: @input-padding-horizontal-base + 1px; } .@{inputClass}:not(:first-child) { diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less index 6a7ecddb5..2e5a400af 100644 --- a/components/input/style/search-input.less +++ b/components/input/style/search-input.less @@ -3,56 +3,31 @@ @import "../../button/style/mixin"; @import "./mixin"; -.@{ant-prefix}-input-search-icon { - cursor: pointer; - transition: all .3s; - font-size: 14px; - &:hover { - color: @input-hover-border-color; - } -} +@search-prefix: ~"@{ant-prefix}-input-search"; -// code blow is keeped for compatibility -// for this demo: http://1x.ant.design/components/select/#components-select-demo-search-box -// do not delete until 3.x -.@{ant-prefix}-search-input-wrapper { - display: inline-block; - vertical-align: middle; -} - -.@{ant-prefix}-search-input { - &.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child, - &.@{ant-prefix}-input-group .@{ant-prefix}-select:first-child { - border-radius: @border-radius-base; - position: absolute; - top: -1px; - width: 100%; +.@{search-prefix} { + &-icon { + pointer-events: none; + color: @text-color-secondary; } - &.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child { - padding-right: 36px; + &:not(&-small) > .@{ant-prefix}-input-suffix { + right: @control-padding-horizontal; } - .@{ant-prefix}-search-btn { - .btn-default; - border-radius: 0 @border-radius-base - 1px @border-radius-base - 1px 0; - left: -1px; - position: relative; - border-width: 0 0 0 1px; - z-index: 2; - padding-left: 8px; - padding-right: 8px; - &:hover { - border-color: @border-color-base; + > .@{ant-prefix}-input-suffix > .@{search-prefix}-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + > .@{iconfont-css-prefix}-search { + font-size: @font-size-lg; } } - &&-focus .@{ant-prefix}-search-btn-noempty, - &:hover .@{ant-prefix}-search-btn-noempty { - .btn-primary; + + &.@{search-prefix}-enter-button > .@{ant-prefix}-input { + padding-right: 46px; } - .@{ant-prefix}-select-combobox { - .@{ant-prefix}-select-selection__rendered { - margin-right: 29px; - } + + &.@{search-prefix}-enter-button > .@{ant-prefix}-input-suffix { + right: 0; } } diff --git a/components/popover/index.vue b/components/popover/index.vue index 8fa4515e2..68d46d4b7 100644 --- a/components/popover/index.vue +++ b/components/popover/index.vue @@ -4,10 +4,11 @@ import abstractTooltipProps from '../tooltip/abstractTooltipProps' import PropTypes from '../_util/vue-types' import { getOptionProps, getComponentFromProp } from '../_util/props-util' +const props = abstractTooltipProps() export default { name: 'popover', props: { - ...abstractTooltipProps, + ...props, prefixCls: PropTypes.string.def('ant-popover'), transitionName: PropTypes.string.def('zoom-big'), content: PropTypes.any, diff --git a/components/popover/style/index.less b/components/popover/style/index.less index 227d2bc5a..87065a721 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -4,6 +4,7 @@ @popover-prefix-cls: ~"@{ant-prefix}-popover"; .@{popover-prefix-cls} { + .reset-component; position: absolute; top: 0; left: 0; @@ -11,8 +12,6 @@ cursor: auto; user-select: text; white-space: normal; - font-size: @font-size-base; - line-height: @line-height-base; font-weight: normal; text-align: left; @@ -61,35 +60,35 @@ &-title { min-width: @popover-min-width; margin: 0; // reset heading margin - padding: 8px 16px; + padding: 5px @padding-md 4px; min-height: 32px; border-bottom: 1px solid @border-color-split; - color: @popover-color; + color: @heading-color; font-weight: 500; } &-inner-content { - padding: 8px 16px; + padding: 12px @padding-md; color: @popover-color; } &-message { - padding: 8px 0 16px; + padding: 4px 0 12px; font-size: @font-size-base; color: @popover-color; > .@{iconfont-css-prefix} { color: @warning-color; - line-height: 17px; + line-height: @line-height-base + 0.1; position: absolute; } &-title { - padding-left: 20px; + padding-left: @font-size-base + 8px; } } &-buttons { text-align: right; - margin-bottom: 8px; + margin-bottom: 4px; button { margin-left: 8px; } @@ -99,43 +98,25 @@ // .popover-arrow is outer, .popover-arrow:after is inner &-arrow { - &, - &:after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } - } - - &-arrow { - border-width: @popover-arrow-outer-width; - } - - &-arrow:after { - border-width: @popover-arrow-width; - content: ""; + background: @popover-bg; + width: sqrt(@popover-arrow-width * @popover-arrow-width * 2); + height: sqrt(@popover-arrow-width * @popover-arrow-width * 2); + transform: rotate(45deg); + position: absolute; + display: block; + border-color: transparent; + border-style: solid; } &-placement-top > &-content > &-arrow, &-placement-topLeft > &-content > &-arrow, &-placement-topRight > &-content > &-arrow { - border-bottom-width: 0; - border-top-color: @popover-arrow-outer-color; - bottom: @popover-distance - @popover-arrow-outer-width; - &:after { - content: " "; - bottom: 1px; - margin-left: -@popover-arrow-width; - border-bottom-width: 0; - border-top-color: @popover-arrow-color; - } + bottom: @popover-distance - @popover-arrow-width + 2px; + box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07); } &-placement-top > &-content > &-arrow { left: 50%; - margin-left: -@popover-arrow-outer-width; + transform: translateX(-50%) rotate(45deg); } &-placement-topLeft > &-content > &-arrow { left: 16px; @@ -147,20 +128,12 @@ &-placement-right > &-content > &-arrow, &-placement-rightTop > &-content > &-arrow, &-placement-rightBottom > &-content > &-arrow { - left: @popover-distance - @popover-arrow-outer-width; - border-left-width: 0; - border-right-color: @popover-arrow-outer-color; - &:after { - content: " "; - left: 1px; - bottom: -@popover-arrow-width; - border-left-width: 0; - border-right-color: @popover-arrow-color; - } + left: @popover-distance - @popover-arrow-width + 2px; + box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07); } &-placement-right > &-content > &-arrow { top: 50%; - margin-top: -@popover-arrow-outer-width; + transform: translateY(-50%) rotate(45deg); } &-placement-rightTop > &-content > &-arrow { top: 12px; @@ -172,20 +145,12 @@ &-placement-bottom > &-content > &-arrow, &-placement-bottomLeft > &-content > &-arrow, &-placement-bottomRight > &-content > &-arrow { - border-top-width: 0; - border-bottom-color: @popover-arrow-outer-color; - top: @popover-distance - @popover-arrow-outer-width; - &:after { - content: " "; - top: 1px; - margin-left: -@popover-arrow-width; - border-top-width: 0; - border-bottom-color: @popover-arrow-color; - } + top: @popover-distance - @popover-arrow-width + 2px; + box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.06); } &-placement-bottom > &-content > &-arrow { left: 50%; - margin-left: -@popover-arrow-outer-width; + transform: translateX(-50%) rotate(45deg); } &-placement-bottomLeft > &-content > &-arrow { left: 16px; @@ -197,20 +162,12 @@ &-placement-left > &-content > &-arrow, &-placement-leftTop > &-content > &-arrow, &-placement-leftBottom > &-content > &-arrow { - right: @popover-distance - @popover-arrow-outer-width; - border-right-width: 0; - border-left-color: @popover-arrow-outer-color; - &:after { - content: " "; - right: 1px; - border-right-width: 0; - border-left-color: @popover-arrow-color; - bottom: -@popover-arrow-width; - } + right: @popover-distance - @popover-arrow-width + 2px; + box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07); } &-placement-left > &-content > &-arrow { top: 50%; - margin-top: -@popover-arrow-outer-width; + transform: translateY(-50%) rotate(45deg); } &-placement-leftTop > &-content > &-arrow { top: 12px; diff --git a/components/radio/Group.vue b/components/radio/Group.vue index 85c1a7f70..6fcf00b6d 100644 --- a/components/radio/Group.vue +++ b/components/radio/Group.vue @@ -1,10 +1,3 @@ -<template> - <div :class="classes"> - <Radio v-for="item in radioOptions" :key="item.value" - :value="item.value" :disabled="item.disabled" :name="name">{{item.label}}</Radio> - <slot v-if="radioOptions.length === 0"></slot> - </div> -</template> <script> import Radio from './Radio.vue' export default { @@ -82,8 +75,15 @@ export default { this.stateValue = val }, }, - components: { - Radio, + render () { + const { radioOptions, classes, $slots, name } = this + return ( + <div class={classes}> + {radioOptions.map(({ value, disabled, label }) => + <Radio key={value} value={value} disabled={disabled} name={name}>{label}</Radio>)} + { radioOptions.length === 0 && ($slots.default || []).filter(c => c.tag || c.text.trim() !== '')} + </div> + ) }, } </script> diff --git a/components/radio/demo/radioButton.vue b/components/radio/demo/radioButton.vue index 3ee413418..6b54f15a3 100644 --- a/components/radio/demo/radioButton.vue +++ b/components/radio/demo/radioButton.vue @@ -8,7 +8,7 @@ <RadioButton value="d">Chengdu</RadioButton> </RadioGroup> </div> - <div :style="{ marginTop: 16 }"> + <div :style="{ marginTop: '16px' }"> <RadioGroup @change="onChange" defaultValue="a"> <RadioButton value="a">Hangzhou</RadioButton> <RadioButton value="b" disabled>Shanghai</RadioButton> @@ -16,7 +16,7 @@ <RadioButton value="d">Chengdu</RadioButton> </RadioGroup> </div> - <div :style="{ marginTop: 16 }"> + <div :style="{ marginTop: '16px' }"> <RadioGroup disabled @change="onChange" defaultValue="a"> <RadioButton value="a">Hangzhou</RadioButton> <RadioButton value="b">Shanghai</RadioButton> diff --git a/components/radio/demo/size.vue b/components/radio/demo/size.vue index 2739cc763..d9c6b44c6 100644 --- a/components/radio/demo/size.vue +++ b/components/radio/demo/size.vue @@ -8,7 +8,7 @@ <RadioButton value="d">Chengdu</RadioButton> </RadioGroup> </div> - <div :style="{ marginTop: 16 }"> + <div :style="{ marginTop: '16px' }"> <RadioGroup defaultValue="a"> <RadioButton value="a">Hangzhou</RadioButton> <RadioButton value="b">Shanghai</RadioButton> @@ -16,7 +16,7 @@ <RadioButton value="d">Chengdu</RadioButton> </RadioGroup> </div> - <div :style="{ marginTop: 16 }"> + <div :style="{ marginTop: '16px' }"> <RadioGroup defaultValue="a" size="small"> <RadioButton value="a">Hangzhou</RadioButton> <RadioButton value="b">Shanghai</RadioButton> diff --git a/components/radio/style/index.less b/components/radio/style/index.less index d573a96d7..a71288263 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -1,5 +1,6 @@ @import "../../style/themes/default"; @import "../../style/mixins/index"; +@import "../../style/mixins/index"; @radio-prefix-cls: ~"@{ant-prefix}-radio"; @radio-group-prefix-cls: ~"@{radio-prefix-cls}-group"; @@ -7,13 +8,14 @@ @radio-duration: .3s; .@{radio-group-prefix-cls} { + .reset-component; display: inline-block; - font-size: @font-size-base; + line-height: unset; } // 一般状态 .@{radio-prefix-cls}-wrapper { - font-size: @font-size-base; + .reset-component; display: inline-block; position: relative; white-space: nowrap; @@ -22,6 +24,7 @@ } .@{radio-prefix-cls} { + .reset-component; white-space: nowrap; outline: none; display: inline-block; @@ -55,11 +58,12 @@ } &-inner { &:after { + @radio-dot-size: @radio-size - 8px; position: absolute; - width: 6px; - height: 6px; - left: 3px; - top: 3px; + width: @radio-dot-size; + height: @radio-dot-size; + left: (@radio-size - @radio-dot-size) / 2 - 1px; + top: (@radio-size - @radio-dot-size) / 2 - 1px; border-radius: @border-radius-base; display: table; border-top: 0; @@ -75,11 +79,11 @@ top: 0; left: 0; display: block; - width: 14px; - height: 14px; + width: @radio-size; + height: @radio-size; border-width: 1px; border-style: solid; - border-radius: 14px; + border-radius: 100px; border-color: @border-color-base; background-color: @radio-button-bg; transition: all @radio-duration; @@ -102,7 +106,7 @@ .@{radio-inner-prefix-cls} { border-color: @primary-color; &:after { - transform: scale(1); + transform: scale(.875); opacity: 1; transition: all @radio-duration @ease-in-out-circ; } @@ -134,18 +138,20 @@ span.@{radio-prefix-cls} + * { } .@{radio-prefix-cls}-button-wrapper { - float: left; margin: 0; - height: @input-height-base; - line-height: @input-height-base - 2px; + height: @btn-height-base; + line-height: @btn-height-base - 2px; color: @radio-button-color; display: inline-block; transition: all 0.3s ease; cursor: pointer; border: @border-width-base @border-style-base @border-color-base; border-left: 0; + // strange align fix for chrome but works + // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif + border-top-width: @border-width-base + 0.02px; background: @radio-button-bg; - padding: 0 16px; + padding: 0 @padding-md - 1px; position: relative; a { @@ -162,18 +168,13 @@ span.@{radio-prefix-cls} + * { .@{radio-group-prefix-cls}-large & { height: @input-height-lg; line-height: @input-height-lg - 2px; + font-size: @font-size-lg; } .@{radio-group-prefix-cls}-small & { height: @input-height-sm; line-height: @input-height-sm - 2px; - padding: 0 12px; - &:first-child { - border-radius: @border-radius-sm 0 0 @border-radius-sm; - } - &:last-child { - border-radius: 0 @border-radius-sm @border-radius-sm 0; - } + padding: 0 @control-padding-horizontal-sm - 1px; } &:not(:first-child) { @@ -210,7 +211,7 @@ span.@{radio-prefix-cls} + * { .@{radio-prefix-cls}-inner, input[type="checkbox"], input[type="radio"] { - .opacity(0); + opacity: 0; width: 0; height: 0; } diff --git a/components/style/color/bezierEasing.less b/components/style/color/bezierEasing.less index bcad6c1dc..78d94d550 100644 --- a/components/style/color/bezierEasing.less +++ b/components/style/color/bezierEasing.less @@ -1,4 +1,4 @@ -/* stylelint-disable declaration-bang-space-before */ +/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ .bezierEasingMixin() { @functions: ~`(function() { var NEWTON_ITERATIONS = 4; diff --git a/components/style/color/colorPalette.less b/components/style/color/colorPalette.less index 7c84cef7e..069991137 100644 --- a/components/style/color/colorPalette.less +++ b/components/style/color/colorPalette.less @@ -1,3 +1,4 @@ +/* stylelint-disable no-duplicate-selectors */ @import "bezierEasing"; @import "tinyColor"; @@ -7,36 +8,64 @@ // We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin .colorPaletteMixin() { @functions: ~`(function() { - var warmDark = 0.5; // warm color darken radio - var warmRotate = -26; // warm color rotate degree - var coldDark = 0.55; // cold color darken radio - var coldRotate = 10; // cold color rotate degree - var getShadeColor = function(c) { - var shadeColor = tinycolor(c); - // warm and cold color will darken in different radio, and rotate in different degree - // warmer color - if (shadeColor.toRgb().r > shadeColor.toRgb().b) { - return shadeColor.darken(shadeColor.toHsl().l * warmDark * 100).spin(warmRotate).toHexString(); + var hueStep = 2; + var saturationStep = 16; + var saturationStep2 = 5; + var brightnessStep1 = 5; + var brightnessStep2 = 15; + var lightColorCount = 5; + var darkColorCount = 4; + + var getHue = function(hsv, i, isLight) { + var hue; + if (hsv.h >= 60 && hsv.h <= 240) { + hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i; + } else { + hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i; } - // colder color - return shadeColor.darken(shadeColor.toHsl().l * coldDark * 100).spin(coldRotate).toHexString(); - } - var primaryEasing = colorEasing(0.6); + if (hue < 0) { + hue += 360; + } else if (hue >= 360) { + hue -= 360; + } + return Math.round(hue); + }; + var getSaturation = function(hsv, i, isLight) { + var saturation; + if (isLight) { + saturation = Math.round(hsv.s * 100) - saturationStep * i; + } else if (i == darkColorCount) { + saturation = Math.round(hsv.s * 100) + saturationStep; + } else { + saturation = Math.round(hsv.s * 100) + saturationStep2 * i; + } + if (saturation > 100) { + saturation = 100; + } + if (isLight && i === lightColorCount && saturation > 10) { + saturation = 10; + } + if (saturation < 6) { + saturation = 6; + } + return Math.round(saturation); + }; + var getValue = function(hsv, i, isLight) { + if (isLight) { + return Math.round(hsv.v * 100) + brightnessStep1 * i; + } + return Math.round(hsv.v * 100) - brightnessStep2 * i; + }; + this.colorPalette = function(color, index) { - var currentEasing = colorEasing(index * 0.1); - // return light colors after tint - if (index <= 6) { - return tinycolor.mix( - '#ffffff', - color, - currentEasing * 100 / primaryEasing - ).toHexString(); - } - return tinycolor.mix( - getShadeColor(color), - color, - (1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100 - ).toHexString(); + var isLight = index <= 6; + var hsv = tinycolor(color).toHsv(); + var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1; + return tinycolor({ + h: getHue(hsv, i, isLight), + s: getSaturation(hsv, i, isLight), + v: getValue(hsv, i, isLight), + }).toHexString(); }; })()`; } diff --git a/components/style/color/colors.less b/components/style/color/colors.less index 53f16229e..9793a86d2 100644 --- a/components/style/color/colors.less +++ b/components/style/color/colors.less @@ -6,7 +6,7 @@ @blue-3: color(~`colorPalette("@{blue-6}", 3)`); @blue-4: color(~`colorPalette("@{blue-6}", 4)`); @blue-5: color(~`colorPalette("@{blue-6}", 5)`); -@blue-6: #108ee9; +@blue-6: #1890ff; @blue-7: color(~`colorPalette("@{blue-6}", 7)`); @blue-8: color(~`colorPalette("@{blue-6}", 8)`); @blue-9: color(~`colorPalette("@{blue-6}", 9)`); @@ -17,7 +17,7 @@ @purple-3: color(~`colorPalette("@{purple-6}", 3)`); @purple-4: color(~`colorPalette("@{purple-6}", 4)`); @purple-5: color(~`colorPalette("@{purple-6}", 5)`); -@purple-6: #7265e6; +@purple-6: #722ed1; @purple-7: color(~`colorPalette("@{purple-6}", 7)`); @purple-8: color(~`colorPalette("@{purple-6}", 8)`); @purple-9: color(~`colorPalette("@{purple-6}", 9)`); @@ -28,7 +28,7 @@ @cyan-3: color(~`colorPalette("@{cyan-6}", 3)`); @cyan-4: color(~`colorPalette("@{cyan-6}", 4)`); @cyan-5: color(~`colorPalette("@{cyan-6}", 5)`); -@cyan-6: #00a2ae; +@cyan-6: #13c2c2; @cyan-7: color(~`colorPalette("@{cyan-6}", 7)`); @cyan-8: color(~`colorPalette("@{cyan-6}", 8)`); @cyan-9: color(~`colorPalette("@{cyan-6}", 9)`); @@ -39,18 +39,30 @@ @green-3: color(~`colorPalette("@{green-6}", 3)`); @green-4: color(~`colorPalette("@{green-6}", 4)`); @green-5: color(~`colorPalette("@{green-6}", 5)`); -@green-6: #00a854; +@green-6: #52c41a; @green-7: color(~`colorPalette("@{green-6}", 7)`); @green-8: color(~`colorPalette("@{green-6}", 8)`); @green-9: color(~`colorPalette("@{green-6}", 9)`); @green-10: color(~`colorPalette("@{green-6}", 10)`); +@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`); +@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`); +@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`); +@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`); +@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`); +@magenta-6: #eb2f96; +@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`); +@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`); +@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`); +@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`); + +// alias of magenta @pink-1: color(~`colorPalette("@{pink-6}", 1)`); @pink-2: color(~`colorPalette("@{pink-6}", 2)`); @pink-3: color(~`colorPalette("@{pink-6}", 3)`); @pink-4: color(~`colorPalette("@{pink-6}", 4)`); @pink-5: color(~`colorPalette("@{pink-6}", 5)`); -@pink-6: #f5317f; +@pink-6: #eb2f96; @pink-7: color(~`colorPalette("@{pink-6}", 7)`); @pink-8: color(~`colorPalette("@{pink-6}", 8)`); @pink-9: color(~`colorPalette("@{pink-6}", 9)`); @@ -61,7 +73,7 @@ @red-3: color(~`colorPalette("@{red-6}", 3)`); @red-4: color(~`colorPalette("@{red-6}", 4)`); @red-5: color(~`colorPalette("@{red-6}", 5)`); -@red-6: #f04134; +@red-6: #f5222d; @red-7: color(~`colorPalette("@{red-6}", 7)`); @red-8: color(~`colorPalette("@{red-6}", 8)`); @red-9: color(~`colorPalette("@{red-6}", 9)`); @@ -72,7 +84,7 @@ @orange-3: color(~`colorPalette("@{orange-6}", 3)`); @orange-4: color(~`colorPalette("@{orange-6}", 4)`); @orange-5: color(~`colorPalette("@{orange-6}", 5)`); -@orange-6: #f56a00; +@orange-6: #fa8c16; @orange-7: color(~`colorPalette("@{orange-6}", 7)`); @orange-8: color(~`colorPalette("@{orange-6}", 8)`); @orange-9: color(~`colorPalette("@{orange-6}", 9)`); @@ -83,8 +95,52 @@ @yellow-3: color(~`colorPalette("@{yellow-6}", 3)`); @yellow-4: color(~`colorPalette("@{yellow-6}", 4)`); @yellow-5: color(~`colorPalette("@{yellow-6}", 5)`); -@yellow-6: #ffbf00; +@yellow-6: #fadb14; @yellow-7: color(~`colorPalette("@{yellow-6}", 7)`); @yellow-8: color(~`colorPalette("@{yellow-6}", 8)`); @yellow-9: color(~`colorPalette("@{yellow-6}", 9)`); @yellow-10: color(~`colorPalette("@{yellow-6}", 10)`); + +@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`); +@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`); +@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`); +@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`); +@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`); +@volcano-6: #fa541c; +@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`); +@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`); +@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`); +@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`); + +@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`); +@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`); +@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`); +@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`); +@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`); +@geekblue-6: #2f54eb; +@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`); +@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`); +@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`); +@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`); + +@lime-1: color(~`colorPalette("@{lime-6}", 1)`); +@lime-2: color(~`colorPalette("@{lime-6}", 2)`); +@lime-3: color(~`colorPalette("@{lime-6}", 3)`); +@lime-4: color(~`colorPalette("@{lime-6}", 4)`); +@lime-5: color(~`colorPalette("@{lime-6}", 5)`); +@lime-6: #a0d911; +@lime-7: color(~`colorPalette("@{lime-6}", 7)`); +@lime-8: color(~`colorPalette("@{lime-6}", 8)`); +@lime-9: color(~`colorPalette("@{lime-6}", 9)`); +@lime-10: color(~`colorPalette("@{lime-6}", 10)`); + +@gold-1: color(~`colorPalette("@{gold-6}", 1)`); +@gold-2: color(~`colorPalette("@{gold-6}", 2)`); +@gold-3: color(~`colorPalette("@{gold-6}", 3)`); +@gold-4: color(~`colorPalette("@{gold-6}", 4)`); +@gold-5: color(~`colorPalette("@{gold-6}", 5)`); +@gold-6: #faad14; +@gold-7: color(~`colorPalette("@{gold-6}", 7)`); +@gold-8: color(~`colorPalette("@{gold-6}", 8)`); +@gold-9: color(~`colorPalette("@{gold-6}", 9)`); +@gold-10: color(~`colorPalette("@{gold-6}", 10)`); diff --git a/components/style/color/tinyColor.less b/components/style/color/tinyColor.less index 00aad3931..570f0ce69 100644 --- a/components/style/color/tinyColor.less +++ b/components/style/color/tinyColor.less @@ -1,4 +1,4 @@ -/* stylelint-disable declaration-bang-space-before */ +/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ .tinyColorMixin() { @functions: ~`(function() { // TinyColor v1.4.1 diff --git a/components/style/core/base.less b/components/style/core/base.less index d3d2149f1..050480a97 100644 --- a/components/style/core/base.less +++ b/components/style/core/base.less @@ -1,4 +1,11 @@ -@import "./normalize.less"; +/* stylelint-disable at-rule-no-unknown */ + +// Reboot +// +// Normalization of HTML elements, manually forked from Normalize.css to remove +// styles targeting irrelevant browsers while applying new styles. +// +// Normalize is licensed MIT. https://github.com/necolas/normalize.css // http://stackoverflow.com/a/13611748/3040605 @font-face { @@ -7,14 +14,10 @@ unicode-range: U+30-39; } -* { - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari -} - -*:before, -*:after { - box-sizing: border-box; +@font-face { + font-family: "Chinese Quote"; + src: local("PingFang SC"), local("SimSun"); + unicode-range: U+2018, U+2019, U+201c, U+201d; } // HTML & Body reset @@ -22,58 +25,200 @@ html, body { .square(100%); } -body { - font-family: @font-family; - font-size: @font-size-base; - line-height: @line-height-base; - color: @text-color; - background-color: @body-background; -} - -// unify the setting of elements's margin and padding for browsers -body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { - margin: 0; - padding: 0; -} - -// Reset fonts for relevant elements -button,input,select,textarea { - font-family: inherit; - font-size: inherit; - line-height: inherit; - color: inherit; - -webkit-appearance: none; -} - -ul, -ol { - list-style: none; -} - -// Remove the clear button of a text input control in IE10+ +// remove the clear button of a text input control in IE10+ input::-ms-clear, input::-ms-reveal { display: none; } -::selection { - background: @primary-color; - color: #fff; +// Document +// +// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. +// 2. Change the default font family in all browsers. +// 3. Correct the line height in all browsers. +// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. +// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so +// we force a non-overlapping, non-auto-hiding scrollbar to counteract. +// 6. Change the default tap highlight to be completely transparent in iOS. + +*, +*::before, +*::after { + box-sizing: border-box; // 1 } -// Headers +html { + font-family: sans-serif; // 2 + line-height: 1.15; // 3 + -webkit-text-size-adjust: 100%; // 4 + -ms-text-size-adjust: 100%; // 4 + -ms-overflow-style: scrollbar; // 5 + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6 +} + +// IE10+ doesn't honor `<meta name="viewport">` in some cases. +@at-root { + @-ms-viewport { width: device-width; } +} + +// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) +article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { + display: block; +} + +// Body +// +// 1. remove the margin in all browsers. +// 2. As a best practice, apply a default `body-background`. + +body { + margin: 0; // 1 + font-family: @font-family; + font-size: @font-size-base; + line-height: @line-height-base; + color: @text-color; + background-color: @body-background; // 2 +} + +// Suppress the focus outline on elements that cannot be accessed via keyboard. +// This prevents an unwanted focus outline from appearing around elements that +// might still respond to pointer events. +// +// Credit: https://github.com/suitcss/base +[tabindex="-1"]:focus { + outline: none !important; +} + +// Content grouping +// +// 1. Add the correct box sizing in Firefox. +// 2. Show the overflow in Edge and IE. + +hr { + box-sizing: content-box; // 1 + height: 0; // 1 + overflow: visible; // 2 +} + +// +// Typography +// + +// remove top margins from headings +// +// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top +// margin for easier control within type scales as it avoids margin collapsing. h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: .5em; color: @heading-color; font-weight: 500; } +// Reset margins on paragraphs +// +// Similarly, the top margin on `<p>`s get reset. However, we also reset the +// bottom margin to use `em` units instead of `em`. +p { + margin-top: 0; + margin-bottom: 1em; +} + +// Abbreviations +// +// 1. remove the bottom border in Firefox 39-. +// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. +// 3. Add explicit cursor to indicate changed behavior. +// 4. Duplicate behavior to the data-* attribute for our tooltip plugin + +abbr[title], +abbr[data-original-title] { // 4 + text-decoration: underline; // 2 + text-decoration: underline dotted; // 2 + cursor: help; // 3 + border-bottom: 0; // 1 +} + +address { + margin-bottom: 1em; + font-style: normal; + line-height: inherit; +} + +input[type="text"], +input[type="password"], +input[type="number"], +textarea { + -webkit-appearance: none; +} + +ol, +ul, +dl { + margin-top: 0; + margin-bottom: 1em; +} + +ol ol, +ul ul, +ol ul, +ul ol { + margin-bottom: 0; +} + +dt { + font-weight: 500; +} + +dd { + margin-bottom: .5em; + margin-left: 0; // Undo browser default +} + +blockquote { + margin: 0 0 1em; +} + +dfn { + font-style: italic; // Add the correct font style in Android 4.3- +} + +b, +strong { + font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari +} + +small { + font-size: 80%; // Add the correct font size in all browsers +} + +// +// Prevent `sub` and `sup` elements from affecting the line height in +// all browsers. +// + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sub { bottom: -.25em; } +sup { top: -.5em; } + +// // Links +// + a { color: @link-color; - background: transparent; + background-color: transparent; // remove the gray background on active links in IE 10. text-decoration: @link-decoration; outline: none; cursor: pointer; - transition: color .3s ease; + transition: color .3s; + -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+. &:focus { text-decoration: underline; @@ -101,19 +246,256 @@ a { } } -.@{ant-prefix}-divider { - margin: 0 6px; - display: inline-block; - height: 8px; - width: 1px; - background: #ccc; -} +// +// Code +// +pre, code, kbd, -pre, samp { font-family: @code-family; + font-size: 1em; // Correct the odd `em` font sizing in all browsers. +} + +pre { + // remove browser default top margin + margin-top: 0; + // Reset browser default of `1em` to use `em`s + margin-bottom: 1em; + // Don't allow content to break outside + overflow: auto; +} + +// +// Figures +// +figure { + // Apply a consistent margin strategy (matches our type styles). + margin: 0 0 1em; +} + +// +// Images and content +// + +img { + vertical-align: middle; + border-style: none; // remove the border on images inside links in IE 10-. +} + +svg:not(:root) { + overflow: hidden; // Hide the overflow in IE +} + +// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. +// +// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 +// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present. +// However, they DO support emoving the click delay via `touch-action: manipulation`. +// See: +// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch +// * http://caniuse.com/#feat=css-touch-action +// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay + +a, +area, +button, +[role="button"], +input:not([type=range]), +label, +select, +summary, +textarea { + touch-action: manipulation; +} + +// +// Tables +// + +table { + border-collapse: collapse; // Prevent double borders +} + +caption { + padding-top: .75em; + padding-bottom: .3em; + color: @text-color-secondary; + text-align: left; + caption-side: bottom; +} + +th { + // Matches default `<td>` alignment by inheriting from the `<body>`, or the + // closest parent with a set `text-align`. + text-align: inherit; +} + +// +// Forms +// + +input, +button, +select, +optgroup, +textarea { + margin: 0; // remove the margin in Firefox and Safari + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: inherit; +} + +button, +input { + overflow: visible; // Show the overflow in Edge +} + +button, +select { + text-transform: none; // remove the inheritance of text transform in Firefox +} + +// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` +// controls in Android 4. +// 2. Correct the inability to style clickable types in iOS and Safari. +button, +html [type="button"], // 1 +[type="reset"], +[type="submit"] { + -webkit-appearance: button; // 2 +} + +// remove inner border and padding from Firefox, but don't restore the outline like Normalize. +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + padding: 0; + border-style: none; +} + +input[type="radio"], +input[type="checkbox"] { + box-sizing: border-box; // 1. Add the correct box sizing in IE 10- + padding: 0; // 2. remove the padding in IE 10- +} + +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + // remove the default appearance of temporal inputs to avoid a Mobile Safari + // bug where setting a custom line-height prevents text from being vertically + // centered within the input. + // See https://bugs.webkit.org/show_bug.cgi?id=139848 + // and https://github.com/twbs/bootstrap/issues/11266 + -webkit-appearance: listbox; +} + +textarea { + overflow: auto; // remove the default vertical scrollbar in IE. + // Textareas should really only resize vertically so they don't break their (horizontal) containers. + resize: vertical; +} + +fieldset { + // Browsers set a default `min-width: min-content;` on fieldsets, + // unlike e.g. `<div>`s, which have `min-width: 0;` by default. + // So we reset that to ensure fieldsets behave more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359 + // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements + min-width: 0; + // Reset the default outline behavior of fieldsets so they don't affect page layout. + padding: 0; + margin: 0; + border: 0; +} + +// 1. Correct the text wrapping in Edge and IE. +// 2. Correct the color inheritance from `fieldset` elements in IE. +legend { + display: block; + width: 100%; + max-width: 100%; // 1 + padding: 0; + margin-bottom: .5em; + font-size: 1.5em; + line-height: inherit; + color: inherit; // 2 + white-space: normal; // 1 +} + +progress { + vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera. +} + +// Correct the cursor style of incement and decement buttons in Chrome. +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + // This overrides the extra rounded corners on search inputs in iOS so that our + // `.form-control` class can properly style them. Note that this cannot simply + // be added to `.form-control` as it's not specific enough. For details, see + // https://github.com/twbs/bootstrap/issues/11586. + outline-offset: -2px; // 2. Correct the outline style in Safari. + -webkit-appearance: none; +} + +// +// remove the inner padding and cancel buttons in Chrome and Safari on macOS. +// + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// 1. Correct the inability to style clickable types in iOS and Safari. +// 2. Change font properties to `inherit` in Safari. +// + +::-webkit-file-upload-button { + font: inherit; // 2 + -webkit-appearance: button; // 1 +} + +// +// Correct element displays +// + +output { + display: inline-block; +} + +summary { + display: list-item; // Add the correct display in all browsers +} + +template { + display: none; // Add the correct display in IE +} + +// Always hide an element with the `hidden` HTML attribute (from PureCSS). +// Needed for proper display in IE 10-. +[hidden] { + display: none !important; +} + +mark { + padding: .2em; + background-color: @yellow-1; +} + +::selection { + background: @primary-color; + color: #fff; } // Utility classes diff --git a/components/style/core/iconfont.less b/components/style/core/iconfont.less index a62853fcd..57e36acae 100644 --- a/components/style/core/iconfont.less +++ b/components/style/core/iconfont.less @@ -6,8 +6,6 @@ font-family: 'anticon'; src: url('@{icon-url}.eot'); /* IE9*/ src: - /* IE6-IE8 */ - url('@{icon-url}.eot?#iefix') format('embedded-opentype'), /* chrome、firefox */ url('@{icon-url}.woff') format('woff'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ @@ -97,7 +95,6 @@ .@{iconfont-css-prefix}-credit-card:before { content: "\e635"; } .@{iconfont-css-prefix}-code-o:before { content: "\e636"; } .@{iconfont-css-prefix}-book:before { content: "\e637"; } -.@{iconfont-css-prefix}-bar-chart:before { content: "\e638"; } .@{iconfont-css-prefix}-bars:before { content: "\e639"; } .@{iconfont-css-prefix}-question:before { content: "\e63a"; } .@{iconfont-css-prefix}-question-circle:before { content: "\e63b"; } @@ -115,7 +112,7 @@ .@{iconfont-css-prefix}-frown-circle:before { content: "\e646"; } // antd@1.x compatibility alias: frown .@{iconfont-css-prefix}-ellipsis:before { content: "\e647"; } .@{iconfont-css-prefix}-copy:before { content: "\e648"; } -.@{iconfont-css-prefix}-menu-fold:before { content: "\e658"; } +.@{iconfont-css-prefix}-menu-fold:before { content: "\e9ac"; } .@{iconfont-css-prefix}-mail:before { content: "\e659"; } .@{iconfont-css-prefix}-logout:before { content: "\e65a"; } .@{iconfont-css-prefix}-link:before { content: "\e65b"; } @@ -149,7 +146,7 @@ .@{iconfont-css-prefix}-paper-clip:before { content: "\e676"; } .@{iconfont-css-prefix}-notification:before { content: "\e677"; } .@{iconfont-css-prefix}-mobile:before { content: "\e678"; } -.@{iconfont-css-prefix}-menu-unfold:before { content: "\e679"; } +.@{iconfont-css-prefix}-menu-unfold:before { content: "\e9ad"; } .@{iconfont-css-prefix}-inbox:before { content: "\e67a"; } .@{iconfont-css-prefix}-lock:before { content: "\e67b"; } .@{iconfont-css-prefix}-qrcode:before { content: "\e67c"; } @@ -295,7 +292,38 @@ .@{iconfont-css-prefix}-global:before { content: "\e6f1"; } .@{iconfont-css-prefix}-shake:before { content: "\e94f"; } .@{iconfont-css-prefix}-fork:before { content: "\e6f2"; } +.@{iconfont-css-prefix}-dashboard:before { content: "\e99a"; } +.@{iconfont-css-prefix}-profile:before { content: "\e999"; } +.@{iconfont-css-prefix}-table:before { content: "\e998"; } +.@{iconfont-css-prefix}-warning:before { content: "\e997"; } +.@{iconfont-css-prefix}-form:before { content: "\e996"; } .@{iconfont-css-prefix}-spin:before { display: inline-block; animation: loadingCircle 1s infinite linear; } + +.@{iconfont-css-prefix}-weibo-square:before { content: "\e6f5"; } +.@{iconfont-css-prefix}-weibo-circle:before { content: "\e6f4"; } +.@{iconfont-css-prefix}-taobao-circle:before { content: "\e6f3"; } +.@{iconfont-css-prefix}-html5:before { content: "\e9c7"; } +.@{iconfont-css-prefix}-weibo:before { content: "\e9c6"; } +.@{iconfont-css-prefix}-twitter:before { content: "\e9c5"; } +.@{iconfont-css-prefix}-wechat:before { content: "\e9c4"; } +.@{iconfont-css-prefix}-youtube:before { content: "\e9c3"; } +.@{iconfont-css-prefix}-alipay-circle:before { content: "\e9c2"; } +.@{iconfont-css-prefix}-taobao:before { content: "\e9c1"; } +.@{iconfont-css-prefix}-skype:before { content: "\e9c0"; } +.@{iconfont-css-prefix}-qq:before { content: "\e9bf"; } +.@{iconfont-css-prefix}-medium-workmark:before { content: "\e9be"; } +.@{iconfont-css-prefix}-gitlab:before { content: "\e9bd"; } +.@{iconfont-css-prefix}-medium:before { content: "\e9bc"; } +.@{iconfont-css-prefix}-linkedin:before { content: "\e9bb"; } +.@{iconfont-css-prefix}-google-plus:before { content: "\e9ba"; } +.@{iconfont-css-prefix}-dropbox:before { content: "\e9b9"; } +.@{iconfont-css-prefix}-facebook:before { content: "\e9b8"; } +.@{iconfont-css-prefix}-codepen:before { content: "\e9b7"; } +.@{iconfont-css-prefix}-amazon:before { content: "\e9b6"; } +.@{iconfont-css-prefix}-google:before { content: "\e9b5"; } +.@{iconfont-css-prefix}-codepen-circle:before { content: "\e9b4"; } +.@{iconfont-css-prefix}-alipay:before { content: "\e9b3"; } +.@{iconfont-css-prefix}-ant-design:before { content: "\e9b2"; } diff --git a/components/style/core/normalize.less b/components/style/core/normalize.less deleted file mode 100644 index bfc3448ea..000000000 --- a/components/style/core/normalize.less +++ /dev/null @@ -1,447 +0,0 @@ -/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers (opinionated). - */ - -body { - margin: 0; -} - -/** - * Add the correct display in IE 9-. - */ - -article, -aside, -footer, -header, -nav, -section { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in IE. - */ - -figcaption, -figure, -main { /* 1 */ - display: block; -} - -/** - * Add the correct margin in IE 8. - */ - -figure { - margin: 1em 40px; -} - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. - */ - -a { - background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ -} - -/** - * 1. Remove the bottom border in Chrome 57- and Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ - -b, -strong { - font-weight: inherit; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font style in Android 4.3-. - */ - -dfn { - font-style: italic; -} - -/** - * Add the correct background and color in IE 9-. - */ - -mark { - background-color: #ff0; - color: #000; -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -audio, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Remove the border on images inside links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers (opinionated). - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: sans-serif; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. - */ - -button, -html [type="button"], /* 1 */ -[type="reset"], -[type="submit"] { - -webkit-appearance: button; /* 2 */ -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Remove the default vertical scrollbar in IE. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - */ - -details, /* 1 */ -menu { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Scripting - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -canvas { - display: inline-block; -} - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* Hidden - ========================================================================== */ - -/** - * Add the correct display in IE 10-. - */ - -[hidden] { - display: none; -} diff --git a/components/style/index.js b/components/style/index.js index 1526e4dff..d74e52ee9 100644 --- a/components/style/index.js +++ b/components/style/index.js @@ -1 +1 @@ -import './index.less' +import './index.less'; diff --git a/components/style/mixins/compatibility.less b/components/style/mixins/compatibility.less index 7e1202af4..89269ebfb 100644 --- a/components/style/mixins/compatibility.less +++ b/components/style/mixins/compatibility.less @@ -1,32 +1,5 @@ // Compatibility for browsers. -// rotate for ie8 and blow -.ie-rotate(@rotation) { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})"; -} - -// rotate for ie8 and blow -// degrees unit -.ie-rotate-via-degrees(@degrees) { - /* IE6-IE8 */ - @radians: ~`parseInt("@{degrees}") * Math.PI * 2 / 360`; - @costheta: ~`Math.cos("@{radians}")`; - @sintheta: ~`Math.sin("@{radians}")`; - @negsintheta: ~`"@{sintheta}" * -1`; - -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=@{costheta}, M12=@{negsintheta}, M21=@{sintheta}, M22=@{costheta})"; - zoom: 1; - - :root & { - filter: none; - } -} - -// support rotate for all browsers -.cross-rotate(@degrees) { - .rotate(@degrees); - .ie-rotate-via-degrees(@degrees); -} - // Placeholder text .placeholder(@color: @input-placeholder-color) { // Firefox diff --git a/components/style/mixins/iconfont.less b/components/style/mixins/iconfont.less index cb85ddb51..f7ed4f96b 100644 --- a/components/style/mixins/iconfont.less +++ b/components/style/mixins/iconfont.less @@ -27,12 +27,11 @@ .iconfont-size-under-12px(@size, @rotate: 0deg) { display: inline-block; @font-scale: unit(@size / 12px); - font-size: @font-size-base; - // ie8-9 + font-size: 12px; + // IE9 font-size: ~"@{size} \9"; // lesshint duplicateProperty: false transform: scale(@font-scale) rotate(@rotate); - .ie-rotate-via-degrees(@rotate); :root & { - font-size: @font-size-base; // reset ie9 and above + font-size: @font-size-sm; // reset IE9 and above } } diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less index 2c86242c6..ccf2212a6 100644 --- a/components/style/mixins/index.less +++ b/components/style/mixins/index.less @@ -1,6 +1,5 @@ // Mixins // -------------------------------------------------- -@import "opacity"; @import "size"; @import "compatibility"; @import "clearfix"; diff --git a/components/style/mixins/motion.less b/components/style/mixins/motion.less index 411143c7f..84b2c82eb 100644 --- a/components/style/mixins/motion.less +++ b/components/style/mixins/motion.less @@ -20,22 +20,11 @@ .motion-common-leave(@duration); animation-play-state: paused; } - .@{className}-enter-active, - .@{className}-appear-active { - animation-name: ~"@{keyframeName}In"; - animation-play-state: running; - .motion-common(@duration); - } .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active { animation-name: ~"@{keyframeName}In"; animation-play-state: running; } - .@{className}-leave-active { - animation-name: ~"@{keyframeName}Out"; - animation-play-state: running; - .motion-common(@duration); - } .@{className}-leave.@{className}-leave-active { animation-name: ~"@{keyframeName}Out"; animation-play-state: running; diff --git a/components/style/mixins/opacity.less b/components/style/mixins/opacity.less deleted file mode 100644 index 33ed25ce6..000000000 --- a/components/style/mixins/opacity.less +++ /dev/null @@ -1,8 +0,0 @@ -// Opacity - -.opacity(@opacity) { - opacity: @opacity; - // IE8 filter - @opacity-ie: (@opacity * 100); - filter: ~"alpha(opacity=@{opacity-ie})"; -} diff --git a/components/style/themes/default.less b/components/style/themes/default.less index e68c83ebd..7cccc45ce 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -8,9 +8,10 @@ @primary-color : @blue-6; @info-color : @blue-6; @success-color : @green-6; +@processing-color : @primary-color; @error-color : @red-6; @highlight-color : @red-6; -@warning-color : @yellow-6; +@warning-color : @gold-6; @normal-color : #d9d9d9; // Color used by default to control hover and active backgrounds and for @@ -33,16 +34,16 @@ @body-background : #fff; // Base background color for most components @component-background : #fff; -@font-family-no-number : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-no-number : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family : "Helvetica Neue For Number", @font-family-no-number; @code-family : Consolas, Menlo, Courier, monospace; @heading-color : fade(#000, 85%); @text-color : fade(#000, 65%); -@text-color-secondary : fade(#000, 43%); -@heading-color-dark : fade(#fff, 97%); -@text-color-dark : fade(#fff, 91%); -@text-color-secondary-dark: fade(#fff, 67%); -@font-size-base : 12px; +@text-color-secondary : fade(#000, 45%); +@heading-color-dark : fade(#fff, 100%); +@text-color-dark : fade(#fff,85%); +@text-color-secondary-dark: fade(#fff, 65%); +@font-size-base : 14px; @font-size-lg : @font-size-base + 2px; @font-size-sm : 12px; @line-height-base : 1.5; @@ -66,7 +67,7 @@ // ICONFONT @iconfont-css-prefix : anticon; -@icon-url : "https://at.alicdn.com/t/font_zck90zmlh7hf47vi"; +@icon-url : "https://at.alicdn.com/t/font_148784_r2qo40wrmaolayvi"; // LINK @link-color : @primary-color; @@ -90,8 +91,8 @@ @ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1); // Border color -@border-color-base : #d9d9d9; // base border outline a component -@border-color-split : #e9e9e9; // split border inside 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-width-base : 1px; // width of the border for a component @border-style-base : solid; // style of a components border @@ -100,10 +101,8 @@ @outline-width : 2px; @outline-color : @primary-color; -// Default background color for disabled states, Collapse wrappers, -// and several active and hover states. -@background-color-base : #f7f7f7; -@background-color-active: #eee; +@background-color-light : hsv(0, 0, 98%); // background of header and selected item +@background-color-base : hsv(0, 0, 96%); // Default grey background color // Disabled states @disabled-color : fade(#000, 25%); @@ -111,16 +110,16 @@ @disabled-color-dark : fade(#fff, 35%); // Shadow -@shadow-color : rgba(0, 0, 0, .2); +@shadow-color : rgba(0, 0, 0, .15); @box-shadow-base : @shadow-1-down; -@shadow-1-up : 0 -1px 6px @shadow-color; -@shadow-1-down : 0 1px 6px @shadow-color; -@shadow-1-left : -1px 0 6px @shadow-color; -@shadow-1-right : 1px 0 6px @shadow-color; -@shadow-2 : 0 2px 8px @shadow-color; +@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; // Buttons -@btn-font-weight : 500; +@btn-font-weight : 400; @btn-border-radius-base : @border-radius-base; @btn-border-radius-sm : @border-radius-base; @@ -139,23 +138,27 @@ @btn-disable-bg : @disabled-bg; @btn-disable-border : @border-color-base; -@btn-padding-base : 0 15px; +@btn-padding-base : 0 @padding-md - 1px; @btn-font-size-lg : @font-size-lg; +@btn-font-size-sm : @font-size-base; @btn-padding-lg : @btn-padding-base; -@btn-padding-sm : 0 7px; +@btn-padding-sm : 0 @padding-xs - 1px; -@btn-height-base : 28px; -@btn-height-lg : 32px; -@btn-height-sm : 22px; +@btn-height-base : 32px; +@btn-height-lg : 40px; +@btn-height-sm : 24px; @btn-circle-size : @btn-height-base; @btn-circle-size-lg : @btn-height-lg; @btn-circle-size-sm : @btn-height-sm; -@btn-group-border : @primary-7; +@btn-group-border : @primary-5; // Checkbox -@checkbox-size : 14px; +@checkbox-size : 16px; + +// Radio +@radio-size : 16px; // Radio buttons @radio-button-bg : @btn-default-bg; @@ -167,41 +170,46 @@ @screen-xs-min : @screen-xs; // Small screen / tablet -@screen-sm : 768px; +@screen-sm : 576px; @screen-sm-min : @screen-sm; // Medium screen / desktop -@screen-md : 992px; +@screen-md : 768px; @screen-md-min : @screen-md; // Large screen / wide desktop -@screen-lg : 1200px; +@screen-lg : 992px; @screen-lg-min : @screen-lg; -// Extra Large screen / full hd -@screen-xl : 1600px; +// Extra large screen / full hd +@screen-xl : 1200px; @screen-xl-min : @screen-xl; +// Extra extra large screen / large descktop +@screen-xxl : 1600px; +@screen-xxl-min : @screen-xxl; + // provide a maximum @screen-xs-max : (@screen-sm-min - 1px); @screen-sm-max : (@screen-md-min - 1px); @screen-md-max : (@screen-lg-min - 1px); @screen-lg-max : (@screen-xl-min - 1px); +@screen-xl-max : (@screen-xxl-min - 1px); // Grid system @grid-columns : 24; @grid-gutter-width : 0; // Layout -@layout-body-background : #ececec; -@layout-header-background : #404040; +@layout-body-background : #f0f2f5; +@layout-header-background : #001529; @layout-footer-background : @layout-body-background; @layout-header-height : 64px; @layout-header-padding : 0 50px; @layout-footer-padding : 24px 50px; @layout-sider-background : @layout-header-background; @layout-trigger-height : 48px; -@layout-trigger-background : tint(@heading-color, 20%); +@layout-trigger-background : #002140; @layout-trigger-color : #fff; @layout-zero-trigger-width : 36px; @layout-zero-trigger-height : 42px; @@ -234,23 +242,23 @@ // Input // --- -@input-height-base : 28px; -@input-height-lg : 32px; -@input-height-sm : 22px; -@input-padding-horizontal : 7px; -@input-padding-horizontal-base : @input-padding-horizontal; -@input-padding-horizontal-sm : @input-padding-horizontal; -@input-padding-horizontal-lg : @input-padding-horizontal; -@input-padding-vertical-base : 4px; -@input-padding-vertical-sm : 1px; -@input-padding-vertical-lg : 6px; -@input-placeholder-color : hsv(0, 0, 75%); -@input-color : @text-color; -@input-border-color : @border-color-base; -@input-bg : #fff; -@input-addon-bg : #eee; -@input-hover-border-color : @primary-color; -@input-disabled-bg : @disabled-bg; +@input-height-base : 32px; +@input-height-lg : 40px; +@input-height-sm : 24px; +@input-padding-horizontal : @control-padding-horizontal - 1px; +@input-padding-horizontal-base: @input-padding-horizontal; +@input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px; +@input-padding-horizontal-lg : @input-padding-horizontal; +@input-padding-vertical-base : 4px; +@input-padding-vertical-sm : 1px; +@input-padding-vertical-lg : 6px; +@input-placeholder-color : hsv(0, 0, 75%); +@input-color : @text-color; +@input-border-color : @border-color-base; +@input-bg : #fff; +@input-addon-bg : @background-color-light; +@input-hover-border-color : @primary-color; +@input-disabled-bg : @disabled-bg; // Tooltip // --- @@ -276,30 +284,29 @@ //** Popover maximum width @popover-min-width: 177px; //** Popover arrow width -@popover-arrow-width: 4px; +@popover-arrow-width: 5px; //** Popover arrow color @popover-arrow-color: @popover-bg; //** Popover outer arrow width -@popover-arrow-outer-width: (@popover-arrow-width + 1px); //** Popover outer arrow color -@popover-arrow-outer-color: fadeout(@border-color-base, 30%); +@popover-arrow-outer-color: @popover-bg; //** Popover distance with trigger @popover-distance: @popover-arrow-width + 4px; // Modal // -- -@modal-mask-bg: rgba(55, 55, 55, 0.6); +@modal-mask-bg: rgba(0, 0, 0, 0.65); // Progress // -- -@process-default-color: @primary-color; +@progress-default-color: @processing-color; @progress-remaining-color: @background-color-base; // Menu // --- @menu-dark-bg: @layout-header-background; -@menu-dark-submenu-bg: #333; -@menu-collapsed-width: 64px; +@menu-dark-submenu-bg: #000c17; +@menu-collapsed-width: 80px; // Spin // --- @@ -309,18 +316,18 @@ // Table // -- -@table-header-bg: @background-color-base; -@table-header-sort-bg: @background-color-active; +@table-header-bg: @background-color-light; +@table-header-sort-bg: @background-color-base; @table-row-hover-bg: @primary-1; @table-selected-row-bg: #fafafa; @table-padding-vertical: 16px; -@table-padding-horizontal: 8px; +@table-padding-horizontal: 16px; // Tag // -- -@tag-default-bg: #f3f3f3; +@tag-default-bg: @background-color-light; @tag-default-color: @text-color; -@tag-font-size: @font-size-base; +@tag-font-size: @font-size-sm; // TimePicker // --- @@ -337,31 +344,40 @@ // Badge // --- @badge-height: 20px; -@badge-dot-size: 8px; -@badge-font-size: @font-size-base; +@badge-dot-size: 6px; +@badge-font-size: @font-size-sm; +@badge-status-size: 6px; // Rate // --- -@rate-star-color: #f5a623; -@rate-star-bg: #e9e9e9; +@rate-star-color: @yellow-6; +@rate-star-bg: @border-color-split; // Card // --- -@card-head-height: 48px; @card-head-color: @heading-color; @card-head-background: @component-background; +@card-head-padding: 16px; +@card-inner-head-padding: 12px; +@card-padding-base: 24px; +@card-padding-wider: 32px; +@card-actions-background: @background-color-light; +@card-shadow: 0 2px 8px rgba(0, 0, 0, .09); // Tabs // --- -@tabs-card-head-background: #f9f9f9; -@tabs-title-font-size: @font-size-lg; +@tabs-card-head-background: @background-color-light; +@tabs-card-height: 40px; +@tabs-title-font-size: @font-size-base; // BackTop +// --- @back-top-color: #fff; -@back-top-bg: rgba(64, 64, 64, 0.4); -@back-top-hover-bg: rgba(64, 64, 64, 0.6); +@back-top-bg: @text-color-secondary; +@back-top-hover-bg: @text-color; // Avatar +// --- @avatar-size-base: 32px; @avatar-size-lg: 40px; @avatar-size-sm: 24px; @@ -371,3 +387,15 @@ @avatar-bg: #ccc; @avatar-color: #fff; @avatar-border-radius: @border-radius-base; + +// Switch +// --- +@switch-height: 22px; +@switch-sm-height: 16px; +@switch-disabled-opacity: 0.4; +@switch-color: @primary-color; + +// Pagination +// --- +@pagination-item-size: 32px; +@pagination-item-size-sm: 24px; diff --git a/components/style/v2-compatible-reset.js b/components/style/v2-compatible-reset.js new file mode 100644 index 000000000..8fed6241d --- /dev/null +++ b/components/style/v2-compatible-reset.js @@ -0,0 +1 @@ +import './v2-compatible-reset.less'; diff --git a/components/style/v2-compatible-reset.less b/components/style/v2-compatible-reset.less new file mode 100644 index 000000000..c60350ebb --- /dev/null +++ b/components/style/v2-compatible-reset.less @@ -0,0 +1,14 @@ +// For 2.x reset compatibility +// import 'antd/style/v2-compatible-reset'; +// or +// @import '~antd/style/v2-compatible-reset.css'; +// unify the setting of elements's margin and padding for browsers +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { + margin: 0; + padding: 0; +} + +ul, +ol { + list-style: none; +} diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less index 7c3e25ca9..174fccc16 100644 --- a/components/tabs/style/card-style.less +++ b/components/tabs/style/card-style.less @@ -1,33 +1,32 @@ @import "../../style/themes/default"; @import "../../style/mixins/index"; + @tab-prefix-cls: ~"@{ant-prefix}-tabs"; // card style .@{tab-prefix-cls} { &&-card > &-bar &-nav-container { - height: 32px; + height: @tabs-card-height; } &&-card > &-bar &-ink-bar { visibility: hidden; } &&-card > &-bar &-tab { margin: 0; - border: @border-width-base @border-style-base @border-color-base; + border: @border-width-base @border-style-base @border-color-split; border-bottom: 0; border-radius: @border-radius-base @border-radius-base 0 0; - transition: all 0.3s @ease-in-out; background: @tabs-card-head-background; margin-right: 2px; - } - &&-card > &-bar &-tab { - padding: 5px 16px 4px; + padding: 0 16px; transition: all 0.3s @ease-in-out; + line-height: @tabs-card-height - 2px; } &&-card > &-bar &-tab-active { background: @component-background; - border-color: @border-color-base; + border-color: @border-color-split; color: @primary-color; - padding-bottom: 5px; + padding-bottom: 1px; } &&-card > &-bar &-tab-inactive { padding: 0; @@ -38,19 +37,14 @@ &&-card > &-bar &-tab .@{iconfont-css-prefix}-close { color: @text-color-secondary; transition: all .3s; - .iconfont-size-under-12px(10px); - margin-right: 0; - opacity: 0; - position: absolute; - right: 2px; - top: 50%; - margin-top: -5px; + font-size: @font-size-sm; + margin-left: 3px; + margin-right: -5px; overflow: hidden; - text-align: center; - border-radius: 2px; - width: 14px; - height: 14px; - line-height: 1; + vertical-align: middle; + width: 16px; + height: 16px; + height: @font-size-base; &:hover { color: @heading-color; } @@ -69,7 +63,7 @@ } &-extra-content { - line-height: 32px; + line-height: @tabs-card-height; .@{tab-prefix-cls}-new-tab { width: 20px; @@ -77,11 +71,10 @@ line-height: 20px; text-align: center; cursor: pointer; - border-radius: @border-radius-base; - border: @border-width-base @border-style-base @border-color-base; - font-size: @font-size-base; - .iconfont-size-under-12px(10px); - color: @text-color-secondary; + border-radius: @border-radius-sm; + border: @border-width-base @border-style-base @border-color-split; + font-size: 12px; + color: @text-color; transition: all .3s; &:hover { color: @primary-color; @@ -96,7 +89,7 @@ height: auto; } .@{tab-prefix-cls}-tab { - border-bottom: @border-width-base @border-style-base @border-color-base; + border-bottom: @border-width-base @border-style-base @border-color-split; margin-bottom: 8px; &-active { padding-bottom: 4px; diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index a15b4bc16..160d2fcf7 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -5,11 +5,10 @@ @import "./card-style"; .@{tab-prefix-cls} { - box-sizing: border-box; + .reset-component; position: relative; overflow: hidden; .clearfix; - color: @text-color; &-ink-bar { z-index: 1; @@ -23,7 +22,7 @@ } &-bar { - border-bottom: @border-width-base @border-style-base @border-color-base; + border-bottom: @border-width-base @border-style-base @border-color-split; margin-bottom: 16px; outline: none; transition: padding .3s @ease-in-out; @@ -52,7 +51,6 @@ z-index: 2; width: 0; height: 100%; - line-height: 32px; cursor: pointer; border: 0; background-color: transparent; @@ -159,7 +157,7 @@ .@{tab-prefix-cls}-tab { display: inline-block; height: 100%; - margin-right: 24px; + margin-right: 32px; box-sizing: border-box; position: relative; @@ -167,7 +165,7 @@ margin-right: 0; } - padding: 8px 20px; + padding: 12px 16px; transition: color 0.3s @ease-in-out; cursor: pointer; text-decoration: none; @@ -179,24 +177,31 @@ &:active { color: @primary-7; } + .@{iconfont-css-prefix} { - width: 14px; - height: 14px; margin-right: 8px; } } .@{tab-prefix-cls}-tab-active { color: @primary-color; + font-weight: 500; } } - &-mini &-nav-container { + &-large &-nav-container { + font-size: @font-size-lg; + } + + &-large &-tab { + padding: 16px; + } + + &-small &-nav-container { font-size: @font-size-base; } - &-mini &-tab { - margin-right: 0; + &-small &-tab { padding: 8px 16px; } @@ -288,15 +293,7 @@ height: auto; top: 0; } - } - > .@{tab-prefix-cls}-content { - overflow: hidden; - width: auto; - margin-top: 0 !important; - } - - > .@{tab-prefix-cls}-bar { .@{tab-prefix-cls}-tab-next { width: 100%; bottom: 0; @@ -315,6 +312,12 @@ } } } + + > .@{tab-prefix-cls}-content { + overflow: hidden; + width: auto; + margin-top: 0 !important; + } } &-vertical&-left { diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less index dae1ed5bb..39cc525a5 100644 --- a/components/tooltip/style/index.less +++ b/components/tooltip/style/index.less @@ -5,12 +5,11 @@ // Base class .@{tooltip-prefix-cls} { + .reset-component; position: absolute; z-index: @zindex-tooltip; display: block; visibility: visible; - font-size: @font-size-base; - line-height: @line-height-base; &-hidden { display: none; @@ -36,31 +35,29 @@ &-placement-leftBottom { padding-right: @tooltip-distance; } -} -// Wrapper for the tooltip content -.@{tooltip-prefix-cls}-inner { - max-width: @tooltip-max-width; - padding: 8px 10px; - color: @tooltip-color; - text-align: left; - text-decoration: none; - background-color: @tooltip-bg; - border-radius: @border-radius-base; - box-shadow: @box-shadow-base; - min-height: 34px; -} + // Wrapper for the tooltip content + &-inner { + max-width: @tooltip-max-width; + padding: 6px 8px; + color: @tooltip-color; + text-align: left; + text-decoration: none; + background-color: @tooltip-bg; + border-radius: @border-radius-base; + box-shadow: @box-shadow-base; + min-height: 32px; + } -// Arrows -.@{tooltip-prefix-cls}-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} + // Arrows + &-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } -.@{tooltip-prefix-cls} { &-placement-top &-arrow, &-placement-topLeft &-arrow, &-placement-topRight &-arrow { diff --git a/examples/routes.js b/examples/routes.js index e34276ff7..03faeafb0 100644 --- a/examples/routes.js +++ b/examples/routes.js @@ -3,7 +3,7 @@ const AsyncComp = () => { const com = pathnameArr[1] || 'button' const demo = pathnameArr[2] || 'index' return { - component: import(`../components/${com}/demo/${demo}.vue`), + component: import(`../components/radio/demo/${demo}.vue`), } } export default [