From aea2d4796130d172cc84ea42bab3e84de6ef7c78 Mon Sep 17 00:00:00 2001 From: simaQ Date: Thu, 11 Jun 2015 09:57:37 +0800 Subject: [PATCH 1/8] merge mixins/input.less --- style/mixins/input.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/mixins/input.less b/style/mixins/input.less index 192a3f65bf..efa06e006a 100644 --- a/style/mixins/input.less +++ b/style/mixins/input.less @@ -22,6 +22,7 @@ } } +// Basic style for input .input() { position: relative; display: block; From f4db8fe4d97d89f8c173ca5c7c2e5946628850b0 Mon Sep 17 00:00:00 2001 From: simaQ Date: Mon, 15 Jun 2015 11:43:18 +0800 Subject: [PATCH 2/8] add form styles --- style/components/form.less | 82 +++++++++++++ style/mixins/form.less | 106 ++++++++++++++++ style/mixins/index.less | 1 + style/mixins/input.less | 201 ++++++++++++++++++++++++++++++- style/themes/default/custom.less | 12 +- 5 files changed, 395 insertions(+), 7 deletions(-) create mode 100644 style/mixins/form.less diff --git a/style/components/form.less b/style/components/form.less index e69de29bb2..81d37a8df9 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -0,0 +1,82 @@ +@import "../mixins/index"; + +.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); +} + +// Form groups +// You should vrap labels and controls in .@{css-prefix}form-item for optimum spacing +.@{css-prefix}form-item { + margin-bottom: 20px; +} + +// Input styles +//== Basic +.@{css-prefix}input { + .input; +} + +//== Input type: with extra icon +// TODO: sizing options +.has-feedback { + .input-with-icon(); +} + +//== Style for input-group +.@{css-prefix}input-group { + .input-group(~"@{css-prefix}input"); +} + +// Form layout +//== Horizontal Form +.@{css-prefix}form-horizontal { + .@{css-prefix}form-item { + .make-row; + } +} + +//== Inline Form +// Attention: Inline form does only apply to within viewports that are at least 768px wide +.@{css-prefix}form-inline { + @media (min-width: @screen-sm-min) { + .@{css-prefix}form-item { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + + // 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` + vertical-align: middle; + } + + .has-feedback { + display: inline-block; + } + } +} + +// Validation state +.has-success { + .form-control-validation(@success-color; @success-color;); +} +.has-warning { + .form-control-validation(@warning-color; @warning-color;); +} +.has-error { + .form-control-validation(@error-color; @error-color;); +} +.@{css-prefix}form-explain { + display: block; + margin-bottom: 10px; +} diff --git a/style/mixins/form.less b/style/mixins/form.less new file mode 100644 index 0000000000..bbd6401e44 --- /dev/null +++ b/style/mixins/form.less @@ -0,0 +1,106 @@ +// 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 { + 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; + } + &: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; + } +} + +// Reset form styles +// ----------------------------- +// From Bootstrap framework +.reset-form() { + fieldset { + padding: 0; + margin: 0; + border: 0; + min-width: 0; + } + + legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 20px; + font-size: (@font-size-base * 1.5); + line-height: inherit; + color: @legend-color; + border: 0; + border-bottom: 1px solid @legend-border-color; + } + + label { + display: inline-block; + margin-bottom: 5px; + max-width: 100%; + font-weight: bold; + } + + input[type="search"] { + .box-sizing(border-box); + } + + // Position radios and checkboxes better + input[type="radio"], + input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; // IE8-9 + line-height: normal; + } + + input[type="file"] { + display: block; + } + + // Make range inputs behave like textual form controls + input[type="range"] { + display: block; + width: 100%; + } + + // Make multiple select elements height not fixed + select[multiple], + select[size] { + height: auto; + } + + // Focus for file, radio, and checkbox + input[type="file"]:focus, + input[type="radio"]:focus, + input[type="checkbox"]:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; + } + + // Adjust output element + output { + display: block; + padding-top: 15px; + font-size: @font-size-base; + line-height: @line-height-base; + color: @input-color; + } +} diff --git a/style/mixins/index.less b/style/mixins/index.less index 9db3fb513f..4ec3da1919 100644 --- a/style/mixins/index.less +++ b/style/mixins/index.less @@ -12,6 +12,7 @@ // for common elements @import "button.less"; @import "input.less"; +@import "form.less"; // Layout @import "grid.less"; diff --git a/style/mixins/input.less b/style/mixins/input.less index efa06e006a..b409939076 100644 --- a/style/mixins/input.less +++ b/style/mixins/input.less @@ -22,6 +22,17 @@ } } +// common mixins for input +.input-lg() { + padding: @input-padding-lg; + font-size: @input-font-size-lg; +} + +.input-sm() { + padding: @input-padding-vertical-sm @input-padding-horizontal; + font-size: @input-font-size-sm; +} + // Basic style for input .input() { position: relative; @@ -69,12 +80,194 @@ // Size &-lg { - padding: @input-padding-lg; - font-size: @input-font-size-lg; + .input-lg(); } &-sm { - padding: @input-padding-vertical-sm @input-padding-horizontal; - font-size: @input-font-size-sm; + .input-sm(); } } + +// Input with icons, you can define @height if you wish to change the input size +.input-with-icon(@height: @input-height-base) { + position: relative; + + .@{iconfont-css-prefix} { + position: absolute; + bottom: 0; + right: 0; + z-index: 2; + .square(@height); + font-size: 14px; + line-height: @height; + text-align: center; + pointer-events: none; + } +} + +// Input-group +.input-group(@inputClass) { + // define the button style for input-group + @inputBtn: input-btn; + + position: relative; + display: table; + border-collapse: separate; + + // Undo padding and float of grid classes + &[class*="col-"] { + float: none; + padding-left: 0; + padding-right: 0; + } + + &-addon, + &-btn, + &-btn-vertical, + .@{inputClass} { + display: table-cell; + + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + } + + &-addon, + &-btn, + &-btn-vertical { + width: 1%; + white-space: nowrap; + vertical-align: middle; + } + + .@{inputClass} { + position: relative; + z-index: 2; + float: left; + width: 100%; + margin-bottom: 0; + } + + &-addon { + padding: @input-padding-vertical-base @input-padding-horizontal; + font-size: @font-size-base; + font-weight: normal; + line-height: 1; + color: @input-color; + text-align: center; + background-color: #eee; + border: 1px solid @input-border-color; + border-radius: @input-border-radius; + + input[type="radio"], + input[type="checkbox"] { + margin-top: 0; + } + } + + .@{inputBtn} { + .btn(); + .button-size(@input-padding-vertical-base @input-padding-horizontal; @font-size-base; @input-border-radius); + .button-variant(@input-color; #eee; @input-border-color); + + .@{iconfont-css-prefix} { + margin-left: 8px; + } + } + + &-btn { + position: relative; + + > .@{inputBtn} { + position: relative; + + .@{inputBtn} { + margin-left: -1px; + } + } + + // Negative margin to only have a 1px border between the two + &:first-child { + > .@{inputBtn} { + margin-right: -1px; + } + } + &:last-child { + > .@{inputBtn} { + margin-left: -1px; + } + } + } + + &-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, + &-btn:first-child > .@{inputBtn}, + &-btn:last-child > .@{inputBtn}:not(:last-child):not(.dropdown-toggle) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + &-addon:first-child { + border-right: 0; + } + + .@{inputClass}:last-child, + &-addon:last-child, + &-btn:last-child > .@{inputBtn}, + &-btn:first-child > .@{inputBtn}:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + &-addon:last-child { + border-left: 0; + } + + // Sizing options + &-lg > .@{inputClass}, + &-lg > &-addon, + &-lg > &-btn > .@{inputBtn} { + .input-lg(); + } + + &-sm > .@{inputClass}, + &-sm > &-addon, + &-sm > &-btn > .@{inputBtn} { + .input-sm(); + } + &-sm > &-btn > .@{inputBtn} { + top: -2px; + } + + // TODO: input-group-btn-vertical: different button size +} diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index 58ee71ffc6..24e80a3b3f 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -1,8 +1,11 @@ -// prefix class +// Prefix classname @css-prefix : ant-; -// color +// Color @primary-color : #2db7f5; +@success-color : #87d068; +@error-color : #ff6600; +@warning-color : #fac450; // ------ Base & Require ------ @body-background : #fff; @@ -46,7 +49,7 @@ @ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34); @ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86); -// BUTTONS +// Buttons @btn-font-weight : normal; @btn-primary-color : #fff; @@ -118,6 +121,9 @@ @legend-color : #222; @legend-border-color : #e5e5e5; +// Label +@label-required-color : #F44336; + // Input @input-height-base: 28px; @input-height-lg: 32px; From c4cd3ce49536c36fa0cc7d7d6adcfd7fec6a7c10 Mon Sep 17 00:00:00 2001 From: simaQ Date: Mon, 15 Jun 2015 20:24:01 +0800 Subject: [PATCH 3/8] add form page --- components/form/demo/basic.md | 30 +++++ components/form/demo/disabled.md | 38 ++++++ components/form/demo/explain-text.md | 19 +++ components/form/demo/feedback-input.md | 51 ++++++++ components/form/demo/form-controls.md | 87 ++++++++++++++ components/form/demo/horizontal-form.md | 34 ++++++ components/form/demo/inline-form.md | 23 ++++ components/form/demo/input-group.md | 60 ++++++++++ components/form/demo/sizing.md | 61 ++++++++++ components/form/demo/static-control.md | 27 +++++ components/form/demo/validate.md | 35 ++++++ components/form/index.md | 11 ++ style/components/form.less | 147 +++++++++++++++++++++++- style/mixins/input.less | 9 +- style/themes/default/custom.less | 2 + 15 files changed, 629 insertions(+), 5 deletions(-) create mode 100644 components/form/demo/basic.md create mode 100644 components/form/demo/disabled.md create mode 100644 components/form/demo/explain-text.md create mode 100644 components/form/demo/feedback-input.md create mode 100644 components/form/demo/form-controls.md create mode 100644 components/form/demo/horizontal-form.md create mode 100644 components/form/demo/inline-form.md create mode 100644 components/form/demo/input-group.md create mode 100644 components/form/demo/sizing.md create mode 100644 components/form/demo/static-control.md create mode 100644 components/form/demo/validate.md create mode 100644 components/form/index.md diff --git a/components/form/demo/basic.md b/components/form/demo/basic.md new file mode 100644 index 0000000000..a6f5a70819 --- /dev/null +++ b/components/form/demo/basic.md @@ -0,0 +1,30 @@ +# Basic from + +- order: 1 + +表单基本实例 + +`.ant-input` 类为 ``、` + +

