blob: 86f5fe42ccb24be4e1f5c70a0e13af86f6da2ed0 (
plain)
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
@mixin v-valo-menubar ($primary-stylename: v-menubar) {
$copy: $v-button-hover-style-enabled;
$v-button-hover-style-enabled: false;
.#{$primary-stylename} {
@include v-valo-button-common-properties;
@include v-valo-button-style;
padding: 0;
text-align: left;
}
$v-button-hover-style-enabled: $copy;
.#{$primary-stylename}:active:after {
background: transparent;
}
.#{$primary-stylename} > .#{$primary-stylename}-menuitem {
@include v-valo-menubar-menuitem-style;
}
.#{$primary-stylename} > .#{$primary-stylename}-menuitem-checked {
@include v-valo-menubar-menuitem-checked-style;
}
.v-disabled > .#{$primary-stylename}-menuitem:before {
display: none;
}
.#{$primary-stylename} > .#{$primary-stylename}-menuitem-selected {
@include v-valo-gradient($color: v-valo-selection-color());
box-shadow: v-valo-button-box-shadow($background-color: v-valo-selection-color());
text-shadow: v-valo-button-text-shadow($background-color: v-valo-selection-color());
color: v-valo-font-color(v-valo-selection-color());
$bc: v-valo-button-border-color($background-color: v-valo-selection-color());
border-color: $bc;
+ .#{$primary-stylename}-menuitem {
border-color: $bc;
}
&:hover:before {
background: none;
}
}
.#{$primary-stylename} .#{$primary-stylename}-submenu-indicator {
display: none;
}
.#{$primary-stylename}-popup {
@include v-valo-menubar-popup-style($primary-stylename);
//margin-top: -$v-selection-overlay-padding-vertical !important;
//margin-left: $v-selection-overlay-padding-horizontal !important;
}
}
@mixin v-valo-menubar-menuitem-style {
position: relative;
z-index: 1;
display: inline-block;
@include v-valo-button-size($v-unit-size, $v-border-radius);
height: $v-unit-size - $v-button-border-width*2;
border-left: $v-button-border-width solid;
border-color: inherit;
vertical-align: top;
line-height: $v-unit-size - $v-button-border-width*2 - 1px;
@include user-select(none);;
$br: $v-button-border-radius - $v-button-border-width;
&:first-child {
border-left: none;
border-radius: $br 0 0 $br;
}
&:last-child {
border-radius: 0 $br $br 0;
}
&:first-child:last-child {
border-radius: $br;
}
&:before {
content: "";
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@if $v-button-hover-style-enabled {
&:hover:before {
@include v-valo-button-hover-style;
border: none;
}
}
&:active:before {
@include v-valo-button-active-style;
}
$margin-width: ceil($v-unit-size/2.4/5);
.v-icon {
margin: 0 $margin-width 0 #{-$margin-width};
}
&[class*="-icon-only"] .v-icon {
margin: 0 #{-$margin-width};
}
}
@mixin v-valo-menubar-popup-style ($primary-stylename: v-menubar, $context: $v-app-background-color) {
$copy: $v-app-background-color;
$v-app-background-color: $context;
@include v-valo-selection-overlay-style;
margin: ceil($v-unit-size/8) 0 0 1px !important;
.#{$primary-stylename}-submenu {
outline: none;
}
.#{$primary-stylename}-menuitem {
display: block;
@include v-valo-selection-item-style;
padding-left: $v-selection-item-height + round($v-selection-item-padding-horizontal/2); // Make room for checkable icon
padding-right: $v-unit-size;
position: relative;
}
.#{$primary-stylename}-submenu-indicator {
display: none;
+ .#{$primary-stylename}-menuitem-caption:after {
position: absolute;
right: $v-selection-item-padding-horizontal;
@include v-valo-menubar-submenu-indicator-style;
}
}
.#{$primary-stylename}-menuitem-selected {
@include v-valo-selection-item-selected-style;
}
.#{$primary-stylename}-separator {
display: block;
margin: $v-selection-overlay-padding-vertical 0;
height: 0;
overflow: hidden;
border-bottom: 1px solid darken(v-valo-overlay-background-color(), 5%);
}
[class*="checked"] .#{$primary-stylename}-menuitem-caption:before {
@include v-valo-menubar-checked-icon-style;
position: absolute;
left: $v-selection-item-padding-horizontal;
}
[class*="unchecked"] .#{$primary-stylename}-menuitem-caption:before {
content: "";
}
[class*="disabled"] {
cursor: default;
@include opacity($v-disabled-opacity);
}
$v-app-background-color: $copy;
}
@mixin v-valo-menubar-submenu-indicator-style {
font-family: FontAwesome;
content: "\f054";
line-height: $v-selection-item-height + 2px;
}
@mixin v-valo-menubar-checked-icon-style {
content: "\f00c";
font-family: FontAwesome;
}
@mixin v-valo-menubar-menuitem-checked-style ($background-color: scale-color($v-app-background-color, $lightness: -5%, $saturation: -5%)) {
@include v-valo-gradient($color: $background-color, $depth: $v-gradient-depth/4, $direction: to top);
@if color-luminance($background-color) < color-luminance($v-app-background-color) {
$border-color: v-valo-button-border-color($background-color: $background-color);
border-color: $border-color;
+ [class*="menuitem"] {
@if length($border-color) > 1 {
$border-color: nth($border-color, 2);
}
border-left-color: $border-color;
}
}
color: v-valo-font-color($background-color, 0.9);
text-shadow: v-valo-button-text-shadow($background-color: $background-color);
}
@mixin v-valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) {
.#{$primary-stylename}-menuitem-checked {
@include v-valo-menubar-menuitem-checked-style($background-color: $background-color);
}
}
|
