Permalink
Browse files

Using CSS-style variable names, refs #12099.

  • Loading branch information...
1 parent 61f0709 commit 153acd034462e3aad9054508efeaf941329b4bb4 @wkeese wkeese committed Dec 20, 2010
View
74 themes/claro/Calendar.less
@@ -35,8 +35,8 @@
@import "variables";
.claro .dijitCalendar {
- border:solid 1px @borderColor;
- background-color: @calendarBackgroundColor;
+ border:solid 1px @border-color;
+ background-color: @calendar-background-color;
background-image:url("images/calendarContainerImages.png");
background-position:0px -448px;
background-repeat:repeat-x;
@@ -56,16 +56,16 @@
/* treat dijitCalenderActive like hover since there's
* no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
*/
- background-color: @hoveredBackgroundColor;
- border:solid 1px @hoveredBorderColor;
+ background-color: @hovered-background-color;
+ border:solid 1px @hovered-border-color;
}
.claro .dijitCalendarMonthContainer th {
text-align:center;
padding-bottom:4px;
vertical-align:middle;
}
.claro .dijitCalendarMonthLabel {
- color: @textColor;
+ color: @text-color;
font-size: 1.091em;
padding: 0px 4px;
}
@@ -109,17 +109,17 @@
.claro .dijitCalendarDayLabelTemplate {
padding-bottom:0em;
text-align:center;
- border-bottom:1px solid @borderColor;
+ border-bottom:1px solid @border-color;
font-size:0.909em;
padding:0 3px 2px;
}
.claro .dijitCalendarDateTemplate {
text-align:center;
- background-color:@calendarCurrentMonthBackgroundColor;
+ background-color:@calendar-currentmonth-background-color;
background-image:url("images/calendarContainerImages.png");
background-position:0px 0px;
background-repeat:repeat-x;
- border-bottom: 1px solid @minorBorderColor;
+ border-bottom: 1px solid @minor-border-color;
padding-top:0px;
font-size:0.909em;
font-family: Arial;
@@ -132,23 +132,23 @@
}
.claro .dijitCalendarPreviousMonth,
.claro .dijitCalendarNextMonth {
- background-color: @calendarAdjacentMonthBackgroundColor;
+ background-color: @calendar-adjacentmonth-background-color;
background-image:none;
- border-bottom:solid 1px @minorBorderColor; /* todo: redundant with above .dijitCalendarDateTemplate rule */
+ border-bottom:solid 1px @minor-border-color; /* todo: redundant with above .dijitCalendarDateTemplate rule */
}
.claro .dijitCalendarDateTemplate .dijitCalendarDateLabel {
text-decoration:none;
display:block;
padding:3px 5px 3px 4px;
- border:solid 1px @calendarCurrentMonthBackgroundColor; /* intentionally matches background-color, no visible border until hover/selection */
+ border:solid 1px @calendar-currentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */
background-color:rgba(171,212,251,0); /* transparent causes black-flash animation problem on webkit */
-webkit-transition-property:background-color, border;
-webkit-transition-duration:.35s;
}
.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel,
.claro .dijitCalendarNextMonth .dijitCalendarDateLabel{
- color: @calendarAdjacentMonthTextColor;
- border-color: @calendarAdjacentMonthBackgroundColor; /* intentionally matches background-color, no visible border until hover/selection */
+ color: @calendar-adjacentmonth-text-color;
+ border-color: @calendar-adjacentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */
}
.claro .dijitCalendarYearContainer {
@@ -175,36 +175,36 @@
}
.claro .dijitCalendarSelectedYear {
font-size:1.091em;
- color:@selectedTextColor;
+ color:@selected-text-color;
}
/* End Normal Calendar Style */
/* Hovered Calendar Style */
.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel{
- background-color:@hoveredBackgroundColor;
- border:solid 1px @hoveredBorderColor;
- color:@hoveredTextColor;
+ background-color:@hovered-background-color;
+ border:solid 1px @hovered-border-color;
+ color:@hovered-text-color;
-webkit-transition-duration:.2s;
}
.claro .dijitCalendarNextYearHover,
.claro .dijitCalendarPreviousYearHover {
- color:@hoveredTextColor;
- border:solid 1px @calendarButtonHoveredBorderColor;
+ color:@hovered-text-color;
+ border:solid 1px @calendar-button-hovered-border-color;
padding: 0px 5px 0px 5px; /* reduced by 1 to make room for border */
- background-color: @calendarButtonHoveredBackgroundColor;
+ background-color: @calendar-button-hovered-background-color;
}
/* End Hovered Calendar Style */
/* Active Calendar Style */
.claro .dijitCalendarNextYearActive,
.claro .dijitCalendarPreviousYearActive {
- border: solid 1px @calendarButtonPressedBorderColor;
+ border: solid 1px @calendar-button-pressed-border-color;
padding: 0px 5px 0px 5px; /* reduced by 1 to make room for border */
- background-color:@calendarButtonPressedBackgroundColor;
+ background-color:@calendar-button-pressed-background-color;
}
.claro .dijitCalendarActiveDate .dijitCalendarDateLabel {
background-image:url("images/calendarContainerImages.png");
background-position:0px -300px;
- background-color: @calendarDatePressedBackgroundColor;
- border:solid 1px @calendarDatePressedBorderColor;
+ background-color: @calendar-date-pressed-background-color;
+ border:solid 1px @calendar-date-pressed-border-color;
-webkit-transition-duration:.1s;
}
.dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel {
@@ -213,9 +213,9 @@
/* End Active Calendar Style */
/* Selected Calendar Style */
.claro .dijitCalendarSelectedDate .dijitCalendarDateLabel {
- color:@selectedTextColor;
- background-color: @calendarDateSelectedBackgroundColor;
- border-color: @calendarDateSelectedBorderColor;
+ color:@selected-text-color;
+ background-color: @calendar-date-selected-background-color;
+ border-color: @calendar-date-selected-border-color;
}
/* End Selected Calendar Style */
/* Disabled Calendar Style*/
@@ -226,7 +226,7 @@
background-color: transparent;
border-width: 0px;
padding: 4px 6px 4px 5px;
- color: @disabledTextColor;
+ color: @disabled-text-color;
}
/* End Disabled Calendar Style */
@@ -244,32 +244,32 @@
background-color: transparent;
background-image: none;
padding: 0px 3px 0px 2px;
- border:solid 1px @borderColor;
+ border:solid 1px @border-color;
box-shadow:0px 0px 0px rgba(0,0,0,0);
-webkit-box-shadow:0 0 0 rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px rgba(0,0,0,0);
}
.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode {
- background-color: @calendarButtonHoveredBackgroundColor;
- border:solid 1px @calendarButtonHoveredBorderColor;
+ background-color: @calendar-button-hovered-background-color;
+ border:solid 1px @calendar-button-hovered-border-color;
}
/* Styling for month drop down list */
.claro .dijitCalendarMonthMenu {
- border-color: @popupBorderColor;
- background-color: @menuBackgroundColor;
+ border-color: @popup-border-color;
+ background-color: @menu-background-color;
text-align:center;
background-image: none;
}
.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
- border-top: solid 1px @menuBackgroundColor; /* intentionally invisible until hover */
- border-bottom: solid 1px @menuBackgroundColor;
+ border-top: solid 1px @menu-background-color; /* intentionally invisible until hover */
+ border-bottom: solid 1px @menu-background-color;
padding: 2px 0px;
}
.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover {
- background-color: @hoveredBackgroundColor;
- border-color: @hoveredBorderColor;
+ background-color: @hovered-background-color;
+ border-color: @hovered-border-color;
border-width:1px 0px;
background-image: url("images/commonHighlight.png");
background-repeat:repeat-x;
View
10 themes/claro/ColorPalette.less
@@ -25,8 +25,8 @@
.claro .dijitColorPalette {
outline: 1px solid #769dc0; // TODO: Mailed Jason. It's strange to have an outline rather than border, is this intentional?
- border: 1px solid @borderColor;
- background:@colorPaletteBackgroundColor;
+ border: 1px solid @border-color;
+ background:@colorpalette-background-color;
-moz-border-radius: 0px;
}
@@ -35,12 +35,12 @@
/* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
* displays border around a color swatch
* overrides border color in dijit.css */
- border: 1px solid @minorBorderColor;
+ border: 1px solid @minor-border-color;
}
.claro .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg {
- border: 1px solid @swatchHoveredBorderColor;
+ border: 1px solid @swatch-hovered-border-color;
}
.claro .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg,
.claro .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg {
- border: 2px solid @swatchSelectedBorderColor;
+ border: 2px solid @swatch-selected-border-color;
}
View
18 themes/claro/Common.less
@@ -16,12 +16,12 @@
/* The highlight is shown in the ComboBox menu. TODO: move to form/Common.less */
.claro .dijitComboBoxHighlightMatch {
- background-color: @matchedTextBackgroundColor;
+ background-color: @select-matchedtext-background-color;
}
.claro .dijitFocusedLabel {
/* for checkboxes or radio buttons, hatch border around the corresponding label, to indicate focus */
- outline: 1px dotted @focusOutlineColor;
+ outline: 1px dotted @focus-outline-color;
}
.claro .dijitContentPaneLoading {
@@ -39,15 +39,15 @@
/* Drag and Drop */
.claro .dojoDndItemBefore,
.claro .dojoDndItemAfter{
- border-top: 1px solid @dndDropSeparatorColor;
+ border-top: 1px solid @dnd-dropseparator-color;
}
.claro .dojoDndItemOver {
cursor:pointer;
}
.claro table.dojoDndAvatar {
- border: 1px solid @borderColor;
+ border: 1px solid @border-color;
border-collapse: collapse;
- background-color: @dndAvatarBackgroundColor;
+ background-color: @dnd-avatar-background-color;
-webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, .25);
}
.claro .dojoDndAvatarHeader td {
@@ -63,18 +63,18 @@
padding: 5px;
}
.claro.dojoDndMove .dojoDndAvatarHeader {
- background-color: @dndAvatarHeaderBackgroundColor;
+ background-color: @dnd-avatar-header-background-color;
background-position:2px -103px;
}
.claro.dojoDndCopy .dojoDndAvatarHeader {
- background-color: @dndAvatarHeaderBackgroundColor;
+ background-color: @dnd-avatar-header-background-color;
background-position:2px -68px;
}
.claro.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader {
- background-color: @dndAvatarCanDropHeaderBackgroundColor;
+ background-color: @dnd-avatar-candrop-header-background-color;
background-position:2px -33px;
}
.claro.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader {
- background-color: @dndAvatarCanDropHeaderBackgroundColor;
+ background-color: @dnd-avatar-candrop-header-background-color;
background-position:2px 2px;
}
View
20 themes/claro/Dialog.less
@@ -32,15 +32,15 @@
@import "variables";
.claro .dijitDialog {
- border: 1px solid @popupBorderColor;
+ border: 1px solid @popup-border-color;
box-shadow:0px 1px 5px rgba(0,0,0,0.25);
-webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.25);
}
.claro .dijitDialogPaneContent {
- background: @paneBackgroundColor repeat-x top left;
- border-top: 1px solid @popupBorderColor;
+ background: @pane-background-color repeat-x top left;
+ border-top: 1px solid @popup-border-color;
padding:10px 8px;
position: relative;
}
@@ -55,10 +55,10 @@
.claro .dijitDialogPaneActionBar {
/* gray bar at bottom of dialog with OK/Cancel buttons */
- background-color: @barBackgroundColor;
+ background-color: @bar-background-color;
padding: 3px 5px 2px 7px;
text-align: right;
- border-top: 1px solid @minorBorderColor;
+ border-top: 1px solid @minor-border-color;
margin: 10px -8px -10px;
}
.claro .dijitDialogPaneActionBar .dijitButton {
@@ -67,9 +67,9 @@
.claro .dijitDialogTitleBar {
/* outer container for the titlebar of the dialog */
- border: 1px solid @dialogTitleBarBorderColor;
+ border: 1px solid @dialog-titlebar-border-color;
border-top:none;
- background-color: @dialogTitleBarBackgroundColor;
+ background-color: @dialog-titlebar-background-color;
background-image: url("images/titlebar.png");
background-repeat:repeat-x;
padding: 5px 7px 4px 7px;
@@ -123,11 +123,11 @@
.claro .dijitTooltipContainer {
/* the part with the text */
- background-color:@popupBackgroundColor;
+ background-color:@popup-background-color;
background-image:url("images/tooltipGradient.png");
background-repeat:repeat-x;
background-position:bottom;
- border:1px solid @popupBorderColor;
+ border:1px solid @popup-border-color;
padding:6px 8px;
border-radius: 4px;
-webkit-border-radius: 4px;
@@ -205,5 +205,5 @@
}
.claro .dijitDialogUnderlay {
- background: @dialogUnderlayColor;
+ background: @dialog-underlay-color;
}
View
16 themes/claro/Editor.less
@@ -21,13 +21,13 @@
padding:3px 3px 1px 10px;
}
.claro .dijitEditorIFrame {
- background-color: @textboxBackgroundColor;
+ background-color: @textbox-background-color;
}
.claro .dijitEditor {
- border: 1px solid @borderColor;
+ border: 1px solid @border-color;
}
.claro .dijitEditor .dijitEditorIFrameContainer{
- background-color: @textboxBackgroundColor;
+ background-color: @textbox-background-color;
background-image: url('form/images/textBox_back.png');
background-repeat:repeat-x;
}
@@ -36,24 +36,24 @@
}
.claro .dijitEditorHover .dijitEditorIFrameContainer,
.claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame{
- background-color: @textboxHoveredBackgroundColor;
+ background-color: @textbox-hovered-background-color;
}
.claro .dijitEditorFocused .dijitEditorIFrameContainer,
.claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame{
/* TODO: contradicts rule above, which background-color do you want? */
- background-color: @textboxFocusedBackgroundColor;
+ background-color: @textbox-focused-background-color;
}
/* Disabled */
.claro .dijitEditorDisabled {
- border: 1px solid @disabledBorderColor;
- color: @disabledTextColor;
+ border: 1px solid @disabled-border-color;
+ color: @disabled-text-color;
}
.claro .dijitDisabled .dijitEditorIFrame,
.claro .dijitDisabled .dijitEditorIFrameContainer,
.claro .dijitDisabled .dijitEditorIFrameContainer .dijitEditorIFrame {
- background-color: @textboxDisabledBackgroundColor;
+ background-color: @textbox-disabled-background-color;
background-image: none;
}
View
4 themes/claro/InlineEditBox.less
@@ -16,8 +16,8 @@
}
.claro .dijitInlineEditBoxDisplayModeHover {
- background-color: @textboxHoveredBackgroundColor;
- border: solid 1px @hoveredBorderColor;
+ background-color: @textbox-hovered-background-color;
+ border: solid 1px @hovered-border-color;
}
.dj_ie6 .claro .dijitInlineEditBoxDisplayMode {
View
36 themes/claro/Menu.less
@@ -33,10 +33,10 @@ There are three areas of styling for the Menu:
@import "variables";
.claro .dijitMenuBar {
- border: 1px solid @borderColor;
+ border: 1px solid @border-color;
margin: 0px;
padding: 0px;
- background-color: @barBackgroundColor;
+ background-color: @bar-background-color;
background-image: url("images/commonHighlight.png");
background-position:0px 0px;
background-repeat:repeat-x;
@@ -46,8 +46,8 @@ There are three areas of styling for the Menu:
}
.claro .dijitMenu {
background-repeat:repeat-y;
- background-color:@menuBackgroundColor;
- border: 1px solid @popupBorderColor;
+ background-color:@menu-background-color;
+ border: 1px solid @popup-border-color;
/* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
margin: -1px 0;
@@ -58,7 +58,7 @@ There are three areas of styling for the Menu:
.claro .dijitMenuBar .dijitMenuItem {
padding: 6px 10px 7px;
background-position:0px 100px;
- color:@unselectedTextColor;
+ color:@unselected-text-color;
margin:-1px;
}
.claro .dijitMenuItem {
@@ -79,10 +79,10 @@ There are three areas of styling for the Menu:
/* hover over a MenuBarItem */
.claro .dijitMenuPassive .dijitMenuItemHover,
.claro .dijitMenuPassive .dijitMenuItemSelected {
- background-color: @hoveredBackgroundColor;
- border:solid 1px @hoveredBorderColor;
+ background-color: @hovered-background-color;
+ border:solid 1px @hovered-border-color;
background-position:0px 0px;
- color:@textColor;
+ color:@text-color;
padding: 5px 9px 6px;
}
.claro .dijitMenuPassive .dijitMenuItemActive{
@@ -96,11 +96,11 @@ There are three areas of styling for the Menu:
/* MenuBarItem that has been selected and menu drops down from it */
.claro .dijitMenuActive .dijitMenuItemHover,
.claro .dijitMenuActive .dijitMenuItemSelected {
- border:solid 1px @hoveredBorderColor;
+ border:solid 1px @hovered-border-color;
padding: 5px 9px 6px;
- background-color: @hoveredBackgroundColor;
+ background-color: @hovered-background-color;
background-position:0px 0px;
- color:@hoveredTextColor;
+ color:@hovered-text-color;
}
.dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
@@ -111,7 +111,7 @@ There are three areas of styling for the Menu:
margin-top: -3px;
}
.claro .dijitMenuActive .dijitMenuItemActive{
- background-color: @pressedBackgroundColor;
+ background-color: @pressed-background-color;
background-position:0px -177px;
}
.claro .dijitMenuItemActive {
@@ -138,7 +138,7 @@ There are three areas of styling for the Menu:
.claro .dijitMenuSeparatorTop {
height: auto;
margin-top:1px; /* prevents spacing above/below separator */
- border-bottom: 1px solid @borderColor
+ border-bottom: 1px solid @border-color
}
.claro .dijitMenuSeparatorBottom{
height: auto;
@@ -172,16 +172,16 @@ There are three areas of styling for the Menu:
text-indent:6px;
border-width:1px 0px 1px 0px;
border-style:solid;
- border-color: @selectDropDownItemBackgroundColor;
+ border-color: @select-dropdownitem-background-color;
}
.claro .dijitComboBoxMenu .dijitMenuItemSelected {
- color:@selectedTextColor;
- border-color:@hoveredBorderColor;
- background-color:@hoveredBackgroundColor;
+ color:@selected-text-color;
+ border-color:@hovered-border-color;
+ background-color:@hovered-background-color;
}
.claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
background-position:0px -177px;
- background-color: @selectDropDownHoveredItemBackgroundColor; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
+ background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
}
.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
font-style: italic;
View
12 themes/claro/ProgressBar.less
@@ -32,25 +32,25 @@
}
.claro .dijitProgressBarEmpty {
/* outer container and background of the bar that's not finished yet*/
- background: @progressBarEmptyBackgroundColor url("images/progressBarEmpty.png") repeat-none left;
- border-color: @progressBarBorderColor;
+ background: @progressbar-empty-background-color url("images/progressBarEmpty.png") repeat-none left;
+ border-color: @progressbar-border-color;
}
.claro .dijitProgressBarTile {
/* inner container for finished portion when in 'tile' (image) mode */
- background: @progressBarFullBackgroundColor url("images/progressBarFull.png") repeat-x top;
+ background: @progressbar-full-background-color url("images/progressBarFull.png") repeat-x top;
}
.dj_ie6 .claro .dijitProgressBarTile {
background-image: none;
}
.claro .dijitProgressBarFull {
- border-right:1px solid @progressBarBorderColor;
+ border-right:1px solid @progressbar-border-color;
}
.claro .dijitProgressBarLabel {
/* Set to a color that contrasts with both the "Empty" and "Full" parts. */
- color: @progressBarTextColor;
+ color: @progressbar-text-color;
}
.claro .dijitProgressBarIndeterminate .dijitProgressBarTile {
/* use an animated gif for the progress bar in 'indeterminate' mode;
background-color won't appear unless user has turned off background images */
- background: @barBackgroundColor url("images/progressBarAnim.gif") repeat-x top;
+ background: @bar-background-color url("images/progressBarAnim.gif") repeat-x top;
}
View
24 themes/claro/TimePicker.less
@@ -29,7 +29,7 @@
-webkit-border-radius: 0;
}
.claro .dijitTimePicker{
- border:1px @borderColor solid;
+ border:1px @border-color solid;
border-top:none;
border-bottom:none;
background-color:#fff; /* TODO: useless? Appears to be overridden by settings on individual elements */
@@ -39,8 +39,8 @@
background-image: url("images/commonHighlight.png");
background-position:0px -1px;
background-repeat:repeat-x;
- border-top:solid 1px @borderColor;
- border-bottom:solid 1px @borderColor;
+ border-top:solid 1px @border-color;
+ border-bottom:solid 1px @border-color;
margin-right:-1px;
margin-left:-1px;
margin-top:-1px;
@@ -51,25 +51,25 @@
}
.claro .dijitTimePickerTick {
/* minor value */
- color:@timePickerMinorValueTextColor;
- background-color:@timePickerMinorValueBackgroundColor;
+ color:@timepicker-minorvalue-text-color;
+ background-color:@timepicker-minorvalue-background-color;
font-size:0.818em;
}
.claro .dijitTimePickerMarker {
/* major value - 1:00, 2:00, times on the hour */
- background-color: @timePickerMajorValueBackgroundColor;
+ background-color: @timepicker-majorvalue-background-color;
font-size: 1em;
white-space: nowrap;
}
.claro .dijitTimePickerTickHover,
.claro .dijitTimePickerMarkerHover,
.claro .dijitTimePickerMarkerSelected,
.claro .dijitTimePickerTickSelected {
- background-color: @timePickerHoveredValueBackgroundColor;
- border:solid 1px @borderColor;
+ background-color: @timepicker-value-hovered-background-color;
+ border:solid 1px @border-color;
margin-left:-7px;
margin-right:-7px;
- color:@timePickerHoveredTextColor;
+ color:@timepicker-value-hovered-text-color;
}
.claro .dijitTimePickerMarkerSelected,
.claro .dijitTimePickerTickSelected {
@@ -95,8 +95,8 @@
.claro .dijitTimePicker .dijitButtonNode {
border-left:none;
border-right:none;
- border-color:@borderColor;
- background-color: @unselectedBackgroundColor;
+ border-color:@border-color;
+ background-color: @unselected-background-color;
background-image: url("images/commonHighlight.png");
background-position:0px -1px;
background-repeat:repeat-x;
@@ -116,7 +116,7 @@
/* hover */
.claro .dijitTimePicker .dijitUpArrowHover,
.claro .dijitTimePicker .dijitDownArrowHover {
- background-color: @timePickerArrowHoveredBackgroundColor;
+ background-color: @timepicker-arrow-hovered-background-color;
}
.claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner {
background-position:-175px 45%;
View
18 themes/claro/TitlePane.less
@@ -21,23 +21,23 @@
@import "variables";
.claro .dijitTitlePaneTitle {
- background-color: @unselectedBackgroundColor; // TODO: Mailed Jason, shouldn't this toggle to @selectedBackgroundColor when pane opened?
+ background-color: @unselected-background-color; // TODO: Mailed Jason, shouldn't this toggle to @selected-background-color when pane opened?
background-image: url("images/titlebar.png");
background-repeat:repeat-x;
- border:1px solid @borderColor;
+ border:1px solid @border-color;
padding: 0px 7px 3px 7px;
min-height:17px;
}
.dj_ie6 .claro .dijitTitlePaneTitle {
background-image: none;
}
.claro .dijitTitlePaneTitleHover {
- background-color: @hoveredBackgroundColor;
- border-color: @hoveredBorderColor;
+ background-color: @hovered-background-color;
+ border-color: @hovered-border-color;
}
.claro .dijitTitlePaneTitleActive {
- background-color: @pressedBackgroundColor;
- border-color: @pressedBorderColor;
+ background-color: @pressed-background-color;
+ border-color: @pressed-border-color;
background-position:0px -136px;
}
.claro .dijitTitlePaneTitleFocus {
@@ -57,11 +57,11 @@
background-position: -14px 0px;
}
.claro .dijitTitlePaneFocused .dijitTitlePaneTextNode {
- color:@textColor; /* TODO: do we need this? we usually don't change text color on focus */
+ color:@text-color; /* TODO: do we need this? we usually don't change text color on focus */
}
.claro .dijitTitlePaneContentOuter {
- background: @paneBackgroundColor;
- border:1px solid @borderColor;
+ background: @pane-background-color;
+ border:1px solid @border-color;
border-top:none;
}
.claro .dijitTitlePaneContentInner {
View
26 themes/claro/Toolbar.less
@@ -21,8 +21,8 @@
@import "variables";
.claro .dijitToolbar {
- border-bottom: 1px solid @borderColor;
- background-color: @barBackgroundColor;
+ border-bottom: 1px solid @border-color;
+ background-color: @bar-background-color;
background-image: url("images/commonHighlight.png");
background-position:0px 0px;
background-repeat:repeat-x;
@@ -86,25 +86,25 @@
.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
background-position:0 0;
border-width:1px;
- background-color: @hoveredBackgroundColor;
+ background-color: @hovered-background-color;
padding: 1px;
}
.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode,
.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
background-position:0 0;
- background-color: @toolbarComboButtonHoveredUnhoveredSectionBackgroundColor;
+ background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color;
}
.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover,
.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover {
- background-color: @hoveredBackgroundColor;
+ background-color: @hovered-background-color;
}
/* active status */
.claro .dijitToolbar .dijitButtonActive .dijitButtonNode,
.claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
.claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
border-width: 1px;
- background-color:@pressedBackgroundColor;
+ background-color:@pressed-background-color;
background-position:0px -177px;
padding: 1px;
}
@@ -115,15 +115,15 @@
}
.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode,
.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
- background-color: @toolbarComboButtonHoveredUnhoveredSectionBackgroundColor;
+ background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color;
background-position:0px -177px;
padding: 2px;
}
.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive {
- background-color: @pressedBackgroundColor;
+ background-color: @pressed-background-color;
}
.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive {
- background-color: @pressedBackgroundColor;
+ background-color: @pressed-background-color;
}
/* Avoid double border between button and arrow */
@@ -141,8 +141,8 @@
border-width: 1px;
border-style: solid;
background-image: none;
- border-color: @selectedBorderColor;
- background-color: @toolbarCheckedButtonBackgroundColor;
+ border-color: @selected-border-color;
+ background-color: @toolbar-button-checked-background-color;
padding: 1px;
}
@@ -158,8 +158,8 @@
/* Toolbar inside of disabled Editor */
.claro .dijitDisabled .dijitToolbar {
background:none;
- background-color:@disabledBackgroundColor;
- border-bottom: 1px solid @disabledBorderColor;
+ background-color:@disabled-background-color;
+ border-bottom: 1px solid @disabled-border-color;
}
.claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner {
View
22 themes/claro/Tree.less
@@ -50,27 +50,27 @@
.claro .dijitTreeRowSelected {
background-repeat:repeat-x;
- background-color:@selectedBackgroundColor;
+ background-color:@selected-background-color;
padding: 3px 0px 1px;
margin: 0px;
- border:solid 1px #cfe5fa; // TODO. Sent Jason mail asking if this can be marked @selectedBorderColor.
- color:@selectedTextColor;
+ border:solid 1px #cfe5fa; // TODO. Sent Jason mail asking if this can be marked @selected-border-color.
+ color:@selected-text-color;
}
.claro .dijitTreeRowHover {
- background-color:@hoveredBackgroundColor;
+ background-color:@hovered-background-color;
padding: 3px 0px 1px;
margin: 0px;
- border:solid 1px @hoveredBorderColor;
- color:@hoveredTextColor;
+ border:solid 1px @hovered-border-color;
+ color:@hovered-text-color;
-webkit-transition-duration:.25s ;
}
.claro .dijitTreeRowActive {
- background-color:@pressedBackgroundColor;
+ background-color:@pressed-background-color;
background-position:0px -177px;
padding: 3px 0px 1px;
margin-left: 0px;
- border:solid 1px @pressedBorderColor;
- color:@selectedTextColor;
+ border:solid 1px @pressed-border-color;
+ color:@selected-text-color;
}
.dj_ie6 .claro .dijitTreeRowActive {
background-image: none;
@@ -118,8 +118,8 @@
border-top: none;
}
.claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent {
- border-top: 2px solid @dndDropSeparatorColor; // TODO: normal separator is just 1px, why is this 2px?
+ border-top: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px?
}
.claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent {
- border-bottom: 2px solid @dndDropSeparatorColor; // TODO: normal separator is just 1px, why is this 2px?
+ border-bottom: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px?
}
View
10 themes/claro/document.less
@@ -6,7 +6,7 @@
.claro {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .688em;
- color: @documentTextColor;
+ color: @document-text-color;
}
/* Headings */
@@ -34,12 +34,12 @@
/* pre and code */
.claro pre, .claro code {
font-family:inherit;
- background-color: @documentShadedBackgroundColor;
- border: 1px solid @documentBorderColor;
+ background-color: @document-shadedsection-background-color;
+ border: 1px solid @document-border-color;
}
/* tables */
.claro table.dojoTabular thead, .claro table.dojoTabular tfoot {
- background-color: @documentShadedBackgroundColor;
- border: 1px solid @documentBorderColor;
+ background-color: @document-shadedsection-background-color;
+ border: 1px solid @document-border-color;
}
View
16 themes/claro/form/Button.less
@@ -39,12 +39,12 @@
.claro .dijitComboButton .dijitButtonNode,
.claro .dijitToggleButton .dijitButtonNode {
/* rules for the dijit.form.*Button widgets (see also ComboButton section below) */
- border: 1px solid @buttonBorderColor;
+ border: 1px solid @button-border-color;
padding:2px 4px 4px 4px;
background-image: url("images/button.png");
background-position: center top;
background-repeat: repeat-x;
- background-color: @buttonBackgroundColor;
+ background-color: @button-background-color;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@@ -104,8 +104,8 @@
.claro .dijitComboButton .dijitButtonNodeHover,
.claro .dijitComboButton .dijitDownArrowButtonHover,
.claro .dijitToggleButtonHover .dijitButtonNode {
- background-color: @buttonHoveredBackgroundColor;
- color:@textColor;
+ background-color: @button-hovered-background-color;
+ color:@text-color;
-webkit-transition-duration:.2s;
}
@@ -114,7 +114,7 @@
.claro .dijitDropDownButtonActive .dijitButtonNode,
.claro .dijitComboButtonActive .dijitButtonNode,
.claro .dijitToggleButtonActive .dijitButtonNode {
- background-color: @buttonPressedBackgroundColor;
+ background-color: @button-pressed-background-color;
box-shadow:0px 0px 0px rgba(0,0,0,0);
-webkit-box-shadow:0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px rgba(0,0,0,0);
@@ -135,9 +135,9 @@
.claro .dijitComboButtonDisabled .dijitButtonNode,
.claro .dijitToggleButtonDisabled .dijitButtonNode {
background-position:0px -149px;
- background-color: @disabledBackgroundColor;
- border: solid 1px @disabledBorderColor;
- color: @disabledTextColor;
+ background-color: @disabled-background-color;
+ border: solid 1px @disabled-border-color;
+ color: @disabled-text-color;
box-shadow:0px 0px 0px rgba(0,0,0,0);
-webkit-box-shadow:0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px rgba(0,0,0,0);
View
38 themes/claro/form/Common.less
@@ -7,10 +7,10 @@
/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */
.claro .dijitTextBoxError .dijitValidationContainer {
- background-color: @validationIconBackgroundColor;
+ background-color: @erroricon-background-color;
background-image: url('images/error.png');
background-position: top center;
- border: solid @validationIconBackgroundColor 0px;
+ border: solid @erroricon-background-color 0px;
border-left-width: 1px;
width: 9px;
}
@@ -31,66 +31,66 @@
.claro .dijitTextBox,
.claro .dijitTextBox .dijitButtonNode {
/* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
- border-color: @borderColor;
+ border-color: @border-color;
-webkit-transition-property:background-color, border;
-webkit-transition-duration:.35s;
}
.claro .dijitTextBox {
- background-color: @textboxBackgroundColor;
+ background-color: @textbox-background-color;
}
/* hover */
.claro .dijitTextBoxHover,
.claro .dijitTextBoxHover .dijitButtonNode {
- border-color: @hoveredBorderColor;
+ border-color: @hovered-border-color;
-webkit-transition-duration:.25s;
}
.claro .dijitTextBoxHover {
- background-color: @textboxHoveredBackgroundColor;
+ background-color: @textbox-hovered-background-color;
background-image: url('images/textBox_back.png');
background-repeat: repeat-x;
}
/* error state */
.claro .dijitTextBoxError,
.claro .dijitTextBoxError .dijitButtonNode {
- border-color: @errorBorderColor;
+ border-color: @error-border-color;
}
.claro .dijitTextBoxError,
.claro .dijitTextBoxError .dijitInputContainer {
- background-color: @textboxErrorBackgroundColor;
+ background-color: @textbox-error-background-color;
}
/* focused state */
.claro .dijitTextBoxFocused,
.claro .dijitTextBoxFocused .dijitButtonNode {
- border-color:@focusedBorderColor;
+ border-color:@focused-border-color;
-webkit-transition-duration:.1s;
}
.claro .dijitTextBoxFocused {
- background-color: @textboxFocusedBackgroundColor;
+ background-color: @textbox-focused-background-color;
background-image: url('images/textBox_back.png');
background-repeat: repeat-x;
}
.claro .dijitTextBoxFocused .dijitInputContainer {
- background: @textboxFocusedBackgroundColor;
+ background: @textbox-focused-background-color;
}
.claro .dijitTextBoxErrorFocused,
.claro .dijitTextBoxErrorFocused .dijitButtonNode {
- border-color: @errorFocusedBorderColor;
+ border-color: @error-focused-border-color;
}
/* disabled state */
.claro .dijitTextBoxDisabled,
.claro .dijitTextBoxDisabled .dijitButtonNode {
- border-color: @disabledBorderColor;
+ border-color: @disabled-border-color;
}
.claro .dijitTextBoxDisabled,
.claro .dijitTextBoxDisabled .dijitInputContainer {
- background-color: @textboxDisabledBackgroundColor;
+ background-color: @textbox-disabled-background-color;
background-image: none;
- color: @disabledTextColor;
+ color: @disabled-text-color;
}
/*========================= for special widgets =========================*/
@@ -104,7 +104,7 @@
margin: 0px;
width:16px;
height:100%;
- border: 1px solid @arrowButtonInnerBorderColor;
+ border: 1px solid @arrowbutton-inner-border-color;
}
.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
@@ -124,14 +124,14 @@
}
.claro .dijitComboBox .dijitButtonNode {
- background-color: @arrowButtonBackgroundColor;
+ background-color: @arrowbutton-background-color;
background-image: url("images/formHighlight.png");
background-repeat:repeat-x;
}
/* hover state */
.claro .dijitComboBoxHover .dijitButtonNode {
- background-color:@arrowbuttonHoveredBackgroundColor;
+ background-color:@arrowbutton-hovered-background-color;
}
.claro .dijitComboBoxHover .dijitArrowButtonInner {
background-position:-70px 53%;
@@ -153,7 +153,7 @@
/* specific selector set to override background-position setting from Button.js
* (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */
background-position:0px 50%;
- background-color:@disabledBackgroundColor;
+ background-color:@disabled-background-color;
}
/*========================= hacks for browsers =========================*/
View
12 themes/claro/form/NumberSpinner.less
@@ -36,7 +36,7 @@
/* button */
.claro .dijitSpinner .dijitArrowButton {
width:auto;
- background-color: @arrowButtonBackgroundColor;
+ background-color: @arrowbutton-background-color;
background-image: url("images/formHighlight.png");
background-position:0px 0px;
background-repeat:repeat-x;
@@ -51,7 +51,7 @@
}
/* up & down button icons */
.claro .dijitSpinner .dijitArrowButtonInner {
- border:solid 1px @arrowButtonInnerBorderColor;
+ border:solid 1px @arrowbutton-inner-border-color;
border-bottom-width: 0; /* 2 top borders = 1 top+bottom border in ComboBox */
background-image: url("images/commonFormArrows.png");
background-repeat: no-repeat;
@@ -87,13 +87,13 @@
.claro .dijitUpArrowButtonActive,
.claro .dijitDownArrowButtonActive {
- background-color:@arrowButtonPressedBackgroundColor;
+ background-color:@arrowbutton-pressed-background-color;
}
.claro .dijitSpinner .dijitUpArrowButtonHover,
.claro .dijitSpinner .dijitDownArrowButtonHover,
.claro .dijitSpinnerFocused .dijitArrowButton {
- background-color: @arrowbuttonHoveredBackgroundColor;
+ background-color: @arrowbutton-hovered-background-color;
}
.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner {
@@ -104,7 +104,7 @@
}
.claro .dijitSpinnerFocused {
- background-color: @textboxFocusedBackgroundColor;
+ background-color: @textbox-focused-background-color;
background-image: none;
}
@@ -132,7 +132,7 @@
/* disabled */
.claro .dijitSpinnerDisabled .dijitArrowButtonInner {
- background-color: @disabledBackgroundColor;
+ background-color: @disabled-background-color;
}
.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner {
background-position:-104px;
View
32 themes/claro/form/Select.less
@@ -25,8 +25,8 @@
/* normal status */
.claro .dijitSelect {
- border: 1px solid @borderColor;
- background-color: @textboxBackgroundColor;
+ border: 1px solid @border-color;
+ background-color: @textbox-background-color;
border-collapse: separate;
}
.dj_ie6 .claro .dijitSelect,
@@ -35,15 +35,15 @@
}
.claro .dijitSelect .dijitButtonContents {
- border: 0px solid @borderColor;
+ border: 0px solid @border-color;
border-right-width: 1px;
}
.claro .dijitSelect .dijitArrowButton {
padding: 0;
- border: 1px solid @arrowButtonInnerBorderColor;
+ border: 1px solid @arrowbutton-inner-border-color;
border-top:none;
- background-color: @arrowButtonBackgroundColor;
+ background-color: @arrowbutton-background-color;
background-image: url("images/formHighlight.png");
background-repeat:repeat-x;
}
@@ -58,29 +58,29 @@
/* hover status */
.claro .dijitSelectHover {
- border: 1px solid @hoveredBorderColor;
- background-color: @textboxHoveredBackgroundColor;
+ border: 1px solid @hovered-border-color;
+ background-color: @textbox-hovered-background-color;
background-image: url('images/textBox_back.png');
background-repeat: repeat-x;
}
.claro .dijitSelectHover .dijitButtonContents {
- border-color:@hoveredBorderColor;
+ border-color:@hovered-border-color;
}
.claro .dijitSelectHover .dijitArrowButton {
- background-color:@arrowbuttonHoveredBackgroundColor;
+ background-color:@arrowbutton-hovered-background-color;
}
.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
background-position:-70px 70%;
}
/* focused status */
.claro .dijitSelectFocused {
- border: 1px solid @focusedBorderColor;
+ border: 1px solid @focused-border-color;
}
.claro .dijitSelectFocused .dijitButtonContents {
- border-color:@focusedBorderColor;
+ border-color:@focused-border-color;
}
.claro .dijitSelectFocused .dijitArrowButton {
background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior.
@@ -95,13 +95,13 @@
/* disable status */
.claro .dijitSelectDisabled {
- border: 1px solid @disabledBorderColor;
- background-color: @disabledBackgroundColor;
+ border: 1px solid @disabled-border-color;
+ background-color: @disabled-background-color;
background-image: none;
- color: @disabledTextColor;
+ color: @disabled-text-color;
}
.claro .dijitSelectDisabled .dijitArrowButton {
- background-color: @disabledBackgroundColor;
+ background-color: @disabled-background-color;
}
.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
background-position:0px 70%
@@ -121,5 +121,5 @@
}
.claro .dijitSelectMenu .dijitMenuSeparatorTop {
- border-bottom:1px solid @focusedBorderColor;
+ border-bottom:1px solid @focused-border-color;
}
View
90 themes/claro/form/Slider.less
@@ -57,14 +57,14 @@
outline: 1px;
}
.claro .dijitSliderFocused .dijitSliderBar {
- border-color: @focusedBorderColor;
+ border-color: @focused-border-color;
}
.claro .dijitSliderHover .dijitSliderBar {
- border-color: @hoveredBorderColor;
+ border-color: @hovered-border-color;
}
.claro .dijitSliderDisabled .dijitSliderBar {
background-image: none;
- border-color: @disabledBorderColor;
+ border-color: @disabled-border-color;
}
/* Horizontal Slider */
@@ -77,55 +77,55 @@
background-image: url("images/sliderHorizontal.png");
background-repeat:repeat-x;
background-position:0 -20px;
- border-color: @borderColor;
- background-color: @sliderFullBarBackgroundColor;
+ border-color: @border-color;
+ background-color: @slider-fullbar-background-color;
}
.claro .dijitSlider .dijitSliderRemainingBarH,
.claro .dijitSlider .dijitSliderRightBumper{
background-image: url("images/sliderHorizontal.png");
background-repeat:repeat-x;
background-position:0 -11px;
- border-color: @borderColor;
- background-color: @sliderRemainingBarBackgroundColor;
+ border-color: @border-color;
+ background-color: @slider-remainingbar-background-color;
}
.claro .dijitSliderRightBumper {
- border-right: solid 1px @borderColor;
+ border-right: solid 1px @border-color;
}
.claro .dijitSliderLeftBumper {
- border-left: solid 1px @borderColor;
+ border-left: solid 1px @border-color;
}
.claro .dijitSliderHover .dijitSliderProgressBarH,
.claro .dijitSliderHover .dijitSliderLeftBumper{
background-position:0 -20px;
- background-color: @sliderHoveredFullBarBackgroundColor;
- border-color: @hoveredBorderColor;
+ background-color: @slider-hovered-fullbar-background-color;
+ border-color: @hovered-border-color;
}
.claro .dijitSliderHover .dijitSliderRemainingBarH,
.claro .dijitSliderHover .dijitSliderRightBumper{
background-position:0 0px;
- background-color: @sliderHoveredRemainingBarBackgroundColor;
- border-color: @hoveredBorderColor;
+ background-color: @slider-hovered-remainingbar-background-color;
+ border-color: @hovered-border-color;
}
.claro .dijitSliderFocused .dijitSliderProgressBarH,
.claro .dijitSliderFocused .dijitSliderLeftBumper{
background-position:0 -30px;
- background-color: @sliderFocusedFullBarBackgroundColor;
- border-color: @focusedBorderColor;
+ background-color: @slider-focused-fullbar-background-color;
+ border-color: @focused-border-color;
}
.claro .dijitSliderFocused .dijitSliderRemainingBarH,
.claro .dijitSliderFocused .dijitSliderRightBumper{
background-position:0 -9px;
- background-color: @sliderFocusedRemainingBarBackgroundColor;
- border-color: @focusedBorderColor;
+ background-color: @slider-focused-remainingbar-background-color;
+ border-color: @focused-border-color;
}
.claro .dijitSliderDisabled .dijitSliderProgressBarH,
.claro .dijitSliderDisabled .dijitSliderLeftBumper{
- background-color: @disabledBorderColor; /* left side of slider, fill matches border */
+ background-color: @disabled-border-color; /* left side of slider, fill matches border */
background-image:none;
}
.claro .dijitSliderDisabled .dijitSliderRemainingBarH,
.claro .dijitSliderDisabled .dijitSliderRightBumper{
- background-color: @disabledBackgroundColor;
+ background-color: @disabled-background-color;
}
/* Vertical Slider */
@@ -138,50 +138,50 @@
background-image: url("images/sliderVertical.png");
background-repeat:repeat-y;
background-position:-36px 0;
- border-color: @borderColor;
- background-color: @sliderFullBarBackgroundColor;
+ border-color: @border-color;
+ background-color: @slider-fullbar-background-color;
}
.claro .dijitSlider .dijitSliderRemainingBarV,
.claro .dijitSlider .dijitSliderTopBumper{
background-image: url("images/sliderVertical.png");
background-repeat:repeat-y;
background-position:-3px 0;
- border-color: @borderColor;
- background-color: @sliderRemainingBarBackgroundColor;
+ border-color: @border-color;
+ background-color: @slider-remainingbar-background-color;
}
.claro .dijitSliderBottomBumper {
- border-bottom: solid 1px @borderColor;
+ border-bottom: solid 1px @border-color;
}
.claro .dijitSliderTopBumper {
- border-top: solid 1px @borderColor;
+ border-top: solid 1px @border-color;
}
.claro .dijitSliderHover .dijitSliderProgressBarV,
.claro .dijitSliderHover .dijitSliderBottomBumper{
background-position:-36px 0;
- background-color: @sliderHoveredFullBarBackgroundColor;
+ background-color: @slider-hovered-fullbar-background-color;
}
.claro .dijitSliderHover .dijitSliderRemainingBarV,
.claro .dijitSliderHover .dijitSliderTopBumper{
background-position:0 0;
- background-color: @sliderHoveredRemainingBarBackgroundColor;
+ background-color: @slider-hovered-remainingbar-background-color;
}
.claro .dijitSliderFocused .dijitSliderProgressBarV,
.claro .dijitSliderFocused .dijitSliderBottomBumper{
background-position:-56px 0;
- background-color: @sliderFocusedFullBarBackgroundColor;
+ background-color: @slider-focused-fullbar-background-color;
}
.claro .dijitSliderFocused .dijitSliderRemainingBarV,
.claro .dijitSliderFocused .dijitSliderTopBumper{
background-position:-18px 0;
- background-color: @sliderFocusedRemainingBarBackgroundColor;
+ background-color: @slider-focused-remainingbar-background-color;
}
.claro .dijitSliderDisabled .dijitSliderProgressBarV,
.claro .dijitSliderDisabled .dijitSliderBottomBumper{
- background-color: @disabledBorderColor; /* bottom side of slider, fill matches border */
+ background-color: @disabled-border-color; /* bottom side of slider, fill matches border */
}
.claro .dijitSliderDisabled .dijitSliderRemainingBarV,
.claro .dijitSliderDisabled .dijitSliderTopBumper{
- background-color: @disabledBackgroundColor;
+ background-color: @disabled-background-color;
}
@@ -250,10 +250,10 @@
.claro .dijitSliderIncrementIconV {
background-image: url('images/commonFormArrows.png');
background-repeat:no-repeat;
- background-color: @arrowButtonBackgroundColor;
+ background-color: @arrowbutton-background-color;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
- border: solid 1px @borderColor;
+ border: solid 1px @border-color;
font-size: 1px;
}
.claro .dijitSliderDecrementIconH,
@@ -275,8 +275,8 @@
.claro .dijitSliderHover .dijitSliderDecrementIconV,
.claro .dijitSliderHover .dijitSliderIncrementIconV {
/* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */
- border: solid 1px @hoveredBorderColor;
- background-color: @sliderHoveredButtonBackgroundColor;
+ border: solid 1px @hovered-border-color;
+ background-color: @slider-hoveredButton-background-color;
}
.claro .dijitSliderDecrementIconH {
@@ -311,44 +311,44 @@
.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover,
.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover,
.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover {
- background-color: @sliderButtonHoveredBackgroundColor;
+ background-color: @slider-button-hovered-background-color;
}
.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive,
.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive,
.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive,
.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive {
- background-color: @sliderButtonPressedBackgroundColor;
- border-color:@pressedBorderColor;
+ background-color: @slider-button-pressed-background-color;
+ border-color:@pressed-border-color;
}
.claro .dijitSliderButtonInner {
visibility: hidden;
}
.claro .dijitSliderDisabled .dijitSliderBar{
- border-color: @disabledBorderColor;
+ border-color: @disabled-border-color;
}
.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * {
- border-color: @disabledBorderColor;
- color: @disabledTextColor;
+ border-color: @disabled-border-color;
+ color: @disabled-text-color;
}
.claro .dijitSliderReadOnly .dijitSliderDecrementIconH,
.claro .dijitSliderDisabled .dijitSliderDecrementIconH {
background-position:-321px 50%;
- background-color:@disabledBackgroundColor;
+ background-color:@disabled-background-color;
}
.claro .dijitSliderReadOnly .dijitSliderIncrementIconH,
.claro .dijitSliderDisabled .dijitSliderIncrementIconH {
background-position:-215px 50%;
- background-color:@disabledBackgroundColor;
+ background-color:@disabled-background-color;
}
.claro .dijitSliderReadOnly .dijitSliderDecrementIconV,
.claro .dijitSliderDisabled .dijitSliderDecrementIconV {
background-position:-3px 49%;
- background-color:@disabledBackgroundColor;
+ background-color:@disabled-background-color;
}
.claro .dijitSliderReadOnly .dijitSliderIncrementIconV,
.claro .dijitSliderDisabled .dijitSliderIncrementIconV {
background-position:-107px 49%;
- background-color:@disabledBackgroundColor;
+ background-color:@disabled-background-color;
}
.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH,
View
34 themes/claro/layout/AccordionContainer.less
@@ -34,8 +34,8 @@
border:none;
}
.claro .dijitAccordionInnerContainer {
- background-color: @unselectedBackgroundColor; /* gray, for closed pane */
- border:solid 1px @borderColor;
+ background-color: @unselected-background-color; /* gray, for closed pane */
+ border:solid 1px @border-color;
margin-bottom:1px;
-webkit-transition-property:background-color,border;
-webkit-transition-duration:.3s;
@@ -48,10 +48,10 @@
background-repeat:repeat-x;
padding: 5px 7px 2px 7px;
min-height:17px;
- color:@unselectedTextColor;
+ color:@unselected-text-color;
}
.claro .dijitAccordionTitleHover {
- color:@hoveredTextColor;
+ color:@hovered-text-color;
}
.dj_ie6 .claro .dijitAccordionTitle {
background-image: none;
@@ -60,8 +60,8 @@
/* this extends the blue trim styling of the title bar to wrapping around the node.
* done by setting margin
*/
- background-color:@paneBackgroundColor;
- border:1px solid @selectedBorderColor;
+ background-color:@pane-background-color;
+ border:1px solid @selected-border-color;
margin: 0px 2px 2px;
}
@@ -73,45 +73,45 @@
/* Active state for closed pane */
.claro .dijitAccordionInnerContainerActive {
- border:1px solid @selectedBorderColor;
- background-color:@pressedBackgroundColor;
+ border:1px solid @selected-border-color;
+ background-color:@pressed-background-color;
-webkit-transition-duration:.1s;
}
.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle {
background-position:0px -136px;
- color:@selectedTextColor;
+ color:@selected-text-color;
}
/* Open (a.k.a. selected) pane */
.claro .dijitAccordionInnerContainerSelected {
- border-color:@selectedBorderColor;
- background-color: @selectedBackgroundColor;
+ border-color:@selected-border-color;
+ background-color: @selected-background-color;
}
.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
- color:@selectedTextColor;
+ color:@selected-text-color;
background-position: 0 0; /* avoid effect when clicking the title of the open pane */
}
/* Hovering open or closed pane */
.claro .dijitAccordionInnerContainerHover dijitAccordionTitle {
/* both open and closed */
- color:@hoveredTextColor;
+ color:@hovered-text-color;
}
.claro .dijitAccordionInnerContainerHover,
.claro .dijitAccordionInnerContainerSelectedActive {
/* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */
- border:1px solid @hoveredBorderColor;
- background-color:@hoveredBackgroundColor;
+ border:1px solid @hovered-border-color;
+ background-color:@hovered-background-color;
-webkit-transition-duration:.2s;
}
.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper,
.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
- background-color:@paneBackgroundColor;
- border:1px solid @hoveredBorderColor !important;
+ background-color:@pane-background-color;
+ border:1px solid @hovered-border-color !important;
-webkit-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25);
-moz-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25);
View
14 themes/claro/layout/BorderContainer.less
@@ -42,7 +42,7 @@ Splitters and gutters:
/* By default put borders on all children of BorderContainer,
* to give illusion of borders on the splitters themselves.
*/
- border: 1px @borderColor solid;
+ border: 1px @border-color solid;
}
.claro .dijitBorderContainer-dijitTabContainerTop,
@@ -72,7 +72,7 @@ Splitters and gutters:
}
.claro .dijitSplitterH .dijitSplitterThumb {
- background:@borderColor none;
+ background:@border-color none;
height:1px;
top:2px;
width:19px;
@@ -87,7 +87,7 @@ Splitters and gutters:
}
.claro .dijitSplitterV .dijitSplitterThumb {
- background:@borderColor none;
+ background:@border-color none;
height:19px;
left:2px;
width:1px;
@@ -102,7 +102,7 @@ Splitters and gutters:
.claro .dijitSplitterHHover .dijitSplitterThumb {
- background:@hoveredBorderColor none;
+ background:@hovered-border-color none;
}
.claro .dijitSplitterVHover {
@@ -111,18 +111,18 @@ Splitters and gutters:
}
.claro .dijitSplitterVHover .dijitSplitterThumb {
- background:@hoveredBorderColor none;
+ background:@hovered-border-color none;
}
.dj_ie6 .dijitSplitterHHover,
.dj_ie6 .claro .dijitSplitterVHover {
- background-color: @splitterHoveredBackgroundColor;
+ background-color: @splitter-hovered-background-color;
background-image:none;
}
/* active splitter */
.claro .dijitSplitterHActive,
.claro .dijitSplitterVActive {
font-size: 1px;
- background-color:@splitterDraggedBackgroundColor;
+ background-color:@splitter-dragged-background-color;
}
View
4 themes/claro/layout/ContentPane.less
@@ -33,11 +33,11 @@
.claro .dijitTabContainerBottom-dijitContentPane,
.claro .dijitTabContainerRight-dijitContentPane,
.claro .dijitAccordionContainer-dijitContentPane {
- background-color: @paneBackgroundColor;
+ background-color: @pane-background-color;
padding: 8px;
}
.claro .dijitSplitContainer-dijitContentPane,
.claro .dijitBorderContainer-dijitContentPane {
- background-color: @paneBackgroundColor;
+ background-color: @pane-background-color;
padding: 8px;
}
View
56 themes/claro/layout/TabContainer.less
@@ -51,15 +51,15 @@
/*** some common features ***/
.claro .dijitTabPaneWrapper {
- background:@paneBackgroundColor;
+ background:@pane-background-color;
}
.claro .dijitTabPaneWrapper,
.claro .dijitTabContainerTop-tabs,
.claro .dijitTabContainerBottom-tabs,
.claro .dijitTabContainerLeft-tabs,
.claro .dijitTabContainerRight-tabs {
/* todo: add common class name for this div */
- border-color: @borderColor;
+ border-color: @border-color;
}
.claro .dijitTabCloseButton {
background: url("images/tabClose.png") no-repeat;
@@ -79,38 +79,38 @@
display: none;
}
.claro .dijitTabInnerDiv {
- background-color:@unselectedBackgroundColor;
+ background-color:@unselected-background-color;
-webkit-transition-property:background-color, border;
-webkit-transition-duration:.35s;
- color:@unselectedTextColor;
+ color:@unselected-text-color;
}
.claro .dijitTabHover .dijitTabInnerDiv {
- background-color:@hoveredBackgroundColor;
+ background-color:@hovered-background-color;
-webkit-transition-duration:.25s;
- color:@hoveredTextColor;
+ color:@hovered-text-color;
}
.claro .dijitTabActive .dijitTabInnerDiv {
- background-color:@pressedBackgroundColor;
- color:@selectedTextColor;
+ background-color:@pressed-background-color;
+ color:@selected-text-color;
-webkit-transition-duration:.1s;
}
.claro .dijitTabChecked .dijitTabInnerDiv {
- background-color:#abd6ff; // TODO: Mailed Jason. Currently @hoveredcolor, should it be @selectedColor instead??
- color:@selectedTextColor;
+ background-color:#abd6ff; // TODO: Mailed Jason. Currently @hovered-color, should it be @selected-Color instead??
+ color:@selected-text-color;
}
.claro .dijitTabContent {
- border: 1px solid @borderColor;
+ border: 1px solid @border-color;
}
.claro .dijitTabHover .dijitTabContent {
- border-color: @hoveredBorderColor;
+ border-color: @hovered-border-color;
}
.claro .dijitTabActive .dijitTabContent {
- border-color: @pressedBorderColor;
+ border-color: @pressed-border-color;
}
.claro .dijitTabChecked .dijitTabContent {
- color:@selectedTextColor; // todo: redundant with .claro .dijitTabChecked .dijitTabInnerDiv above?
- border-color: @borderColor; // don't use @selectedBorderColor because need to match border of TabContainer
+ color:@selected-text-color; // todo: redundant with .claro .dijitTabChecked .dijitTabInnerDiv above?
+ border-color: @border-color; // don't use @selected-border-color because need to match border of TabContainer
}
.claro .tabStripButton .dijitTabInnerDiv {
@@ -317,8 +317,8 @@
/************ left/right scroll buttons + menu button ************/
.claro .tabStripButton {
- background-color:@buttonBackgroundColor;
- border: 1px solid @borderColor;
+ background-color:@button-background-color;
+ border: 1px solid @border-color;
}
.claro .dijitTabListContainer-top .tabStripButton {
padding: 4px 3px;
@@ -334,10 +334,10 @@
background-position:bottom;
}
.claro .tabStripButtonHover {
- background-color:@hoveredBackgroundColor;
+ background-color:@hovered-background-color;
}
.claro .tabStripButtonActive {
- background-color:@pressedBackgroundColor;
+ background-color:@pressed-background-color;
}
.claro .dijitTabStripIcon {
height:15px;
@@ -356,8 +356,8 @@
/*disabled styles for tab strip buttons*/
.claro .dijitTabListContainer-top .tabStripButtonDisabled,
.claro .dijitTabListContainer-bottom .tabStripButtonDisabled {
- background-color:@disabledTabBackgroundColor;
- border:1px solid @borderColor; /* to match border of TabContainer itself */
+ background-color:@tab-disabled-background-color;
+ border:1px solid @border-color; /* to match border of TabContainer itself */
}
.claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon {
background-position:-175px 50%;
@@ -373,7 +373,7 @@
height: auto;
}
.claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
- border-bottom:solid 1px @borderColor;
+ border-bottom:solid 1px @border-color;
padding:1px 2px 4px;
margin-top:-2px;
}
@@ -397,11 +397,11 @@
-moz-box-shadow: none;
}
.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
- background-color: @nestedTabHoveredBackgroundColor;
+ background-color: @nestedtab-hovered-background-color;
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius:2px;
- border:solid 1px @nestedTabHoveredBorderColor;
+ border:solid 1px @nestedtab-hovered-border-color;
padding: 3px;
webkit-transition-duration:.2s;
}
@@ -412,19 +412,19 @@
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius:2px;
- border:solid 1px @nestedTabSelectedBorderColor;
+ border:solid 1px @nestedtab-selected-border-color;
padding: 3px;
- background: @nestedTabSelectedBackgroundColor url("images/tabNested.png") repeat-x;
+ background: @nestedtab-selected-background-color url("images/tabNested.png") repeat-x;
-webkit-transition-duration:.1s;
}
.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent {
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius:2px;
padding: 3px;
- border:solid 1px @selectedBorderColor;
+ border:solid 1px @selected-border-color;
background-position: 0px 105px;
- background-color:@selectedBackgroundColor;
+ background-color:@selected-background-color;
}
.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
text-decoration: none;
View
4 themes/claro/layout/TabContainer_rtl.less
@@ -76,6 +76,6 @@
/* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing
* "Closable" tab, where the other tabs disappear
*/
- border-left: 1px solid @paneBackgroundColor;
- border-right: 1px solid @paneBackgroundColor;
+ border-left: 1px solid @pane-background-color;
+ border-right: 1px solid @pane-background-color;
}
View
192 themes/claro/variables.less
@@ -1,144 +1,144 @@
// ======= Colors =======
// General
-@textColor: #000000; // Text color for enabled widgets
+@text-color: #000000; // Text color for enabled widgets
-@borderColor: #b5bcc7; // Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer
-@popupBorderColor: #769dc0; // Border for Dialog, Menu, Tooltip. Must also update tooltip.png (the arrow image file) to match
-@minorBorderColor: #d3d3d3; // Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar
+@border-color: #b5bcc7; // Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer
+@popup-border-color: #769dc0; // Border for Dialog, Menu, Tooltip. Must also update tooltip.png (the arrow image file) to match
+@minor-border-color: #d3d3d3; // Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar
-@disabledBorderColor: #d3d3d3; // Border color for disabled/readonly Button, TextBox etc. widgets
-@disabledBackgroundColor: #efefef; // Disabled button, textbox, etc.
-@disabledTextColor: #818181; // Text color for disabled/readonly widgets
+@disabled-border-color: #d3d3d3; // Border color for disabled/readonly Button, TextBox etc. widgets
+@disabled-background-color: #efefef;// Disabled button, textbox, etc.
+@disabled-text-color: #818181; // Text color for disabled/readonly widgets
-@unselectedBackgroundColor: #efefef;// Background color for unselected/unopened tab button, accordion pane, TitlePane, Menu items
-@unselectedTextColor: #4a4a4a; // Text color for unselected/unopened tab button, accordion pane, TitlePane, Menu items
+@unselected-background-color: #efefef;// Background color for unselected/unopened tab button, accordion pane, TitlePane, Menu items
+@unselected-text-color: #4a4a4a; // Text color for unselected/unopened tab button, accordion pane, TitlePane, Menu items
-@hoveredBorderColor: #769dc0; // Hover of textbox, tab label, BorderContainer splitter, Calendar, etc.
-@hoveredBackgroundColor: #abd6ff; // 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
-@hoveredTextColor: @textColor; // Used for title of select Accordion pane, label of select tab, hovered Menu item, etc.
+@hovered-border-color: #769dc0; // Hover of textbox, tab label, BorderContainer splitter, Calendar, etc.
+@hovered-background-color: #abd6ff; // 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
+@hovered-text-color: @text-color; // Used for title of select Accordion pane, label of select tab, hovered Menu item, etc.
-@pressedBorderColor: #769dc0; // During click on Calendar day, Slider up/down buttons, tab button, etc.
-@pressedBackgroundColor: #7dbefa; // Background color while clicking on Accordion/TitlePane title bar, tab button, Calendar day, Toolbar button, Tree row.
+@pressed-border-color: #769dc0; // During click on Calendar day, Slider up/down buttons, tab button, etc.
+@pressed-background-color: #7dbefa; // Background color while clicking on Accordion/TitlePane title bar, tab button, Calendar day, Toolbar button, Tree row.
-@selectedBorderColor: #769dc0; // Selected AccordionPane, tab of nested TabContainer (but plain TabContainer is special)
-@selectedBackgroundColor: #cfe5fa; // Selected Accordion pane, nested tab label, Tree row
-@selectedTextColor: @textColor; // title of selected Accordion pane, label of selected tab, hovered Menu item, etc.
+@selected-border-color: #769dc0; // Selected AccordionPane, tab of nested TabContainer (but plain TabContainer is special)
+@selected-background-color: #cfe5fa;// Selected Accordion pane, nested tab label, Tree row
+@selected-text-color: @text-color; // title of selected Accordion pane, label of selected tab, hovered Menu item, etc.
-@barBackgroundColor: #efefef; // MenuBar, Toolbar, action bar at bottom of dialog
-@paneBackgroundColor: #fff; // Background color of Accordion panes, Dialogs, etc.
-@popupBackgroundColor: #fff; // Background for Dialog. TODO: currently use for ColorPalette, maybe should change.
+@bar-background-color: #efefef; // MenuBar, Toolbar, action bar at bottom of dialog
+@pane-background-color: #fff; // Background color of Accordion panes, Dialogs, etc.
+@popup-background-color: #fff; // Background for Dialog. TODO: currently use for ColorPalette, maybe should change.
// Buttons
-@buttonBorderColor: #769dc0; // Border for (stand-alone) buttons in normal, hovered, or active state
-@buttonBackgroundColor: #e9f4fe; // Background color for (unhovered) buttons
-@buttonHoveredBackgroundColor: #abd6ff; // Background color for hovered buttons
-@buttonPressedBackgroundColor: #abd6ff; // Background color for active buttons
+@button-border-color: #769dc0; // Border for (stand-alone) buttons in normal, hovered, or active state
+@button-background-color: #e9f4fe; // Background color for (unhovered) buttons
+@button-hovered-background-color: #abd6ff; // Background color for hovered buttons
+@button-pressed-background-color: #abd6ff; // Background color for active buttons
// Input widgets
-@focusedBorderColor: #769dc0; // Focused textbox
-@errorBorderColor: #d46464; // Border for textbox in error state
-@errorFocusedBorderColor: #ce4f4f; // Border of textbox in error state, and focused
-@validationIconBackgroundColor: #d46464; // Background color for exclamation point validation icon (for TextBox in error state)
-@textboxBackgroundColor: #fff; // Default background color of TextBox based widgets
-@textboxHoveredBackgroundColor: #e9f4fe; // Background color when hovering a unfocused TextBox, Select, Editor, or other input widget
-@textboxFocusedBackgroundColor: @textboxBackgroundColor;
-@textboxErrorBackgroundColor: @textboxBackgroundColor;
-@textboxDisabledBackgroundColor: @disabledBackgroundColor;
+@focused-border-color: #769dc0; // Focused textbox, editor, select, etc.
+@error-border-color: #d46464; // Border for textbox in error state
+@error-focused-border-color: #ce4f4f; // Border of textbox in error state, and focused
+@erroricon-background-color: #d46464; // Background color for exclamation point validation icon (for TextBox in error state)
+@textbox-background-color: #fff; // Default background color of TextBox based widgets
+@textbox-hovered-background-color: #e9f4fe; // Background color when hovering a unfocused TextBox, Select, Editor, or other input widget
+@textbox-focused-background-color: @textbox-background-color;
+@textbox-error-background-color: @textbox-background-color;
+@textbox-disabled-background-color: @disabled-background-color;
// CheckBox, RadioButton
-@focusOutlineColor: #4a4a4a; // Color for artificial focus outline around labels of checkboxes
+@focus-outline-color: #4a4a4a; // Color for artificial focus outline around labels of checkboxes
// TabContainer
-@nestedTabHoveredBackgroundColor: @textboxHoveredBackgroundColor;
-@nestedTabHoveredBorderColor: #cfe5fa;
-@nestedTabSelectedBorderColor: @selectedBorderColor;
-@nestedTabSelectedBackgroundColor: #abd6ff;
-@disabledTabBackgroundColor: #d3d3d3; // For disabled tabs of a TabContainer (not officially supported)
+@nestedtab-hovered-background-color: @textbox-hovered-background-color;
+@nestedtab-hovered-border-color: #cfe5fa;
+@nestedtab-selected-border-color: @selected-border-color;
+@nestedtab-selected-background-color: #abd6ff;
+@tab-disabled-background-color: #d3d3d3; // For disabled tabs of a TabContainer (not officially supported)
// Arrow buttons (stand alone, or inside ComboBox / ComboButton / Spinner / etc.
-@arrowButtonBackgroundColor: #efefef;
-@arrowbuttonHoveredBackgroundColor: #abd6ff;// Color of arrow when hovering ComboBox. But hovering Spinner doesn't change arrow color (TODO)
-@arrowButtonPressedBackgroundColor: #abd6ff;
-@arrowButtonInnerBorderColor: #fff; // Typically the arrows have an inner white border (a.k.a. padding) and then an outer black-ish border
+@arrowbutton-background-color: #efefef;
+@arrowbutton-hovered-background-color: #abd6ff; // Color of arrow when hovering ComboBox. But hovering Spinner doesn't change arrow color (TODO)
+@arrowbutton-pressed-background-color: #abd6ff;
+@arrowbutton-inner-border-color: #fff; // Typically the arrows have an inner white border (a.k.a. padding) and then an outer black-ish border
// Slider
// Note: any changes here require corresponding changes in form/images/sliderThumbs.png
-@sliderFullBarBackgroundColor: #cfe5fa; // Background color for part of slider bar before (to the left or below) the handle
-@sliderRemainingBarBackgroundColor: #fff; // Background color for part of slider bar after (to the right or above) the handle
-@sliderHoveredFullBarBackgroundColor: #abd6ff; // Background color for part of bar of hovered slider before (to the left or below) the handle
-@sliderHoveredRemainingBarBackgroundColor: #fff;// Background color for part of bar of hovered slider after (to the right or above) the handle