select 下拉列表

+ + +

checkbox 复选框

+
+ +
+ +
+ +
+ + + + + + +

radio 单选框

+
+ +
+
+ +
+ +
+ +
+ + + + + +```` diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md new file mode 100644 index 0000000000..2fa14116f7 --- /dev/null +++ b/components/form/demo/horizontal-form.md @@ -0,0 +1,34 @@ +# Horizontal form + +- order: 2 + +水平排列的表单 + +为 `
` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 row)，并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/)，可以实现 label 标签和表单控件的水平并排排列。 + +--- + +````html + +
+ +
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+ +
+```` diff --git a/components/form/demo/inline-form.md b/components/form/demo/inline-form.md new file mode 100644 index 0000000000..dc0494a7aa --- /dev/null +++ b/components/form/demo/inline-form.md @@ -0,0 +1,23 @@ +# Horizontal form + +- order: 3 + +内联的表单 + +在**视口宽度大于等于 768px **时，你可以为 `
` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。 + +--- + +````html + +
+ + +
+
+ + +
+ +
+```` diff --git a/components/form/demo/input-group.md b/components/form/demo/input-group.md new file mode 100644 index 0000000000..609459a64f --- /dev/null +++ b/components/form/demo/input-group.md @@ -0,0 +1,60 @@ +# Input group + +- order: 9 + +输入框组合 + + + +--- + +````html +

带标签的输入框

+
+ Http:// + +
+
+
+ + .com +
+
+
+ Http:// + + .com +
+ +

作为额外元素的按钮式下拉菜单

+
+ +
+ +
+
+ +

带按钮的菜单

+
+ +
+ +
+
+ +

微调输入框

+
+ +
+ + +
+
+```` diff --git a/components/form/demo/sizing.md b/components/form/demo/sizing.md new file mode 100644 index 0000000000..0bbdaffc00 --- /dev/null +++ b/components/form/demo/sizing.md @@ -0,0 +1,61 @@ +# Sizing options + +- order: 10 + +关于尺寸，我们提供大、中、小三种尺寸，默认为中尺寸。 + +待续... + +--- + +````html +

input

+ + +
+ + +
+ + + +

input-group

+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+ +

form-item

+故事未完待续... + +```` diff --git a/components/form/demo/static-control.md b/components/form/demo/static-control.md new file mode 100644 index 0000000000..c49d8fb99b --- /dev/null +++ b/components/form/demo/static-control.md @@ -0,0 +1,27 @@ +# Static control + +- order: 5 + +静态文本表单控件：将一行静态文本和 label 标签置于同一行。 + +为 `

