引入vue-jsx, 按钮完善

This commit is contained in:
niunai
2017-02-20 01:10:00 +08:00
parent e415d039f0
commit 9a4ac14066
10 changed files with 170 additions and 77 deletions

View File

@@ -1,10 +1,12 @@
@import "./common/var.pcss";
@component-namespace z {
@component button {
@b button {
position: relative;
display: block;
padding: 0;
display: inline-block;
height: 45px;
line-height: 43px;
border-radius: 4px;
border: 0;
box-sizing: border-box;
@@ -25,43 +27,58 @@
opacity: .3;
}
@modifier default {
@m default {
color: $button-default-color;
background-color: $button-default-background-color;
border: 1px solid $button-default-border-color;
}
@modifier primary {
@m primary {
color: $button-primary-color;
background-color: $button-primary-background-color;
border: 1px solid $button-primary-border-color;
}
@modifier danger {
@m danger {
color: $button-danger-color;
background-color: $button-danger-background-color;
border: 1px solid $button-danger-border-color;
}
@modifier large {
display: block;
@m large {
width: 100%;
height: 50px;
line-height: 48px;
font-size: 16px;
}
@modifier normal {
display: inline-block;
padding: 0 12px;
}
@modifier small {
display: inline-block;
@m normal {
font-size: 14px;
padding: 0 12px;
height: 33px;
}
@m small {
min-width: 60px;
height: 30px;
line-height: 28px;
font-size: 12px;
}
@m mini {
display: inline-block;
width: 50px;
height: 22px;
line-height: 20px;
font-size: 10px;
}
@when disabled {
opacity: .6;
color: $button-disabled-color;
background-color: $button-disabled-background-color;
border: 1px solid $button-disabled-border-color;
}
@when block {
display: block;
}
}
}

View File

@@ -0,0 +1,29 @@
@define-mixin button-wrap {
display: inline-block;
box-sizing: border-box;
padding-right: 10px;
&:last-child {
padding-right: 0;
}
.z-button {
width: 100%;
}
}
@component-namespace z {
@b button-group {
font-size: 0;
}
@b button-1-1 {
@mixin button-wrap;
width: 100%;
}
@b button-2-1 {
@mixin button-wrap;
width: 50%;
}
@b button-3-1 {
@mixin button-wrap;
width: 33.33%;
}
}

View File

@@ -27,6 +27,10 @@ $button-danger-color: $c-white;
$button-danger-background-color: #f44;
$button-danger-border-color: #e33;
$button-disabled-color: $c-gray-dark;
$button-disabled-background-color: $c-gray-light;
$button-disabled-border-color: #cacaca;
:root{
/* z-index

View File

@@ -2,6 +2,7 @@
css组件库入口组装成css组件库
*/
@import './button.pcss';
@import './button_group.pcss';
@import './cell.pcss';
@import './dialog.pcss';
@import './field.pcss';