diff options
Diffstat (limited to 'lib/dijit/themes/claro/form')
25 files changed, 310 insertions, 260 deletions
diff --git a/lib/dijit/themes/claro/form/Button.css b/lib/dijit/themes/claro/form/Button.css index bc7c3dc18..f7718c105 100644 --- a/lib/dijit/themes/claro/form/Button.css +++ b/lib/dijit/themes/claro/form/Button.css @@ -43,16 +43,20 @@ border: 1px solid #759dc0; padding: 2px 4px 4px 4px; - background-image: url("../form/images/button.png"); - background-position: center top; - background-repeat: repeat-x; - background-color: #e5f2fe; color: #000000; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + background-color: #bcd8f4; + background-image: url("images/buttonEnabled.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); + background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); + background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); + background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); + _background-image: none; } .claro .dijitComboButton .dijitArrowButton { border-left-width: 0; @@ -100,7 +104,7 @@ .claro .dijitComboButton .dijitButtonNodeHover, .claro .dijitComboButton .dijitDownArrowButtonHover, .claro .dijitToggleButtonHover .dijitButtonNode { - background-color: #abd6ff; + background-color: #86bdf2; color: #000000; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; @@ -111,11 +115,11 @@ .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, .claro .dijitToggleButtonActive .dijitButtonNode, -.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode { - 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); +.claro .dijitToggleButtonChecked .dijitButtonNode { + background-color: #86bdf2; + -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; @@ -132,13 +136,18 @@ .claro .dijitDropDownButtonDisabled .dijitButtonNode, .claro .dijitComboButtonDisabled .dijitButtonNode, .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); + background-image: url("images/buttonDisabled.png"); + background-image: -moz-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); + background-image: -webkit-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); + background-image: -o-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); + background-image: linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); + _background-image: none; } .claro .dijitComboButtonDisabled .dijitArrowButton { border-left-width: 0; @@ -149,9 +158,6 @@ /* override dijit.css so that ComboBox rounded corners work */ } -.dj_ie6 .claro .dijitButtonNode { - background-image: none; -} .claro .dijitComboButton .dijitStretch { -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; diff --git a/lib/dijit/themes/claro/form/Button.less b/lib/dijit/themes/claro/form/Button.less index 208e4de52..5d5953237 100644 --- a/lib/dijit/themes/claro/form/Button.less +++ b/lib/dijit/themes/claro/form/Button.less @@ -40,16 +40,22 @@ .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("../@{image-form-button}"); - background-position: center top; - background-repeat: repeat-x; - background-color: @button-background-color; + padding: 2px 4px 4px 4px; color: @text-color; .border-radius(@button-border-radius); .box-shadow(0 1px 1px rgba(0,0,0,0.15)); + + background-color: desaturate(darken(@button-background-color, 10), 20); + + // Alpha transparency layer to add gradient to above background color. + // Use CSS gradient with fallback to image for IE. + background-image: url("images/buttonEnabled.png"); + background-repeat: repeat-x; + .alpha-white-gradient(1, 0px, 0, 3px, 0.75, 100%); + _background-image: none; // IE6 can't handle background-color and background-image at once. } + .claro .dijitComboButton .dijitArrowButton { border-left-width: 0; padding: 4px 2px 4px 2px; /* TODO: still needed? */ @@ -101,7 +107,7 @@ .claro .dijitComboButton .dijitButtonNodeHover, .claro .dijitComboButton .dijitDownArrowButtonHover, .claro .dijitToggleButtonHover .dijitButtonNode { - background-color: @button-hovered-background-color; + background-color: desaturate(darken(@button-hovered-background-color, 10), 20); color:@text-color; .transition-duration(.2s); } @@ -111,9 +117,9 @@ .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, .claro .dijitToggleButtonActive .dijitButtonNode, -.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode { - background-color: @button-pressed-background-color; - .box-shadow(0 0 0 rgba(0,0,0,0)); +.claro .dijitToggleButtonChecked .dijitButtonNode { + background-color: desaturate(darken(@button-pressed-background-color, 10), 20); + .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2)); .transition-duration(.1s); } @@ -129,13 +135,19 @@ .claro .dijitButtonDisabled .dijitButtonNode, .claro .dijitDropDownButtonDisabled .dijitButtonNode, .claro .dijitComboButtonDisabled .dijitButtonNode, -.claro .dijitToggleButtonDisabled .dijitButtonNode { - background-position:0 -149px; +.claro .dijitToggleButtonDisabled .dijitButtonNode { 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)); + + // Change the gradient from light to dark. + // Again using CSS gradient with fallback to image for IE. + background-image: url("images/buttonDisabled.png"); + .alpha-white-gradient(1, 0%, 0, 40%); + _background-image: none; // IE6 can't handle background-color and background-image at once. } + .claro .dijitComboButtonDisabled .dijitArrowButton{ border-left-width: 0; } @@ -144,10 +156,6 @@ 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); } diff --git a/lib/dijit/themes/claro/form/Common.css b/lib/dijit/themes/claro/form/Common.css index ce108c1ae..b7b91c134 100644 --- a/lib/dijit/themes/claro/form/Common.css +++ b/lib/dijit/themes/claro/form/Common.css @@ -4,15 +4,17 @@ .claro .dijitTextBox, .claro .dijitInputInner { color: #000000; } -.claro .dijitTextBoxError .dijitValidationContainer { +.claro .dijitValidationTextBoxError .dijitValidationContainer { background-color: #d46464; background-image: url("../form/images/error.png"); background-position: top center; border: solid #d46464 0; - border-left-width: 1px; width: 9px; } -.claro .dijitTextBoxError .dijitValidationIcon { +.claro .dijitTextBoxError .dijitValidationContainer { + border-left-width: 1px; +} +.claro .dijitValidationTextBoxError .dijitValidationIcon { width: 0; background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */ @@ -26,13 +28,16 @@ .claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder { padding: 2px; } -.claro .dijitTextBox .dijitInputField { +.claro .dijitSelect .dijitInputField, .claro .dijitTextBox .dijitInputField { padding: 1px 2px; } .dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner { padding: 1px; } -.claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode { +.claro .dijitSelect, +.claro .dijitSelect .dijitButtonContents, +.claro .dijitTextBox, +.claro .dijitTextBox .dijitButtonNode { /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ border-color: #b5bcc7; @@ -43,11 +48,14 @@ -moz-transition-duration: 0.35s; transition-duration: 0.35s; } -.claro .dijitTextBox { +.claro .dijitSelect, .claro .dijitTextBox { background-color: #ffffff; } /* hover */ -.claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode { +.claro .dijitSelectHover, +.claro .dijitSelectHover .dijitButtonContents, +.claro .dijitTextBoxHover, +.claro .dijitTextBoxHover .dijitButtonNode { border-color: #759dc0; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; @@ -55,18 +63,23 @@ } .claro .dijitTextBoxHover { background-color: #e5f2fe; - background-image: url("../form/images/textBox_back.png"); - background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); } /* error state */ -.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode { +.claro .dijitSelectError, +.claro .dijitSelectError .dijitButtonContents, +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitButtonNode { border-color: #d46464; } -.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer { - background-color: #ffffff; -} /* focused state */ -.claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode { +.claro .dijitSelectFocused, +.claro .dijitSelectFocused .dijitButtonContents, +.claro .dijitTextBoxFocused, +.claro .dijitTextBoxFocused .dijitButtonNode { border-color: #759dc0; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; @@ -74,27 +87,35 @@ } .claro .dijitTextBoxFocused { background-color: #ffffff; - background-image: url("../form/images/textBox_back.png"); - background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); } .claro .dijitTextBoxFocused .dijitInputContainer { background: #ffffff; } -.claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode { +.claro .dijitSelectErrorFocused, +.claro .dijitSelectErrorFocused .dijitButtonContents, +.claro .dijitTextBoxErrorFocused, +.claro .dijitTextBoxErrorFocused .dijitButtonNode { border-color: #ce5050; } /* disabled state */ -.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode { +.claro .dijitSelectDisabled, +.claro .dijitSelectDisabled .dijitButtonContents, +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitButtonNode { border-color: #d3d3d3; } -.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { +.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { background-color: #efefef; background-image: none; } -.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner { +.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner { color: #818181; } -.dj_webkit .claro .dijitTextBoxDisabled input { +.dj_webkit .claro .dijitDisabled input { /* because WebKit lightens disabled input/textarea no matter what color you specify */ color: #757575; @@ -106,12 +127,14 @@ } /*========================= for special widgets =========================*/ /* Input boxes with an arrow (for a drop down) */ -.claro .dijitComboBox .dijitArrowButtonInner { +.claro .dijitSelect .dijitArrowButtonInner, .claro .dijitComboBox .dijitArrowButtonInner { background-image: url("../form/images/commonFormArrows.png"); background-position: -35px 53%; background-repeat: no-repeat; margin: 0; width: 16px; +} +.claro .dijitComboBox .dijitArrowButtonInner { border: 1px solid #ffffff; } .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { @@ -122,13 +145,18 @@ } /* Add 1px vertical padding to the <input> where user types and the validation icon, to match the 1px border on arrow button */ -.claro .dijitTextBox .dijitInputInner, .claro .dijitTextBox .dijitValidationContainer { +.claro .dijitSelectLabel, .claro .dijitTextBox .dijitInputInner, .claro .dijitValidationTextBox .dijitValidationContainer { padding: 1px 0; } .claro .dijitComboBox .dijitButtonNode { background-color: #efefef; - background-image: url("../form/images/formHighlight.png"); + background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; } /* Arrow "hover" effect: * The arrow button should change color whenever the mouse is in a position such that clicking it @@ -144,9 +172,18 @@ /* Arrow Button change when drop down is open */ .claro .dijitComboBox .dijitHasDropDownOpen { background-color: #7dbdfa; - background-position: 0 -177px; + background-image: url("../images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 1px; } +.dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen { + padding: 1px 0; +} .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { background-position: -70px 53%; border: 0 none; @@ -166,10 +203,6 @@ height: 0; width: 0; } -/* ie6 doesn't support transparent background img */ -.dj_ie6 .claro .dijitTextBox, .dj_ie6 .claro .dijitComboBox .dijitButtonNode { - background-image: none; -} .dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { width: 18px; } diff --git a/lib/dijit/themes/claro/form/Common.less b/lib/dijit/themes/claro/form/Common.less index 742a43ff7..3c625f46f 100644 --- a/lib/dijit/themes/claro/form/Common.less +++ b/lib/dijit/themes/claro/form/Common.less @@ -13,15 +13,19 @@ color: @text-color; } -.claro .dijitTextBoxError .dijitValidationContainer { +.claro .dijitValidationTextBoxError .dijitValidationContainer { background-color: @erroricon-background-color; background-image: url("../@{image-form-error}"); background-position: top center; border: solid @erroricon-background-color 0; - border-left-width: 1px; width: 9px; } -.claro .dijitTextBoxError .dijitValidationIcon { + +.claro .dijitTextBoxError .dijitValidationContainer { + border-left-width: 1px; +} + +.claro .dijitValidationTextBoxError .dijitValidationIcon { width: 0; background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */ } @@ -35,12 +39,15 @@ .claro .dijitInputField .dijitPlaceHolder { padding: @textbox-padding; } + +.claro .dijitSelect .dijitInputField, .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, @@ -48,6 +55,8 @@ padding: @textbox-padding - 1px; } +.claro .dijitSelect, +.claro .dijitSelect .dijitButtonContents, .claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode { /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ @@ -55,70 +64,84 @@ .transition-property(background-color, border); .transition-duration(.35s); } + +.claro .dijitSelect, .claro .dijitTextBox { background-color: @textbox-background-color; } /* hover */ +.claro .dijitSelectHover, +.claro .dijitSelectHover .dijitButtonContents, .claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode { border-color: @hovered-border-color; .transition-duration(.25s); } + .claro .dijitTextBoxHover { background-color: @textbox-hovered-background-color; - background-image: url("../@{image-form-textbox-background}"); - background-repeat: repeat-x; + .textbox-background-image; } /* error state */ +.claro .dijitSelectError, +.claro .dijitSelectError .dijitButtonContents, .claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode { border-color: @error-border-color; } -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitInputContainer { - background-color: @textbox-error-background-color; -} /* focused state */ +.claro .dijitSelectFocused, +.claro .dijitSelectFocused .dijitButtonContents, .claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode { border-color:@focused-border-color; .transition-duration(.1s); } + .claro .dijitTextBoxFocused { background-color: @textbox-focused-background-color; - background-image: url("../@{image-form-textbox-background}"); - background-repeat: repeat-x; + .textbox-background-image; } .claro .dijitTextBoxFocused .dijitInputContainer { background: @textbox-focused-background-color; } +.claro .dijitSelectErrorFocused, +.claro .dijitSelectErrorFocused .dijitButtonContents, .claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode { border-color: @error-focused-border-color; } /* disabled state */ +.claro .dijitSelectDisabled, +.claro .dijitSelectDisabled .dijitButtonContents, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode { border-color: @disabled-border-color; } + +.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { background-color: @textbox-disabled-background-color; background-image: none; } + +.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner { color: @disabled-text-color; } -.dj_webkit .claro .dijitTextBoxDisabled input { + +.dj_webkit .claro .dijitDisabled input { /* because WebKit lightens disabled input/textarea no matter what color you specify */ color: darken(@disabled-text-color, 5%) } + .dj_webkit .claro textarea.dijitTextAreaDisabled { /* because WebKit lightens disabled input/textarea no matter what color you specify */ color: darken(@disabled-text-color, 40%) @@ -128,12 +151,16 @@ /* Input boxes with an arrow (for a drop down) */ +.claro .dijitSelect .dijitArrowButtonInner, .claro .dijitComboBox .dijitArrowButtonInner { background-image: url("../@{image-form-common-arrows}"); background-position:-35px 53%; background-repeat: no-repeat; margin: 0; width:16px; +} + +.claro .dijitComboBox .dijitArrowButtonInner { border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button } @@ -147,15 +174,15 @@ /* Add 1px vertical padding to the <input> where user types and the validation icon, to match the 1px border on arrow button */ +.claro .dijitSelectLabel, .claro .dijitTextBox .dijitInputInner, -.claro .dijitTextBox .dijitValidationContainer { +.claro .dijitValidationTextBox .dijitValidationContainer { padding: 1px 0; } .claro .dijitComboBox .dijitButtonNode { background-color: @arrowbutton-background-color; - background-image: url("../@{image-form-highlight}"); - background-repeat:repeat-x; + .standard-gradient("../"); } /* Arrow "hover" effect: @@ -167,6 +194,7 @@ .claro .dijitComboBox .dijitDownArrowButtonHover { background-color:@arrowbutton-hovered-background-color; } + .claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { background-position:-70px 53%; @@ -175,9 +203,14 @@ /* 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; + .active-gradient("../"); padding: 1px; // Since no border on arrow button (see rule below) } + +.dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen { + padding: 1px 0; +} + .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { background-position:-70px 53%; border: 0 none; @@ -199,14 +232,10 @@ 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 } diff --git a/lib/dijit/themes/claro/form/Common_rtl.css b/lib/dijit/themes/claro/form/Common_rtl.css index 74827c16f..f5206c196 100644 --- a/lib/dijit/themes/claro/form/Common_rtl.css +++ b/lib/dijit/themes/claro/form/Common_rtl.css @@ -1,10 +1,5 @@ /* 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; + border-left-width: 0 !important; + border-right-width: 1px !important; } diff --git a/lib/dijit/themes/claro/form/Common_rtl.less b/lib/dijit/themes/claro/form/Common_rtl.less index fd4975a51..7c9952993 100644 --- a/lib/dijit/themes/claro/form/Common_rtl.less +++ b/lib/dijit/themes/claro/form/Common_rtl.less @@ -2,12 +2,7 @@ @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; + border-left-width: 0 !important; + border-right-width: 1px !important; } diff --git a/lib/dijit/themes/claro/form/NumberSpinner.css b/lib/dijit/themes/claro/form/NumberSpinner.css index fcc804969..70603b7e7 100644 --- a/lib/dijit/themes/claro/form/NumberSpinner.css +++ b/lib/dijit/themes/claro/form/NumberSpinner.css @@ -35,9 +35,13 @@ .claro .dijitSpinner .dijitArrowButton { width: auto; background-color: #efefef; - background-image: url("../form/images/formHighlight.png"); - background-position: 0 0; + background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; overflow: hidden; } .dj_iequirks .claro .dijitSpinner .dijitArrowButton { @@ -70,7 +74,10 @@ /* compensate for inner border */ } -.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { +.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner { margin-top: 0; /* since its bottom aligned */ @@ -104,7 +111,13 @@ /* mouse down status */ .claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive { background-color: #7dbefa; - background-position: 0 -177px; + background-image: url("../images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; } .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { /* hide inner border while button is depressed */ diff --git a/lib/dijit/themes/claro/form/NumberSpinner.less b/lib/dijit/themes/claro/form/NumberSpinner.less index 1c79d3a37..e15c7821d 100644 --- a/lib/dijit/themes/claro/form/NumberSpinner.less +++ b/lib/dijit/themes/claro/form/NumberSpinner.less @@ -37,9 +37,7 @@ .claro .dijitSpinner .dijitArrowButton { width:auto; background-color: @arrowbutton-background-color; - background-image: url("../@{image-form-highlight}"); - background-position:0 0; - background-repeat:repeat-x; + .standard-gradient("../"); overflow: hidden; } .dj_iequirks .claro .dijitSpinner .dijitArrowButton { @@ -68,8 +66,10 @@ margin: -1px 0 -1px 0; /* compensate for inner border */ } +.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, -.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { +.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner { margin-top: 0; /* since its bottom aligned */ } @@ -112,7 +112,7 @@ .claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive { background-color: #7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior. - background-position:0 -177px; + .active-gradient("../"); } .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { diff --git a/lib/dijit/themes/claro/form/Select.css b/lib/dijit/themes/claro/form/Select.css index bfbca4ec8..5158dbd17 100644 --- a/lib/dijit/themes/claro/form/Select.css +++ b/lib/dijit/themes/claro/form/Select.css @@ -16,82 +16,69 @@ * 4. Various states * .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image */ -.claro .dijitSelect .dijitButtonText { - padding: 2px; -} /* normal status */ -.claro .dijitSelect { - border: 1px solid #b5bcc7; - background-color: #ffffff; - border-collapse: separate; -} -.dj_ie6 .claro .dijitSelect, .dj_ie6 .claro .dijitSelect .dijitButtonNode { - background-image: none; -} -.claro .dijitSelect .dijitButtonContents { - border: 0 solid #b5bcc7; - border-right-width: 1px; +.claro .dijitSelect .dijitArrowButtonContainer { + border: 1px solid #ffffff; } .claro .dijitSelect .dijitArrowButton { padding: 0; - border: 1px solid #ffffff; - border-top: none; background-color: #efefef; - background-image: url("../form/images/formHighlight.png"); + background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; } .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - background-image: url("../form/images/commonFormArrows.png"); - background-position: -35px 70%; - background-repeat: no-repeat; - width: 16px; height: 16px; } /* hover status */ .claro .dijitSelectHover { - border: 1px solid #759dc0; background-color: #e5f2fe; - background-image: url("../form/images/textBox_back.png"); + background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-repeat: repeat-x; } -.claro .dijitSelectHover .dijitButtonContents { +.claro .dijitSelectFocused, .claro .dijitSelectHover { border-color: #759dc0; } .claro .dijitSelectHover .dijitArrowButton { background-color: #abd6ff; } .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { - background-position: -70px 70%; + background-position: -70px 53%; } /* focused status */ -.claro .dijitSelectFocused { - border: 1px solid #759dc0; -} -.claro .dijitSelectFocused .dijitButtonContents { - border-color: #759dc0; -} .claro .dijitSelectFocused .dijitArrowButton { background-color: #7dbefa; - background-position: 0 -177px; + background-image: url("../images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; +} +.claro .dijitSelectFocused .dijitArrowButton { border: none; - padding: 0 1px; + padding: 1px; } .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { - background-position: -70px 70%; - margin-bottom: 1px; + background-position: -70px 53%; } /* disable status */ .claro .dijitSelectDisabled { - border: 1px solid #d3d3d3; + border-color: #d3d3d3; background-color: #efefef; background-image: none; color: #818181; } -.claro .dijitSelectDisabled .dijitArrowButton { - background-color: #efefef; -} .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { - background-position: 0 70%; + background-position: 0 53%; } /* Dropdown menu style for select */ .claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell { diff --git a/lib/dijit/themes/claro/form/Select.less b/lib/dijit/themes/claro/form/Select.less index 0e7426112..3c2cac682 100644 --- a/lib/dijit/themes/claro/form/Select.less +++ b/lib/dijit/themes/claro/form/Select.less @@ -19,101 +19,75 @@ @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 .dijitArrowButtonContainer { + border: 1px solid @arrowbutton-inner-border-color; } .claro .dijitSelect .dijitArrowButton { padding: 0; - border: 1px solid @arrowbutton-inner-border-color; - border-top:none; background-color: @arrowbutton-background-color; - background-image: url("../@{image-form-highlight}"); - background-repeat:repeat-x; + .standard-gradient("../"); } .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - background-image: url("../@{image-form-common-arrows}"); - 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("../@{image-form-textbox-background}"); + .textbox-background-image; background-repeat: repeat-x; } -.claro .dijitSelectHover .dijitButtonContents { +.claro .dijitSelectFocused, +.claro .dijitSelectHover { border-color:@hovered-border-color; } .claro .dijitSelectHover .dijitArrowButton { background-color:@arrowbutton-hovered-background-color; } + .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; + background-position:-70px 53%; } /* 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; + .active-gradient("../"); +} + +.claro .dijitSelectFocused .dijitArrowButton { border: none; - padding: 0 1px; + padding: 1px; } + .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; - margin-bottom: 1px; + background-position:-70px 53%; } /* disable status */ .claro .dijitSelectDisabled { - border: 1px solid @disabled-border-color; + border-color: @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% + background-position:0 53% } /* Dropdown menu style for select */ - .claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell { /* so that arrow and icon cells from MenuItem are not displayed */ display: none; } + .claro .dijitSelectMenu td.dijitMenuItemLabel { /* line up menu text with text in select box (in LTR and RTL modes) */ padding: @textbox-padding; diff --git a/lib/dijit/themes/claro/form/Select_rtl.css b/lib/dijit/themes/claro/form/Select_rtl.css deleted file mode 100644 index a14d4ec42..000000000 --- a/lib/dijit/themes/claro/form/Select_rtl.css +++ /dev/null @@ -1,4 +0,0 @@ -.claro .dijitSelectRtl .dijitButtonContents { - 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 deleted file mode 100644 index ffa40dc44..000000000 --- a/lib/dijit/themes/claro/form/Select_rtl.less +++ /dev/null @@ -1,6 +0,0 @@ -@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 eb82e17ad..b704a1b56 100644 --- a/lib/dijit/themes/claro/form/Slider.css +++ b/lib/dijit/themes/claro/form/Slider.css @@ -63,7 +63,7 @@ background-image: none; border-color: #d3d3d3; } -.claro .dijitRuleLabel { +.claro .dijitRuleLabelsContainer { color: #000000; } /* Horizontal Slider */ @@ -71,16 +71,14 @@ padding: 2px 0; } .claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper { - background-image: url("../form/images/sliderHorizontal.png"); - background-repeat: repeat-x; - background-position: 0 -20px; border-color: #b5bcc7; background-color: #cfe5fa; + background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); + background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); + background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); + background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); } .claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper { - background-image: url("../form/images/sliderHorizontal.png"); - background-repeat: repeat-x; - background-position: 0 -11px; border-color: #b5bcc7; background-color: #ffffff; } @@ -91,24 +89,26 @@ border-left: solid 1px #b5bcc7; } .claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper { - background-position: 0 -20px; background-color: #abd6ff; border-color: #759dc0; } .claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper { - background-position: 0 0; background-color: #ffffff; border-color: #759dc0; } .claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper { - background-position: 0 -30px; background-color: #abd6ff; border-color: #759dc0; + -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); } .claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper { - background-position: 0 -9px; background-color: #ffffff; border-color: #759dc0; + -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); } .claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper { background-color: #d3d3d3; @@ -124,16 +124,14 @@ padding: 0 2px; } .claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper { - background-image: url("../form/images/sliderVertical.png"); - background-repeat: repeat-y; - background-position: -36px 0; border-color: #b5bcc7; background-color: #cfe5fa; + background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); + background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); + background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); + background-image: linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); } .claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper { - background-image: url("../form/images/sliderVertical.png"); - background-repeat: repeat-y; - background-position: -3px 0; border-color: #b5bcc7; background-color: #ffffff; } @@ -144,20 +142,26 @@ border-top: solid 1px #b5bcc7; } .claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper { - background-position: -36px 0; background-color: #abd6ff; + border-color: #759dc0; } .claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper { - background-position: 0 0; background-color: #ffffff; + border-color: #759dc0; } .claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper { - background-position: -56px 0; background-color: #abd6ff; + border-color: #759dc0; + -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); } .claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper { - background-position: -18px 0; background-color: #ffffff; + border-color: #759dc0; + -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); } .claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper { background-color: #d3d3d3; @@ -317,13 +321,3 @@ background-position: -107px 49%; background-color: #efefef; } -.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.less b/lib/dijit/themes/claro/form/Slider.less index db0f8cb24..2c5bfe914 100644 --- a/lib/dijit/themes/claro/form/Slider.less +++ b/lib/dijit/themes/claro/form/Slider.less @@ -66,7 +66,7 @@ background-image: none; border-color: @disabled-border-color; } -.claro .dijitRuleLabel { +.claro .dijitRuleLabelsContainer { color: @text-color; } @@ -77,17 +77,12 @@ } .claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper{ - background-image: url("../@{image-form-slider-horizontal}"); - background-repeat:repeat-x; - background-position:0 -20px; border-color: @border-color; background-color: @slider-fullbar-background-color; + .alpha-white-gradient (top, 1,0px, 1,1px, 0,2px); } .claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper{ - background-image: url("../@{image-form-slider-horizontal}"); - background-repeat:repeat-x; - background-position:0 -11px; border-color: @border-color; background-color: @slider-remainingbar-background-color; } @@ -99,27 +94,25 @@ } .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; + .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper{ - background-position:0 -9px; background-color: @slider-focused-remainingbar-background-color; border-color: @focused-border-color; + .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper{ @@ -138,17 +131,12 @@ } .claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper{ - background-image: url("../@{image-form-slider-vertical}"); - background-repeat:repeat-y; - background-position:-36px 0; border-color: @border-color; background-color: @slider-fullbar-background-color; + .alpha-white-gradient (left, 1,0px, 0,1px); } .claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper{ - background-image: url("../@{image-form-slider-vertical}"); - background-repeat:repeat-y; - background-position:-3px 0; border-color: @border-color; background-color: @slider-remainingbar-background-color; } @@ -160,23 +148,25 @@ } .claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper{ - background-position:-36px 0; background-color: @slider-hovered-fullbar-background-color; + border-color: @hovered-border-color; } .claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper{ - background-position:0 0; background-color: @slider-hovered-remainingbar-background-color; + border-color: @hovered-border-color; } .claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper{ - background-position:-56px 0; background-color: @slider-focused-fullbar-background-color; + border-color: @focused-border-color; + .box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper{ - background-position:-18px 0; background-color: @slider-focused-remainingbar-background-color; + border-color: @focused-border-color; + .box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper{ @@ -352,14 +342,3 @@ 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/images/button.png b/lib/dijit/themes/claro/form/images/button.png Binary files differdeleted file mode 100644 index cb787cb2c..000000000 --- a/lib/dijit/themes/claro/form/images/button.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/buttonDisabled.png b/lib/dijit/themes/claro/form/images/buttonDisabled.png Binary files differnew file mode 100644 index 000000000..faf57ba1d --- /dev/null +++ b/lib/dijit/themes/claro/form/images/buttonDisabled.png diff --git a/lib/dijit/themes/claro/form/images/buttonDisabled.svg b/lib/dijit/themes/claro/form/images/buttonDisabled.svg new file mode 100644 index 000000000..72a51a017 --- /dev/null +++ b/lib/dijit/themes/claro/form/images/buttonDisabled.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" ?> +<!-- + Source file for buttonDisabled.png, which is used by IE7-9 for Button gradients. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match gradients defined in Button.css. It is however an approximation, since generated + output has a constant height, rather than matching the height of each button. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="18px" viewBox="0 0 1 18" preserveAspectRatio="none"> + + <defs> + <linearGradient id="disabled" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="50%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + + <!-- + Swatch for disabled buttons. It will only fill the top part of the disabled buttons. + The bottom of disabled buttons are pure background-color + --> + <rect x="0" y="0" width="1" height="18" fill="url(#disabled)"/> +</svg>
\ No newline at end of file diff --git a/lib/dijit/themes/claro/form/images/buttonEnabled.png b/lib/dijit/themes/claro/form/images/buttonEnabled.png Binary files differnew file mode 100644 index 000000000..0932a9947 --- /dev/null +++ b/lib/dijit/themes/claro/form/images/buttonEnabled.png diff --git a/lib/dijit/themes/claro/form/images/buttonEnabled.svg b/lib/dijit/themes/claro/form/images/buttonEnabled.svg new file mode 100644 index 000000000..d9e564ab8 --- /dev/null +++ b/lib/dijit/themes/claro/form/images/buttonEnabled.svg @@ -0,0 +1,24 @@ +<?xml version="1.0" ?> +<!-- + Source file for buttonEnabled.png, which is used by IE7-9 for Button gradients. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match gradients defined in Button.css. It is however an approximation, since generated + output has a constant height, rather than matching the height of each button. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="149px" viewBox="0 0 1 149" preserveAspectRatio="none"> + + <defs> + <linearGradient id="enabled" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="2%" stop-color="#ffffff" stop-opacity="0"/> + <stop offset="15%" stop-color="#ffffff" stop-opacity="0.7"/> <!-- near bottom of average height buttons --> + </linearGradient> + </defs> + + <!-- + Swatch for enabled buttons. It's 149px tall to account for tall buttons, but usually + only the top will be visible. + --> + <rect x="0" y="0" width="1" height="149" fill="url(#enabled)"/> +</svg>
\ No newline at end of file diff --git a/lib/dijit/themes/claro/form/images/button_grad_d.png b/lib/dijit/themes/claro/form/images/button_grad_d.png Binary files differdeleted file mode 100644 index 3a71a4653..000000000 --- a/lib/dijit/themes/claro/form/images/button_grad_d.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/formHighlight.png b/lib/dijit/themes/claro/form/images/formHighlight.png Binary files differdeleted file mode 100644 index f90eb25ba..000000000 --- a/lib/dijit/themes/claro/form/images/formHighlight.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/shadow.png b/lib/dijit/themes/claro/form/images/shadow.png Binary files differdeleted file mode 100644 index 72d60e628..000000000 --- a/lib/dijit/themes/claro/form/images/shadow.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/sliderHorizontal.png b/lib/dijit/themes/claro/form/images/sliderHorizontal.png Binary files differdeleted file mode 100644 index d769a6489..000000000 --- a/lib/dijit/themes/claro/form/images/sliderHorizontal.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/sliderVertical.png b/lib/dijit/themes/claro/form/images/sliderVertical.png Binary files differdeleted file mode 100644 index 9d69d04c2..000000000 --- a/lib/dijit/themes/claro/form/images/sliderVertical.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/textBox_back.png b/lib/dijit/themes/claro/form/images/textBox_back.png Binary files differdeleted file mode 100644 index dfc752afe..000000000 --- a/lib/dijit/themes/claro/form/images/textBox_back.png +++ /dev/null |