Commit ba3e34e0870b196fef496dd121865ce8adcb319b

Authored by 梁灏
1 parent 73d10c28

update some styles

update some styles
src/styles/components/date-picker.less
... ... @@ -5,6 +5,7 @@
5 5  
6 6 .@{date-picker-prefix-cls} {
7 7 position: relative;
  8 + line-height: normal;
8 9 .@{select-dropdown-prefix-cls} {
9 10 width: auto;
10 11 padding: 0;
... ...
src/styles/components/form.less
... ... @@ -35,7 +35,7 @@
35 35 .clearfix();
36 36 &-content {
37 37 position: relative;
38   - //line-height: 32px;
  38 + line-height: 32px;
39 39 font-size: @font-size-small;
40 40 }
41 41  
... ...
src/styles/components/select.less
... ... @@ -10,6 +10,7 @@
10 10 color: @text-color;
11 11 font-size: @font-size-base;
12 12 position: relative;
  13 + line-height: normal;
13 14  
14 15 &-selection {
15 16 display: block;
... ... @@ -123,10 +124,11 @@
123 124 height: @input-height-base - 2px;
124 125 line-height: @input-height-base - 2px;
125 126 color: @input-placeholder-color;
  127 + font-size: @font-size-small;
126 128 overflow: hidden;
127 129 text-overflow: ellipsis;
128 130 white-space: nowrap;
129   - padding-left: 8px;
  131 + padding-left: 4px;
130 132 padding-right: 22px;
131 133 }
132 134 }
... ... @@ -164,7 +166,7 @@
164 166 &-multiple &-input{
165 167 height: @input-height-base - 3px;
166 168 line-height: @input-height-base;
167   - padding: 0 0 0 6px;
  169 + padding: 0 0 0 4px;
168 170 }
169 171  
170 172 &-not-found{
... ...
src/styles/components/slider.less
1 1 @slider-prefix-cls: ~"@{css-prefix}slider";
2 2  
3 3 .@{slider-prefix-cls} {
  4 + line-height: normal;
4 5 &-wrap{
5 6 width: 100%;
6 7 height: @slider-height;
... ...
src/styles/mixins/checkbox.less
... ... @@ -146,9 +146,7 @@
146 146 cursor: pointer;
147 147 font-size: @font-size-small;
148 148 display: inline-block;
149   - & + & {
150   - margin-left: 8px;
151   - }
  149 + margin-right: 8px;
152 150 &-disabled{
153 151 cursor: @cursor-disabled;
154 152 }
... ...
src/styles/themes/default/custom.less
... ... @@ -155,5 +155,5 @@
155 155 @slider-height : 4px;
156 156 @slider-margin : 16px 0;
157 157 @slider-button-wrap-size : 18px;
158   -@slider-button-wrap-offset : -5px;
  158 +@slider-button-wrap-offset : -4px;
159 159 @slider-disabled-color : #ccc;
160 160 \ No newline at end of file
... ...
test/routers/form.vue
... ... @@ -48,12 +48,98 @@
48 48 <Icon type="social-snapchat"></Icon>
49 49 <span>Snapchat</span>
50 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 131 </Checkbox-group>
52 132 </form-item>
53 133 <form-item label="select" prop="select">
54 134 <i-select :model.sync="form.select" style="width:200px" clearable>
55 135 <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
56 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 143 </form-item>
58 144 <form-item label="select多选" prop="selectm">
59 145 <i-select :model.sync="form.selectm" multiple style="width:260px">
... ... @@ -64,12 +150,10 @@
64 150 <Slider :value.sync="form.slider" range></Slider>
65 151 </form-item>
66 152 <form-item label="日期" prop="date">
67   - {{ form.date }}
68 153 <Time-picker :value.sync="form.date" type="time" placeholder="选择时间" style="width: 168px"></Time-picker>
69 154 </form-item>
70 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 157 </form-item>
74 158 <form-item>
75 159 <i-button type="primary" @click="onSubmit('form')">提交</i-button>
... ...