Browse Source

update datepicker input style

pull/30/head
afc163 10 years ago
parent
commit
2e68156621
  1. 16
      style/components/datepicker/Picker.less
  2. 3
      style/components/datepicker/Time.less
  3. 29
      style/mixins/input.less

16
style/components/datepicker/Picker.less

@ -11,23 +11,25 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
&-input { &-input {
.ant-input; .input;
cursor: text;
} }
&-icon { &-icon {
position: absolute; position: absolute;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
.transition(all .3s @ease-in-out); .transition(all .3s @ease-in-out);
width: 14px;
height: 14px;
right: 14px;
color: #999;
top: 50%;
line-height: 1;
margin-top: -7px;
&:after { &:after {
position: relative;
left: -22px;
font-family: "anticon";
content: "\e60c"; content: "\e60c";
font-family: "anticon";
font-size: 14px; font-size: 14px;
color: #999; color: #999;
top: 5px;
margin-right: -20px;
} }
} }
&-open .@{prefixCalendarClass}, &-open .@{prefixCalendarClass},

3
style/components/datepicker/Time.less

@ -11,7 +11,8 @@
} }
.@{prefixCalendarClass}-time-input { .@{prefixCalendarClass}-time-input {
.ant-input; .input;
margin: 0;
width: 30px; width: 30px;
height: 26px; height: 26px;
padding: 0; padding: 0;

29
style/mixins/input.less

@ -1,28 +1,3 @@
// 待删除
.ant-input(){
position: relative;
display: inline-block;
margin: 0 0;
padding: 4px 10px;
border-radius: 6px 6px;
border: 1px solid #d9d9d9;
background-color: #ffffff;
color: #666;
line-height: 1.5;
-webkit-transform: border 0.3s cubic-bezier(0.35, 0, 0.25, 1), background 0.3s cubic-bezier(0.35, 0, 0.25, 1), box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1);
transform: border 0.3s cubic-bezier(0.35, 0, 0.25, 1), background 0.3s cubic-bezier(0.35, 0, 0.25, 1), box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1);
.transition(all .3s @ease-in-out);
&:hover {
border-color: #23c0fa;
}
&:focus {
border-color: #23c0fa;
box-shadow: 0 0 3px #23c0fa;
}
}
// size mixins for input // size mixins for input
.input-lg() { .input-lg() {
padding: @input-padding-lg; padding: @input-padding-lg;
@ -39,10 +14,11 @@
// Basic style for input // Basic style for input
.input() { .input() {
position: relative; position: relative;
display: block; display: inline-block;
padding: @input-padding-vertical-base @input-padding-horizontal; padding: @input-padding-vertical-base @input-padding-horizontal;
margin-right: 8px; margin-right: 8px;
width: 100%; width: 100%;
cursor: text;
height: @input-height-base; height: @input-height-base;
font-size: @input-font-size; font-size: @input-font-size;
line-height: @line-height-base; line-height: @line-height-base;
@ -65,7 +41,6 @@
} }
&[disabled], &[disabled],
&[readonly],
fieldset[disabled] & { fieldset[disabled] & {
background-color: @input-disabled-bg; background-color: @input-disabled-bg;
opacity: 1; opacity: 1;

Loading…
Cancel
Save