mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

add basic input style

Browse Source
This commit is contained in:
simaQ 2015-06-09 19:45:18 +08:00
parent 64e2682ec6
commit 1e35a224e9
4 changed files with 90 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
style/mixins/index.less
View File

@ -11,6 +11,7 @@
// for common elements
@import "button.less";
@import "input.less";
// Layout
@import "grid.less";

56
style/mixins/input.less
View File

@ -20,3 +20,59 @@
box-shadow: 0 0 3px #23c0fa;
}
}
.input() {
position: relative;
display: block;
padding: @input-padding-vertical-base @input-padding-horizontal;
width: 100%;
font-size: @input-font-size;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
background-image: none;
border: 1px solid @input-border-color;
border-radius: @input-border-radius;
// Reset placeholder
.placeholder();
.transition(~"border @{duration-300} @{ease-in-out}, background @{duration-300} @{ease-in-out}, box-shadow @{duration-300} @{ease-in-out}");
&:not([disabled]):hover {
border-color: @input-hover-border-color;
}
&:focus {
@color-rgba: rgba(red(@input-focus-border-color), green(@input-focus-border-color), blue(@input-focus-border-color), .8);
border-color: @input-focus-border-color;
outline: 0;
box-shadow: 0 0 3px @color-rgba;
}
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: @input-disabled-bg;
opacity: 1;
}
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
}
// Reset height for `textarea`s
textarea& {
height: auto;
}
// Size
&-lg {
padding: @input-padding-lg;
font-size: @input-font-size-lg;
}
&-sm {
padding: @input-padding-vertical-sm @input-padding-horizontal;
font-size: @input-font-size-sm;
}
}

2
style/mixins/vendor-prefixes.less
View File

@ -98,7 +98,7 @@
}
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
.placeholder(@color: @input-placeholder-color) {
// Firefox
&::-moz-placeholder {
color: @color;

33
style/themes/default/custom.less
View File

@ -110,4 +110,35 @@
// Container sizes
@container-sm : (720px + @grid-gutter-width);
@container-md : (940px + @grid-gutter-width);
@container-lg : (1140px + @grid-gutter-width);
@container-lg : (1140px + @grid-gutter-width);
// Form
// --------------------------------
// Legend
@legend-color : #222;
@legend-border-color : #e5e5e5;
// Input
@input-height-base: 28px;
@input-height-lg: 32px;
@input-height-sm: 22px;
@input-padding-horizontal : 7px;
@input-padding-vertical-base : 4px;
@input-padding-vertical-sm : 1px;
@input-padding-lg : 4px 7px 5px;
@input-placeholder-color : #ccc;
@input-color : #666;
@input-border-color : #d9d9d9;
@input-bg : #fff;
@input-border-radius : @border-radius-base;
@input-font-size-lg : 14px;
@input-font-size : @font-size-base;
@input-font-size-sm : @font-size-base;
@input-hover-border-color : #23c0fa;
@input-focus-border-color : #2db7f5;
@input-disabled-bg : #f3f5f7;