]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* Button | DropDownButton | ComboButton | ToggleButton |
2 | * | |
3 | * Styling Buttons mainly includes: | |
4 | * | |
5 | * 1. Containers | |
6 | * .dijitButton | |
7 | * .dijitDropDownButton | |
8 | * .dijitComboButton | |
9 | * .dijitButtonNode - common button/arrow wrapper shared across all three button types | |
10 | * | |
11 | * 2. Button text | |
12 | * .dijitButtonText | |
13 | * | |
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 | |
20 | * | |
21 | * 4. States - Hover, Active, Disabled, e.g. | |
22 | * .dijitButtonHover .dijitButtonNode | |
23 | * .dijitButtonActive .dijitButtonNode | |
24 | * .dijitButtonDisabled .dijitButtonNode | |
25 | * | |
26 | * .dijitDisabled .dijitArrowButtonInner - disabled arrow states | |
27 | */ | |
28 | ||
29 | @import "../variables"; | |
30 | ||
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); | |
35 | } | |
36 | ||
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; | |
1354d172 | 44 | background-image: url("../@{image-form-button}"); |
81bea17a AD |
45 | background-position: center top; |
46 | background-repeat: repeat-x; | |
47 | background-color: @button-background-color; | |
1354d172 | 48 | color: @text-color; |
81bea17a AD |
49 | .border-radius(@button-border-radius); |
50 | .box-shadow(0 1px 1px rgba(0,0,0,0.15)); | |
51 | } | |
52 | ||
53 | .claro .dijitComboButton .dijitArrowButton { | |
54 | border-left-width: 0; | |
55 | padding: 4px 2px 4px 2px; /* TODO: still needed? */ | |
56 | } | |
57 | ||
58 | /*arrow styles for down/up/left/right directions*/ | |
59 | .claro .dijitArrowButtonInner { | |
60 | width: 15px; | |
61 | height: 15px; | |
62 | margin: 0 auto; | |
1354d172 | 63 | background-image:url("../@{image-form-button-arrows}"); |
81bea17a AD |
64 | background-repeat:no-repeat; |
65 | background-position:-51px 53%; | |
66 | } | |
67 | .claro .dijitLeftArrowButton .dijitArrowButtonInner { | |
68 | background-position: -77px 53%; | |
69 | } | |
70 | .claro .dijitRightArrowButton .dijitArrowButtonInner { | |
71 | background-position: -26px 53%; | |
72 | } | |
73 | .claro .dijitUpArrowButton .dijitArrowButtonInner { | |
74 | background-position: 0 53%; | |
75 | } | |
76 | .claro .dijitDisabled .dijitArrowButtonInner { | |
77 | background-position: -151px 53%; | |
78 | } | |
79 | .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { | |
80 | background-position: -177px 53%; | |
81 | } | |
82 | .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { | |
83 | background-position: -126px 53%; | |
84 | } | |
85 | .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { | |
86 | background-position: -100px 53%; | |
87 | } | |
88 | ||
89 | .claro .dijitButtonText { | |
90 | padding: 0 0.3em; | |
91 | text-align: center; | |
92 | } | |
93 | ||
94 | ||
95 | ||
96 | ||
97 | ||
98 | /* hover status */ | |
99 | .claro .dijitButtonHover .dijitButtonNode, | |
100 | .claro .dijitDropDownButtonHover .dijitButtonNode, | |
101 | .claro .dijitComboButton .dijitButtonNodeHover, | |
102 | .claro .dijitComboButton .dijitDownArrowButtonHover, | |
103 | .claro .dijitToggleButtonHover .dijitButtonNode { | |
104 | background-color: @button-hovered-background-color; | |
105 | color:@text-color; | |
106 | .transition-duration(.2s); | |
107 | } | |
108 | ||
1354d172 | 109 | /* active, checked status */ |
81bea17a AD |
110 | .claro .dijitButtonActive .dijitButtonNode, |
111 | .claro .dijitDropDownButtonActive .dijitButtonNode, | |
112 | .claro .dijitComboButtonActive .dijitButtonNode, | |
1354d172 AD |
113 | .claro .dijitToggleButtonActive .dijitButtonNode, |
114 | .claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode { | |
81bea17a AD |
115 | background-color: @button-pressed-background-color; |
116 | .box-shadow(0 0 0 rgba(0,0,0,0)); | |
117 | .transition-duration(.1s); | |
118 | } | |
119 | ||
120 | /* disabled status */ | |
121 | .claro .dijitButtonDisabled, | |
122 | .claro .dijitDropDownButtonDisabled, | |
123 | .claro .dijitComboButtonDisabled, | |
124 | .claro .dijitToggleButtonDisabled { | |
125 | background-image: none; | |
126 | outline: none; | |
127 | } | |
128 | ||
129 | .claro .dijitButtonDisabled .dijitButtonNode, | |
130 | .claro .dijitDropDownButtonDisabled .dijitButtonNode, | |
131 | .claro .dijitComboButtonDisabled .dijitButtonNode, | |
132 | .claro .dijitToggleButtonDisabled .dijitButtonNode { | |
133 | background-position:0 -149px; | |
134 | background-color: @disabled-background-color; | |
135 | border: solid 1px @disabled-border-color; | |
136 | color: @disabled-text-color; | |
137 | .box-shadow(0 0 0 rgba(0,0,0,0)); | |
138 | } | |
139 | .claro .dijitComboButtonDisabled .dijitArrowButton{ | |
140 | border-left-width: 0; | |
141 | } | |
142 | /* for ComboButton */ | |
143 | .claro table.dijitComboButton { | |
144 | border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ | |
145 | } | |
146 | ||
147 | .dj_ie6 .claro .dijitButtonNode { | |
148 | background-image: none; | |
149 | } | |
150 | ||
151 | .claro .dijitComboButton .dijitStretch { | |
152 | .border-radius(@button-border-radius 0 0 @button-border-radius); | |
153 | } | |
154 | .claro .dijitComboButton .dijitArrowButton { | |
155 | .border-radius(0 @button-border-radius @button-border-radius 0); | |
156 | } |