diff options
Diffstat (limited to 'lib/dijit/themes/claro/form/Common.css')
-rw-r--r-- | lib/dijit/themes/claro/form/Common.css | 91 |
1 files changed, 62 insertions, 29 deletions
diff --git a/lib/dijit/themes/claro/form/Common.css b/lib/dijit/themes/claro/form/Common.css index ce108c1ae..b7b91c134 100644 --- a/lib/dijit/themes/claro/form/Common.css +++ b/lib/dijit/themes/claro/form/Common.css @@ -4,15 +4,17 @@ .claro .dijitTextBox, .claro .dijitInputInner { color: #000000; } -.claro .dijitTextBoxError .dijitValidationContainer { +.claro .dijitValidationTextBoxError .dijitValidationContainer { background-color: #d46464; background-image: url("../form/images/error.png"); background-position: top center; border: solid #d46464 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 */ @@ -26,13 +28,16 @@ .claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder { padding: 2px; } -.claro .dijitTextBox .dijitInputField { +.claro .dijitSelect .dijitInputField, .claro .dijitTextBox .dijitInputField { padding: 1px 2px; } .dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner { padding: 1px; } -.claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode { +.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 */ border-color: #b5bcc7; @@ -43,11 +48,14 @@ -moz-transition-duration: 0.35s; transition-duration: 0.35s; } -.claro .dijitTextBox { +.claro .dijitSelect, .claro .dijitTextBox { background-color: #ffffff; } /* hover */ -.claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode { +.claro .dijitSelectHover, +.claro .dijitSelectHover .dijitButtonContents, +.claro .dijitTextBoxHover, +.claro .dijitTextBoxHover .dijitButtonNode { border-color: #759dc0; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; @@ -55,18 +63,23 @@ } .claro .dijitTextBoxHover { background-color: #e5f2fe; - background-image: url("../form/images/textBox_back.png"); - background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); } /* error state */ -.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode { +.claro .dijitSelectError, +.claro .dijitSelectError .dijitButtonContents, +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitButtonNode { border-color: #d46464; } -.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer { - background-color: #ffffff; -} /* focused state */ -.claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode { +.claro .dijitSelectFocused, +.claro .dijitSelectFocused .dijitButtonContents, +.claro .dijitTextBoxFocused, +.claro .dijitTextBoxFocused .dijitButtonNode { border-color: #759dc0; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; @@ -74,27 +87,35 @@ } .claro .dijitTextBoxFocused { background-color: #ffffff; - background-image: url("../form/images/textBox_back.png"); - background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); } .claro .dijitTextBoxFocused .dijitInputContainer { background: #ffffff; } -.claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode { +.claro .dijitSelectErrorFocused, +.claro .dijitSelectErrorFocused .dijitButtonContents, +.claro .dijitTextBoxErrorFocused, +.claro .dijitTextBoxErrorFocused .dijitButtonNode { border-color: #ce5050; } /* disabled state */ -.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode { +.claro .dijitSelectDisabled, +.claro .dijitSelectDisabled .dijitButtonContents, +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitButtonNode { border-color: #d3d3d3; } -.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { +.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { background-color: #efefef; background-image: none; } -.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner { +.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner { color: #818181; } -.dj_webkit .claro .dijitTextBoxDisabled input { +.dj_webkit .claro .dijitDisabled input { /* because WebKit lightens disabled input/textarea no matter what color you specify */ color: #757575; @@ -106,12 +127,14 @@ } /*========================= for special widgets =========================*/ /* Input boxes with an arrow (for a drop down) */ -.claro .dijitComboBox .dijitArrowButtonInner { +.claro .dijitSelect .dijitArrowButtonInner, .claro .dijitComboBox .dijitArrowButtonInner { background-image: url("../form/images/commonFormArrows.png"); background-position: -35px 53%; background-repeat: no-repeat; margin: 0; width: 16px; +} +.claro .dijitComboBox .dijitArrowButtonInner { border: 1px solid #ffffff; } .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { @@ -122,13 +145,18 @@ } /* 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 { +.claro .dijitSelectLabel, .claro .dijitTextBox .dijitInputInner, .claro .dijitValidationTextBox .dijitValidationContainer { padding: 1px 0; } .claro .dijitComboBox .dijitButtonNode { background-color: #efefef; - background-image: url("../form/images/formHighlight.png"); + background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; } /* Arrow "hover" effect: * The arrow button should change color whenever the mouse is in a position such that clicking it @@ -144,9 +172,18 @@ /* Arrow Button change when drop down is open */ .claro .dijitComboBox .dijitHasDropDownOpen { background-color: #7dbdfa; - background-position: 0 -177px; + background-image: url("../images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 1px; } +.dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen { + padding: 1px 0; +} .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { background-position: -70px 53%; border: 0 none; @@ -166,10 +203,6 @@ 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; } |