1 /* Button | DropDownButton | ComboButton | ToggleButton
3 * Styling Buttons mainly includes:
9 * .dijitButtonNode - common button/arrow wrapper shared across all three button types
14 * 3. Arrows - only for DropDownButton and ComboButton
15 * There are total four directions arrows - down, left, right, up:
16 * .dijitArrowButtonInner - down arrow by default
17 * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow
18 * .dijitRightArrowButton .dijitArrowButtonInner - right arrow
19 * .dijitUpArrowButton .dijitArrowButtonInner - up arrow
21 * 4. States - Hover, Active, Disabled, e.g.
22 * .dijitButtonHover .dijitButtonNode
23 * .dijitButtonActive .dijitButtonNode
24 * .dijitButtonDisabled .dijitButtonNode
26 * .dijitDisabled .dijitArrowButtonInner - disabled arrow states
29 @import "../variables";
31 .claro .dijitButtonNode {
32 /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */
33 .transition-property(background-color);
34 .transition-duration(.3s);
37 .claro .dijitButton .dijitButtonNode,
38 .claro .dijitDropDownButton .dijitButtonNode,
39 .claro .dijitComboButton .dijitButtonNode,
40 .claro .dijitToggleButton .dijitButtonNode {
41 /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */
42 border: 1px solid @button-border-color;
43 padding:2px 4px 4px 4px;
44 background-image: url("images/button.png");
45 background-position: center top;
46 background-repeat: repeat-x;
47 background-color: @button-background-color;
48 .border-radius(@button-border-radius);
49 .box-shadow(0 1px 1px rgba(0,0,0,0.15));
52 .claro .dijitComboButton .dijitArrowButton {
54 padding: 4px 2px 4px 2px; /* TODO: still needed? */
57 /*arrow styles for down/up/left/right directions*/
58 .claro .dijitArrowButtonInner {
62 background-image:url("images/buttonArrows.png");
63 background-repeat:no-repeat;
64 background-position:-51px 53%;
66 .claro .dijitLeftArrowButton .dijitArrowButtonInner {
67 background-position: -77px 53%;
69 .claro .dijitRightArrowButton .dijitArrowButtonInner {
70 background-position: -26px 53%;
72 .claro .dijitUpArrowButton .dijitArrowButtonInner {
73 background-position: 0 53%;
75 .claro .dijitDisabled .dijitArrowButtonInner {
76 background-position: -151px 53%;
78 .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {
79 background-position: -177px 53%;
81 .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {
82 background-position: -126px 53%;
84 .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
85 background-position: -100px 53%;
88 .claro .dijitButtonText {
98 .claro .dijitButtonHover .dijitButtonNode,
99 .claro .dijitDropDownButtonHover .dijitButtonNode,
100 .claro .dijitComboButton .dijitButtonNodeHover,
101 .claro .dijitComboButton .dijitDownArrowButtonHover,
102 .claro .dijitToggleButtonHover .dijitButtonNode {
103 background-color: @button-hovered-background-color;
105 .transition-duration(.2s);
109 .claro .dijitButtonActive .dijitButtonNode,
110 .claro .dijitDropDownButtonActive .dijitButtonNode,
111 .claro .dijitComboButtonActive .dijitButtonNode,
112 .claro .dijitToggleButtonActive .dijitButtonNode {
113 background-color: @button-pressed-background-color;
114 .box-shadow(0 0 0 rgba(0,0,0,0));
115 .transition-duration(.1s);
118 /* disabled status */
119 .claro .dijitButtonDisabled,
120 .claro .dijitDropDownButtonDisabled,
121 .claro .dijitComboButtonDisabled,
122 .claro .dijitToggleButtonDisabled {
123 background-image: none;
127 .claro .dijitButtonDisabled .dijitButtonNode,
128 .claro .dijitDropDownButtonDisabled .dijitButtonNode,
129 .claro .dijitComboButtonDisabled .dijitButtonNode,
130 .claro .dijitToggleButtonDisabled .dijitButtonNode {
131 background-position:0 -149px;
132 background-color: @disabled-background-color;
133 border: solid 1px @disabled-border-color;
134 color: @disabled-text-color;
135 .box-shadow(0 0 0 rgba(0,0,0,0));
137 .claro .dijitComboButtonDisabled .dijitArrowButton{
138 border-left-width: 0;
140 /* for ComboButton */
141 .claro table.dijitComboButton {
142 border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */
145 .dj_ie6 .claro .dijitButtonNode {
146 background-image: none;
149 .claro .dijitComboButton .dijitStretch {
150 .border-radius(@button-border-radius 0 0 @button-border-radius);
152 .claro .dijitComboButton .dijitArrowButton {
153 .border-radius(0 @button-border-radius @button-border-radius 0);