]>
Commit | Line | Data |
---|---|---|
81bea17a | 1 | // General |
81bea17a | 2 | |
1354d172 AD |
3 | @primary-color: #cfe5fa; // Base color for entire theme |
4 | @secondary-color: #efefef; // Base color for bar-backgrounds | |
5 | @text-color: #000; // Text color for enabled widgets | |
6 | @disabled-color: #d3d3d3; // Base for disabled backgrounds and borders | |
7 | @error-color: #d46464; | |
81bea17a | 8 | |
f0cfe83e | 9 | @container-background-color:#fff; // Backgrounds for various content areas such as TitlePane, ContentPane and Inputs (if changed, adjust selected tab to match) |
81bea17a | 10 | |
1354d172 AD |
11 | @minor-selected-color: spin(saturate(darken(@primary-color, 6), 19), 0); // Color for various arrows and buttons |
12 | @base-border-color: spin(desaturate(darken(@primary-color, 29), 44), -1); // Augmented and used directly by variables to create border colors for various widgets | |
13 | @unfocused-clickable-color: spin(saturate(lighten(@primary-color, 5), 10), 0); // Background color for enabled buttons, text inputs | |
14 | @border-color: spin(desaturate(darken(@primary-color, 15), 67), 8); // Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer | |
15 | @minor-border-color: @disabled-color; // Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar | |
16 | @popup-border-color: @base-border-color; // Border for Dialog, Menu, Tooltip. Must also update tooltip.png (the arrow image file) to match | |
81bea17a | 17 | |
81bea17a | 18 | |
1354d172 AD |
19 | @disabled-border-color: @disabled-color; // Border color for disabled/readonly Button, TextBox etc. widgets |
20 | @disabled-background-color: @secondary-color; // Disabled button, textbox, etc. | |
21 | @disabled-text-color: darken(@secondary-color, 43); // Text color for disabled/readonly widgets | |
81bea17a | 22 | |
1354d172 AD |
23 | @unselected-background-color: @secondary-color; // Background color for unselected/unopened tab button, accordion pane, TitlePane, Menu items |
24 | @unselected-text-color: darken(@secondary-color, 65); // Text color for unselected/unopened tab button, accordion pane, TitlePane, Menu items | |
81bea17a | 25 | |
1354d172 AD |
26 | @hovered-border-color: @base-border-color; // Hover of textbox, tab label, BorderContainer splitter, Calendar, etc. |
27 | @hovered-background-color: @minor-selected-color; // Background color for hover of Button, MenuBar, Accordion pane, Calendar... anything that has a (non-white) color to start with and gets darker on hover | |
28 | @hovered-text-color: @text-color; // Used for title of select Accordion pane, label of select tab, hovered Menu item, etc. | |
29 | ||
30 | @pressed-border-color: @base-border-color; // During click on Calendar day, Slider up/down buttons, tab button, etc. | |
31 | @pressed-background-color: spin(saturate(darken(@primary-color, 16), 12), 0); // Background color while clicking on Accordion/TitlePane title bar, tab button, Calendar day, Toolbar button, Tree row. | |
32 | ||
33 | @selected-border-color: @base-border-color; // Selected AccordionPane, tab of nested TabContainer (but plain TabContainer is special) | |
34 | @selected-background-color: @primary-color; // Selected Accordion pane, nested tab label, Tree row | |
35 | @selected-text-color: @text-color; // title of selected Accordion pane, label of selected tab, hovered Menu item, etc. | |
36 | ||
37 | @bar-background-color: @secondary-color; // MenuBar, Toolbar, action bar at bottom of dialog | |
38 | @pane-background-color: @container-background-color; // Background color of Accordion panes, Dialogs, etc. | |
39 | @popup-background-color: @container-background-color; // Background for Dialog. TODO: currently use for ColorPalette, maybe should change. | |
81bea17a AD |
40 | |
41 | ||
42 | ||
43 | // Buttons | |
1354d172 AD |
44 | @button-border-color: @base-border-color; // Border for (stand-alone) buttons in normal, hovered, or active state |
45 | @button-background-color: @unfocused-clickable-color; // Background color for (unhovered) buttons | |
46 | @button-hovered-background-color: @minor-selected-color; // Background color for hovered buttons | |
47 | @button-pressed-background-color: @minor-selected-color; // Background color for active buttons | |
48 | @button-border-radius: 4px; // Rounded corner radius for buttons (except in toolbar) | |
81bea17a AD |
49 | |
50 | // Input widgets | |
1354d172 AD |
51 | @focused-border-color: @base-border-color; // Focused textbox, editor, select, etc. |
52 | @error-border-color: @error-color; // Border for textbox in error state | |
53 | @error-focused-border-color: darken(@error-color, 5); // Border of textbox in error state, and focused | |
54 | @erroricon-background-color: @error-color; // Background color for exclamation point validation icon (for TextBox in error state) | |
55 | @textbox-background-color: @container-background-color; // Default background color of TextBox based widgets | |
56 | @textbox-hovered-background-color: @unfocused-clickable-color; // Background color when hovering a unfocused TextBox, Select, Editor, or other input widget | |
81bea17a AD |
57 | @textbox-focused-background-color: @textbox-background-color; |
58 | @textbox-error-background-color: @textbox-background-color; | |
59 | @textbox-disabled-background-color: @disabled-background-color; | |
60 | ||
1354d172 | 61 | @textbox-padding: 2px; // Padding for Textbox, Textarea, etc. |
81bea17a AD |
62 | |
63 | // CheckBox, RadioButton | |
1354d172 | 64 | @focus-outline-color: darken(@secondary-color, 65); // Color for artificial focus outline around labels of checkboxes |
81bea17a AD |
65 | |
66 | // TabContainer | |
1354d172 AD |
67 | @nestedtab-hovered-background-color: @unfocused-clickable-color; |
68 | @nestedtab-hovered-border-color: @primary-color; | |
81bea17a | 69 | @nestedtab-selected-border-color: @selected-border-color; |
1354d172 AD |
70 | @nestedtab-selected-background-color: @minor-selected-color; |
71 | @tab-disabled-background-color: @disabled-color; // For disabled tabs of a TabContainer (not officially supported) | |
81bea17a AD |
72 | |
73 | // Arrow buttons (stand alone, or inside ComboBox / ComboButton / Spinner / etc. | |
1354d172 AD |
74 | @arrowbutton-background-color: @secondary-color; |
75 | @arrowbutton-hovered-background-color: @minor-selected-color; // Color of arrow when hovering ComboBox. But hovering Spinner doesn't change arrow color (TODO) | |
76 | @arrowbutton-pressed-background-color: @minor-selected-color; | |
77 | @arrowbutton-inner-border-color: @container-background-color; // Typically the arrows have an inner white border (a.k.a. padding) and then an outer black-ish border | |
81bea17a AD |
78 | |
79 | // Slider | |
80 | // Note: any changes here require corresponding changes in form/images/sliderThumbs.png | |
1354d172 AD |
81 | @slider-fullbar-background-color: @primary-color; // Background color for part of slider bar before (to the left or below) the handle |
82 | @slider-remainingbar-background-color: @container-background-color; // Background color for part of slider bar after (to the right or above) the handle | |
83 | @slider-hovered-fullbar-background-color: @minor-selected-color; // Background color for part of bar of hovered slider before (to the left or below) the handle | |
84 | @slider-hovered-remainingbar-background-color: @container-background-color; // Background color for part of bar of hovered slider after (to the right or above) the handle | |
85 | @slider-hoveredButton-background-color: @container-background-color; // Background color of slider increment/decrement buttons when mouse is over slider but not over the buttons | |
86 | @slider-focused-fullbar-background-color: @minor-selected-color; // Background color for part of bar of focused slider before (to the left or below) the handle | |
87 | @slider-focused-remainingbar-background-color: @container-background-color; // Background color for part of bar of focused slider after (to the right or above) the handle | |
88 | @slider-button-hovered-background-color: @primary-color; // Background color of slider increment/decrement buttons when mouse is over the buttons | |
89 | @slider-button-pressed-background-color: @minor-selected-color; // Background color of slider increment/decrement buttons while button is depressed | |
81bea17a AD |
90 | |
91 | // Select, ComboBox | |
1354d172 AD |
92 | @select-dropdownitem-background-color: @container-background-color; // Background color for items in the drop down list of a ComboBox/Select |
93 | @select-dropdownitem-hovered-background-color: @pressed-background-color; // Background color for the hovered item in the drop down list of a ComboBox/Select | |
94 | @select-matchedtext-background-color: @minor-selected-color; // Background color of text in ComboBox drop down that matches typed in phrase | |
81bea17a AD |
95 | |
96 | // Menus | |
97 | @menu-background-color: @popup-background-color; | |
98 | ||
99 | // Calendar | |
1354d172 AD |
100 | @calendar-background-color: @primary-color; |
101 | @calendar-currentmonth-background-color: @container-background-color; // Background color for days of the current month | |
102 | @calendar-adjacentmonth-background-color: @unfocused-clickable-color; // Background color used for days from previous or next month | |
103 | @calendar-adjacentmonth-text-color: @base-border-color; // Text color used for days from previous or next month | |
104 | @calendar-date-pressed-border-color: @container-background-color; // For some reason pressing a day of the month (as opposed to hovering it) makes the border go away, is this intentional? | |
81bea17a AD |
105 | @calendar-date-pressed-background-color: @pressed-background-color; |
106 | @calendar-date-selected-border-color: @selected-border-color; | |
1354d172 AD |
107 | @calendar-date-selected-background-color: @minor-selected-color; |
108 | @calendar-button-hovered-background-color: @unfocused-clickable-color; // for hover or next/previous year, and month drop down (TODO: border and background are built in to calendarArrows.png, can't control from here) | |
109 | @calendar-button-hovered-border-color: @container-background-color; // for hover or next/previous year, and month drop down | |
110 | @calendar-button-pressed-background-color: @pressed-background-color; | |
81bea17a AD |
111 | @calendar-button-pressed-border-color: @pressed-border-color; |
112 | ||
113 | ||
114 | // ProgressBar | |
1354d172 AD |
115 | @progressbar-border-color: @popup-border-color; // Border color of progress bar |
116 | @progressbar-full-background-color:@minor-selected-color; // Background color for part of progress bar indicating amount completed | |
117 | @progressbar-empty-background-color: @container-background-color; // Background color for part of progress bar indicating amount remaining | |
118 | @progressbar-text-color: @text-color; // Color of progress bar text (ex: "35%"). Must contrast with both empty and full background colors. | |
81bea17a AD |
119 | |
120 | // TimePicker | |
1354d172 AD |
121 | @timepicker-minorvalue-background-color: @secondary-color; // For 3:15, 3:30, 3:45 but not 3:00 or 4:00 |
122 | @timepicker-minorvalue-text-color: darken(@secondary-color, 43); | |
123 | @timepicker-majorvalue-background-color: @unfocused-clickable-color; // For 3:00, 4:00, 5:00, etc. | |
124 | @timepicker-value-hovered-background-color: @pressed-background-color; | |
81bea17a | 125 | @timepicker-value-hovered-text-color: @hovered-text-color; |
1354d172 | 126 | @timepicker-arrow-hovered-background-color: @minor-selected-color; |
81bea17a AD |
127 | |
128 | // ColorPalette | |
1354d172 | 129 | @colorpalette-background-color: @container-background-color; |
81bea17a AD |
130 | @swatch-border-color: @minor-border-color; |
131 | @swatch-hovered-border-color: #000; | |
132 | @swatch-selected-border-color: #000; | |
133 | ||
134 | // Dialog | |
1354d172 AD |
135 | @dialog-underlay-color: @container-background-color; // the thing that grays out the screen when a dialog is shown |
136 | @dialog-titlebar-border-color: @container-background-color; // Inner border around the title sectionof a Dialog, inside the main border of the Dialog and the border between title and content | |
137 | @dialog-titlebar-background-color: @minor-selected-color; | |
81bea17a | 138 | |
f0cfe83e AD |
139 | // Tooltip |
140 | @tooltip-gradient-color: fade(@primary-color,10%); // a little swath of color at the bottom of tooltips | |
141 | ||
81bea17a | 142 | // BorderContainer |
1354d172 AD |
143 | @splitter-hovered-background-color: @primary-color; // Color of splitter when user hovers it, before mouse down |
144 | @splitter-dragged-background-color: @minor-selected-color; // Color of splitter while it's being dragged | |
81bea17a AD |
145 | |
146 | // Toolbar | |
1354d172 AD |
147 | @toolbar-button-checked-background-color: @container-background-color; // a toggled-on button in the toolbar |
148 | @toolbar-combobutton-hovered-unhoveredsection-background-color: spin(saturate(lighten(@primary-color, 8), 19), -29); // when user hovers a ComboButton in a Toolbar, the other half of the button turns this color | |
81bea17a AD |
149 | @toolbar-button-border-radius: 2px; // Rounded corner radius for buttons for buttons in toolbar |
150 | ||
151 | // DnD | |
1354d172 | 152 | @dnd-avatar-background-color: @container-background-color; // Background color of little Dialog-type box indicating dragged items |
81bea17a AD |
153 | @dnd-avatar-header-background-color: #f58383; // Title bar for dragged items |
154 | @dnd-avatar-candrop-header-background-color: #97e68d;// Title bar for dragged items when they can be dropped | |
1354d172 | 155 | @dnd-dropseparator-color: @base-border-color; // Color of line indicating that user is about to drop between items A & B |
81bea17a AD |
156 | |
157 | // Document level | |
1354d172 | 158 | @document-text-color: #131313; // Text color for document itself (text outside of widgets) |
81bea17a | 159 | @document-shadedsection-background-color: @bar-background-color;// background color used for <pre>, <code>, and table header rows |
1354d172 AD |
160 | @document-border-color: @disabled-color; // Border for <pre>, <code>, tables, etc. |
161 | ||
f0cfe83e | 162 | // Icons, arrows, etc. |
1354d172 | 163 | @image-arrow-sprite: "images/spriteArrows.png"; |
1354d172 AD |
164 | @image-calendar-arrows: "images/calendarArrows.png"; |
165 | @image-calendar-arrows-ie6: "images/calendarArrows8bit.png"; | |
166 | @image-checkmark: "images/checkmarkNoBorder.png"; | |
167 | @image-checkmark-ie6: "images/checkmarkNoBorder.gif"; | |
1354d172 AD |
168 | @image-dialog-close: "images/dialogCloseIcon.png"; |
169 | @image-dialog-close-ie6: "images/dialogCloseIcon8bit.png"; | |
170 | @image-dnd: "images/dnd.png"; | |
171 | @image-editor-icons-enabled: "../../icons/images/editorIconsEnabled.png"; | |
1354d172 AD |
172 | @image-form-button-arrows: "form/images/buttonArrows.png"; |
173 | @image-form-checkbox-and-radios: "form/images/checkboxRadioButtonStates.png"; | |
174 | @image-form-checkbox-and-radios-ie6: "form/images/checkboxAndRadioButtons_IE6.png"; | |
175 | @image-form-common-arrows: "form/images/commonFormArrows.png"; | |
176 | @image-form-error: "form/images/error.png"; | |
1354d172 | 177 | @image-form-slider-thumbs: "form/images/sliderThumbs.png"; |
f0cfe83e | 178 | @image-layout-tab-close: "layout/images/tabClose.png"; // [x] icon to close a tab |
6887a0f5 AK |
179 | @image-loading-animation: "../../icons/images/loadingAnimation.gif"; |
180 | @image-loading-animation-rtl: "../../icons/images/loadingAnimation_rtl.gif"; | |
f0cfe83e AD |
181 | @image-tooltip: "images/tooltip.png"; // arrow connectors |
182 | @image-tooltip-ie6: "images/tooltip8bit.png"; // arrow connectors (8 bit) | |
1354d172 AD |
183 | @image-tree-expand: "images/treeExpandImages.png"; |
184 | @image-tree-expand-ie6: "images/treeExpandImages8bit.png"; | |
f0cfe83e | 185 | @image-progressbar-anim: "images/progressBarAnim.gif"; |
81bea17a AD |
186 | |
187 | // Mixins | |
188 | ||
189 | .border-radius (@radius) { | |
190 | -moz-border-radius: @radius; | |
191 | border-radius: @radius; | |
192 | } | |
193 | ||
194 | .box-shadow (@value) { | |
195 | -webkit-box-shadow: @value; | |
196 | -moz-box-shadow: @value; | |
197 | box-shadow: @value; | |
198 | } | |
199 | ||
200 | .transition-property (@value) { | |
201 | -webkit-transition-property: @value; | |
202 | -moz-transition-property: @value; | |
203 | transition-property: @value; | |
204 | } | |
205 | ||
206 | .transition-property (@value1, @value2) { | |
207 | -webkit-transition-property: @value1, @value2; | |
208 | -moz-transition-property: @value1, @value2; | |
209 | transition-property: @value1, @value2; | |
210 | } | |
211 | ||
212 | .transition-duration (@value) { | |
213 | -webkit-transition-duration: @value; | |
214 | -moz-transition-duration: @value; | |
215 | transition-duration: @value; | |
216 | } | |
217 | ||
218 | .transition-duration (@value1, @value2) { | |
219 | -webkit-transition-duration: @value1, @value2; | |
220 | -moz-transition-duration: @value1, @value2; | |
221 | transition-duration: @value1, @value2; | |
222 | } | |
223 | ||
224 | .transition-timing-function (@value) { | |
225 | -webkit-transition-timing-function: @value; | |
226 | -moz-transition-timing-function: @value; | |
227 | transition-timing-function: @value; | |
228 | } | |
f0cfe83e AD |
229 | |
230 | .linear-gradient (@value1, @value2) { | |
231 | // summary: | |
232 | // Expands to browser specific background-image specifications for a linear-gradient (2 stops) | |
233 | background-image: -moz-linear-gradient(@value1, @value2); // FF3.6 - FF15 (FF16+ supports linear-gradient) | |
234 | background-image: -webkit-linear-gradient(@value1, @value2); // Chrome10+, Safari5.1+ | |
235 | background-image: -o-linear-gradient(@value1, @value2); // Opera 11.10+ | |
236 | background-image: linear-gradient(@value1, @value2); | |
237 | } | |
238 | .linear-gradient (@value1, @value2, @value3) { | |
239 | background-image: -moz-linear-gradient(@value1, @value2, @value3); // FF3.6 - FF15 (FF16+ supports linear-gradient) | |
240 | background-image: -webkit-linear-gradient(@value1, @value2, @value3); // Chrome10+, Safari5.1+ | |
241 | background-image: -o-linear-gradient(@value1, @value2, @value3); // Opera 11.10+ | |
242 | background-image: linear-gradient(@value1, @value2, @value3); | |
243 | } | |
244 | .linear-gradient (@value1, @value2, @value3, @value4) { | |
245 | background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4); // FF3.6 - FF15 (FF16+ supports linear-gradient) | |
246 | background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4); // Chrome10+, Safari5.1+ | |
247 | background-image: -o-linear-gradient(@value1, @value2, @value3, @value4); // Opera 11.10+ | |
248 | background-image: linear-gradient(@value1, @value2, @value3, @value4); | |
249 | } | |
250 | .linear-gradient (@value1, @value2, @value3, @value4, @value5) { | |
251 | background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5); // FF3.6 - FF15 (FF16+ supports linear-gradient) | |
252 | background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5); // Chrome10+, Safari5.1+ | |
253 | background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5); // Opera 11.10+ | |
254 | background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5); | |
255 | } | |
256 | .linear-gradient (@value1, @value2, @value3, @value4, @value5, @value6) { | |
257 | background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // FF3.6 - FF15 (FF16+ supports linear-gradient) | |
258 | background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // Chrome10+, Safari5.1+ | |
259 | background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // Opera 11.10+ | |
260 | background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); | |
261 | } | |
262 | .linear-gradient (@value1, @value2, @value3, @value4, @value5, @value6, @value7) { | |
263 | background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // FF3.6 - FF15 (FF16+ supports linear-gradient) | |
264 | background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // Chrome10+, Safari5.1+ | |
265 | background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // Opera 11.10+ | |
266 | background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); | |
267 | } | |
268 | ||
269 | .alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2) { | |
270 | // summary: | |
271 | // For setting up white background-image with variable transparency. | |
272 | // example: | |
273 | // Gradient starts at top (0%) with 30% opacity, and then ends at bottom (100%) with full transparency | |
274 | // | .alpha-white-gradient(0.3, 0%, 0, 100%) | |
275 | // | |
276 | .linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2); | |
277 | } | |
278 | .alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2) { | |
279 | .linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2); | |
280 | } | |
281 | .alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3) { | |
282 | .linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3); | |
283 | } | |
284 | .alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3) { | |
285 | .linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3); | |
286 | } | |
287 | .alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4) { | |
288 | .linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4); | |
289 | } | |
290 | .alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4) { | |
291 | .linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4); | |
292 | } | |
293 | .alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4, @opacity5, @stop5) { | |
294 | .linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4, rgba(255,255,255, @opacity5) @stop5); | |
295 | } | |
296 | .alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4, @opacity5, @stop5, @opacity6, @stop6) { | |
297 | .linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4, rgba(255,255,255, @opacity5) @stop5, rgba(255,255,255, @opacity6) @stop6); | |
298 | } | |
299 | ||
300 | .gradient-and-filter (@color, @fade1, @fade2) { | |
301 | // summary: | |
302 | // Sets up a background color with a vertical gradient. | |
303 | // In order to make transitions work properly on mozilla and webkit, this is done by combining | |
304 | // a background-color which will be changed based on state (ex: hover) with a constant | |
305 | // white alpha-transparency background-image. On IE it creates a DXImageTransform filter. | |
306 | // @color: | |
307 | // The color | |
308 | // @fade1: | |
309 | // The percent to fade at the top | |
310 | // @fade2: | |
311 | // The percent to fade at the bottom | |
312 | background-color: @color; // the base color | |
313 | .linear-gradient(fadeout(#fff, 100-@fade1), fadeout(#fff, 100-@fade2)); | |
314 | filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="lighten(@color, @fade1)~", endColorstr="lighten(@color, @fade2)~")"; // IE | |
315 | } | |
316 | .horizontal-gradient-and-filter (@color, @fade1, @fade2) { | |
317 | // summary: | |
318 | // Sets up a background color with a horizontal gradient. | |
319 | // In order to make transitions work properly on mozilla and webkit, this is done by combining | |
320 | // a background-color which will be changed based on state (ex: hover) with a constant | |
321 | // white alpha-transparency background-image. On IE it creates a DXImageTransform filter. | |
322 | // @color: | |
323 | // The color | |
324 | // @fade1: | |
325 | // The percent to fade at the top | |
326 | // @fade2: | |
327 | // The percent to fade at the bottom | |
328 | background-color: @color; // the base color | |
329 | .linear-gradient(left, fadeout(#fff, 100-@fade1), fadeout(#fff, 100-@fade2)); | |
330 | filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="lighten(@color, @fade1)~", endColorstr="lighten(@color, @fade2)~"gradientType=1)"; // IE | |
331 | } | |
332 | ||
333 | ||
334 | // Mixins defining gradients | |
335 | ||
336 | .textbox-background-image () { | |
337 | // summary: | |
338 | // Background image used for hovered TextBoxes and similar controls. | |
339 | // It's just a small inset shadow below the top border (inside of the TextBox). | |
340 | .linear-gradient(rgba(127,127,127,0.2) 0%, rgba(127,127,127,0) 2px); | |
341 | } | |
342 | ||
343 | .standard-gradient (@pathToRoot: "") { | |
344 | // summary: | |
345 | // Light to dark background-image used by widgets with short height (~16px) including: | |
346 | // - MenuBar, and hovered MenuItem/MenuBarItem | |
347 | // - arrow icon wrapper for Select, ComboBox, Spinner | |
348 | // - Toolbar and hovered Toolbar buttons | |
349 | // - TitlePane title bar, AccordionContainer title bar, Dialog title bar | |
350 | ||
351 | // Fallback for IE | |
352 | background-image: url("@{pathToRoot}images/standardGradient.png"); | |
353 | background-repeat: repeat-x; | |
354 | ||
355 | // CSS gradient for other browsers | |
356 | .alpha-white-gradient(0.7, 0%, 0, 100%); | |
357 | ||
358 | // IE6 can't handle a background-image with transparency and a background-color; the color is blocked out | |
359 | _background-image: none; | |
360 | } | |
361 | .active-gradient (@pathToRoot: "") { | |
362 | // summary: | |
363 | // Light to dark background-image with an inset gray shadow at the top, | |
364 | // used by widgets when they are active (ie: mousedown) or selected, including: | |
365 | // - active MenuItem/MenuBarItem | |
366 | // - arrow icon wrapper for Select, ComboBox, Spinner when active or drop down is open | |
367 | // - active Toolbar buttons | |
368 | // - active TitlePane title bar, AccordionContainer title bar | |
369 | ||
370 | // Fallback for IE | |
371 | background-image: url("@{pathToRoot}images/activeGradient.png"); | |
372 | background-repeat: repeat-x; | |
373 | ||
374 | // CSS gradient for other browsers | |
375 | .linear-gradient(rgba(190,190,190,0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); | |
376 | ||
377 | // IE6 can't handle a background-image with transparency and a background-color; the color is blocked out | |
378 | _background-image: none; | |
379 | } |