Using CSS-style variable names, refs #12099.

kriszyp · Dec 20, 2010 · 153acd0 · 153acd0
1 parent 61f0709
commit 153acd0
Show file tree

Hide file tree

Showing 24 changed files with 391 additions and 391 deletions.
diff --git a/themes/claro/Calendar.less b/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;

diff --git a/themes/claro/ColorPalette.less b/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;
 }
diff --git a/themes/claro/Common.less b/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;
 }
diff --git a/themes/claro/Dialog.less b/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;
 }
diff --git a/themes/claro/Editor.less b/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;
 }