chenhaodong / mew-iview

Commit 5fc37ce45b3a0fb83fd84bb6079bb79de2d8df21

Authored by 梁灏
1 parent b12fa396

update Button style

Showing 3 changed files with 58 additions and 7 deletions   Show diff stats
Inline Side-by-side
examples/routers/button.vue
  Show/Hide comments   View file @5fc37ce
1 1 <template>
2 2 <div>
  3 + <Button icon="logo-github" size="small" shape="circle"></Button>
  4 + <Button icon="logo-github" size="large" shape="circle"></Button>
  5 + <Button icon="logo-github" shape="circle"></Button>
  6 + <Button icon="logo-github" size="small"></Button>
  7 + <Button size="small">EN</Button>
  8 + <Button icon="logo-github"></Button>
  9 + <Button>EN</Button>
  10 + <Button icon="logo-github" size="large"></Button>
  11 + <Button size="large">EN</Button>
  12 + <ButtonGroup size="small">
  13 + <Button icon="logo-github"></Button>
  14 + <Button icon="logo-twitter"></Button>
  15 + <Button>
  16 + EN
  17 + </Button>
  18 + </ButtonGroup>
  19 + <ButtonGroup>
  20 + <Button icon="logo-github"></Button>
  21 + <Button icon="logo-twitter"></Button>
  22 + <Button>
  23 + EN
  24 + </Button>
  25 + </ButtonGroup>
  26 + <ButtonGroup size="large">
  27 + <Button icon="logo-github"></Button>
  28 + <Button icon="logo-twitter"></Button>
  29 + <Button >
  30 + EN
  31 + </Button>
  32 + </ButtonGroup>
  33 + <br><br><br>
3 34 <Button type="default">Default</Button>
4 35 <Button type="primary">Primary</Button>
5 36 <Button type="dashed">Dashed</Button>
... ...
src/styles/custom.less
  Show/Hide comments   View file @5fc37ce
... ... @@ -67,9 +67,12 @@
67 67  
68 68 // Button
69 69 @btn-font-weight : normal;
70   -@btn-padding-base : 6px 15px;
71   -@btn-padding-large : 6px 15px 7px 15px;
72   -@btn-padding-small : 2px 7px;
  70 +@btn-padding-base : 5px 15px 6px;
  71 +@btn-padding-large : 6px 15px 6px 15px;
  72 +@btn-padding-small : 1px 7px 2px;
  73 +@btn-padding-base-icon : 6px 15px 6px;
  74 +@btn-padding-large-icon : 6px 15px 7px 15px;
  75 +@btn-padding-small-icon : 2px 7px 2px;
73 76 @btn-font-size : 12px;
74 77 @btn-font-size-large : 14px;
75 78 @btn-border-radius : 4px;
... ...
src/styles/mixins/button.less
  Show/Hide comments   View file @5fc37ce
... ... @@ -68,17 +68,17 @@
68 68 & .@{btnClassName}-icon-only .ivu-icon {
69 69 font-size: 14px;
70 70 position: relative;
71   - top: 1px;
  71 + //top: 1px;
72 72 }
73 73  
74 74 &-large .@{btnClassName}-icon-only .ivu-icon{
75 75 font-size: 16px;
76   - top: 2px;
  76 + //top: 2px;
77 77 }
78 78  
79 79 &-small .@{btnClassName}-icon-only .ivu-icon{
80 80 font-size: 12px;
81   - top: 0;
  81 + //top: 0;
82 82 }
83 83  
84 84 &-circle .@{btnClassName} {
... ... @@ -106,6 +106,13 @@
106 106 }
107 107 }
108 108 }
  109 +
  110 + &-small .@{btnClassName}-icon-only{
  111 + .button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
  112 + }
  113 + &-large .@{btnClassName}-icon-only{
  114 + .button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
  115 + }
109 116 }
110 117  
111 118 .button-group-vertical-base(@btnClassName) {
... ... @@ -142,7 +149,7 @@
142 149 vertical-align: middle;
143 150 }
144 151  
145   - &-icon-only > .@{css-prefix-iconfont}{
  152 + &-icon-only&-circle > .@{css-prefix-iconfont}{
146 153 vertical-align: baseline;
147 154 }
148 155  
... ... @@ -180,6 +187,16 @@
180 187 &-small {
181 188 .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
182 189 }
  190 +
  191 + &-icon-only{
  192 + .button-size(@btn-padding-base-icon; @btn-font-size; @btn-border-radius);
  193 + }
  194 + &-icon-only&-small{
  195 + .button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
  196 + }
  197 + &-icon-only&-large{
  198 + .button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
  199 + }
183 200 }
184 201  
185 202 // Default
... ...