From f4db8fe4d97d89f8c173ca5c7c2e5946628850b0 Mon Sep 17 00:00:00 2001 From: simaQ Date: Mon, 15 Jun 2015 11:43:18 +0800 Subject: [PATCH] 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;