Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
cube-ui
提交
a059568c
C
cube-ui
项目概览
DiDi
/
cube-ui
9 个月 前同步成功
通知
34
Star
9078
Fork
1508
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
C
cube-ui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode，体验更适合开发者的 AI 搜索 >>
提交
a059568c
编写于
7月 13, 2018
作者:
D
dolymood
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
build: package
上级
1c4d3300
变更
28
展开全部
隐藏空白更改
内联
并排
Showing
28 changed file
with
28 addition
and
28 deletion
+28
-28
lib/button/button.min.css
lib/button/button.min.css
+1
-1
lib/button/style.css
lib/button/style.css
+1
-1
lib/checkbox-group/checkbox-group.min.css
lib/checkbox-group/checkbox-group.min.css
+1
-1
lib/checkbox-group/style.css
lib/checkbox-group/style.css
+1
-1
lib/cube.min.css
lib/cube.min.css
+1
-1
lib/cube.min.js
lib/cube.min.js
+1
-1
lib/drawer/drawer.min.css
lib/drawer/drawer.min.css
+1
-1
lib/drawer/style.css
lib/drawer/style.css
+1
-1
lib/form/form.min.css
lib/form/form.min.css
+1
-1
lib/form/style.css
lib/form/style.css
+1
-1
lib/index.js
lib/index.js
+1
-1
lib/input/input.min.css
lib/input/input.min.css
+1
-1
lib/input/style.css
lib/input/style.css
+1
-1
lib/radio-group/radio-group.min.css
lib/radio-group/radio-group.min.css
+1
-1
lib/radio-group/style.css
lib/radio-group/style.css
+1
-1
lib/radio/radio.min.css
lib/radio/radio.min.css
+1
-1
lib/radio/style.css
lib/radio/style.css
+1
-1
lib/select/select.min.css
lib/select/select.min.css
+1
-1
lib/select/style.css
lib/select/style.css
+1
-1
lib/style.css
lib/style.css
+1
-1
lib/textarea/style.css
lib/textarea/style.css
+1
-1
lib/textarea/textarea.min.css
lib/textarea/textarea.min.css
+1
-1
lib/tip/style.css
lib/tip/style.css
+1
-1
lib/tip/tip.min.css
lib/tip/tip.min.css
+1
-1
lib/toolbar/style.css
lib/toolbar/style.css
+1
-1
lib/toolbar/toolbar.min.css
lib/toolbar/toolbar.min.css
+1
-1
lib/upload/style.css
lib/upload/style.css
+1
-1
lib/upload/upload.min.css
lib/upload/upload.min.css
+1
-1
未找到文件。
lib/button/button.min.css
浏览文件 @
a059568c
.cube-btn
{
display
:
block
;
margin
:
0
;
padding
:
17px
16px
;
width
:
100%
;
text-align
:
center
;
white-space
:
nowrap
;
cursor
:
pointer
;
font-size
:
16px
;
line-height
:
1
;
color
:
#fff
;
background
:
#4a4c5b
;
outline
:
none
;
border
:
none
;
border-radius
:
2px
;
box-sizing
:
border-box
;
-webkit-tap-highlight-color
:
transparent
}
.cube-btn
>
i
{
display
:
inline-block
;
margin-right
:
4px
;
font-size
:
100%
;
-webkit-transform
:
scale
(
1.13
);
transform
:
scale
(
1.13
);
-webkit-transform-origin
:
right
center
;
transform-origin
:
right
center
}
.cube-btn.cube-btn_active
,
.cube-btn
:active
{
background
:
#444654
;
position
:
relative
}
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#444654
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn.cube-btn_disabled
,
.cube-btn.cube-btn_disabled.cube-btn_active
,
.cube-btn.cube-btn_disabled
:active
{
color
:
#fff
;
background
:
#ccc
;
position
:
relative
}
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-inline
{
width
:
auto
;
display
:
inline-block
;
vertical-align
:
middle
;
padding
:
9px
10px
;
font-size
:
12px
}
.cube-btn-inline
>
i
{
margin-right
:
2px
;
-webkit-transform
:
scale
(
1.14
);
transform
:
scale
(
1.14
)}
.cube-btn-primary
{
color
:
#fff
;
background
:
#fc9153
;
position
:
relative
}
.cube-btn-primary
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-primary
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-primary
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-primary.cube-btn_active
,
.cube-btn-primary
:active
{
background
:
#e8864c
;
position
:
relative
}
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8864c
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-light
{
color
:
#666
;
background
:
#fcfcfc
;
box-shadow
:
0
1px
3px
rgba
(
0
,
0
,
0
,
.1
)}
.cube-btn-light.cube-btn_active
,
.cube-btn-light
:active
{
background
:
#e8e8e8
;
position
:
relative
}
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8e8e8
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-outline
{
color
:
#666
;
background
:
transparent
;
position
:
relative
}
.cube-btn-outline
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#666
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-outline.cube-btn_active
,
.cube-btn-outline
:active
{
background
:
rgba
(
0
,
0
,
0
,
.08
);
position
:
relative
}
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#666
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-outline-primary
{
color
:
#fc9153
;
background
:
transparent
;
position
:
relative
}
.cube-btn-outline-primary
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline-primary
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline-primary
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-outline-primary.cube-btn_active
,
.cube-btn-outline-primary
:active
{
background
:
rgba
(
252
,
145
,
83
,
.08
);
position
:
relative
}
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8864c
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
\ No newline at end of file
.cube-btn
{
display
:
block
;
margin
:
0
;
padding
:
17px
16px
;
width
:
100%
;
text-align
:
center
;
white-space
:
nowrap
;
cursor
:
pointer
;
font-size
:
16px
;
line-height
:
1
;
color
:
#fff
;
background
:
#4a4c5b
;
outline
:
none
;
border
:
none
;
border-radius
:
2px
;
box-sizing
:
border-box
;
-webkit-tap-highlight-color
:
transparent
}
.cube-btn
>
i
{
display
:
inline-block
;
margin-right
:
4px
;
font-size
:
100%
;
-webkit-transform
:
scale
(
1.13
);
transform
:
scale
(
1.13
);
-webkit-transform-origin
:
right
center
;
transform-origin
:
right
center
}
.cube-btn.cube-btn_active
,
.cube-btn
:active
{
background
:
#444654
;
position
:
relative
}
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#444654
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn.cube-btn_disabled
,
.cube-btn.cube-btn_disabled.cube-btn_active
,
.cube-btn.cube-btn_disabled
:active
{
color
:
#fff
;
background
:
#ccc
;
position
:
relative
}
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-inline
{
width
:
auto
;
display
:
inline-block
;
vertical-align
:
middle
;
padding
:
9px
10px
;
font-size
:
12px
}
.cube-btn-inline
>
i
{
margin-right
:
2px
;
-webkit-transform
:
scale
(
1.14
);
transform
:
scale
(
1.14
)}
.cube-btn-primary
{
color
:
#fff
;
background
:
#fc9153
;
position
:
relative
}
.cube-btn-primary
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-primary
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-primary
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-primary.cube-btn_active
,
.cube-btn-primary
:active
{
background
:
#e8864c
;
position
:
relative
}
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8864c
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-light
{
color
:
#666
;
background
:
#fcfcfc
;
box-shadow
:
0
1px
3px
rgba
(
0
,
0
,
0
,
.1
)}
.cube-btn-light.cube-btn_active
,
.cube-btn-light
:active
{
background
:
#e8e8e8
;
position
:
relative
}
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8e8e8
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-outline
{
color
:
#666
;
background
:
transparent
;
position
:
relative
}
.cube-btn-outline
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#666
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-outline.cube-btn_active
,
.cube-btn-outline
:active
{
background
:
rgba
(
0
,
0
,
0
,
.08
);
position
:
relative
}
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#666
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-outline-primary
{
color
:
#fc9153
;
background
:
transparent
;
position
:
relative
}
.cube-btn-outline-primary
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline-primary
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline-primary
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-outline-primary.cube-btn_active
,
.cube-btn-outline-primary
:active
{
background
:
rgba
(
252
,
145
,
83
,
.08
);
position
:
relative
}
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8864c
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
\ No newline at end of file
lib/button/style.css
浏览文件 @
a059568c
.cube-btn
{
display
:
block
;
margin
:
0
;
padding
:
17px
16px
;
width
:
100%
;
text-align
:
center
;
white-space
:
nowrap
;
cursor
:
pointer
;
font-size
:
16px
;
line-height
:
1
;
color
:
#fff
;
background
:
#4a4c5b
;
outline
:
none
;
border
:
none
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
-webkit-tap-highlight-color
:
transparent
}
.cube-btn
>
i
{
display
:
inline-block
;
margin-right
:
4px
;
font-size
:
100%
;
-webkit-transform
:
scale
(
1.13
);
transform
:
scale
(
1.13
);
-webkit-transform-origin
:
right
center
;
transform-origin
:
right
center
}
.cube-btn.cube-btn_active
,
.cube-btn
:active
{
background
:
#444654
;
position
:
relative
}
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#444654
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn.cube-btn_disabled
,
.cube-btn.cube-btn_disabled.cube-btn_active
,
.cube-btn.cube-btn_disabled
:active
{
color
:
#fff
;
background
:
#ccc
;
position
:
relative
}
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-inline
{
width
:
auto
;
display
:
inline-block
;
vertical-align
:
middle
;
padding
:
9px
10px
;
font-size
:
12px
}
.cube-btn-inline
>
i
{
margin-right
:
2px
;
-webkit-transform
:
scale
(
1.14
);
transform
:
scale
(
1.14
)}
.cube-btn-primary
{
color
:
#fff
;
background
:
#fc9153
;
position
:
relative
}
.cube-btn-primary
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-primary
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-primary
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-primary.cube-btn_active
,
.cube-btn-primary
:active
{
background
:
#e8864c
;
position
:
relative
}
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8864c
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-light
{
color
:
#666
;
background
:
#fcfcfc
;
-webkit-box-shadow
:
0
1px
3px
rgba
(
0
,
0
,
0
,
.1
);
box-shadow
:
0
1px
3px
rgba
(
0
,
0
,
0
,
.1
)}
.cube-btn-light.cube-btn_active
,
.cube-btn-light
:active
{
background
:
#e8e8e8
;
position
:
relative
}
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8e8e8
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-outline
{
color
:
#666
;
background
:
transparent
;
position
:
relative
}
.cube-btn-outline
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#666
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-outline.cube-btn_active
,
.cube-btn-outline
:active
{
background
:
rgba
(
0
,
0
,
0
,
.08
);
position
:
relative
}
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#666
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-outline-primary
{
color
:
#fc9153
;
background
:
transparent
;
position
:
relative
}
.cube-btn-outline-primary
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline-primary
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline-primary
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-btn-outline-primary.cube-btn_active
,
.cube-btn-outline-primary
:active
{
background
:
rgba
(
252
,
145
,
83
,
.08
);
position
:
relative
}
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8864c
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
\ No newline at end of file
.cube-btn
{
display
:
block
;
margin
:
0
;
padding
:
17px
16px
;
width
:
100%
;
text-align
:
center
;
white-space
:
nowrap
;
cursor
:
pointer
;
font-size
:
16px
;
line-height
:
1
;
color
:
#fff
;
background
:
#4a4c5b
;
outline
:
none
;
border
:
none
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
-webkit-tap-highlight-color
:
transparent
}
.cube-btn
>
i
{
display
:
inline-block
;
margin-right
:
4px
;
font-size
:
100%
;
-webkit-transform
:
scale
(
1.13
);
transform
:
scale
(
1.13
);
-webkit-transform-origin
:
right
center
;
transform-origin
:
right
center
}
.cube-btn.cube-btn_active
,
.cube-btn
:active
{
background
:
#444654
;
position
:
relative
}
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#444654
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn.cube-btn_active
:after
,
.cube-btn
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn.cube-btn_disabled
,
.cube-btn.cube-btn_disabled.cube-btn_active
,
.cube-btn.cube-btn_disabled
:active
{
color
:
#fff
;
background
:
#ccc
;
position
:
relative
}
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn.cube-btn_disabled.cube-btn_active
:after
,
.cube-btn.cube-btn_disabled
:active:after
,
.cube-btn.cube-btn_disabled
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-inline
{
width
:
auto
;
display
:
inline-block
;
vertical-align
:
middle
;
padding
:
9px
10px
;
font-size
:
12px
}
.cube-btn-inline
>
i
{
margin-right
:
2px
;
-webkit-transform
:
scale
(
1.14
);
transform
:
scale
(
1.14
)}
.cube-btn-primary
{
color
:
#fff
;
background
:
#fc9153
;
position
:
relative
}
.cube-btn-primary
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-primary
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-primary
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-primary.cube-btn_active
,
.cube-btn-primary
:active
{
background
:
#e8864c
;
position
:
relative
}
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8864c
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-primary.cube-btn_active
:after
,
.cube-btn-primary
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-light
{
color
:
#666
;
background
:
#fcfcfc
;
-webkit-box-shadow
:
0
1px
3px
rgba
(
0
,
0
,
0
,
.1
);
box-shadow
:
0
1px
3px
rgba
(
0
,
0
,
0
,
.1
)}
.cube-btn-light.cube-btn_active
,
.cube-btn-light
:active
{
background
:
#e8e8e8
;
position
:
relative
}
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8e8e8
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-light.cube-btn_active
:after
,
.cube-btn-light
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-outline
{
color
:
#666
;
background
:
transparent
;
position
:
relative
}
.cube-btn-outline
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#666
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-outline.cube-btn_active
,
.cube-btn-outline
:active
{
background
:
rgba
(
0
,
0
,
0
,
.08
);
position
:
relative
}
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#666
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline.cube-btn_active
:after
,
.cube-btn-outline
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-outline-primary
{
color
:
#fc9153
;
background
:
transparent
;
position
:
relative
}
.cube-btn-outline-primary
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline-primary
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline-primary
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-btn-outline-primary.cube-btn_active
,
.cube-btn-outline-primary
:active
{
background
:
rgba
(
252
,
145
,
83
,
.08
);
position
:
relative
}
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e8864c
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-btn-outline-primary.cube-btn_active
:after
,
.cube-btn-outline-primary
:active:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
\ No newline at end of file
lib/checkbox-group/checkbox-group.min.css
浏览文件 @
a059568c
.cube-checkbox
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-label
{
margin-right
:
1.42em
}
.cube-checkbox-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-checkbox-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-checkbox-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
border-radius
:
50%
}
.cube-checkbox-ui.cubeic-square-border
{
border-radius
:
2px
}
.cube-checkbox-ui
:before
,
.cube-checkbox-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-checkbox-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-checkbox-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
color
:
transparent
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-checkbox_checked
.cube-checkbox-ui
:before
{
color
:
transparent
}
.cube-checkbox_checked
.cube-checkbox-ui
i
{
color
:
#fc9153
;
-webkit-transform
:
scale
(
1.23
);
transform
:
scale
(
1.23
)}
.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
#eee
}
.cube-checkbox_disabled
.cube-checkbox-ui
:before
,
.cube-checkbox_disabled
.cube-checkbox-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-checkbox_disabled
.cube-checkbox-ui
:before
{
color
:
transparent
}
.cube-checkbox_disabled
.cube-checkbox-ui
i
{
color
:
#eee
}
.cube-checkbox_checked.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
#fff
}
.cube-checkbox-hollow
i
{
width
:
100%
;
height
:
100%
}
.cube-checkbox-hollow
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
background-color
:
currentColor
;
border-radius
:
2px
}
.cube-checkbox-hollow.cube-checkbox_checked
.cube-checkbox-ui
:before
{
color
:
#fc9153
}
.cube-checkbox-hollow.cube-checkbox_checked
.cube-checkbox-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
color
:
#fc9153
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
transparent
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
:before
{
color
:
#eee
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
color
:
transparent
}
.cube-checkbox-hollow.cube-checkbox_disabled.cube-checkbox_checked
.cube-checkbox-ui
i
{
color
:
#eee
}
.cube-checkbox-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-checkbox-group
.cube-checkbox
:last-child
.cube-checkbox-wrap
:after
,
.cube-checkbox-group
.cube-checkbox
:last-child
.cube-checkbox-wrap
:before
{
display
:
none
}
.cube-checkbox-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:after
{
border-color
:
#ccc
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:last-child:after
,
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:last-child:before
{
display
:
none
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-label
{
margin-right
:
0
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
\ No newline at end of file
.cube-checkbox
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-label
{
margin-right
:
1.42em
}
.cube-checkbox-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-checkbox-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-checkbox-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
border-radius
:
50%
}
.cube-checkbox-ui.cubeic-square-border
{
border-radius
:
2px
}
.cube-checkbox-ui
:before
,
.cube-checkbox-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-checkbox-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-checkbox-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
color
:
transparent
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-checkbox_checked
.cube-checkbox-ui
:before
{
color
:
transparent
}
.cube-checkbox_checked
.cube-checkbox-ui
i
{
color
:
#fc9153
;
-webkit-transform
:
scale
(
1.23
);
transform
:
scale
(
1.23
)}
.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
#eee
}
.cube-checkbox_disabled
.cube-checkbox-ui
:before
,
.cube-checkbox_disabled
.cube-checkbox-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-checkbox_disabled
.cube-checkbox-ui
:before
{
color
:
transparent
}
.cube-checkbox_disabled
.cube-checkbox-ui
i
{
color
:
#eee
}
.cube-checkbox_checked.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
#fff
}
.cube-checkbox-hollow
i
{
width
:
100%
;
height
:
100%
}
.cube-checkbox-hollow
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
background-color
:
currentColor
;
border-radius
:
2px
}
.cube-checkbox-hollow.cube-checkbox_checked
.cube-checkbox-ui
:before
{
color
:
#fc9153
}
.cube-checkbox-hollow.cube-checkbox_checked
.cube-checkbox-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
color
:
#fc9153
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
transparent
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
:before
{
color
:
#eee
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
color
:
transparent
}
.cube-checkbox-hollow.cube-checkbox_disabled.cube-checkbox_checked
.cube-checkbox-ui
i
{
color
:
#eee
}
.cube-checkbox-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-checkbox-group
.cube-checkbox
:last-child
.cube-checkbox-wrap
:after
,
.cube-checkbox-group
.cube-checkbox
:last-child
.cube-checkbox-wrap
:before
{
display
:
none
}
.cube-checkbox-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:after
{
border-color
:
#ccc
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:last-child:after
,
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:last-child:before
{
display
:
none
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-label
{
margin-right
:
0
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
\ No newline at end of file
lib/checkbox-group/style.css
浏览文件 @
a059568c
.cube-checkbox
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-label
{
margin-right
:
1.42em
}
.cube-checkbox-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-checkbox-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-checkbox-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
border-radius
:
50%
}
.cube-checkbox-ui.cubeic-square-border
{
border-radius
:
2px
}
.cube-checkbox-ui
:before
,
.cube-checkbox-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-checkbox-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-checkbox-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
color
:
transparent
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-checkbox_checked
.cube-checkbox-ui
:before
{
color
:
transparent
}
.cube-checkbox_checked
.cube-checkbox-ui
i
{
color
:
#fc9153
;
-webkit-transform
:
scale
(
1.23
);
transform
:
scale
(
1.23
)}
.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
#eee
}
.cube-checkbox_disabled
.cube-checkbox-ui
:before
,
.cube-checkbox_disabled
.cube-checkbox-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-checkbox_disabled
.cube-checkbox-ui
:before
{
color
:
transparent
}
.cube-checkbox_disabled
.cube-checkbox-ui
i
{
color
:
#eee
}
.cube-checkbox_checked.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
#fff
}
.cube-checkbox-hollow
i
{
width
:
100%
;
height
:
100%
}
.cube-checkbox-hollow
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
background-color
:
currentColor
;
border-radius
:
2px
}
.cube-checkbox-hollow.cube-checkbox_checked
.cube-checkbox-ui
:before
{
color
:
#fc9153
}
.cube-checkbox-hollow.cube-checkbox_checked
.cube-checkbox-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
color
:
#fc9153
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
transparent
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
:before
{
color
:
#eee
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
color
:
transparent
}
.cube-checkbox-hollow.cube-checkbox_disabled.cube-checkbox_checked
.cube-checkbox-ui
i
{
color
:
#eee
}
.cube-checkbox-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-checkbox-group
.cube-checkbox
:last-child
.cube-checkbox-wrap
:after
,
.cube-checkbox-group
.cube-checkbox
:last-child
.cube-checkbox-wrap
:before
{
display
:
none
}
.cube-checkbox-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:after
{
border-color
:
#ccc
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:last-child:after
,
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:last-child:before
{
display
:
none
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-label
{
margin-right
:
0
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
\ No newline at end of file
.cube-checkbox
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-label
{
margin-right
:
1.42em
}
.cube-checkbox-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-checkbox-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-checkbox-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
border-radius
:
50%
}
.cube-checkbox-ui.cubeic-square-border
{
border-radius
:
2px
}
.cube-checkbox-ui
:before
,
.cube-checkbox-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-checkbox-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-checkbox-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
color
:
transparent
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-checkbox_checked
.cube-checkbox-ui
:before
{
color
:
transparent
}
.cube-checkbox_checked
.cube-checkbox-ui
i
{
color
:
#fc9153
;
-webkit-transform
:
scale
(
1.23
);
transform
:
scale
(
1.23
)}
.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
#eee
}
.cube-checkbox_disabled
.cube-checkbox-ui
:before
,
.cube-checkbox_disabled
.cube-checkbox-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-checkbox_disabled
.cube-checkbox-ui
:before
{
color
:
transparent
}
.cube-checkbox_disabled
.cube-checkbox-ui
i
{
color
:
#eee
}
.cube-checkbox_checked.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
#fff
}
.cube-checkbox-hollow
i
{
width
:
100%
;
height
:
100%
}
.cube-checkbox-hollow
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
background-color
:
currentColor
;
border-radius
:
2px
}
.cube-checkbox-hollow.cube-checkbox_checked
.cube-checkbox-ui
:before
{
color
:
#fc9153
}
.cube-checkbox-hollow.cube-checkbox_checked
.cube-checkbox-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
color
:
#fc9153
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
{
background-color
:
transparent
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
:before
{
color
:
#eee
}
.cube-checkbox-hollow.cube-checkbox_disabled
.cube-checkbox-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
color
:
transparent
}
.cube-checkbox-hollow.cube-checkbox_disabled.cube-checkbox_checked
.cube-checkbox-ui
i
{
color
:
#eee
}
.cube-checkbox-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-checkbox-group
.cube-checkbox
:last-child
.cube-checkbox-wrap
:after
,
.cube-checkbox-group
.cube-checkbox
:last-child
.cube-checkbox-wrap
:before
{
display
:
none
}
.cube-checkbox-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-checkbox-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:after
{
border-color
:
#ccc
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:last-child:after
,
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
:last-child:before
{
display
:
none
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox
[
data-pos
=
right
]
.cube-checkbox-label
{
margin-right
:
0
}
.cube-checkbox-group
[
data-horz
=
true
]
.cube-checkbox-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
\ No newline at end of file
lib/cube.min.css
浏览文件 @
a059568c
此差异已折叠。
点击以展开。
lib/cube.min.js
浏览文件 @
a059568c
此差异已折叠。
点击以展开。
lib/drawer/drawer.min.css
浏览文件 @
a059568c
.cube-drawer
{
z-index
:
5
;
right
:
0
;
left
:
0
;
color
:
#333
}
.cube-drawer
,
.cube-drawer-main
{
position
:
absolute
;
top
:
0
;
bottom
:
0
;
overflow
:
hidden
}
.cube-drawer-main
{
left
:
100%
;
max-width
:
90%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
box-shadow
:
-2px
0
2px
rgba
(
0
,
0
,
0
,
.2
);
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
}
.cube-drawer-title
{
position
:
relative
;
padding
:
0
20px
;
height
:
50px
;
line-height
:
50px
;
border-bottom
:
1px
solid
#eee
;
font-size
:
16px
;
background-color
:
#fff
}
.cube-drawer-panels
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-flex
:
1
;
flex
:
1
}
.cube-drawer-panel
{
position
:
relative
;
z-index
:
1
;
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
170px
;
overflow
:
hidden
;
background-color
:
#fff
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
)}
.cube-drawer-panel
+
.cube-drawer-panel
{
margin-left
:
-67px
}
.cube-drawer-panel
:first-child
{
box-shadow
:
none
}
.cube-drawer-scroll-wrapper
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
}
.cube-drawer-move-enter
,
.cube-drawer-move-leave-to
{
-webkit-transform
:
translate
(
67px
);
transform
:
translate
(
67px
)}
.cube-drawer-move-enter-active
,
.cube-drawer-move-leave-active
{
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
}
.cube-scroll-wrapper
{
position
:
relative
;
height
:
100%
;
overflow
:
hidden
}
.cube-scroll-list-wrapper
{
overflow
:
hidden
}
.cube-pulldown-wrapper
{
position
:
absolute
;
width
:
100%
;
left
:
0
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-transition
:
all
;
transition
:
all
}
.cube-pulldown-wrapper
.before-trigger
{
height
:
54px
;
line-height
:
0
;
padding-top
:
6px
}
.cube-pulldown-wrapper
.after-trigger
.loading
{
padding
:
8px
0
}
.cube-pulldown-wrapper
.after-trigger
.cube-pulldown-loaded
{
padding
:
12px
0
}
.cube-pullup-wrapper
{
width
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
-webkit-box-align
:
center
;
align-items
:
center
}
.cube-pullup-wrapper
.before-trigger
{
padding
:
22px
0
;
min-height
:
1em
}
.cube-pullup-wrapper
.after-trigger
{
padding
:
19px
0
}
.cube-scroll-content
{
position
:
relative
;
z-index
:
1
}
.cube-scroll-item
{
height
:
60px
;
line-height
:
60px
;
font-size
:
18px
;
padding-left
:
20px
}
.cube-loading
{
font-size
:
24px
}
.cube-loading-spinners
{
position
:
relative
;
display
:
block
;
width
:
1em
;
height
:
1em
}
.cube-loading-spinner
{
position
:
absolute
;
left
:
44.5%
;
top
:
37%
;
width
:
2px
;
height
:
25%
;
border-radius
:
50%
/
20%
;
opacity
:
.25
;
background-color
:
currentColor
;
-webkit-animation
:
spinner-fade
1s
linear
infinite
;
animation
:
spinner-fade
1s
linear
infinite
}
.cube-loading-spinner
:first-child
{
-webkit-animation-delay
:
0s
;
animation-delay
:
0s
;
-webkit-transform
:
rotate
(
-150deg
)
translateY
(
-150%
);
transform
:
rotate
(
-150deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
2
)
{
-webkit-animation-delay
:
.083333333333333s
;
animation-delay
:
.083333333333333s
;
-webkit-transform
:
rotate
(
-120deg
)
translateY
(
-150%
);
transform
:
rotate
(
-120deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
3
)
{
-webkit-animation-delay
:
.166666666666667s
;
animation-delay
:
.166666666666667s
;
-webkit-transform
:
rotate
(
-90deg
)
translateY
(
-150%
);
transform
:
rotate
(
-90deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
4
)
{
-webkit-animation-delay
:
.25s
;
animation-delay
:
.25s
;
-webkit-transform
:
rotate
(
-60deg
)
translateY
(
-150%
);
transform
:
rotate
(
-60deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
5
)
{
-webkit-animation-delay
:
.333333333333333s
;
animation-delay
:
.333333333333333s
;
-webkit-transform
:
rotate
(
-30deg
)
translateY
(
-150%
);
transform
:
rotate
(
-30deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
6
)
{
-webkit-animation-delay
:
.416666666666667s
;
animation-delay
:
.416666666666667s
;
-webkit-transform
:
rotate
(
0deg
)
translateY
(
-150%
);
transform
:
rotate
(
0deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
7
)
{
-webkit-animation-delay
:
.5s
;
animation-delay
:
.5s
;
-webkit-transform
:
rotate
(
30deg
)
translateY
(
-150%
);
transform
:
rotate
(
30deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
8
)
{
-webkit-animation-delay
:
.583333333333333s
;
animation-delay
:
.583333333333333s
;
-webkit-transform
:
rotate
(
60deg
)
translateY
(
-150%
);
transform
:
rotate
(
60deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
9
)
{
-webkit-animation-delay
:
.666666666666667s
;
animation-delay
:
.666666666666667s
;
-webkit-transform
:
rotate
(
90deg
)
translateY
(
-150%
);
transform
:
rotate
(
90deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
10
)
{
-webkit-animation-delay
:
.75s
;
animation-delay
:
.75s
;
-webkit-transform
:
rotate
(
120deg
)
translateY
(
-150%
);
transform
:
rotate
(
120deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
11
)
{
-webkit-animation-delay
:
.833333333333333s
;
animation-delay
:
.833333333333333s
;
-webkit-transform
:
rotate
(
150deg
)
translateY
(
-150%
);
transform
:
rotate
(
150deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
12
)
{
-webkit-animation-delay
:
.916666666666667s
;
animation-delay
:
.916666666666667s
;
-webkit-transform
:
rotate
(
180deg
)
translateY
(
-150%
);
transform
:
rotate
(
180deg
)
translateY
(
-150%
)}
@-webkit-keyframes
spinner-fade
{
0
%
{
opacity
:
.85
}
50
%
{
opacity
:
.25
}
to
{
opacity
:
.25
}}
@keyframes
spinner-fade
{
0
%
{
opacity
:
.85
}
50
%
{
opacity
:
.25
}
to
{
opacity
:
.25
}}
.cube-drawer-item
{
padding
:
0
20px
;
height
:
50px
;
line-height
:
50px
;
white-space
:
nowrap
;
overflow
:
hidden
;
font-size
:
15px
}
.cube-drawer-item
:after
{
left
:
20px
}
.cube-drawer-item
:last-child:after
{
display
:
none
}
.cube-drawer-item
:first-child:after
{
display
:
block
}
.cube-drawer-item_active
{
background
:
rgba
(
0
,
0
,
0
,
.04
)}
\ No newline at end of file
.cube-drawer
{
z-index
:
5
;
right
:
0
;
left
:
0
;
color
:
#333
}
.cube-drawer
,
.cube-drawer-main
{
position
:
absolute
;
top
:
0
;
bottom
:
0
;
overflow
:
hidden
}
.cube-drawer-main
{
left
:
100%
;
max-width
:
90%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
;
box-shadow
:
-2px
0
2px
rgba
(
0
,
0
,
0
,
.2
)}
.cube-drawer-title
{
position
:
relative
;
padding
:
0
20px
;
height
:
50px
;
line-height
:
50px
;
border-bottom
:
1px
solid
#eee
;
font-size
:
16px
;
background-color
:
#fff
}
.cube-drawer-panels
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-flex
:
1
;
flex
:
1
}
.cube-drawer-panel
{
position
:
relative
;
z-index
:
1
;
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
170px
;
overflow
:
hidden
;
background-color
:
#fff
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
)}
.cube-drawer-panel
+
.cube-drawer-panel
{
margin-left
:
-67px
}
.cube-drawer-panel
:first-child
{
box-shadow
:
none
}
.cube-drawer-scroll-wrapper
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
}
.cube-drawer-move-enter
,
.cube-drawer-move-leave-to
{
-webkit-transform
:
translate
(
67px
);
transform
:
translate
(
67px
)}
.cube-drawer-move-enter-active
,
.cube-drawer-move-leave-active
{
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
}
.cube-scroll-wrapper
{
position
:
relative
;
height
:
100%
;
overflow
:
hidden
}
.cube-scroll-list-wrapper
{
overflow
:
hidden
}
.cube-pulldown-wrapper
{
position
:
absolute
;
width
:
100%
;
left
:
0
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-transition
:
all
;
transition
:
all
}
.cube-pulldown-wrapper
.before-trigger
{
height
:
54px
;
line-height
:
0
;
padding-top
:
6px
}
.cube-pulldown-wrapper
.after-trigger
.loading
{
padding
:
8px
0
}
.cube-pulldown-wrapper
.after-trigger
.cube-pulldown-loaded
{
padding
:
12px
0
}
.cube-pullup-wrapper
{
width
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
-webkit-box-align
:
center
;
align-items
:
center
}
.cube-pullup-wrapper
.before-trigger
{
padding
:
22px
0
;
min-height
:
1em
}
.cube-pullup-wrapper
.after-trigger
{
padding
:
19px
0
}
.cube-scroll-content
{
position
:
relative
;
z-index
:
1
}
.cube-scroll-item
{
height
:
60px
;
line-height
:
60px
;
font-size
:
18px
;
padding-left
:
20px
}
.cube-loading
{
font-size
:
24px
}
.cube-loading-spinners
{
position
:
relative
;
display
:
block
;
width
:
1em
;
height
:
1em
}
.cube-loading-spinner
{
position
:
absolute
;
left
:
44.5%
;
top
:
37%
;
width
:
2px
;
height
:
25%
;
border-radius
:
50%
/
20%
;
opacity
:
.25
;
background-color
:
currentColor
;
-webkit-animation
:
spinner-fade
1s
linear
infinite
;
animation
:
spinner-fade
1s
linear
infinite
}
.cube-loading-spinner
:first-child
{
-webkit-animation-delay
:
0s
;
animation-delay
:
0s
;
-webkit-transform
:
rotate
(
-150deg
)
translateY
(
-150%
);
transform
:
rotate
(
-150deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
2
)
{
-webkit-animation-delay
:
.083333333333333s
;
animation-delay
:
.083333333333333s
;
-webkit-transform
:
rotate
(
-120deg
)
translateY
(
-150%
);
transform
:
rotate
(
-120deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
3
)
{
-webkit-animation-delay
:
.166666666666667s
;
animation-delay
:
.166666666666667s
;
-webkit-transform
:
rotate
(
-90deg
)
translateY
(
-150%
);
transform
:
rotate
(
-90deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
4
)
{
-webkit-animation-delay
:
.25s
;
animation-delay
:
.25s
;
-webkit-transform
:
rotate
(
-60deg
)
translateY
(
-150%
);
transform
:
rotate
(
-60deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
5
)
{
-webkit-animation-delay
:
.333333333333333s
;
animation-delay
:
.333333333333333s
;
-webkit-transform
:
rotate
(
-30deg
)
translateY
(
-150%
);
transform
:
rotate
(
-30deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
6
)
{
-webkit-animation-delay
:
.416666666666667s
;
animation-delay
:
.416666666666667s
;
-webkit-transform
:
rotate
(
0deg
)
translateY
(
-150%
);
transform
:
rotate
(
0deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
7
)
{
-webkit-animation-delay
:
.5s
;
animation-delay
:
.5s
;
-webkit-transform
:
rotate
(
30deg
)
translateY
(
-150%
);
transform
:
rotate
(
30deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
8
)
{
-webkit-animation-delay
:
.583333333333333s
;
animation-delay
:
.583333333333333s
;
-webkit-transform
:
rotate
(
60deg
)
translateY
(
-150%
);
transform
:
rotate
(
60deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
9
)
{
-webkit-animation-delay
:
.666666666666667s
;
animation-delay
:
.666666666666667s
;
-webkit-transform
:
rotate
(
90deg
)
translateY
(
-150%
);
transform
:
rotate
(
90deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
10
)
{
-webkit-animation-delay
:
.75s
;
animation-delay
:
.75s
;
-webkit-transform
:
rotate
(
120deg
)
translateY
(
-150%
);
transform
:
rotate
(
120deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
11
)
{
-webkit-animation-delay
:
.833333333333333s
;
animation-delay
:
.833333333333333s
;
-webkit-transform
:
rotate
(
150deg
)
translateY
(
-150%
);
transform
:
rotate
(
150deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
12
)
{
-webkit-animation-delay
:
.916666666666667s
;
animation-delay
:
.916666666666667s
;
-webkit-transform
:
rotate
(
180deg
)
translateY
(
-150%
);
transform
:
rotate
(
180deg
)
translateY
(
-150%
)}
@-webkit-keyframes
spinner-fade
{
0
%
{
opacity
:
.85
}
50
%
{
opacity
:
.25
}
to
{
opacity
:
.25
}}
@keyframes
spinner-fade
{
0
%
{
opacity
:
.85
}
50
%
{
opacity
:
.25
}
to
{
opacity
:
.25
}}
.cube-drawer-item
{
padding
:
0
20px
;
height
:
50px
;
line-height
:
50px
;
white-space
:
nowrap
;
overflow
:
hidden
;
font-size
:
15px
}
.cube-drawer-item
:after
{
left
:
20px
}
.cube-drawer-item
:last-child:after
{
display
:
none
}
.cube-drawer-item
:first-child:after
{
display
:
block
}
.cube-drawer-item_active
{
background
:
rgba
(
0
,
0
,
0
,
.04
)}
\ No newline at end of file
lib/drawer/style.css
浏览文件 @
a059568c
.cube-drawer
{
z-index
:
5
;
right
:
0
;
left
:
0
;
color
:
#333
}
.cube-drawer
,
.cube-drawer-main
{
position
:
absolute
;
top
:
0
;
bottom
:
0
;
overflow
:
hidden
}
.cube-drawer-main
{
left
:
100%
;
max-width
:
90%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
-webkit-box-shadow
:
-2px
0
2px
rgba
(
0
,
0
,
0
,
.2
);
box-shadow
:
-2px
0
2px
rgba
(
0
,
0
,
0
,
.2
);
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
}
.cube-drawer-title
{
position
:
relative
;
padding
:
0
20px
;
height
:
50px
;
line-height
:
50px
;
border-bottom
:
1px
solid
#eee
;
font-size
:
16px
;
background-color
:
#fff
}
.cube-drawer-panels
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-flex
:
1
;
flex
:
1
}
.cube-drawer-panel
{
position
:
relative
;
z-index
:
1
;
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
170px
;
overflow
:
hidden
;
background-color
:
#fff
;
-webkit-box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
);
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
)}
.cube-drawer-panel
+
.cube-drawer-panel
{
margin-left
:
-67px
}
.cube-drawer-panel
:first-child
{
-webkit-box-shadow
:
none
;
box-shadow
:
none
}
.cube-drawer-scroll-wrapper
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
}
.cube-drawer-move-enter
,
.cube-drawer-move-leave-to
{
-webkit-transform
:
translate
(
67px
);
transform
:
translate
(
67px
)}
.cube-drawer-move-enter-active
,
.cube-drawer-move-leave-active
{
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
}
.cube-scroll-wrapper
{
position
:
relative
;
height
:
100%
;
overflow
:
hidden
}
.cube-scroll-list-wrapper
{
overflow
:
hidden
}
.cube-pulldown-wrapper
{
position
:
absolute
;
width
:
100%
;
left
:
0
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-transition
:
all
;
transition
:
all
}
.cube-pulldown-wrapper
.before-trigger
{
height
:
54px
;
line-height
:
0
;
padding-top
:
6px
}
.cube-pulldown-wrapper
.after-trigger
.loading
{
padding
:
8px
0
}
.cube-pulldown-wrapper
.after-trigger
.cube-pulldown-loaded
{
padding
:
12px
0
}
.cube-pullup-wrapper
{
width
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
-webkit-box-align
:
center
;
align-items
:
center
}
.cube-pullup-wrapper
.before-trigger
{
padding
:
22px
0
;
min-height
:
1em
}
.cube-pullup-wrapper
.after-trigger
{
padding
:
19px
0
}
.cube-scroll-content
{
position
:
relative
;
z-index
:
1
}
.cube-scroll-item
{
height
:
60px
;
line-height
:
60px
;
font-size
:
18px
;
padding-left
:
20px
}
.cube-loading
{
font-size
:
24px
}
.cube-loading-spinners
{
position
:
relative
;
display
:
block
;
width
:
1em
;
height
:
1em
}
.cube-loading-spinner
{
position
:
absolute
;
left
:
44.5%
;
top
:
37%
;
width
:
2px
;
height
:
25%
;
border-radius
:
50%
/
20%
;
opacity
:
.25
;
background-color
:
currentColor
;
-webkit-animation
:
spinner-fade
1s
linear
infinite
;
animation
:
spinner-fade
1s
linear
infinite
}
.cube-loading-spinner
:first-child
{
-webkit-animation-delay
:
0s
;
animation-delay
:
0s
;
-webkit-transform
:
rotate
(
-150deg
)
translateY
(
-150%
);
transform
:
rotate
(
-150deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
2
)
{
-webkit-animation-delay
:
.083333333333333s
;
animation-delay
:
.083333333333333s
;
-webkit-transform
:
rotate
(
-120deg
)
translateY
(
-150%
);
transform
:
rotate
(
-120deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
3
)
{
-webkit-animation-delay
:
.166666666666667s
;
animation-delay
:
.166666666666667s
;
-webkit-transform
:
rotate
(
-90deg
)
translateY
(
-150%
);
transform
:
rotate
(
-90deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
4
)
{
-webkit-animation-delay
:
.25s
;
animation-delay
:
.25s
;
-webkit-transform
:
rotate
(
-60deg
)
translateY
(
-150%
);
transform
:
rotate
(
-60deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
5
)
{
-webkit-animation-delay
:
.333333333333333s
;
animation-delay
:
.333333333333333s
;
-webkit-transform
:
rotate
(
-30deg
)
translateY
(
-150%
);
transform
:
rotate
(
-30deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
6
)
{
-webkit-animation-delay
:
.416666666666667s
;
animation-delay
:
.416666666666667s
;
-webkit-transform
:
rotate
(
0deg
)
translateY
(
-150%
);
transform
:
rotate
(
0deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
7
)
{
-webkit-animation-delay
:
.5s
;
animation-delay
:
.5s
;
-webkit-transform
:
rotate
(
30deg
)
translateY
(
-150%
);
transform
:
rotate
(
30deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
8
)
{
-webkit-animation-delay
:
.583333333333333s
;
animation-delay
:
.583333333333333s
;
-webkit-transform
:
rotate
(
60deg
)
translateY
(
-150%
);
transform
:
rotate
(
60deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
9
)
{
-webkit-animation-delay
:
.666666666666667s
;
animation-delay
:
.666666666666667s
;
-webkit-transform
:
rotate
(
90deg
)
translateY
(
-150%
);
transform
:
rotate
(
90deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
10
)
{
-webkit-animation-delay
:
.75s
;
animation-delay
:
.75s
;
-webkit-transform
:
rotate
(
120deg
)
translateY
(
-150%
);
transform
:
rotate
(
120deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
11
)
{
-webkit-animation-delay
:
.833333333333333s
;
animation-delay
:
.833333333333333s
;
-webkit-transform
:
rotate
(
150deg
)
translateY
(
-150%
);
transform
:
rotate
(
150deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
12
)
{
-webkit-animation-delay
:
.916666666666667s
;
animation-delay
:
.916666666666667s
;
-webkit-transform
:
rotate
(
180deg
)
translateY
(
-150%
);
transform
:
rotate
(
180deg
)
translateY
(
-150%
)}
@-webkit-keyframes
spinner-fade
{
0
%
{
opacity
:
.85
}
50
%
{
opacity
:
.25
}
to
{
opacity
:
.25
}}
@keyframes
spinner-fade
{
0
%
{
opacity
:
.85
}
50
%
{
opacity
:
.25
}
to
{
opacity
:
.25
}}
.cube-drawer-item
{
padding
:
0
20px
;
height
:
50px
;
line-height
:
50px
;
white-space
:
nowrap
;
overflow
:
hidden
;
font-size
:
15px
}
.cube-drawer-item
:after
{
left
:
20px
}
.cube-drawer-item
:last-child:after
{
display
:
none
}
.cube-drawer-item
:first-child:after
{
display
:
block
}
.cube-drawer-item_active
{
background
:
rgba
(
0
,
0
,
0
,
.04
)}
\ No newline at end of file
.cube-drawer
{
z-index
:
5
;
right
:
0
;
left
:
0
;
color
:
#333
}
.cube-drawer
,
.cube-drawer-main
{
position
:
absolute
;
top
:
0
;
bottom
:
0
;
overflow
:
hidden
}
.cube-drawer-main
{
left
:
100%
;
max-width
:
90%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
;
-webkit-box-shadow
:
-2px
0
2px
rgba
(
0
,
0
,
0
,
.2
);
box-shadow
:
-2px
0
2px
rgba
(
0
,
0
,
0
,
.2
)}
.cube-drawer-title
{
position
:
relative
;
padding
:
0
20px
;
height
:
50px
;
line-height
:
50px
;
border-bottom
:
1px
solid
#eee
;
font-size
:
16px
;
background-color
:
#fff
}
.cube-drawer-panels
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-flex
:
1
;
flex
:
1
}
.cube-drawer-panel
{
position
:
relative
;
z-index
:
1
;
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
170px
;
overflow
:
hidden
;
background-color
:
#fff
;
-webkit-box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
);
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
)}
.cube-drawer-panel
+
.cube-drawer-panel
{
margin-left
:
-67px
}
.cube-drawer-panel
:first-child
{
-webkit-box-shadow
:
none
;
box-shadow
:
none
}
.cube-drawer-scroll-wrapper
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
}
.cube-drawer-move-enter
,
.cube-drawer-move-leave-to
{
-webkit-transform
:
translate
(
67px
);
transform
:
translate
(
67px
)}
.cube-drawer-move-enter-active
,
.cube-drawer-move-leave-active
{
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
}
.cube-scroll-wrapper
{
position
:
relative
;
height
:
100%
;
overflow
:
hidden
}
.cube-scroll-list-wrapper
{
overflow
:
hidden
}
.cube-pulldown-wrapper
{
position
:
absolute
;
width
:
100%
;
left
:
0
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-transition
:
all
;
transition
:
all
}
.cube-pulldown-wrapper
.before-trigger
{
height
:
54px
;
line-height
:
0
;
padding-top
:
6px
}
.cube-pulldown-wrapper
.after-trigger
.loading
{
padding
:
8px
0
}
.cube-pulldown-wrapper
.after-trigger
.cube-pulldown-loaded
{
padding
:
12px
0
}
.cube-pullup-wrapper
{
width
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
-webkit-box-align
:
center
;
align-items
:
center
}
.cube-pullup-wrapper
.before-trigger
{
padding
:
22px
0
;
min-height
:
1em
}
.cube-pullup-wrapper
.after-trigger
{
padding
:
19px
0
}
.cube-scroll-content
{
position
:
relative
;
z-index
:
1
}
.cube-scroll-item
{
height
:
60px
;
line-height
:
60px
;
font-size
:
18px
;
padding-left
:
20px
}
.cube-loading
{
font-size
:
24px
}
.cube-loading-spinners
{
position
:
relative
;
display
:
block
;
width
:
1em
;
height
:
1em
}
.cube-loading-spinner
{
position
:
absolute
;
left
:
44.5%
;
top
:
37%
;
width
:
2px
;
height
:
25%
;
border-radius
:
50%
/
20%
;
opacity
:
.25
;
background-color
:
currentColor
;
-webkit-animation
:
spinner-fade
1s
linear
infinite
;
animation
:
spinner-fade
1s
linear
infinite
}
.cube-loading-spinner
:first-child
{
-webkit-animation-delay
:
0s
;
animation-delay
:
0s
;
-webkit-transform
:
rotate
(
-150deg
)
translateY
(
-150%
);
transform
:
rotate
(
-150deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
2
)
{
-webkit-animation-delay
:
.083333333333333s
;
animation-delay
:
.083333333333333s
;
-webkit-transform
:
rotate
(
-120deg
)
translateY
(
-150%
);
transform
:
rotate
(
-120deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
3
)
{
-webkit-animation-delay
:
.166666666666667s
;
animation-delay
:
.166666666666667s
;
-webkit-transform
:
rotate
(
-90deg
)
translateY
(
-150%
);
transform
:
rotate
(
-90deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
4
)
{
-webkit-animation-delay
:
.25s
;
animation-delay
:
.25s
;
-webkit-transform
:
rotate
(
-60deg
)
translateY
(
-150%
);
transform
:
rotate
(
-60deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
5
)
{
-webkit-animation-delay
:
.333333333333333s
;
animation-delay
:
.333333333333333s
;
-webkit-transform
:
rotate
(
-30deg
)
translateY
(
-150%
);
transform
:
rotate
(
-30deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
6
)
{
-webkit-animation-delay
:
.416666666666667s
;
animation-delay
:
.416666666666667s
;
-webkit-transform
:
rotate
(
0deg
)
translateY
(
-150%
);
transform
:
rotate
(
0deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
7
)
{
-webkit-animation-delay
:
.5s
;
animation-delay
:
.5s
;
-webkit-transform
:
rotate
(
30deg
)
translateY
(
-150%
);
transform
:
rotate
(
30deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
8
)
{
-webkit-animation-delay
:
.583333333333333s
;
animation-delay
:
.583333333333333s
;
-webkit-transform
:
rotate
(
60deg
)
translateY
(
-150%
);
transform
:
rotate
(
60deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
9
)
{
-webkit-animation-delay
:
.666666666666667s
;
animation-delay
:
.666666666666667s
;
-webkit-transform
:
rotate
(
90deg
)
translateY
(
-150%
);
transform
:
rotate
(
90deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
10
)
{
-webkit-animation-delay
:
.75s
;
animation-delay
:
.75s
;
-webkit-transform
:
rotate
(
120deg
)
translateY
(
-150%
);
transform
:
rotate
(
120deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
11
)
{
-webkit-animation-delay
:
.833333333333333s
;
animation-delay
:
.833333333333333s
;
-webkit-transform
:
rotate
(
150deg
)
translateY
(
-150%
);
transform
:
rotate
(
150deg
)
translateY
(
-150%
)}
.cube-loading-spinner
:nth-child
(
12
)
{
-webkit-animation-delay
:
.916666666666667s
;
animation-delay
:
.916666666666667s
;
-webkit-transform
:
rotate
(
180deg
)
translateY
(
-150%
);
transform
:
rotate
(
180deg
)
translateY
(
-150%
)}
@-webkit-keyframes
spinner-fade
{
0
%
{
opacity
:
.85
}
50
%
{
opacity
:
.25
}
to
{
opacity
:
.25
}}
@keyframes
spinner-fade
{
0
%
{
opacity
:
.85
}
50
%
{
opacity
:
.25
}
to
{
opacity
:
.25
}}
.cube-drawer-item
{
padding
:
0
20px
;
height
:
50px
;
line-height
:
50px
;
white-space
:
nowrap
;
overflow
:
hidden
;
font-size
:
15px
}
.cube-drawer-item
:after
{
left
:
20px
}
.cube-drawer-item
:last-child:after
{
display
:
none
}
.cube-drawer-item
:first-child:after
{
display
:
block
}
.cube-drawer-item_active
{
background
:
rgba
(
0
,
0
,
0
,
.04
)}
\ No newline at end of file
lib/form/form.min.css
浏览文件 @
a059568c
此差异已折叠。
点击以展开。
lib/form/style.css
浏览文件 @
a059568c
此差异已折叠。
点击以展开。
lib/index.js
浏览文件 @
a059568c
...
...
@@ -6554,7 +6554,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
}
var Cube = {
version: "1.10.
3
",
version: "1.10.
4
",
install: install,
BScroll: _module.BetterScroll,
createAPI: _module.createAPI
...
...
lib/input/input.min.css
浏览文件 @
a059568c
.cube-input
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
font-size
:
14px
;
line-height
:
1.429
;
background-color
:
#fff
;
position
:
relative
}
.cube-input
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ebebeb
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-input
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-input
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-input-field
{
display
:
block
;
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
100%
;
padding
:
10px
;
box-sizing
:
border-box
;
color
:
#666
;
line-height
:
inherit
;
background-color
:
inherit
;
border-radius
:
2px
;
outline
:
none
}
.cube-input-field
::-webkit-input-placeholder
{
color
:
#ccc
!important
;
text-overflow
:
ellipsis
}
.cube-input-field
+
.cube-input-append
{
margin-left
:
-5px
}
.cube-input_active
:after
{
border-color
:
#fc9153
}
.cube-input-append
,
.cube-input-prepend
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.cube-input-prepend
+
.cube-input-field
{
margin-left
:
-5px
}
.cube-input-clear
,
.cube-input-eye
{
width
:
1em
;
height
:
1em
;
line-height
:
1
;
padding
:
10px
;
box-sizing
:
content-box
;
color
:
#999
}
.cube-input-clear
>
i
,
.cube-input-eye
>
i
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.2
);
transform
:
scale
(
1.2
)}
.cube-input-eye
>
.cubeic-eye-invisible
,
.cube-input-eye
>
.cubeic-eye-visible
{
-webkit-transform
:
scale
(
1.4
);
transform
:
scale
(
1.4
)}
\ No newline at end of file
.cube-input
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
font-size
:
14px
;
line-height
:
1.429
;
background-color
:
#fff
;
position
:
relative
}
.cube-input
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ebebeb
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-input
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-input
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-input-field
{
display
:
block
;
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
100%
;
padding
:
10px
;
box-sizing
:
border-box
;
color
:
#666
;
line-height
:
inherit
;
background-color
:
inherit
;
border-radius
:
2px
;
outline
:
none
}
.cube-input-field
::-webkit-input-placeholder
{
color
:
#ccc
!important
;
text-overflow
:
ellipsis
}
.cube-input-field
+
.cube-input-append
{
margin-left
:
-5px
}
.cube-input_active
:after
{
border-color
:
#fc9153
}
.cube-input-append
,
.cube-input-prepend
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.cube-input-prepend
+
.cube-input-field
{
margin-left
:
-5px
}
.cube-input-clear
,
.cube-input-eye
{
width
:
1em
;
height
:
1em
;
line-height
:
1
;
padding
:
10px
;
box-sizing
:
content-box
;
color
:
#999
}
.cube-input-clear
>
i
,
.cube-input-eye
>
i
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.2
);
transform
:
scale
(
1.2
)}
.cube-input-eye
>
.cubeic-eye-invisible
,
.cube-input-eye
>
.cubeic-eye-visible
{
-webkit-transform
:
scale
(
1.4
);
transform
:
scale
(
1.4
)}
\ No newline at end of file
lib/input/style.css
浏览文件 @
a059568c
.cube-input
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
font-size
:
14px
;
line-height
:
1.429
;
background-color
:
#fff
;
position
:
relative
}
.cube-input
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ebebeb
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-input
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-input
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-input-field
{
display
:
block
;
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
100%
;
padding
:
10px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
color
:
#666
;
line-height
:
inherit
;
background-color
:
inherit
;
border-radius
:
2px
;
outline
:
none
}
.cube-input-field
::-webkit-input-placeholder
{
color
:
#ccc
!important
;
text-overflow
:
ellipsis
}
.cube-input-field
+
.cube-input-append
{
margin-left
:
-5px
}
.cube-input_active
:after
{
border-color
:
#fc9153
}
.cube-input-append
,
.cube-input-prepend
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.cube-input-prepend
+
.cube-input-field
{
margin-left
:
-5px
}
.cube-input-clear
,
.cube-input-eye
{
width
:
1em
;
height
:
1em
;
line-height
:
1
;
padding
:
10px
;
-webkit-box-sizing
:
content-box
;
box-sizing
:
content-box
;
color
:
#999
}
.cube-input-clear
>
i
,
.cube-input-eye
>
i
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.2
);
transform
:
scale
(
1.2
)}
.cube-input-eye
>
.cubeic-eye-invisible
,
.cube-input-eye
>
.cubeic-eye-visible
{
-webkit-transform
:
scale
(
1.4
);
transform
:
scale
(
1.4
)}
\ No newline at end of file
.cube-input
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
font-size
:
14px
;
line-height
:
1.429
;
background-color
:
#fff
;
position
:
relative
}
.cube-input
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ebebeb
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-input
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-input
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-input-field
{
display
:
block
;
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
100%
;
padding
:
10px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
color
:
#666
;
line-height
:
inherit
;
background-color
:
inherit
;
border-radius
:
2px
;
outline
:
none
}
.cube-input-field
::-webkit-input-placeholder
{
color
:
#ccc
!important
;
text-overflow
:
ellipsis
}
.cube-input-field
+
.cube-input-append
{
margin-left
:
-5px
}
.cube-input_active
:after
{
border-color
:
#fc9153
}
.cube-input-append
,
.cube-input-prepend
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.cube-input-prepend
+
.cube-input-field
{
margin-left
:
-5px
}
.cube-input-clear
,
.cube-input-eye
{
width
:
1em
;
height
:
1em
;
line-height
:
1
;
padding
:
10px
;
-webkit-box-sizing
:
content-box
;
box-sizing
:
content-box
;
color
:
#999
}
.cube-input-clear
>
i
,
.cube-input-eye
>
i
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.2
);
transform
:
scale
(
1.2
)}
.cube-input-eye
>
.cubeic-eye-invisible
,
.cube-input-eye
>
.cubeic-eye-visible
{
-webkit-transform
:
scale
(
1.4
);
transform
:
scale
(
1.4
)}
\ No newline at end of file
lib/radio-group/radio-group.min.css
浏览文件 @
a059568c
.cube-radio-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:after
,
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-radio-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:after
{
border-color
:
#ccc
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:after
,
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
0
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
.cube-radio
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
1.42em
}
.cube-radio-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-radio-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-radio-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
color
:
transparent
;
background-color
:
transparent
;
border-radius
:
50%
}
.cube-radio-ui
:before
,
.cube-radio-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-radio-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-radio-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
overflow
:
hidden
;
width
:
100%
;
height
:
100%
;
border-radius
:
50%
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-radio-ui
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
border-radius
:
50%
}
.cube-radio_selected
.cube-radio-ui
{
background-color
:
#fc9153
}
.cube-radio_selected
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio_selected
.cube-radio-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fff
}
.cube-radio_disabled
.cube-radio-ui
{
background-color
:
#eee
}
.cube-radio_disabled
.cube-radio-ui
:before
,
.cube-radio_disabled
.cube-radio-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
{
background-color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
i
:before
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
1
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
1
)}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
:before
{
color
:
#fc9153
}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fc9153
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
#eee
}
.cube-radio-hollow.cube-radio_disabled.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#eee
}
\ No newline at end of file
.cube-radio-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:after
,
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-radio-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:after
{
border-color
:
#ccc
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:after
,
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
0
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
.cube-radio
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
1.42em
}
.cube-radio-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-radio-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-radio-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
color
:
transparent
;
background-color
:
transparent
;
border-radius
:
50%
}
.cube-radio-ui
:before
,
.cube-radio-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-radio-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-radio-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
overflow
:
hidden
;
width
:
100%
;
height
:
100%
;
border-radius
:
50%
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-radio-ui
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
border-radius
:
50%
}
.cube-radio_selected
.cube-radio-ui
{
background-color
:
#fc9153
}
.cube-radio_selected
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio_selected
.cube-radio-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fff
}
.cube-radio_disabled
.cube-radio-ui
{
background-color
:
#eee
}
.cube-radio_disabled
.cube-radio-ui
:before
,
.cube-radio_disabled
.cube-radio-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
{
background-color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
i
:before
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
1
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
1
)}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
:before
{
color
:
#fc9153
}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fc9153
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
#eee
}
.cube-radio-hollow.cube-radio_disabled.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#eee
}
\ No newline at end of file
lib/radio-group/style.css
浏览文件 @
a059568c
.cube-radio-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:after
,
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-radio-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:after
{
border-color
:
#ccc
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:after
,
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
0
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
.cube-radio
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
1.42em
}
.cube-radio-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-radio-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-radio-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
color
:
transparent
;
background-color
:
transparent
;
border-radius
:
50%
}
.cube-radio-ui
:before
,
.cube-radio-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-radio-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-radio-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
overflow
:
hidden
;
width
:
100%
;
height
:
100%
;
border-radius
:
50%
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-radio-ui
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
border-radius
:
50%
}
.cube-radio_selected
.cube-radio-ui
{
background-color
:
#fc9153
}
.cube-radio_selected
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio_selected
.cube-radio-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fff
}
.cube-radio_disabled
.cube-radio-ui
{
background-color
:
#eee
}
.cube-radio_disabled
.cube-radio-ui
:before
,
.cube-radio_disabled
.cube-radio-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
{
background-color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
i
:before
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
1
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
1
)}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
:before
{
color
:
#fc9153
}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fc9153
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
#eee
}
.cube-radio-hollow.cube-radio_disabled.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#eee
}
\ No newline at end of file
.cube-radio-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:after
,
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-radio-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:after
{
border-color
:
#ccc
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:after
,
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
0
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
.cube-radio
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
1.42em
}
.cube-radio-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-radio-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-radio-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
color
:
transparent
;
background-color
:
transparent
;
border-radius
:
50%
}
.cube-radio-ui
:before
,
.cube-radio-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-radio-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-radio-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
overflow
:
hidden
;
width
:
100%
;
height
:
100%
;
border-radius
:
50%
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-radio-ui
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
border-radius
:
50%
}
.cube-radio_selected
.cube-radio-ui
{
background-color
:
#fc9153
}
.cube-radio_selected
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio_selected
.cube-radio-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fff
}
.cube-radio_disabled
.cube-radio-ui
{
background-color
:
#eee
}
.cube-radio_disabled
.cube-radio-ui
:before
,
.cube-radio_disabled
.cube-radio-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
{
background-color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
i
:before
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
1
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
1
)}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
:before
{
color
:
#fc9153
}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fc9153
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
#eee
}
.cube-radio-hollow.cube-radio_disabled.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#eee
}
\ No newline at end of file
lib/radio/radio.min.css
浏览文件 @
a059568c
.cube-radio-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:after
,
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-radio-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:after
{
border-color
:
#ccc
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:after
,
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
0
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
.cube-radio
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
1.42em
}
.cube-radio-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-radio-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-radio-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
color
:
transparent
;
background-color
:
transparent
;
border-radius
:
50%
}
.cube-radio-ui
:before
,
.cube-radio-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-radio-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-radio-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
overflow
:
hidden
;
width
:
100%
;
height
:
100%
;
border-radius
:
50%
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-radio-ui
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
border-radius
:
50%
}
.cube-radio_selected
.cube-radio-ui
{
background-color
:
#fc9153
}
.cube-radio_selected
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio_selected
.cube-radio-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fff
}
.cube-radio_disabled
.cube-radio-ui
{
background-color
:
#eee
}
.cube-radio_disabled
.cube-radio-ui
:before
,
.cube-radio_disabled
.cube-radio-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
{
background-color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
i
:before
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
1
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
1
)}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
:before
{
color
:
#fc9153
}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fc9153
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
#eee
}
.cube-radio-hollow.cube-radio_disabled.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#eee
}
\ No newline at end of file
.cube-radio-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:after
,
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-radio-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:after
{
border-color
:
#ccc
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:after
,
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
0
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
.cube-radio
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
1.42em
}
.cube-radio-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-radio-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-radio-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
color
:
transparent
;
background-color
:
transparent
;
border-radius
:
50%
}
.cube-radio-ui
:before
,
.cube-radio-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-radio-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-radio-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
overflow
:
hidden
;
width
:
100%
;
height
:
100%
;
border-radius
:
50%
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-radio-ui
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
border-radius
:
50%
}
.cube-radio_selected
.cube-radio-ui
{
background-color
:
#fc9153
}
.cube-radio_selected
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio_selected
.cube-radio-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fff
}
.cube-radio_disabled
.cube-radio-ui
{
background-color
:
#eee
}
.cube-radio_disabled
.cube-radio-ui
:before
,
.cube-radio_disabled
.cube-radio-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
{
background-color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
i
:before
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
1
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
1
)}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
:before
{
color
:
#fc9153
}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fc9153
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
#eee
}
.cube-radio-hollow.cube-radio_disabled.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#eee
}
\ No newline at end of file
lib/radio/style.css
浏览文件 @
a059568c
.cube-radio-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:after
,
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-radio-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:after
{
border-color
:
#ccc
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:after
,
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
0
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
.cube-radio
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
1.42em
}
.cube-radio-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-radio-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-radio-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
color
:
transparent
;
background-color
:
transparent
;
border-radius
:
50%
}
.cube-radio-ui
:before
,
.cube-radio-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-radio-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-radio-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
overflow
:
hidden
;
width
:
100%
;
height
:
100%
;
border-radius
:
50%
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-radio-ui
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
border-radius
:
50%
}
.cube-radio_selected
.cube-radio-ui
{
background-color
:
#fc9153
}
.cube-radio_selected
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio_selected
.cube-radio-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fff
}
.cube-radio_disabled
.cube-radio-ui
{
background-color
:
#eee
}
.cube-radio_disabled
.cube-radio-ui
:before
,
.cube-radio_disabled
.cube-radio-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
{
background-color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
i
:before
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
1
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
1
)}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
:before
{
color
:
#fc9153
}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fc9153
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
#eee
}
.cube-radio-hollow.cube-radio_disabled.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#eee
}
\ No newline at end of file
.cube-radio-group
{
z-index
:
1
;
overflow
:
hidden
;
background-color
:
#fff
}
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:after
,
.cube-radio-group
.cube-radio
:last-child
.cube-radio-wrap
:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
{
display
:
-webkit-box
;
display
:
flex
;
padding-left
:
0
;
position
:
relative
;
border-radius
:
2px
}
.cube-radio-group
[
data-horz
=
true
]
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-radio-group
[
data-horz
=
true
]
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
text-align
:
center
;
padding-left
:
10px
;
padding-right
:
10px
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:after
{
border-color
:
#ccc
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:after
,
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
:last-child:before
{
display
:
none
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
position
:
relative
;
margin-left
:
.42em
;
-webkit-box-ordinal-group
:
2
;
order
:
1
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
0
}
.cube-radio-group
[
data-horz
=
true
]
.cube-radio-wrap
{
-webkit-box-pack
:
center
;
justify-content
:
center
}
.cube-radio
{
position
:
relative
;
padding
:
0
16px
;
text-align
:
left
;
font-size
:
100%
;
color
:
#666
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-ui
{
margin-right
:
0
;
position
:
absolute
;
right
:
0
}
.cube-radio
[
data-pos
=
right
]
.cube-radio-label
{
margin-right
:
1.42em
}
.cube-radio-wrap
{
position
:
relative
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
;
padding
:
11px
0
;
line-height
:
1.5
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.cube-radio-input
{
z-index
:
1
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
}
.cube-radio-ui
{
position
:
relative
;
width
:
1em
;
height
:
1em
;
margin-right
:
.42em
;
line-height
:
1
;
color
:
transparent
;
background-color
:
transparent
;
border-radius
:
50%
}
.cube-radio-ui
:before
,
.cube-radio-ui
i
{
-webkit-transition
:
all
.2s
;
transition
:
all
.2s
}
.cube-radio-ui
:before
{
color
:
#ccc
;
display
:
inline-block
;
-webkit-transform
:
scale
(
1.24
);
transform
:
scale
(
1.24
)}
.cube-radio-ui
i
{
position
:
absolute
;
top
:
0
;
left
:
0
;
overflow
:
hidden
;
width
:
100%
;
height
:
100%
;
border-radius
:
50%
;
-webkit-transform
:
scale
(
.4
);
transform
:
scale
(
.4
)}
.cube-radio-ui
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
50%
;
height
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
.8
);
border-radius
:
50%
}
.cube-radio_selected
.cube-radio-ui
{
background-color
:
#fc9153
}
.cube-radio_selected
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio_selected
.cube-radio-ui
i
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fff
}
.cube-radio_disabled
.cube-radio-ui
{
background-color
:
#eee
}
.cube-radio_disabled
.cube-radio-ui
:before
,
.cube-radio_disabled
.cube-radio-ui
i
{
-webkit-transition
:
none
;
transition
:
none
}
.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
{
background-color
:
transparent
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
i
:before
,
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
scale
(
1
);
transform
:
translate
(
-50%
,
-50%
)
scale
(
1
)}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
:before
{
color
:
#fc9153
}
.cube-radio-hollow.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#fc9153
}
.cube-radio-hollow.cube-radio_disabled
.cube-radio-ui
:before
{
color
:
#eee
}
.cube-radio-hollow.cube-radio_disabled.cube-radio_selected
.cube-radio-ui
i
:before
{
background-color
:
#eee
}
\ No newline at end of file
lib/select/select.min.css
浏览文件 @
a059568c
.cube-popup
{
position
:
fixed
;
left
:
0
;
right
:
0
;
top
:
0
;
bottom
:
0
;
z-index
:
100
;
pointer-events
:
none
}
.cube-popup_mask
{
pointer-events
:
auto
}
.cube-popup_mask
.cube-popup-mask
{
display
:
block
}
.cube-popup-container
,
.cube-popup-mask
{
position
:
absolute
;
width
:
100%
;
height
:
100%
}
.cube-popup-mask
{
display
:
none
;
overflow
:
hidden
;
background-color
:
#25262d
;
opacity
:
.4
;
pointer-events
:
auto
}
.cube-popup-mask
:before
{
content
:
"."
;
display
:
block
;
width
:
1px
;
height
:
1px
;
background-color
:
rgba
(
0
,
0
,
0
,
.1
);
margin-left
:
-10px
}
.cube-popup-container
{
-webkit-transform
:
translate
(
100%
,
100%
);
transform
:
translate
(
100%
,
100%
)}
.cube-popup-content
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
box-sizing
:
border-box
;
-webkit-transform
:
translate
(
-100%
,
-100%
);
transform
:
translate
(
-100%
,
-100%
);
pointer-events
:
auto
}
.cube-popup-center
.cube-popup-content
,
.cube-popup-left
.cube-popup-content
,
.cube-popup-right
.cube-popup-content
{
top
:
-50%
;
left
:
-50%
;
width
:
auto
;
max-width
:
100%
;
-webkit-transform
:
translate
(
0
);
transform
:
translate
(
0
)}
.cube-popup-left
.cube-popup-content
,
.cube-popup-right
.cube-popup-content
{
height
:
100%
;
top
:
-100%
}
.cube-popup-center
.cube-popup-content
{
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
)}
.cube-popup-top
.cube-popup-content
{
top
:
-100%
;
left
:
-100%
;
-webkit-transform
:
translate
(
0
);
transform
:
translate
(
0
)}
.cube-popup-right
.cube-popup-content
{
top
:
-100%
;
right
:
100%
}
.cube-popup-left
.cube-popup-content
{
left
:
-100%
}
.cube-picker-fade-enter
,
.cube-picker-fade-leave-active
{
opacity
:
0
}
.cube-picker-fade-enter-active
,
.cube-picker-fade-leave-active
{
-webkit-transition
:
all
.3s
ease-in-out
;
transition
:
all
.3s
ease-in-out
}
.cube-picker-panel
{
height
:
273px
;
text-align
:
center
;
font-size
:
14px
;
background
:
#fff
}
.cube-picker-move-enter
,
.cube-picker-move-leave-active
{
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)}
.cube-picker-move-enter-active
,
.cube-picker-move-leave-active
{
-webkit-transition
:
all
.3s
ease-in-out
;
transition
:
all
.3s
ease-in-out
}
.cube-picker-choose
{
position
:
relative
;
height
:
60px
}
.cube-picker-cancel
,
.cube-picker-confirm
{
line-height
:
60px
;
padding
:
0
16px
;
box-sizing
:
content-box
;
font-size
:
14px
}
.cube-picker-confirm
{
position
:
absolute
;
right
:
0
;
color
:
#fc9153
}
.cube-picker-confirm
:active
{
color
:
#fdc2a5
}
.cube-picker-cancel
{
position
:
absolute
;
left
:
0
;
color
:
#999
}
.cube-picker-cancel
:active
{
color
:
#ccc
}
.cube-picker-title-group
{
padding
:
0
60px
;
display
:
-webkit-box
;
display
:
flex
;
height
:
100%
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-flow
:
column
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
text-align
:
center
}
.cube-picker-title
{
font-size
:
18px
;
line-height
:
25px
;
font-weight
:
400
;
color
:
#333
}
.cube-picker-subtitle
{
margin-top
:
2px
;
line-height
:
16px
;
font-size
:
12px
;
color
:
#999
}
.cube-picker-content
{
position
:
relative
;
top
:
20px
}
.cube-picker-content
>
i
{
position
:
absolute
;
z-index
:
10
;
left
:
0
;
width
:
100%
;
height
:
68px
;
pointer-events
:
none
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
.cube-picker-content
>
.border-bottom-1px
{
top
:
0
;
background
:
-webkit-gradient
(
linear
,
left
bottom
,
left
top
,
from
(
hsla
(
0
,
0%
,
100%
,
.4
)),
to
(
hsla
(
0
,
0%
,
100%
,
.8
)));
background
:
-webkit-linear-gradient
(
bottom
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
));
background
:
linear-gradient
(
0deg
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
))}
.cube-picker-content
>
.border-top-1px
{
bottom
:
0
;
background
:
-webkit-gradient
(
linear
,
left
top
,
left
bottom
,
from
(
hsla
(
0
,
0%
,
100%
,
.4
)),
to
(
hsla
(
0
,
0%
,
100%
,
.8
)));
background
:
-webkit-linear-gradient
(
top
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
));
background
:
linear-gradient
(
180deg
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
))}
.cube-picker-wheel-wrapper
{
display
:
-webkit-box
;
display
:
flex
;
padding
:
0
16px
}
.cube-picker-wheel-wrapper
>
div
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
height
:
173px
;
overflow
:
hidden
;
font-size
:
20px
}
.cube-picker-wheel-scroll
{
padding
:
0
;
margin-top
:
68px
;
line-height
:
36px
;
list-style
:
none
}
.cube-picker-wheel-item
{
list-style
:
none
;
height
:
36px
;
overflow
:
hidden
;
white-space
:
nowrap
;
color
:
#333
}
.cube-picker-footer
{
height
:
20px
}
.cube-select
{
padding
:
10px
20px
10px
10px
;
border-radius
:
2px
;
font-size
:
14px
;
line-height
:
1.429
;
color
:
#666
;
background-color
:
#fff
;
position
:
relative
}
.cube-select
,
.cube-select
:after
{
box-sizing
:
border-box
}
.cube-select
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-select
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-select
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-select
>
span
{
display
:
inline-block
}
.cube-select_active
{
position
:
relative
}
.cube-select_active
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-select_active
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-select_active
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-select_active
.cube-select-icon
{
-webkit-transform
:
translateY
(
-50%
)
rotate
(
180deg
);
transform
:
translateY
(
-50%
)
rotate
(
180deg
)}
.cube-select_disabled
{
color
:
#b8b8b8
;
background-color
:
rgba
(
0
,
0
,
0
,
.04
);
cursor
:
not-allowed
}
.cube-select-placeholder
{
color
:
#ccc
}
.cube-select-icon
{
position
:
absolute
;
right
:
8px
;
top
:
50%
;
-webkit-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
);
border-style
:
solid
;
border-color
:
#999
transparent
transparent
;
border-width
:
4px
4px
0
;
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
}
\ No newline at end of file
.cube-popup
{
position
:
fixed
;
left
:
0
;
right
:
0
;
top
:
0
;
bottom
:
0
;
z-index
:
100
;
pointer-events
:
none
}
.cube-popup_mask
{
pointer-events
:
auto
}
.cube-popup_mask
.cube-popup-mask
{
display
:
block
}
.cube-popup-container
,
.cube-popup-mask
{
position
:
absolute
;
width
:
100%
;
height
:
100%
}
.cube-popup-mask
{
display
:
none
;
overflow
:
hidden
;
background-color
:
#25262d
;
opacity
:
.4
;
pointer-events
:
auto
}
.cube-popup-mask
:before
{
content
:
"."
;
display
:
block
;
width
:
1px
;
height
:
1px
;
background-color
:
rgba
(
0
,
0
,
0
,
.1
);
margin-left
:
-10px
}
.cube-popup-container
{
-webkit-transform
:
translate
(
100%
,
100%
);
transform
:
translate
(
100%
,
100%
)}
.cube-popup-content
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
box-sizing
:
border-box
;
-webkit-transform
:
translate
(
-100%
,
-100%
);
transform
:
translate
(
-100%
,
-100%
);
pointer-events
:
auto
}
.cube-popup-center
.cube-popup-content
,
.cube-popup-left
.cube-popup-content
,
.cube-popup-right
.cube-popup-content
{
top
:
-50%
;
left
:
-50%
;
width
:
auto
;
max-width
:
100%
;
-webkit-transform
:
translate
(
0
);
transform
:
translate
(
0
)}
.cube-popup-left
.cube-popup-content
,
.cube-popup-right
.cube-popup-content
{
height
:
100%
;
top
:
-100%
}
.cube-popup-center
.cube-popup-content
{
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
)}
.cube-popup-top
.cube-popup-content
{
top
:
-100%
;
left
:
-100%
;
-webkit-transform
:
translate
(
0
);
transform
:
translate
(
0
)}
.cube-popup-right
.cube-popup-content
{
top
:
-100%
;
right
:
100%
}
.cube-popup-left
.cube-popup-content
{
left
:
-100%
}
.cube-picker-fade-enter
,
.cube-picker-fade-leave-active
{
opacity
:
0
}
.cube-picker-fade-enter-active
,
.cube-picker-fade-leave-active
{
-webkit-transition
:
all
.3s
ease-in-out
;
transition
:
all
.3s
ease-in-out
}
.cube-picker-panel
{
height
:
273px
;
text-align
:
center
;
font-size
:
14px
;
background
:
#fff
}
.cube-picker-move-enter
,
.cube-picker-move-leave-active
{
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)}
.cube-picker-move-enter-active
,
.cube-picker-move-leave-active
{
-webkit-transition
:
all
.3s
ease-in-out
;
transition
:
all
.3s
ease-in-out
}
.cube-picker-choose
{
position
:
relative
;
height
:
60px
}
.cube-picker-cancel
,
.cube-picker-confirm
{
line-height
:
60px
;
padding
:
0
16px
;
box-sizing
:
content-box
;
font-size
:
14px
}
.cube-picker-confirm
{
position
:
absolute
;
right
:
0
;
color
:
#fc9153
}
.cube-picker-confirm
:active
{
color
:
#fdc2a5
}
.cube-picker-cancel
{
position
:
absolute
;
left
:
0
;
color
:
#999
}
.cube-picker-cancel
:active
{
color
:
#ccc
}
.cube-picker-title-group
{
padding
:
0
60px
;
display
:
-webkit-box
;
display
:
flex
;
height
:
100%
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-flow
:
column
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
text-align
:
center
}
.cube-picker-title
{
font-size
:
18px
;
line-height
:
25px
;
font-weight
:
400
;
color
:
#333
}
.cube-picker-subtitle
{
margin-top
:
2px
;
line-height
:
16px
;
font-size
:
12px
;
color
:
#999
}
.cube-picker-content
{
position
:
relative
;
top
:
20px
}
.cube-picker-content
>
i
{
position
:
absolute
;
z-index
:
10
;
left
:
0
;
width
:
100%
;
height
:
68px
;
pointer-events
:
none
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
.cube-picker-content
>
.border-bottom-1px
{
top
:
0
;
background
:
-webkit-gradient
(
linear
,
left
bottom
,
left
top
,
from
(
hsla
(
0
,
0%
,
100%
,
.4
)),
to
(
hsla
(
0
,
0%
,
100%
,
.8
)));
background
:
-webkit-linear-gradient
(
bottom
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
));
background
:
linear-gradient
(
0deg
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
))}
.cube-picker-content
>
.border-top-1px
{
bottom
:
0
;
background
:
-webkit-gradient
(
linear
,
left
top
,
left
bottom
,
from
(
hsla
(
0
,
0%
,
100%
,
.4
)),
to
(
hsla
(
0
,
0%
,
100%
,
.8
)));
background
:
-webkit-linear-gradient
(
top
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
));
background
:
linear-gradient
(
180deg
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
))}
.cube-picker-wheel-wrapper
{
display
:
-webkit-box
;
display
:
flex
;
padding
:
0
16px
}
.cube-picker-wheel-wrapper
>
div
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
height
:
173px
;
overflow
:
hidden
;
font-size
:
20px
}
.cube-picker-wheel-scroll
{
padding
:
0
;
margin-top
:
68px
;
line-height
:
36px
;
list-style
:
none
}
.cube-picker-wheel-item
{
list-style
:
none
;
height
:
36px
;
overflow
:
hidden
;
white-space
:
nowrap
;
color
:
#333
}
.cube-picker-footer
{
height
:
20px
}
.cube-select
{
padding
:
10px
20px
10px
10px
;
border-radius
:
2px
;
font-size
:
14px
;
line-height
:
1.429
;
color
:
#666
;
background-color
:
#fff
;
position
:
relative
}
.cube-select
,
.cube-select
:after
{
box-sizing
:
border-box
}
.cube-select
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-select
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-select
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-select
>
span
{
display
:
inline-block
}
.cube-select_active
{
position
:
relative
}
.cube-select_active
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-select_active
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-select_active
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-select_active
.cube-select-icon
{
-webkit-transform
:
translateY
(
-50%
)
rotate
(
180deg
);
transform
:
translateY
(
-50%
)
rotate
(
180deg
)}
.cube-select_disabled
{
color
:
#b8b8b8
;
background-color
:
rgba
(
0
,
0
,
0
,
.04
);
cursor
:
not-allowed
}
.cube-select-placeholder
{
color
:
#ccc
}
.cube-select-icon
{
position
:
absolute
;
right
:
8px
;
top
:
50%
;
-webkit-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
);
border-style
:
solid
;
border-color
:
#999
transparent
transparent
;
border-width
:
4px
4px
0
;
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
}
\ No newline at end of file
lib/select/style.css
浏览文件 @
a059568c
.cube-popup
{
position
:
fixed
;
left
:
0
;
right
:
0
;
top
:
0
;
bottom
:
0
;
z-index
:
100
;
pointer-events
:
none
}
.cube-popup_mask
{
pointer-events
:
auto
}
.cube-popup_mask
.cube-popup-mask
{
display
:
block
}
.cube-popup-container
,
.cube-popup-mask
{
position
:
absolute
;
width
:
100%
;
height
:
100%
}
.cube-popup-mask
{
display
:
none
;
overflow
:
hidden
;
background-color
:
#25262d
;
opacity
:
.4
;
pointer-events
:
auto
}
.cube-popup-mask
:before
{
content
:
"."
;
display
:
block
;
width
:
1px
;
height
:
1px
;
background-color
:
rgba
(
0
,
0
,
0
,
.1
);
margin-left
:
-10px
}
.cube-popup-container
{
-webkit-transform
:
translate
(
100%
,
100%
);
transform
:
translate
(
100%
,
100%
)}
.cube-popup-content
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
-webkit-transform
:
translate
(
-100%
,
-100%
);
transform
:
translate
(
-100%
,
-100%
);
pointer-events
:
auto
}
.cube-popup-center
.cube-popup-content
,
.cube-popup-left
.cube-popup-content
,
.cube-popup-right
.cube-popup-content
{
top
:
-50%
;
left
:
-50%
;
width
:
auto
;
max-width
:
100%
;
-webkit-transform
:
translate
(
0
);
transform
:
translate
(
0
)}
.cube-popup-left
.cube-popup-content
,
.cube-popup-right
.cube-popup-content
{
height
:
100%
;
top
:
-100%
}
.cube-popup-center
.cube-popup-content
{
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
)}
.cube-popup-top
.cube-popup-content
{
top
:
-100%
;
left
:
-100%
;
-webkit-transform
:
translate
(
0
);
transform
:
translate
(
0
)}
.cube-popup-right
.cube-popup-content
{
top
:
-100%
;
right
:
100%
}
.cube-popup-left
.cube-popup-content
{
left
:
-100%
}
.cube-picker-fade-enter
,
.cube-picker-fade-leave-active
{
opacity
:
0
}
.cube-picker-fade-enter-active
,
.cube-picker-fade-leave-active
{
-webkit-transition
:
all
.3s
ease-in-out
;
transition
:
all
.3s
ease-in-out
}
.cube-picker-panel
{
height
:
273px
;
text-align
:
center
;
font-size
:
14px
;
background
:
#fff
}
.cube-picker-move-enter
,
.cube-picker-move-leave-active
{
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)}
.cube-picker-move-enter-active
,
.cube-picker-move-leave-active
{
-webkit-transition
:
all
.3s
ease-in-out
;
transition
:
all
.3s
ease-in-out
}
.cube-picker-choose
{
position
:
relative
;
height
:
60px
}
.cube-picker-cancel
,
.cube-picker-confirm
{
line-height
:
60px
;
padding
:
0
16px
;
-webkit-box-sizing
:
content-box
;
box-sizing
:
content-box
;
font-size
:
14px
}
.cube-picker-confirm
{
position
:
absolute
;
right
:
0
;
color
:
#fc9153
}
.cube-picker-confirm
:active
{
color
:
#fdc2a5
}
.cube-picker-cancel
{
position
:
absolute
;
left
:
0
;
color
:
#999
}
.cube-picker-cancel
:active
{
color
:
#ccc
}
.cube-picker-title-group
{
padding
:
0
60px
;
display
:
-webkit-box
;
display
:
flex
;
height
:
100%
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-flow
:
column
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
text-align
:
center
}
.cube-picker-title
{
font-size
:
18px
;
line-height
:
25px
;
font-weight
:
400
;
color
:
#333
}
.cube-picker-subtitle
{
margin-top
:
2px
;
line-height
:
16px
;
font-size
:
12px
;
color
:
#999
}
.cube-picker-content
{
position
:
relative
;
top
:
20px
}
.cube-picker-content
>
i
{
position
:
absolute
;
z-index
:
10
;
left
:
0
;
width
:
100%
;
height
:
68px
;
pointer-events
:
none
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
.cube-picker-content
>
.border-bottom-1px
{
top
:
0
;
background
:
-webkit-gradient
(
linear
,
left
bottom
,
left
top
,
from
(
hsla
(
0
,
0%
,
100%
,
.4
)),
to
(
hsla
(
0
,
0%
,
100%
,
.8
)));
background
:
-webkit-linear-gradient
(
bottom
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
));
background
:
linear-gradient
(
0deg
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
))}
.cube-picker-content
>
.border-top-1px
{
bottom
:
0
;
background
:
-webkit-gradient
(
linear
,
left
top
,
left
bottom
,
from
(
hsla
(
0
,
0%
,
100%
,
.4
)),
to
(
hsla
(
0
,
0%
,
100%
,
.8
)));
background
:
-webkit-linear-gradient
(
top
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
));
background
:
linear-gradient
(
180deg
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
))}
.cube-picker-wheel-wrapper
{
display
:
-webkit-box
;
display
:
flex
;
padding
:
0
16px
}
.cube-picker-wheel-wrapper
>
div
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
height
:
173px
;
overflow
:
hidden
;
font-size
:
20px
}
.cube-picker-wheel-scroll
{
padding
:
0
;
margin-top
:
68px
;
line-height
:
36px
;
list-style
:
none
}
.cube-picker-wheel-item
{
list-style
:
none
;
height
:
36px
;
overflow
:
hidden
;
white-space
:
nowrap
;
color
:
#333
}
.cube-picker-footer
{
height
:
20px
}
.cube-select
{
padding
:
10px
20px
10px
10px
;
border-radius
:
2px
;
font-size
:
14px
;
line-height
:
1.429
;
color
:
#666
;
background-color
:
#fff
;
position
:
relative
}
.cube-select
,
.cube-select
:after
{
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
}
.cube-select
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-select
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-select
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-select
>
span
{
display
:
inline-block
}
.cube-select_active
{
position
:
relative
}
.cube-select_active
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-select_active
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-select_active
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-select_active
.cube-select-icon
{
-webkit-transform
:
translateY
(
-50%
)
rotate
(
180deg
);
transform
:
translateY
(
-50%
)
rotate
(
180deg
)}
.cube-select_disabled
{
color
:
#b8b8b8
;
background-color
:
rgba
(
0
,
0
,
0
,
.04
);
cursor
:
not-allowed
}
.cube-select-placeholder
{
color
:
#ccc
}
.cube-select-icon
{
position
:
absolute
;
right
:
8px
;
top
:
50%
;
-webkit-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
);
border-style
:
solid
;
border-color
:
#999
transparent
transparent
;
border-width
:
4px
4px
0
;
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
}
\ No newline at end of file
.cube-popup
{
position
:
fixed
;
left
:
0
;
right
:
0
;
top
:
0
;
bottom
:
0
;
z-index
:
100
;
pointer-events
:
none
}
.cube-popup_mask
{
pointer-events
:
auto
}
.cube-popup_mask
.cube-popup-mask
{
display
:
block
}
.cube-popup-container
,
.cube-popup-mask
{
position
:
absolute
;
width
:
100%
;
height
:
100%
}
.cube-popup-mask
{
display
:
none
;
overflow
:
hidden
;
background-color
:
#25262d
;
opacity
:
.4
;
pointer-events
:
auto
}
.cube-popup-mask
:before
{
content
:
"."
;
display
:
block
;
width
:
1px
;
height
:
1px
;
background-color
:
rgba
(
0
,
0
,
0
,
.1
);
margin-left
:
-10px
}
.cube-popup-container
{
-webkit-transform
:
translate
(
100%
,
100%
);
transform
:
translate
(
100%
,
100%
)}
.cube-popup-content
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
-webkit-transform
:
translate
(
-100%
,
-100%
);
transform
:
translate
(
-100%
,
-100%
);
pointer-events
:
auto
}
.cube-popup-center
.cube-popup-content
,
.cube-popup-left
.cube-popup-content
,
.cube-popup-right
.cube-popup-content
{
top
:
-50%
;
left
:
-50%
;
width
:
auto
;
max-width
:
100%
;
-webkit-transform
:
translate
(
0
);
transform
:
translate
(
0
)}
.cube-popup-left
.cube-popup-content
,
.cube-popup-right
.cube-popup-content
{
height
:
100%
;
top
:
-100%
}
.cube-popup-center
.cube-popup-content
{
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
)}
.cube-popup-top
.cube-popup-content
{
top
:
-100%
;
left
:
-100%
;
-webkit-transform
:
translate
(
0
);
transform
:
translate
(
0
)}
.cube-popup-right
.cube-popup-content
{
top
:
-100%
;
right
:
100%
}
.cube-popup-left
.cube-popup-content
{
left
:
-100%
}
.cube-picker-fade-enter
,
.cube-picker-fade-leave-active
{
opacity
:
0
}
.cube-picker-fade-enter-active
,
.cube-picker-fade-leave-active
{
-webkit-transition
:
all
.3s
ease-in-out
;
transition
:
all
.3s
ease-in-out
}
.cube-picker-panel
{
height
:
273px
;
text-align
:
center
;
font-size
:
14px
;
background
:
#fff
}
.cube-picker-move-enter
,
.cube-picker-move-leave-active
{
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)}
.cube-picker-move-enter-active
,
.cube-picker-move-leave-active
{
-webkit-transition
:
all
.3s
ease-in-out
;
transition
:
all
.3s
ease-in-out
}
.cube-picker-choose
{
position
:
relative
;
height
:
60px
}
.cube-picker-cancel
,
.cube-picker-confirm
{
line-height
:
60px
;
padding
:
0
16px
;
-webkit-box-sizing
:
content-box
;
box-sizing
:
content-box
;
font-size
:
14px
}
.cube-picker-confirm
{
position
:
absolute
;
right
:
0
;
color
:
#fc9153
}
.cube-picker-confirm
:active
{
color
:
#fdc2a5
}
.cube-picker-cancel
{
position
:
absolute
;
left
:
0
;
color
:
#999
}
.cube-picker-cancel
:active
{
color
:
#ccc
}
.cube-picker-title-group
{
padding
:
0
60px
;
display
:
-webkit-box
;
display
:
flex
;
height
:
100%
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-flow
:
column
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
text-align
:
center
}
.cube-picker-title
{
font-size
:
18px
;
line-height
:
25px
;
font-weight
:
400
;
color
:
#333
}
.cube-picker-subtitle
{
margin-top
:
2px
;
line-height
:
16px
;
font-size
:
12px
;
color
:
#999
}
.cube-picker-content
{
position
:
relative
;
top
:
20px
}
.cube-picker-content
>
i
{
position
:
absolute
;
z-index
:
10
;
left
:
0
;
width
:
100%
;
height
:
68px
;
pointer-events
:
none
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
.cube-picker-content
>
.border-bottom-1px
{
top
:
0
;
background
:
-webkit-gradient
(
linear
,
left
bottom
,
left
top
,
from
(
hsla
(
0
,
0%
,
100%
,
.4
)),
to
(
hsla
(
0
,
0%
,
100%
,
.8
)));
background
:
-webkit-linear-gradient
(
bottom
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
));
background
:
linear-gradient
(
0deg
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
))}
.cube-picker-content
>
.border-top-1px
{
bottom
:
0
;
background
:
-webkit-gradient
(
linear
,
left
top
,
left
bottom
,
from
(
hsla
(
0
,
0%
,
100%
,
.4
)),
to
(
hsla
(
0
,
0%
,
100%
,
.8
)));
background
:
-webkit-linear-gradient
(
top
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
));
background
:
linear-gradient
(
180deg
,
hsla
(
0
,
0%
,
100%
,
.4
),
hsla
(
0
,
0%
,
100%
,
.8
))}
.cube-picker-wheel-wrapper
{
display
:
-webkit-box
;
display
:
flex
;
padding
:
0
16px
}
.cube-picker-wheel-wrapper
>
div
{
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
height
:
173px
;
overflow
:
hidden
;
font-size
:
20px
}
.cube-picker-wheel-scroll
{
padding
:
0
;
margin-top
:
68px
;
line-height
:
36px
;
list-style
:
none
}
.cube-picker-wheel-item
{
list-style
:
none
;
height
:
36px
;
overflow
:
hidden
;
white-space
:
nowrap
;
color
:
#333
}
.cube-picker-footer
{
height
:
20px
}
.cube-select
{
padding
:
10px
20px
10px
10px
;
border-radius
:
2px
;
font-size
:
14px
;
line-height
:
1.429
;
color
:
#666
;
background-color
:
#fff
;
position
:
relative
}
.cube-select
,
.cube-select
:after
{
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
}
.cube-select
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ccc
;
border-radius
:
2px
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-select
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-select
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-select
>
span
{
display
:
inline-block
}
.cube-select_active
{
position
:
relative
}
.cube-select_active
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-select_active
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-select_active
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-select_active
.cube-select-icon
{
-webkit-transform
:
translateY
(
-50%
)
rotate
(
180deg
);
transform
:
translateY
(
-50%
)
rotate
(
180deg
)}
.cube-select_disabled
{
color
:
#b8b8b8
;
background-color
:
rgba
(
0
,
0
,
0
,
.04
);
cursor
:
not-allowed
}
.cube-select-placeholder
{
color
:
#ccc
}
.cube-select-icon
{
position
:
absolute
;
right
:
8px
;
top
:
50%
;
-webkit-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
);
border-style
:
solid
;
border-color
:
#999
transparent
transparent
;
border-width
:
4px
4px
0
;
-webkit-transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
-webkit-transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
;
transition
:
transform
.3s
ease-in-out
,
-webkit-transform
.3s
ease-in-out
}
\ No newline at end of file
lib/style.css
浏览文件 @
a059568c
此差异已折叠。
点击以展开。
lib/textarea/style.css
浏览文件 @
a059568c
.cube-textarea-wrapper
{
-webkit-transition
:
height
.2s
;
transition
:
height
.2s
;
height
:
40px
;
font-size
:
14px
;
line-height
:
1.429
;
position
:
relative
}
.cube-textarea-wrapper
textarea
::-webkit-input-placeholder
{
color
:
#ccc
!important
;
text-overflow
:
ellipsis
}
.cube-textarea-wrapper
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ebebeb
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-textarea-wrapper
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-textarea-wrapper
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-textarea_expanded
{
height
:
80px
}
.cube-textarea_active
{
position
:
relative
}
.cube-textarea_active
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-textarea_active
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-textarea_active
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-textarea-indicator
{
position
:
absolute
;
bottom
:
7px
;
right
:
10px
;
color
:
#ccc
}
.cube-textarea
{
width
:
100%
;
height
:
100%
;
text-align
:
left
;
padding
:
10px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
font-size
:
100%
;
line-height
:
inherit
;
color
:
#666
;
background-color
:
#fff
;
border-radius
:
2px
;
resize
:
none
;
border
:
none
;
outline
:
none
}
\ No newline at end of file
.cube-textarea-wrapper
{
-webkit-transition
:
height
.2s
;
transition
:
height
.2s
;
height
:
40px
;
font-size
:
14px
;
line-height
:
1.429
;
position
:
relative
}
.cube-textarea-wrapper
textarea
::-webkit-input-placeholder
{
color
:
#ccc
!important
;
text-overflow
:
ellipsis
}
.cube-textarea-wrapper
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ebebeb
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-textarea-wrapper
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-textarea-wrapper
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-textarea_expanded
{
height
:
80px
}
.cube-textarea_active
{
position
:
relative
}
.cube-textarea_active
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-textarea_active
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-textarea_active
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-textarea-indicator
{
position
:
absolute
;
bottom
:
7px
;
right
:
10px
;
color
:
#ccc
}
.cube-textarea
{
width
:
100%
;
height
:
100%
;
text-align
:
left
;
padding
:
10px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
font-size
:
100%
;
line-height
:
inherit
;
color
:
#666
;
background-color
:
#fff
;
border-radius
:
2px
;
resize
:
none
;
border
:
none
;
outline
:
none
}
\ No newline at end of file
lib/textarea/textarea.min.css
浏览文件 @
a059568c
.cube-textarea-wrapper
{
-webkit-transition
:
height
.2s
;
transition
:
height
.2s
;
height
:
40px
;
font-size
:
14px
;
line-height
:
1.429
;
position
:
relative
}
.cube-textarea-wrapper
textarea
::-webkit-input-placeholder
{
color
:
#ccc
!important
;
text-overflow
:
ellipsis
}
.cube-textarea-wrapper
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ebebeb
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-textarea-wrapper
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-textarea-wrapper
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-textarea_expanded
{
height
:
80px
}
.cube-textarea_active
{
position
:
relative
}
.cube-textarea_active
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-textarea_active
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-textarea_active
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-textarea-indicator
{
position
:
absolute
;
bottom
:
7px
;
right
:
10px
;
color
:
#ccc
}
.cube-textarea
{
width
:
100%
;
height
:
100%
;
text-align
:
left
;
padding
:
10px
;
box-sizing
:
border-box
;
font-size
:
100%
;
line-height
:
inherit
;
color
:
#666
;
background-color
:
#fff
;
border-radius
:
2px
;
resize
:
none
;
border
:
none
;
outline
:
none
}
\ No newline at end of file
.cube-textarea-wrapper
{
-webkit-transition
:
height
.2s
;
transition
:
height
.2s
;
height
:
40px
;
font-size
:
14px
;
line-height
:
1.429
;
position
:
relative
}
.cube-textarea-wrapper
textarea
::-webkit-input-placeholder
{
color
:
#ccc
!important
;
text-overflow
:
ellipsis
}
.cube-textarea-wrapper
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#ebebeb
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-textarea-wrapper
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-textarea-wrapper
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-textarea_expanded
{
height
:
80px
}
.cube-textarea_active
{
position
:
relative
}
.cube-textarea_active
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#fc9153
;
border-radius
:
2px
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-textarea_active
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-textarea_active
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-textarea-indicator
{
position
:
absolute
;
bottom
:
7px
;
right
:
10px
;
color
:
#ccc
}
.cube-textarea
{
width
:
100%
;
height
:
100%
;
text-align
:
left
;
padding
:
10px
;
box-sizing
:
border-box
;
font-size
:
100%
;
line-height
:
inherit
;
color
:
#666
;
background-color
:
#fff
;
border-radius
:
2px
;
resize
:
none
;
border
:
none
;
outline
:
none
}
\ No newline at end of file
lib/tip/style.css
浏览文件 @
a059568c
.cube-tip
{
display
:
-webkit-box
;
display
:
flex
;
z-index
:
10
;
position
:
absolute
;
padding
:
10px
38px
10px
16px
;
max-height
:
60px
;
font-size
:
12px
;
color
:
#fff
;
background
:
rgba
(
74
,
76
,
91
,
.8
);
border-radius
:
2px
;
-webkit-transition
:
opacity
.2s
;
transition
:
opacity
.2s
}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
,
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
{
left
:
50%
;
-webkit-transform
:
translateX
(
-50%
);
transform
:
translateX
(
-50%
)}
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
{
top
:
0
}
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
:before
{
margin-top
:
-6px
;
-webkit-transform
:
rotate
(
0deg
);
transform
:
rotate
(
0deg
)}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
{
bottom
:
0
}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
:before
{
margin-bottom
:
-6px
;
-webkit-transform
:
rotate
(
180deg
);
transform
:
rotate
(
180deg
)}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
,
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
{
top
:
50%
;
-webkit-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
)}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
{
left
:
0
}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
:before
{
margin-left
:
-9px
;
-webkit-transform
:
rotate
(
-90deg
);
transform
:
rotate
(
-90deg
)}
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
{
right
:
0
}
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
:before
{
margin-right
:
-9px
;
-webkit-transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
)}
.cube-tip-angle
{
position
:
absolute
}
.cube-tip-angle
:before
{
content
:
""
;
display
:
block
;
border-width
:
0
6px
6px
;
border-style
:
solid
;
border-color
:
transparent
transparent
rgba
(
74
,
76
,
91
,
.8
)}
.cube-tip-close
{
position
:
absolute
;
right
:
14px
;
top
:
12px
;
width
:
12px
;
height
:
12px
;
padding
:
0
;
color
:
inherit
;
outline
:
none
;
border
:
none
;
background
:
none
;
-webkit-transform
:
scale
(
1.3
);
transform
:
scale
(
1.3
)}
.cube-tip-content
{
min-height
:
18px
;
line-height
:
18px
;
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
overflow
:
hidden
}
.cube-tip-zoom-enter-active
{
-webkit-animation
:
tip-in
.4s
;
animation
:
tip-in
.4s
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
.cube-tip-zoom-leave-active
{
-webkit-animation
:
tip-out
.2s
;
animation
:
tip-out
.2s
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
@-webkit-keyframes
tip-in
{
0
%
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
)}
50
%
{
-webkit-transform
:
scale
(
1.1
);
transform
:
scale
(
1.1
)}
to
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
tip-in
{
0
%
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
)}
50
%
{
-webkit-transform
:
scale
(
1.1
);
transform
:
scale
(
1.1
)}
to
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
tip-out
{
0
%
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
opacity
:
1
}
to
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
);
opacity
:
0
}}
@keyframes
tip-out
{
0
%
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
opacity
:
1
}
to
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
);
opacity
:
0
}}
\ No newline at end of file
.cube-tip
{
display
:
-webkit-box
;
display
:
flex
;
z-index
:
10
;
position
:
absolute
;
padding
:
10px
38px
10px
16px
;
max-height
:
60px
;
font-size
:
12px
;
color
:
#fff
;
background
:
rgba
(
74
,
76
,
91
,
.8
);
border-radius
:
2px
;
-webkit-transition
:
opacity
.2s
;
transition
:
opacity
.2s
}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
,
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
{
left
:
50%
;
-webkit-transform
:
translateX
(
-50%
);
transform
:
translateX
(
-50%
)}
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
{
top
:
0
}
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
:before
{
margin-top
:
-6px
;
-webkit-transform
:
rotate
(
0deg
);
transform
:
rotate
(
0deg
)}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
{
bottom
:
0
}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
:before
{
margin-bottom
:
-6px
;
-webkit-transform
:
rotate
(
180deg
);
transform
:
rotate
(
180deg
)}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
,
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
{
top
:
50%
;
-webkit-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
)}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
{
left
:
0
}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
:before
{
margin-left
:
-9px
;
-webkit-transform
:
rotate
(
-90deg
);
transform
:
rotate
(
-90deg
)}
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
{
right
:
0
}
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
:before
{
margin-right
:
-9px
;
-webkit-transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
)}
.cube-tip-angle
{
position
:
absolute
}
.cube-tip-angle
:before
{
content
:
""
;
display
:
block
;
border-width
:
0
6px
6px
;
border-style
:
solid
;
border-color
:
transparent
transparent
rgba
(
74
,
76
,
91
,
.8
)}
.cube-tip-close
{
position
:
absolute
;
right
:
14px
;
top
:
12px
;
width
:
12px
;
height
:
12px
;
padding
:
0
;
color
:
inherit
;
outline
:
none
;
border
:
none
;
background
:
none
;
-webkit-transform
:
scale
(
1.3
);
transform
:
scale
(
1.3
)}
.cube-tip-content
{
min-height
:
18px
;
line-height
:
18px
;
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
overflow
:
hidden
}
.cube-tip-zoom-enter-active
{
-webkit-animation
:
tip-in
.4s
;
animation
:
tip-in
.4s
}
.cube-tip-zoom-leave-active
{
-webkit-animation
:
tip-out
.2s
;
animation
:
tip-out
.2s
}
@-webkit-keyframes
tip-in
{
0
%
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
)}
50
%
{
-webkit-transform
:
scale
(
1.1
);
transform
:
scale
(
1.1
)}
to
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
tip-in
{
0
%
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
)}
50
%
{
-webkit-transform
:
scale
(
1.1
);
transform
:
scale
(
1.1
)}
to
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
tip-out
{
0
%
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
opacity
:
1
}
to
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
);
opacity
:
0
}}
@keyframes
tip-out
{
0
%
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
opacity
:
1
}
to
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
);
opacity
:
0
}}
\ No newline at end of file
lib/tip/tip.min.css
浏览文件 @
a059568c
.cube-tip
{
display
:
-webkit-box
;
display
:
flex
;
z-index
:
10
;
position
:
absolute
;
padding
:
10px
38px
10px
16px
;
max-height
:
60px
;
font-size
:
12px
;
color
:
#fff
;
background
:
rgba
(
74
,
76
,
91
,
.8
);
border-radius
:
2px
;
-webkit-transition
:
opacity
.2s
;
transition
:
opacity
.2s
}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
,
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
{
left
:
50%
;
-webkit-transform
:
translateX
(
-50%
);
transform
:
translateX
(
-50%
)}
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
{
top
:
0
}
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
:before
{
margin-top
:
-6px
;
-webkit-transform
:
rotate
(
0deg
);
transform
:
rotate
(
0deg
)}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
{
bottom
:
0
}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
:before
{
margin-bottom
:
-6px
;
-webkit-transform
:
rotate
(
180deg
);
transform
:
rotate
(
180deg
)}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
,
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
{
top
:
50%
;
-webkit-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
)}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
{
left
:
0
}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
:before
{
margin-left
:
-9px
;
-webkit-transform
:
rotate
(
-90deg
);
transform
:
rotate
(
-90deg
)}
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
{
right
:
0
}
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
:before
{
margin-right
:
-9px
;
-webkit-transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
)}
.cube-tip-angle
{
position
:
absolute
}
.cube-tip-angle
:before
{
content
:
""
;
display
:
block
;
border-width
:
0
6px
6px
;
border-style
:
solid
;
border-color
:
transparent
transparent
rgba
(
74
,
76
,
91
,
.8
)}
.cube-tip-close
{
position
:
absolute
;
right
:
14px
;
top
:
12px
;
width
:
12px
;
height
:
12px
;
padding
:
0
;
color
:
inherit
;
outline
:
none
;
border
:
none
;
background
:
none
;
-webkit-transform
:
scale
(
1.3
);
transform
:
scale
(
1.3
)}
.cube-tip-content
{
min-height
:
18px
;
line-height
:
18px
;
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
overflow
:
hidden
}
.cube-tip-zoom-enter-active
{
-webkit-animation
:
tip-in
.4s
;
animation
:
tip-in
.4s
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
.cube-tip-zoom-leave-active
{
-webkit-animation
:
tip-out
.2s
;
animation
:
tip-out
.2s
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
@-webkit-keyframes
tip-in
{
0
%
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
)}
50
%
{
-webkit-transform
:
scale
(
1.1
);
transform
:
scale
(
1.1
)}
to
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
tip-in
{
0
%
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
)}
50
%
{
-webkit-transform
:
scale
(
1.1
);
transform
:
scale
(
1.1
)}
to
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
tip-out
{
0
%
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
opacity
:
1
}
to
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
);
opacity
:
0
}}
@keyframes
tip-out
{
0
%
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
opacity
:
1
}
to
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
);
opacity
:
0
}}
\ No newline at end of file
.cube-tip
{
display
:
-webkit-box
;
display
:
flex
;
z-index
:
10
;
position
:
absolute
;
padding
:
10px
38px
10px
16px
;
max-height
:
60px
;
font-size
:
12px
;
color
:
#fff
;
background
:
rgba
(
74
,
76
,
91
,
.8
);
border-radius
:
2px
;
-webkit-transition
:
opacity
.2s
;
transition
:
opacity
.2s
}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
,
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
{
left
:
50%
;
-webkit-transform
:
translateX
(
-50%
);
transform
:
translateX
(
-50%
)}
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
{
top
:
0
}
.cube-tip
[
data-dir
=
top
]
.cube-tip-angle
:before
{
margin-top
:
-6px
;
-webkit-transform
:
rotate
(
0deg
);
transform
:
rotate
(
0deg
)}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
{
bottom
:
0
}
.cube-tip
[
data-dir
=
bottom
]
.cube-tip-angle
:before
{
margin-bottom
:
-6px
;
-webkit-transform
:
rotate
(
180deg
);
transform
:
rotate
(
180deg
)}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
,
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
{
top
:
50%
;
-webkit-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
)}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
{
left
:
0
}
.cube-tip
[
data-dir
=
left
]
.cube-tip-angle
:before
{
margin-left
:
-9px
;
-webkit-transform
:
rotate
(
-90deg
);
transform
:
rotate
(
-90deg
)}
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
{
right
:
0
}
.cube-tip
[
data-dir
=
right
]
.cube-tip-angle
:before
{
margin-right
:
-9px
;
-webkit-transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
)}
.cube-tip-angle
{
position
:
absolute
}
.cube-tip-angle
:before
{
content
:
""
;
display
:
block
;
border-width
:
0
6px
6px
;
border-style
:
solid
;
border-color
:
transparent
transparent
rgba
(
74
,
76
,
91
,
.8
)}
.cube-tip-close
{
position
:
absolute
;
right
:
14px
;
top
:
12px
;
width
:
12px
;
height
:
12px
;
padding
:
0
;
color
:
inherit
;
outline
:
none
;
border
:
none
;
background
:
none
;
-webkit-transform
:
scale
(
1.3
);
transform
:
scale
(
1.3
)}
.cube-tip-content
{
min-height
:
18px
;
line-height
:
18px
;
-webkit-box-flex
:
1
;
flex
:
1
;
flex-basis
:
1
e-9px
;
width
:
1%
;
overflow
:
hidden
}
.cube-tip-zoom-enter-active
{
-webkit-animation
:
tip-in
.4s
;
animation
:
tip-in
.4s
}
.cube-tip-zoom-leave-active
{
-webkit-animation
:
tip-out
.2s
;
animation
:
tip-out
.2s
}
@-webkit-keyframes
tip-in
{
0
%
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
)}
50
%
{
-webkit-transform
:
scale
(
1.1
);
transform
:
scale
(
1.1
)}
to
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
tip-in
{
0
%
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
)}
50
%
{
-webkit-transform
:
scale
(
1.1
);
transform
:
scale
(
1.1
)}
to
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
tip-out
{
0
%
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
opacity
:
1
}
to
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
);
opacity
:
0
}}
@keyframes
tip-out
{
0
%
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
);
opacity
:
1
}
to
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
);
opacity
:
0
}}
\ No newline at end of file
lib/toolbar/style.css
浏览文件 @
a059568c
此差异已折叠。
点击以展开。
lib/toolbar/toolbar.min.css
浏览文件 @
a059568c
此差异已折叠。
点击以展开。
lib/upload/style.css
浏览文件 @
a059568c
.cube-upload
{
position
:
relative
}
.cube-upload-def
{
margin-right
:
-10px
}
.cube-upload-def
.cube-upload-btn
,
.cube-upload-def
.cube-upload-file
{
float
:
left
;
margin
:
0
10px
10px
0
}
.cube-upload-btn
{
position
:
relative
;
overflow
:
hidden
}
.cube-upload-btn
:active
.cube-upload-btn-def
{
background-color
:
rgba
(
0
,
0
,
0
,
.04
)}
.cube-upload-input
{
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
width
:
100%
;
font-size
:
0
;
opacity
:
0
}
.cube-upload-btn-def
{
width
:
80px
;
height
:
80px
;
background-color
:
#fff
;
-webkit-box-shadow
:
0
0
6px
2px
rgba
(
0
,
0
,
0
,
.08
);
box-shadow
:
0
0
6px
2px
rgba
(
0
,
0
,
0
,
.08
);
border-radius
:
2px
;
position
:
relative
}
.cube-upload-btn-def
,
.cube-upload-btn-def
:after
{
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
}
.cube-upload-btn-def
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e5e5e5
;
border-radius
:
2px
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-upload-btn-def
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-upload-btn-def
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-upload-btn-def
>
i
:after
,
.cube-upload-btn-def
>
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
20px
;
height
:
2px
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
background-color
:
#666
}
.cube-upload-btn-def
>
i
:after
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
rotate
(
90deg
);
transform
:
translate
(
-50%
,
-50%
)
rotate
(
90deg
)}
.cube-upload-file
{
position
:
relative
}
.cube-upload-file-def
{
position
:
relative
;
width
:
80px
;
height
:
80px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
background
:
#fff
no-repeat
50%
;
background-size
:
cover
;
border-radius
:
2px
}
.cube-upload-file-def
>
.cubeic-wrong
{
position
:
absolute
;
z-index
:
2
;
top
:
-2px
;
right
:
-2px
;
color
:
rgba
(
0
,
0
,
0
,
.8
);
font-size
:
16px
;
background-color
:
#fff
;
border-radius
:
50%
}
.cube-upload-file-def
>
.cubeic-wrong
:before
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.625
);
transform
:
scale
(
1.625
);
-webkit-transform-origin
:
center
;
transform-origin
:
center
}
.cube-upload-file-state
{
position
:
relative
;
width
:
100%
;
height
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
overflow
:
hidden
;
opacity
:
0
;
background-color
:
rgba
(
37
,
38
,
45
,
.4
);
border-radius
:
2px
;
-webkit-transition
:
opacity
.1s
;
transition
:
opacity
.1s
}
.cube-upload-file-state
:before
{
content
:
"."
;
position
:
relative
;
left
:
-50%
;
display
:
block
;
width
:
1px
;
height
:
1px
;
margin-left
:
-1px
;
background-color
:
rgba
(
0
,
0
,
0
,
.1
)}
.cube-upload-file_stat
{
opacity
:
1
}
.cube-upload-file-status
{
position
:
relative
;
z-index
:
1
;
font-size
:
30px
;
display
:
none
}
.cube-upload-file-status.cubeic-right
{
display
:
block
;
color
:
#fc9153
}
.cube-upload-file-status.cubeic-warn
{
display
:
block
;
color
:
#f43530
}
.cube-upload-file-status.cubeic-right
:after
,
.cube-upload-file-status.cubeic-warn
:after
{
content
:
""
;
z-index
:
-1
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
width
:
.56em
;
height
:
.56em
;
border-radius
:
50%
;
background-color
:
#fff
}
.cube-upload-file-status.cubeic-right
+
.cube-upload-file-progress
,
.cube-upload-file-status.cubeic-warn
+
.cube-upload-file-progress
{
display
:
none
}
.cube-upload-file-progress
{
color
:
#fff
;
font-size
:
20px
}
\ No newline at end of file
.cube-upload
{
position
:
relative
}
.cube-upload-def
{
margin-right
:
-10px
}
.cube-upload-def
.cube-upload-btn
,
.cube-upload-def
.cube-upload-file
{
float
:
left
;
margin
:
0
10px
10px
0
}
.cube-upload-btn
{
position
:
relative
;
overflow
:
hidden
}
.cube-upload-btn
:active
.cube-upload-btn-def
{
background-color
:
rgba
(
0
,
0
,
0
,
.04
)}
.cube-upload-input
{
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
width
:
100%
;
font-size
:
0
;
opacity
:
0
}
.cube-upload-btn-def
{
width
:
80px
;
height
:
80px
;
background-color
:
#fff
;
-webkit-box-shadow
:
0
0
6px
2px
rgba
(
0
,
0
,
0
,
.08
);
box-shadow
:
0
0
6px
2px
rgba
(
0
,
0
,
0
,
.08
);
border-radius
:
2px
;
position
:
relative
}
.cube-upload-btn-def
,
.cube-upload-btn-def
:after
{
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
}
.cube-upload-btn-def
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e5e5e5
;
border-radius
:
2px
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-upload-btn-def
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-upload-btn-def
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-upload-btn-def
>
i
:after
,
.cube-upload-btn-def
>
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
20px
;
height
:
2px
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
background-color
:
#666
}
.cube-upload-btn-def
>
i
:after
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
rotate
(
90deg
);
transform
:
translate
(
-50%
,
-50%
)
rotate
(
90deg
)}
.cube-upload-file
{
position
:
relative
}
.cube-upload-file-def
{
position
:
relative
;
width
:
80px
;
height
:
80px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
background
:
#fff
no-repeat
50%
;
background-size
:
cover
;
border-radius
:
2px
}
.cube-upload-file-def
>
.cubeic-wrong
{
position
:
absolute
;
z-index
:
2
;
top
:
-2px
;
right
:
-2px
;
color
:
rgba
(
0
,
0
,
0
,
.8
);
font-size
:
16px
;
background-color
:
#fff
;
border-radius
:
50%
}
.cube-upload-file-def
>
.cubeic-wrong
:before
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.625
);
transform
:
scale
(
1.625
);
-webkit-transform-origin
:
center
;
transform-origin
:
center
}
.cube-upload-file-state
{
position
:
relative
;
width
:
100%
;
height
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
overflow
:
hidden
;
opacity
:
0
;
background-color
:
rgba
(
37
,
38
,
45
,
.4
);
border-radius
:
2px
;
-webkit-transition
:
opacity
.1s
;
transition
:
opacity
.1s
}
.cube-upload-file-state
:before
{
content
:
"."
;
position
:
relative
;
left
:
-50%
;
display
:
block
;
width
:
1px
;
height
:
1px
;
margin-left
:
-1px
;
background-color
:
rgba
(
0
,
0
,
0
,
.1
)}
.cube-upload-file_stat
{
opacity
:
1
}
.cube-upload-file-status
{
position
:
relative
;
z-index
:
1
;
font-size
:
30px
;
display
:
none
}
.cube-upload-file-status.cubeic-right
{
display
:
block
;
color
:
#fc9153
}
.cube-upload-file-status.cubeic-warn
{
display
:
block
;
color
:
#f43530
}
.cube-upload-file-status.cubeic-right
:after
,
.cube-upload-file-status.cubeic-warn
:after
{
content
:
""
;
z-index
:
-1
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
width
:
.56em
;
height
:
.56em
;
border-radius
:
50%
;
background-color
:
#fff
}
.cube-upload-file-status.cubeic-right
+
.cube-upload-file-progress
,
.cube-upload-file-status.cubeic-warn
+
.cube-upload-file-progress
{
display
:
none
}
.cube-upload-file-progress
{
color
:
#fff
;
font-size
:
20px
}
\ No newline at end of file
lib/upload/upload.min.css
浏览文件 @
a059568c
.cube-upload
{
position
:
relative
}
.cube-upload-def
{
margin-right
:
-10px
}
.cube-upload-def
.cube-upload-btn
,
.cube-upload-def
.cube-upload-file
{
float
:
left
;
margin
:
0
10px
10px
0
}
.cube-upload-btn
{
position
:
relative
;
overflow
:
hidden
}
.cube-upload-btn
:active
.cube-upload-btn-def
{
background-color
:
rgba
(
0
,
0
,
0
,
.04
)}
.cube-upload-input
{
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
width
:
100%
;
font-size
:
0
;
opacity
:
0
}
.cube-upload-btn-def
{
width
:
80px
;
height
:
80px
;
background-color
:
#fff
;
box-shadow
:
0
0
6px
2px
rgba
(
0
,
0
,
0
,
.08
);
border-radius
:
2px
;
position
:
relative
}
.cube-upload-btn-def
,
.cube-upload-btn-def
:after
{
box-sizing
:
border-box
}
.cube-upload-btn-def
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e5e5e5
;
border-radius
:
2px
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-upload-btn-def
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
)
translateZ
(
0
);
transform
:
scale
(
.5
)
translateZ
(
0
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-upload-btn-def
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
)
translateZ
(
0
);
transform
:
scale
(
.333
)
translateZ
(
0
)}}
.cube-upload-btn-def
>
i
:after
,
.cube-upload-btn-def
>
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
20px
;
height
:
2px
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
background-color
:
#666
}
.cube-upload-btn-def
>
i
:after
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
rotate
(
90deg
);
transform
:
translate
(
-50%
,
-50%
)
rotate
(
90deg
)}
.cube-upload-file
{
position
:
relative
}
.cube-upload-file-def
{
position
:
relative
;
width
:
80px
;
height
:
80px
;
box-sizing
:
border-box
;
background
:
#fff
no-repeat
50%
;
background-size
:
cover
;
border-radius
:
2px
}
.cube-upload-file-def
>
.cubeic-wrong
{
position
:
absolute
;
z-index
:
2
;
top
:
-2px
;
right
:
-2px
;
color
:
rgba
(
0
,
0
,
0
,
.8
);
font-size
:
16px
;
background-color
:
#fff
;
border-radius
:
50%
}
.cube-upload-file-def
>
.cubeic-wrong
:before
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.625
);
transform
:
scale
(
1.625
);
-webkit-transform-origin
:
center
;
transform-origin
:
center
}
.cube-upload-file-state
{
position
:
relative
;
width
:
100%
;
height
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
overflow
:
hidden
;
opacity
:
0
;
background-color
:
rgba
(
37
,
38
,
45
,
.4
);
border-radius
:
2px
;
-webkit-transition
:
opacity
.1s
;
transition
:
opacity
.1s
}
.cube-upload-file-state
:before
{
content
:
"."
;
position
:
relative
;
left
:
-50%
;
display
:
block
;
width
:
1px
;
height
:
1px
;
margin-left
:
-1px
;
background-color
:
rgba
(
0
,
0
,
0
,
.1
)}
.cube-upload-file_stat
{
opacity
:
1
}
.cube-upload-file-status
{
position
:
relative
;
z-index
:
1
;
font-size
:
30px
;
display
:
none
}
.cube-upload-file-status.cubeic-right
{
display
:
block
;
color
:
#fc9153
}
.cube-upload-file-status.cubeic-warn
{
display
:
block
;
color
:
#f43530
}
.cube-upload-file-status.cubeic-right
:after
,
.cube-upload-file-status.cubeic-warn
:after
{
content
:
""
;
z-index
:
-1
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
width
:
.56em
;
height
:
.56em
;
border-radius
:
50%
;
background-color
:
#fff
}
.cube-upload-file-status.cubeic-right
+
.cube-upload-file-progress
,
.cube-upload-file-status.cubeic-warn
+
.cube-upload-file-progress
{
display
:
none
}
.cube-upload-file-progress
{
color
:
#fff
;
font-size
:
20px
}
\ No newline at end of file
.cube-upload
{
position
:
relative
}
.cube-upload-def
{
margin-right
:
-10px
}
.cube-upload-def
.cube-upload-btn
,
.cube-upload-def
.cube-upload-file
{
float
:
left
;
margin
:
0
10px
10px
0
}
.cube-upload-btn
{
position
:
relative
;
overflow
:
hidden
}
.cube-upload-btn
:active
.cube-upload-btn-def
{
background-color
:
rgba
(
0
,
0
,
0
,
.04
)}
.cube-upload-input
{
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
width
:
100%
;
font-size
:
0
;
opacity
:
0
}
.cube-upload-btn-def
{
width
:
80px
;
height
:
80px
;
background-color
:
#fff
;
box-shadow
:
0
0
6px
2px
rgba
(
0
,
0
,
0
,
.08
);
border-radius
:
2px
;
position
:
relative
}
.cube-upload-btn-def
,
.cube-upload-btn-def
:after
{
box-sizing
:
border-box
}
.cube-upload-btn-def
:after
{
content
:
""
;
pointer-events
:
none
;
display
:
block
;
position
:
absolute
;
left
:
0
;
top
:
0
;
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
border
:
1px
solid
#e5e5e5
;
border-radius
:
2px
;
width
:
100%
;
height
:
100%
}
@media
(
-webkit-min-device-pixel-ratio
:
2
),(
min-resolution
:
2dppx
){
.cube-upload-btn-def
:after
{
width
:
200%
;
height
:
200%
;
border-radius
:
4px
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}}
@media
(
-webkit-min-device-pixel-ratio
:
3
),(
min-resolution
:
3dppx
){
.cube-upload-btn-def
:after
{
width
:
300%
;
height
:
300%
;
border-radius
:
6px
;
-webkit-transform
:
scale
(
.333
);
transform
:
scale
(
.333
)}}
.cube-upload-btn-def
>
i
:after
,
.cube-upload-btn-def
>
i
:before
{
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
20px
;
height
:
2px
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
background-color
:
#666
}
.cube-upload-btn-def
>
i
:after
{
-webkit-transform
:
translate
(
-50%
,
-50%
)
rotate
(
90deg
);
transform
:
translate
(
-50%
,
-50%
)
rotate
(
90deg
)}
.cube-upload-file
{
position
:
relative
}
.cube-upload-file-def
{
position
:
relative
;
width
:
80px
;
height
:
80px
;
box-sizing
:
border-box
;
background
:
#fff
no-repeat
50%
;
background-size
:
cover
;
border-radius
:
2px
}
.cube-upload-file-def
>
.cubeic-wrong
{
position
:
absolute
;
z-index
:
2
;
top
:
-2px
;
right
:
-2px
;
color
:
rgba
(
0
,
0
,
0
,
.8
);
font-size
:
16px
;
background-color
:
#fff
;
border-radius
:
50%
}
.cube-upload-file-def
>
.cubeic-wrong
:before
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.625
);
transform
:
scale
(
1.625
);
-webkit-transform-origin
:
center
;
transform-origin
:
center
}
.cube-upload-file-state
{
position
:
relative
;
width
:
100%
;
height
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
justify-content
:
center
;
overflow
:
hidden
;
opacity
:
0
;
background-color
:
rgba
(
37
,
38
,
45
,
.4
);
border-radius
:
2px
;
-webkit-transition
:
opacity
.1s
;
transition
:
opacity
.1s
}
.cube-upload-file-state
:before
{
content
:
"."
;
position
:
relative
;
left
:
-50%
;
display
:
block
;
width
:
1px
;
height
:
1px
;
margin-left
:
-1px
;
background-color
:
rgba
(
0
,
0
,
0
,
.1
)}
.cube-upload-file_stat
{
opacity
:
1
}
.cube-upload-file-status
{
position
:
relative
;
z-index
:
1
;
font-size
:
30px
;
display
:
none
}
.cube-upload-file-status.cubeic-right
{
display
:
block
;
color
:
#fc9153
}
.cube-upload-file-status.cubeic-warn
{
display
:
block
;
color
:
#f43530
}
.cube-upload-file-status.cubeic-right
:after
,
.cube-upload-file-status.cubeic-warn
:after
{
content
:
""
;
z-index
:
-1
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
width
:
.56em
;
height
:
.56em
;
border-radius
:
50%
;
background-color
:
#fff
}
.cube-upload-file-status.cubeic-right
+
.cube-upload-file-progress
,
.cube-upload-file-status.cubeic-warn
+
.cube-upload-file-progress
{
display
:
none
}
.cube-upload-file-progress
{
color
:
#fff
;
font-size
:
20px
}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
