From 4a88841363b664e5db9d1360d7f84597331eb8d9 Mon Sep 17 00:00:00 2001 From: Jeremy Christian Date: Thu, 4 Apr 2013 21:50:39 -0400 Subject: Add css optimization to dojo builds --- lib/dijit/themes/claro/form/Button.css | 169 +------------- lib/dijit/themes/claro/form/Button_rtl.css | 14 +- lib/dijit/themes/claro/form/Checkbox.css | 72 +----- lib/dijit/themes/claro/form/Common.css | 212 +---------------- lib/dijit/themes/claro/form/Common_rtl.css | 6 +- lib/dijit/themes/claro/form/NumberSpinner.css | 152 +----------- lib/dijit/themes/claro/form/RadioButton.css | 80 +------ lib/dijit/themes/claro/form/Select.css | 97 +------- lib/dijit/themes/claro/form/Slider.css | 324 +------------------------- lib/dijit/themes/claro/form/Slider_rtl.css | 25 +- 10 files changed, 10 insertions(+), 1141 deletions(-) (limited to 'lib/dijit/themes/claro/form') diff --git a/lib/dijit/themes/claro/form/Button.css b/lib/dijit/themes/claro/form/Button.css index f7718c105..e95bf379e 100644 --- a/lib/dijit/themes/claro/form/Button.css +++ b/lib/dijit/themes/claro/form/Button.css @@ -1,168 +1 @@ -/* Button | DropDownButton | ComboButton | ToggleButton - * - * Styling Buttons mainly includes: - * - * 1. Containers - * .dijitButton - * .dijitDropDownButton - * .dijitComboButton - * .dijitButtonNode - common button/arrow wrapper shared across all three button types - * - * 2. Button text - * .dijitButtonText - * - * 3. Arrows - only for DropDownButton and ComboButton - * There are total four directions arrows - down, left, right, up: - * .dijitArrowButtonInner - down arrow by default - * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow - * .dijitRightArrowButton .dijitArrowButtonInner - right arrow - * .dijitUpArrowButton .dijitArrowButtonInner - up arrow - * - * 4. States - Hover, Active, Disabled, e.g. - * .dijitButtonHover .dijitButtonNode - * .dijitButtonActive .dijitButtonNode - * .dijitButtonDisabled .dijitButtonNode - * - * .dijitDisabled .dijitArrowButtonInner - disabled arrow states - */ -.claro .dijitButtonNode { - /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ - - -webkit-transition-property: background-color; - -moz-transition-property: background-color; - transition-property: background-color; - -webkit-transition-duration: 0.3s; - -moz-transition-duration: 0.3s; - transition-duration: 0.3s; -} -.claro .dijitButton .dijitButtonNode, -.claro .dijitDropDownButton .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNode, -.claro .dijitToggleButton .dijitButtonNode { - /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ - - border: 1px solid #759dc0; - padding: 2px 4px 4px 4px; - color: #000000; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); - background-color: #bcd8f4; - background-image: url("images/buttonEnabled.png"); - background-repeat: repeat-x; - background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); - background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); - background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); - background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); - _background-image: none; -} -.claro .dijitComboButton .dijitArrowButton { - border-left-width: 0; - padding: 4px 2px 4px 2px; - /* TODO: still needed? */ - -} -/*arrow styles for down/up/left/right directions*/ -.claro .dijitArrowButtonInner { - width: 15px; - height: 15px; - margin: 0 auto; - background-image: url("../form/images/buttonArrows.png"); - background-repeat: no-repeat; - background-position: -51px 53%; -} -.claro .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -77px 53%; -} -.claro .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -26px 53%; -} -.claro .dijitUpArrowButton .dijitArrowButtonInner { - background-position: 0 53%; -} -.claro .dijitDisabled .dijitArrowButtonInner { - background-position: -151px 53%; -} -.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -177px 53%; -} -.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -126px 53%; -} -.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position: -100px 53%; -} -.claro .dijitButtonText { - padding: 0 0.3em; - text-align: center; -} -/* hover status */ -.claro .dijitButtonHover .dijitButtonNode, -.claro .dijitDropDownButtonHover .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNodeHover, -.claro .dijitComboButton .dijitDownArrowButtonHover, -.claro .dijitToggleButtonHover .dijitButtonNode { - background-color: #86bdf2; - color: #000000; - -webkit-transition-duration: 0.2s; - -moz-transition-duration: 0.2s; - transition-duration: 0.2s; -} -/* active, checked status */ -.claro .dijitButtonActive .dijitButtonNode, -.claro .dijitDropDownButtonActive .dijitButtonNode, -.claro .dijitComboButtonActive .dijitButtonNode, -.claro .dijitToggleButtonActive .dijitButtonNode, -.claro .dijitToggleButtonChecked .dijitButtonNode { - background-color: #86bdf2; - -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); - -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); - box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); - -webkit-transition-duration: 0.1s; - -moz-transition-duration: 0.1s; - transition-duration: 0.1s; -} -/* disabled status */ -.claro .dijitButtonDisabled, -.claro .dijitDropDownButtonDisabled, -.claro .dijitComboButtonDisabled, -.claro .dijitToggleButtonDisabled { - background-image: none; - outline: none; -} -.claro .dijitButtonDisabled .dijitButtonNode, -.claro .dijitDropDownButtonDisabled .dijitButtonNode, -.claro .dijitComboButtonDisabled .dijitButtonNode, -.claro .dijitToggleButtonDisabled .dijitButtonNode { - background-color: #efefef; - border: solid 1px #d3d3d3; - color: #818181; - -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - box-shadow: 0 0 0 rgba(0, 0, 0, 0); - background-image: url("images/buttonDisabled.png"); - background-image: -moz-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); - background-image: -webkit-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); - background-image: -o-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); - background-image: linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); - _background-image: none; -} -.claro .dijitComboButtonDisabled .dijitArrowButton { - border-left-width: 0; -} -/* for ComboButton */ -.claro table.dijitComboButton { - border-collapse: separate; - /* override dijit.css so that ComboBox rounded corners work */ - -} -.claro .dijitComboButton .dijitStretch { - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; -} -.claro .dijitComboButton .dijitArrowButton { - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; -} +.claro .dijitButtonNode {-webkit-transition-property: background-color; -moz-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s;}.claro .dijitButton .dijitButtonNode,.claro .dijitDropDownButton .dijitButtonNode,.claro .dijitComboButton .dijitButtonNode,.claro .dijitToggleButton .dijitButtonNode {border: 1px solid #759dc0; padding: 2px 4px 4px 4px; color: #000000; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); background-color: #bcd8f4; background-image: url("images/buttonEnabled.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); _background-image: none;}.claro .dijitComboButton .dijitArrowButton {border-left-width: 0; padding: 4px 2px 4px 2px;}.claro .dijitArrowButtonInner {width: 15px; height: 15px; margin: 0 auto; background-image: url("../form/images/buttonArrows.png"); background-repeat: no-repeat; background-position: -51px 53%;}.claro .dijitLeftArrowButton .dijitArrowButtonInner {background-position: -77px 53%;}.claro .dijitRightArrowButton .dijitArrowButtonInner {background-position: -26px 53%;}.claro .dijitUpArrowButton .dijitArrowButtonInner {background-position: 0 53%;}.claro .dijitDisabled .dijitArrowButtonInner {background-position: -151px 53%;}.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {background-position: -177px 53%;}.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {background-position: -126px 53%;}.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {background-position: -100px 53%;}.claro .dijitButtonText {padding: 0 0.3em; text-align: center;}.claro .dijitButtonHover .dijitButtonNode,.claro .dijitDropDownButtonHover .dijitButtonNode,.claro .dijitComboButton .dijitButtonNodeHover,.claro .dijitComboButton .dijitDownArrowButtonHover,.claro .dijitToggleButtonHover .dijitButtonNode {background-color: #86bdf2; color: #000000; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s;}.claro .dijitButtonActive .dijitButtonNode,.claro .dijitDropDownButtonActive .dijitButtonNode,.claro .dijitComboButtonActive .dijitButtonNode,.claro .dijitToggleButtonActive .dijitButtonNode,.claro .dijitToggleButtonChecked .dijitButtonNode {background-color: #86bdf2; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s;}.claro .dijitButtonDisabled,.claro .dijitDropDownButtonDisabled,.claro .dijitComboButtonDisabled,.claro .dijitToggleButtonDisabled {background-image: none; outline: none;}.claro .dijitButtonDisabled .dijitButtonNode,.claro .dijitDropDownButtonDisabled .dijitButtonNode,.claro .dijitComboButtonDisabled .dijitButtonNode,.claro .dijitToggleButtonDisabled .dijitButtonNode {background-color: #efefef; border: solid 1px #d3d3d3; color: #818181; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); background-image: url("images/buttonDisabled.png"); background-image: -moz-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); background-image: -webkit-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); background-image: -o-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); background-image: linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); _background-image: none;}.claro .dijitComboButtonDisabled .dijitArrowButton {border-left-width: 0;}.claro table.dijitComboButton {border-collapse: separate;}.claro .dijitComboButton .dijitStretch {-moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;}.claro .dijitComboButton .dijitArrowButton {-moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Button_rtl.css b/lib/dijit/themes/claro/form/Button_rtl.css index 2d5b08bff..7f22f9f1c 100644 --- a/lib/dijit/themes/claro/form/Button_rtl.css +++ b/lib/dijit/themes/claro/form/Button_rtl.css @@ -1,13 +1 @@ -/* Combo Button */ -.claro .dijitComboButtonRtl .dijitStretch { - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; -} -.claro .dijitComboButtonRtl .dijitArrowButton { - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; - padding: 3px 0 4px; - border-left-width: 1px; - border-right-width: 0; -} -/* End Combo Button */ \ No newline at end of file +.claro .dijitComboButtonRtl .dijitStretch {-moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;}.claro .dijitComboButtonRtl .dijitArrowButton {-moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; padding: 3px 0 4px; border-left-width: 1px; border-right-width: 0;} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Checkbox.css b/lib/dijit/themes/claro/form/Checkbox.css index 1c1a3c438..bde32cbb2 100644 --- a/lib/dijit/themes/claro/form/Checkbox.css +++ b/lib/dijit/themes/claro/form/Checkbox.css @@ -1,71 +1 @@ -/* CheckBox - * - * Styling CheckBox mainly includes: - * - * 1. Containers - * .dijitCheckBox|.dijitCheckBoxIcon - for border, padding, width|height and background image - * - * 2. CheckBox within ToggleButton - * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image - * - * 3. Checked state - * .dijitCheckBoxChecked - for checked background-color|image - * .dijitToggleButtonChecked - for border, background-color|image, display and width|height - * - * 4. Hover state - * .dijitCheckBoxHover|.dijitCheckBoxCheckedHover - for background image - * - * 5. Disabled state - * .dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image - */ -.claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url("../images/checkmarkNoBorder.png"); -} -.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url("../images/checkmarkNoBorder.gif"); -} -.claro .dijitCheckBox, .claro .dijitCheckBoxIcon { - background-image: url("../form/images/checkboxRadioButtonStates.png"); - /* checkbox sprite image */ - - background-repeat: no-repeat; - width: 15px; - height: 16px; - margin: 0 2px 0 0; - padding: 0; -} -.dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon { - background-image: url("../form/images/checkboxAndRadioButtons_IE6.png"); - /* checkbox sprite image */ - -} -.claro .dijitCheckBox, .claro .dijitToggleButton .dijitCheckBoxIcon { - /* unchecked */ - - background-position: -15px; -} -.claro .dijitCheckBoxChecked, .claro .dijitToggleButtonChecked .dijitCheckBoxIcon { - /* checked */ - - background-position: 0; -} -.claro .dijitCheckBoxDisabled { - /* disabled */ - - background-position: -75px; -} -.claro .dijitCheckBoxCheckedDisabled { - /* disabled but checked */ - - background-position: -60px; -} -.claro .dijitCheckBoxHover { - /* hovering over an unchecked enabled checkbox */ - - background-position: -45px; -} -.claro .dijitCheckBoxCheckedHover { - /* hovering over an checked enabled checkbox */ - - background-position: -30px; -} +.claro .dijitToggleButton .dijitCheckBoxIcon {background-image: url("../images/checkmarkNoBorder.png");}.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon {background-image: url("../images/checkmarkNoBorder.gif");}.claro .dijitCheckBox, .claro .dijitCheckBoxIcon {background-image: url("../form/images/checkboxRadioButtonStates.png"); background-repeat: no-repeat; width: 15px; height: 16px; margin: 0 2px 0 0; padding: 0;}.dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon {background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");}.claro .dijitCheckBox, .claro .dijitToggleButton .dijitCheckBoxIcon {background-position: -15px;}.claro .dijitCheckBoxChecked, .claro .dijitToggleButtonChecked .dijitCheckBoxIcon {background-position: 0;}.claro .dijitCheckBoxDisabled {background-position: -75px;}.claro .dijitCheckBoxCheckedDisabled {background-position: -60px;}.claro .dijitCheckBoxHover {background-position: -45px;}.claro .dijitCheckBoxCheckedHover {background-position: -30px;} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Common.css b/lib/dijit/themes/claro/form/Common.css index b7b91c134..6fff5bce9 100644 --- a/lib/dijit/themes/claro/form/Common.css +++ b/lib/dijit/themes/claro/form/Common.css @@ -1,211 +1 @@ -/* claro/form/Common.css */ -/*========================= common css =========================*/ -/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ -.claro .dijitTextBox, .claro .dijitInputInner { - color: #000000; -} -.claro .dijitValidationTextBoxError .dijitValidationContainer { - background-color: #d46464; - background-image: url("../form/images/error.png"); - background-position: top center; - border: solid #d46464 0; - width: 9px; -} -.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 */ - -} -/* 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 .dijitSelect .dijitInputField, .claro .dijitTextBox .dijitInputField { - padding: 1px 2px; -} -.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner { - 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 */ - - 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 .dijitSelect, .claro .dijitTextBox { - background-color: #ffffff; -} -/* hover */ -.claro .dijitSelectHover, -.claro .dijitSelectHover .dijitButtonContents, -.claro .dijitTextBoxHover, -.claro .dijitTextBoxHover .dijitButtonNode { - border-color: #759dc0; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - transition-duration: 0.25s; -} -.claro .dijitTextBoxHover { - background-color: #e5f2fe; - 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 .dijitSelectError, -.claro .dijitSelectError .dijitButtonContents, -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitButtonNode { - border-color: #d46464; -} -/* focused state */ -.claro .dijitSelectFocused, -.claro .dijitSelectFocused .dijitButtonContents, -.claro .dijitTextBoxFocused, -.claro .dijitTextBoxFocused .dijitButtonNode { - border-color: #759dc0; - -webkit-transition-duration: 0.1s; - -moz-transition-duration: 0.1s; - transition-duration: 0.1s; -} -.claro .dijitTextBoxFocused { - background-color: #ffffff; - 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 .dijitSelectErrorFocused, -.claro .dijitSelectErrorFocused .dijitButtonContents, -.claro .dijitTextBoxErrorFocused, -.claro .dijitTextBoxErrorFocused .dijitButtonNode { - border-color: #ce5050; -} -/* disabled state */ -.claro .dijitSelectDisabled, -.claro .dijitSelectDisabled .dijitButtonContents, -.claro .dijitTextBoxDisabled, -.claro .dijitTextBoxDisabled .dijitButtonNode { - border-color: #d3d3d3; -} -.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { - background-color: #efefef; - background-image: none; -} -.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner { - color: #818181; -} -.dj_webkit .claro .dijitDisabled input { - /* because WebKit lightens disabled input/textarea no matter what color you specify */ - - color: #757575; -} -.dj_webkit .claro textarea.dijitTextAreaDisabled { - /* because WebKit lightens disabled input/textarea no matter what color you specify */ - - color: #1b1b1b; -} -/*========================= for special widgets =========================*/ -/* Input boxes with an arrow (for a drop down) */ -.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 { - border: none; -} -.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { - border: none; -} -/* Add 1px vertical padding to the where user types and the validation icon, - to match the 1px border on arrow button */ -.claro .dijitSelectLabel, .claro .dijitTextBox .dijitInputInner, .claro .dijitValidationTextBox .dijitValidationContainer { - padding: 1px 0; -} -.claro .dijitComboBox .dijitButtonNode { - background-color: #efefef; - 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 - * 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: #7dbdfa; - 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; -} -/* 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: #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; -} -.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { - width: 18px; -} -.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { - width: 16px; -} +.claro .dijitTextBox, .claro .dijitInputInner {color: #000000;}.claro .dijitValidationTextBoxError .dijitValidationContainer {background-color: #d46464; background-image: url("../form/images/error.png"); background-position: top center; border: solid #d46464 0; width: 9px;}.claro .dijitTextBoxError .dijitValidationContainer {border-left-width: 1px;}.claro .dijitValidationTextBoxError .dijitValidationIcon {width: 0; background-color: transparent !important;}.claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder {padding: 2px;}.claro .dijitSelect .dijitInputField, .claro .dijitTextBox .dijitInputField {padding: 1px 2px;}.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner {padding: 1px;}.claro .dijitSelect,.claro .dijitSelect .dijitButtonContents,.claro .dijitTextBox,.claro .dijitTextBox .dijitButtonNode {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 .dijitSelect, .claro .dijitTextBox {background-color: #ffffff;}.claro .dijitSelectHover,.claro .dijitSelectHover .dijitButtonContents,.claro .dijitTextBoxHover,.claro .dijitTextBoxHover .dijitButtonNode {border-color: #759dc0; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; transition-duration: 0.25s;}.claro .dijitTextBoxHover {background-color: #e5f2fe; 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 .dijitSelectError,.claro .dijitSelectError .dijitButtonContents,.claro .dijitTextBoxError,.claro .dijitTextBoxError .dijitButtonNode {border-color: #d46464;}.claro .dijitSelectFocused,.claro .dijitSelectFocused .dijitButtonContents,.claro .dijitTextBoxFocused,.claro .dijitTextBoxFocused .dijitButtonNode {border-color: #759dc0; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s;}.claro .dijitTextBoxFocused {background-color: #ffffff; 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 .dijitSelectErrorFocused,.claro .dijitSelectErrorFocused .dijitButtonContents,.claro .dijitTextBoxErrorFocused,.claro .dijitTextBoxErrorFocused .dijitButtonNode {border-color: #ce5050;}.claro .dijitSelectDisabled,.claro .dijitSelectDisabled .dijitButtonContents,.claro .dijitTextBoxDisabled,.claro .dijitTextBoxDisabled .dijitButtonNode {border-color: #d3d3d3;}.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer {background-color: #efefef; background-image: none;}.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner {color: #818181;}.dj_webkit .claro .dijitDisabled input {color: #757575;}.dj_webkit .claro textarea.dijitTextAreaDisabled {color: #1b1b1b;}.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 {border: none;}.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {border: none;}.claro .dijitSelectLabel, .claro .dijitTextBox .dijitInputInner, .claro .dijitValidationTextBox .dijitValidationContainer {padding: 1px 0;}.claro .dijitComboBox .dijitButtonNode {background-color: #efefef; 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;}.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, .claro .dijitComboBox .dijitDownArrowButtonHover {background-color: #abd6ff;}.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {background-position: -70px 53%;}.claro .dijitComboBox .dijitHasDropDownOpen {background-color: #7dbdfa; 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;}.claro div.dijitComboBoxDisabled .dijitArrowButtonInner {background-position: 0 50%; background-color: #efefef;}.dj_ff3 .claro .dijitInputField input[type="hidden"] {display: none; height: 0; width: 0;}.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {width: 18px;}.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner {width: 16px;} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Common_rtl.css b/lib/dijit/themes/claro/form/Common_rtl.css index f5206c196..758fb0a5a 100644 --- a/lib/dijit/themes/claro/form/Common_rtl.css +++ b/lib/dijit/themes/claro/form/Common_rtl.css @@ -1,5 +1 @@ -/* claro/form/Common_rtl.css */ -.claro .dijitTextBoxRtlError .dijitValidationContainer { - border-left-width: 0 !important; - border-right-width: 1px !important; -} +.claro .dijitTextBoxRtlError .dijitValidationContainer {border-left-width: 0 !important; border-right-width: 1px !important;} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/NumberSpinner.css b/lib/dijit/themes/claro/form/NumberSpinner.css index 70603b7e7..d48791ad9 100644 --- a/lib/dijit/themes/claro/form/NumberSpinner.css +++ b/lib/dijit/themes/claro/form/NumberSpinner.css @@ -1,151 +1 @@ -/* NumberSpinner - namespace "dijitSpinner" - * - * Styling NumberSpinner mainly includes: - * - * 1. Arrows - * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position - * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton - * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image - * - * 2. Hover state - * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image - * - * 3. Active state - * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image - * - * 4. Focused state - * .dijitSpinnerFocused .* - for background color|image - * - * 5. Disabled state - * .dijitSpinnerDisabled .* - for background color|image - */ -.claro .dijitSpinnerButtonContainer { - overflow: hidden; - position: relative; - width: auto; - padding: 0 2px; -} -.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { - border-width: 1px 0; - /* reserve space to match the claro combobox button border with border and not padding to make IE happier */ - - border-style: solid none; -} -/* button */ -.claro .dijitSpinner .dijitArrowButton { - width: auto; - background-color: #efefef; - 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; - overflow: hidden; -} -.dj_iequirks .claro .dijitSpinner .dijitArrowButton { - overflow: visible; - /* 0 height w/o this */ - -} -.claro .dijitSpinner .dijitSpinnerButtonInner { - width: 15px; -} -/* up & down button icons */ -.claro .dijitSpinner .dijitArrowButtonInner { - border: solid 1px #ffffff; - border-bottom-width: 0; - /* 2 top borders = 1 top+bottom border in ComboBox */ - - background-image: url("../form/images/commonFormArrows.png"); - background-repeat: no-repeat; - height: 100%; - width: 15px; - padding-left: 1px; - padding-right: 1px; - /* for up arrow */ - - background-position: -139px center; - /* override button.css (TODO: move to Common.css since ComboBox needs this too) */ - - display: block; - margin: -1px 0 -1px 0; - /* compensate for inner border */ - -} -.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner, -.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, -.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner, -.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner { - margin-top: 0; - /* since its bottom aligned */ - -} -.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { - width: 19px; -} -.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { - background-position: -34px; -} -.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { - padding: 0; -} -/** hover & focused status **/ -.claro .dijitUpArrowButtonActive, .claro .dijitDownArrowButtonActive { - background-color: #abd6ff; -} -.claro .dijitSpinner .dijitUpArrowButtonHover, .claro .dijitSpinner .dijitDownArrowButtonHover, .claro .dijitSpinnerFocused .dijitArrowButton { - background-color: #abd6ff; -} -.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { - background-position: -174px; -} -.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { - background-position: -69px; -} -.claro .dijitSpinnerFocused { - background-color: #ffffff; - background-image: none; -} -/* mouse down status */ -.claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive { - background-color: #7dbefa; - 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; -} -.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - /* hide inner border while button is depressed */ - - border: 0; - padding: 1px; - margin-right: 2px; - margin-bottom: 1px; -} -.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner { - background-position: -173px; -} -.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - background-position: -68px; -} -/* disabled */ -.claro .dijitSpinnerDisabled .dijitArrowButtonInner { - background-color: #efefef; -} -.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position: -104px; -} -.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { - background-position: 1px; -} -/** hacks for browsers **/ -/* for IE 7, when div is enlarged, - * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/ -.dj_ie7 .claro .dijitSpinner { - overflow: visible; -} +.claro .dijitSpinnerButtonContainer {overflow: hidden; position: relative; width: auto; padding: 0 2px;}.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner {border-width: 1px 0; border-style: solid none;}.claro .dijitSpinner .dijitArrowButton {width: auto; background-color: #efefef; 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; overflow: hidden;}.dj_iequirks .claro .dijitSpinner .dijitArrowButton {overflow: visible;}.claro .dijitSpinner .dijitSpinnerButtonInner {width: 15px;}.claro .dijitSpinner .dijitArrowButtonInner {border: solid 1px #ffffff; border-bottom-width: 0; background-image: url("../form/images/commonFormArrows.png"); background-repeat: no-repeat; height: 100%; width: 15px; padding-left: 1px; padding-right: 1px; background-position: -139px center; display: block; margin: -1px 0 -1px 0;}.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner,.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {margin-top: 0;}.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner {width: 19px;}.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {background-position: -34px;}.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField {padding: 0;}.claro .dijitUpArrowButtonActive, .claro .dijitDownArrowButtonActive {background-color: #abd6ff;}.claro .dijitSpinner .dijitUpArrowButtonHover, .claro .dijitSpinner .dijitDownArrowButtonHover, .claro .dijitSpinnerFocused .dijitArrowButton {background-color: #abd6ff;}.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner {background-position: -174px;}.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner {background-position: -69px;}.claro .dijitSpinnerFocused {background-color: #ffffff; background-image: none;}.claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive {background-color: #7dbefa; 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;}.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {border: 0; padding: 1px; margin-right: 2px; margin-bottom: 1px;}.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner {background-position: -173px;}.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {background-position: -68px;}.claro .dijitSpinnerDisabled .dijitArrowButtonInner {background-color: #efefef;}.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner {background-position: -104px;}.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner {background-position: 1px;}.dj_ie7 .claro .dijitSpinner {overflow: visible;} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/RadioButton.css b/lib/dijit/themes/claro/form/RadioButton.css index bad1854b4..7c16e9216 100644 --- a/lib/dijit/themes/claro/form/RadioButton.css +++ b/lib/dijit/themes/claro/form/RadioButton.css @@ -1,79 +1 @@ -/* RadioButton - * - * Styling RadioButton mainly includes: - * - * 1. Containers - * .dijitRadio|.dijitRadioIcon - for border, padding, width|height and background image - * - * 2. RadioButton within ToggleButton - * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image - * - * 3. Checked state - * .dijitRadioChecked - for checked background-color|image - * .dijitToggleButtonChecked - for border, background-color|image, display and width|height - * - * 4. Hover state - * .dijitRadioHover|.dijitRadioCheckedHover - for background image - * - * 5. Disabled state - * .dijitRadioDisabled|.dijitRadioCheckedDisabled - for background image - */ -.claro .dijitToggleButton .dijitRadio, .claro .dijitToggleButton .dijitRadioIcon { - background-image: url("../form/images/checkboxRadioButtonStates.png"); -} -.dj_ie6 .claro .dijitToggleButton .dijitRadio, .dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { - background-image: url("../form/images/checkboxAndRadioButtons_IE6.png"); -} -.claro .dijitRadio, .claro .dijitRadioIcon { - /* inside a toggle button */ - - background-image: url("../form/images/checkboxRadioButtonStates.png"); - /* checkbox sprite image */ - - background-repeat: no-repeat; - width: 15px; - height: 15px; - margin: 0 2px 0 0; - padding: 0; -} -.dj_ie6 .claro .dijitRadio, .dj_ie6 .claro .dijitRadioIcon { - /* inside a toggle button */ - - background-image: url("../form/images/checkboxAndRadioButtons_IE6.png"); - /* checkbox sprite image */ - -} -.claro .dijitRadio { - /* unselected */ - - background-position: -105px; -} -.claro .dijitToggleButton .dijitRadioIcon { - /* unselected */ - - background-position: -107px; -} -.claro .dijitRadioDisabled { - /* unselected and disabled */ - - background-position: -165px; -} -.claro .dijitRadioHover { - /* hovering over an unselected enabled radio button */ - - background-position: -135px; -} -.claro .dijitRadioChecked { - background-position: -90px; -} -.claro .dijitToggleButtonChecked .dijitRadioIcon { - background-position: -92px; -} -.claro .dijitRadioCheckedHover { - background-position: -120px; -} -.claro .dijitRadioCheckedDisabled { - /* selected but disabled */ - - background-position: -150px; -} +.claro .dijitToggleButton .dijitRadio, .claro .dijitToggleButton .dijitRadioIcon {background-image: url("../form/images/checkboxRadioButtonStates.png");}.dj_ie6 .claro .dijitToggleButton .dijitRadio, .dj_ie6 .claro .dijitToggleButton .dijitRadioIcon {background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");}.claro .dijitRadio, .claro .dijitRadioIcon {background-image: url("../form/images/checkboxRadioButtonStates.png"); background-repeat: no-repeat; width: 15px; height: 15px; margin: 0 2px 0 0; padding: 0;}.dj_ie6 .claro .dijitRadio, .dj_ie6 .claro .dijitRadioIcon {background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");}.claro .dijitRadio {background-position: -105px;}.claro .dijitToggleButton .dijitRadioIcon {background-position: -107px;}.claro .dijitRadioDisabled {background-position: -165px;}.claro .dijitRadioHover {background-position: -135px;}.claro .dijitRadioChecked {background-position: -90px;}.claro .dijitToggleButtonChecked .dijitRadioIcon {background-position: -92px;}.claro .dijitRadioCheckedHover {background-position: -120px;}.claro .dijitRadioCheckedDisabled {background-position: -150px;} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Select.css b/lib/dijit/themes/claro/form/Select.css index 5158dbd17..182f9ead8 100644 --- a/lib/dijit/themes/claro/form/Select.css +++ b/lib/dijit/themes/claro/form/Select.css @@ -1,96 +1 @@ -/* Select - * - * Styling Select mainly includes: - * - * 1. Containers - * .dijitSelect - for border, background-color - * .dijitButtonContents - for border - * - * 2. Arrow - * .dijitArrowButton - for border, padding and background-color|image - * .dijitArrowButtonInner - for border, background-color|image, display and width|height - * - * 3. Menu - * .dijitSelectMenu .* - for border, padding - * - * 4. Various states - * .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image - */ -/* normal status */ -.claro .dijitSelect .dijitArrowButtonContainer { - border: 1px solid #ffffff; -} -.claro .dijitSelect .dijitArrowButton { - padding: 0; - background-color: #efefef; - 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; -} -.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - height: 16px; -} -/* hover status */ -.claro .dijitSelectHover { - background-color: #e5f2fe; - 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); - background-repeat: repeat-x; -} -.claro .dijitSelectFocused, .claro .dijitSelectHover { - border-color: #759dc0; -} -.claro .dijitSelectHover .dijitArrowButton { - background-color: #abd6ff; -} -.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { - background-position: -70px 53%; -} -/* focused status */ -.claro .dijitSelectFocused .dijitArrowButton { - background-color: #7dbefa; - 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; -} -.claro .dijitSelectFocused .dijitArrowButton { - border: none; - padding: 1px; -} -.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { - background-position: -70px 53%; -} -/* disable status */ -.claro .dijitSelectDisabled { - border-color: #d3d3d3; - background-color: #efefef; - background-image: none; - color: #818181; -} -.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { - background-position: 0 53%; -} -/* Dropdown menu style for select */ -.claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell { - /* so that arrow and icon cells from MenuItem are not displayed */ - - display: none; -} -.claro .dijitSelectMenu td.dijitMenuItemLabel { - /* line up menu text with text in select box (in LTR and RTL modes) */ - - padding: 2px; -} -.claro .dijitSelectMenu .dijitMenuSeparatorTop { - border-bottom: 1px solid #759dc0; -} +.claro .dijitSelect .dijitArrowButtonContainer {border: 1px solid #ffffff;}.claro .dijitSelect .dijitArrowButton {padding: 0; background-color: #efefef; 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;}.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {height: 16px;}.claro .dijitSelectHover {background-color: #e5f2fe; 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); background-repeat: repeat-x;}.claro .dijitSelectFocused, .claro .dijitSelectHover {border-color: #759dc0;}.claro .dijitSelectHover .dijitArrowButton {background-color: #abd6ff;}.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {background-position: -70px 53%;}.claro .dijitSelectFocused .dijitArrowButton {background-color: #7dbefa; 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;}.claro .dijitSelectFocused .dijitArrowButton {border: none; padding: 1px;}.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {background-position: -70px 53%;}.claro .dijitSelectDisabled {border-color: #d3d3d3; background-color: #efefef; background-image: none; color: #818181;}.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {background-position: 0 53%;}.claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell {display: none;}.claro .dijitSelectMenu td.dijitMenuItemLabel {padding: 2px;}.claro .dijitSelectMenu .dijitMenuSeparatorTop {border-bottom: 1px solid #759dc0;} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Slider.css b/lib/dijit/themes/claro/form/Slider.css index b704a1b56..bb7d5b049 100644 --- a/lib/dijit/themes/claro/form/Slider.css +++ b/lib/dijit/themes/claro/form/Slider.css @@ -1,323 +1 @@ -/* Slider - * - * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) - * - * Slider progress bar: - * 1. Slider progress bar (default styling): - * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider - * .dijitSliderLeftBumper - bar at the left of horizontal slider - * .dijitSliderRightBumper - bar at the right of horizontal slider - * .dijitSliderProgressBarV - progress bar at the middle of vertical slider - * .dijitSliderTopBumper - bar at the top of vertical slider - * .dijitSliderBottomtBumper - bar at the bottom of vertical slider - * - * 2. hovered Slider progress bar (ie, mouse hover on progress bar) - * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border - * - * 3. focused Slider progress bar (ie, mouse focused on progress bar) - * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border - * - * 4. disabled/read-only Slider progress bar - * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled - * - * - * Slider Thumbs: - * 1. Slider Thumbs (default styling): - * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar - * - * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) - * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style - * - * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) - * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style - * - * - * Slider Increment/Decrement Buttons: - * 1. Slider Increment/Decrement Buttons (default styling): - * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider - * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider - * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider - * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider - * - * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) - * .dijitSliderHover .dijitSliderDecrementIconH - for background, border - * - * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) - * .dijitSliderActive .dijitSliderIncrementIconV - for background, border - * - * 4. disabled/read-only Slider Increment/Decrement Buttons - * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider - * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider - */ -.claro .dijitSliderBar { - border-style: solid; - outline: 1px; -} -.claro .dijitSliderFocused .dijitSliderBar { - border-color: #759dc0; -} -.claro .dijitSliderHover .dijitSliderBar { - border-color: #759dc0; -} -.claro .dijitSliderDisabled .dijitSliderBar { - background-image: none; - border-color: #d3d3d3; -} -.claro .dijitRuleLabelsContainer { - color: #000000; -} -/* Horizontal Slider */ -.claro .dijitRuleLabelsContainerH { - padding: 2px 0; -} -.claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper { - border-color: #b5bcc7; - background-color: #cfe5fa; - background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); - background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); - background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); - background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); -} -.claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper { - border-color: #b5bcc7; - background-color: #ffffff; -} -.claro .dijitSliderRightBumper { - border-right: solid 1px #b5bcc7; -} -.claro .dijitSliderLeftBumper { - border-left: solid 1px #b5bcc7; -} -.claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper { - background-color: #abd6ff; - border-color: #759dc0; -} -.claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper { - background-color: #ffffff; - border-color: #759dc0; -} -.claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper { - background-color: #abd6ff; - border-color: #759dc0; - -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); - -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); - box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -} -.claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper { - background-color: #ffffff; - border-color: #759dc0; - -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); - -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); - box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -} -.claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper { - background-color: #d3d3d3; - /* left side of slider, fill matches border */ - - background-image: none; -} -.claro .dijitSliderDisabled .dijitSliderRemainingBarH, .claro .dijitSliderDisabled .dijitSliderRightBumper { - background-color: #efefef; -} -/* Vertical Slider */ -.claro .dijitRuleLabelsContainerV { - padding: 0 2px; -} -.claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper { - border-color: #b5bcc7; - background-color: #cfe5fa; - background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); - background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); - background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); - background-image: linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); -} -.claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper { - border-color: #b5bcc7; - background-color: #ffffff; -} -.claro .dijitSliderBottomBumper { - border-bottom: solid 1px #b5bcc7; -} -.claro .dijitSliderTopBumper { - border-top: solid 1px #b5bcc7; -} -.claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper { - background-color: #abd6ff; - border-color: #759dc0; -} -.claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper { - background-color: #ffffff; - border-color: #759dc0; -} -.claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper { - background-color: #abd6ff; - border-color: #759dc0; - -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); - -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); - box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); -} -.claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper { - background-color: #ffffff; - border-color: #759dc0; - -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); - -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); - box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); -} -.claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper { - background-color: #d3d3d3; - /* bottom side of slider, fill matches border */ - -} -.claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper { - background-color: #efefef; -} -/* ------- Thumbs ------- */ -.claro .dijitSliderImageHandleH { - border: 0; - width: 18px; - height: 16px; - background-image: url("../form/images/sliderThumbs.png"); - background-repeat: no-repeat; - background-position: 0 0; -} -.claro .dijitSliderHover .dijitSliderImageHandleH { - background-position: -18px 0; -} -.claro .dijitSliderFocused .dijitSliderImageHandleH { - background-position: -36px 0; -} -.claro .dijitSliderProgressBarH .dijitSliderThumbHover { - background-position: -36px 0; -} -.claro .dijitSliderProgressBarH .dijitSliderThumbActive { - background-position: -36px 0; -} -.claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH { - background-position: -54px 0; -} -.claro .dijitSliderImageHandleV { - border: 0; - width: 18px; - height: 16px; - background-image: url("../form/images/sliderThumbs.png"); - background-repeat: no-repeat; - background-position: -289px 0; -} -.claro .dijitSliderHover .dijitSliderImageHandleV { - background-position: -307px 0; -} -.claro .dijitSliderFocused .dijitSliderImageHandleV { - background-position: -325px 0; -} -.claro .dijitSliderProgressBarV .dijitSliderThumbHover { - background-position: -325px 0; -} -.claro .dijitSliderProgressBarV .dijitSliderThumbActive { - background-position: -325px 0; -} -.claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV { - background-position: -343px 0; -} -/* ---- Increment/Decrement Buttons ---- */ -.claro .dijitSliderButtonContainerH { - padding: 1px 3px 1px 2px; -} -.claro .dijitSliderButtonContainerV { - padding: 3px 1px 2px 1px; -} -.claro .dijitSliderDecrementIconH, -.claro .dijitSliderIncrementIconH, -.claro .dijitSliderDecrementIconV, -.claro .dijitSliderIncrementIconV { - background-image: url("../form/images/commonFormArrows.png"); - background-repeat: no-repeat; - background-color: #efefef; - -moz-border-radius: 2px; - border-radius: 2px; - border: solid 1px #b5bcc7; - font-size: 1px; -} -.claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH { - height: 12px; - width: 9px; -} -.claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { - height: 9px; - width: 12px; -} -.claro .dijitSliderActive .dijitSliderDecrementIconH, -.claro .dijitSliderActive .dijitSliderIncrementIconH, -.claro .dijitSliderActive .dijitSliderDecrementIconV, -.claro .dijitSliderActive .dijitSliderIncrementIconV, -.claro .dijitSliderHover .dijitSliderDecrementIconH, -.claro .dijitSliderHover .dijitSliderIncrementIconH, -.claro .dijitSliderHover .dijitSliderDecrementIconV, -.claro .dijitSliderHover .dijitSliderIncrementIconV { - /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ - - border: solid 1px #759dc0; - background-color: #ffffff; -} -.claro .dijitSliderDecrementIconH { - background-position: -357px 50%; -} -.claro .dijitSliderActive .dijitSliderDecrementIconH.claro .dijitSliderHover .dijitSliderDecrementIconH { - background-position: -393px 50%; -} -.claro .dijitSliderIncrementIconH { - background-position: -251px 50%; -} -.claro .dijitSliderActive .dijitSliderIncrementIconH.claro .dijitSliderHover .dijitSliderIncrementIconH { - background-position: -283px 50%; -} -.claro .dijitSliderDecrementIconV { - background-position: -38px 50%; -} -.claro .dijitSliderActive .dijitSliderDecrementIconV.claro .dijitSliderHover .dijitSliderDecrementIconV { - background-position: -73px 50%; -} -.claro .dijitSliderIncrementIconV { - background-position: -143px 49%; -} -.claro .dijitSliderActive .dijitSliderIncrementIconV.claro .dijitSliderHover .dijitSliderIncrementIconV { - background-position: -178px 49%; -} -.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, -.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, -.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, -.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { - background-color: #cfe5fa; -} -.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, -.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, -.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, -.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { - background-color: #abd6ff; - border-color: #759dc0; -} -.claro .dijitSliderButtonInner { - visibility: hidden; -} -.claro .dijitSliderDisabled .dijitSliderBar { - border-color: #d3d3d3; -} -.claro .dijitSliderReadOnly *, .claro .dijitSliderDisabled * { - border-color: #d3d3d3; - color: #818181; -} -.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, .claro .dijitSliderDisabled .dijitSliderDecrementIconH { - background-position: -321px 50%; - background-color: #efefef; -} -.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, .claro .dijitSliderDisabled .dijitSliderIncrementIconH { - background-position: -215px 50%; - background-color: #efefef; -} -.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, .claro .dijitSliderDisabled .dijitSliderDecrementIconV { - background-position: -3px 49%; - background-color: #efefef; -} -.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV { - background-position: -107px 49%; - background-color: #efefef; -} +.claro .dijitSliderBar {border-style: solid; outline: 1px;}.claro .dijitSliderFocused .dijitSliderBar {border-color: #759dc0;}.claro .dijitSliderHover .dijitSliderBar {border-color: #759dc0;}.claro .dijitSliderDisabled .dijitSliderBar {background-image: none; border-color: #d3d3d3;}.claro .dijitRuleLabelsContainer {color: #000000;}.claro .dijitRuleLabelsContainerH {padding: 2px 0;}.claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper {border-color: #b5bcc7; background-color: #cfe5fa; background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px);}.claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper {border-color: #b5bcc7; background-color: #ffffff;}.claro .dijitSliderRightBumper {border-right: solid 1px #b5bcc7;}.claro .dijitSliderLeftBumper {border-left: solid 1px #b5bcc7;}.claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper {background-color: #abd6ff; border-color: #759dc0;}.claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper {background-color: #ffffff; border-color: #759dc0;}.claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper {background-color: #abd6ff; border-color: #759dc0; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);}.claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper {background-color: #ffffff; border-color: #759dc0; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);}.claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper {background-color: #d3d3d3; background-image: none;}.claro .dijitSliderDisabled .dijitSliderRemainingBarH, .claro .dijitSliderDisabled .dijitSliderRightBumper {background-color: #efefef;}.claro .dijitRuleLabelsContainerV {padding: 0 2px;}.claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper {border-color: #b5bcc7; background-color: #cfe5fa; background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); background-image: linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px);}.claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper {border-color: #b5bcc7; background-color: #ffffff;}.claro .dijitSliderBottomBumper {border-bottom: solid 1px #b5bcc7;}.claro .dijitSliderTopBumper {border-top: solid 1px #b5bcc7;}.claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper {background-color: #abd6ff; border-color: #759dc0;}.claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper {background-color: #ffffff; border-color: #759dc0;}.claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper {background-color: #abd6ff; border-color: #759dc0; -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);}.claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper {background-color: #ffffff; border-color: #759dc0; -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);}.claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper {background-color: #d3d3d3;}.claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper {background-color: #efefef;}.claro .dijitSliderImageHandleH {border: 0; width: 18px; height: 16px; background-image: url("../form/images/sliderThumbs.png"); background-repeat: no-repeat; background-position: 0 0;}.claro .dijitSliderHover .dijitSliderImageHandleH {background-position: -18px 0;}.claro .dijitSliderFocused .dijitSliderImageHandleH {background-position: -36px 0;}.claro .dijitSliderProgressBarH .dijitSliderThumbHover {background-position: -36px 0;}.claro .dijitSliderProgressBarH .dijitSliderThumbActive {background-position: -36px 0;}.claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH {background-position: -54px 0;}.claro .dijitSliderImageHandleV {border: 0; width: 18px; height: 16px; background-image: url("../form/images/sliderThumbs.png"); background-repeat: no-repeat; background-position: -289px 0;}.claro .dijitSliderHover .dijitSliderImageHandleV {background-position: -307px 0;}.claro .dijitSliderFocused .dijitSliderImageHandleV {background-position: -325px 0;}.claro .dijitSliderProgressBarV .dijitSliderThumbHover {background-position: -325px 0;}.claro .dijitSliderProgressBarV .dijitSliderThumbActive {background-position: -325px 0;}.claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV {background-position: -343px 0;}.claro .dijitSliderButtonContainerH {padding: 1px 3px 1px 2px;}.claro .dijitSliderButtonContainerV {padding: 3px 1px 2px 1px;}.claro .dijitSliderDecrementIconH,.claro .dijitSliderIncrementIconH,.claro .dijitSliderDecrementIconV,.claro .dijitSliderIncrementIconV {background-image: url("../form/images/commonFormArrows.png"); background-repeat: no-repeat; background-color: #efefef; -moz-border-radius: 2px; border-radius: 2px; border: solid 1px #b5bcc7; font-size: 1px;}.claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH {height: 12px; width: 9px;}.claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV {height: 9px; width: 12px;}.claro .dijitSliderActive .dijitSliderDecrementIconH,.claro .dijitSliderActive .dijitSliderIncrementIconH,.claro .dijitSliderActive .dijitSliderDecrementIconV,.claro .dijitSliderActive .dijitSliderIncrementIconV,.claro .dijitSliderHover .dijitSliderDecrementIconH,.claro .dijitSliderHover .dijitSliderIncrementIconH,.claro .dijitSliderHover .dijitSliderDecrementIconV,.claro .dijitSliderHover .dijitSliderIncrementIconV {border: solid 1px #759dc0; background-color: #ffffff;}.claro .dijitSliderDecrementIconH {background-position: -357px 50%;}.claro .dijitSliderActive .dijitSliderDecrementIconH.claro .dijitSliderHover .dijitSliderDecrementIconH {background-position: -393px 50%;}.claro .dijitSliderIncrementIconH {background-position: -251px 50%;}.claro .dijitSliderActive .dijitSliderIncrementIconH.claro .dijitSliderHover .dijitSliderIncrementIconH {background-position: -283px 50%;}.claro .dijitSliderDecrementIconV {background-position: -38px 50%;}.claro .dijitSliderActive .dijitSliderDecrementIconV.claro .dijitSliderHover .dijitSliderDecrementIconV {background-position: -73px 50%;}.claro .dijitSliderIncrementIconV {background-position: -143px 49%;}.claro .dijitSliderActive .dijitSliderIncrementIconV.claro .dijitSliderHover .dijitSliderIncrementIconV {background-position: -178px 49%;}.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover,.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover,.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover,.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover {background-color: #cfe5fa;}.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive,.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive,.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive,.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive {background-color: #abd6ff; border-color: #759dc0;}.claro .dijitSliderButtonInner {visibility: hidden;}.claro .dijitSliderDisabled .dijitSliderBar {border-color: #d3d3d3;}.claro .dijitSliderReadOnly *, .claro .dijitSliderDisabled * {border-color: #d3d3d3; color: #818181;}.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, .claro .dijitSliderDisabled .dijitSliderDecrementIconH {background-position: -321px 50%; background-color: #efefef;}.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, .claro .dijitSliderDisabled .dijitSliderIncrementIconH {background-position: -215px 50%; background-color: #efefef;}.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, .claro .dijitSliderDisabled .dijitSliderDecrementIconV {background-position: -3px 49%; background-color: #efefef;}.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV {background-position: -107px 49%; background-color: #efefef;} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Slider_rtl.css b/lib/dijit/themes/claro/form/Slider_rtl.css index 97e078b9f..7e12d0557 100644 --- a/lib/dijit/themes/claro/form/Slider_rtl.css +++ b/lib/dijit/themes/claro/form/Slider_rtl.css @@ -1,24 +1 @@ -.claro .dijitSliderRtl .dijitSliderProgressBarH, -.claro .dijitSliderRtl .dijitSliderRemainingBarH, -.claro .dijitSliderRtl .dijitSliderLeftBumper, -.claro .dijitSliderRtl .dijitSliderRightBumper, -.claro .dijitSliderRtl .dijitSliderTopBumper { - background-position: top right; -} -.claro .dijitSliderRtl .dijitSliderProgressBarV, .claro .dijitSliderRtl .dijitSliderRemainingBarV, .claro .dijitSliderRtl .dijitSliderBottomBumper { - background-position: bottom right; -} -.claro .dijitSliderRtl .dijitSliderLeftBumper { - border-left-width: 0; - border-right-width: 1px; -} -.claro .dijitSliderRtl .dijitSliderRightBumper { - border-left-width: 1px; - border-right-width: 0; -} -.claro .dijitSliderRtl .dijitSliderIncrementIconH { - background-position: -357px 50%; -} -.claro .dijitSliderRtl .dijitSliderDecrementIconH { - background-position: -251px 50%; -} +.claro .dijitSliderRtl .dijitSliderProgressBarH,.claro .dijitSliderRtl .dijitSliderRemainingBarH,.claro .dijitSliderRtl .dijitSliderLeftBumper,.claro .dijitSliderRtl .dijitSliderRightBumper,.claro .dijitSliderRtl .dijitSliderTopBumper {background-position: top right;}.claro .dijitSliderRtl .dijitSliderProgressBarV, .claro .dijitSliderRtl .dijitSliderRemainingBarV, .claro .dijitSliderRtl .dijitSliderBottomBumper {background-position: bottom right;}.claro .dijitSliderRtl .dijitSliderLeftBumper {border-left-width: 0; border-right-width: 1px;}.claro .dijitSliderRtl .dijitSliderRightBumper {border-left-width: 1px; border-right-width: 0;}.claro .dijitSliderRtl .dijitSliderIncrementIconH {background-position: -357px 50%;}.claro .dijitSliderRtl .dijitSliderDecrementIconH {background-position: -251px 50%;} \ No newline at end of file -- cgit v1.2.3