` 标签添加 `.ant-form-text` 类即可。 + +--- + +````html +

+
+ +
+

Ant

+
+
+
+ +
+ +
+
+ +
+```` diff --git a/components/form/demo/validate.md b/components/form/demo/validate.md new file mode 100644 index 0000000000..ff3ca4b6c0 --- /dev/null +++ b/components/form/demo/validate.md @@ -0,0 +1,35 @@ +# Validate status + +- order: 7 + +校验状态 + +提供三种校验状态类：`.has-success` `.has-error` `.has-warning`, 分别代表成功、失败、警告 + +为 `ant-form-item` 类添加以上三种校验状态类即可。 + +--- + +````html +

成功

+
+ + +
+ Yes, I know you are ant. +
+
+ +

失败

+
+ + +
+ +

警告

+
+ + +
+ +```` diff --git a/components/form/index.md b/components/form/index.md new file mode 100644 index 0000000000..9759701b92 --- /dev/null +++ b/components/form/index.md @@ -0,0 +1,11 @@ +# Form + +- category: CSS +- chinese: 表单 +- order: 3 + +--- + +## 如何使用 + +孵化中，待完善...... diff --git a/style/components/form.less b/style/components/form.less index 81d37a8df9..3c9d31a7cb 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -19,7 +19,25 @@ label[required]:before { } // Input styles -//== Basic +// 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; } @@ -35,12 +53,106 @@ label[required]:before { .input-group(~"@{css-prefix}input"); } +// Other form controls +// Radio & Checkbox +.@{css-prefix}radio, +.@{css-prefix}checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; + + label { + min-height: @line-height-computed; + padding-left: 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; // Move up sibling radios or checkboxes for tighter spacing +} + +// Radios and checkboxes on same line +.@{css-prefix}radio-inline, +.@{css-prefix}checkbox-inline { + position: relative; + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + 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