UNPKG

vui-design

Version:

A high quality UI Toolkit based on Vue.js

vui-design.github.io/vui-design-doc/

vui-design/vui-design

43 lines (35 loc) • 3.04 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@vui-menu-item: ~"@{vui}-menu-item"; // default .vui-menu-item { position:relative; cursor:pointer; box-sizing:border-box; display:flex; padding:0 20px; overflow:hidden; font-size:14px; transition:border-color 0.2s,background-color 0.2s,color 0.2s; } .vui-menu-item .vui-menu-item-icon { display:inline-block; margin-right:10px; vertical-align:middle; } .vui-menu-item .vui-menu-item-title { flex:1; display:inline-block; vertical-align:middle; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .vui-menu-collapsed .vui-menu-item { padding:0 33px; } .vui-menu-collapsed .vui-menu-item .vui-menu-item-icon { margin-right:0; } .vui-menu-collapsed .vui-menu-item .vui-menu-item-title { width:0; overflow:hidden; visibility:hidden; } .vui-menu-collapsed .vui-menu-item-tooltip { display:block; } .vui-menu-collapsed .vui-menu-item-tooltip .vui-menu-item-icon { } .vui-menu-collapsed .vui-menu-item-tooltip .vui-menu-item-title { } // horizontal && light .vui-menu-horizontal.vui-menu-light .vui-menu-item { border-bottom:2px solid transparent; color:#595959; } .vui-menu-horizontal.vui-menu-light .vui-menu-item:hover { color:#262626; } .vui-menu-horizontal.vui-menu-light .vui-menu-item:active { color:#262626; } .vui-menu-horizontal.vui-menu-light .vui-menu-item.vui-menu-item-selected { border-bottom-color:#2d8cf0; color:#2d8cf0; } .vui-menu-horizontal.vui-menu-light .vui-menu-item.vui-menu-item-disabled { cursor:not-allowed; pointer-events:none; border-bottom-color:transparent; color:#bfbfbf; } // horizontal && dark .vui-menu-horizontal.vui-menu-dark .vui-menu-item { color:rgba(255,255,255,0.65); } .vui-menu-horizontal.vui-menu-dark .vui-menu-item:hover { color:rgba(255,255,255,1.0); } .vui-menu-horizontal.vui-menu-dark .vui-menu-item:active { color:rgba(255,255,255,1.0); } .vui-menu-horizontal.vui-menu-dark .vui-menu-item.vui-menu-item-selected { color:#2d8cf0; } .vui-menu-horizontal.vui-menu-dark .vui-menu-item.vui-menu-item-disabled { cursor:not-allowed; pointer-events:none; color:rgba(255,255,255,0.3); } // vertical && light .vui-menu-vertical.vui-menu-light .vui-menu-item { color:#595959; } .vui-menu-vertical.vui-menu-light .vui-menu-item:hover { color:#262626; } .vui-menu-vertical.vui-menu-light .vui-menu-item:active { color:#262626; } .vui-menu-vertical.vui-menu-light .vui-menu-item.vui-menu-item-selected { background-color:#f0faff; color:#2d8cf0; } .vui-menu-vertical.vui-menu-light .vui-menu-item.vui-menu-item-disabled { cursor:not-allowed; pointer-events:none; color:#bfbfbf; } // vertical && dark .vui-menu-vertical.vui-menu-dark .vui-menu-item { color:rgba(255,255,255,0.65); } .vui-menu-vertical.vui-menu-dark .vui-menu-item:hover { color:rgba(255,255,255,1.0); } .vui-menu-vertical.vui-menu-dark .vui-menu-item:active { color:rgba(255,255,255,1.0); } .vui-menu-vertical.vui-menu-dark .vui-menu-item.vui-menu-item-selected { color:#2d8cf0; } .vui-menu-vertical.vui-menu-dark .vui-menu-item.vui-menu-item-disabled { cursor:not-allowed; pointer-events:none; color:rgba(255,255,255,0.3); }