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

Merge remote-tracking branch 'upstream/0.8.0'

Browse Source
This commit is contained in:
zhujun24 2015-08-20 17:14:29 +08:00
commit 29b9088788
44 changed files with 424 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.lesslintrc Normal file
View File

@ -0,0 +1,6 @@
{
"import": false,
"require-newline": false,
"leading-zero": false,
"single-comment": false
}

2
package.json
View File

@ -80,6 +80,7 @@
"json-loader": "^0.5.1", "json-loader": "^0.5.1",
"less": "~2.5.1", "less": "~2.5.1",
"less-loader": "^2.2.0", "less-loader": "^2.2.0",
"lesslint": "^0.1.7",
"lodash": "^3.10.0", "lodash": "^3.10.0",
"nico-jsx": "~0.5.8", "nico-jsx": "~0.5.8",
"precommit-hook": "^1.0.7", "precommit-hook": "^1.0.7",
@ -93,6 +94,7 @@
"clean": "rm -rf _site dist", "clean": "rm -rf _site dist",
"deploy": "rm -rf node_modules && node scripts/install.js && npm run clean && webpack && webpack --config webpack.config.min.js && NODE_ENV=PRODUCTION nico build && node scripts/deploy.js", "deploy": "rm -rf node_modules && node scripts/install.js && npm run clean && webpack && webpack --config webpack.config.min.js && NODE_ENV=PRODUCTION nico build && node scripts/deploy.js",
"lint": "eslint components index.js --ext '.js,.jsx'", "lint": "eslint components index.js --ext '.js,.jsx'",
"lesslint": "lesslint style",
"test": "webpack && npm run lint", "test": "webpack && npm run lint",
"prepublish": "npm run babel && rm -rf dist && webpack --config webpack.config.production.js && node scripts/prenpm.js" "prepublish": "npm run babel && rm -rf dist && webpack --config webpack.config.production.js && node scripts/prenpm.js"
}, },

2
style/README.md
View File

@ -18,4 +18,4 @@ ant-design 样式库
各个组件中如要自定义类名前缀，请误重名变量，可参照如下定义： 各个组件中如要自定义类名前缀，请误重名变量，可参照如下定义：
`@btnPrefixClass: ~"@{css-prefix}btn";` `@btn-prefix-cls: ~"@{css-prefix}btn";`

6
style/components/alert.less
View File

