diff options
Diffstat (limited to 'lib/dijit/themes/claro/form/Common.less')
-rw-r--r-- | lib/dijit/themes/claro/form/Common.less | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/lib/dijit/themes/claro/form/Common.less b/lib/dijit/themes/claro/form/Common.less new file mode 100644 index 000000000..729867a67 --- /dev/null +++ b/lib/dijit/themes/claro/form/Common.less @@ -0,0 +1,194 @@ +/* claro/form/Common.css */ + +/*========================= common css =========================*/ + +@import "../variables"; + +/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ + +.claro .dijitTextBoxError .dijitValidationContainer { + background-color: @erroricon-background-color; + background-image: url('images/error.png'); + background-position: top center; + border: solid @erroricon-background-color 0; + border-left-width: 1px; + width: 9px; +} +.claro .dijitTextBoxError .dijitValidationIcon { + width: 0; + background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */ +} + +/* Padding for the input area of TextBox based widgets, and corresponding padding for the + * down arrow button and the placeholder. placeholder is explicitly listed because + * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField + * won't affect it + */ +.claro .dijitTextArea, +.claro .dijitInputField .dijitPlaceHolder { + padding: @textbox-padding; +} +.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, + // so compensate for that too. + padding: @textbox-padding - 1px; +} + +.claro .dijitTextBox, +.claro .dijitTextBox .dijitButtonNode { + /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ + border-color: @border-color; + .transition-property(background-color, border); + .transition-duration(.35s); +} +.claro .dijitTextBox { + background-color: @textbox-background-color; +} + +/* hover */ +.claro .dijitTextBoxHover, +.claro .dijitTextBoxHover .dijitButtonNode { + border-color: @hovered-border-color; + .transition-duration(.25s); +} +.claro .dijitTextBoxHover { + 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: @error-border-color; +} +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitInputContainer { + background-color: @textbox-error-background-color; +} + +/* focused state */ +.claro .dijitTextBoxFocused, +.claro .dijitTextBoxFocused .dijitButtonNode { + border-color:@focused-border-color; + .transition-duration(.1s); +} +.claro .dijitTextBoxFocused { + background-color: @textbox-focused-background-color; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; +} +.claro .dijitTextBoxFocused .dijitInputContainer { + background: @textbox-focused-background-color; +} + +.claro .dijitTextBoxErrorFocused, +.claro .dijitTextBoxErrorFocused .dijitButtonNode { + border-color: @error-focused-border-color; +} + +/* disabled state */ +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitButtonNode { + border-color: @disabled-border-color; +} +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitInputContainer { + background-color: @textbox-disabled-background-color; + background-image: none; + color: @disabled-text-color; +} + +/*========================= for special widgets =========================*/ + +/* Input boxes with an arrow (for a drop down) */ + +.claro .dijitComboBox .dijitArrowButtonInner { + background-image: url("images/commonFormArrows.png"); + background-position:-35px 53%; + background-repeat: no-repeat; + margin: 0; + width:16px; + border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button +} + +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} + +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} + +/* Add 1px vertical padding to the <input> where user types and the validation icon, + to match the 1px border on arrow button */ +.claro .dijitTextBox .dijitInputInner, +.claro .dijitTextBox .dijitValidationContainer { + padding: 1px 0; +} + +.claro .dijitComboBox .dijitButtonNode { + background-color: @arrowbutton-background-color; + background-image: url("images/formHighlight.png"); + background-repeat:repeat-x; +} + +/* Arrow "hover" effect: + * The arrow button should change color whenever the mouse is in a position such that clicking it + * will toggle the drop down. That's either (1) anywhere over the ComboBox or (2) over the arrow + * button, depending on the openOnClick setting for the widget. + */ +.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, +.claro .dijitComboBox .dijitDownArrowButtonHover { + background-color:@arrowbutton-hovered-background-color; +} +.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, +.claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position:-70px 53%; +} + +/* 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; + padding: 1px; // Since no border on arrow button (see rule below) +} +.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + background-position:-70px 53%; + border: 0 none; +} + +/* disabled state */ +.claro div.dijitComboBoxDisabled .dijitArrowButtonInner { + /* specific selector set to override background-position setting from Button.js + * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ + background-position:0 50%; + background-color:@disabled-background-color; +} + +/*========================= hacks for browsers =========================*/ +/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */ +.dj_ff3 .claro .dijitInputField input[type="hidden"] { + display: none; + height: 0; + 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 +}
\ No newline at end of file |