ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 02:31:21 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'feature/tabs_lazyload' into 'master'

Browse Source 
Feature/tabs lazyload

review一下

See merge request !9
This commit is contained in:
zhangmin
2017-03-08 15:24:36 +08:00
parent a61db9de8b 89e7d332dc
commit 9bb76ae8cd
17 changed files with 565 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/zanui-css/src/index.css
View File

@@ -18,6 +18,7 @@
@import './steps.css';
@import './tag.css';
@import './checkbox.css';
@import './tab.css';
@import './col.css';
@import './row.css';
@import './image_preview.css';

100
packages/zanui-css/src/tab.css Normal file
View File

@@ -0,0 +1,100 @@
@import "./common/var.css";
@import "./mixins/border_retina.css";
@component-namespace zan {
@b tabs {
position: relative;
}
@b tabs-line {
height: 44px;
background-color: $c-white;
&::after {
@mixin border-retina (top);
@mixin border-retina (bottom);
}
@b tabs-nav-bar {
display: block;
}
}
@b tabs-card {
height: 28px;
margin: 0 15px;
background-color: $c-white;
border-radius: 2px;
border: 1px solid #666666;
overflow: hidden;
.zan-tabs-nav-bar {
display: none;
}
.zan-tab {
color: #666666;
line-height: 28px;
border-right: 1px solid #666666;
&:last-child {
border-right: none;
}
&.zan-tab-active {
background-color: #666666;
color: $c-white;
}
}
}
@b tabs-nav {
display: flex;
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
position: relative;
/*float: left*/
&::after, &::before {
display: table;
content: " "
}
&::after {
clear: both
}
}
@b tabs-nav-bar {
z-index: 1;
position: absolute;
left: 0;
bottom: 0;
height: 2px;
background-color: #f13e3a;
transition: transform .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 0 0;
}
@b tab {
color: $c-black;
font-size: 14px;
line-height: 44px;
flex: 1;
display: inline-block;
box-sizing: border-box;
transition: color .3s cubic-bezier(.645, .045, .355, 1);
cursor: pointer;
text-align: center;
}
@b tab-active {
color: #FF4444;
}
@b tabs-pane {
display: none;
@when select {
display: block;
}
}
}