ant-design/style/components/form.less
2016-04-25 16:25:57 +08:00

464 lines
8.3 KiB
Plaintext

@import "../mixins/index";
.reset-form();
label {
position: relative;
> .@{iconfont-css-prefix} {
vertical-align: top;
font-size: @font-size-base;
}
}
.@{css-prefix}form-item-required:before {
display: inline-block;
margin-right: 4px;
content: "*";
font-family: SimSun;
font-size: @font-size-base;
color: @label-required-color;
}
// Input styles
.@{css-prefix}input {
.input;
}
//== Input type: with extra icon
.has-feedback {
.input-with-icon();
}
//== Style for input-group: input with label, with button or dropdown...
.@{css-prefix}input-group {
.input-group(~"@{css-prefix}input");
}
// Radio && Checkbox
input[type="radio"],
input[type="checkbox"] {
&[disabled],
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
// These classes are used directly on <label>s
.@{css-prefix}radio-inline,
.@{css-prefix}radio-vertical,
.@{css-prefix}checkbox-inline,
.@{css-prefix}checkbox-vertical {
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
// These classes are used on elements with <label> descendants
.@{css-prefix}radio,
.@{css-prefix}checkbox {
&.disabled,
fieldset[disabled] & {
label {
cursor: @cursor-disabled;
}
}
}
// Form items
// You should wrap labels and controls in .@{css-prefix}form-item for optimum spacing
.@{css-prefix}form-item {
font-size: @font-size-base;
margin-bottom: @form-item-margin-bottom;
color: #666;
&-control {
line-height: 32px;
}
&.@{css-prefix}form-item-with-help {
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
}
> label {
color: @label-color;
text-align: right;
vertical-align: middle;
padding-top: 7px;
padding-bottom: 7px;
&:lang(en) {
padding-right: 8px;
}
}
.@{css-prefix}switch {
margin: 4px 0;
}
}
.@{css-prefix}form-explain {
line-height: 1.5;
margin-top: 3px;
}
.@{css-prefix}form-explain,
.@{css-prefix}form-extra {
color: #999;
}
.@{css-prefix}form-text {
display: inline-block;
padding-right: 8px;
}
.@{css-prefix}form-split {
display: block;
text-align: center;
}
// 表单下的输入框尺寸唯一: 大尺寸
form {
.has-feedback {
.@{iconfont-css-prefix} {
.square(@input-height-lg);
line-height: @input-height-lg;
}
.@{css-prefix}input {
padding-right: 24px;
}
}
.@{css-prefix}input,
.@{css-prefix}input-group .@{css-prefix}input,
.@{css-prefix}input-group .@{css-prefix}input-group-addon {
.input-lg();
}
textarea.@{css-prefix}input {
height: auto;
}
// input[type=file]
.@{css-prefix}upload {
background: transparent;
}
input[type="radio"],
input[type="checkbox"] {
width: 14px;
height: 14px;
}
// Radios and checkboxes on same line
.@{css-prefix}radio-inline,
.@{css-prefix}checkbox-inline {
display: inline-block;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
margin-left: 16px;
&:first-child {
margin-left: 0;
}
}
.@{css-prefix}checkbox-vertical,
.@{css-prefix}radio-vertical {
display: block;
}
.@{input-number-prefix-cls} {
margin-top: -1px;
margin-right: 8px;
}
.@{select-prefix-cls} {
width: 100%;
}
}
// Input combined with select
.@{css-prefix}input-group-wrap {
.@{select-prefix-cls}-selection {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
&:hover {
border-color: @border-color-base;
}
}
.@{select-prefix-cls}-selection--single {
margin-left: -1px;
height: @input-height-lg;
background-color: #eee;
.@{select-prefix-cls}-selection__rendered {
padding-left: 8px;
padding-right: 25px;
line-height: 30px;
}
}
.@{select-prefix-cls}-open .@{select-prefix-cls}-selection {
border-color: @border-color-base;
box-shadow: none;
}
}
.ant-search-input {
&.ant-input-group .ant-input:first-child {
border-radius: @border-radius-base;
}
.ant-search-btn {
.btn-default;
border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
margin-left: -100%;
left: -1px;
position: relative;
border-width: 0 0 0 1px;
z-index: 2;
padding-left: 8px;
padding-right: 8px;
&:hover {
border-color: @border-color-base;
}
form & {
padding-top: 6px;
padding-bottom: 6px;
}
}
&&-focus .ant-search-btn-noempty,
&:hover .ant-search-btn-noempty {
.btn-primary;
}
}
// Form layout
//== Horizontal Form
.@{css-prefix}form-horizontal {
.@{css-prefix}form-item {
.make-row;
}
.@{css-prefix}radio-inline,
.@{css-prefix}checkbox-inline,
.@{css-prefix}input {
vertical-align: top;
}
}
//== Inline Form
.@{css-prefix}form-inline {
.@{css-prefix}form-item {
display: inline-block;
margin-right: 10px;
margin-bottom: 0;
&-with-help {
margin-bottom: 24px;
}
> div {
display: inline-block;
}
}
.@{css-prefix}input {
display: inline-block;
width: auto;
vertical-align: middle;
}
.@{css-prefix}form-text {
display: inline-block;
}
.has-feedback {
display: inline-block;
}
// Fix https://github.com/ant-design/ant-design/issues/1040
.@{css-prefix}form-explain {
position: absolute;
}
}
.@{css-prefix}form-horizontal,
.@{css-prefix}form-inline {
label {
> input[type="radio"],
> input[type="checkbox"] {
margin-right: 4px;
}
}
}
// Validation state
.has-success,
.has-warning,
.has-error,
.is-validating {
&.has-feedback:after {
position: absolute;
top: 0;
right: 0;
font-family: "anticon" !important;
.square(@input-height-lg);
line-height: @input-height-lg;
text-align: center;
font-size: 14px;
.animation(zoomIn .3s @ease-out-back);
}
}
.has-success {
&.has-feedback:after {
animation-name: diffZoomIn1 !important;
}
}
.has-error {
&.has-feedback:after {
animation-name: diffZoomIn2 !important;
}
}
.has-warning {
&.has-feedback:after {
animation-name: diffZoomIn3 !important;
}
}
.has-success {
.form-control-validation(@success-color; @input-hover-border-color;);
.@{css-prefix}input {
border-color: @input-border-color;
box-shadow: none;
}
&.has-feedback:after {
content: '\e62f';
color: @success-color;
}
}
.has-warning {
.form-control-validation(@warning-color; @warning-color;);
&.has-feedback:after {
content: '\e634';
color: @warning-color;
}
// ant-select
.@{select-prefix-cls} {
&-selection {
border-color: @warning-color;
box-shadow: 0 0 0 2px tint(@warning-color, 80%);
}
&-arrow {
color: @warning-color;
}
}
// ant-datepicker
.@{calendar-prefix-cls}-picker-icon:after {
color: @warning-color;
}
// ant-timepicker
.@{timepicker-prefix-cls}-picker-icon:after {
color: @warning-color;
}
// ant-input-number
.@{input-number-prefix-cls} {
border-color: @warning-color;
box-shadow: 0 0 0 2px tint(@warning-color, 80%);
&:not([disabled]):hover {
border-color: @warning-color;
}
}
}
.has-error {
.form-control-validation(@error-color; @error-color;);
&.has-feedback:after {
content: '\e634';
color: @error-color;
}
// ant-select
.@{select-prefix-cls} {
&-selection {
border-color: @error-color;
box-shadow: 0 0 0 2px tint(@error-color, 80%);
}
&-arrow {
color: @error-color;
}
}
.@{select-prefix-cls}-combobox .@{select-prefix-cls}-search__field:focus {
box-shadow: none;
}
// ant-datepicker
.@{calendar-prefix-cls}-picker-icon:after {
color: @error-color;
}
// ant-timepicker
.@{timepicker-prefix-cls}-picker-icon:after {
color: @error-color;
}
// ant-input-number
.@{input-number-prefix-cls} {
border-color: @error-color;
box-shadow: 0 0 0 2px tint(@error-color, 80%);
&:not([disabled]):hover {
border-color: @error-color;
}
}
}
.is-validating {
&.has-feedback:after {
display: inline-block;
.animation(loadingCircle 1s infinite linear);
content: "\e6a1";
}
}
// need there different zoom animation
// otherwise won't trigger anim
@keyframes diffZoomIn1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes diffZoomIn2 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes diffZoomIn3 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}