From 81bea17aefb26859f825b9293c7c99192874806e Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Tue, 8 Nov 2011 20:40:44 +0400 Subject: upgrade Dojo to 1.6.1 --- lib/dijit/themes/claro/form/Common.css | 227 +++++++++++++++++++-------------- 1 file changed, 129 insertions(+), 98 deletions(-) (limited to 'lib/dijit/themes/claro/form/Common.css') diff --git a/lib/dijit/themes/claro/form/Common.css b/lib/dijit/themes/claro/form/Common.css index b04061b65..ab8bb5c3b 100644 --- a/lib/dijit/themes/claro/form/Common.css +++ b/lib/dijit/themes/claro/form/Common.css @@ -1,132 +1,163 @@ - +/* claro/form/Common.css */ +/*========================= common css =========================*/ +/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ .claro .dijitTextBoxError .dijitValidationContainer { - background-color: #d46363; - background-image: url('images/error.png'); - background-position: top center; - border: solid #d46464 0px; - border-left-width: 1px; - width: 9px; + background-color: #d46464; + background-image: url('images/error.png'); + background-position: top center; + border: solid #d46464 0; + border-left-width: 1px; + width: 9px; } .claro .dijitTextBoxError .dijitValidationIcon { - width: 0px; - background-color: transparent !important; + 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: 2px; } -.claro .dijitTextBox .dijitInputContainer, -.claro .dijitTextArea, -.claro .dijitInputField .dijitPlaceHolder { - padding: 2px; +.claro .dijitTextBox .dijitInputField { + padding: 1px 2px; +} +.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner { + padding: 1px; } -.claro .dijitTextBox, -.claro .dijitTextBox .dijitButtonNode { - - border-color: #b5bcc7; - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; +.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; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.35s; + -moz-transition-duration: 0.35s; + transition-duration: 0.35s; } .claro .dijitTextBox { - background-color: #f7fcff; + background-color: #ffffff; } -.claro .dijitTextBoxHover, -.claro .dijitTextBoxHover .dijitButtonNode { - border-color: #769dc0; - -webkit-transition-duration:.25s; +/* hover */ +.claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode { + border-color: #769dc0; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; } .claro .dijitTextBoxHover { - background-color: #e9f4fe; - background-image: url('images/textBox_back.png'); - background-repeat: repeat-x; + background-color: #e9f4fe; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; } -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitButtonNode { - border-color: #d46464; +/* error state */ +.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode { + border-color: #d46464; } -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitInputContainer { - background-color: #fdf7f7; +.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer { + background-color: #ffffff; } -.claro .dijitTextBoxFocused, -.claro .dijitTextBoxFocused .dijitButtonNode { - border-color:#769dc0; - -webkit-transition-duration:.1s; +/* focused state */ +.claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode { + border-color: #769dc0; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitTextBoxFocused { - background-color: #fff; - background-image: url('images/textBox_back.png'); - background-repeat: repeat-x; + background-color: #ffffff; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; } .claro .dijitTextBoxFocused .dijitInputContainer { - background: #fff; + background: #ffffff; } -.claro .dijitTextBoxErrorFocused, -.claro .dijitTextBoxErrorFocused .dijitButtonNode { - border-color: #ce4f4f; +.claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode { + border-color: #ce4f4f; } -.claro .dijitTextBoxDisabled, -.claro .dijitTextBoxDisabled .dijitButtonNode { - border-color: #d3d3d3; +/* disabled state */ +.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode { + border-color: #d3d3d3; } -.claro .dijitTextBoxDisabled { - background-color: #efefef; - background-image: none; - color: #818181; +.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { + background-color: #efefef; + background-image: none; + color: #818181; } +/*========================= 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: 0px; - width:16px; - height:100%; - border: 1px solid #fff; + background-image: url("images/commonFormArrows.png"); + background-position: -35px 53%; + background-repeat: no-repeat; + margin: 0; + width: 16px; + border: 1px solid #ffffff; } -.claro .dijitTextBox .dijitInputField { - padding-top: 1px; - padding-bottom: 1px; +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; } -.claro .dijitTextBox .dijitInputInner { - - padding: 1px 2px 1px 0; +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; } -.claro .dijitTextBox .dijitValidationContainer { - padding: 0 0 2px 0; +/* Add 1px vertical padding to the 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: #ebeef4; - background-image: url("images/formHighlight.png"); - background-repeat:repeat-x; -} -.claro .dijitComboBoxHover .dijitButtonNode { - background-color:#abd6ff; -} -.claro .dijitComboBoxHover .dijitArrowButtonInner { - background-position:-70px 53%; -} -.claro .dijitComboBoxFocused .dijitButtonNode { - background-color:#7dbefa; - background-position:0px -177px; - padding: 1px; -} -.claro .dijitComboBoxFocused .dijitArrowButtonInner { - background-position:-70px 53%; - border: 0px none; -} + background-color: #efefef; + 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: #abd6ff; +} +.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position: -70px 53%; +} +/* Arrow Button change when drop down is open */ +.claro .dijitComboBox .dijitHasDropDownOpen { + background-color: #7dbefa; + background-position: 0 -177px; + padding: 1px; +} +.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + background-position: -70px 53%; + border: 0 none; +} +/* disabled state */ .claro div.dijitComboBoxDisabled .dijitArrowButtonInner { - - background-position:0px 50%; - background-color:#f1f1f1; + /* specific selector set to override background-position setting from Button.js + * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ + + background-position: 0 50%; + background-color: #efefef; } +/*========================= 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; + display: none; + height: 0; + width: 0; } -.dj_ie6 .claro .dijitTextBox, -.dj_ie6 .claro .dijitComboBox .dijitButtonNode { - background-image: none; +/* ie6 doesn't support transparent background img */ +.dj_ie6 .claro .dijitTextBox, .dj_ie6 .claro .dijitComboBox .dijitButtonNode { + background-image: none; } -.dj_quirks .claro .dijitComboBox .dijitArrowButtonInner { - border: 0px; +.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + width: 18px; } -.dj_quirks .claro .dijitComboBox .dijitArrowButtonContainer { - padding: 1px; +.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { + width: 16px; } -- cgit v1.2.3