Commit ba3e34e0870b196fef496dd121865ce8adcb319b

Authored by 梁灏
1 parent 73d10c28

update some styles

update some styles
src/styles/components/date-picker.less
@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 5
6 .@{date-picker-prefix-cls} { 6 .@{date-picker-prefix-cls} {
7 position: relative; 7 position: relative;
  8 + line-height: normal;
8 .@{select-dropdown-prefix-cls} { 9 .@{select-dropdown-prefix-cls} {
9 width: auto; 10 width: auto;
10 padding: 0; 11 padding: 0;
src/styles/components/form.less
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 .clearfix(); 35 .clearfix();
36 &-content { 36 &-content {
37 position: relative; 37 position: relative;
38 - //line-height: 32px; 38 + line-height: 32px;
39 font-size: @font-size-small; 39 font-size: @font-size-small;
40 } 40 }
41 41
src/styles/components/select.less
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 color: @text-color; 10 color: @text-color;
11 font-size: @font-size-base; 11 font-size: @font-size-base;
12 position: relative; 12 position: relative;
  13 + line-height: normal;
13 14
14 &-selection { 15 &-selection {
15 display: block; 16 display: block;
@@ -123,10 +124,11 @@ @@ -123,10 +124,11 @@
123 height: @input-height-base - 2px; 124 height: @input-height-base - 2px;
124 line-height: @input-height-base - 2px; 125 line-height: @input-height-base - 2px;
125 color: @input-placeholder-color; 126 color: @input-placeholder-color;
  127 + font-size: @font-size-small;
126 overflow: hidden; 128 overflow: hidden;
127 text-overflow: ellipsis; 129 text-overflow: ellipsis;
128 white-space: nowrap; 130 white-space: nowrap;
129 - padding-left: 8px; 131 + padding-left: 4px;
130 padding-right: 22px; 132 padding-right: 22px;
131 } 133 }
132 } 134 }
@@ -164,7 +166,7 @@ @@ -164,7 +166,7 @@
164 &-multiple &-input{ 166 &-multiple &-input{
165 height: @input-height-base - 3px; 167 height: @input-height-base - 3px;
166 line-height: @input-height-base; 168 line-height: @input-height-base;
167 - padding: 0 0 0 6px; 169 + padding: 0 0 0 4px;
168 } 170 }
169 171
170 &-not-found{ 172 &-not-found{
src/styles/components/slider.less
1 @slider-prefix-cls: ~"@{css-prefix}slider"; 1 @slider-prefix-cls: ~"@{css-prefix}slider";
2 2
3 .@{slider-prefix-cls} { 3 .@{slider-prefix-cls} {
  4 + line-height: normal;
4 &-wrap{ 5 &-wrap{
5 width: 100%; 6 width: 100%;
6 height: @slider-height; 7 height: @slider-height;
src/styles/mixins/checkbox.less
@@ -146,9 +146,7 @@ @@ -146,9 +146,7 @@
146 cursor: pointer; 146 cursor: pointer;
147 font-size: @font-size-small; 147 font-size: @font-size-small;
148 display: inline-block; 148 display: inline-block;
149 - & + & {  
150 - margin-left: 8px;  
151 - } 149 + margin-right: 8px;
152 &-disabled{ 150 &-disabled{
153 cursor: @cursor-disabled; 151 cursor: @cursor-disabled;
154 } 152 }
src/styles/themes/default/custom.less
@@ -155,5 +155,5 @@ @@ -155,5 +155,5 @@
155 @slider-height : 4px; 155 @slider-height : 4px;
156 @slider-margin : 16px 0; 156 @slider-margin : 16px 0;
157 @slider-button-wrap-size : 18px; 157 @slider-button-wrap-size : 18px;
158 -@slider-button-wrap-offset : -5px; 158 +@slider-button-wrap-offset : -4px;
159 @slider-disabled-color : #ccc; 159 @slider-disabled-color : #ccc;
160 \ No newline at end of file 160 \ No newline at end of file
test/routers/form.vue
@@ -48,12 +48,98 @@ @@ -48,12 +48,98 @@
48 <Icon type="social-snapchat"></Icon> 48 <Icon type="social-snapchat"></Icon>
49 <span>Snapchat</span> 49 <span>Snapchat</span>
50 </Checkbox> 50 </Checkbox>
  51 + <Checkbox value="twitter">
  52 + <Icon type="social-twitter"></Icon>
  53 + <span>Twitter</span>
  54 + </Checkbox>
  55 + <Checkbox value="facebook">
  56 + <Icon type="social-facebook"></Icon>
  57 + <span>Facebook</span>
  58 + </Checkbox>
  59 + <Checkbox value="github">
  60 + <Icon type="social-github"></Icon>
  61 + <span>Github</span>
  62 + </Checkbox>
  63 + <Checkbox value="snapchat">
  64 + <Icon type="social-snapchat"></Icon>
  65 + <span>Snapchat</span>
  66 + </Checkbox>
  67 + <Checkbox value="twitter">
  68 + <Icon type="social-twitter"></Icon>
  69 + <span>Twitter</span>
  70 + </Checkbox>
  71 + <Checkbox value="facebook">
  72 + <Icon type="social-facebook"></Icon>
  73 + <span>Facebook</span>
  74 + </Checkbox>
  75 + <Checkbox value="github">
  76 + <Icon type="social-github"></Icon>
  77 + <span>Github</span>
  78 + </Checkbox>
  79 + <Checkbox value="snapchat">
  80 + <Icon type="social-snapchat"></Icon>
  81 + <span>Snapchat</span>
  82 + </Checkbox>
  83 + <Checkbox value="twitter">
  84 + <Icon type="social-twitter"></Icon>
  85 + <span>Twitter</span>
  86 + </Checkbox>
  87 + <Checkbox value="facebook">
  88 + <Icon type="social-facebook"></Icon>
  89 + <span>Facebook</span>
  90 + </Checkbox>
  91 + <Checkbox value="github">
  92 + <Icon type="social-github"></Icon>
  93 + <span>Github</span>
  94 + </Checkbox>
  95 + <Checkbox value="snapchat">
  96 + <Icon type="social-snapchat"></Icon>
  97 + <span>Snapchat</span>
  98 + </Checkbox>
  99 + <Checkbox value="twitter">
  100 + <Icon type="social-twitter"></Icon>
  101 + <span>Twitter</span>
  102 + </Checkbox>
  103 + <Checkbox value="facebook">
  104 + <Icon type="social-facebook"></Icon>
  105 + <span>Facebook</span>
  106 + </Checkbox>
  107 + <Checkbox value="github">
  108 + <Icon type="social-github"></Icon>
  109 + <span>Github</span>
  110 + </Checkbox>
  111 + <Checkbox value="snapchat">
  112 + <Icon type="social-snapchat"></Icon>
  113 + <span>Snapchat</span>
  114 + </Checkbox>
  115 + <Checkbox value="twitter">
  116 + <Icon type="social-twitter"></Icon>
  117 + <span>Twitter</span>
  118 + </Checkbox>
  119 + <Checkbox value="facebook">
  120 + <Icon type="social-facebook"></Icon>
  121 + <span>Facebook</span>
  122 + </Checkbox>
  123 + <Checkbox value="github">
  124 + <Icon type="social-github"></Icon>
  125 + <span>Github</span>
  126 + </Checkbox>
  127 + <Checkbox value="snapchat">
  128 + <Icon type="social-snapchat"></Icon>
  129 + <span>Snapchat</span>
  130 + </Checkbox>
51 </Checkbox-group> 131 </Checkbox-group>
52 </form-item> 132 </form-item>
53 <form-item label="select" prop="select"> 133 <form-item label="select" prop="select">
54 <i-select :model.sync="form.select" style="width:200px" clearable> 134 <i-select :model.sync="form.select" style="width:200px" clearable>
55 <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> 135 <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
56 </i-select> 136 </i-select>
  137 + <i-select :model.sync="model11" filterable>
  138 + <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
  139 + </i-select>
  140 + <i-select :model.sync="model12" filterable multiple>
  141 + <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
  142 + </i-select>
57 </form-item> 143 </form-item>
58 <form-item label="select多选" prop="selectm"> 144 <form-item label="select多选" prop="selectm">
59 <i-select :model.sync="form.selectm" multiple style="width:260px"> 145 <i-select :model.sync="form.selectm" multiple style="width:260px">
@@ -64,12 +150,10 @@ @@ -64,12 +150,10 @@
64 <Slider :value.sync="form.slider" range></Slider> 150 <Slider :value.sync="form.slider" range></Slider>
65 </form-item> 151 </form-item>
66 <form-item label="日期" prop="date"> 152 <form-item label="日期" prop="date">
67 - {{ form.date }}  
68 <Time-picker :value.sync="form.date" type="time" placeholder="选择时间" style="width: 168px"></Time-picker> 153 <Time-picker :value.sync="form.date" type="time" placeholder="选择时间" style="width: 168px"></Time-picker>
69 </form-item> 154 </form-item>
70 <form-item label="两个日期" prop="date2"> 155 <form-item label="两个日期" prop="date2">
71 - {{ form.date2 | json}}  
72 - <Date-picker :value.sync="form.date2" type="daterange" placement="bottom-end" placeholder="选择日期" @on-change="c"></Date-picker> 156 + <Date-picker :value.sync="form.date2" type="daterange" placement="bottom-start" placeholder="选择日期" @on-change="c"></Date-picker>
73 </form-item> 157 </form-item>
74 <form-item> 158 <form-item>
75 <i-button type="primary" @click="onSubmit('form')">提交</i-button> 159 <i-button type="primary" @click="onSubmit('form')">提交</i-button>