mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 21:19:37 +08:00
add form and input style
This commit is contained in:
simaQ
parent
89718e2335
commit
7fb5995309
@ -1,19 +0,0 @@
|
||||
# Form explain
|
||||
|
||||
- order: 11
|
||||
|
||||
表单辅助文本
|
||||
|
||||
针对表单控件的块级辅助文本。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<form>
|
||||
<div class="ant-form-item">
|
||||
<label for="userName">Username</label>
|
||||
<input class="ant-input" type="text" id="userName" placeholder="Please enter userName"/>
|
||||
<div class="ant-form-explain">这里是提示信息。</div>
|
||||
</div>
|
||||
</form>
|
||||
````
|
||||
@ -1,51 +0,0 @@
|
||||
# Feedback input
|
||||
|
||||
- order: 8
|
||||
|
||||
带反馈图标的输入框
|
||||
|
||||
为输入框添加反馈图标，可以更好地反馈当前的状态。只需用 `.has-feedback` 类包裹 input 输入框即可。
|
||||
|
||||
另外可为 `label` 标签添加 `required` 属性，表示该项必选。
|
||||
|
||||
> 注意: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上哦~
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<!-- 校验失败 -->
|
||||
<div class="ant-form-item has-error">
|
||||
<label for="userName">Username</label>
|
||||
<div class="has-feedback">
|
||||
<input class="ant-input" type="text" id="userName" placeholder="有错误啦"/>
|
||||
<i class="anticon anticon-cross-round"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 警告状态 -->
|
||||
<div class="ant-form-item has-warning">
|
||||
<label for="userName" ant-input-group>Username</label>
|
||||
<div class="has-feedback">
|
||||
<input class="ant-input" type="text" id="userName" placeholder="前方高能预警"/>
|
||||
<i class="anticon anticon-exclamation-round"></i>
|
||||
</div>
|
||||
<div class="ant-form-explain">该项必选</div>
|
||||
</div>
|
||||
|
||||
<!-- 校验成功 -->
|
||||
<div class="ant-form-item has-success">
|
||||
<label for="userName">Username</label>
|
||||
<div class="has-feedback">
|
||||
<input class="ant-input" type="text" id="userName" placeholder="请输入"/>
|
||||
<i class="anticon anticon-check-round"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item">
|
||||
<label for="userName">Username</label>
|
||||
<div class="has-feedback">
|
||||
<input class="ant-input" type="text" id="userName" placeholder="努力加载中..."/>
|
||||
<i class="anticon anticon-loading"></i>
|
||||
</div>
|
||||
</div>
|
||||
````
|
||||
@ -1,60 +0,0 @@
|
||||
# Input group
|
||||
|
||||
- order: 9
|
||||
|
||||
输入框组合
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<h4>带标签的输入框</h4>
|
||||
<div class="ant-input-group">
|
||||
<span class="ant-input-group-addon" id="basic-addon1">Http://</span>
|
||||
<input type="text" class="ant-input" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="ant-input-group">
|
||||
<input type="text" class="ant-input" placeholder="Username">
|
||||
<span class="ant-input-group-addon" id="basic-addon1">.com</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="ant-input-group">
|
||||
<span class="ant-input-group-addon" id="basic-addon1">Http://</span>
|
||||
<input type="text" class="ant-input" placeholder="Username">
|
||||
<span class="ant-input-group-addon" id="basic-addon1">.com</span>
|
||||
</div>
|
||||
|
||||
<h4>作为额外元素的按钮式下拉菜单</h4>
|
||||
<div class="ant-input-group">
|
||||
<input type="text" class="ant-input" placeholder="Search for...">
|
||||
<div class="ant-input-group-btn">
|
||||
<button class="input-btn" type="button">
|
||||
<span>.com</span>
|
||||
<i class="anticon anticon-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>带按钮的菜单</h4>
|
||||
<div class="ant-input-group">
|
||||
<input type="text" class="ant-input" placeholder="Search for...">
|
||||
<div class="ant-input-group-btn">
|
||||
<button class="input-btn" type="button">Go!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>微调输入框</h4>
|
||||
<div class="ant-input-group">
|
||||
<input type="text" class="ant-input" placeholder="请输入数字">
|
||||
<div class="ant-input-group-btn-vertical">
|
||||
<button class="input-btn" type="button">
|
||||
<i class="anticon anticon-up"></i>
|
||||
</button>
|
||||
<button class="input-btn" type="button">
|
||||
<i class="anticon anticon-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
````
|
||||
@ -1,61 +0,0 @@
|
||||
# Sizing options
|
||||
|
||||
- order: 10
|
||||
|
||||
关于尺寸，我们提供大、中、小三种尺寸，默认为中尺寸。
|
||||
|
||||
待续...
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<h4>input</h4>
|
||||
<!-- 大尺寸 -->
|
||||
<input class="ant-input ant-input-lg" type="text" id="userName" placeholder="请输入"/>
|
||||
<br>
|
||||
<!-- 默认尺寸 -->
|
||||
<input class="ant-input" type="text" id="userName" placeholder="请输入"/>
|
||||
<br>
|
||||
<!-- 小尺寸 -->
|
||||
<input class="ant-input ant-input-sm" type="text" id="userName" placeholder="请输入"/>
|
||||
|
||||
<h4>input-group</h4>
|
||||
<!-- 大尺寸 -->
|
||||
<div class="ant-input-group ant-input-group-lg">
|
||||
<input type="text" class="ant-input" placeholder="Search for...">
|
||||
<div class="ant-input-group-btn">
|
||||
<button class="input-btn" type="button">
|
||||
<span>.com</span>
|
||||
<i class="anticon anticon-caret-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<!-- 默认尺寸 -->
|
||||
<div class="ant-input-group">
|
||||
<input type="text" class="ant-input" placeholder="Search for...">
|
||||
<div class="ant-input-group-btn">
|
||||
<button class="input-btn" type="button">
|
||||
<span>.com</span>
|
||||
<i class="anticon anticon-caret-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<!-- 小尺寸 -->
|
||||
<div class="ant-input-group ant-input-group-sm">
|
||||
<input type="text" class="ant-input" placeholder="Search for...">
|
||||
<div class="ant-input-group-btn">
|
||||
<button class="input-btn" type="button">
|
||||
<span>.com</span>
|
||||
<i class="anticon anticon-caret-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>form-item</h4>
|
||||
故事未完待续...
|
||||
|
||||
````
|
||||
@ -1,27 +0,0 @@
|
||||
# Static control
|
||||
|
||||
- order: 5
|
||||
|
||||
静态文本表单控件：将一行静态文本和 label 标签置于同一行。
|
||||
|
||||
为 `<p>` 标签添加 `.ant-form-text` 类即可。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<form class="ant-form-horizontal">
|
||||
<div class="ant-form-item">
|
||||
<label for="userName" class="col-6">Username</label>
|
||||
<div class="col-18">
|
||||
<p class="ant-form-text">Ant</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label for="password" class="col-6">Password</label>
|
||||
<div class="col-18">
|
||||
<input class="ant-input" type="text" id="password" placeholder="Please enter password"/>
|
||||
</div>
|
||||
</div>
|
||||
<input type="submit" class="ant-btn ant-btn-primary" value="Submit" />
|
||||
</form>
|
||||
````
|
||||
@ -2,48 +2,43 @@
|
||||
|
||||
.reset-form();
|
||||
|
||||
label[required]:before {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
content: "*";
|
||||
color: @label-required-color;
|
||||
font-family: SimSun;
|
||||
font-size: 12px;
|
||||
.translate3d(-10px; 0; 0);
|
||||
label {
|
||||
position: relative;
|
||||
&[required]:before {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: ~"-5px \9"; // ie8-9
|
||||
content: "*";
|
||||
color: @label-required-color;
|
||||
font-family: SimSun;
|
||||
font-size: 12px;
|
||||
.translate3d(-10px; 0; 0);
|
||||
}
|
||||
|
||||
> .@{iconfont-css-prefix} {
|
||||
vertical-align: top;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Form groups
|
||||
// You should vrap labels and controls in .@{css-prefix}form-item for optimum spacing
|
||||
// Form items
|
||||
// You should wrap labels and controls in .@{css-prefix}form-item for optimum spacing
|
||||
.@{css-prefix}form-item {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: @form-item-margin-bottom;
|
||||
|
||||
label {
|
||||
color: @label-color;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Input styles
|
||||
// Shared size and type resets for form controls. Apply `.form-control` to any
|
||||
// of the following form controls:
|
||||
//
|
||||
// select
|
||||
// textarea
|
||||
// input[type="text"]
|
||||
// input[type="password"]
|
||||
// input[type="datetime"]
|
||||
// input[type="datetime-local"]
|
||||
// input[type="date"]
|
||||
// input[type="month"]
|
||||
// input[type="time"]
|
||||
// input[type="week"]
|
||||
// input[type="number"]
|
||||
// input[type="email"]
|
||||
// input[type="url"]
|
||||
// input[type="search"]
|
||||
// input[type="tel"]
|
||||
// input[type="color"]
|
||||
.@{css-prefix}input {
|
||||
.input;
|
||||
}
|
||||
|
||||
//== Input type: with extra icon
|
||||
// TODO: sizing options
|
||||
.has-feedback {
|
||||
.input-with-icon();
|
||||
}
|
||||
@ -53,7 +48,34 @@ label[required]:before {
|
||||
.input-group(~"@{css-prefix}input");
|
||||
}
|
||||
|
||||
// Other form controls
|
||||
// 表单下的输入框尺寸唯一: 大尺寸
|
||||
form {
|
||||
.@{css-prefix}input {
|
||||
height: @input-height-lg;
|
||||
font-size: 12px;
|
||||
padding: @input-padding-horizontal;
|
||||
}
|
||||
.has-feedback {
|
||||
.@{iconfont-css-prefix} {
|
||||
.square(@input-height-lg);
|
||||
line-height: @input-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix}input-group > .@{css-prefix}input,
|
||||
.@{css-prefix}input-group > .@{css-prefix}input-group-addon,
|
||||
.@{css-prefix}input-group > .@{css-prefix}input-group-btn > .input-btn {
|
||||
.input-lg();
|
||||
}
|
||||
|
||||
// input[type=file]
|
||||
.@{css-prefix}upload {
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// Radio & Checkbox
|
||||
.@{css-prefix}radio,
|
||||
.@{css-prefix}checkbox {
|
||||
@ -61,10 +83,11 @@ label[required]:before {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
height: @input-height-lg;
|
||||
|
||||
label {
|
||||
min-height: @line-height-computed;
|
||||
padding-left: 20px;
|
||||
padding: 7px 0 7px 20px;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
@ -81,7 +104,7 @@ label[required]:before {
|
||||
|
||||
.@{css-prefix}radio + .@{css-prefix}radio,
|
||||
.@{css-prefix}checkbox + .@{css-prefix}checkbox {
|
||||
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
@ -89,22 +112,15 @@ label[required]:before {
|
||||
.@{css-prefix}checkbox-inline {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
padding: 7px 20px;
|
||||
padding-right: 0!important;
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
.@{css-prefix}radio-inline + .@{css-prefix}radio-inline,
|
||||
.@{css-prefix}checkbox-inline + .@{css-prefix}checkbox-inline {
|
||||
margin-top: 0;
|
||||
margin-left: 10px; // space out consecutive inline controls
|
||||
}
|
||||
|
||||
// Apply same disabled cursor tweak as for inputs
|
||||
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
|
||||
//
|
||||
// Note: Neither radios nor checkboxes can be readonly.
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
&[disabled],
|
||||
@ -145,10 +161,8 @@ input[type="checkbox"] {
|
||||
.@{css-prefix}checkbox-inline {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: (@input-padding-vertical-base + 1); // Default padding plus a border
|
||||
}
|
||||
// Account for padding we're adding to ensure the alignment and of help text
|
||||
// and other content below items
|
||||
|
||||
.@{css-prefix}radio,
|
||||
.@{css-prefix}checkbox {
|
||||
min-height: (@line-height-computed + (@input-padding-vertical-base + 1));
|
||||
@ -157,18 +171,24 @@ input[type="checkbox"] {
|
||||
|
||||
//== Inline Form
|
||||
// Attention: Inline form does only apply to within viewports that are at least 768px wide
|
||||
// TODO: 用 float 代替 inline-block
|
||||
.@{css-prefix}form-inline {
|
||||
&:extend(.clearfix all);
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.@{css-prefix}form-item {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
|
||||
label {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// In navbar-form, allow folks to *not* use `.@{css-prefix}form-item`
|
||||
.@{css-prefix}input {
|
||||
display: inline-block;
|
||||
width: auto; // Prevent labels from stacking above inputs in `.@{css-prefix}form-item`
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -196,24 +216,35 @@ input[type="checkbox"] {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix}form-text {
|
||||
.@{css-prefix}form-horizontal, .@{css-prefix}form-inline {
|
||||
label {
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix}form-text, .@{css-prefix}form-split {
|
||||
// min-height: (@line-height-computed + @font-size-base);
|
||||
margin: 0!important;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
font-size: 12px;
|
||||
height: @input-height-lg;
|
||||
}
|
||||
|
||||
&.@{css-prefix}input-lg,
|
||||
&.@{css-prefix}input-sm {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.@{css-prefix}form-split {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Validation state
|
||||
.has-success {
|
||||
.form-control-validation(@success-color; @success-color;);
|
||||
.form-control-validation(@success-color; @input-hover-border-color;);
|
||||
.@{css-prefix}input {
|
||||
border-color: @input-border-color;
|
||||
}
|
||||
}
|
||||
.has-warning {
|
||||
.form-control-validation(@warning-color; @warning-color;);
|
||||
@ -223,5 +254,6 @@ input[type="checkbox"] {
|
||||
}
|
||||
.@{css-prefix}form-explain {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
@ -14,3 +14,4 @@
|
||||
@import "steps";
|
||||
@import "breadcrumb";
|
||||
@import "inputNumber";
|
||||
@import "typography";
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
//== Typography
|
||||
|
||||
//** Headings: h1 h2 h3 h4 h5 h6
|
||||
//** Headings: h1 h2 h3 h4 h5 h6
|
||||
|
||||
|
||||
.pdrg-8 {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.pdlf-8 {
|
||||
padding-left: 8px;
|
||||
}
|
||||
@ -1,9 +1,15 @@
|
||||
@import "normalize";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
}
|
||||
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// HTML & Body reset
|
||||
html, body {
|
||||
.square(100%);
|
||||
|
||||
@ -1,28 +1,25 @@
|
||||
// style the form controls with different validation states
|
||||
.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
|
||||
// Color the label and help text
|
||||
.@{css-prefix}form-explain {
|
||||
.@{css-prefix}form-explain, .@{css-prefix}form-split {
|
||||
color: @text-color;
|
||||
}
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
// 输入框的不同校验状态
|
||||
.@{css-prefix}input {
|
||||
border-color: @border-color;
|
||||
&:focus {
|
||||
@color-rgba: rgba(red(@border-color), green(@border-color), blue(@border-color), .8);
|
||||
border-color: @border-color;
|
||||
box-shadow: 0 0 3px @color-rgba;
|
||||
box-shadow: 0 0 3px tint(@border-color, 20%);
|
||||
}
|
||||
&:not([disabled]):hover {
|
||||
border-color: @border-color;
|
||||
}
|
||||
}
|
||||
// Set validation states also for addons
|
||||
|
||||
.@{css-prefix}input-group-addon {
|
||||
color: @text-color;
|
||||
border-color: @border-color;
|
||||
background-color: @background-color;
|
||||
}
|
||||
// Optional feedback icon
|
||||
|
||||
.has-feedback {
|
||||
color: @text-color;
|
||||
}
|
||||
@ -30,7 +27,7 @@
|
||||
|
||||
// Reset form styles
|
||||
// -----------------------------
|
||||
// From Bootstrap framework
|
||||
// Based on Bootstrap framework
|
||||
.reset-form() {
|
||||
fieldset {
|
||||
padding: 0;
|
||||
@ -53,9 +50,8 @@
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
font-size: @font-size-base;
|
||||
max-width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
@ -65,7 +61,7 @@
|
||||
// Position radios and checkboxes better
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 4px 0 0;
|
||||
margin: 2px 0 0;
|
||||
margin-top: 1px \9; // IE8-9
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// 待删除
|
||||
.ant-input(){
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -22,14 +23,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
// common mixins for input
|
||||
// size mixins for input
|
||||
.input-lg() {
|
||||
padding: @input-padding-lg;
|
||||
height: @input-height-lg;
|
||||
font-size: @input-font-size-lg;
|
||||
}
|
||||
|
||||
.input-sm() {
|
||||
padding: @input-padding-vertical-sm @input-padding-horizontal;
|
||||
height: @input-height-sm;
|
||||
font-size: @input-font-size-sm;
|
||||
}
|
||||
|
||||
@ -38,16 +41,17 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal;
|
||||
margin-right: 8px;
|
||||
width: 100%;
|
||||
height: @input-height-base;
|
||||
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();
|
||||
border-radius: @border-radius-base;
|
||||
.placeholder(); // Reset placeholder
|
||||
.transition(~"border @{duration-300} @{ease-in-out}, background @{duration-300} @{ease-in-out}, box-shadow @{duration-300} @{ease-in-out}");
|
||||
|
||||
&:hover {
|
||||
@ -55,10 +59,9 @@
|
||||
}
|
||||
|
||||
&: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;
|
||||
box-shadow: 0 0 3px tint(@input-focus-border-color, 20%);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
@ -160,7 +163,7 @@
|
||||
text-align: center;
|
||||
background-color: #eee;
|
||||
border: 1px solid @input-border-color;
|
||||
border-radius: @input-border-radius;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
@ -170,9 +173,17 @@
|
||||
|
||||
.@{inputBtn} {
|
||||
.btn();
|
||||
.button-size(@input-padding-vertical-base @input-padding-horizontal; @font-size-base; @input-border-radius);
|
||||
.button-size(@input-padding-vertical-base @input-padding-horizontal; @font-size-base; @border-radius-base);
|
||||
.button-variant(@input-color; #eee; @input-border-color);
|
||||
|
||||
&:hover {
|
||||
.button-color(lighten(@input-color, 30%, 'relative'); #eee; @input-border-color);
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(lighten(@input-color, 20%, 'relative'); #eee; @input-border-color);
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
line-height: 1;
|
||||
margin-left: 8px;
|
||||
@ -202,36 +213,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-btn-vertical {
|
||||
position: relative;
|
||||
> .@{inputBtn} {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 22px;
|
||||
height: 14px;
|
||||
margin-left: -1px;
|
||||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: -1px;
|
||||
height: 15px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 4px;
|
||||
margin: 0!important;
|
||||
font-size: 12px!important;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
.@{inputClass}:first-child,
|
||||
&-addon:first-child,
|
||||
@ -270,5 +251,7 @@
|
||||
.input-sm();
|
||||
}
|
||||
|
||||
// TODO: input-group-btn-vertical: different button size
|
||||
&-sm > &-btn > .@{inputBtn} {
|
||||
margin-top: ~"-2px \9";
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
@font-size-base : 12px;
|
||||
@line-height-base : 1.5;
|
||||
@line-height-computed: floor((@font-size-base * @line-height-base));
|
||||
|
||||
@border-radius-base : 6px;
|
||||
|
||||
// ICONFONT
|
||||
@iconfont-css-prefix : anticon;
|
||||
@ -84,9 +84,6 @@
|
||||
@btn-circle-size-lg : 32px;
|
||||
@btn-circle-size-sm : 22px;
|
||||
|
||||
// Border
|
||||
@border-radius-base : 6px;
|
||||
|
||||
// Media queries breakpoints
|
||||
// Extra small screen / phone
|
||||
@screen-xs : 480px;
|
||||
@ -122,10 +119,9 @@
|
||||
// Legend
|
||||
@legend-color : #222;
|
||||
@legend-border-color : #e5e5e5;
|
||||
|
||||
// Label
|
||||
@label-required-color : #F44336;
|
||||
|
||||
@label-required-color : #F60;
|
||||
@label-color: #999;
|
||||
// Input
|
||||
@input-height-base: 28px;
|
||||
@input-height-lg: 32px;
|
||||
@ -141,8 +137,6 @@
|
||||
@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;
|
||||
@ -150,3 +144,5 @@
|
||||
@input-hover-border-color : #23c0fa;
|
||||
@input-focus-border-color : #2db7f5;
|
||||
@input-disabled-bg : #f3f5f7;
|
||||
|
||||
@form-item-margin-bottom : 24px;
|
||||
Loading…
Reference in New Issue
Block a user