ant-design/components/form/style/index.less
afc163 0ca6a1c24a css modularize (#1448)
* css modularize

* Add alert style

* Move more component style

* Move iconfont to common style

* Move layout style

* Move more component style

* Move all components

* Fix lots of mixin deps

* remove css-prefix from less

* fix a button icon style bug

* restructure

* fix index

* add dist

* fix jest

* fix some components style

* clean webpack config

* check more components style

* update tabs

* update scripts

* update scripts

* fix form style

* fix more style

* Fix select width

* Fix form and tabs style
2016-04-27 20:44:36 +08:00

479 lines
8.3 KiB
Plaintext

@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "../../input/style/mixin";
@import "../../button/style/mixin";
@import "../../layout/style/mixin";
@import "./mixin";
@form-prefix-cls: ant-form;
.reset-form();
label {
position: relative;
> .@{iconfont-css-prefix} {
vertical-align: top;
font-size: @font-size-base;
}
}
.@{form-prefix-cls}-item-required:before {
display: inline-block;
margin-right: 4px;
content: "*";
font-family: SimSun;
font-size: @font-size-base;
color: @label-required-color;
}
//== Input type: with extra icon
.has-feedback {
.input-with-icon();
}
//== Style for input-group: input with label, with button or dropdown...
.ant-input-group {
.input-group(~"ant-input");
}
// Radio && Checkbox
input[type="radio"],
input[type="checkbox"] {
&[disabled],
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
// These classes are used directly on <label>s
.ant-radio-inline,
.ant-radio-vertical,
.ant-checkbox-inline,
.ant-checkbox-vertical {
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
// These classes are used on elements with <label> descendants
.ant-radio,
.ant-checkbox {
&.disabled,
fieldset[disabled] & {
label {
cursor: @cursor-disabled;
}
}
}
// Form items
// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
.@{form-prefix-cls}-item {
font-size: @font-size-base;
margin-bottom: @form-item-margin-bottom;
color: #666;
&-control {
line-height: 32px;
}
&.@{form-prefix-cls}-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;
}
}
.ant-switch {
margin: 4px 0;
}
}
.@{form-prefix-cls}-explain {
line-height: 1.5;
margin-top: 3px;
}
.@{form-prefix-cls}-explain,
.@{form-prefix-cls}-extra {
color: #999;
}
.@{form-prefix-cls}-text {
display: inline-block;
padding-right: 8px;
}
.@{form-prefix-cls}-split {
display: block;
text-align: center;
}
// 表单下的输入框尺寸唯一: 大尺寸
form {
.has-feedback {
.@{iconfont-css-prefix} {
.square(@input-height-lg);
line-height: @input-height-lg;
}
.ant-input {
padding-right: 24px;
}
}
.ant-input,
.ant-input-group .ant-input,
.ant-input-group .ant-input-group-addon {
.input-lg();
}
textarea.ant-input {
height: auto;
}
// input[type=file]
.ant-upload {
background: transparent;
}
input[type="radio"],
input[type="checkbox"] {
width: 14px;
height: 14px;
}
// Radios and checkboxes on same line
.ant-radio-inline,
.ant-checkbox-inline {
display: inline-block;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
margin-left: 8px;
&:first-child {
margin-left: 0;
}
}
.ant-checkbox-vertical,
.ant-radio-vertical {
display: block;
}
.ant-input-number {
margin-top: -1px;
margin-right: 8px;
}
.ant-select {
width: 100%;
}
}
// Input combined with select
.ant-input-group-wrap {
.ant-select-selection {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
&:hover {
border-color: @border-color-base;
}
}
.ant-select-selection--single {
margin-left: -1px;
height: @input-height-lg;
background-color: #eee;
.ant-select-selection__rendered {
padding-left: 8px;
padding-right: 25px;
line-height: 30px;
}
}
.ant-select-open .ant-select-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
.@{form-prefix-cls}-horizontal {
.@{form-prefix-cls}-item {
.make-row;
}
.ant-radio-inline,
.ant-checkbox-inline,
.ant-input {
vertical-align: baseline;
}
}
//== Inline Form
.@{form-prefix-cls}-inline {
.@{form-prefix-cls}-item {
display: inline-block;
margin-right: 10px;
margin-bottom: 0;
&-with-help {
margin-bottom: 24px;
}
> div {
display: inline-block;
}
}
.ant-input {
display: inline-block;
width: auto;
vertical-align: middle;
}
.@{form-prefix-cls}-text {
display: inline-block;
}
.has-feedback {
display: inline-block;
}
// Fix https://github.comdesigndesign/issues/1040
.@{form-prefix-cls}-explain {
position: absolute;
}
}
.@{form-prefix-cls}-horizontal,
.@{form-prefix-cls}-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;);
.ant-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;
}
//select
.ant-select {
&-selection {
border-color: @warning-color;
box-shadow: 0 0 0 2px fade(@warning-color, 20%);
}
&-arrow {
color: @warning-color;
}
}
//datepicker
.ant-calendar-picker-icon:after {
color: @warning-color;
}
//timepicker
.ant-time-picker-icon:after {
color: @warning-color;
}
//input-number
.ant-input-number {
border-color: @warning-color;
box-shadow: 0 0 0 2px fade(@warning-color, 20%);
&:not([disabled]):hover {
border-color: @warning-color;
}
}
}
.has-error {
.form-control-validation(@error-color; @error-color;);
&.has-feedback:after {
content: '\e631';
color: @error-color;
}
//select
.ant-select {
&-selection {
border-color: @error-color;
box-shadow: 0 0 0 2px fade(@error-color, 20%);
}
&-arrow {
color: @error-color;
}
}
.ant-select-combobox .ant-select-search__field:focus {
box-shadow: none;
}
//datepicker
.ant-calendar-picker-icon:after {
color: @error-color;
}
//timepicker
.ant-time-picker-picker-icon:after {
color: @error-color;
}
//input-number
.ant-input-number {
border-color: @error-color;
box-shadow: 0 0 0 2px fade(@error-color, 20%);
&:not([disabled]):hover {
border-color: @error-color;
}
}
}
.is-validating {
&.has-feedback:after {
display: inline-block;
animation: loadingCircle 1s infinite linear;
content: "\e6a1";
color: #999;
}
}
.advanced-search-form {
.@{form-prefix-cls}-item {
margin-bottom: 16px;
}
.ant-input,
.ant-input-group .ant-input,
.ant-input-group .ant-input-group-addon {
height: 28px;
}
}
// 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);
}
}