Browse Source

fix form style

pull/76/head
afc163 9 years ago
parent
commit
db51898720
  1. 10
      components/form/demo/form-controls.md
  2. 4
      components/form/demo/horizontal-form.md
  3. 2
      components/form/demo/inline-form.md
  4. 16
      components/form/demo/mix.md
  5. 75
      style/components/form.less
  6. 2
      style/mixins/form.less

10
components/form/demo/form-controls.md

@ -13,7 +13,7 @@
<div class="ant-form-item">
<label class="col-6">输入框:</label>
<div class="col-18">
<input type="text" class="ant-input" placeholder="Please enter...">
<input type="text" class="ant-input" placeholder="Please enter...">
</div>
</div>
<div class="ant-form-item">
@ -37,13 +37,13 @@
<div class="ant-form-item">
<label class="col-6">checkbox 复选框:</label>
<div class="col-18">
<div class="ant-checkbox">
<div>
<label>
<input type="checkbox" value="apple"> Apple
</label>
</div>
<!-- disabled checkbox -->
<div class="ant-checkbox disabled">
<div>
<label>
<input type="checkbox" value="banana" disabled> Banana(disabled)
</label>
@ -68,13 +68,13 @@
<div class="ant-form-item">
<label class="col-6">radio 单选框:</label>
<div class="col-18">
<div class="ant-radio">
<div>
<label>
<input type="radio" name="radios" id="optionsRadios1" value="option1" checked> Apple
</label>
</div>
<!-- disabled radio -->
<div class="ant-radio disabled">
<div>
<label>
<input type="radio" name="radios" id="optionsRadios3" value="option3" disabled> Banana(disabled)
</label>

4
components/form/demo/horizontal-form.md

@ -34,7 +34,7 @@
<input type="radio" name="radios" id="female-radio" value="female"> 女的
</label>
</div>
</div>
</div>
<div class="ant-form-item">
<label for="password" class="col-6" required>备注:</label>
<div class="col-14">
@ -43,7 +43,7 @@
</div>
</div>
<div class="ant-form-item">
<div class="ant-checkbox col-14 col-offset-6">
<div class="col-14 col-offset-6">
<label>
<input type="checkbox"> 我是同意的
</label>

2
components/form/demo/inline-form.md

@ -28,7 +28,7 @@
<div class="ant-form-item">
<input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div>
<div class="ant-checkbox">
<div class="ant-checkbox-inline">
<label>
<input type="checkbox"> 记住我
</label>

16
components/form/demo/mix.md

@ -97,16 +97,22 @@ React.render(
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>ant-radio:</label>
<div className="col-10">
<div className="col-16">
<p className="ant-form-text">请填写 ant-design 的 radio</p>
</div>
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>ant-checkbox:</label>
<div className="col-10">
<p className="ant-form-text">
<Checkbox />
</p>
<div className="col-16">
<label className="ant-checkbox-inline">
<Checkbox /> 选项一
</label>
<label className="ant-checkbox-inline">
<Checkbox /> 选项二
</label>
<label className="ant-checkbox-inline">
<Checkbox /> 选项三
</label>
</div>
</div>
<div className="ant-form-item">

75
style/components/form.less

@ -27,7 +27,7 @@ label {
.@{css-prefix}form-item {
margin-bottom: @form-item-margin-bottom;
label {
> label {
color: @label-color;
text-align: right;
padding-right: 8px;
@ -74,46 +74,13 @@ form {
font-size: @font-size-base;
background: transparent;
}
// Radio & Checkbox
.@{css-prefix}radio,
.@{css-prefix}checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
height: @input-height-lg;
label {
min-height: @line-height-computed;
padding: 7px 0 7px 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
}
.@{css-prefix}radio input[type="radio"],
.@{css-prefix}radio-inline input[type="radio"],
.@{css-prefix}checkbox input[type="checkbox"],
.@{css-prefix}checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
margin-top: 4px \9;
}
.@{css-prefix}radio + .@{css-prefix}radio,
.@{css-prefix}checkbox + .@{css-prefix}checkbox {
margin-top: -5px;
}
// Radios and checkboxes on same line
.@{css-prefix}radio-inline,
.@{css-prefix}checkbox-inline {
position: relative;
display: inline-block;
padding: 7px 20px;
padding-right: 0!important;
margin-bottom: 0;
margin-right: 10px;
padding: 7px 0;
margin-right: 16px;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
@ -153,19 +120,6 @@ input[type="checkbox"] {
.@{css-prefix}form-item {
.make-row;
}
.@{css-prefix}radio,
.@{css-prefix}checkbox,
.@{css-prefix}radio-inline,
.@{css-prefix}checkbox-inline {
margin-top: 0;
margin-bottom: 0;
}
.@{css-prefix}radio,
.@{css-prefix}checkbox {
min-height: (@line-height-computed + (@input-padding-vertical-base + 1));
}
}
//== Inline Form
@ -197,23 +151,6 @@ input[type="checkbox"] {
.has-feedback {
display: inline-block;
}
.@{css-prefix}radio,
.@{css-prefix}checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
label {
padding-left: 0;
}
}
.@{css-prefix}radio input[type="radio"],
.@{css-prefix}checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
}
}
@ -221,6 +158,12 @@ input[type="checkbox"] {
label {
padding-top: 7px;
padding-bottom: 7px;
> input[type="radio"],
> input[type="checkbox"],
> .@{css-prefix}checkbox,
> .@{css-prefix}radio {
margin-right: 3px;
}
}
}

2
style/mixins/form.less

@ -51,7 +51,7 @@
label {
display: inline-block;
font-size: @font-size-base;
max-width: 100%;
max-width: 100%;
}
input[type="search"] {

Loading…
Cancel
Save