diff options
Diffstat (limited to 'lib/dijit/themes/claro/form/Button.less')
| -rw-r--r-- | lib/dijit/themes/claro/form/Button.less | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/lib/dijit/themes/claro/form/Button.less b/lib/dijit/themes/claro/form/Button.less new file mode 100644 index 000000000..b076d2a16 --- /dev/null +++ b/lib/dijit/themes/claro/form/Button.less @@ -0,0 +1,154 @@ +/* Button | DropDownButton | ComboButton | ToggleButton + * + * Styling Buttons mainly includes: + * + * 1. Containers + * .dijitButton + * .dijitDropDownButton + * .dijitComboButton + * .dijitButtonNode - common button/arrow wrapper shared across all three button types + * + * 2. Button text + * .dijitButtonText + * + * 3. Arrows - only for DropDownButton and ComboButton + * There are total four directions arrows - down, left, right, up: + * .dijitArrowButtonInner - down arrow by default + * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow + * .dijitRightArrowButton .dijitArrowButtonInner - right arrow + * .dijitUpArrowButton .dijitArrowButtonInner - up arrow + * + * 4. States - Hover, Active, Disabled, e.g. + * .dijitButtonHover .dijitButtonNode + * .dijitButtonActive .dijitButtonNode + * .dijitButtonDisabled .dijitButtonNode + * + * .dijitDisabled .dijitArrowButtonInner - disabled arrow states + */ + +@import "../variables"; + +.claro .dijitButtonNode { + /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ + .transition-property(background-color); + .transition-duration(.3s); +} + +.claro .dijitButton .dijitButtonNode, +.claro .dijitDropDownButton .dijitButtonNode, +.claro .dijitComboButton .dijitButtonNode, +.claro .dijitToggleButton .dijitButtonNode { + /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ + border: 1px solid @button-border-color; + padding:2px 4px 4px 4px; + background-image: url("images/button.png"); + background-position: center top; + background-repeat: repeat-x; + background-color: @button-background-color; + .border-radius(@button-border-radius); + .box-shadow(0 1px 1px rgba(0,0,0,0.15)); +} + +.claro .dijitComboButton .dijitArrowButton { + border-left-width: 0; + padding: 4px 2px 4px 2px; /* TODO: still needed? */ +} + +/*arrow styles for down/up/left/right directions*/ +.claro .dijitArrowButtonInner { + width: 15px; + height: 15px; + margin: 0 auto; + background-image:url("images/buttonArrows.png"); + background-repeat:no-repeat; + background-position:-51px 53%; +} +.claro .dijitLeftArrowButton .dijitArrowButtonInner { + background-position: -77px 53%; +} +.claro .dijitRightArrowButton .dijitArrowButtonInner { + background-position: -26px 53%; +} +.claro .dijitUpArrowButton .dijitArrowButtonInner { + background-position: 0 53%; +} +.claro .dijitDisabled .dijitArrowButtonInner { + background-position: -151px 53%; +} +.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { + background-position: -177px 53%; +} +.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { + background-position: -126px 53%; +} +.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { + background-position: -100px 53%; +} + +.claro .dijitButtonText { + padding: 0 0.3em; + text-align: center; +} + + + + + +/* hover status */ +.claro .dijitButtonHover .dijitButtonNode, +.claro .dijitDropDownButtonHover .dijitButtonNode, +.claro .dijitComboButton .dijitButtonNodeHover, +.claro .dijitComboButton .dijitDownArrowButtonHover, +.claro .dijitToggleButtonHover .dijitButtonNode { + background-color: @button-hovered-background-color; + color:@text-color; + .transition-duration(.2s); +} + +/* checked status */ +.claro .dijitButtonActive .dijitButtonNode, +.claro .dijitDropDownButtonActive .dijitButtonNode, +.claro .dijitComboButtonActive .dijitButtonNode, +.claro .dijitToggleButtonActive .dijitButtonNode { + background-color: @button-pressed-background-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); + .transition-duration(.1s); +} + +/* disabled status */ +.claro .dijitButtonDisabled, +.claro .dijitDropDownButtonDisabled, +.claro .dijitComboButtonDisabled, +.claro .dijitToggleButtonDisabled { + background-image: none; + outline: none; +} + +.claro .dijitButtonDisabled .dijitButtonNode, +.claro .dijitDropDownButtonDisabled .dijitButtonNode, +.claro .dijitComboButtonDisabled .dijitButtonNode, +.claro .dijitToggleButtonDisabled .dijitButtonNode { + background-position:0 -149px; + background-color: @disabled-background-color; + border: solid 1px @disabled-border-color; + color: @disabled-text-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); +} +.claro .dijitComboButtonDisabled .dijitArrowButton{ + border-left-width: 0; +} +/* for ComboButton */ +.claro table.dijitComboButton { + border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ +} + +.dj_ie6 .claro .dijitButtonNode { + background-image: none; +} + +.claro .dijitComboButton .dijitStretch { + .border-radius(@button-border-radius 0 0 @button-border-radius); +} +.claro .dijitComboButton .dijitArrowButton { + .border-radius(0 @button-border-radius @button-border-radius 0); +} |