]> git.proxmox.com Git - extjs.git/blame - extjs/classic/theme-neutral/sass/var/toolbar/Toolbar.scss
projects / extjs.git / blame
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (incremental) | history | HEAD
add extjs 6.0.1 sources
[extjs.git] / extjs / classic / theme-neutral / sass / var / toolbar / Toolbar.scss
CommitLineData
6527f429
DM		 1/**\r
2 * @class Ext.toolbar.Toolbar\r
3 */\r
4\r
5/**\r
6 * @var {number}\r
7 * The default font-size of Toolbar text\r
8 */\r
9$toolbar-font-size: dynamic($font-size);\r
10\r
11/**\r
12 * @var {color}\r
13 * The background-color of the Toolbar\r
14 */\r
15$toolbar-background-color: dynamic($base-color);\r
16\r
17/**\r
18 * @var {string/list}\r
19 * The background-gradient of the Toolbar. Can be either the name of a predefined gradient\r
20 * or a list of color stops. Used as the `$type` parameter for {@link Global_CSS#background-gradient}.\r
21 */\r
22$toolbar-background-gradient: dynamic('none');\r
23\r
24/**\r
25 * @var {number}\r
26 * The horizontal spacing of Toolbar items\r
27 */\r
28$toolbar-horizontal-spacing: dynamic(2px);\r
29\r
30/**\r
31 * @var {number}\r
32 * The vertical spacing of Toolbar items\r
33 */\r
34$toolbar-vertical-spacing: dynamic(2px);\r
35\r
36/**\r
37 * @var {number}\r
38 * The horizontal spacing of {@link Ext.panel.Panel#fbar footer} Toolbar items\r
39 */\r
40$toolbar-footer-horizontal-spacing: dynamic(6px);\r
41\r
42/**\r
43 * @var {number}\r
44 * The vertical spacing of {@link Ext.panel.Panel#fbar footer} Toolbar items\r
45 */\r
46$toolbar-footer-vertical-spacing: dynamic(4px);\r
47\r
48/**\r
49 * @var {color}\r
50 * The background-color of {@link Ext.panel.Panel#fbar footer} Toolbars\r
51 */\r
52$toolbar-footer-background-color: dynamic(transparent);\r
53\r
54/**\r
55 * @var {number}\r
56 * The border-width of {@link Ext.panel.Panel#fbar footer} Toolbars\r
57 */\r
58$toolbar-footer-border-width: dynamic(0);\r
59\r
60/**\r
61 * @var {color}\r
62 * The border-color of Toolbars\r
63 */\r
64$toolbar-border-color: dynamic($base-color);\r
65\r
66/**\r
67 * @var {number}\r
68 * The border-width of Toolbars\r
69 */\r
70$toolbar-border-width: dynamic(1px);\r
71\r
72/**\r
73 * @var {string}\r
74 * The border-style of Toolbars\r
75 */\r
76$toolbar-border-style: dynamic(solid);\r
77\r
78/**\r
79 * @var {number}\r
80 * The width of Toolbar {@link Ext.toolbar.Spacer Spacers}\r
81 */\r
82$toolbar-spacer-width: dynamic(2px);\r
83\r
84/**\r
85 * @var {color}\r
86 * The main border-color of Toolbar {@link Ext.toolbar.Separator Separators}\r
87 */\r
88$toolbar-separator-color: dynamic(adjust-color($base-color, $hue: -1deg, $saturation: 100%, $lightness: -4.3%));\r
89\r
90/**\r
91 * @var {color}\r
92 * The highlight border-color of Toolbar {@link Ext.toolbar.Separator Separators}\r
93 */\r
94$toolbar-separator-highlight-color: dynamic(#fff);\r
95\r
96/**\r
97 * @var {number/list}\r
98 * The margin of {@link Ext.toolbar.Separator Separators} on a horizontally oriented Toolbar\r
99 */\r
100$toolbar-separator-horizontal-margin: dynamic(0 $toolbar-horizontal-spacing 0 0);\r
101\r
102/**\r
103 * @var {number}\r
104 * The height of {@link Ext.toolbar.Separator Separators} on a horizontally oriented Toolbar\r
105 */\r
106$toolbar-separator-horizontal-height: dynamic(14px);\r
107\r
108/**\r
109 * @var {string}\r
110 * The border-style of {@link Ext.toolbar.Separator Separators} on a horizontally oriented Toolbar\r
111 */\r
112$toolbar-separator-horizontal-border-style: dynamic(solid);\r
113\r
114/**\r
115 * @var {number}\r
116 * The border-width of {@link Ext.toolbar.Separator Separators} on a horizontally oriented Toolbar\r
117 */\r
118$toolbar-separator-horizontal-border-width: dynamic(0 1px);\r
119\r
120/**\r
121 * @var {number/list}\r
122 * The margin of {@link Ext.toolbar.Separator Separators} on a vertically oriented Toolbar\r
123 */\r
124$toolbar-separator-vertical-margin: dynamic(0 5px $toolbar-vertical-spacing);\r
125\r
126/**\r
127 * @var {string}\r
128 * The border-style of {@link Ext.toolbar.Separator Separators} on a vertically oriented Toolbar\r
129 */\r
130$toolbar-separator-vertical-border-style: dynamic(solid none);\r
131\r
132/**\r
133 * @var {number}\r
134 * The border-width of {@link Ext.toolbar.Separator Separators} on a vertically oriented Toolbar\r
135 */\r
136$toolbar-separator-vertical-border-width: dynamic(1px 0);\r
137\r
138/**\r
139 * @var {string}\r
140 * The default font-family of Toolbar text\r
141 */\r
142$toolbar-text-font-family: dynamic($font-family);\r
143\r
144/**\r
145 * @var {number}\r
146 * The default font-size of Toolbar text\r
147 */\r
148$toolbar-text-font-size: dynamic($toolbar-font-size);\r
149\r
150/**\r
151 * @var {number}\r
152 * The default font-size of Toolbar text\r
153 */\r
154$toolbar-text-font-weight: dynamic($font-weight);\r
155\r
156/**\r
157 * @var {color}\r
158 * The text-color of Toolbar text\r
159 */\r
160$toolbar-text-color: dynamic(mix(desaturate(lighten($base-color, 37), 5), #000, 30));\r
161\r
162/**\r
163 * @var {number}\r
164 * The line-height of Toolbar text\r
165 */\r
166$toolbar-text-line-height: dynamic(16px);\r
167\r
168/**\r
169 * @var {number/list}\r
170 * The padding of Toolbar text\r
171 */\r
172$toolbar-text-padding: dynamic(0 4px);\r
173\r
174/**\r
175 * @var {number}\r
176 * The width of Toolbar scrollers\r
177 */\r
178$toolbar-scroller-width: dynamic(14px);\r
179\r
180/**\r
181 * @var {number}\r
182 * The height of Toolbar scrollers\r
183 */\r
184$toolbar-scroller-height: dynamic(22px);\r
185\r
186/**\r
187 * @var {number}\r
188 * The width of scrollers on vertically aligned toolbars\r
189 */\r
190$toolbar-scroller-vertical-width: dynamic($toolbar-scroller-height);\r
191\r
192/**\r
193 * @var {number}\r
194 * The height of scrollers on vertically aligned toolbars\r
195 */\r
196$toolbar-scroller-vertical-height: dynamic($toolbar-scroller-width);\r
197\r
198/**\r
199 * @var {color}\r
200 * The border-color of Toolbar scroller buttons\r
201 */\r
202$toolbar-scroller-border-color: dynamic(#8db2e3);\r
203\r
204/**\r
205 * @var {number}\r
206 * The border-width of Toolbar scroller buttons\r
207 */\r
208$toolbar-scroller-border-width: dynamic(0 0 1px);\r
209\r
210/**\r
211 * @var {color}\r
212 * The border-color of scroller buttons on vertically aligned toolbars\r
213 */\r
214$toolbar-scroller-vertical-border-color: dynamic($toolbar-scroller-border-color);\r
215\r
216/**\r
217 * @var {number}\r
218 * The border-width of scroller buttons on vertically aligned toolbars\r
219 */\r
220$toolbar-scroller-vertical-border-width: dynamic(0);\r
221\r
222/**\r
223 * @var {number/list}\r
224 * The margin of "top" Toolbar scroller buttons\r
225 */\r
226$toolbar-scroller-top-margin: dynamic(4px 0);\r
227\r
228/**\r
229 * @var {number/list}\r
230 * The margin of "right" Toolbar scroller buttons\r
231 */\r
232$toolbar-scroller-right-margin: dynamic(0 4px);\r
233\r
234/**\r
235 * @var {number/list}\r
236 * The margin of "bottom" Toolbar scroller buttons\r
237 */\r
238$toolbar-scroller-bottom-margin: dynamic(4px 0);\r
239\r
240/**\r
241 * @var {number/list}\r
242 * The margin of "left" Toolbar scroller buttons\r
243 */\r
244$toolbar-scroller-left-margin: dynamic(0 4px);\r
245\r
246/**\r
247 * @var {string}\r
248 * The cursor of Toolbar scroller buttons\r
249 */\r
250$toolbar-scroller-cursor: dynamic(pointer);\r
251\r
252/**\r
253 * @var {string}\r
254 * The cursor of disabled Toolbar scroller buttons\r
255 */\r
256$toolbar-scroller-cursor-disabled: dynamic(default);\r
257\r
258/**\r
259 * @var {number}\r
260 * The opacity of Toolbar scroller buttons. Only applicable when\r
261 * {@link #$toolbar-classic-scrollers} is `false`.\r
262 */\r
263$toolbar-scroller-opacity: dynamic(0.6);\r
264\r
265/**\r
266 * @var {number}\r
267 * The opacity of hovered Toolbar scroller buttons. Only applicable when\r
268 * {@link #$toolbar-classic-scrollers} is `false`.\r
269 */\r
270$toolbar-scroller-opacity-over: dynamic(0.8);\r
271\r
272/**\r
273 * @var {number}\r
274 * The opacity of pressed Toolbar scroller buttons. Only applicable when\r
275 * {@link #$toolbar-classic-scrollers} is `false`.\r
276 */\r
277$toolbar-scroller-opacity-pressed: dynamic(1);\r
278\r
279/**\r
280 * @var {number}\r
281 * The opacity of disabled Toolbar scroller buttons.\r
282 */\r
283$toolbar-scroller-opacity-disabled: dynamic(0.25);\r
284\r
285/**\r
286 * @var {color}\r
287 * The color to use for toolbar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.\r
288 */\r
289$toolbar-scroller-glyph-color: dynamic($neutral-color);\r
290\r
291/**\r
292 * @var {number}\r
293 * The font size for toolbar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.\r
294 */\r
295$toolbar-scroller-glyph-font-size: dynamic(16px);\r
296\r
297/**\r
298 * @var {string/list}\r
299 * Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.\r
300 */\r
301$toolbar-scroller-top-glyph: dynamic($fa-var-chevron-up $toolbar-scroller-glyph-font-size $font-icon-font-family);\r
302\r
303/**\r
304 * @var {string/list}\r
305 * Glyph for the "right" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.\r
306 */\r
307$toolbar-scroller-right-glyph: dynamic($fa-var-chevron-right $toolbar-scroller-glyph-font-size $font-icon-font-family);\r
308\r
309/**\r
310 * @var {string/list}\r
311 * Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.\r
312 */\r
313$toolbar-scroller-bottom-glyph: dynamic($fa-var-chevron-down $toolbar-scroller-glyph-font-size $font-icon-font-family);\r
314\r
315/**\r
316 * @var {string/list}\r
317 * Glyph for the "left" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.\r
318 */\r
319$toolbar-scroller-left-glyph: dynamic($fa-var-chevron-left $toolbar-scroller-glyph-font-size $font-icon-font-family);\r
320\r
321/**\r
322 * @var {boolean}\r
323 * `true` to use classic-style scroller buttons. When `true` scroller buttons are given their\r
324 * hover state by changing their background-position, When `false` scroller buttons are\r
325 * given their hover state by applying opacity.\r
326 */\r
327$toolbar-classic-scrollers: dynamic(false);\r
328\r
329/**\r
330 * @var {string}\r
331 * The sprite to use for {@link Ext.panel.Tool Tools} on a Toolbar\r
332 */\r
333$toolbar-tool-background-image: dynamic('none');\r
334\r
335/**\r
336 * @var {color}\r
337 * The color to use for the Toolbar's tool icons when {@link Global_CSS#$enable-font-icons} is `true`.\r
338 */\r
339$toolbar-tool-glyph-color: dynamic($neutral-color);\r
340\r
341/**\r
342 * @var {color}\r
343 * The color to use for the {@link #overflowHandler menu overflow} "more" icon when\r
344 * {@link Global_CSS#$enable-font-icons} is `true`.\r
345 */\r
346$toolbar-menu-overflow-glyph-color: dynamic($button-toolbar-glyph-color);\r
347\r
348/**\r
349 * @var {string/list}\r
350 * Glyph for the {@link #overflowHandler menu overflow} "more" icon when\r
351 * {@link Global_CSS#$enable-font-icons} is `true`.\r
352 */\r
353$toolbar-menu-overflow-glyph: dynamic($fa-var-bars $button-small-glyph-font-size $font-icon-font-family);\r
354\r
355/**\r
356 * @var {boolean}\r
357 * True to include the "default" toolbar UI\r
358 */\r
359$include-toolbar-default-ui: dynamic($include-default-uis);\r
360\r
361/**\r
362 * @var {boolean}\r
363 * True to include the "footer" toolbar UI\r
364 */\r
365$include-toolbar-footer-ui: dynamic($include-default-uis);\r
ExtJS JS Framework