-
Notifications
You must be signed in to change notification settings - Fork 0
/
dropdown-submenu-skin.css
116 lines (116 loc) · 3.62 KB
/
dropdown-submenu-skin.css
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/**
* Dropdown Submenu Plugin for jQuery
*
* @version 1.2
* https://www.carlesrever.com/dropdown-submenu-jquery
*
* Default skin styles. You can replace it entirely for your project,
* keeping the functionality of engine CSS file (isolated).
*
* You will find this styles plus engine styles in the dropdown-submenu-dist.css file.
*/
.dropdown-submenu-skin {
color: #2c3338;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
/*
.dropdown-selected,
:hover > .dropdown-selected:hover,
.dropdown-main-item.dropdown-no-childs:hover,
.dropdown-submenu-item:hover {
background-color: @accentBgColor;
color: @accentColor;
}
:hover > .dropdown-selected {
background-color: @bgColor;
color: @color;
}
*/
}
.dropdown-submenu-skin,
.dropdown-submenu-skin ul,
.dropdown-submenu-skin li {
font-size: 14px;
}
.dropdown-submenu-skin .dropdown-main-list,
.dropdown-submenu-skin .dropdown-submenu,
.dropdown-submenu-skin .dropdown-field-watch {
border: 1px solid #8c8f94;
border-radius: 3px;
z-index: 1;
background: #ffffff;
}
.dropdown-submenu-skin .dropdown-main-list {
box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 10px;
}
.dropdown-submenu-skin .dropdown-submenu {
box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 10px;
}
.dropdown-submenu-skin .dropdown-field-watch,
.dropdown-submenu-skin .dropdown-main-item,
.dropdown-submenu-skin .dropdown-submenu-item {
padding: 0 30px 0 10px;
line-height: 1.75em;
}
.dropdown-submenu-skin .dropdown-submenu-item {
padding-right: 10px;
}
.dropdown-submenu-skin .accent-hover {
background-color: #1e90ff;
color: #ffffff;
}
.dropdown-submenu-skin :hover > .dropdown-ancestor-selected:hover,
.dropdown-submenu-skin .dropdown-ancestor-selected,
.dropdown-submenu-skin .dropdown-main-item.dropdown-has-childs:hover {
background-color: #eeeeee;
}
.dropdown-submenu-skin :hover > .dropdown-ancestor-selected {
background-color: #ffffff;
}
.dropdown-submenu-skin .dropdown-field-watch {
line-height: 2em;
box-shadow: none;
min-height: 30px;
max-width: 25rem;
-webkit-appearance: none;
vertical-align: middle;
position: relative;
}
.dropdown-submenu-skin.is-disabled .dropdown-field-watch {
filter: brightness(125%);
background-color: #bfbfbf;
}
.dropdown-submenu-skin .dropdown-field-watch .dropdown-arrow,
.dropdown-submenu-skin .dropdown-has-childs .dropdown-arrow {
position: absolute;
right: 5px;
top: 0;
bottom: 0;
width: 1.5em;
background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E);
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
.dropdown-submenu-skin.is-disabled .dropdown-field-watch .content {
opacity: 0.6;
}
.dropdown-submenu-skin.is-disabled .dropdown-field-watch .dropdown-arrow {
filter: brightness(125%);
}
.dropdown-submenu-skin .dropdown-has-childs {
position: relative;
}
.dropdown-submenu-skin .dropdown-has-childs .dropdown-arrow {
background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6%2C15l5-5L6%2C5l1-2l7%2C7l-7%2C7L6%2C15z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E);
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
.dropdown-submenu-skin .icon {
vertical-align: middle;
margin-right: 0.2em;
}
.dropdown-submenu-skin .icon img {
max-height: 1em;
width: auto;
}