1 files changed, 50 insertions, 21 deletions

diff --git a/lib/dijit/themes/claro/form/Common.less b/lib/dijit/themes/claro/form/Common.less
index 742a43ff7..3c625f46f 100644
--- a/lib/dijit/themes/claro/form/Common.less
+++ b/lib/dijit/themes/claro/form/Common.less
@@ -13,15 +13,19 @@
 	color: @text-color;
 }
 
-.claro .dijitTextBoxError .dijitValidationContainer {
+.claro .dijitValidationTextBoxError .dijitValidationContainer {
 	background-color: @erroricon-background-color;
 	background-image: url("../@{image-form-error}");
 	background-position: top center;
 	border: solid @erroricon-background-color 0;
-	border-left-width: 1px;
 	width: 9px;
 }
-.claro .dijitTextBoxError .dijitValidationIcon {
+
+.claro .dijitTextBoxError .dijitValidationContainer {
+	border-left-width: 1px;
+}
+
+.claro .dijitValidationTextBoxError .dijitValidationIcon {
 	width: 0;
 	background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */
 }
@@ -35,12 +39,15 @@
 .claro .dijitInputField .dijitPlaceHolder {
 	padding: @textbox-padding;
 }
+
+.claro .dijitSelect .dijitInputField,
 .claro .dijitTextBox .dijitInputField {
 	// Subtract 1px from top/bottom because we add 1px to other nodes, see rules below.
 	// Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right,
 	// although that varies by so compensate for that too.
 	padding: @textbox-padding - 1px  @textbox-padding;
 }
+
 .dj_gecko .claro .dijitTextBox .dijitInputInner,
 .dj_webkit .claro .dijitTextBox .dijitInputInner {
 	// Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right,
@@ -48,6 +55,8 @@
 	padding: @textbox-padding - 1px;
 }
 
+.claro .dijitSelect,
+.claro .dijitSelect .dijitButtonContents,
 .claro .dijitTextBox,
 .claro .dijitTextBox .dijitButtonNode {
 	/* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
@@ -55,70 +64,84 @@
 	.transition-property(background-color, border);
  	.transition-duration(.35s);
 }
+
+.claro .dijitSelect,
 .claro .dijitTextBox {
 	background-color: @textbox-background-color;
 }
 
 /* hover */
+.claro .dijitSelectHover,
+.claro .dijitSelectHover .dijitButtonContents,
 .claro .dijitTextBoxHover,
 .claro .dijitTextBoxHover .dijitButtonNode {
 	border-color: @hovered-border-color;
  	.transition-duration(.25s);
 }
+
 .claro .dijitTextBoxHover {
 	background-color: @textbox-hovered-background-color;
-	background-image: url("../@{image-form-textbox-background}");
-	background-repeat: repeat-x;
+	.textbox-background-image;
 }
 
 /* error state */
+.claro .dijitSelectError,
+.claro .dijitSelectError .dijitButtonContents,
 .claro .dijitTextBoxError,
 .claro .dijitTextBoxError .dijitButtonNode {
 	border-color: @error-border-color;
 }
-.claro .dijitTextBoxError,
-.claro .dijitTextBoxError .dijitInputContainer {
-	background-color: @textbox-error-background-color;
-}
 
 /* focused state */
+.claro .dijitSelectFocused,
+.claro .dijitSelectFocused .dijitButtonContents,
 .claro .dijitTextBoxFocused,
 .claro .dijitTextBoxFocused .dijitButtonNode {
 	border-color:@focused-border-color;
  	.transition-duration(.1s);
 }
+
 .claro .dijitTextBoxFocused {
 	background-color: @textbox-focused-background-color;
-	background-image: url("../@{image-form-textbox-background}");
-	background-repeat: repeat-x;
+	.textbox-background-image;
 }
 .claro .dijitTextBoxFocused .dijitInputContainer {
 	background: @textbox-focused-background-color;
 }
 
+.claro .dijitSelectErrorFocused,
+.claro .dijitSelectErrorFocused .dijitButtonContents,
 .claro .dijitTextBoxErrorFocused,
 .claro .dijitTextBoxErrorFocused .dijitButtonNode {
 	border-color: @error-focused-border-color;
 }
 
 /* disabled state */
+.claro .dijitSelectDisabled,
+.claro .dijitSelectDisabled .dijitButtonContents,
 .claro .dijitTextBoxDisabled,
 .claro .dijitTextBoxDisabled .dijitButtonNode {
 	border-color: @disabled-border-color;
 }
+
+.claro .dijitSelectDisabled,
 .claro .dijitTextBoxDisabled,
 .claro .dijitTextBoxDisabled .dijitInputContainer {
 	background-color: @textbox-disabled-background-color;
 	background-image: none;
 }
+
+.claro .dijitSelectDisabled,
 .claro .dijitTextBoxDisabled,
 .claro .dijitTextBoxDisabled .dijitInputInner {
 	color: @disabled-text-color;
 }
-.dj_webkit .claro .dijitTextBoxDisabled input {
+
+.dj_webkit .claro .dijitDisabled input {
     /* because WebKit lightens disabled input/textarea no matter what color you specify */
 	color: darken(@disabled-text-color, 5%)
 }
+
 .dj_webkit .claro textarea.dijitTextAreaDisabled {
     /* because WebKit lightens disabled input/textarea no matter what color you specify */
 	color: darken(@disabled-text-color, 40%)
@@ -128,12 +151,16 @@
 
 /* Input boxes with an arrow (for a drop down) */
 
+.claro .dijitSelect .dijitArrowButtonInner,
 .claro .dijitComboBox .dijitArrowButtonInner {
 	background-image: url("../@{image-form-common-arrows}");
 	background-position:-35px 53%;
 	background-repeat: no-repeat;
 	margin: 0;
 	width:16px;
+}
+
+.claro .dijitComboBox .dijitArrowButtonInner {
 	border: 1px solid @arrowbutton-inner-border-color;	// white gutter around the arrow button
 }
 
@@ -147,15 +174,15 @@
 
 /* Add 1px vertical padding to the <input> where user types and the validation icon,
    to match the 1px border on arrow button */
+.claro .dijitSelectLabel,
 .claro .dijitTextBox .dijitInputInner,
-.claro .dijitTextBox .dijitValidationContainer {
+.claro .dijitValidationTextBox .dijitValidationContainer {
 	padding: 1px 0;
 }
 
 .claro .dijitComboBox .dijitButtonNode {
 	background-color: @arrowbutton-background-color;
-	background-image: url("../@{image-form-highlight}");
-	background-repeat:repeat-x;
+	.standard-gradient("../");
 }
 
 /* Arrow "hover" effect:
@@ -167,6 +194,7 @@
 .claro .dijitComboBox .dijitDownArrowButtonHover {
 	background-color:@arrowbutton-hovered-background-color;
 }
+
 .claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner,
 .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {
 	background-position:-70px 53%;
@@ -175,9 +203,14 @@
 /* Arrow Button change when drop down is open */
 .claro .dijitComboBox .dijitHasDropDownOpen {	// .dijitHasDropDown is on dijitArrowButton node
 	background-color: @pressed-background-color;
-	background-position:0 -177px;
+	.active-gradient("../");
 	padding: 1px;		// Since no border on arrow button (see rule below)
 }	
+
+.dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen {
+	padding: 1px 0;
+}
+
 .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
 	background-position:-70px 53%;
 	border: 0 none;
@@ -199,14 +232,10 @@
 	width: 0;
 }
 
-/* ie6 doesn't support transparent background img */
-.dj_ie6 .claro .dijitTextBox,
-.dj_ie6 .claro .dijitComboBox .dijitButtonNode {
-	background-image: none;
-}
 .dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
 	width:18px;				// quirks mode means border-box sizing, so 18px with the border (same as 16px without border)
 }
+
 .dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner {
 	width:16px;				// when no border, then back to 16px just like content-box sizing
 }