drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Button styles

Browse source
This commit is contained in:
梁灏 2018-01-17 18:32:52 +08:00
parent 9acc9d63a1
commit b6af2c2a00
3 changed files with 54 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
examples/routers/button.vue
View file

@ -1,5 +1,43 @@
<template>
<div>
<Button>Default</Button>
<Button type="primary">Primary</Button>
<Button type="ghost">Ghost</Button>
<Button type="dashed">Dashed</Button>
<Button type="text">Text</Button>
<br><br>
<Button type="info">Info</Button>
<Button type="success">Success</Button>
<Button type="warning">Warning</Button>
<Button type="error">Error</Button>
<br><br>
<Button type="primary" shape="circle" icon="ios-search"></Button>
<Button type="primary" icon="ios-search">Search</Button>
<Button type="primary" shape="circle" icon="ios-search">Search</Button>
<Button type="primary" shape="circle">Circle</Button>
<br><br>
<Button type="ghost" shape="circle" icon="ios-search"></Button>
<Button type="ghost" icon="ios-search">Search</Button>
<Button type="ghost" shape="circle" icon="ios-search">Search</Button>
<Button type="ghost" shape="circle">Circle</Button>
<br><br>
<Button>Default</Button>
<Button disabled>Default(Disabled)</Button>
<br>
<Button type="primary">Primary</Button>
<Button type="primary" disabled>Primary(Disabled)</Button>
<br>
<Button type="ghost">Ghost</Button>
<Button type="ghost" disabled>Ghost(Disabled)</Button>
<br>
<Button type="dashed">Dashed</Button>
<Button type="dashed" disabled>Dashed(Disabled)</Button>
<br>
<Button type="text">Text</Button>
<Button type="text" disabled>Text(Disabled)</Button>
<br><br>
<br><br>
<h4>基本</h4>
<br><br>
<Button-group>

5
src/styles/components/button.less
View file

@ -4,11 +4,6 @@
.btn;
.btn-default;
&.@{btn-prefix-cls}-focused {
box-shadow: 0 0 2px @link-hover-color, 0 0 2px @link-hover-color, 0 0 2px @link-hover-color, 0 0 2px @link-hover-color;
z-index: 1;
}
&-long{
width: 100%;
}

16
src/styles/mixins/button.less
View file

@ -186,6 +186,7 @@
&.active {
.button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
}
.active-btn-color(@primary-color);
}
// Primary
@ -198,6 +199,7 @@
&.active {
color: @btn-primary-color;
}
.active-btn-color(@primary-color);
}
// Ghost
@ -213,6 +215,7 @@
&.active {
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
}
.active-btn-color(@primary-color);
}
// Dashed
@ -229,6 +232,7 @@
&.active {
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
}
.active-btn-color(@primary-color);
}
// Text
@ -257,9 +261,19 @@
&.active {
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent);
}
.active-btn-color(@primary-color);
}
// Color
// for tabindex
.active-btn-color(@color) {
transition: all @transition-time @ease-in-out;
&.@{btn-prefix-cls}-focused {
box-shadow: 0 0 0 2px fade(@color, 20%);
z-index: 1;
}
}
.btn-color(@color) {
.button-variant(@btn-primary-color; @color; @color);
@ -269,6 +283,8 @@
&.active {
color: @btn-primary-color;
}
.active-btn-color(@color);
}
// Circle for Icon