-
Notifications
You must be signed in to change notification settings - Fork 86
/
menu__item_theme_islands.post.css
68 lines (54 loc) · 1.73 KB
/
menu__item_theme_islands.post.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
:block(menu):elem(item):mod(theme islands) {
position: relative;
white-space: nowrap;
&:block(menu):elem(item):mod(disabled) {
opacity: 0.3;
}
:block(link):mod(disabled) {
cursor: text;
}
&:block(menu):elem(item):mod(checked) {
background: 0 50% no-repeat url(../../../theme/_islands/tip.svg);
}
&:block(menu):elem(item):mod(hovered) {
cursor: pointer;
background-color: #ffeba0;
}
&:block(menu):elem(item):mod(type link) {
:block(link) {
text-decoration: none;
color: inherit;
outline: none;
/* Fit clickable area to `menu__item` size */
&:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
}
}
}
}
@each $size, $paddingLeft, $paddingVert, $paddingHor, $tipSize in
(s, m, l, xl), /* size */
(30px, 30px, 34px, 40px), /* paddingLeft */
(3px, 4px, 5px, 6px), /* paddingVert */
(10px, 13px, 15px, 20px), /* paddingHor */
(14px, 14px, 15px, 15px) /* tipSize */ {
:block(menu):mod(size $size) {
:block(menu):elem(item):mod(theme islands) {
padding: 0 $paddingHor;
background-size: $tipSize $tipSize;
background-position: $paddingHor 50%;
}
:block(menu):elem(group) + :block(menu):elem(item):mod(theme islands) {
margin-top: $paddingVert;
}
&[class*='menu:mod(mode)'] :block(menu):elem(item):mod(theme islands),
:block(menu):elem(group-title) ~ :block(menu):elem(item):mod(theme islands) {
padding: 0 $paddingLeft;
}
}
}