@ -1,9 +1,9 @@
@import "../mixins/index"; @import "../mixins/index";
@alertPrefixClass: ~"@{css-prefix}alert"; @alert-prefix-cls: ~"@{css-prefix}alert";
@alertTitlePrefixClass: ~"@{css-prefix}alert-with-description"; @alert-title-prefix-cls: ~"@{css-prefix}alert-with-description";
.@{alertPrefixClass} { .@{alert-prefix-cls} {
position: relative; position: relative;
padding: 8px 8px 8px 16px; padding: 8px 8px 8px 16px;
border-radius: @border-radius-base; border-radius: @border-radius-base;

4
style/components/breadcrumb.less
View File

@ -1,6 +1,6 @@
@breadcrumbPrefixCls: ant-breadcrumb; @breadcrumb-prefix-cls: ant-breadcrumb;
.@{breadcrumbPrefixCls} { .@{breadcrumb-prefix-cls} {
color: #999; color: #999;
font-size: 12px; font-size: 12px;

16
style/components/button.less
View File

@ -1,31 +1,31 @@
@import "../mixins/index"; @import "../mixins/index";
@btnPrefixClass: ~"@{css-prefix}btn"; @btn-prefix-cls: ~"@{css-prefix}btn";
// Button styles // Button styles
// ----------------------------- // -----------------------------
.@{btnPrefixClass} { .@{btn-prefix-cls} {
.btn; .btn;
.btn-default; .btn-default;
&-primary { &-primary {
.btn-primary; .btn-primary;
.@{btnPrefixClass}-group &:not(:first-child):not(:last-child) { .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
border-right-color: @btn-group-border; border-right-color: @btn-group-border;
border-left-color: @btn-group-border; border-left-color: @btn-group-border;
} }
.@{btnPrefixClass}-group &:first-child { .@{btn-prefix-cls}-group &:first-child {
&:not(:last-child) { &:not(:last-child) {
border-right-color: @btn-group-border; border-right-color: @btn-group-border;
} }
} }
.@{btnPrefixClass}-group &:last-child:not(:first-child) { .@{btn-prefix-cls}-group &:last-child:not(:first-child) {
border-left-color: @btn-group-border; border-left-color: @btn-group-border;
} }
.@{btnPrefixClass}-group & + .@{btnPrefixClass} { .@{btn-prefix-cls}-group & + .@{btn-prefix-cls} {
border-left-color: @btn-group-border; border-left-color: @btn-group-border;
} }
} }
@ -35,7 +35,7 @@
} }
&-circle, &-circle-outline { &-circle, &-circle-outline {
.btn-circle(@btnPrefixClass); .btn-circle(@btn-prefix-cls);
} }
&-circle-outline { &-circle-outline {
@ -73,6 +73,6 @@
} }
&-group { &-group {
.btn-group(@btnPrefixClass); .btn-group(@btn-prefix-cls);
} }
} }

15
style/components/carousel/slick-theme.less
View File

@ -1,7 +1,6 @@
.ant-carousel { .ant-carousel {
/* Arrows */ // Arrows
.slick-prev, .slick-prev,
.slick-next { .slick-next {
@ -9,8 +8,8 @@
display: block; display: block;
height: 20px; height: 20px;
width: 20px; width: 20px;
line-height: 0px; line-height: 0;
font-size: 0px; font-size: 0;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: transparent; color: transparent;
@ -46,7 +45,7 @@
} }
} }
/* Dots */ // Dots
.slick-slider { .slick-slider {
padding-bottom: 45px; padding-bottom: 45px;
@ -54,7 +53,7 @@
.slick-dots { .slick-dots {
position: absolute; position: absolute;
bottom: 0px; bottom: 0;
list-style: none; list-style: none;
display: block; display: block;
text-align: center; text-align: center;
@ -75,8 +74,8 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
outline: none; outline: none;
line-height: 0px; line-height: 0;
font-size: 0px; font-size: 0;
color: transparent; color: transparent;
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;

1
style/components/carousel/slick.less
View File

@ -1,4 +1,3 @@
.ant-carousel { .ant-carousel {
.slick-slider { .slick-slider {

52
style/components/checkbox.less
View File

@ -1,10 +1,12 @@
.antCheckboxFn(); .antCheckboxFn();
.antCheckboxFn(@checkboxPrefixCls: ant-checkbox) {
@checkboxWrapPrefixCls: @checkboxPrefixCls;
@checkboxInnerPrefixCls: ~"@{checkboxWrapPrefixCls}-inner";
/* 一般状态 */ .antCheckboxFn(@checkbox-prefix-cls: ant-checkbox) {
.@{checkboxWrapPrefixCls} {
@checkbox-wrap-prefix-cls: @checkbox-prefix-cls;
@checkbox-inner-prefix-cls: ~"@{checkbox-wrap-prefix-cls}-inner";
// 一般状态
.@{checkbox-wrap-prefix-cls} {
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@ -14,7 +16,7 @@
vertical-align: middle; vertical-align: middle;
&:hover { &:hover {
.@{checkboxInnerPrefixCls} { .@{checkbox-inner-prefix-cls} {
border-color: #bcbcbc; border-color: #bcbcbc;
} }
} }
@ -28,7 +30,7 @@
display: table; display: table;
width: 5px; width: 5px;
height: 8px; height: 8px;
border: 2px solid #ffffff; border: 2px solid #fff;
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
content: ' '; content: ' ';
@ -45,7 +47,7 @@
border-style: solid; border-style: solid;
border-radius: 3px; border-radius: 3px;
border-color: #d9d9d9; border-color: #d9d9d9;
background-color: #ffffff; background-color: #fff;
transition: border-color 0.1s @ease-in-out-back, background-color 0.1s @ease-in-out-back; transition: border-color 0.1s @ease-in-out-back, background-color 0.1s @ease-in-out-back;
} }
@ -61,9 +63,9 @@
} }
} }
/* 半选状态 */ // 半选状态
.@{checkboxWrapPrefixCls}-indeterminate { .@{checkbox-wrap-prefix-cls}-indeterminate {
.@{checkboxInnerPrefixCls} { .@{checkbox-inner-prefix-cls} {
border-color: @primary-color; border-color: @primary-color;
background-color: @primary-color; background-color: @primary-color;
&:after { &:after {
@ -77,16 +79,16 @@
} }
} }
} }
/* 选中状态 */ // 选中状态
.@{checkboxWrapPrefixCls}-checked { .@{checkbox-wrap-prefix-cls}-checked {
&:hover { &:hover {
.@{checkboxInnerPrefixCls} { .@{checkbox-inner-prefix-cls} {
border-color: @primary-color; border-color: @primary-color;
} }
} }
.@{checkboxInnerPrefixCls} { .@{checkbox-inner-prefix-cls} {
border-color: @primary-color; border-color: @primary-color;
background-color: @primary-color; background-color: @primary-color;
@ -98,7 +100,7 @@
display: table; display: table;
width: 5px; width: 5px;
height: 8px; height: 8px;
border: 2px solid #ffffff; border: 2px solid #fff;
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
content: ' '; content: ' ';
@ -107,34 +109,34 @@
} }
} }
.@{checkboxWrapPrefixCls}-disabled { .@{checkbox-wrap-prefix-cls}-disabled {
&.@{checkboxWrapPrefixCls}-checked { &.@{checkbox-wrap-prefix-cls}-checked {
&:hover { &:hover {
.@{checkboxInnerPrefixCls} { .@{checkbox-inner-prefix-cls} {
border-color: #d9d9d9; border-color: #d9d9d9;
} }
} }
.@{checkboxInnerPrefixCls} { .@{checkbox-inner-prefix-cls} {
background-color: #f3f3f3; background-color: #f3f3f3;
border-color: #d9d9d9; border-color: #d9d9d9;
&:after { &:after {
animation-name: none; animation-name: none;
border-color: #cccccc; border-color: #ccc;
} }
} }
} }
&:hover { &:hover {
.@{checkboxInnerPrefixCls} { .@{checkbox-inner-prefix-cls} {
border-color: #d9d9d9; border-color: #d9d9d9;
} }
} }
.@{checkboxInnerPrefixCls} { .@{checkbox-inner-prefix-cls} {
border-color: #d9d9d9; border-color: #d9d9d9;
background-color: #f3f3f3; background-color: #f3f3f3;
&:after { &:after {
@ -143,12 +145,12 @@
} }
} }
.@{checkboxInnerPrefixCls}-input { .@{checkbox-inner-prefix-cls}-input {
cursor: default; cursor: default;
} }
} }
.@{checkboxWrapPrefixCls} + span { .@{checkbox-wrap-prefix-cls} + span {
margin-left: 8px; margin-left: 8px;
} }

15
style/components/collapse.less
View File

@ -1,5 +1,4 @@
@prefixCls: ant-collapse; @collapse-prefix-cls: ant-collapse;
@borderStyle: 1px solid #d9d9d9;
#arrow { #arrow {
.close() { .close() {
@ -10,18 +9,18 @@
} }
} }
.@{prefixCls} { .@{collapse-prefix-cls} {
background-color: #f4f4f4; background-color: #f4f4f4;
border-radius: 3px; border-radius: 3px;
border: @borderStyle; border: 1px solid #d9d9d9;
& > &-item { & > &-item {
border-top: @borderStyle; border-top: 1px solid #d9d9d9;
&:first-child { &:first-child {
border-top: none; border-top: none;
} }
> .@{prefixCls}-header { > .@{collapse-prefix-cls}-header {
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
padding-left: 16px; padding-left: 16px;
@ -58,7 +57,7 @@
} }
&-item:last-child { &-item:last-child {
> .@{prefixCls}-content { > .@{collapse-prefix-cls}-content {
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
} }
} }
@ -67,7 +66,7 @@
} }
& > &-item-active { & > &-item-active {
> .@{prefixCls}-header { > .@{collapse-prefix-cls}-header {
&:before { &:before {
#arrow > .open(); #arrow > .open();

12
style/components/confirm.less
View File

@ -1,6 +1,6 @@
@confirmPrefixCls: ant-confirm; @confirm-prefix-cls: ant-confirm;
.@{confirmPrefixCls} { .@{confirm-prefix-cls} {
.ant-modal-header { .ant-modal-header {
display: none; display: none;
@ -10,14 +10,14 @@
padding: 30px 40px; padding: 30px 40px;
} }
.@{confirmPrefixCls}-body { .@{confirm-prefix-cls}-body {
.@{confirmPrefixCls}-title { .@{confirm-prefix-cls}-title {
color: @text-color; color: @text-color;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
} }
.@{confirmPrefixCls}-content { .@{confirm-prefix-cls}-content {
margin-left: 37px; margin-left: 37px;
font-size: @font-size-base; font-size: @font-size-base;
color: @text-color; color: @text-color;
@ -39,7 +39,7 @@
} }
} }
.@{confirmPrefixCls}-btns { .@{confirm-prefix-cls}-btns {
margin-top: 30px; margin-top: 30px;
float: right; float: right;

4
style/components/datepicker.less
View File

@ -1,6 +1,6 @@
@prefixCalendarClass: ant-calendar; @calendar-prefix-cls: ant-calendar;
.@{prefixCalendarClass} { .@{calendar-prefix-cls} {
box-sizing: border-box; box-sizing: border-box;
* { * {
box-sizing: border-box; box-sizing: border-box;

66
style/components/datepicker/Calendar.less
View File

@ -1,4 +1,4 @@
.calendarPanelHeader(@prefixCalendarClass) { .calendarPanelHeader(@calendar-prefix-cls) {
padding: 0 10px; padding: 0 10px;
height: 34px; height: 34px;
line-height: 34px; line-height: 34px;
@ -10,32 +10,32 @@
color: @link-hover-color; color: @link-hover-color;
} }
.@{prefixCalendarClass}-century-select, .@{calendar-prefix-cls}-century-select,
.@{prefixCalendarClass}-decade-select, .@{calendar-prefix-cls}-decade-select,
.@{prefixCalendarClass}-year-select, .@{calendar-prefix-cls}-year-select,
.@{prefixCalendarClass}-month-select { .@{calendar-prefix-cls}-month-select {
padding: 0px 2px; padding: 0 2px;
font-weight: bold; font-weight: bold;
display: inline-block; display: inline-block;
color: #666; color: #666;
line-height: 34px; line-height: 34px;
} }
.@{prefixCalendarClass}-century-select-arrow, .@{calendar-prefix-cls}-century-select-arrow,
.@{prefixCalendarClass}-decade-select-arrow, .@{calendar-prefix-cls}-decade-select-arrow,
.@{prefixCalendarClass}-year-select-arrow, .@{calendar-prefix-cls}-year-select-arrow,
.@{prefixCalendarClass}-month-select-arrow { .@{calendar-prefix-cls}-month-select-arrow {
display: none; display: none;
} }
.@{prefixCalendarClass}-prev-century-btn, .@{calendar-prefix-cls}-prev-century-btn,
.@{prefixCalendarClass}-next-century-btn, .@{calendar-prefix-cls}-next-century-btn,
.@{prefixCalendarClass}-prev-decade-btn, .@{calendar-prefix-cls}-prev-decade-btn,
.@{prefixCalendarClass}-next-decade-btn, .@{calendar-prefix-cls}-next-decade-btn,
.@{prefixCalendarClass}-prev-month-btn, .@{calendar-prefix-cls}-prev-month-btn,
.@{prefixCalendarClass}-next-month-btn, .@{calendar-prefix-cls}-next-month-btn,
.@{prefixCalendarClass}-prev-year-btn, .@{calendar-prefix-cls}-prev-year-btn,
.@{prefixCalendarClass}-next-year-btn { .@{calendar-prefix-cls}-next-year-btn {
position: absolute; position: absolute;
top: 0; top: 0;
color: #999; color: #999;
@ -46,28 +46,28 @@
line-height: 34px; line-height: 34px;
} }
.@{prefixCalendarClass}-prev-century-btn, .@{calendar-prefix-cls}-prev-century-btn,
.@{prefixCalendarClass}-prev-decade-btn, .@{calendar-prefix-cls}-prev-decade-btn,
.@{prefixCalendarClass}-prev-year-btn { .@{calendar-prefix-cls}-prev-year-btn {
left: 7px; left: 7px;
} }
.@{prefixCalendarClass}-next-century-btn, .@{calendar-prefix-cls}-next-century-btn,
.@{prefixCalendarClass}-next-decade-btn, .@{calendar-prefix-cls}-next-decade-btn,
.@{prefixCalendarClass}-next-year-btn { .@{calendar-prefix-cls}-next-year-btn {
right: 7px; right: 7px;
} }
.@{prefixCalendarClass}-prev-month-btn { .@{calendar-prefix-cls}-prev-month-btn {
left: 29px; left: 29px;
} }
.@{prefixCalendarClass}-next-month-btn { .@{calendar-prefix-cls}-next-month-btn {
right: 29px; right: 29px;
} }
} }
.@{prefixCalendarClass} { .@{calendar-prefix-cls} {
position: relative; position: relative;
outline: none; outline: none;
width: 253px; width: 253px;
@ -90,7 +90,7 @@
} }
&-header { &-header {
.calendarPanelHeader(@prefixCalendarClass); .calendarPanelHeader(@calendar-prefix-cls);
} }
&-calendar-body { &-calendar-body {
@ -118,14 +118,14 @@
width: 33px; width: 33px;
padding: 6px 0; padding: 6px 0;
text-align: center; text-align: center;
.@{prefixCalendarClass}-column-header-inner { .@{calendar-prefix-cls}-column-header-inner {
display: block; display: block;
font-weight: normal; font-weight: normal;
} }
} }
&-week-number-header { &-week-number-header {
.@{prefixCalendarClass}-column-header-inner { .@{calendar-prefix-cls}-column-header-inner {
display: none; display: none;
} }
} }
@ -215,8 +215,8 @@
display: inline-block; display: inline-block;
} }
.@{prefixCalendarClass}-today-btn, .@{calendar-prefix-cls}-today-btn,
.@{prefixCalendarClass}-clear-btn { .@{calendar-prefix-cls}-clear-btn {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
margin: 0 10px; margin: 0 10px;
@ -227,7 +227,7 @@
} }
} }
.@{prefixCalendarClass}-ok-btn { .@{calendar-prefix-cls}-ok-btn {
.btn; .btn;
.btn-primary; .btn-primary;
.button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm); .button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);

36
style/components/datepicker/DecadePanel.less
View File

@ -1,34 +1,34 @@
.@{prefixCalendarClass}-decade-panel { .@{calendar-prefix-cls}-decade-panel {
left: 0px; left: 0;
top: 0px; top: 0;
bottom: 0px; bottom: 0;
right: 0px; right: 0;
background: #fff; background: #fff;
z-index: 10; z-index: 10;
position: absolute; position: absolute;
outline: none; outline: none;
} }
.@{prefixCalendarClass}-decade-panel-hidden { .@{calendar-prefix-cls}-decade-panel-hidden {
display: none; display: none;
} }
.@{prefixCalendarClass}-decade-panel-header { .@{calendar-prefix-cls}-decade-panel-header {
.calendarPanelHeader(~"@{prefixCalendarClass}-decade-panel"); .calendarPanelHeader(~"@{calendar-prefix-cls}-decade-panel");
} }
.@{prefixCalendarClass}-decade-panel-table { .@{calendar-prefix-cls}-decade-panel-table {
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
height: 248px; height: 248px;
border-collapse: separate; border-collapse: separate;
} }
.@{prefixCalendarClass}-decade-panel-cell { .@{calendar-prefix-cls}-decade-panel-cell {
text-align: center; text-align: center;
} }
.@{prefixCalendarClass}-decade-panel-decade { .@{calendar-prefix-cls}-decade-panel-decade {
display: inline-block; display: inline-block;
margin: 0 auto; margin: 0 auto;
color: #666; color: #666;
@ -36,7 +36,7 @@
text-align: center; text-align: center;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
padding: 0px 6px; padding: 0 6px;
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
@ -45,7 +45,7 @@
} }
} }
.@{prefixCalendarClass}-decade-panel-selected-cell .@{prefixCalendarClass}-decade-panel-decade { .@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
background: @primary-color; background: @primary-color;
color: #fff; color: #fff;
@ -55,19 +55,19 @@
} }
} }
.@{prefixCalendarClass}-decade-panel-last-century-cell, .@{prefixCalendarClass}-decade-panel-next-century-cell { .@{calendar-prefix-cls}-decade-panel-last-century-cell, .@{calendar-prefix-cls}-decade-panel-next-century-cell {
.@{prefixCalendarClass}-decade-panel-decade{ .@{calendar-prefix-cls}-decade-panel-decade{
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
} }
.@{prefixCalendarClass}-decade-panel-decade:before { .@{calendar-prefix-cls}-decade-panel-decade:before {
content: "\e611"; content: "\e611";
font-family: "anticon" !important; font-family: "anticon" !important;
} }
} }
.@{prefixCalendarClass}-decade-panel-last-century-cell { .@{calendar-prefix-cls}-decade-panel-last-century-cell {
.@{prefixCalendarClass}-decade-panel-decade { .@{calendar-prefix-cls}-decade-panel-decade {
transform: rotate(180deg); transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
} }

26
style/components/datepicker/MonthPanel.less
View File

@ -1,34 +1,34 @@
.@{prefixCalendarClass}-month-panel { .@{calendar-prefix-cls}-month-panel {
left: 0px; left: 0;
top: 0px; top: 0;
bottom: 0px; bottom: 0;
right: 0px; right: 0;
background: #fff; background: #fff;
z-index: 10; z-index: 10;
position: absolute; position: absolute;
outline: none; outline: none;
} }
.@{prefixCalendarClass}-month-panel-hidden { .@{calendar-prefix-cls}-month-panel-hidden {
display: none; display: none;
} }
.@{prefixCalendarClass}-month-panel-header { .@{calendar-prefix-cls}-month-panel-header {
.calendarPanelHeader(~"@{prefixCalendarClass}-month-panel"); .calendarPanelHeader(~"@{calendar-prefix-cls}-month-panel");
} }
.@{prefixCalendarClass}-month-panel-table { .@{calendar-prefix-cls}-month-panel-table {
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
height: 248px; height: 248px;
border-collapse: separate; border-collapse: separate;
} }
.@{prefixCalendarClass}-month-panel-cell { .@{calendar-prefix-cls}-month-panel-cell {
text-align: center; text-align: center;
} }
.@{prefixCalendarClass}-month-panel-month { .@{calendar-prefix-cls}-month-panel-month {
display: inline-block; display: inline-block;
margin: 0 auto; margin: 0 auto;
color: #666; color: #666;
@ -36,7 +36,7 @@
text-align: center; text-align: center;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
padding: 0px 6px; padding: 0 6px;
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
@ -45,7 +45,7 @@
} }
} }
.@{prefixCalendarClass}-month-panel-selected-cell .@{prefixCalendarClass}-month-panel-month { .@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
background: @primary-color; background: @primary-color;
color: #fff; color: #fff;

10
style/components/datepicker/Picker.less
View File

@ -1,5 +1,5 @@
.@{prefixCalendarClass}-picker .@{prefixCalendarClass}, .@{calendar-prefix-cls}-picker .@{calendar-prefix-cls},
.@{prefixCalendarClass}-picker-container .@{prefixCalendarClass} { .@{calendar-prefix-cls}-picker-container .@{calendar-prefix-cls} {
position: absolute; position: absolute;
display: none; display: none;
left: -9999px; left: -9999px;
@ -7,7 +7,7 @@
z-index: 9; z-index: 9;
} }
.@{prefixCalendarClass}-picker { .@{calendar-prefix-cls}-picker {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -37,8 +37,8 @@
vertical-align: bottom; vertical-align: bottom;
} }
} }
&-open .@{prefixCalendarClass}, &-open .@{calendar-prefix-cls},
&-container-open .@{prefixCalendarClass} { &-container-open .@{calendar-prefix-cls} {
display: block; display: block;
} }
&-open &-input { &-open &-input {

6
style/components/datepicker/Time.less
View File

@ -1,16 +1,16 @@
@import "../../mixins/input"; @import "../../mixins/input";
.@{prefixCalendarClass}-time { .@{calendar-prefix-cls}-time {
> span { > span {
margin: 0 2px; margin: 0 2px;
} }
~ .@{prefixCalendarClass}-footer-btn { ~ .@{calendar-prefix-cls}-footer-btn {
display: inline; display: inline;
text-align: left; text-align: left;
} }
} }
.@{prefixCalendarClass}-time-input { .@{calendar-prefix-cls}-time-input {
.input; .input;
margin: 0; margin: 0;
width: 30px; width: 30px;

24
style/components/datepicker/TimePanel.less
View File

@ -1,15 +1,15 @@
.@{prefixCalendarClass}-time-panel { .@{calendar-prefix-cls}-time-panel {
left: 0px; left: 0;
top: 0px; top: 0;
bottom: 0px; bottom: 0;
right: 0px; right: 0;
background: #fff; background: #fff;
z-index: 10; z-index: 10;
position: absolute; position: absolute;
outline: none; outline: none;
} }
.@{prefixCalendarClass}-time-panel-header { .@{calendar-prefix-cls}-time-panel-header {
padding: 0 10px; padding: 0 10px;
height: 34px; height: 34px;
line-height: 34px; line-height: 34px;
@ -20,11 +20,11 @@
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9;
} }
.@{prefixCalendarClass}-time-panel-body { .@{calendar-prefix-cls}-time-panel-body {
padding: 2px 10px; padding: 2px 10px;
} }
.@{prefixCalendarClass}-time-panel-title { .@{calendar-prefix-cls}-time-panel-title {
width: 180px; width: 180px;
font-weight: bold; font-weight: bold;
display: inline-block; display: inline-block;
@ -35,19 +35,19 @@
border-radius: 4px; border-radius: 4px;
} }
.@{prefixCalendarClass}-time-panel-table { .@{calendar-prefix-cls}-time-panel-table {
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
} }
.@{prefixCalendarClass}-time-panel-cell { .@{calendar-prefix-cls}-time-panel-cell {
text-align: center; text-align: center;
height: 40px; height: 40px;
vertical-align: middle; vertical-align: middle;
} }
.@{prefixCalendarClass}-time-panel-time { .@{calendar-prefix-cls}-time-panel-time {
line-height: 24px; line-height: 24px;
display: block; display: block;
border-radius: 4px; border-radius: 4px;
@ -60,7 +60,7 @@
} }
} }
.@{prefixCalendarClass}-time-panel-selected-cell .@{prefixCalendarClass}-time-panel-time { .@{calendar-prefix-cls}-time-panel-selected-cell .@{calendar-prefix-cls}-time-panel-time {
background: @primary-color; background: @primary-color;
color: #fff; color: #fff;

36
style/components/datepicker/YearPanel.less
View File

@ -1,34 +1,34 @@
.@{prefixCalendarClass}-year-panel { .@{calendar-prefix-cls}-year-panel {
left: 0px; left: 0;
top: 0px; top: 0;
bottom: 0px; bottom: 0;
right: 0px; right: 0;
background: #fff; background: #fff;
z-index: 10; z-index: 10;
position: absolute; position: absolute;
outline: none; outline: none;
} }
.@{prefixCalendarClass}-year-panel-hidden { .@{calendar-prefix-cls}-year-panel-hidden {
display: none; display: none;
} }
.@{prefixCalendarClass}-year-panel-header { .@{calendar-prefix-cls}-year-panel-header {
.calendarPanelHeader(~"@{prefixCalendarClass}-year-panel"); .calendarPanelHeader(~"@{calendar-prefix-cls}-year-panel");
} }
.@{prefixCalendarClass}-year-panel-table { .@{calendar-prefix-cls}-year-panel-table {
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
height: 248px; height: 248px;
border-collapse: separate; border-collapse: separate;
} }
.@{prefixCalendarClass}-year-panel-cell { .@{calendar-prefix-cls}-year-panel-cell {
text-align: center; text-align: center;
} }
.@{prefixCalendarClass}-year-panel-year { .@{calendar-prefix-cls}-year-panel-year {
display: inline-block; display: inline-block;
margin: 0 auto; margin: 0 auto;
color: #666; color: #666;
@ -36,7 +36,7 @@
text-align: center; text-align: center;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
padding: 0px 6px; padding: 0 6px;
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
@ -45,7 +45,7 @@
} }
} }
.@{prefixCalendarClass}-year-panel-selected-cell .@{prefixCalendarClass}-year-panel-year { .@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
background: @primary-color; background: @primary-color;
color: #fff; color: #fff;
@ -55,19 +55,19 @@
} }
} }
.@{prefixCalendarClass}-year-panel-last-decade-cell, .@{prefixCalendarClass}-year-panel-next-decade-cell { .@{calendar-prefix-cls}-year-panel-last-decade-cell, .@{calendar-prefix-cls}-year-panel-next-decade-cell {
.@{prefixCalendarClass}-year-panel-year{ .@{calendar-prefix-cls}-year-panel-year{
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
} }
.@{prefixCalendarClass}-year-panel-year:before { .@{calendar-prefix-cls}-year-panel-year:before {
content: "\e611"; content: "\e611";
font-family: "anticon" !important; font-family: "anticon" !important;
} }
} }
.@{prefixCalendarClass}-year-panel-last-decade-cell { .@{calendar-prefix-cls}-year-panel-last-decade-cell {
.@{prefixCalendarClass}-year-panel-year { .@{calendar-prefix-cls}-year-panel-year {
transform: rotate(180deg); transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
} }

4
style/components/dialog.less
View File

@ -1,9 +1,9 @@
@dialogPrefixCls: ant-modal; @dialog-prefix-cls: ant-modal;
@import "./dialog/Dialog.less"; @import "./dialog/Dialog.less";
@import "./dialog/Mask.less"; @import "./dialog/Mask.less";
.@{dialogPrefixCls} { .@{dialog-prefix-cls} {
&-header { &-header {
padding: 13px 18px 14px 16px; padding: 13px 18px 14px 16px;
} }

4
style/components/dialog/Dialog.less
View File

@ -1,4 +1,4 @@
.@{dialogPrefixCls} { .@{dialog-prefix-cls} {
outline: none; outline: none;
position: absolute; position: absolute;
left: -9999px; left: -9999px;
@ -23,7 +23,7 @@
&-content { &-content {
position: relative; position: relative;
background-color: #ffffff; background-color: #fff;
border: none; border: none;
border-radius: 6px 6px; border-radius: 6px 6px;
background-clip: padding-box; background-clip: padding-box;

26
style/components/dialog/Mask.less
View File

@ -1,4 +1,4 @@
.@{dialogPrefixCls} { .@{dialog-prefix-cls} {
&-wrap-hidden > &-mask { &-wrap-hidden > &-mask {
display: none; display: none;
@ -10,7 +10,7 @@
right: 0; right: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
background-color: rgb(55, 55, 55); background-color: #373737;
background-color: rgba(55, 55, 55, 0.6); background-color: rgba(55, 55, 55, 0.6);
height: 100%; height: 100%;
z-index: 1000; z-index: 1000;
@ -40,30 +40,12 @@
} }
&-fade-enter&-fade-enter-active { &-fade-enter&-fade-enter-active {
animation-name: rcDialogFadeIn; animation-name: fadeIn;
animation-play-state: running; animation-play-state: running;
} }
&-fade-leave&-fade-leave-active { &-fade-leave&-fade-leave-active {
animation-name: rcDialogFadeOut; animation-name: fadeOut;
animation-play-state: running; animation-play-state: running;
} }
@keyframes rcDialogFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes rcDialogFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
} }

6
style/components/dropdown.less
View File

@ -1,6 +1,6 @@
@dropdownPrefixCls: ant-dropdown; @dropdown-prefix-cls: ant-dropdown;
.@{dropdownPrefixCls} { .@{dropdown-prefix-cls} {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
top: -9999px; top: -9999px;
@ -96,7 +96,7 @@
} }
} }
.@{dropdownPrefixCls}-link { .@{dropdown-prefix-cls}-link {
.anticon-down { .anticon-down {
.iconfont-size-under-12px(7px); .iconfont-size-under-12px(7px);
font-weight: bold; font-weight: bold;

25
style/components/form.less
View File

@ -1,5 +1,4 @@
@import "../mixins/index"; @import "../mixins/index";
@btnClass: ~"@{css-prefix}btn";
.reset-form(); .reset-form();
@ -130,7 +129,7 @@ form {
// Input combined with select // Input combined with select
.@{css-prefix}input-group { .@{css-prefix}input-group {
.@{selectPrefixCls}-selection { .@{select-prefix-cls}-selection {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
&:hover { &:hover {
@ -138,18 +137,18 @@ form {
} }
} }
.@{selectPrefixCls}-selection--single { .@{select-prefix-cls}-selection--single {
margin-left: -1px; margin-left: -1px;
height: @input-height-lg; height: @input-height-lg;
background-color: #eee; background-color: #eee;
.@{selectPrefixCls}-selection__rendered { .@{select-prefix-cls}-selection__rendered {
padding-left: 8px; padding-left: 8px;
padding-right: 25px; padding-right: 25px;
line-height: 30px; line-height: 30px;
} }
} }
.@{selectPrefixCls}-open .@{selectPrefixCls}-selection { .@{select-prefix-cls}-open .@{select-prefix-cls}-selection {
border-color: #d9d9d9; border-color: #d9d9d9;
box-shadow: none; box-shadow: none;
} }
@ -186,12 +185,12 @@ form {
} }
} }
.@{inputNumberPrefixCls} { .@{input-number-prefix-cls} {
margin-top: -1px; margin-top: -1px;
margin-right: 8px; margin-right: 8px;
} }
.@{prefixCalendarClass}-picker { .@{calendar-prefix-cls}-picker {
width: 100%; width: 100%;
} }
} }
@ -231,6 +230,10 @@ form {
vertical-align: middle; vertical-align: middle;
} }
.@{calendar-prefix-cls}-picker-input {
width: 100%!important;
}
.@{css-prefix}form-text { .@{css-prefix}form-text {
display: inline-block; display: inline-block;
} }
@ -298,7 +301,7 @@ form {
} }
// ant-select // ant-select
.@{selectPrefixCls} { .@{select-prefix-cls} {
&-selection { &-selection {
border-color: @warning-color; border-color: @warning-color;
box-shadow: 0 0 0 2px tint(@warning-color, 80%); box-shadow: 0 0 0 2px tint(@warning-color, 80%);
@ -309,7 +312,7 @@ form {
} }
// ant-datepicker // ant-datepicker
.@{prefixCalendarClass}-picker-icon:after { .@{calendar-prefix-cls}-picker-icon:after {
color: @warning-color; color: @warning-color;
} }
} }
@ -323,7 +326,7 @@ form {
} }
// ant-select // ant-select
.@{selectPrefixCls} { .@{select-prefix-cls} {
&-selection { &-selection {
border-color: @error-color; border-color: @error-color;
box-shadow: 0 0 0 2px tint(@error-color, 80%); box-shadow: 0 0 0 2px tint(@error-color, 80%);
@ -335,7 +338,7 @@ form {
} }
// ant-datepicker // ant-datepicker
.@{prefixCalendarClass}-picker-icon:after { .@{calendar-prefix-cls}-picker-icon:after {
color: @error-color; color: @error-color;
} }
} }

16
style/components/inputNumber.less
View File

@ -1,9 +1,9 @@
@inputNumberPrefixCls: ant-input-number; @input-number-prefix-cls: ant-input-number;
@import "../mixins/iconfont"; @import "../mixins/iconfont";
@import "../mixins/input"; @import "../mixins/input";
.@{inputNumberPrefixCls} { .@{input-number-prefix-cls} {
.input(); .input();
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -66,7 +66,7 @@
line-height: 28px; line-height: 28px;
height: 28px; height: 28px;
transition: all 0.3s ease; transition: all 0.3s ease;
color: #666666; color: #666;
border: 0; border: 0;
border-radius: @border-radius-base; border-radius: @border-radius-base;
padding: 0 7px; padding: 0 7px;
@ -75,7 +75,7 @@
.disabled(); .disabled();
} }
} }
&-lg { &-lg {
padding: 0; padding: 0;
.ant-input-number-handler-wrap { .ant-input-number-handler-wrap {
@ -174,19 +174,19 @@
} }
&-handler-down-disabled, &-handler-up-disabled, &-disabled { &-handler-down-disabled, &-handler-up-disabled, &-disabled {
.@{inputNumberPrefixCls}-handler-down-inner, .@{input-number-prefix-cls}-handler-down-inner,
.@{inputNumberPrefixCls}-handler-up-inner { .@{input-number-prefix-cls}-handler-up-inner {
.handler-disabled(); .handler-disabled();
} }
} }
&-disabled { &-disabled {
.@{inputNumberPrefixCls}-input { .@{input-number-prefix-cls}-input {
opacity: 0.72; opacity: 0.72;
cursor: not-allowed; cursor: not-allowed;
background-color: #f3f3f3; background-color: #f3f3f3;
} }
.@{inputNumberPrefixCls}-handler { .@{input-number-prefix-cls}-handler {
.handler-disabled(); .handler-disabled();
} }
} }

40
style/components/menu.less
View File

@ -1,6 +1,6 @@
@menuPrefixCls: ~"@{css-prefix}menu"; @menu-prefix-cls: ~"@{css-prefix}menu";
.@{menuPrefixCls} { .@{menu-prefix-cls} {
outline: none; outline: none;
margin-bottom: 0; margin-bottom: 0;
padding-left: 0; // Override default ul/ol padding-left: 0; // Override default ul/ol
@ -52,7 +52,7 @@
transition: all 0.3s ease; transition: all 0.3s ease;
} }
&-submenu-horizontal > .@{menuPrefixCls} { &-submenu-horizontal > .@{menu-prefix-cls} {
top: 100%; top: 100%;
left: 0; left: 0;
position: absolute; position: absolute;
@ -60,7 +60,7 @@
margin-top: 7px; margin-top: 7px;
} }
&-submenu-vertical > .@{menuPrefixCls} { &-submenu-vertical > .@{menu-prefix-cls} {
top: 0; top: 0;
left: 100%; left: 100%;
position: absolute; position: absolute;
@ -75,7 +75,7 @@
white-space: nowrap; white-space: nowrap;
// Disabled state sets text to gray and nukes hover/tab effects // Disabled state sets text to gray and nukes hover/tab effects
&.@{menuPrefixCls}-item-disabled, &.@{menuPrefixCls}-submenu-disabled { &.@{menu-prefix-cls}-item-disabled, &.@{menu-prefix-cls}-submenu-disabled {
color: #999 !important; color: #999 !important;
} }
} }
@ -91,12 +91,12 @@
&-submenu { &-submenu {
position: relative; position: relative;
> .@{menuPrefixCls} { > .@{menu-prefix-cls} {
display: none; display: none;
background-color: #fff; background-color: #fff;
} }
&-vertical > .@{menuPrefixCls}-submenu-title:after { &-vertical > .@{menu-prefix-cls}-submenu-title:after {
font-family: "anticon" !important; font-family: "anticon" !important;
font-style: normal; font-style: normal;
vertical-align: baseline; vertical-align: baseline;
@ -111,7 +111,7 @@
transform: rotate(270deg) scale(0.75); transform: rotate(270deg) scale(0.75);
} }
&-inline > .@{menuPrefixCls}-submenu-title:after { &-inline > .@{menu-prefix-cls}-submenu-title:after {
font-family: "anticon" !important; font-family: "anticon" !important;
font-style: normal; font-style: normal;
vertical-align: baseline; vertical-align: baseline;
@ -127,17 +127,17 @@
} }
&-open { &-open {
> .@{menuPrefixCls} { > .@{menu-prefix-cls} {
display: block; display: block;
} }
&.@{menuPrefixCls}-submenu-inline > .@{menuPrefixCls}-submenu-title:after { &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title:after {
.ie-rotate(1); .ie-rotate(1);
transform: rotate(180deg) scale(0.75); transform: rotate(180deg) scale(0.75);
} }
} }
} }
.@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item { .@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-item {
.anticon { .anticon {
width: 14px; width: 14px;
margin-right: 8px; margin-right: 8px;
@ -155,8 +155,8 @@
padding-left: 24px; padding-left: 24px;
z-index: 0; z-index: 0;
& > .@{menuPrefixCls}-item, & > .@{menu-prefix-cls}-item,
& > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title { & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
padding: 0 20px; padding: 0 20px;
line-height: 50px; line-height: 50px;
position: relative; position: relative;
@ -180,7 +180,7 @@
} }
} }
& > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item { & > .@{menu-prefix-cls}-submenu, & > .@{menu-prefix-cls}-item {
float: left; float: left;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
margin-right: 24px; margin-right: 24px;
@ -206,7 +206,7 @@
&-vertical, &-inline { &-vertical, &-inline {
padding: 12px 0; padding: 12px 0;
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title { & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
padding: 0 24px; padding: 0 24px;
font-size: 12px; font-size: 12px;
line-height: 42px; line-height: 42px;
@ -215,11 +215,11 @@
} }
&-vertical, &-horizontal { &-vertical, &-horizontal {
.@{menuPrefixCls}-submenu { .@{menu-prefix-cls}-submenu {
.@{menuPrefixCls}-item:first-child { .@{menu-prefix-cls}-item:first-child {
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
} }
.@{menuPrefixCls}-item:last-child { .@{menu-prefix-cls}-item:last-child {
border-radius: 0 0 @border-radius-base @border-radius-base; border-radius: 0 0 @border-radius-base @border-radius-base;
} }
&:first-child { &:first-child {
@ -247,7 +247,7 @@
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title { & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
line-height: 34px; line-height: 34px;
height: 34px; height: 34px;
list-style-type: disc; list-style-type: disc;
@ -256,7 +256,7 @@
} }
} }
.@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item { .@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-item {
.anticon { .anticon {
width: 14px; width: 14px;
margin-right: 8px; margin-right: 8px;

4
style/components/message.less
View File

@ -1,6 +1,6 @@
@prefixMessageClass: ant-message; @message-prefix-cls: ant-message;
.@{prefixMessageClass} { .@{message-prefix-cls} {
font-size: 12px; font-size: 12px;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;

24
style/components/notification.less
View File

@ -1,25 +1,25 @@
@import "../mixins/index"; @import "../mixins/index";
@notificationPrefixCls: ~"@{css-prefix}notification"; @notification-prefix-cls: ~"@{css-prefix}notification";
@noticeWidth: 335px; @notice-width: 335px;
@noticePadding: 16px; @notice-padding: 16px;
@noticeMarginBottom: 10px; @notice-margin-bottom: 10px;
.@{notificationPrefixCls} { .@{notification-prefix-cls} {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
width: @noticeWidth; width: @notice-width;
margin-right: 24px; margin-right: 24px;
&-notice { &-notice {
padding: @noticePadding; padding: @notice-padding;
border-radius: @border-radius-base; border-radius: @border-radius-base;
box-shadow: 0 0 4px @legend-border-color; box-shadow: 0 0 4px @legend-border-color;
background: @body-background; background: @body-background;
line-height: 1.5; line-height: 1.5;
position: relative; position: relative;
margin-bottom: @noticeMarginBottom; margin-bottom: @notice-margin-bottom;
overflow: hidden; overflow: hidden;
&-content { &-content {
@ -120,7 +120,7 @@
@keyframes NotificationFadeIn { @keyframes NotificationFadeIn {
0% { 0% {
opacity: 0; opacity: 0;
left: @noticeWidth; left: @notice-width;
} }
100% { 100% {
left: 0; left: 0;
@ -131,9 +131,9 @@
@keyframes NotificationFadeOut { @keyframes NotificationFadeOut {
0% { 0% {
opacity: 1; opacity: 1;
margin-bottom: @noticeMarginBottom; margin-bottom: @notice-margin-bottom;
padding-top: @noticePadding; padding-top: @notice-padding;
padding-bottom: @noticePadding; padding-bottom: @notice-padding;
max-height: 150px; max-height: 150px;
} }
100% { 100% {

6
style/components/pagination.less
View File

@ -1,6 +1,6 @@
@paginationPrefixClass: ant-pagination; @pagination-prefix-cls: ant-pagination;
.@{paginationPrefixClass} { .@{pagination-prefix-cls} {
user-select: none; user-select: none;
font-size: @font-size-base; font-size: @font-size-base;
@ -226,7 +226,7 @@
} }
} }
.@{paginationPrefixClass} { .@{pagination-prefix-cls} {
&.mini &-item { &.mini &-item {
border: none; border: none;

6
style/components/popover.less
View File

@ -1,5 +1,5 @@
@import "../mixins/index"; @import "../mixins/index";
@popoverPrefixClass: ~"@{css-prefix}popover"; @popover-prefix-cls: ~"@{css-prefix}popover";
// //
// Popovers // Popovers
@ -20,7 +20,7 @@
//** Popover arrow width //** Popover arrow width
@popover-arrow-width: 4px; @popover-arrow-width: 4px;
//** Popover distance with trigger //** Popover distance with trigger
@popover-distance: @popover-arrow-width+4; @popover-distance: @popover-arrow-width + 4;
//** Popover arrow color //** Popover arrow color
@popover-arrow-color: @popover-bg; @popover-arrow-color: @popover-bg;
@ -29,7 +29,7 @@
//** Popover outer arrow color //** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 5%); @popover-arrow-outer-color: fadein(@popover-border-color, 5%);
.@{popoverPrefixClass} { .@{popover-prefix-cls} {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

30
style/components/progress.less
View File

@ -1,6 +1,6 @@
@prefixProgressClass: ant-progress; @progress-prefix-cls: ant-progress;
.@{prefixProgressClass} { .@{progress-prefix-cls} {
&-line-wrap, &-line-wrap,
&-circle-wrap { &-circle-wrap {
display: inline-block; display: inline-block;
@ -14,7 +14,7 @@
margin-right: 45px; margin-right: 45px;
} }
&-line-wrap-full { &-line-wrap-full {
.@{prefixProgressClass}-line-outer { .@{progress-prefix-cls}-line-outer {
margin-right: 0; margin-right: 0;
} }
} }
@ -43,32 +43,32 @@
} }
} }
&-line-wrap.status-active { &-line-wrap.status-active {
.@{prefixProgressClass}-line-bg:before { .@{progress-prefix-cls}-line-bg:before {
content: ""; content: "";
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 0px; top: 0;
left: 0px; left: 0;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
background: #fff; background: #fff;
border-radius: 10px; border-radius: 10px;
animation: progress-active 2s ease infinite; animation: progress-active 2s ease infinite;
} }
} }
&-line-wrap.status-exception { &-line-wrap.status-exception {
.@{prefixProgressClass}-line-bg { .@{progress-prefix-cls}-line-bg {
background-color: @error-color; background-color: @error-color;
} }
.@{prefixProgressClass}-line-text { .@{progress-prefix-cls}-line-text {
color: @error-color; color: @error-color;
} }
} }
&-line-wrap.status-success { &-line-wrap.status-success {
.@{prefixProgressClass}-line-bg { .@{progress-prefix-cls}-line-bg {
background-color: @success-color; background-color: @success-color;
} }
.@{prefixProgressClass}-line-text { .@{progress-prefix-cls}-line-text {
color: @success-color; color: @success-color;
} }
} }
@ -88,16 +88,16 @@
left: 0; left: 0;
.anticon { .anticon {
font-size: 14/12em; font-size: 14 / 12em;
} }
} }
&-circle-wrap.status-exception { &-circle-wrap.status-exception {
.@{prefixProgressClass}-circle-text { .@{progress-prefix-cls}-circle-text {
color: @error-color; color: @error-color;
} }
} }
&-circle-wrap.status-success { &-circle-wrap.status-success {
.@{prefixProgressClass}-circle-text { .@{progress-prefix-cls}-circle-text {
color: @success-color; color: @success-color;
} }
} }

40
style/components/radio.less
View File

@ -1,16 +1,16 @@
@radioGroupPrefixCls: ant-radio-group; @radio-group-prefix-cls: ant-radio-group;
@radioWrapPrefixCls: ant-radio; @radio-wrap-prefix-cls: ant-radio;
@radioInnerPrefixCls: ~"@{radioWrapPrefixCls}-inner"; @radio-inner-prefix-cls: ~"@{radio-wrap-prefix-cls}-inner";
@radioDuration: .3s; @radio-duration: .3s;
.@{radioGroupPrefixCls} { .@{radio-group-prefix-cls} {
label { label {
margin-right: 16px; margin-right: 16px;
} }
} }
/* 一般状态 */ // 一般状态
.@{radioWrapPrefixCls} { .@{radio-wrap-prefix-cls} {
white-space: nowrap; white-space: nowrap;
outline: none; outline: none;
display: inline-block; display: inline-block;
@ -18,7 +18,7 @@
line-height: 1; line-height: 1;
vertical-align: middle; vertical-align: middle;
&:hover { &:hover {
.@{radioInnerPrefixCls} { .@{radio-inner-prefix-cls} {
border-color: #bcbcbc; border-color: #bcbcbc;
} }
} }
@ -37,7 +37,7 @@
background-color: @primary-color; background-color: @primary-color;
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
transition: transform @radioDuration @ease-in-out-circ, opacity @radioDuration @ease-in-out-circ, background-color @radioDuration @ease-in-out-circ; transition: transform @radio-duration @ease-in-out-circ, opacity @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ;
} }
position: relative; position: relative;
@ -50,8 +50,8 @@
border-style: solid; border-style: solid;
border-radius: 14px; border-radius: 14px;
border-color: #d9d9d9; border-color: #d9d9d9;
background-color: #ffffff; background-color: #fff;
transition: border-color @radioDuration @ease-in-out-circ, background-color @radioDuration @ease-in-out-circ; transition: border-color @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ;
} }
&-input { &-input {
@ -66,26 +66,26 @@
} }
} }
/* 选中状态 */ // 选中状态
.@{radioWrapPrefixCls}-checked { .@{radio-wrap-prefix-cls}-checked {
.@{radioInnerPrefixCls} { .@{radio-inner-prefix-cls} {
border-color: #d9d9d9; border-color: #d9d9d9;
&:after { &:after {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
transition: transform @radioDuration @ease-out-back, opacity @radioDuration @ease-in-out-circ, background-color @radioDuration @ease-in-out-circ; transition: transform @radio-duration @ease-out-back, opacity @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ;
} }
} }
} }
.@{radioWrapPrefixCls}-disabled { .@{radio-wrap-prefix-cls}-disabled {
&:hover { &:hover {
.@{radioInnerPrefixCls} { .@{radio-inner-prefix-cls} {
border-color: #d9d9d9; border-color: #d9d9d9;
} }
} }
.@{radioInnerPrefixCls} { .@{radio-inner-prefix-cls} {
border-color: #d9d9d9; border-color: #d9d9d9;
background-color: #f3f3f3; background-color: #f3f3f3;
&:after { &:after {
@ -93,11 +93,11 @@
} }
} }
.@{radioInnerPrefixCls}-input { .@{radio-inner-prefix-cls}-input {
cursor: default; cursor: default;
} }
} }
.@{radioWrapPrefixCls} + span { .@{radio-wrap-prefix-cls} + span {
margin-left: 8px; margin-left: 8px;
} }

68
style/components/select.less
View File

@ -1,4 +1,4 @@
@selectPrefixCls: ant-select; @select-prefix-cls: ant-select;
@import "../mixins/iconfont"; @import "../mixins/iconfont";
//mixin //mixin
@ -24,7 +24,7 @@
} }
} }
.@{selectPrefixCls} { .@{select-prefix-cls} {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
@ -103,7 +103,7 @@
height: 28px; height: 28px;
cursor: pointer; cursor: pointer;
.@{selectPrefixCls}-selection__rendered { .@{select-prefix-cls}-selection__rendered {
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -112,11 +112,11 @@
line-height: 26px; line-height: 26px;
} }
.@{selectPrefixCls}-selection__clear { .@{select-prefix-cls}-selection__clear {
.selection__clear(); .selection__clear();
} }
.@{selectPrefixCls}-selection__placeholder { .@{select-prefix-cls}-selection__placeholder {
color: #ccc; color: #ccc;
} }
} }
@ -178,12 +178,12 @@
} }
} }
.@{selectPrefixCls}-search__field__wrap { .@{select-prefix-cls}-search__field__wrap {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.@{selectPrefixCls}-search__field__placeholder { .@{select-prefix-cls}-search__field__placeholder {
position: absolute; position: absolute;
top: 0; top: 0;
left: 3px; left: 3px;
@ -193,7 +193,7 @@
&-search--inline { &-search--inline {
float: left; float: left;
.@{selectPrefixCls}-search__field { .@{select-prefix-cls}-search__field {
border: none; border: none;
font-size: 100%; font-size: 100%;
background: transparent; background: transparent;
@ -208,21 +208,21 @@
min-height: 28px; min-height: 28px;
cursor: text; cursor: text;
.@{selectPrefixCls}-search--inline { .@{select-prefix-cls}-search--inline {
width: auto; width: auto;
.@{selectPrefixCls}-search__field { .@{select-prefix-cls}-search__field {
width: 0.75em; width: 0.75em;
} }
} }
.@{selectPrefixCls}-selection__rendered { .@{select-prefix-cls}-selection__rendered {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-left: 4px; padding-left: 4px;
padding-bottom: 4px; padding-bottom: 4px;
} }
.@{selectPrefixCls}-selection__clear { .@{select-prefix-cls}-selection__clear {
.selection__clear(); .selection__clear();
margin-top: 5px; margin-top: 5px;
margin-right: 10px; margin-right: 10px;
@ -234,7 +234,7 @@
line-height: 20px; line-height: 20px;
} }
.@{selectPrefixCls}-selection__choice { .@{select-prefix-cls}-selection__choice {
background-color: #f3f3f3; background-color: #f3f3f3;
border-radius: 4px; border-radius: 4px;
cursor: default; cursor: default;
@ -243,7 +243,7 @@
margin-right: 4px; margin-right: 4px;
} }
.@{selectPrefixCls}-selection__choice__remove { .@{select-prefix-cls}-selection__choice__remove {
.iconfont-mixin(); .iconfont-mixin();
color: #919191; color: #919191;
cursor: pointer; cursor: pointer;
@ -264,8 +264,8 @@
} }
} }
.@{selectPrefixCls}-selection--single + .@{selectPrefixCls}-dropdown { .@{select-prefix-cls}-selection--single + .@{select-prefix-cls}-dropdown {
.@{selectPrefixCls}-dropdown-menu-item-selected { .@{select-prefix-cls}-dropdown-menu-item-selected {
background-color: tint(@primary-color, 90%); background-color: tint(@primary-color, 90%);
position: relative; position: relative;
&:after { &:after {
@ -281,11 +281,11 @@
} }
} }
} }
.@{selectPrefixCls}-selection--multiple + .@{selectPrefixCls}-dropdown { .@{select-prefix-cls}-selection--multiple + .@{select-prefix-cls}-dropdown {
.@{selectPrefixCls}-dropdown-menu-item { .@{select-prefix-cls}-dropdown-menu-item {
padding: 7px 33px 7px 16px; padding: 7px 33px 7px 16px;
} }
.@{selectPrefixCls}-dropdown-menu-item-selected { .@{select-prefix-cls}-dropdown-menu-item-selected {
.selected_icon(); .selected_icon();
} }
} }
@ -321,7 +321,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
> li.@{selectPrefixCls}-dropdown-menu-item { > li.@{select-prefix-cls}-dropdown-menu-item {
padding-left: 24px; padding-left: 24px;
} }
} }
@ -337,7 +337,7 @@
display: block; display: block;
padding: 7px 16px; padding: 7px 16px;
font-weight: normal; font-weight: normal;
color: #666666; color: #666;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
@ -369,7 +369,7 @@
} }
&-dropdown-container-open, &-open { &-dropdown-container-open, &-open {
.@{selectPrefixCls}-dropdown { .@{select-prefix-cls}-dropdown {
display: block; display: block;
} }
} }
@ -377,13 +377,13 @@
&-search--dropdown { &-search--dropdown {
display: block; display: block;
padding: 4px; padding: 4px;
.@{selectPrefixCls}-search__field__placeholder { .@{select-prefix-cls}-search__field__placeholder {
left: 4px; left: 4px;
} }
.@{selectPrefixCls}-search__field__wrap { .@{select-prefix-cls}-search__field__wrap {
width: 100%; width: 100%;
} }
.@{selectPrefixCls}-search__field { .@{select-prefix-cls}-search__field {
padding: 4px; padding: 4px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -391,46 +391,46 @@
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
} }
&.@{selectPrefixCls}-search--hide { &.@{select-prefix-cls}-search--hide {
display: none; display: none;
} }
} }
&-open { &-open {
.@{selectPrefixCls}-arrow { .@{select-prefix-cls}-arrow {
.ie-rotate(3); .ie-rotate(3);
&:before { &:before {
.rotate(270deg); .rotate(270deg);
} }
} }
.@{selectPrefixCls}-selection { .@{select-prefix-cls}-selection {
.active(); .active();
} }
} }
&-combobox { &-combobox {
.@{selectPrefixCls}-arrow { .@{select-prefix-cls}-arrow {
display: none; display: none;
} }
.@{selectPrefixCls}-search--inline { .@{select-prefix-cls}-search--inline {
height: 100%; height: 100%;
float: none; float: none;
} }
.@{selectPrefixCls}-search__field__placeholder { .@{select-prefix-cls}-search__field__placeholder {
left: 10px; left: 10px;
cursor: text; cursor: text;
} }
.@{selectPrefixCls}-search__field__wrap { .@{select-prefix-cls}-search__field__wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.@{selectPrefixCls}-search__field { .@{select-prefix-cls}-search__field {
padding: 0 10px; padding: 0 10px;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.@{selectPrefixCls}-selection__rendered { .@{select-prefix-cls}-selection__rendered {
padding: 0; padding: 0;
height: 100%; height: 100%;
} }

14
style/components/slider.less
View File

@ -1,4 +1,4 @@
@sliderClass: ~"@{css-prefix}slider"; @slider-prefix-cls: ~"@{css-prefix}slider";
// slider color // slider color
@slider-disabled-color: #ccc; @slider-disabled-color: #ccc;
@ -6,10 +6,10 @@
@slider-tooltip-color: #fff; @slider-tooltip-color: #fff;
@slider-tooltip-bg: tint(#666, 4%); @slider-tooltip-bg: tint(#666, 4%);
@slider-tooltip-arrow-width: 4px; @slider-tooltip-arrow-width: 4px;
@slider-tooltip-distance: @slider-tooltip-arrow-width+4; @slider-tooltip-distance: @slider-tooltip-arrow-width + 4;
@slider-tooltip-arrow-color: @slider-tooltip-bg; @slider-tooltip-arrow-color: @slider-tooltip-bg;
.@{sliderClass} { .@{slider-prefix-cls} {
position: relative; position: relative;
margin: 12px 0; margin: 12px 0;
margin-left: 7px; margin-left: 7px;
@ -69,7 +69,7 @@
&-mark { &-mark {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 0px; left: 0;
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
z-index: 3; z-index: 3;
@ -121,17 +121,17 @@
&-disabled { &-disabled {
background-color: #e9e9e9 !important; background-color: #e9e9e9 !important;
.@{sliderClass}-track { .@{slider-prefix-cls}-track {
background-color: @slider-disabled-color !important; background-color: @slider-disabled-color !important;
} }
.@{sliderClass}-handle { .@{slider-prefix-cls}-handle {
border-color: @slider-disabled-color; border-color: @slider-disabled-color;
background-color: #fff; background-color: #fff;
cursor: not-allowed; cursor: not-allowed;
} }
.@{sliderClass}-mark-text, .dot { .@{slider-prefix-cls}-mark-text, .dot {
cursor: not-allowed!important; cursor: not-allowed!important;
} }
} }

88
style/components/steps.less
View File

@ -1,5 +1,5 @@
@import "../mixins/index"; @import "../mixins/index";
@stepsPrefixClass: ~"@{css-prefix}steps"; @steps-prefix-cls: ~"@{css-prefix}steps";
@process-icon-color: @primary-color; @process-icon-color: @primary-color;
@process-title-color: #666; @process-title-color: #666;
@ -20,102 +20,102 @@
-moz-transition: @transition; -moz-transition: @transition;
} }
.@{stepsPrefixClass} { .@{steps-prefix-cls} {
font-size: 0; font-size: 0;
width: 100%; width: 100%;
line-height: 1.5; line-height: 1.5;
.@{stepsPrefixClass}-item { .@{steps-prefix-cls}-item {
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
&.@{stepsPrefixClass}-status-wait { &.@{steps-prefix-cls}-status-wait {
.@{stepsPrefixClass}-head-inner { .@{steps-prefix-cls}-head-inner {
border-color: @wait-icon-color; border-color: @wait-icon-color;
background-color: #fff; background-color: #fff;
> .@{stepsPrefixClass}-icon { > .@{steps-prefix-cls}-icon {
color: @wait-icon-color; color: @wait-icon-color;
} }
} }
.@{stepsPrefixClass}-title { .@{steps-prefix-cls}-title {
color: @wait-title-color; color: @wait-title-color;
} }
.@{stepsPrefixClass}-description { .@{steps-prefix-cls}-description {
color: @wait-description-color; color: @wait-description-color;
} }
.@{stepsPrefixClass}-tail > i { .@{steps-prefix-cls}-tail > i {
background-color: @wait-tail-color; background-color: @wait-tail-color;
} }
} }
&.@{stepsPrefixClass}-status-process { &.@{steps-prefix-cls}-status-process {
.@{stepsPrefixClass}-head-inner { .@{steps-prefix-cls}-head-inner {
border-color: @process-icon-color; border-color: @process-icon-color;
background-color: @process-icon-color; background-color: @process-icon-color;
> .@{stepsPrefixClass}-icon { > .@{steps-prefix-cls}-icon {
color: #fff; color: #fff;
} }
} }
.@{stepsPrefixClass}-title { .@{steps-prefix-cls}-title {
color: @process-title-color; color: @process-title-color;
} }
.@{stepsPrefixClass}-description { .@{steps-prefix-cls}-description {
color: @process-description-color; color: @process-description-color;
} }
.@{stepsPrefixClass}-tail > i { .@{steps-prefix-cls}-tail > i {
background-color: @process-tail-color; background-color: @process-tail-color;
} }
} }
&.@{stepsPrefixClass}-status-finish { &.@{steps-prefix-cls}-status-finish {
.@{stepsPrefixClass}-head-inner { .@{steps-prefix-cls}-head-inner {
border-color: @finish-icon-color; border-color: @finish-icon-color;
background-color: #fff; background-color: #fff;
> .@{stepsPrefixClass}-icon { > .@{steps-prefix-cls}-icon {
color: @finish-icon-color; color: @finish-icon-color;
} }
} }
.@{stepsPrefixClass}-tail > i { .@{steps-prefix-cls}-tail > i {
background-color: @finish-tail-color; background-color: @finish-tail-color;
} }
.@{stepsPrefixClass}-title { .@{steps-prefix-cls}-title {
color: @finish-title-color; color: @finish-title-color;
} }
.@{stepsPrefixClass}-description { .@{steps-prefix-cls}-description {
color: @finish-description-color; color: @finish-description-color;
} }
} }
&.@{stepsPrefixClass}-custom { &.@{steps-prefix-cls}-custom {
.@{stepsPrefixClass}-head-inner { .@{steps-prefix-cls}-head-inner {
background: none; background: none;
border: 0; border: 0;
width: auto; width: auto;
height: auto; height: auto;
> .@{stepsPrefixClass}-icon { > .@{steps-prefix-cls}-icon {
font-size: 20px; font-size: 20px;
top: 2px; top: 2px;
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
} }
&.@{stepsPrefixClass}-status-process { &.@{steps-prefix-cls}-status-process {
.@{stepsPrefixClass}-head-inner > .@{stepsPrefixClass}-icon { .@{steps-prefix-cls}-head-inner > .@{steps-prefix-cls}-icon {
color: @process-icon-color; color: @process-icon-color;
} }
} }
} }
} }
.@{stepsPrefixClass}-head, .@{stepsPrefixClass}-main { .@{steps-prefix-cls}-head, .@{steps-prefix-cls}-main {
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.@{stepsPrefixClass}-head { .@{steps-prefix-cls}-head {
background: #fff; background: #fff;
} }
.@{stepsPrefixClass}-head-inner { .@{steps-prefix-cls}-head-inner {
display: block; display: block;
border:1px solid @wait-icon-color; border:1px solid @wait-icon-color;
width: 26px; width: 26px;
@ -128,7 +128,7 @@
.transition(background-color 0.3s ease); .transition(background-color 0.3s ease);
.transition(border-color 0.3s ease); .transition(border-color 0.3s ease);
> .@{stepsPrefixClass}-icon { > .@{steps-prefix-cls}-icon {
line-height: 1; line-height: 1;
top: -1px; top: -1px;
color: @primary-color; color: @primary-color;
@ -141,10 +141,10 @@
} }
} }
} }
.@{stepsPrefixClass}-main { .@{steps-prefix-cls}-main {
margin-top: 3px; margin-top: 3px;
} }
.@{stepsPrefixClass}-title { .@{steps-prefix-cls}-title {
font-size: 14px; font-size: 14px;
margin-bottom: 4px; margin-bottom: 4px;
color: #666; color: #666;
@ -153,16 +153,16 @@
display: inline-block; display: inline-block;
padding-right: 10px; padding-right: 10px;
} }
.@{stepsPrefixClass}-item-last { .@{steps-prefix-cls}-item-last {
.@{stepsPrefixClass}-title { .@{steps-prefix-cls}-title {
padding-right: 0; padding-right: 0;
} }
} }
.@{stepsPrefixClass}-description { .@{steps-prefix-cls}-description {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
} }
.@{stepsPrefixClass}-tail { .@{steps-prefix-cls}-tail {
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
@ -179,8 +179,8 @@
} }
} }
&.@{stepsPrefixClass}-small { &.@{steps-prefix-cls}-small {
.@{stepsPrefixClass}-head-inner { .@{steps-prefix-cls}-head-inner {
border:1px solid @wait-icon-color; border:1px solid @wait-icon-color;
width: 18px; width: 18px;
height: 18px; height: 18px;
@ -189,25 +189,25 @@
border-radius: 18px; border-radius: 18px;
font-size: 12px; font-size: 12px;
margin-right: 10px; margin-right: 10px;
> .@{stepsPrefixClass}-icon.anticon { > .@{steps-prefix-cls}-icon.anticon {
.iconfont-size-under-12px(9px); .iconfont-size-under-12px(9px);
top: -1px; top: -1px;
} }
} }
.@{stepsPrefixClass}-main { .@{steps-prefix-cls}-main {
margin-top: 0; margin-top: 0;
} }
.@{stepsPrefixClass}-title { .@{steps-prefix-cls}-title {
font-size: 12px; font-size: 12px;
margin-bottom: 4px; margin-bottom: 4px;
color: #666; color: #666;
font-weight: bold; font-weight: bold;
} }
.@{stepsPrefixClass}-description { .@{steps-prefix-cls}-description {
font-size: 10px; font-size: 10px;
color: #999; color: #999;
} }
.@{stepsPrefixClass}-tail { .@{steps-prefix-cls}-tail {
top: 8px; top: 8px;
padding:0 8px; padding:0 8px;
> i { > i {
@ -218,7 +218,7 @@
} }
} }
&.@{stepsPrefixClass}-small .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head-inner, .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head-inner { &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner, .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner {
width: inherit; width: inherit;
height: inherit; height: inherit;
line-height: inherit; line-height: inherit;

8
style/components/switch.less
View File

@ -1,8 +1,8 @@
@switchPrefixCls:ant-switch; @switch-prefix-cls:ant-switch;
@switch-duration:.3s; @switch-duration:.3s;
.@{switchPrefixCls}{ .@{switch-prefix-cls}{
position: relative; position: relative;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
@ -30,7 +30,7 @@
left: 2px; left: 2px;
top:1px; top:1px;
border-radius: 100%; border-radius: 100%;
background-color: #ffffff; background-color: #fff;
content: " "; content: " ";
cursor: pointer; cursor: pointer;
transition: left @switch-duration @ease-in-out-circ; transition: left @switch-duration @ease-in-out-circ;
@ -43,7 +43,7 @@
border: 1px solid @primary-color; border: 1px solid @primary-color;
background-color: @primary-color; background-color: @primary-color;
.@{switchPrefixCls}-inner { .@{switch-prefix-cls}-inner {
left:6px; left:6px;
} }

22
style/components/table.less
View File

@ -1,9 +1,9 @@
@import "../mixins/index"; @import "../mixins/index";
@tablePrefixClass: ~"@{css-prefix}table"; @table-prefix-cls: ~"@{css-prefix}table";
@table-border-color: #e9e9e9; @table-border-color: #e9e9e9;
@table-head-background-color: #f3f3f3; @table-head-background-color: #f3f3f3;
.@{tablePrefixClass} { .@{table-prefix-cls} {
font-size: @font-size-base; font-size: @font-size-base;
color: @text-color; color: @text-color;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
@ -35,7 +35,7 @@
} }
} }
.@{tablePrefixClass}-filter-dropdown { .@{table-prefix-cls}-filter-dropdown {
min-width: 88px; min-width: 88px;
margin-left: -8px; margin-left: -8px;
margin-top: -6px; margin-top: -6px;
@ -56,7 +56,7 @@
} }
} }
a.@{tablePrefixClass}-filter-dropdown-link { a.@{table-prefix-cls}-filter-dropdown-link {
color: @link-color; color: @link-color;
&:hover { &:hover {
color: @link-hover-color; color: @link-hover-color;
@ -72,7 +72,7 @@
} }
} }
.@{tablePrefixClass}-filter-selected.anticon-bars { .@{table-prefix-cls}-filter-selected.anticon-bars {
color: @primary-color; color: @primary-color;
} }
@ -95,11 +95,11 @@
} }
} }
tr.@{tablePrefixClass}-row-selected { tr.@{table-prefix-cls}-row-selected {
background: #fafafa; background: #fafafa;
} }
th.@{tablePrefixClass}-column-sort { th.@{table-prefix-cls}-column-sort {
background: #EAEAEA; background: #EAEAEA;
} }
@ -107,8 +107,8 @@
padding: 16px 8px; padding: 16px 8px;
} }
th.@{tablePrefixClass}-selection-column, th.@{table-prefix-cls}-selection-column,
td.@{tablePrefixClass}-selection-column { td.@{table-prefix-cls}-selection-column {
text-align: center; text-align: center;
} }
@ -191,7 +191,7 @@
} }
} }
&.@{tablePrefixClass}-bordered { &.@{table-prefix-cls}-bordered {
table { table {
border: 1px solid #E9E9E9; border: 1px solid #E9E9E9;
} }
@ -215,7 +215,7 @@
} }
} }
.@{tablePrefixClass}-pagination { .@{table-prefix-cls}-pagination {
margin: 16px 0; margin: 16px 0;
float: right; float: right;
} }

10
style/components/tabs.less
View File

@ -1,8 +1,8 @@
@tabPrefixClass: ant-tabs; @tab-prefix-cls: ant-tabs;
@effect-duration: .3s; @effect-duration: .3s;
.@{tabPrefixClass} { .@{tab-prefix-cls} {
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
@ -138,7 +138,7 @@
clear: both; clear: both;
} }
div.@{tabPrefixClass}-tab-active { div.@{tab-prefix-cls}-tab-active {
> a, > a:hover, > a:focus { > a, > a:hover, > a:focus {
color: tint(@primary-color, 20%); color: tint(@primary-color, 20%);
cursor: pointer; cursor: pointer;
@ -146,7 +146,7 @@
} }
} }
div.@{tabPrefixClass}-tab-disabled { div.@{tab-prefix-cls}-tab-disabled {
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
@ -155,7 +155,7 @@
} }
} }
.@{tabPrefixClass}-tab { .@{tab-prefix-cls}-tab {
float: left; float: left;
height: 100%; height: 100%;
margin-right: 28px; margin-right: 28px;

4
style/components/tag.less
View File

@ -1,7 +1,7 @@
@import "../mixins/index"; @import "../mixins/index";
@tagPrefixClass: ~"@{css-prefix}tag"; @tag-prefix-cls: ~"@{css-prefix}tag";
.@{tagPrefixClass} { .@{tag-prefix-cls} {
display: inline-block; display: inline-block;
line-height: 22px; line-height: 22px;
height: 22px; height: 22px;

12
style/components/tooltip.less
View File

@ -1,5 +1,5 @@
@import "../mixins/index"; @import "../mixins/index";
@tooltipPrefixClass: ~"@{css-prefix}tooltip"; @tooltip-prefix-cls: ~"@{css-prefix}tooltip";
// //
// Tooltips // Tooltips
@ -16,12 +16,12 @@
//** Tooltip arrow width //** Tooltip arrow width
@tooltip-arrow-width: 5px; @tooltip-arrow-width: 5px;
//** Tooltip distance with trigger //** Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width+4; @tooltip-distance: @tooltip-arrow-width + 4;
//** Tooltip arrow color //** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg; @tooltip-arrow-color: @tooltip-bg;
// Base class // Base class
.@{tooltipPrefixClass} { .@{tooltip-prefix-cls} {
position: absolute; position: absolute;
z-index: 1070; z-index: 1070;
display: block; display: block;
@ -43,7 +43,7 @@
} }
// Wrapper for the tooltip content // Wrapper for the tooltip content
.@{tooltipPrefixClass}-inner { .@{tooltip-prefix-cls}-inner {
max-width: @tooltip-max-width; max-width: @tooltip-max-width;
padding: 8px 10px; padding: 8px 10px;
color: @tooltip-color; color: @tooltip-color;
@ -55,7 +55,7 @@
} }
// Arrows // Arrows
.@{tooltipPrefixClass}-arrow { .@{tooltip-prefix-cls}-arrow {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
@ -63,7 +63,7 @@
border-style: solid; border-style: solid;
} }
.@{tooltipPrefixClass} { .@{tooltip-prefix-cls} {
&-placement-top &-arrow { &-placement-top &-arrow {
bottom: @tooltip-distance - @tooltip-arrow-width; bottom: @tooltip-distance - @tooltip-arrow-width;
left: 50%; left: 50%;

30
style/components/tree.less
View File

@ -1,5 +1,5 @@
@treePrefixCls: ant-tree; @tree-prefix-cls: ant-tree;
.antCheckboxFn(@checkboxPrefixCls: ant-tree-checkbox); .antCheckboxFn(@checkbox-prefix-cls: ant-tree-checkbox);
@import "../mixins/iconfont"; @import "../mixins/iconfont";
.antTreeSwitcherIcon() { .antTreeSwitcherIcon() {
position: relative; position: relative;
@ -16,7 +16,7 @@
transition: transform .3s ease; transition: transform .3s ease;
} }
} }
.@{treePrefixCls} { .@{tree-prefix-cls} {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
font-size: 12px; font-size: 12px;
@ -41,11 +41,11 @@
color: #666; color: #666;
} }
span { span {
&.@{treePrefixCls}-checkbox { &.@{tree-prefix-cls}-checkbox {
margin: 3px 7px 0 0; margin: 3px 7px 0 0;
} }
&.@{treePrefixCls}-switcher, &.@{tree-prefix-cls}-switcher,
&.@{treePrefixCls}-iconEle { &.@{tree-prefix-cls}-iconEle {
line-height: 0; line-height: 0;
margin: 0; margin: 0;
width: 16px; width: 16px;
@ -59,7 +59,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: scroll; background-attachment: scroll;
} }
&.@{treePrefixCls}-switcher { &.@{tree-prefix-cls}-switcher {
&-disabled { &-disabled {
background: #fff; background: #fff;
position: relative; position: relative;
@ -71,16 +71,16 @@
color: gray; color: gray;
} }
} }
&.@{treePrefixCls}-roots_open, &.@{tree-prefix-cls}-roots_open,
&.@{treePrefixCls}-center_open, &.@{tree-prefix-cls}-center_open,
&.@{treePrefixCls}-bottom_open, &.@{tree-prefix-cls}-bottom_open,
&.@{treePrefixCls}-noline_open { &.@{tree-prefix-cls}-noline_open {
.antTreeSwitcherIcon(); .antTreeSwitcherIcon();
} }
&.@{treePrefixCls}-roots_close, &.@{tree-prefix-cls}-roots_close,
&.@{treePrefixCls}-center_close, &.@{tree-prefix-cls}-center_close,
&.@{treePrefixCls}-bottom_close, &.@{tree-prefix-cls}-bottom_close,
&.@{treePrefixCls}-noline_close { &.@{tree-prefix-cls}-noline_close {
.antTreeSwitcherIcon(); .antTreeSwitcherIcon();
.ie-rotate(3); .ie-rotate(3);
&:after { &:after {

22
style/components/upload.less
View File

@ -1,7 +1,7 @@
@prefixUploadClass: ant-upload; @upload-prefix-cls: ant-upload;
.@{prefixUploadClass} { .@{upload-prefix-cls} {
&.@{prefixUploadClass}-drag { &.@{upload-prefix-cls}-drag {
border: 1px dashed #d9d9d9; border: 1px dashed #d9d9d9;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
@ -11,7 +11,7 @@
height: 100%; height: 100%;
position: relative; position: relative;
.@{prefixUploadClass}-drag-container { .@{upload-prefix-cls}-drag-container {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -21,7 +21,7 @@
&:hover { &:hover {
border: 1px dashed #999; border: 1px dashed #999;
} }
p.@{prefixUploadClass}-drag-icon { p.@{upload-prefix-cls}-drag-icon {
.anticon { .anticon {
font-size: 80px; font-size: 80px;
margin-top: -30px; margin-top: -30px;
@ -30,10 +30,10 @@
height: 60px; height: 60px;
margin-bottom: 24px; margin-bottom: 24px;
} }
p.@{prefixUploadClass}-text { p.@{upload-prefix-cls}-text {
font-size: 14px; font-size: 14px;
} }
p.@{prefixUploadClass}-hint { p.@{upload-prefix-cls}-hint {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
} }
@ -51,10 +51,10 @@
} }
} }
.@{prefixUploadClass}-list { .@{upload-prefix-cls}-list {
margin-left: 4px; margin-left: 4px;
margin-top: 8px; margin-top: 8px;
.@{prefixUploadClass}-list-item { .@{upload-prefix-cls}-list-item {
margin-bottom: 4px; margin-bottom: 4px;
height: 22px; height: 22px;
overflow: hidden; overflow: hidden;
@ -70,14 +70,14 @@
} }
} }
} }
.@{prefixUploadClass}-item-name { .@{upload-prefix-cls}-item-name {
font-size: 12px; font-size: 12px;
color: #666; color: #666;
margin-left: 4px; margin-left: 4px;
margin-right: 8px; margin-right: 8px;
font-weight: normal; font-weight: normal;
} }
.@{prefixUploadClass}-success-icon { .@{upload-prefix-cls}-success-icon {
color: @success-color; color: @success-color;
font-weight: bold; font-weight: bold;
} }

2
style/mixins/form.less
View File

@ -12,7 +12,7 @@
} }
} }
.@{prefixCalendarClass}-picker-open .@{prefixCalendarClass}-picker-input { .@{calendar-prefix-cls}-picker-open .@{calendar-prefix-cls}-picker-input {
box-shadow: 0 0 0 2px tint(@border-color, 80%); box-shadow: 0 0 0 2px tint(@border-color, 80%);
} }

6
style/themes/default/custom.less
View File

@ -4,7 +4,7 @@
// Color // Color
@primary-color : #2db7f5; @primary-color : #2db7f5;
@success-color : #87d068; @success-color : #87d068;
@error-color : #ff6600; @error-color : #f60;
@warning-color : #fac450; @warning-color : #fac450;
// ------ Base & Require ------ // ------ Base & Require ------
@ -114,7 +114,7 @@
@legend-color : #999; @legend-color : #999;
@legend-border-color : #d9d9d9; @legend-border-color : #d9d9d9;
// Label // Label
@label-required-color : #F60; @label-required-color : #f60;
@label-color : #666; @label-color : #666;
// Input // Input
@input-height-base: 28px; @input-height-base: 28px;
@ -137,4 +137,4 @@
@form-item-margin-bottom : 24px; @form-item-margin-bottom : 24px;
@overlay-shadow : 0px 0px 4px rgba(0, 0, 0, 0.17); @overlay-shadow : 0 0 4px rgba(0, 0, 0, 0.17);