mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 11:08:45 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
afc163
commit
210c355e6b
@ -32,12 +32,12 @@
|
||||
<h4>带图标按钮组合 </h4>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<span class="anticon anticon-angle-double-left"></span>
|
||||
<span class="anticon anticon-double-left"></span>
|
||||
<span>后 退</span>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<span>前 进</span>
|
||||
<span class="anticon anticon-angle-double-right"></span>
|
||||
<span class="anticon anticon-double-right"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ant-btn-group">
|
||||
@ -56,7 +56,7 @@
|
||||
<button class="ant-btn ant-btn-ghost">4</button>
|
||||
<button class="ant-btn ant-btn-ghost">
|
||||
<span>前 进</span>
|
||||
<span class="anticon anticon-angle-double-right"></span>
|
||||
<span class="anticon anticon-double-right"></span>
|
||||
</button>
|
||||
</div>
|
||||
<h4>尺寸</h4>
|
||||
|
||||
40
components/confirm/demo/basic.md
Normal file
40
components/confirm/demo/basic.md
Normal file
@ -0,0 +1,40 @@
|
||||
# 基本
|
||||
|
||||
- order: 0
|
||||
|
||||
使用很简单。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var confirm = antd.confirm;
|
||||
|
||||
var Test = React.createClass({
|
||||
getInitialState(){
|
||||
return {
|
||||
visible:false
|
||||
};
|
||||
},
|
||||
showConfirm(){
|
||||
confirm({
|
||||
title:"第一个 confirm",
|
||||
content:"confirm 内容",
|
||||
onOk:this.handleOk,
|
||||
onCancel:this.handleCancel
|
||||
})
|
||||
},
|
||||
handleOk(close){
|
||||
close();
|
||||
},
|
||||
handleCancel(close){
|
||||
close();
|
||||
},
|
||||
render(){
|
||||
return <div>
|
||||
<button className="ant-btn ant-btn-primary" onClick={this.showConfirm}>显示确认框</button>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<Test/> , document.getElementById('components-confirm-demo-basic'));
|
||||
````
|
||||
56
components/confirm/index.jsx
Normal file
56
components/confirm/index.jsx
Normal file
@ -0,0 +1,56 @@
|
||||
var React = require('react');
|
||||
var Dialog = require('rc-dialog');
|
||||
var div;
|
||||
|
||||
module.exports = function (props) {
|
||||
var d;
|
||||
props = props || {};
|
||||
props.iconClassName = props.iconClassName || 'anticon-exclamation-circle';
|
||||
props.animation = 'zoom';
|
||||
props.maskAnimation = 'fade';
|
||||
var width = props.width || 375;
|
||||
|
||||
function close() {
|
||||
d.setState({
|
||||
visible: false
|
||||
});
|
||||
}
|
||||
|
||||
function onCancel() {
|
||||
if (props.onCancel) {
|
||||
props.onCancel(close);
|
||||
} else {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
function onOk() {
|
||||
if (props.onOk) {
|
||||
props.onOk(close);
|
||||
} else {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
var body = <div className="ant-confirm-body">
|
||||
<i className={"anticon " + props.iconClassName}></i>
|
||||
<span className="ant-confirm-title">{props.title}</span>
|
||||
<div className="ant-confirm-content">{props.content}</div>
|
||||
</div>
|
||||
var footer = <div className="ant-confirm-btns">
|
||||
<button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}>取 消</button>
|
||||
<button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>确 定</button>
|
||||
</div>;
|
||||
|
||||
if (!div) {
|
||||
div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
|
||||
React.render(<Dialog className="ant-confirm" renderToBody={false} visible={true} closable={false} title="" animation="zoom" maskAnimation="fade" width={width}>
|
||||
<div style={{zoom:1,overflow:'hidden'}}>{body} {footer}</div>
|
||||
|
||||
</Dialog>, div, function () {
|
||||
d = this;
|
||||
});
|
||||
};
|
||||
@ -7,27 +7,18 @@
|
||||
|
||||
## 何时使用
|
||||
|
||||
当你再次和我说起 青春时的故事
|
||||
我正在下着雨的无锡 乞讨着生活的权利
|
||||
前一天早晨 我睁开眼已是江南
|
||||
他们说柔软的地方 总会发生柔软的事
|
||||
那年的舞台上 说谎的人一直歌唱
|
||||
大不列颠的广场上 有没有鸽子飞翔
|
||||
青春和瞎子一起 变成了哑巴
|
||||
今天扯平了我们的当年 分食了理想
|
||||
当需要用户确认时使用
|
||||
|
||||
|
||||
## 为什么使用
|
||||
## api
|
||||
|
||||
你可知道你的名字解释了我的一生
|
||||
碎了满天的往事如烟 与世无争
|
||||
当你装满行李 回到故乡
|
||||
我的余生 却再也没有北方
|
||||
为一个方法，参数为 object，具体属性如下
|
||||
|
||||
有一天我又梦见 那个装满乐器的教室
|
||||
你还站在门口 一脸羞涩的表情
|
||||
你说这么多年你还没找到 让你心动的男人
|
||||
我说去他妈的爱情 都是过眼云烟的东西
|
||||
|
||||
我的余生 都用来寻找北方
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|------------------|--------------|
|
||||
| title | 标题 | React.Element|String | 无 |
|
||||
| onOk | 点击确定回调，参数为关闭函数 | function | 无 |
|
||||
| onCancel | 取消回调，参数为关闭函数 | function | 无 |
|
||||
| width | 宽度 | String or Number | 375 |
|
||||
| iconClassName | 图标央样式名 | String | anticon-exclamation-circle |
|
||||
|
||||
|
||||
@ -79,36 +79,36 @@
|
||||
<span class="anticon-class">caret-circleo-left</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="anticon anticon-angle-circle-right"></i>
|
||||
<span class="anticon-class">angle-circle-right</span>
|
||||
<i class="anticon anticon-circle-right"></i>
|
||||
<span class="anticon-class">circle-right</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="anticon anticon-angle-circle-left"></i>
|
||||
<span class="anticon-class">angle-circle-left</span>
|
||||
<i class="anticon anticon-circle-left"></i>
|
||||
<span class="anticon-class">circle-left</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="anticon anticon-angle-circleo-right"></i>
|
||||
<span class="anticon-class">angle-circleo-right</span>
|
||||
<i class="anticon anticon-circleo-right"></i>
|
||||
<span class="anticon-class">circleo-right</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="anticon anticon-angle-circleo-left"></i>
|
||||
<span class="anticon-class">angle-circleo-left</span>
|
||||
<i class="anticon anticon-circleo-left"></i>
|
||||
<span class="anticon-class">circleo-left</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="anticon anticon-angle-double-right"></i>
|
||||
<span class="anticon-class">angle-double-right</span>
|
||||
<i class="anticon anticon-double-right"></i>
|
||||
<span class="anticon-class">double-right</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="anticon anticon-angle-double-left"></i>
|
||||
<span class="anticon-class">angle-double-left</span>
|
||||
<i class="anticon anticon-double-left"></i>
|
||||
<span class="anticon-class">double-left</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="anticon anticon-angle-verticle-right"></i>
|
||||
<span class="anticon-class">angle-verticle-right</span>
|
||||
<i class="anticon anticon-verticle-right"></i>
|
||||
<span class="anticon-class">verticle-right</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="anticon anticon-angle-verticle-left"></i>
|
||||
<span class="anticon-class">angle-verticle-left</span>
|
||||
<i class="anticon anticon-verticle-left"></i>
|
||||
<span class="anticon-class">verticle-left</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="anticon anticon-forward"></i>
|
||||
|
||||
@ -7,16 +7,44 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
var modal = antd.modal;
|
||||
var Modal = antd.Modal;
|
||||
|
||||
function showModal() {
|
||||
modal({
|
||||
title: '第一个 Modal',
|
||||
content: <p>对话框的内容</p>
|
||||
});
|
||||
}
|
||||
var Test = React.createClass({
|
||||
getInitialState(){
|
||||
return {
|
||||
visible:false
|
||||
};
|
||||
},
|
||||
showModal(){
|
||||
this.setState({
|
||||
visible:true
|
||||
});
|
||||
},
|
||||
handleOk(){
|
||||
alert('ok');
|
||||
var self = this;
|
||||
setTimeout(function(){
|
||||
self.setState({
|
||||
visible:false
|
||||
});
|
||||
},200);
|
||||
},
|
||||
handleCancel(){
|
||||
var self = this;
|
||||
alert('cancel');
|
||||
setTimeout(function(){
|
||||
self.setState({
|
||||
visible:false
|
||||
});
|
||||
},200);
|
||||
},
|
||||
render(){
|
||||
return <div>
|
||||
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
|
||||
<Modal title="第一个 Modal" visible={this.state.visible} onOk={this.handleOk} onBeforeClose={this.handleCancel}><p>对话框的内容</p></Modal>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
React.render(
|
||||
<button className="ant-btn ant-btn-primary" onClick={showModal}>显示对话框</button>
|
||||
, document.getElementById('components-modal-demo-basic'));
|
||||
React.render(<Test/> , document.getElementById('components-modal-demo-basic'));
|
||||
````
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
# 确定取消
|
||||
|
||||
- order: 1
|
||||
|
||||
可以通过 `onOk` 和 `onCancel` 触发下一步的操作。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var modal = antd.modal;
|
||||
|
||||
function showModal() {
|
||||
var ref;
|
||||
|
||||
function saveRef(c){
|
||||
ref = c;
|
||||
}
|
||||
|
||||
modal({
|
||||
title: '点击确定取消',
|
||||
content: <p>name: <input ref={saveRef}/></p>,
|
||||
onCancel: function() {
|
||||
alert('cancel');
|
||||
},
|
||||
onOk: function(close) {
|
||||
alert('name: ' + React.findDOMNode(ref).value);
|
||||
close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
React.render(
|
||||
<button className="ant-btn ant-btn-default" onClick={showModal}>显示对话框</button>
|
||||
, document.getElementById('components-modal-demo-next'));
|
||||
````
|
||||
@ -2,56 +2,33 @@
|
||||
|
||||
var React = require('react');
|
||||
var Dialog = require('rc-dialog');
|
||||
function noop(){}
|
||||
|
||||
function noop() {
|
||||
}
|
||||
var Modal = React.createClass({
|
||||
handleCancel() {
|
||||
this.refs.d.requestClose();
|
||||
},
|
||||
|
||||
var div;
|
||||
getDefaultProps(){
|
||||
return {
|
||||
onOk:noop,
|
||||
onCancel:noop,
|
||||
onBeforeClose:noop
|
||||
};
|
||||
},
|
||||
|
||||
module.exports = function (props) {
|
||||
var d;
|
||||
props = props || {};
|
||||
handleOk() {
|
||||
this.props.onOk();
|
||||
},
|
||||
|
||||
props.animation = 'zoom';
|
||||
props.maskAnimation = 'fade';
|
||||
props.width = props.width || 500;
|
||||
|
||||
props.onClose = props.onCancel || noop;
|
||||
|
||||
function close() {
|
||||
d.setState({
|
||||
visible: false
|
||||
});
|
||||
render() {
|
||||
var props = this.props;
|
||||
var footer = [
|
||||
<button type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
|
||||
<button type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
|
||||
];
|
||||
return <Dialog animation="zoom" maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>
|
||||
}
|
||||
});
|
||||
|
||||
function onCancel() {
|
||||
if (props.onCancel) {
|
||||
props.onCancel();
|
||||
}
|
||||
close();
|
||||
}
|
||||
|
||||
function onOk() {
|
||||
if (props.onOk) {
|
||||
props.onOk(close);
|
||||
} else {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
var footer = [
|
||||
<button type="button" className="ant-btn-default ant-btn" onClick={onCancel}>取 消</button>,
|
||||
<button type="button" className="ant-btn-primary ant-btn" onClick={onOk}>确 定</button>
|
||||
];
|
||||
if (!div) {
|
||||
div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
props.visible = true;
|
||||
props.children = props.content;
|
||||
props.footer = props.footer || footer;
|
||||
props.renderToBody = false;
|
||||
React.render(<Dialog {...props}/>, div, function () {
|
||||
d = this;
|
||||
});
|
||||
};
|
||||
module.exports = Modal;
|
||||
@ -13,13 +13,13 @@
|
||||
|
||||
## API
|
||||
|
||||
是个方法，参数只有一个 object ，具体成员如下
|
||||
属性列表
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|------------------|--------------|
|
||||
| title | 标题 | React.Element | 无 |
|
||||
| content | 面板内容 | React.Element | 无 |
|
||||
| onOk | 确定回调 | function | 无 |
|
||||
| onCancel | 取消回调 | function | 无 |
|
||||
| width | 宽度 | String or Number | 无 |
|
||||
| onOk | 点击确定回调 | function | 无 |
|
||||
| onBeforeClose | 点击遮罩层或右上角叉或取消按钮关闭前回调 | function | 无 |
|
||||
| width | 宽度 | String or Number | 500 |
|
||||
| visible | 是否显示 | Boolean | false |
|
||||
| footer | 底部内容 | React.Element | 确定取消按钮 |
|
||||
|
||||
@ -13,7 +13,7 @@ module.exports = React.createClass({
|
||||
return (
|
||||
<Tooltip placement={this.props.placement}
|
||||
prefixCls="ant-tooltip"
|
||||
trigger="click"
|
||||
trigger={this.props.trigger}
|
||||
overlay={this.props.title}>
|
||||
{this.props.children}
|
||||
</Tooltip>
|
||||
|
||||
5
index.js
5
index.js
@ -4,11 +4,12 @@ var antd = {
|
||||
Datepicker: require('./components/datepicker'),
|
||||
Tooltip: require('./components/tooltip'),
|
||||
Tab: require('./components/tab'),
|
||||
modal: require('./components/modal'),
|
||||
Modal: require('./components/modal'),
|
||||
Menu: require('rc-menu'),
|
||||
Dropdown: require('./components/dropdown'),
|
||||
Progress: require('./components/progress'),
|
||||
Select: require('./components/select')
|
||||
Select: require('./components/select'),
|
||||
confirm:require('./components/confirm')
|
||||
};
|
||||
|
||||
module.exports = window.antd = antd;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
"gregorian-calendar": "~3.0.0",
|
||||
"gregorian-calendar-format": "~3.0.1",
|
||||
"rc-calendar": "~3.8.0",
|
||||
"rc-dialog": "~4.2.0",
|
||||
"rc-dialog": "~4.3.0",
|
||||
"rc-dropdown": "~1.0.0",
|
||||
"rc-menu": "~3.3.0",
|
||||
"rc-progress": "~1.0.0",
|
||||
|
||||
@ -1,47 +1,41 @@
|
||||
@prefixConfirmCls: rc-dialog-confirm;
|
||||
@prefixConfirmCls: ant-confirm;
|
||||
|
||||
.@{prefixConfirmCls}-body {
|
||||
.ant-icon {
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
line-height: inherit;
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: sans-serif;
|
||||
.@{prefixConfirmCls} {
|
||||
|
||||
.ant-icon-warn-circle:before {
|
||||
content: "\e613";
|
||||
display: block;
|
||||
font-family: "iconfont" !important;
|
||||
.rc-dialog-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rc-dialog-body {
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
.@{prefixConfirmCls}-body {
|
||||
.@{prefixConfirmCls}-content {
|
||||
margin-left: 33px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ant-icon-warn-circle {
|
||||
.anticon {
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.anticon-exclamation-circle {
|
||||
color: #fac450;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixConfirmCls}-description {
|
||||
margin-left: 33px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.@{prefixConfirmCls}-btns {
|
||||
margin-top: 30px;
|
||||
float: right;
|
||||
|
||||
.@{prefixConfirmCls}-btns {
|
||||
margin-top: 30px;
|
||||
float: right;
|
||||
|
||||
[btn] + [btn] {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 0;
|
||||
button + button {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -49,18 +49,18 @@
|
||||
.@{iconfont-css-prefix}-caret-circleo-right:before {content:"\e60e";}
|
||||
.@{iconfont-css-prefix}-caret-circleo-left {.ie-rotate(2);}
|
||||
.@{iconfont-css-prefix}-caret-circleo-left:before {content:"\e60e";.rotate(180deg);}
|
||||
.@{iconfont-css-prefix}-angle-circle-right:before {content:"\e602";}
|
||||
.@{iconfont-css-prefix}-angle-circle-left {.ie-rotate(2);}
|
||||
.@{iconfont-css-prefix}-angle-circle-left:before {content:"\e602";.rotate(180deg);}
|
||||
.@{iconfont-css-prefix}-angle-circleo-right:before {content:"\e603";}
|
||||
.@{iconfont-css-prefix}-angle-circleo-left {.ie-rotate(2);}
|
||||
.@{iconfont-css-prefix}-angle-circleo-left:before {content:"\e603";.rotate(180deg);}
|
||||
.@{iconfont-css-prefix}-angle-double-right:before {content:"\e604";}
|
||||
.@{iconfont-css-prefix}-angle-double-left {.ie-rotate(2);}
|
||||
.@{iconfont-css-prefix}-angle-double-left:before {content:"\e604";.rotate(180deg);}
|
||||
.@{iconfont-css-prefix}-angle-verticle-right:before {content:"\e605";}
|
||||
.@{iconfont-css-prefix}-angle-verticle-left {.ie-rotate(2);}
|
||||
.@{iconfont-css-prefix}-angle-verticle-left:before {content:"\e605";.rotate(180deg);}
|
||||
.@{iconfont-css-prefix}-circle-right:before {content:"\e602";}
|
||||
.@{iconfont-css-prefix}-circle-left {.ie-rotate(2);}
|
||||
.@{iconfont-css-prefix}-circle-left:before {content:"\e602";.rotate(180deg);}
|
||||
.@{iconfont-css-prefix}-circleo-right:before {content:"\e603";}
|
||||
.@{iconfont-css-prefix}-circleo-left {.ie-rotate(2);}
|
||||
.@{iconfont-css-prefix}-circleo-left:before {content:"\e603";.rotate(180deg);}
|
||||
.@{iconfont-css-prefix}-double-right:before {content:"\e604";}
|
||||
.@{iconfont-css-prefix}-double-left {.ie-rotate(2);}
|
||||
.@{iconfont-css-prefix}-double-left:before {content:"\e604";.rotate(180deg);}
|
||||
.@{iconfont-css-prefix}-verticle-right:before {content:"\e605";}
|
||||
.@{iconfont-css-prefix}-verticle-left {.ie-rotate(2);}
|
||||
.@{iconfont-css-prefix}-verticle-left:before {content:"\e605";.rotate(180deg);}
|
||||
.@{iconfont-css-prefix}-forward:before {content:"\e630";}
|
||||
.@{iconfont-css-prefix}-backward {.ie-rotate(2);}
|
||||
.@{iconfont-css-prefix}-backward:before {content:"\e630";.rotate(180deg);}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
|
||||
// for common elements
|
||||
@import "button.less";
|
||||
@import "input.less";
|
||||
|
||||
// Layout
|
||||
@import "grid.less";
|
||||
|
||||
@ -20,3 +20,59 @@
|
||||
box-shadow: 0 0 3px #23c0fa;
|
||||
}
|
||||
}
|
||||
|
||||
.input() {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal;
|
||||
width: 100%;
|
||||
font-size: @input-font-size;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
background-color: @input-bg;
|
||||
background-image: none;
|
||||
border: 1px solid @input-border-color;
|
||||
border-radius: @input-border-radius;
|
||||
// Reset placeholder
|
||||
.placeholder();
|
||||
.transition(~"border @{duration-300} @{ease-in-out}, background @{duration-300} @{ease-in-out}, box-shadow @{duration-300} @{ease-in-out}");
|
||||
|
||||
&:not([disabled]):hover {
|
||||
border-color: @input-hover-border-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@color-rgba: rgba(red(@input-focus-border-color), green(@input-focus-border-color), blue(@input-focus-border-color), .8);
|
||||
border-color: @input-focus-border-color;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 3px @color-rgba;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
background-color: @input-disabled-bg;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
// Reset height for `textarea`s
|
||||
textarea& {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Size
|
||||
&-lg {
|
||||
padding: @input-padding-lg;
|
||||
font-size: @input-font-size-lg;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
padding: @input-padding-vertical-sm @input-padding-horizontal;
|
||||
font-size: @input-font-size-sm;
|
||||
}
|
||||
}
|
||||
@ -98,7 +98,7 @@
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
.placeholder(@color: @input-color-placeholder) {
|
||||
.placeholder(@color: @input-placeholder-color) {
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
color: @color;
|
||||
|
||||
@ -110,4 +110,35 @@
|
||||
// Container sizes
|
||||
@container-sm : (720px + @grid-gutter-width);
|
||||
@container-md : (940px + @grid-gutter-width);
|
||||
@container-lg : (1140px + @grid-gutter-width);
|
||||
@container-lg : (1140px + @grid-gutter-width);
|
||||
|
||||
// Form
|
||||
// --------------------------------
|
||||
// Legend
|
||||
@legend-color : #222;
|
||||
@legend-border-color : #e5e5e5;
|
||||
|
||||
// Input
|
||||
@input-height-base: 28px;
|
||||
@input-height-lg: 32px;
|
||||
@input-height-sm: 22px;
|
||||
|
||||
@input-padding-horizontal : 7px;
|
||||
@input-padding-vertical-base : 4px;
|
||||
@input-padding-vertical-sm : 1px;
|
||||
@input-padding-lg : 4px 7px 5px;
|
||||
|
||||
@input-placeholder-color : #ccc;
|
||||
@input-color : #666;
|
||||
@input-border-color : #d9d9d9;
|
||||
@input-bg : #fff;
|
||||
|
||||
@input-border-radius : @border-radius-base;
|
||||
|
||||
@input-font-size-lg : 14px;
|
||||
@input-font-size : @font-size-base;
|
||||
@input-font-size-sm : @font-size-base;
|
||||
|
||||
@input-hover-border-color : #23c0fa;
|
||||
@input-focus-border-color : #2db7f5;
|
||||
@input-disabled-bg : #f3f5f7;
|
||||
Loading…
Reference in New Issue
Block a user