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

add Card component

Browse source 
add Card component
This commit is contained in:
梁灏 2016-09-15 23:43:50 +08:00
parent 49306c7a7f
commit 15bae14479
10 changed files with 163 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

64
styles/components/card.less Normal file
View file

@ -0,0 +1,64 @@
@card-prefix-cls: ~"@{css-prefix}card";
.@{card-prefix-cls}{
background: #fff;
border-radius: @border-radius-small;
font-size: @font-size-base;
position: relative;
overflow: hidden;
transition: all @transition-time @ease-in-out;
&-bordered {
border: 1px solid @border-color-base;
border-color: @border-color-split;
}
&-shadow{
box-shadow: @shadow-card;
}
&:hover {
box-shadow: @shadow-base;
border-color: #eee;
}
&&-dis-hover:hover{
box-shadow: none;
border-color: transparent;
}
&&-dis-hover&-bordered:hover{
border-color: @border-color-split;
}
&&-shadow:hover{
box-shadow: @shadow-card;
}
&-head {
border-bottom: 1px solid @border-color-split;
padding: 10px 16px;
line-height: 1;
p {
display: inline-block;
width: 100%;
height: 20px;
line-height: 20px;
font-size: 14px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&-extra {
position: absolute;
right: 16px;
top: 10px;
}
&-body {
padding: 16px;
}
}

3
styles/components/index.less
View file

@ -5,4 +5,5 @@
@import "circle";
@import "spin";
@import "alert";
@import "collapse";
@import "collapse";
@import "card";

23
styles/themes/default/custom.less
View file

@ -13,12 +13,6 @@
// Base
@body-background : #fff;
// Border color
@border-color-base : #d9d9d9; // base
// Background color
@background-color-base : #f7f7f7; // base
@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
@code-family : Consolas,Menlo,Courier,monospace;
@text-color : #525558;
@ -26,6 +20,23 @@
@line-height-base : 1.5;
@line-height-computed : floor((@font-size-base * @line-height-base));
@border-radius-base : 6px;
@border-radius-small : 4px;
// Border color
@border-color-base : #d9d9d9; // outside
@border-color-split : #e9e9e9; // inside
// Background color
@background-color-base : #f7f7f7; // base
// Shadow
@shadow-color : rgba(100, 100, 100, .2);
@shadow-base : @shadow-down;
@shadow-card : 0 1px 1px 0 rgba(0,0,0,.1);
@shadow-up : 0 -1px 6px @shadow-color;
@shadow-down : 0 1px 6px @shadow-color;
@shadow-left : -1px 0 6px @shadow-color;
@shadow-right : 1px 0 6px @shadow-color;
// Layout and Grid
@grid-columns : 24;