lib/dijit/themes/claro/variables.less

   1 // General
   2
   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;
   8
   9 @container-background-color:#fff;                                                                               // Backgrounds for various content areas such as TitlePane, ContentPane and Inputs (if changed, adjust selected tab to match)
  10
  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
  17
  18
  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
  22
  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
  25
  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.
  40
  41
  42
  43 // Buttons
  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)
  49
  50 // Input widgets
  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
  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
  61 @textbox-padding: 2px;  // Padding for Textbox, Textarea, etc.
  62
  63 // CheckBox, RadioButton
  64 @focus-outline-color: darken(@secondary-color, 65);                                                                                     // Color for artificial focus outline around labels of checkboxes
  65
  66 // TabContainer
  67 @nestedtab-hovered-background-color: @unfocused-clickable-color;
  68 @nestedtab-hovered-border-color: @primary-color;
  69 @nestedtab-selected-border-color: @selected-border-color;
  70 @nestedtab-selected-background-color: @minor-selected-color;
  71 @tab-disabled-background-color: @disabled-color;                                                // For disabled tabs of a TabContainer (not officially supported)
  72
  73 // Arrow buttons (stand alone, or inside ComboBox / ComboButton / Spinner / etc.
  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
  78
  79 // Slider
  80 // Note: any changes here require corresponding changes in form/images/sliderThumbs.png
  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
  90
  91 // Select, ComboBox
  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
  95
  96 // Menus
  97 @menu-background-color: @popup-background-color;
  98
  99 // Calendar
 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?
 105 @calendar-date-pressed-background-color: @pressed-background-color;
 106 @calendar-date-selected-border-color: @selected-border-color;
 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;
 111 @calendar-button-pressed-border-color: @pressed-border-color;
 112
 113
 114 // ProgressBar
 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.
 119
 120 // TimePicker
 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;
 125 @timepicker-value-hovered-text-color: @hovered-text-color;
 126 @timepicker-arrow-hovered-background-color: @minor-selected-color;
 127
 128 // ColorPalette
 129 @colorpalette-background-color: @container-background-color;
 130 @swatch-border-color: @minor-border-color;
 131 @swatch-hovered-border-color: #000;
 132 @swatch-selected-border-color: #000;
 133
 134 // Dialog
 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;
 138
 139 // Tooltip
 140 @tooltip-gradient-color: fade(@primary-color,10%);              // a little swath of color at the bottom of tooltips
 141
 142 // BorderContainer
 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
 145
 146 // Toolbar
 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
 149 @toolbar-button-border-radius: 2px;                     // Rounded corner radius for buttons for buttons in toolbar
 150
 151 // DnD
 152 @dnd-avatar-background-color: @container-background-color;                                      // Background color of little Dialog-type box indicating dragged items
 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
 155 @dnd-dropseparator-color: @base-border-color;                                   // Color of line indicating that user is about to drop between items A & B
 156
 157 // Document level
 158 @document-text-color: #131313;                                                          // Text color for document itself (text outside of widgets)
 159 @document-shadedsection-background-color: @bar-background-color;// background color used for <pre>, <code>, and table header rows
 160 @document-border-color: @disabled-color;                                                                // Border for <pre>, <code>, tables, etc.
 161
 162 // Icons, arrows, etc.
 163 @image-arrow-sprite: "images/spriteArrows.png";
 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";
 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";
 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";
 177 @image-form-slider-thumbs: "form/images/sliderThumbs.png";
 178 @image-layout-tab-close: "layout/images/tabClose.png";  // [x] icon to close a tab
 179 @image-loading-animation: "images/loadingAnimation.gif";
 180 @image-tooltip: "images/tooltip.png";   // arrow connectors
 181 @image-tooltip-ie6: "images/tooltip8bit.png";   // arrow connectors (8 bit)
 182 @image-tree-expand: "images/treeExpandImages.png";
 183 @image-tree-expand-ie6: "images/treeExpandImages8bit.png";
 184 @image-progressbar-anim: "images/progressBarAnim.gif";
 185
 186 // Mixins
 187
 188 .border-radius (@radius) {
 189         -moz-border-radius: @radius;
 190         border-radius: @radius;
 191 }
 192
 193 .box-shadow (@value) {
 194         -webkit-box-shadow: @value;
 195         -moz-box-shadow: @value;
 196         box-shadow: @value;
 197 }
 198
 199 .transition-property (@value) {
 200         -webkit-transition-property: @value;
 201         -moz-transition-property: @value;
 202         transition-property: @value;
 203 }
 204
 205 .transition-property (@value1, @value2) {
 206         -webkit-transition-property: @value1, @value2;
 207         -moz-transition-property: @value1, @value2;
 208         transition-property: @value1, @value2;
 209 }
 210
 211 .transition-duration (@value) {
 212         -webkit-transition-duration: @value;
 213         -moz-transition-duration: @value;
 214         transition-duration: @value;
 215 }
 216
 217 .transition-duration (@value1, @value2) {
 218         -webkit-transition-duration: @value1, @value2;
 219         -moz-transition-duration: @value1, @value2;
 220         transition-duration: @value1, @value2;
 221 }
 222
 223 .transition-timing-function (@value) {
 224         -webkit-transition-timing-function: @value;
 225         -moz-transition-timing-function: @value;
 226         transition-timing-function: @value;
 227 }
 228
 229 .linear-gradient (@value1, @value2) {
 230         // summary:
 231         //              Expands to browser specific background-image specifications for a linear-gradient (2 stops)
 232         background-image: -moz-linear-gradient(@value1, @value2); // FF3.6 - FF15 (FF16+ supports linear-gradient)
 233         background-image: -webkit-linear-gradient(@value1, @value2); // Chrome10+, Safari5.1+
 234         background-image: -o-linear-gradient(@value1, @value2); // Opera 11.10+
 235         background-image: linear-gradient(@value1, @value2);
 236 }
 237 .linear-gradient (@value1, @value2, @value3) {
 238         background-image: -moz-linear-gradient(@value1, @value2, @value3); // FF3.6 - FF15 (FF16+ supports linear-gradient)
 239         background-image: -webkit-linear-gradient(@value1, @value2, @value3); // Chrome10+, Safari5.1+
 240         background-image: -o-linear-gradient(@value1, @value2, @value3); // Opera 11.10+
 241         background-image: linear-gradient(@value1, @value2, @value3);
 242 }
 243 .linear-gradient (@value1, @value2, @value3, @value4) {
 244         background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4); // FF3.6 - FF15 (FF16+ supports linear-gradient)
 245         background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4); // Chrome10+, Safari5.1+
 246         background-image: -o-linear-gradient(@value1, @value2, @value3, @value4); // Opera 11.10+
 247         background-image: linear-gradient(@value1, @value2, @value3, @value4);
 248 }
 249 .linear-gradient (@value1, @value2, @value3, @value4, @value5) {
 250         background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5); // FF3.6 - FF15 (FF16+ supports linear-gradient)
 251         background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5); // Chrome10+, Safari5.1+
 252         background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5); // Opera 11.10+
 253         background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5);
 254 }
 255 .linear-gradient (@value1, @value2, @value3, @value4, @value5, @value6) {
 256         background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // FF3.6 - FF15 (FF16+ supports linear-gradient)
 257         background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // Chrome10+, Safari5.1+
 258         background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // Opera 11.10+
 259         background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6);
 260 }
 261 .linear-gradient (@value1, @value2, @value3, @value4, @value5, @value6, @value7) {
 262         background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // FF3.6 - FF15 (FF16+ supports linear-gradient)
 263         background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // Chrome10+, Safari5.1+
 264         background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // Opera 11.10+
 265         background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7);
 266 }
 267
 268 .alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2) {
 269         // summary:
 270         //              For setting up white background-image with variable transparency.
 271         // example:
 272         //              Gradient starts at top (0%) with 30% opacity, and then ends at bottom (100%) with full transparency
 273         //              |       .alpha-white-gradient(0.3, 0%, 0, 100%)
 274         //
 275         .linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2);
 276 }
 277 .alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2) {
 278         .linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2);
 279 }
 280 .alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3) {
 281         .linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3);
 282 }
 283 .alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3) {
 284         .linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3);
 285 }
 286 .alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4) {
 287         .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);
 288 }
 289 .alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4) {
 290         .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);
 291 }
 292 .alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4, @opacity5, @stop5) {
 293         .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);
 294 }
 295 .alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4, @opacity5, @stop5, @opacity6, @stop6) {
 296         .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);
 297 }
 298
 299 .gradient-and-filter (@color, @fade1, @fade2) {
 300         // summary:
 301         //              Sets up a background color with a vertical gradient.
 302         //              In order to make transitions work properly on mozilla and webkit, this is done by combining
 303         //              a background-color which will be changed based on state (ex: hover) with a constant
 304         //              white alpha-transparency background-image.  On IE it creates a DXImageTransform filter.
 305         // @color:
 306         //              The color
 307         // @fade1:
 308         //              The percent to fade at the top
 309         // @fade2:
 310         //              The percent to fade at the bottom
 311         background-color: @color; // the base color
 312         .linear-gradient(fadeout(#fff, 100-@fade1), fadeout(#fff, 100-@fade2));
 313         filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="lighten(@color, @fade1)~", endColorstr="lighten(@color, @fade2)~")"; // IE
 314 }
 315 .horizontal-gradient-and-filter (@color, @fade1, @fade2) {
 316         // summary:
 317         //              Sets up a background color with a horizontal gradient.
 318         //              In order to make transitions work properly on mozilla and webkit, this is done by combining
 319         //              a background-color which will be changed based on state (ex: hover) with a constant
 320         //              white alpha-transparency background-image.  On IE it creates a DXImageTransform filter.
 321         // @color:
 322         //              The color
 323         // @fade1:
 324         //              The percent to fade at the top
 325         // @fade2:
 326         //              The percent to fade at the bottom
 327         background-color: @color; // the base color
 328         .linear-gradient(left, fadeout(#fff, 100-@fade1), fadeout(#fff, 100-@fade2));
 329         filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="lighten(@color, @fade1)~", endColorstr="lighten(@color, @fade2)~"gradientType=1)"; // IE
 330 }
 331
 332
 333 // Mixins defining gradients
 334
 335 .textbox-background-image () {
 336         // summary:
 337         //              Background image used for hovered TextBoxes and similar controls.
 338         //              It's just a small inset shadow below the top border (inside of the TextBox).
 339         .linear-gradient(rgba(127,127,127,0.2) 0%, rgba(127,127,127,0) 2px);
 340 }
 341
 342 .standard-gradient (@pathToRoot: "") {
 343         // summary:
 344         //              Light to dark background-image used by widgets with short height (~16px) including:
 345         //                      - MenuBar, and hovered MenuItem/MenuBarItem
 346         //                      - arrow icon wrapper for Select, ComboBox, Spinner
 347         //                      - Toolbar and hovered Toolbar buttons
 348         //                      - TitlePane title bar, AccordionContainer title bar, Dialog title bar
 349
 350         // Fallback for IE
 351         background-image: url("@{pathToRoot}images/standardGradient.png");
 352         background-repeat: repeat-x;
 353
 354         // CSS gradient for other browsers
 355         .alpha-white-gradient(0.7, 0%, 0, 100%);
 356
 357         // IE6 can't handle a background-image with transparency and a background-color; the color is blocked out
 358         _background-image: none;
 359 }
 360 .active-gradient (@pathToRoot: "") {
 361         // summary:
 362         //              Light to dark background-image with an inset gray shadow at the top,
 363         //              used by widgets when they are active (ie: mousedown) or selected, including:
 364         //                      - active MenuItem/MenuBarItem
 365         //                      - arrow icon wrapper for Select, ComboBox, Spinner when active or drop down is open
 366         //                      - active Toolbar buttons
 367         //                      - active TitlePane title bar, AccordionContainer title bar
 368
 369         // Fallback for IE
 370         background-image: url("@{pathToRoot}images/activeGradient.png");
 371         background-repeat: repeat-x;
 372
 373         // CSS gradient for other browsers
 374         .linear-gradient(rgba(190,190,190,0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
 375
 376         // IE6 can't handle a background-image with transparency and a background-color; the color is blocked out
 377         _background-image: none;
 378 }