Automated build for v0.01
This commit is contained in:
Fmstrat
1
lib/dijit/themes/claro/form/Button.css
Normal file
1
lib/dijit/themes/claro/form/Button.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitButtonNode {-webkit-transition-property: background-color; -moz-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s;}.claro .dijitButton .dijitButtonNode,.claro .dijitDropDownButton .dijitButtonNode,.claro .dijitComboButton .dijitButtonNode,.claro .dijitToggleButton .dijitButtonNode {border: 1px solid #759dc0; padding: 2px 4px 4px 4px; color: #000000; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); background-color: #bcd8f4; background-image: url("images/buttonEnabled.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); _background-image: none;}.claro .dijitComboButton .dijitArrowButton {border-left-width: 0; padding: 4px 2px 4px 2px;}.claro .dijitArrowButtonInner {width: 15px; height: 15px; margin: 0 auto; background-image: url("../form/images/buttonArrows.png"); background-repeat: no-repeat; background-position: -51px 53%;}.claro .dijitLeftArrowButton .dijitArrowButtonInner {background-position: -77px 53%;}.claro .dijitRightArrowButton .dijitArrowButtonInner {background-position: -26px 53%;}.claro .dijitUpArrowButton .dijitArrowButtonInner {background-position: 0 53%;}.claro .dijitDisabled .dijitArrowButtonInner {background-position: -151px 53%;}.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {background-position: -177px 53%;}.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {background-position: -126px 53%;}.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {background-position: -100px 53%;}.claro .dijitButtonText {padding: 0 0.3em; text-align: center;}.claro .dijitButtonHover .dijitButtonNode,.claro .dijitDropDownButtonHover .dijitButtonNode,.claro .dijitComboButton .dijitButtonNodeHover,.claro .dijitComboButton .dijitDownArrowButtonHover,.claro .dijitToggleButtonHover .dijitButtonNode {background-color: #86bdf2; color: #000000; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s;}.claro .dijitButtonActive .dijitButtonNode,.claro .dijitDropDownButtonActive .dijitButtonNode,.claro .dijitComboButtonActive .dijitButtonNode,.claro .dijitToggleButtonActive .dijitButtonNode,.claro .dijitToggleButtonChecked .dijitButtonNode {background-color: #86bdf2; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s;}.claro .dijitButtonDisabled,.claro .dijitDropDownButtonDisabled,.claro .dijitComboButtonDisabled,.claro .dijitToggleButtonDisabled {background-image: none; outline: none;}.claro .dijitButtonDisabled .dijitButtonNode,.claro .dijitDropDownButtonDisabled .dijitButtonNode,.claro .dijitComboButtonDisabled .dijitButtonNode,.claro .dijitToggleButtonDisabled .dijitButtonNode {background-color: #efefef; border: solid 1px #d3d3d3; color: #818181; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); background-image: url("images/buttonDisabled.png"); background-image: -moz-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); background-image: -webkit-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); background-image: -o-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); background-image: linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); _background-image: none;}.claro .dijitComboButtonDisabled .dijitArrowButton {border-left-width: 0;}.claro table.dijitComboButton {border-collapse: separate;}.claro .dijitComboButton .dijitStretch {-moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;}.claro .dijitComboButton .dijitArrowButton {-moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;}
|
||||
164
lib/dijit/themes/claro/form/Button.less
Normal file
164
lib/dijit/themes/claro/form/Button.less
Normal file
@ -0,0 +1,164 @@
|
||||
/* 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;
|
||||
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? */
|
||||
}
|
||||
|
||||
/*arrow styles for down/up/left/right directions*/
|
||||
.claro .dijitArrowButtonInner {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 0 auto;
|
||||
background-image:url("../@{image-form-button-arrows}");
|
||||
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: desaturate(darken(@button-hovered-background-color, 10), 20);
|
||||
color:@text-color;
|
||||
.transition-duration(.2s);
|
||||
}
|
||||
|
||||
/* active, checked status */
|
||||
.claro .dijitButtonActive .dijitButtonNode,
|
||||
.claro .dijitDropDownButtonActive .dijitButtonNode,
|
||||
.claro .dijitComboButtonActive .dijitButtonNode,
|
||||
.claro .dijitToggleButtonActive .dijitButtonNode,
|
||||
.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);
|
||||
}
|
||||
|
||||
/* disabled status */
|
||||
.claro .dijitButtonDisabled,
|
||||
.claro .dijitDropDownButtonDisabled,
|
||||
.claro .dijitComboButtonDisabled,
|
||||
.claro .dijitToggleButtonDisabled {
|
||||
background-image: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.claro .dijitButtonDisabled .dijitButtonNode,
|
||||
.claro .dijitDropDownButtonDisabled .dijitButtonNode,
|
||||
.claro .dijitComboButtonDisabled .dijitButtonNode,
|
||||
.claro .dijitToggleButtonDisabled .dijitButtonNode {
|
||||
background-color: @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;
|
||||
}
|
||||
/* for ComboButton */
|
||||
.claro table.dijitComboButton {
|
||||
border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
1
lib/dijit/themes/claro/form/Button_rtl.css
Normal file
1
lib/dijit/themes/claro/form/Button_rtl.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitComboButtonRtl .dijitStretch {-moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;}.claro .dijitComboButtonRtl .dijitArrowButton {-moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; padding: 3px 0 4px; border-left-width: 1px; border-right-width: 0;}
|
||||
16
lib/dijit/themes/claro/form/Button_rtl.less
Normal file
16
lib/dijit/themes/claro/form/Button_rtl.less
Normal file
@ -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 */
|
||||
1
lib/dijit/themes/claro/form/Checkbox.css
Normal file
1
lib/dijit/themes/claro/form/Checkbox.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitToggleButton .dijitCheckBoxIcon {background-image: url("../images/checkmarkNoBorder.png");}.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon {background-image: url("../images/checkmarkNoBorder.gif");}.claro .dijitCheckBox,.claro .dijitCheckBoxIcon {background-image: url("../form/images/checkboxRadioButtonStates.png"); background-repeat: no-repeat; width: 15px; height: 16px; margin: 0 2px 0 0; padding: 0;}.dj_ie6 .claro .dijitCheckBox,.dj_ie6 .claro .dijitCheckBoxIcon {background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");}.claro .dijitCheckBox,.claro .dijitToggleButton .dijitCheckBoxIcon {background-position: -15px;}.claro .dijitCheckBoxChecked,.claro .dijitToggleButtonChecked .dijitCheckBoxIcon {background-position: 0;}.claro .dijitCheckBoxDisabled {background-position: -75px;}.claro .dijitCheckBoxCheckedDisabled {background-position: -60px;}.claro .dijitCheckBoxHover {background-position: -45px;}.claro .dijitCheckBoxCheckedHover {background-position: -30px;}
|
||||
79
lib/dijit/themes/claro/form/Checkbox.less
Normal file
79
lib/dijit/themes/claro/form/Checkbox.less
Normal file
@ -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("../@{image-checkmark}");
|
||||
}
|
||||
|
||||
.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon {
|
||||
background-image: url("../@{image-checkmark-ie6}");
|
||||
}
|
||||
|
||||
.claro .dijitCheckBox,
|
||||
.claro .dijitCheckBoxIcon /* inside a toggle button */ {
|
||||
background-image: url("../@{image-form-checkbox-and-radios}"); /* 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("../@{image-form-checkbox-and-radios-ie6}"); /* 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;
|
||||
}
|
||||
|
||||
|
||||
1
lib/dijit/themes/claro/form/Common.css
Normal file
1
lib/dijit/themes/claro/form/Common.css
Normal file
File diff suppressed because one or more lines are too long
243
lib/dijit/themes/claro/form/Common.less
Normal file
243
lib/dijit/themes/claro/form/Common.less
Normal file
@ -0,0 +1,243 @@
|
||||
/* claro/form/Common.css */
|
||||
|
||||
/*========================= common css =========================*/
|
||||
|
||||
@import "../variables";
|
||||
|
||||
/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */
|
||||
|
||||
.claro .dijitTextBox,
|
||||
.claro .dijitInputInner {
|
||||
// .dijitInputInner selector needed for ValidationTextBox on IE6 because <input> doesn't inherit
|
||||
// the color setting from the ancestor div.dijitTextBox
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.claro .dijitValidationTextBoxError .dijitValidationContainer {
|
||||
background-color: @erroricon-background-color;
|
||||
background-image: url("../@{image-form-error}");
|
||||
background-position: top center;
|
||||
border: solid @erroricon-background-color 0;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
.claro .dijitTextBoxError .dijitValidationContainer {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.claro .dijitValidationTextBoxError .dijitValidationIcon {
|
||||
width: 0;
|
||||
background-color: transparent; /* 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 .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,
|
||||
// so compensate for that too.
|
||||
padding-left: @textbox-padding - 1px;
|
||||
padding-right: @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 */
|
||||
border-color: @border-color;
|
||||
.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;
|
||||
.textbox-background-image;
|
||||
}
|
||||
|
||||
/* error state */
|
||||
.claro .dijitSelectError,
|
||||
.claro .dijitSelectError .dijitButtonContents,
|
||||
.claro .dijitTextBoxError,
|
||||
.claro .dijitTextBoxError .dijitButtonNode {
|
||||
border-color: @error-border-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;
|
||||
.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 .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%)
|
||||
}
|
||||
|
||||
/*========================= for special widgets =========================*/
|
||||
|
||||
/* 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
|
||||
}
|
||||
|
||||
.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 .dijitSelectLabel,
|
||||
.claro .dijitTextBox .dijitInputInner,
|
||||
.claro .dijitValidationTextBox .dijitValidationContainer {
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.claro .dijitComboBox .dijitButtonNode {
|
||||
background-color: @arrowbutton-background-color;
|
||||
.standard-gradient("../");
|
||||
}
|
||||
|
||||
/* 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,
|
||||
.claro .dijitComboBoxFocused .dijitArrowButton {
|
||||
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;
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
1
lib/dijit/themes/claro/form/Common_rtl.css
Normal file
1
lib/dijit/themes/claro/form/Common_rtl.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitTextBoxRtlError .dijitValidationContainer {border-left-width: 0; border-right-width: 1px;}
|
||||
8
lib/dijit/themes/claro/form/Common_rtl.less
Normal file
8
lib/dijit/themes/claro/form/Common_rtl.less
Normal file
@ -0,0 +1,8 @@
|
||||
/* claro/form/Common_rtl.css */
|
||||
|
||||
@import "../variables";
|
||||
|
||||
.claro .dijitTextBoxRtlError .dijitValidationContainer {
|
||||
border-left-width: 0;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
1
lib/dijit/themes/claro/form/NumberSpinner.css
Normal file
1
lib/dijit/themes/claro/form/NumberSpinner.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitSpinnerButtonContainer {overflow: hidden; position: relative; width: auto; padding: 0 2px;}.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner {border-width: 1px 0; border-style: solid none;}.claro .dijitSpinner .dijitArrowButton {width: auto; background-color: #efefef; background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none; overflow: hidden;}.dj_iequirks .claro .dijitSpinner .dijitArrowButton {overflow: visible;}.claro .dijitSpinner .dijitSpinnerButtonInner {width: 15px;}.claro .dijitSpinner .dijitArrowButtonInner {border: solid 1px #ffffff; border-bottom-width: 0; background-image: url("../form/images/commonFormArrows.png"); background-repeat: no-repeat; height: 100%; width: 15px; padding-left: 1px; padding-right: 1px; background-position: -139px center; display: block; margin: -1px 0 -1px 0;}.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner,.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {margin-top: 0;}.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner {width: 19px;}.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {background-position: -34px;}.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField {padding: 0;}.claro .dijitUpArrowButtonActive,.claro .dijitDownArrowButtonActive {background-color: #abd6ff;}.claro .dijitSpinner .dijitUpArrowButtonHover,.claro .dijitSpinner .dijitDownArrowButtonHover,.claro .dijitSpinnerFocused .dijitArrowButton {background-color: #abd6ff;}.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner {background-position: -174px;}.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner {background-position: -69px;}.claro .dijitSpinnerFocused {background-color: #ffffff; background-image: none;}.claro .dijitSpinner .dijitDownArrowButtonActive,.claro .dijitSpinner .dijitUpArrowButtonActive {background-color: #7dbefa; background-image: url("../images/activeGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); _background-image: none;}.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner,.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {border: 0; padding: 1px; margin-right: 2px; margin-bottom: 1px;}.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner {background-position: -173px;}.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {background-position: -68px;}.claro .dijitSpinnerDisabled .dijitArrowButtonInner {background-color: #efefef;}.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner {background-position: -104px;}.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner {background-position: 1px;}.dj_ie7 .claro .dijitSpinner {overflow: visible;}
|
||||
150
lib/dijit/themes/claro/form/NumberSpinner.less
Normal file
150
lib/dijit/themes/claro/form/NumberSpinner.less
Normal file
@ -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;
|
||||
.standard-gradient("../");
|
||||
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("../@{image-form-common-arrows}");
|
||||
background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
width:15px;
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
|
||||
/* for up arrow */
|
||||
background-position:-139px center;
|
||||
|
||||
/* override button.css (TODO: move to Common.css since ComboBox needs this too) */
|
||||
display: block;
|
||||
margin: -1px 0 -1px 0; /* compensate for inner border */
|
||||
}
|
||||
|
||||
.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {
|
||||
margin-top: 0; /* since its bottom aligned */
|
||||
}
|
||||
|
||||
.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner {
|
||||
width: 19px;
|
||||
}
|
||||
.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
|
||||
background-position:-34px;
|
||||
}
|
||||
.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/** hover & focused status **/
|
||||
|
||||
.claro .dijitUpArrowButtonActive,
|
||||
.claro .dijitDownArrowButtonActive {
|
||||
background-color:@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.
|
||||
.active-gradient("../");
|
||||
}
|
||||
.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;
|
||||
}
|
||||
1
lib/dijit/themes/claro/form/RadioButton.css
Normal file
1
lib/dijit/themes/claro/form/RadioButton.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitToggleButton .dijitRadio,.claro .dijitToggleButton .dijitRadioIcon {background-image: url("../form/images/checkboxRadioButtonStates.png");}.dj_ie6 .claro .dijitToggleButton .dijitRadio,.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon {background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");}.claro .dijitRadio,.claro .dijitRadioIcon {background-image: url("../form/images/checkboxRadioButtonStates.png"); background-repeat: no-repeat; width: 15px; height: 15px; margin: 0 2px 0 0; padding: 0;}.dj_ie6 .claro .dijitRadio,.dj_ie6 .claro .dijitRadioIcon {background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");}.claro .dijitRadio {background-position: -105px;}.claro .dijitToggleButton .dijitRadioIcon {background-position: -107px;}.claro .dijitRadioDisabled {background-position: -165px;}.claro .dijitRadioHover {background-position: -135px;}.claro .dijitRadioChecked {background-position: -90px;}.claro .dijitToggleButtonChecked .dijitRadioIcon {background-position: -92px;}.claro .dijitRadioCheckedHover {background-position: -120px;}.claro .dijitRadioCheckedDisabled {background-position: -150px;}
|
||||
84
lib/dijit/themes/claro/form/RadioButton.less
Normal file
84
lib/dijit/themes/claro/form/RadioButton.less
Normal file
@ -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("../@{image-form-checkbox-and-radios}");
|
||||
}
|
||||
|
||||
.dj_ie6 .claro .dijitToggleButton .dijitRadio,
|
||||
.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon {
|
||||
background-image: url("../@{image-form-checkbox-and-radios-ie6}");
|
||||
}
|
||||
|
||||
.claro .dijitRadio,
|
||||
.claro .dijitRadioIcon { /* inside a toggle button */
|
||||
background-image: url("../@{image-form-checkbox-and-radios}"); /* 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("../@{image-form-checkbox-and-radios-ie6}"); /* 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;
|
||||
}
|
||||
1
lib/dijit/themes/claro/form/Select.css
Normal file
1
lib/dijit/themes/claro/form/Select.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitSelect .dijitArrowButtonContainer {border: 1px solid #ffffff;}.claro .dijitSelect .dijitArrowButton {padding: 0; background-color: #efefef; background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none;}.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {height: 16px;}.claro .dijitSelectHover {background-color: #e5f2fe; background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-repeat: repeat-x;}.claro .dijitSelectHover .dijitArrowButton {background-color: #abd6ff;}.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {background-position: -70px 53%;}.claro .dijitSelectFocused .dijitArrowButton {background-color: #7dbefa; background-image: url("../images/activeGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); _background-image: none;}.claro .dijitSelectFocused .dijitArrowButton {border: none; padding: 1px;}.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {background-position: -70px 53%;}.claro .dijitSelectDisabled {border-color: #d3d3d3; background-color: #efefef; background-image: none; color: #818181;}.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {background-position: 0 53%;}.claro .dijitSelectMenu td.dijitMenuItemIconCell,.claro .dijitSelectMenu td.dijitMenuArrowCell {display: none;}.claro .dijitSelectMenu td.dijitMenuItemLabel {padding: 2px;}.claro .dijitSelectMenu .dijitMenuSeparatorTop {border-bottom: 1px solid #759dc0;}
|
||||
93
lib/dijit/themes/claro/form/Select.less
Normal file
93
lib/dijit/themes/claro/form/Select.less
Normal file
@ -0,0 +1,93 @@
|
||||
/* 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";
|
||||
|
||||
/* normal status */
|
||||
.claro .dijitSelect .dijitArrowButtonContainer {
|
||||
border: 1px solid @arrowbutton-inner-border-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelect .dijitArrowButton {
|
||||
padding: 0;
|
||||
background-color: @arrowbutton-background-color;
|
||||
.standard-gradient("../");
|
||||
}
|
||||
|
||||
.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
|
||||
height:16px;
|
||||
}
|
||||
|
||||
/* hover status */
|
||||
.claro .dijitSelectHover {
|
||||
background-color: @textbox-hovered-background-color;
|
||||
.textbox-background-image;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.claro .dijitSelectHover .dijitArrowButton {
|
||||
background-color:@arrowbutton-hovered-background-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position:-70px 53%;
|
||||
}
|
||||
|
||||
/* focused status */
|
||||
.claro .dijitSelectFocused .dijitArrowButton {
|
||||
background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior.
|
||||
.active-gradient("../");
|
||||
}
|
||||
|
||||
.claro .dijitSelectFocused .dijitArrowButton {
|
||||
border: none;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position:-70px 53%;
|
||||
}
|
||||
|
||||
/* disable status */
|
||||
.claro .dijitSelectDisabled {
|
||||
border-color: @disabled-border-color;
|
||||
background-color: @disabled-background-color;
|
||||
background-image: none;
|
||||
color: @disabled-text-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position:0 53%
|
||||
}
|
||||
|
||||
/* Dropdown menu style for select */
|
||||
.claro .dijitSelectMenu td.dijitMenuItemIconCell,
|
||||
.claro .dijitSelectMenu td.dijitMenuArrowCell {
|
||||
/* so that arrow and icon cells from MenuItem are not displayed */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.claro .dijitSelectMenu td.dijitMenuItemLabel {
|
||||
/* line up menu text with text in select box (in LTR and RTL modes) */
|
||||
padding: @textbox-padding;
|
||||
}
|
||||
|
||||
.claro .dijitSelectMenu .dijitMenuSeparatorTop {
|
||||
border-bottom:1px solid @focused-border-color;
|
||||
}
|
||||
1
lib/dijit/themes/claro/form/Slider.css
Normal file
1
lib/dijit/themes/claro/form/Slider.css
Normal file
File diff suppressed because one or more lines are too long
344
lib/dijit/themes/claro/form/Slider.less
Normal file
344
lib/dijit/themes/claro/form/Slider.less
Normal file
@ -0,0 +1,344 @@
|
||||
/* 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;
|
||||
}
|
||||
.claro .dijitRuleLabelsContainer {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
/* Horizontal Slider */
|
||||
|
||||
.claro .dijitRuleLabelsContainerH {
|
||||
padding: 2px 0;
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderProgressBarH,
|
||||
.claro .dijitSlider .dijitSliderLeftBumper{
|
||||
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{
|
||||
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-color: @slider-hovered-fullbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderRemainingBarH,
|
||||
.claro .dijitSliderHover .dijitSliderRightBumper{
|
||||
background-color: @slider-hovered-remainingbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderProgressBarH,
|
||||
.claro .dijitSliderFocused .dijitSliderLeftBumper{
|
||||
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-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{
|
||||
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{
|
||||
border-color: @border-color;
|
||||
background-color: @slider-fullbar-background-color;
|
||||
.alpha-white-gradient (left, 1,0px, 0,1px);
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderRemainingBarV,
|
||||
.claro .dijitSlider .dijitSliderTopBumper{
|
||||
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-color: @slider-hovered-fullbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderRemainingBarV,
|
||||
.claro .dijitSliderHover .dijitSliderTopBumper{
|
||||
background-color: @slider-hovered-remainingbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderProgressBarV,
|
||||
.claro .dijitSliderFocused .dijitSliderBottomBumper{
|
||||
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-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{
|
||||
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("../@{image-form-slider-thumbs}");
|
||||
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("../@{image-form-slider-thumbs}");
|
||||
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("../@{image-form-common-arrows}");
|
||||
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;
|
||||
}
|
||||
1
lib/dijit/themes/claro/form/Slider_rtl.css
Normal file
1
lib/dijit/themes/claro/form/Slider_rtl.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitSliderRtl .dijitSliderProgressBarH,.claro .dijitSliderRtl .dijitSliderRemainingBarH,.claro .dijitSliderRtl .dijitSliderLeftBumper,.claro .dijitSliderRtl .dijitSliderRightBumper,.claro .dijitSliderRtl .dijitSliderTopBumper {background-position: top right;}.claro .dijitSliderRtl .dijitSliderProgressBarV,.claro .dijitSliderRtl .dijitSliderRemainingBarV,.claro .dijitSliderRtl .dijitSliderBottomBumper {background-position: bottom right;}.claro .dijitSliderRtl .dijitSliderLeftBumper {border-left-width: 0; border-right-width: 1px;}.claro .dijitSliderRtl .dijitSliderRightBumper {border-left-width: 1px; border-right-width: 0;}.claro .dijitSliderRtl .dijitSliderIncrementIconH {background-position: -357px 50%;}.claro .dijitSliderRtl .dijitSliderDecrementIconH {background-position: -251px 50%;}
|
||||
33
lib/dijit/themes/claro/form/Slider_rtl.less
Normal file
33
lib/dijit/themes/claro/form/Slider_rtl.less
Normal file
@ -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%;
|
||||
}
|
||||
BIN
lib/dijit/themes/claro/form/images/buttonArrows.png
Normal file
BIN
lib/dijit/themes/claro/form/images/buttonArrows.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 B |
BIN
lib/dijit/themes/claro/form/images/buttonDisabled.png
Normal file
BIN
lib/dijit/themes/claro/form/images/buttonDisabled.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 B |
23
lib/dijit/themes/claro/form/images/buttonDisabled.svg
Normal file
23
lib/dijit/themes/claro/form/images/buttonDisabled.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1012 B |
BIN
lib/dijit/themes/claro/form/images/buttonEnabled.png
Normal file
BIN
lib/dijit/themes/claro/form/images/buttonEnabled.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 B |
24
lib/dijit/themes/claro/form/images/buttonEnabled.svg
Normal file
24
lib/dijit/themes/claro/form/images/buttonEnabled.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
lib/dijit/themes/claro/form/images/checkboxRadioButtonStates.png
Normal file
BIN
lib/dijit/themes/claro/form/images/checkboxRadioButtonStates.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
lib/dijit/themes/claro/form/images/commonFormArrows.png
Normal file
BIN
lib/dijit/themes/claro/form/images/commonFormArrows.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 B |
BIN
lib/dijit/themes/claro/form/images/error.png
Normal file
BIN
lib/dijit/themes/claro/form/images/error.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 355 B |
BIN
lib/dijit/themes/claro/form/images/sliderThumbs.png
Normal file
BIN
lib/dijit/themes/claro/form/images/sliderThumbs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Reference in New Issue
Block a user