Commit 5fc37ce45b3a0fb83fd84bb6079bb79de2d8df21
1 parent
b12fa396
update Button style
Showing
3 changed files
with
58 additions
and
7 deletions
Show diff stats
examples/routers/button.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 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 | <Button type="default">Default</Button> | 34 | <Button type="default">Default</Button> |
| 4 | <Button type="primary">Primary</Button> | 35 | <Button type="primary">Primary</Button> |
| 5 | <Button type="dashed">Dashed</Button> | 36 | <Button type="dashed">Dashed</Button> |
src/styles/custom.less
| @@ -67,9 +67,12 @@ | @@ -67,9 +67,12 @@ | ||
| 67 | 67 | ||
| 68 | // Button | 68 | // Button |
| 69 | @btn-font-weight : normal; | 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 | @btn-font-size : 12px; | 76 | @btn-font-size : 12px; |
| 74 | @btn-font-size-large : 14px; | 77 | @btn-font-size-large : 14px; |
| 75 | @btn-border-radius : 4px; | 78 | @btn-border-radius : 4px; |
src/styles/mixins/button.less
| @@ -68,17 +68,17 @@ | @@ -68,17 +68,17 @@ | ||
| 68 | & .@{btnClassName}-icon-only .ivu-icon { | 68 | & .@{btnClassName}-icon-only .ivu-icon { |
| 69 | font-size: 14px; | 69 | font-size: 14px; |
| 70 | position: relative; | 70 | position: relative; |
| 71 | - top: 1px; | 71 | + //top: 1px; |
| 72 | } | 72 | } |
| 73 | 73 | ||
| 74 | &-large .@{btnClassName}-icon-only .ivu-icon{ | 74 | &-large .@{btnClassName}-icon-only .ivu-icon{ |
| 75 | font-size: 16px; | 75 | font-size: 16px; |
| 76 | - top: 2px; | 76 | + //top: 2px; |
| 77 | } | 77 | } |
| 78 | 78 | ||
| 79 | &-small .@{btnClassName}-icon-only .ivu-icon{ | 79 | &-small .@{btnClassName}-icon-only .ivu-icon{ |
| 80 | font-size: 12px; | 80 | font-size: 12px; |
| 81 | - top: 0; | 81 | + //top: 0; |
| 82 | } | 82 | } |
| 83 | 83 | ||
| 84 | &-circle .@{btnClassName} { | 84 | &-circle .@{btnClassName} { |
| @@ -106,6 +106,13 @@ | @@ -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 | .button-group-vertical-base(@btnClassName) { | 118 | .button-group-vertical-base(@btnClassName) { |
| @@ -142,7 +149,7 @@ | @@ -142,7 +149,7 @@ | ||
| 142 | vertical-align: middle; | 149 | vertical-align: middle; |
| 143 | } | 150 | } |
| 144 | 151 | ||
| 145 | - &-icon-only > .@{css-prefix-iconfont}{ | 152 | + &-icon-only&-circle > .@{css-prefix-iconfont}{ |
| 146 | vertical-align: baseline; | 153 | vertical-align: baseline; |
| 147 | } | 154 | } |
| 148 | 155 | ||
| @@ -180,6 +187,16 @@ | @@ -180,6 +187,16 @@ | ||
| 180 | &-small { | 187 | &-small { |
| 181 | .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small); | 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 | // Default | 202 | // Default |