diff options
Diffstat (limited to 'lib/dijit/themes/claro/form')
22 files changed, 2000 insertions, 578 deletions
diff --git a/lib/dijit/themes/claro/form/Button.css b/lib/dijit/themes/claro/form/Button.css index a2a15c0cc..e01a1d313 100644 --- a/lib/dijit/themes/claro/form/Button.css +++ b/lib/dijit/themes/claro/form/Button.css @@ -1,125 +1,160 @@ - +/* 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 { - - -webkit-transition-property:background-color; - -webkit-transition-duration:.3s; + /* 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 { - - border: 1px solid #769dc0; - padding:2px 4px 4px 4px; - background-image: url("images/button.png"); - background-position: center top; - background-repeat: repeat-x; - background-color: #e4f2ff; - border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.15); + /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ + + border: 1px solid #769dc0; + padding: 2px 4px 4px 4px; + background-image: url("images/button.png"); + background-position: center top; + background-repeat: repeat-x; + background-color: #e9f4fe; + -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); } .claro .dijitComboButton .dijitArrowButton { - border-left-width: 0px; - padding: 4px 2px 4px 2px; + 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("images/buttonArrows.png"); - background-repeat:no-repeat; - background-position:-51px 53%; + width: 15px; + height: 15px; + margin: 0 auto; + background-image: url("images/buttonArrows.png"); + background-repeat: no-repeat; + background-position: -51px 53%; } .claro .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -77px 53%; + background-position: -77px 53%; } .claro .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -26px 53%; + background-position: -26px 53%; } .claro .dijitUpArrowButton .dijitArrowButtonInner { - background-position: 0px 53%; + background-position: 0 53%; } .claro .dijitDisabled .dijitArrowButtonInner { - background-position: -151px 53%; + background-position: -151px 53%; } .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -177px 53%; + background-position: -177px 53%; } .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -126px 53%; + background-position: -126px 53%; } .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position: -100px 53%; + background-position: -100px 53%; } .claro .dijitButtonText { - padding: 0 0.3em; - text-align: center; -} -.claro .dijitDisabled .dijitButtonText { - color: #7F7F7F; + padding: 0 0.3em; + text-align: center; } +/* hover status */ .claro .dijitButtonHover .dijitButtonNode, .claro .dijitDropDownButtonHover .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNodeHover, +.claro .dijitComboButton .dijitButtonNodeHover, .claro .dijitComboButton .dijitDownArrowButtonHover, .claro .dijitToggleButtonHover .dijitButtonNode { - background-color: #afd9ff; - color:#000; - -webkit-transition-duration:.2s; -} -.claro .dijitButtonActive .dijitButtonNode, + background-color: #abd6ff; + color: #000000; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +/* checked status */ +.claro .dijitButtonActive .dijitButtonNode, .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, .claro .dijitToggleButtonActive .dijitButtonNode { - background-color: #99cfff; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); - -webkit-transition-duration:.1s; -} + background-color: #abd6ff; + -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); + -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; + background-image: none; + outline: none; } .claro .dijitButtonDisabled .dijitButtonNode, .claro .dijitDropDownButtonDisabled .dijitButtonNode, .claro .dijitComboButtonDisabled .dijitButtonNode, -.claro .dijitToggleButtonDisabled .dijitButtonNode { - background-position:0px -149px; - background-color: #e3e3e3; - border: solid 1px #c9c9c9; - color: #696969; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); -} -.claro .dijitComboButtonDisabled .dijitArrowButton{ - border-left-width: 0px; -} +.claro .dijitToggleButtonDisabled .dijitButtonNode { + background-position: 0 -149px; + 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); +} +.claro .dijitComboButtonDisabled .dijitArrowButton { + border-left-width: 0; +} +/* for ComboButton */ .claro table.dijitComboButton { - border-collapse: separate; + border-collapse: separate; + /* override dijit.css so that ComboBox rounded corners work */ + } .dj_ie6 .claro .dijitButtonNode { - background-image: none; + background-image: none; } .claro .dijitComboButton .dijitStretch { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius: 4px; - -webkit-border-top-right-radius: 0px; - -webkit-border-bottom-right-radius: 0px; - -webkit-border-bottom-left-radius: 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } .claro .dijitComboButton .dijitArrowButton { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } diff --git a/lib/dijit/themes/claro/form/Button.less b/lib/dijit/themes/claro/form/Button.less new file mode 100644 index 000000000..b076d2a16 --- /dev/null +++ b/lib/dijit/themes/claro/form/Button.less @@ -0,0 +1,154 @@ +/* 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 + */ + +@import "../variables"; + +.claro .dijitButtonNode { + /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ + .transition-property(background-color); + .transition-duration(.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 @button-border-color; + padding:2px 4px 4px 4px; + background-image: url("images/button.png"); + background-position: center top; + background-repeat: repeat-x; + background-color: @button-background-color; + .border-radius(@button-border-radius); + .box-shadow(0 1px 1px rgba(0,0,0,0.15)); +} + +.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("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: @button-hovered-background-color; + color:@text-color; + .transition-duration(.2s); +} + +/* checked status */ +.claro .dijitButtonActive .dijitButtonNode, +.claro .dijitDropDownButtonActive .dijitButtonNode, +.claro .dijitComboButtonActive .dijitButtonNode, +.claro .dijitToggleButtonActive .dijitButtonNode { + background-color: @button-pressed-background-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); + .transition-duration(.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-position:0 -149px; + background-color: @disabled-background-color; + border: solid 1px @disabled-border-color; + color: @disabled-text-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); +} +.claro .dijitComboButtonDisabled .dijitArrowButton{ + border-left-width: 0; +} +/* for ComboButton */ +.claro table.dijitComboButton { + border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ +} + +.dj_ie6 .claro .dijitButtonNode { + background-image: none; +} + +.claro .dijitComboButton .dijitStretch { + .border-radius(@button-border-radius 0 0 @button-border-radius); +} +.claro .dijitComboButton .dijitArrowButton { + .border-radius(0 @button-border-radius @button-border-radius 0); +} diff --git a/lib/dijit/themes/claro/form/Button_rtl.css b/lib/dijit/themes/claro/form/Button_rtl.css index f1484b127..2d5b08bff 100644 --- a/lib/dijit/themes/claro/form/Button_rtl.css +++ b/lib/dijit/themes/claro/form/Button_rtl.css @@ -1,18 +1,13 @@ - +/* Combo Button */ .claro .dijitComboButtonRtl .dijitStretch { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } .claro .dijitComboButtonRtl .dijitArrowButton { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius:4px; - -webkit-border-top-right-radius:0px; - -webkit-border-bottom-right-radius:0px; - -webkit-border-bottom-left-radius:4px; - padding:3px 0px 4px; - border-left-width: 1px; - border-right-width: 0px; + -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 diff --git a/lib/dijit/themes/claro/form/Button_rtl.less b/lib/dijit/themes/claro/form/Button_rtl.less new file mode 100644 index 000000000..6225d6847 --- /dev/null +++ b/lib/dijit/themes/claro/form/Button_rtl.less @@ -0,0 +1,16 @@ +@import "../variables"; + +/* Combo Button */ + +.claro .dijitComboButtonRtl .dijitStretch { + .border-radius(0 @button-border-radius @button-border-radius 0); +} + +.claro .dijitComboButtonRtl .dijitArrowButton { + .border-radius(@button-border-radius 0 0 @button-border-radius); + padding:3px 0 4px; + border-left-width: 1px; + border-right-width: 0; +} + +/* End Combo Button */
\ 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 be3604ddd..5765bb370 100644 --- a/lib/dijit/themes/claro/form/Checkbox.css +++ b/lib/dijit/themes/claro/form/Checkbox.css @@ -1,46 +1,71 @@ - +/* 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'); + background-image: url('../images/checkmarkNoBorder.png'); } .dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url('../images/checkmarkNoBorder.gif'); -} -.claro .dijitCheckBox, -.claro .dijitCheckBoxIcon { - background-image: url('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('images/checkboxAndRadioButtons_IE6.png'); -} -.claro .dijitCheckBox, -.claro .dijitToggleButton .dijitCheckBoxIcon { - - background-position: -15px; + background-image: url('../images/checkmarkNoBorder.gif'); +} +.claro .dijitCheckBox, .claro .dijitCheckBoxIcon { + background-image: url('images/checkboxRadioButtonStates.png'); + /* checkbox sprite image */ + + background-repeat: no-repeat; + width: 15px; + height: 16px; + margin: 0 2px 0 0; + padding: 0; } -.claro .dijitCheckBoxChecked, -.claro .dijitToggleButtonChecked .dijitCheckBoxIcon { - - background-position: -0px; +.dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon { + background-image: url('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 { - - background-position: -75px; + /* disabled */ + + background-position: -75px; } .claro .dijitCheckBoxCheckedDisabled { - - background-position: -60px; + /* disabled but checked */ + + background-position: -60px; } .claro .dijitCheckBoxHover { - - background-position: -45px; + /* hovering over an unchecked enabled checkbox */ + + background-position: -45px; } .claro .dijitCheckBoxCheckedHover { - - background-position: -30px; + /* hovering over an checked enabled checkbox */ + + background-position: -30px; } diff --git a/lib/dijit/themes/claro/form/Checkbox.less b/lib/dijit/themes/claro/form/Checkbox.less new file mode 100644 index 000000000..21769dca1 --- /dev/null +++ b/lib/dijit/themes/claro/form/Checkbox.less @@ -0,0 +1,79 @@ +/* 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 + */ + +@import "../variables"; + +.claro .dijitToggleButton .dijitCheckBoxIcon { + background-image: url('../images/checkmarkNoBorder.png'); +} + +.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { + background-image: url('../images/checkmarkNoBorder.gif'); +} + +.claro .dijitCheckBox, +.claro .dijitCheckBoxIcon /* inside a toggle button */ { + background-image: url('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 /* inside a toggle button */ { + background-image: url('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; +} + + 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 <input> where user types and the validation icon, + to match the 1px border on arrow button */ +.claro .dijitTextBox .dijitInputInner, .claro .dijitTextBox .dijitValidationContainer { + padding: 1px 0; } .claro .dijitComboBox .dijitButtonNode { - background-color: #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; } diff --git a/lib/dijit/themes/claro/form/Common.less b/lib/dijit/themes/claro/form/Common.less new file mode 100644 index 000000000..729867a67 --- /dev/null +++ b/lib/dijit/themes/claro/form/Common.less @@ -0,0 +1,194 @@ +/* claro/form/Common.css */ + +/*========================= common css =========================*/ + +@import "../variables"; + +/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ + +.claro .dijitTextBoxError .dijitValidationContainer { + background-color: @erroricon-background-color; + background-image: url('images/error.png'); + background-position: top center; + border: solid @erroricon-background-color 0; + border-left-width: 1px; + width: 9px; +} +.claro .dijitTextBoxError .dijitValidationIcon { + width: 0; + background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */ +} + +/* Padding for the input area of TextBox based widgets, and corresponding padding for the + * down arrow button and the placeholder. placeholder is explicitly listed because + * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField + * won't affect it + */ +.claro .dijitTextArea, +.claro .dijitInputField .dijitPlaceHolder { + padding: @textbox-padding; +} +.claro .dijitTextBox .dijitInputField { + // Subtract 1px from top/bottom because we add 1px to other nodes, see rules below. + // Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right, + // although that varies by so compensate for that too. + padding: @textbox-padding - 1px @textbox-padding; +} +.dj_gecko .claro .dijitTextBox .dijitInputInner, +.dj_webkit .claro .dijitTextBox .dijitInputInner { + // Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right, + // so compensate for that too. + padding: @textbox-padding - 1px; +} + +.claro .dijitTextBox, +.claro .dijitTextBox .dijitButtonNode { + /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ + border-color: @border-color; + .transition-property(background-color, border); + .transition-duration(.35s); +} +.claro .dijitTextBox { + background-color: @textbox-background-color; +} + +/* hover */ +.claro .dijitTextBoxHover, +.claro .dijitTextBoxHover .dijitButtonNode { + border-color: @hovered-border-color; + .transition-duration(.25s); +} +.claro .dijitTextBoxHover { + background-color: @textbox-hovered-background-color; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; +} + +/* error state */ +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitButtonNode { + border-color: @error-border-color; +} +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitInputContainer { + background-color: @textbox-error-background-color; +} + +/* focused state */ +.claro .dijitTextBoxFocused, +.claro .dijitTextBoxFocused .dijitButtonNode { + border-color:@focused-border-color; + .transition-duration(.1s); +} +.claro .dijitTextBoxFocused { + background-color: @textbox-focused-background-color; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; +} +.claro .dijitTextBoxFocused .dijitInputContainer { + background: @textbox-focused-background-color; +} + +.claro .dijitTextBoxErrorFocused, +.claro .dijitTextBoxErrorFocused .dijitButtonNode { + border-color: @error-focused-border-color; +} + +/* disabled state */ +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitButtonNode { + border-color: @disabled-border-color; +} +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitInputContainer { + background-color: @textbox-disabled-background-color; + background-image: none; + color: @disabled-text-color; +} + +/*========================= for special widgets =========================*/ + +/* Input boxes with an arrow (for a drop down) */ + +.claro .dijitComboBox .dijitArrowButtonInner { + background-image: url("images/commonFormArrows.png"); + background-position:-35px 53%; + background-repeat: no-repeat; + margin: 0; + width:16px; + border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button +} + +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} + +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} + +/* Add 1px vertical padding to the <input> where user types and the validation icon, + to match the 1px border on arrow button */ +.claro .dijitTextBox .dijitInputInner, +.claro .dijitTextBox .dijitValidationContainer { + padding: 1px 0; +} + +.claro .dijitComboBox .dijitButtonNode { + background-color: @arrowbutton-background-color; + background-image: url("images/formHighlight.png"); + background-repeat:repeat-x; +} + +/* Arrow "hover" effect: + * The arrow button should change color whenever the mouse is in a position such that clicking it + * will toggle the drop down. That's either (1) anywhere over the ComboBox or (2) over the arrow + * button, depending on the openOnClick setting for the widget. + */ +.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, +.claro .dijitComboBox .dijitDownArrowButtonHover { + background-color:@arrowbutton-hovered-background-color; +} +.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, +.claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position:-70px 53%; +} + +/* Arrow Button change when drop down is open */ +.claro .dijitComboBox .dijitHasDropDownOpen { // .dijitHasDropDown is on dijitArrowButton node + background-color: @pressed-background-color; + background-position:0 -177px; + padding: 1px; // Since no border on arrow button (see rule below) +} +.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + background-position:-70px 53%; + border: 0 none; +} + +/* disabled state */ +.claro div.dijitComboBoxDisabled .dijitArrowButtonInner { + /* specific selector set to override background-position setting from Button.js + * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ + background-position:0 50%; + background-color:@disabled-background-color; +} + +/*========================= hacks for browsers =========================*/ +/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */ +.dj_ff3 .claro .dijitInputField input[type="hidden"] { + display: none; + height: 0; + width: 0; +} + +/* ie6 doesn't support transparent background img */ +.dj_ie6 .claro .dijitTextBox, +.dj_ie6 .claro .dijitComboBox .dijitButtonNode { + background-image: none; +} +.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + width:18px; // quirks mode means border-box sizing, so 18px with the border (same as 16px without border) +} +.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { + width:16px; // when no border, then back to 16px just like content-box sizing +}
\ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Common_rtl.css b/lib/dijit/themes/claro/form/Common_rtl.css index 065f0c70d..74827c16f 100644 --- a/lib/dijit/themes/claro/form/Common_rtl.css +++ b/lib/dijit/themes/claro/form/Common_rtl.css @@ -1,5 +1,10 @@ - -.claro .dijitTextBoxRtlError .dijitValidationContainer { - border-left-width: 0px; +/* claro/form/Common_rtl.css */ +/*claro should not have the icon on the container +.claro .dijitTextBoxRtlError .dijitValidationIcon { + border-left-width: 0; border-right-width: 1px; +}*/ +.claro .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; } diff --git a/lib/dijit/themes/claro/form/Common_rtl.less b/lib/dijit/themes/claro/form/Common_rtl.less new file mode 100644 index 000000000..fd4975a51 --- /dev/null +++ b/lib/dijit/themes/claro/form/Common_rtl.less @@ -0,0 +1,13 @@ +/* claro/form/Common_rtl.css */ + +@import "../variables"; + +/*claro should not have the icon on the container +.claro .dijitTextBoxRtlError .dijitValidationIcon { + border-left-width: 0; + border-right-width: 1px; +}*/ +.claro .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; +} diff --git a/lib/dijit/themes/claro/form/NumberSpinner.css b/lib/dijit/themes/claro/form/NumberSpinner.css index 66b97da62..bc6e1aeb6 100644 --- a/lib/dijit/themes/claro/form/NumberSpinner.css +++ b/lib/dijit/themes/claro/form/NumberSpinner.css @@ -1,100 +1,138 @@ - +/* 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; + overflow: hidden; + position: relative; + width: auto; + padding: 0 2px; } .claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { - border-width: 1px 0; - border-style: solid none; + 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: #ebeef4; - background-image: url("images/formHighlight.png"); - background-position:0px 0px; - background-repeat:repeat-x; - overflow: hidden; + width: auto; + background-color: #efefef; + background-image: url("images/formHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; + overflow: hidden; } .dj_iequirks .claro .dijitSpinner .dijitArrowButton { - overflow: visible; + overflow: visible; + /* 0 height w/o this */ + } .claro .dijitSpinner .dijitSpinnerButtonInner { - width: 15px; + width: 15px; } +/* up & down button icons */ .claro .dijitSpinner .dijitArrowButtonInner { - border:solid 1px #fff; - border-bottom-width: 0; - background-image: url("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 0px -1px 0px; - #margin-top: 0; + border: solid 1px #ffffff; + border-bottom-width: 0; + /* 2 top borders = 1 top+bottom border in ComboBox */ + + background-image: url("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_ie6 .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { + margin-top: 0; + /* since its bottom aligned */ + } .dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { - width: 19px; + width: 19px; } .claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { - background-position:-34px; + background-position: -34px; } .claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { - padding: 0; + padding: 0; } -.claro .dijitUpArrowButtonActive, -.claro .dijitDownArrowButtonActive { - background-color:#abd6ff; +/** hover & focused status **/ +.claro .dijitUpArrowButtonActive, .claro .dijitDownArrowButtonActive { + background-color: #abd6ff; } -.claro .dijitSpinner .dijitUpArrowButtonHover, -.claro .dijitSpinner .dijitDownArrowButtonHover, -.claro .dijitSpinnerFocused .dijitArrowButton { - background-color: #a0d1ff; +.claro .dijitSpinner .dijitUpArrowButtonHover, .claro .dijitSpinner .dijitDownArrowButtonHover, .claro .dijitSpinnerFocused .dijitArrowButton { + background-color: #abd6ff; } .claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { - background-position:-174px; + background-position: -174px; } .claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { - background-position:-69px; + background-position: -69px; } .claro .dijitSpinnerFocused { - background-color: #fff; - background-image: none; + background-color: #ffffff; + background-image: none; } -.claro .dijitSpinner .dijitDownArrowButtonActive, -.claro .dijitSpinner .dijitUpArrowButtonActive { - background-color: #3299f9; - background-position:0px -177px; +/* mouse down status */ +.claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive { + background-color: #7dbefa; + background-position: 0 -177px; } -.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, -.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - - border: 0px; - padding: 1px; - margin-right:2px; - margin-bottom:1px; +.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; + background-position: -173px; } .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - background-position:-68px; + background-position: -68px; } +/* disabled */ .claro .dijitSpinnerDisabled .dijitArrowButtonInner { - background-color: #f1f1f1; + background-color: #efefef; } .claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position:-104px; + background-position: -104px; } .claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { - background-position:1px; + 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; -} + overflow: visible; +} diff --git a/lib/dijit/themes/claro/form/NumberSpinner.less b/lib/dijit/themes/claro/form/NumberSpinner.less new file mode 100644 index 000000000..ca78afb35 --- /dev/null +++ b/lib/dijit/themes/claro/form/NumberSpinner.less @@ -0,0 +1,150 @@ +/* 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 + */ + +@import "../variables"; + +.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: @arrowbutton-background-color; + background-image: url("images/formHighlight.png"); + background-position:0 0; + background-repeat:repeat-x; + 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 @arrowbutton-inner-border-color; + border-bottom-width: 0; /* 2 top borders = 1 top+bottom border in ComboBox */ + background-image: url("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_ie6 .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie7 .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:@arrowbutton-pressed-background-color; +} + +.claro .dijitSpinner .dijitUpArrowButtonHover, +.claro .dijitSpinner .dijitDownArrowButtonHover, +.claro .dijitSpinnerFocused .dijitArrowButton { + background-color: @arrowbutton-hovered-background-color; +} + +.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { + background-position:-174px; +} +.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position:-69px; +} + +.claro .dijitSpinnerFocused { + background-color: @textbox-focused-background-color; + background-image: none; +} + +/* mouse down status */ +.claro .dijitSpinner .dijitDownArrowButtonActive, +.claro .dijitSpinner .dijitUpArrowButtonActive { + background-color: #7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior. + background-position:0 -177px; +} +.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: @disabled-background-color; +} +.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; +}
\ 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 b9058d1b9..4dc3ad47d 100644 --- a/lib/dijit/themes/claro/form/RadioButton.css +++ b/lib/dijit/themes/claro/form/RadioButton.css @@ -1,51 +1,79 @@ - -.claro .dijitToggleButton .dijitRadio, -.claro .dijitToggleButton .dijitRadioIcon { - background-image: url('images/checkboxRadioButtonStates.png'); +/* 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('images/checkboxRadioButtonStates.png'); } -.dj_ie6 .claro .dijitToggleButton .dijitRadio, -.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); +.dj_ie6 .claro .dijitToggleButton .dijitRadio, .dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { + background-image: url('images/checkboxAndRadioButtons_IE6.png'); } -.claro .dijitRadio, -.claro .dijitRadioIcon { - background-image: url('images/checkboxRadioButtonStates.png'); - background-repeat: no-repeat; - width: 15px; - height: 15px; - margin: 0px 2px 0px 0px; - padding: 0px; +.claro .dijitRadio, .claro .dijitRadioIcon { + /* inside a toggle button */ + + background-image: url('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 { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); +.dj_ie6 .claro .dijitRadio, .dj_ie6 .claro .dijitRadioIcon { + /* inside a toggle button */ + + background-image: url('images/checkboxAndRadioButtons_IE6.png'); + /* checkbox sprite image */ + } -.claro .dijitRadio{ - - background-position: -105px; +.claro .dijitRadio { + /* unselected */ + + background-position: -105px; } .claro .dijitToggleButton .dijitRadioIcon { - - background-position: -107px; + /* unselected */ + + background-position: -107px; } .claro .dijitRadioDisabled { - - background-position: -165px; + /* unselected and disabled */ + + background-position: -165px; } .claro .dijitRadioHover { - - background-position: -135px; + /* hovering over an unselected enabled radio button */ + + background-position: -135px; } -.claro .dijitRadioChecked{ - background-position: -90px; +.claro .dijitRadioChecked { + background-position: -90px; } .claro .dijitToggleButtonChecked .dijitRadioIcon { - background-position: -92px; + background-position: -92px; } -.claro .dijitRadioCheckedHover{ - background-position: -120px; +.claro .dijitRadioCheckedHover { + background-position: -120px; } .claro .dijitRadioCheckedDisabled { - - background-position: -150px; + /* selected but disabled */ + + background-position: -150px; } diff --git a/lib/dijit/themes/claro/form/RadioButton.less b/lib/dijit/themes/claro/form/RadioButton.less new file mode 100644 index 000000000..18f1cc163 --- /dev/null +++ b/lib/dijit/themes/claro/form/RadioButton.less @@ -0,0 +1,84 @@ +/* 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 + */ + +@import "../variables"; + +.claro .dijitToggleButton .dijitRadio, +.claro .dijitToggleButton .dijitRadioIcon { + background-image: url('images/checkboxRadioButtonStates.png'); +} + +.dj_ie6 .claro .dijitToggleButton .dijitRadio, +.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { + background-image: url('images/checkboxAndRadioButtons_IE6.png'); +} + +.claro .dijitRadio, +.claro .dijitRadioIcon { /* inside a toggle button */ + background-image: url('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('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; +} diff --git a/lib/dijit/themes/claro/form/Select.css b/lib/dijit/themes/claro/form/Select.css index c8f1d43fa..a30ede640 100644 --- a/lib/dijit/themes/claro/form/Select.css +++ b/lib/dijit/themes/claro/form/Select.css @@ -1,89 +1,109 @@ - +/* 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 + */ .claro .dijitSelect .dijitButtonText { - padding: 0px 5px 2px 5px; + padding: 2px; } +/* normal status */ .claro .dijitSelect { - border: 1px solid #b5bcc7; - background-color: #f7fcff; - border-collapse: separate; + border: 1px solid #b5bcc7; + background-color: #ffffff; + border-collapse: separate; } -.dj_ie6 .claro .dijitSelect, -.dj_ie6 .claro .dijitSelect .dijitButtonNode { - background-image:none; +.dj_ie6 .claro .dijitSelect, .dj_ie6 .claro .dijitSelect .dijitButtonNode { + background-image: none; } .claro .dijitSelect .dijitButtonContents { - border: 0px solid #b5bcc7; - border-right-width: 1px; + border: 0 solid #b5bcc7; + border-right-width: 1px; } .claro .dijitSelect .dijitArrowButton { - padding: 0; - border: 1px solid #fff; - border-top:none; - background-color:#ebeef4; - background-image: url("images/formHighlight.png"); - background-repeat:repeat-x; + padding: 0; + border: 1px solid #ffffff; + border-top: none; + background-color: #efefef; + background-image: url("images/formHighlight.png"); + background-repeat: repeat-x; } .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - background-image: url("images/commonFormArrows.png"); - background-position:-35px 70%; - background-repeat: no-repeat; - width:16px; - height:16px; - display:block; + background-image: url("images/commonFormArrows.png"); + background-position: -35px 70%; + background-repeat: no-repeat; + width: 16px; + height: 16px; } +/* hover status */ .claro .dijitSelectHover { - border: 1px solid #769dc0; - background-color: #e9f4fe; - background-image: url('images/textBox_back.png'); - background-repeat: repeat-x; + border: 1px solid #769dc0; + background-color: #e9f4fe; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; } .claro .dijitSelectHover .dijitButtonContents { - border-color:#81a5c6; + border-color: #769dc0; } .claro .dijitSelectHover .dijitArrowButton { - background-color:#abd6ff; + background-color: #abd6ff; } .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; + background-position: -70px 70%; } +/* focused status */ .claro .dijitSelectFocused { - border: 1px solid #769dc0; + border: 1px solid #769dc0; } .claro .dijitSelectFocused .dijitButtonContents { - border-color:#81a5c6; + border-color: #769dc0; } .claro .dijitSelectFocused .dijitArrowButton { - background-color:#7dbefa; - background-position:0px -177px; - border: none; - padding: 0px 1px; + background-color: #7dbefa; + background-position: 0 -177px; + border: none; + padding: 0 1px; } .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; - margin-bottom: 1px; + background-position: -70px 70%; + margin-bottom: 1px; } +/* disable status */ .claro .dijitSelectDisabled { - border: 1px solid #d3d3d3; - background-color: #efefef; - background-image: none; - color: #818181; + border: 1px solid #d3d3d3; + background-color: #efefef; + background-image: none; + color: #818181; } -.claro .dijitSelectDisabled .dijitArrowButton { - background-color: #efefef; +.claro .dijitSelectDisabled .dijitArrowButton { + background-color: #efefef; } .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { - background-position:0px 70% + background-position: 0 70%; } -.claro .dijitSelectMenu td.dijitMenuItemIconCell, -.claro .dijitSelectMenu td.dijitMenuArrowCell { - - display: none; +/* 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 { - - padding-left: 5px; - padding-right: 5px; + /* line up menu text with text in select box (in LTR and RTL modes) */ + + padding: 2px; } .claro .dijitSelectMenu .dijitMenuSeparatorTop { - border-bottom:1px solid #769dc0; + border-bottom: 1px solid #769dc0; } diff --git a/lib/dijit/themes/claro/form/Select.less b/lib/dijit/themes/claro/form/Select.less new file mode 100644 index 000000000..c429b2e48 --- /dev/null +++ b/lib/dijit/themes/claro/form/Select.less @@ -0,0 +1,124 @@ +/* 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 + */ + +@import "../variables"; + +.claro .dijitSelect .dijitButtonText { + padding: @textbox-padding; +} + +/* normal status */ +.claro .dijitSelect { + border: 1px solid @border-color; + background-color: @textbox-background-color; + border-collapse: separate; +} +.dj_ie6 .claro .dijitSelect, +.dj_ie6 .claro .dijitSelect .dijitButtonNode { + background-image:none; +} + +.claro .dijitSelect .dijitButtonContents { + border: 0 solid @border-color; + border-right-width: 1px; +} + +.claro .dijitSelect .dijitArrowButton { + padding: 0; + border: 1px solid @arrowbutton-inner-border-color; + border-top:none; + background-color: @arrowbutton-background-color; + background-image: url("images/formHighlight.png"); + background-repeat:repeat-x; +} + +.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { + background-image: url("images/commonFormArrows.png"); + background-position:-35px 70%; + background-repeat: no-repeat; + width:16px; + height:16px; +} + +/* hover status */ +.claro .dijitSelectHover { + border: 1px solid @hovered-border-color; + background-color: @textbox-hovered-background-color; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; +} + +.claro .dijitSelectHover .dijitButtonContents { + border-color:@hovered-border-color; +} + +.claro .dijitSelectHover .dijitArrowButton { + background-color:@arrowbutton-hovered-background-color; +} +.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { + background-position:-70px 70%; +} + +/* focused status */ +.claro .dijitSelectFocused { + border: 1px solid @focused-border-color; +} +.claro .dijitSelectFocused .dijitButtonContents { + border-color:@focused-border-color; +} +.claro .dijitSelectFocused .dijitArrowButton { + background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior. + background-position:0 -177px; + border: none; + padding: 0 1px; +} +.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { + background-position:-70px 70%; + margin-bottom: 1px; +} + +/* disable status */ +.claro .dijitSelectDisabled { + border: 1px solid @disabled-border-color; + background-color: @disabled-background-color; + background-image: none; + color: @disabled-text-color; +} +.claro .dijitSelectDisabled .dijitArrowButton { + background-color: @disabled-background-color; +} +.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { + background-position:0 70% +} + +/* 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: @textbox-padding; +} + +.claro .dijitSelectMenu .dijitMenuSeparatorTop { + border-bottom:1px solid @focused-border-color; +} diff --git a/lib/dijit/themes/claro/form/Select_rtl.css b/lib/dijit/themes/claro/form/Select_rtl.css index 43797508f..a14d4ec42 100644 --- a/lib/dijit/themes/claro/form/Select_rtl.css +++ b/lib/dijit/themes/claro/form/Select_rtl.css @@ -1,4 +1,4 @@ .claro .dijitSelectRtl .dijitButtonContents { - border-right-width: 0px; - border-left-width: 1px; + border-right-width: 0; + border-left-width: 1px; } diff --git a/lib/dijit/themes/claro/form/Select_rtl.less b/lib/dijit/themes/claro/form/Select_rtl.less new file mode 100644 index 000000000..ffa40dc44 --- /dev/null +++ b/lib/dijit/themes/claro/form/Select_rtl.less @@ -0,0 +1,6 @@ +@import "../variables"; + +.claro .dijitSelectRtl .dijitButtonContents { + border-right-width: 0; + border-left-width: 1px; +} diff --git a/lib/dijit/themes/claro/form/Slider.css b/lib/dijit/themes/claro/form/Slider.css index 51c2c2313..5694e8c76 100644 --- a/lib/dijit/themes/claro/form/Slider.css +++ b/lib/dijit/themes/claro/form/Slider.css @@ -1,204 +1,242 @@ - +/* 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; + border-style: solid; + outline: 1px; } .claro .dijitSliderFocused .dijitSliderBar { - border-color: #769dc0; + border-color: #769dc0; } .claro .dijitSliderHover .dijitSliderBar { - border-color: #769dc0; + border-color: #769dc0; } .claro .dijitSliderDisabled .dijitSliderBar { - background-image: none; - border-color: #d3d3d3; + background-image: none; + border-color: #d3d3d3; } +/* Horizontal Slider */ .claro .dijitRuleLabelsContainerH { - padding: 2px 0px; -} -.claro .dijitSlider .dijitSliderProgressBarH, -.claro .dijitSlider .dijitSliderLeftBumper{ - background-image: url("images/sliderHorizontal.png"); - background-repeat:repeat-x; - background-position:0 -20px; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarH, -.claro .dijitSlider .dijitSliderRightBumper{ - background-image: url("images/sliderHorizontal.png"); - background-repeat:repeat-x; - background-position:0 -11px; - border-color: #b5bcc7; - background-color: #fff; + padding: 2px 0; +} +.claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper { + background-image: url("images/sliderHorizontal.png"); + background-repeat: repeat-x; + background-position: 0 -20px; + border-color: #b5bcc7; + background-color: #cfe5fa; +} +.claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper { + background-image: url("images/sliderHorizontal.png"); + background-repeat: repeat-x; + background-position: 0 -11px; + border-color: #b5bcc7; + background-color: #ffffff; } .claro .dijitSliderRightBumper { - border-right: solid 1px #b5bcc7; + border-right: solid 1px #b5bcc7; } .claro .dijitSliderLeftBumper { - border-left: solid 1px #b5bcc7; -} -.claro .dijitSliderHover .dijitSliderProgressBarH, -.claro .dijitSliderHover .dijitSliderLeftBumper{ - background-position:0 -20px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderHover .dijitSliderRemainingBarH, -.claro .dijitSliderHover .dijitSliderRightBumper{ - background-position:0 0px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderProgressBarH, -.claro .dijitSliderFocused .dijitSliderLeftBumper{ - background-position:0 -30px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderRemainingBarH, -.claro .dijitSliderFocused .dijitSliderRightBumper{ - background-position:0 -9px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderDisabled .dijitSliderProgressBarH, -.claro .dijitSliderDisabled .dijitSliderLeftBumper{ - background-color: #cdcdcd; - background-image:none; -} -.claro .dijitSliderDisabled .dijitSliderRemainingBarH, -.claro .dijitSliderDisabled .dijitSliderRightBumper{ - background-color: #efefef; + border-left: solid 1px #b5bcc7; +} +.claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper { + background-position: 0 -20px; + background-color: #abd6ff; + border-color: #769dc0; +} +.claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper { + background-position: 0 0; + background-color: #ffffff; + border-color: #769dc0; +} +.claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper { + background-position: 0 -30px; + background-color: #abd6ff; + border-color: #769dc0; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper { + background-position: 0 -9px; + background-color: #ffffff; + border-color: #769dc0; +} +.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: 0px 2px; -} -.claro .dijitSlider .dijitSliderProgressBarV, -.claro .dijitSlider .dijitSliderBottomBumper{ - background-image: url("images/sliderVertical.png"); - background-repeat:repeat-y; - background-position:-36px 0; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarV, -.claro .dijitSlider .dijitSliderTopBumper{ - background-image: url("images/sliderVertical.png"); - background-repeat:repeat-y; - background-position:-3px 0; - border-color: #b5bcc7; - background-color: #fff; + padding: 0 2px; +} +.claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper { + background-image: url("images/sliderVertical.png"); + background-repeat: repeat-y; + background-position: -36px 0; + border-color: #b5bcc7; + background-color: #cfe5fa; +} +.claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper { + background-image: url("images/sliderVertical.png"); + background-repeat: repeat-y; + background-position: -3px 0; + border-color: #b5bcc7; + background-color: #ffffff; } .claro .dijitSliderBottomBumper { - border-bottom: solid 1px #b5bcc7; + border-bottom: solid 1px #b5bcc7; } .claro .dijitSliderTopBumper { - border-top: solid 1px #b5bcc7; + border-top: solid 1px #b5bcc7; } -.claro .dijitSliderHover .dijitSliderProgressBarV, -.claro .dijitSliderHover .dijitSliderBottomBumper{ - background-position:-36px 0; - background-color: #abd6ff; +.claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper { + background-position: -36px 0; + background-color: #abd6ff; } -.claro .dijitSliderHover .dijitSliderRemainingBarV, -.claro .dijitSliderHover .dijitSliderTopBumper{ - background-position:0 0; - background-color: #fff; +.claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper { + background-position: 0 0; + background-color: #ffffff; } -.claro .dijitSliderFocused .dijitSliderProgressBarV, -.claro .dijitSliderFocused .dijitSliderBottomBumper{ - background-position:-56px 0; - background-color: #abd6ff; +.claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper { + background-position: -56px 0; + background-color: #abd6ff; } -.claro .dijitSliderFocused .dijitSliderRemainingBarV, -.claro .dijitSliderFocused .dijitSliderTopBumper{ - background-position:-18px 0; - background-color: #fff; +.claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper { + background-position: -18px 0; + background-color: #ffffff; } -.claro .dijitSliderDisabled .dijitSliderProgressBarV, -.claro .dijitSliderDisabled .dijitSliderBottomBumper{ - background-color: #cdcdcd; +.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; +.claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper { + background-color: #efefef; } +/* ------- Thumbs ------- */ .claro .dijitSliderImageHandleH { - border: 0px; - width: 18px; - height: 16px; - background-image: url("images/sliderThumbs.png"); - background-repeat:no-repeat; - background-position:0 0; + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat: no-repeat; + background-position: 0 0; } .claro .dijitSliderHover .dijitSliderImageHandleH { - background-position:-18px 0; + background-position: -18px 0; } .claro .dijitSliderFocused .dijitSliderImageHandleH { - background-position:-36px 0; + background-position: -36px 0; } -.claro .dijitSliderProgressBarH .dijitSliderThumbHover{ - background-position:-36px 0; +.claro .dijitSliderProgressBarH .dijitSliderThumbHover { + background-position: -36px 0; } -.claro .dijitSliderProgressBarH .dijitSliderThumbActive{ - background-position:-36px 0; +.claro .dijitSliderProgressBarH .dijitSliderThumbActive { + background-position: -36px 0; } -.claro .dijitSliderReadOnly .dijitSliderImageHandleH, -.claro .dijitSliderDisabled .dijitSliderImageHandleH { - background-position:-54px 0; +.claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH { + background-position: -54px 0; } .claro .dijitSliderImageHandleV { - border: 0px; - width: 18px; - height: 16px; - background-image: url("images/sliderThumbs.png"); - background-repeat:no-repeat; - background-position:-289px 0; + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat: no-repeat; + background-position: -289px 0; } .claro .dijitSliderHover .dijitSliderImageHandleV { - background-position:-307px 0; + background-position: -307px 0; } .claro .dijitSliderFocused .dijitSliderImageHandleV { - background-position:-325px 0; + background-position: -325px 0; } -.claro .dijitSliderProgressBarV .dijitSliderThumbHover{ - background-position:-325px 0; +.claro .dijitSliderProgressBarV .dijitSliderThumbHover { + background-position: -325px 0; } -.claro .dijitSliderProgressBarV .dijitSliderThumbActive{ - background-position:-325px 0; +.claro .dijitSliderProgressBarV .dijitSliderThumbActive { + background-position: -325px 0; } -.claro .dijitSliderReadOnly .dijitSliderImageHandleV, -.claro .dijitSliderDisabled .dijitSliderImageHandleV { - background-position:-343px 0; +.claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV { + background-position: -343px 0; } -.claro .dijitSliderButtonContainerH{ - padding: 1px 3px 1px 2px; +/* ---- Increment/Decrement Buttons ---- */ +.claro .dijitSliderButtonContainerH { + padding: 1px 3px 1px 2px; } -.claro .dijitSliderButtonContainerV{ - padding: 3px 1px 2px 1px; +.claro .dijitSliderButtonContainerV { + padding: 3px 1px 2px 1px; } .claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH, .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { - background-image: url('images/commonFormArrows.png'); - background-repeat:no-repeat; - background-color: #e9ecf2; - -moz-border-radius: 2px; - -webkit-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; + background-image: url('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, @@ -208,79 +246,73 @@ .claro .dijitSliderHover .dijitSliderIncrementIconH, .claro .dijitSliderHover .dijitSliderDecrementIconV, .claro .dijitSliderHover .dijitSliderIncrementIconV { - border: solid 1px #769dc0; - background-color:#fff; + /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ + + border: solid 1px #769dc0; + background-color: #ffffff; } .claro .dijitSliderDecrementIconH { - background-position:-357px 50%; + background-position: -357px 50%; } -.claro .dijitSliderActive .dijitSliderDecrementIconH -.claro .dijitSliderHover .dijitSliderDecrementIconH { - background-position:-393px 50%; +.claro .dijitSliderActive .dijitSliderDecrementIconH.claro .dijitSliderHover .dijitSliderDecrementIconH { + background-position: -393px 50%; } .claro .dijitSliderIncrementIconH { - background-position:-251px 50%; + background-position: -251px 50%; } -.claro .dijitSliderActive .dijitSliderIncrementIconH -.claro .dijitSliderHover .dijitSliderIncrementIconH { - background-position:-283px 50%; +.claro .dijitSliderActive .dijitSliderIncrementIconH.claro .dijitSliderHover .dijitSliderIncrementIconH { + background-position: -283px 50%; } .claro .dijitSliderDecrementIconV { - background-position:-38px 50%; + background-position: -38px 50%; } -.claro .dijitSliderActive .dijitSliderDecrementIconV -.claro .dijitSliderHover .dijitSliderDecrementIconV { - background-position:-73px 50%; +.claro .dijitSliderActive .dijitSliderDecrementIconV.claro .dijitSliderHover .dijitSliderDecrementIconV { + background-position: -73px 50%; } .claro .dijitSliderIncrementIconV { - background-position:-143px 49%; + background-position: -143px 49%; } -.claro .dijitSliderActive .dijitSliderIncrementIconV -.claro .dijitSliderHover .dijitSliderIncrementIconV { - background-position:-178px 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: #cce3fc; + background-color: #cfe5fa; } .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { - background-color: #a5d0fc; - border-color:#6591b9; + background-color: #abd6ff; + border-color: #769dc0; } .claro .dijitSliderButtonInner { - visibility: hidden; + visibility: hidden; } -.claro .dijitSliderDisabled .dijitSliderBar{ - border-color: #d3d3d3; +.claro .dijitSliderDisabled .dijitSliderBar { + border-color: #d3d3d3; } -.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { - border-color: #d3d3d3; - color: #bdbdbd; +.claro .dijitSliderReadOnly *, .claro .dijitSliderDisabled * { + border-color: #d3d3d3; + color: #818181; } -.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, -.claro .dijitSliderDisabled .dijitSliderDecrementIconH { - background-position:-321px 50%; - background-color:#e9e9e9; +.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:#e9e9e9; +.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:#e9e9e9; +.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:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV { + background-position: -107px 49%; + background-color: #efefef; } .dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, .dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, @@ -290,5 +322,5 @@ .dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, .dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, .dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { - background-image:none; + background-image: none; } diff --git a/lib/dijit/themes/claro/form/Slider.less b/lib/dijit/themes/claro/form/Slider.less new file mode 100644 index 000000000..82451b506 --- /dev/null +++ b/lib/dijit/themes/claro/form/Slider.less @@ -0,0 +1,362 @@ +/* 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 + */ + +@import "../variables"; + +.claro .dijitSliderBar { + border-style: solid; + outline: 1px; +} +.claro .dijitSliderFocused .dijitSliderBar { + border-color: @focused-border-color; +} +.claro .dijitSliderHover .dijitSliderBar { + border-color: @hovered-border-color; +} +.claro .dijitSliderDisabled .dijitSliderBar { + background-image: none; + border-color: @disabled-border-color; +} + +/* Horizontal Slider */ + +.claro .dijitRuleLabelsContainerH { + padding: 2px 0; +} +.claro .dijitSlider .dijitSliderProgressBarH, +.claro .dijitSlider .dijitSliderLeftBumper{ + background-image: url("images/sliderHorizontal.png"); + background-repeat:repeat-x; + background-position:0 -20px; + border-color: @border-color; + background-color: @slider-fullbar-background-color; +} +.claro .dijitSlider .dijitSliderRemainingBarH, +.claro .dijitSlider .dijitSliderRightBumper{ + background-image: url("images/sliderHorizontal.png"); + background-repeat:repeat-x; + background-position:0 -11px; + border-color: @border-color; + background-color: @slider-remainingbar-background-color; +} +.claro .dijitSliderRightBumper { + border-right: solid 1px @border-color; +} +.claro .dijitSliderLeftBumper { + border-left: solid 1px @border-color; +} +.claro .dijitSliderHover .dijitSliderProgressBarH, +.claro .dijitSliderHover .dijitSliderLeftBumper{ + background-position:0 -20px; + background-color: @slider-hovered-fullbar-background-color; + border-color: @hovered-border-color; +} +.claro .dijitSliderHover .dijitSliderRemainingBarH, +.claro .dijitSliderHover .dijitSliderRightBumper{ + background-position:0 0; + background-color: @slider-hovered-remainingbar-background-color; + border-color: @hovered-border-color; +} +.claro .dijitSliderFocused .dijitSliderProgressBarH, +.claro .dijitSliderFocused .dijitSliderLeftBumper{ + background-position:0 -30px; + background-color: @slider-focused-fullbar-background-color; + border-color: @focused-border-color; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarH, +.claro .dijitSliderFocused .dijitSliderRightBumper{ + background-position:0 -9px; + background-color: @slider-focused-remainingbar-background-color; + border-color: @focused-border-color; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarH, +.claro .dijitSliderDisabled .dijitSliderLeftBumper{ + background-color: @disabled-border-color; /* left side of slider, fill matches border */ + background-image:none; +} +.claro .dijitSliderDisabled .dijitSliderRemainingBarH, +.claro .dijitSliderDisabled .dijitSliderRightBumper{ + background-color: @disabled-background-color; +} + +/* Vertical Slider */ + +.claro .dijitRuleLabelsContainerV { + padding: 0 2px; +} +.claro .dijitSlider .dijitSliderProgressBarV, +.claro .dijitSlider .dijitSliderBottomBumper{ + background-image: url("images/sliderVertical.png"); + background-repeat:repeat-y; + background-position:-36px 0; + border-color: @border-color; + background-color: @slider-fullbar-background-color; +} +.claro .dijitSlider .dijitSliderRemainingBarV, +.claro .dijitSlider .dijitSliderTopBumper{ + background-image: url("images/sliderVertical.png"); + background-repeat:repeat-y; + background-position:-3px 0; + border-color: @border-color; + background-color: @slider-remainingbar-background-color; +} +.claro .dijitSliderBottomBumper { + border-bottom: solid 1px @border-color; +} +.claro .dijitSliderTopBumper { + border-top: solid 1px @border-color; +} +.claro .dijitSliderHover .dijitSliderProgressBarV, +.claro .dijitSliderHover .dijitSliderBottomBumper{ + background-position:-36px 0; + background-color: @slider-hovered-fullbar-background-color; +} +.claro .dijitSliderHover .dijitSliderRemainingBarV, +.claro .dijitSliderHover .dijitSliderTopBumper{ + background-position:0 0; + background-color: @slider-hovered-remainingbar-background-color; +} +.claro .dijitSliderFocused .dijitSliderProgressBarV, +.claro .dijitSliderFocused .dijitSliderBottomBumper{ + background-position:-56px 0; + background-color: @slider-focused-fullbar-background-color; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarV, +.claro .dijitSliderFocused .dijitSliderTopBumper{ + background-position:-18px 0; + background-color: @slider-focused-remainingbar-background-color; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarV, +.claro .dijitSliderDisabled .dijitSliderBottomBumper{ + background-color: @disabled-border-color; /* bottom side of slider, fill matches border */ +} +.claro .dijitSliderDisabled .dijitSliderRemainingBarV, +.claro .dijitSliderDisabled .dijitSliderTopBumper{ + background-color: @disabled-background-color; +} + + +/* ------- Thumbs ------- */ + +.claro .dijitSliderImageHandleH { + border: 0; + width: 18px; + height: 16px; + background-image: url("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("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('images/commonFormArrows.png'); + background-repeat:no-repeat; + background-color: @arrowbutton-background-color; + .border-radius(2px); + border: solid 1px @border-color; + 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 @hovered-border-color; + background-color: @slider-hoveredButton-background-color; +} + +.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: @slider-button-hovered-background-color; +} +.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, +.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, +.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, +.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { + background-color: @slider-button-pressed-background-color; + border-color:@pressed-border-color; +} +.claro .dijitSliderButtonInner { + visibility: hidden; +} +.claro .dijitSliderDisabled .dijitSliderBar{ + border-color: @disabled-border-color; +} +.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { + border-color: @disabled-border-color; + color: @disabled-text-color; +} +.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, +.claro .dijitSliderDisabled .dijitSliderDecrementIconH { + background-position:-321px 50%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, +.claro .dijitSliderDisabled .dijitSliderIncrementIconH { + background-position:-215px 50%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, +.claro .dijitSliderDisabled .dijitSliderDecrementIconV { + background-position:-3px 49%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, +.claro .dijitSliderDisabled .dijitSliderIncrementIconV { + background-position:-107px 49%; + background-color:@disabled-background-color; +} + +.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, +.dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH, +.dj_ie6 .claro .dijitSlider .dijitSliderRightBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV, +.dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, +.dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { + background-image:none; +} diff --git a/lib/dijit/themes/claro/form/Slider_rtl.css b/lib/dijit/themes/claro/form/Slider_rtl.css index ebff4268d..97e078b9f 100644 --- a/lib/dijit/themes/claro/form/Slider_rtl.css +++ b/lib/dijit/themes/claro/form/Slider_rtl.css @@ -3,24 +3,22 @@ .claro .dijitSliderRtl .dijitSliderLeftBumper, .claro .dijitSliderRtl .dijitSliderRightBumper, .claro .dijitSliderRtl .dijitSliderTopBumper { - background-position: top right; + background-position: top right; } -.claro .dijitSliderRtl .dijitSliderProgressBarV, -.claro .dijitSliderRtl .dijitSliderRemainingBarV, -.claro .dijitSliderRtl .dijitSliderBottomBumper { - background-position: bottom right; +.claro .dijitSliderRtl .dijitSliderProgressBarV, .claro .dijitSliderRtl .dijitSliderRemainingBarV, .claro .dijitSliderRtl .dijitSliderBottomBumper { + background-position: bottom right; } .claro .dijitSliderRtl .dijitSliderLeftBumper { - border-left-width: 0px; - border-right-width: 1px; + border-left-width: 0; + border-right-width: 1px; } .claro .dijitSliderRtl .dijitSliderRightBumper { - border-left-width: 1px; - border-right-width: 0px; + border-left-width: 1px; + border-right-width: 0; } .claro .dijitSliderRtl .dijitSliderIncrementIconH { - background-position:-357px 50%; + background-position: -357px 50%; } .claro .dijitSliderRtl .dijitSliderDecrementIconH { - background-position:-251px 50%; + background-position: -251px 50%; } diff --git a/lib/dijit/themes/claro/form/Slider_rtl.less b/lib/dijit/themes/claro/form/Slider_rtl.less new file mode 100644 index 000000000..66a711668 --- /dev/null +++ b/lib/dijit/themes/claro/form/Slider_rtl.less @@ -0,0 +1,33 @@ +@import "../variables"; + +.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%; +} |