Merge branch '0.8.0' of github.com:ant-design/ant-design into 0.8.0

This commit is contained in:
yiminghe 2015-08-20 17:47:15 +08:00
commit fd0083e6e3
54 changed files with 431 additions and 443 deletions

6
.lesslintrc Normal file
View File

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

View File

@ -7,7 +7,7 @@
---
````jsx
var Alert = require('antd/lib/alert');
var Alert = antd.Alert;
React.render(<Alert message="成功提示的文案" type="success" />
, document.getElementById('components-alert-demo-basic'));

View File

@ -7,7 +7,7 @@
---
````jsx
var Alert = require('antd/lib/alert');
var Alert = antd.Alert;
var onClose = function(e) {
console.log(e, '我要被关闭啦!');

View File

@ -7,7 +7,7 @@
---
````jsx
var Alert = require('antd/lib/alert');
var Alert = antd.Alert;
var link = <a href="javascript:;">不再提醒</a>
React.render(

View File

@ -7,7 +7,7 @@
---
````jsx
var Alert = require('antd/lib/alert');
var Alert = antd.Alert;
React.render(<div>
<Alert message="成功提示的文案"

View File

@ -7,7 +7,7 @@
---
````jsx
var Alert = require('antd/lib/alert');
var Alert = antd.Alert;
React.render(<div>
<Alert message="成功提示的文案" type="success" />

View File

@ -7,7 +7,7 @@
---
````jsx
var notification = require('antd/lib/notification');
var notification = antd.Notification;
var openNotification = function() {
notification.open({

View File

@ -7,7 +7,7 @@
---
````jsx
var notification = require('antd/lib/notification');
var notification = antd.Notification;
var openNotification = function() {
var args = {

View File

@ -7,7 +7,7 @@
---
````jsx
var notification = require('antd/lib/notification');
var notification = antd.Notification;
var close = function() {
console.log("我被默认的关闭按钮关闭了!");

View File

@ -7,7 +7,7 @@
---
````jsx
var notification = require('antd/lib/notification');
var notification = antd.Notification;
var close = function(){
console.log('我被默认的关闭按钮关闭了!');

View File

@ -7,7 +7,7 @@
---
````jsx
var notification = require('antd/lib/notification');
var notification = antd.Notification;
var openNotificationWithIcon = function(type) {
return function(){

View File

@ -80,6 +80,7 @@
"json-loader": "^0.5.1",
"less": "~2.5.1",
"less-loader": "^2.2.0",
"lesslint": "^0.1.7",
"lodash": "^3.10.0",
"nico-jsx": "~0.5.8",
"precommit-hook": "^1.0.7",
@ -94,6 +95,7 @@
"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",
"lint": "eslint components index.js --ext '.js,.jsx'",
"lesslint": "lesslint style",
"test": "webpack && npm run lint",
"prepublish": "npm run babel && rm -rf dist && webpack --config webpack.config.production.js && node scripts/prenpm.js"
},

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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%);
}

View File

@ -4,7 +4,7 @@
// Color
@primary-color : #2db7f5;
@success-color : #87d068;
@error-color : #ff6600;
@error-color : #f60;
@warning-color : #fac450;
// ------ Base & Require ------
@ -114,7 +114,7 @@
@legend-color : #999;
@legend-border-color : #d9d9d9;
// Label
@label-required-color : #F60;
@label-required-color : #f60;
@label-color : #666;
// Input
@input-height-base: 28px;
@ -137,4 +137,4 @@
@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);