Changeset View
Changeset View
Standalone View
Standalone View
src/gtk3/widgets/_button.scss
Show First 20 Lines • Show All 156 Lines • ▼ Show 20 Line(s) | |||||
157 | } | 157 | } | ||
158 | 158 | | |||
159 | %buttons { | 159 | %buttons { | ||
160 | 160 | | |||
161 | $_button_transition: all 200ms $ease-out-quad; | 161 | $_button_transition: all 200ms $ease-out-quad; | ||
162 | 162 | | |||
163 | border: 1px solid; | 163 | border: 1px solid; | ||
164 | border-radius: $r; | 164 | border-radius: $r; | ||
165 | padding: 4px 6px; | 165 | padding: 6px 6px; | ||
166 | background-clip: border-box; | 166 | background-clip: border-box; | ||
167 | transition: $_button_transition; | 167 | transition: $_button_transition; | ||
168 | @include button(normal); | 168 | @include button(normal); | ||
169 | &.flat { | 169 | &.flat { | ||
170 | @include button(undecorated); | 170 | @include button(undecorated); | ||
171 | // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set | 171 | // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set | ||
172 | // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but | 172 | // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but | ||
173 | // it won't fade out when the pointer leave the button allocation area. To make the transition more evident | 173 | // it won't fade out when the pointer leave the button allocation area. To make the transition more evident | ||
174 | // in this case the duration is increased. | 174 | // in this case the duration is increased. | ||
175 | transition: none; | 175 | transition: none; | ||
176 | &:hover { | 176 | &:hover { | ||
177 | transition: $_button_transition; | 177 | transition: $_button_transition; | ||
178 | transition-duration: 500ms; | 178 | transition-duration: 500ms; | ||
179 | &:active { transition: $_button_transition; } | 179 | &:active, &:focus { transition: $_button_transition; } | ||
180 | } | 180 | } | ||
181 | &:checked { background-color: gtk("@borders");} | 181 | &:checked { background-color: gtk("@borders");} | ||
182 | } | 182 | } | ||
183 | &:hover { | 183 | &:hover { | ||
184 | @include button(hover); | 184 | @include button(hover); | ||
185 | -gtk-icon-effect: none; // Do we want this? | 185 | -gtk-icon-effect: none; // Do we want this? | ||
186 | } | 186 | } | ||
187 | &:active, &:checked { | 187 | &:active, &:checked, &:focus { | ||
188 | @include button(active); | 188 | @include button(active); | ||
189 | transition-duration: 50ms; | 189 | transition-duration: 50ms; | ||
190 | &:hover { | 190 | &:hover { | ||
191 | @include button(active-hover); | 191 | @include button(active-hover); | ||
192 | } | 192 | } | ||
193 | } | 193 | } | ||
194 | &:backdrop { | 194 | &:backdrop { | ||
195 | @include button(backdrop); | 195 | @include button(backdrop); | ||
196 | -gtk-icon-effect: none; | 196 | -gtk-icon-effect: none; | ||
197 | &:active, &:checked { | 197 | &:active, &:checked, &:focus { | ||
198 | @include button(backdrop-active); | 198 | @include button(backdrop-active); | ||
199 | } | 199 | } | ||
200 | &:disabled { | 200 | &:disabled { | ||
201 | @include button(backdrop-insensitive); | 201 | @include button(backdrop-insensitive); | ||
202 | } | 202 | } | ||
203 | &:disabled:active, &:disabled:checked { | 203 | &:disabled:active, &:disabled:checked, &:disabled:focus { | ||
204 | @include button(backdrop-insensitive-active); | 204 | @include button(backdrop-insensitive-active); | ||
205 | } | 205 | } | ||
206 | } | 206 | } | ||
207 | &.flat:backdrop { | 207 | &.flat:backdrop { | ||
208 | -gtk-icon-effect: none; | 208 | -gtk-icon-effect: none; | ||
209 | @include button(undecorated); | 209 | @include button(undecorated); | ||
210 | color: gtk("@theme_button_foreground_backdrop"); | 210 | color: gtk("@theme_button_foreground_backdrop"); | ||
211 | } | 211 | } | ||
212 | &.flat:disabled { | 212 | &.flat:disabled { | ||
213 | @include button(undecorated); | 213 | @include button(undecorated); | ||
214 | color: gtk("@theme_button_foreground_insensitive"); | 214 | color: gtk("@theme_button_foreground_insensitive"); | ||
215 | } | 215 | } | ||
216 | &.flat:backdrop:disabled { | 216 | &.flat:backdrop:disabled { | ||
217 | @include button(undecorated); | 217 | @include button(undecorated); | ||
218 | color: gtk("@theme_button_foreground_backdrop_insensitive"); | 218 | color: gtk("@theme_button_foreground_backdrop_insensitive"); | ||
219 | } | 219 | } | ||
220 | &:disabled { | 220 | &:disabled { | ||
221 | @include button(insensitive); | 221 | @include button(insensitive); | ||
222 | &:active, &:checked { | 222 | &:active, &:checked, &:focus { | ||
223 | @include button(insensitive-active); | 223 | @include button(insensitive-active); | ||
224 | } | 224 | } | ||
225 | } | 225 | } | ||
226 | separator { | 226 | separator { | ||
227 | background-color: transparent; | 227 | background-color: transparent; | ||
228 | background-image: none; | 228 | background-image: none; | ||
229 | color: transparent; | 229 | color: transparent; | ||
230 | } | 230 | } | ||
▲ Show 20 Lines • Show All 63 Lines • ▼ Show 20 Line(s) | 293 | &.flat { | |||
294 | @include button(undecorated); | 294 | @include button(undecorated); | ||
295 | color: $button_color; | 295 | color: $button_color; | ||
296 | } | 296 | } | ||
297 | &:hover { | 297 | &:hover { | ||
298 | @include button(hover); | 298 | @include button(hover); | ||
299 | color: white; //! FIXME - No hardcoded colors. | 299 | color: white; //! FIXME - No hardcoded colors. | ||
300 | background-color: $button_color; | 300 | background-color: $button_color; | ||
301 | } | 301 | } | ||
302 | &:active, &:checked { | 302 | &:active, &:checked, &:focus { | ||
303 | @include button(active); | 303 | @include button(active); | ||
304 | background-color: $button_color; | 304 | background-color: $button_color; | ||
305 | color: white; | 305 | color: white; | ||
306 | } | 306 | } | ||
307 | &:backdrop, &.flat:backdrop { | 307 | &:backdrop, &.flat:backdrop { | ||
308 | @include button(backdrop); | 308 | @include button(backdrop); | ||
309 | background-color: $button_color; | 309 | background-color: $button_color; | ||
310 | color: white; | 310 | color: white; | ||
311 | &:active, &:checked { | 311 | &:active, &:checked, &:focus { | ||
312 | @include button(backdrop-active); | 312 | @include button(backdrop-active); | ||
313 | background-color: $button_color; | 313 | background-color: $button_color; | ||
314 | color: white; | 314 | color: white; | ||
315 | } | 315 | } | ||
316 | &:disabled { | 316 | &:disabled { | ||
317 | @include button(backdrop-insensitive); | 317 | @include button(backdrop-insensitive); | ||
318 | &:active, &:checked { | 318 | &:active, &:checked, &:focus { | ||
319 | @include button(backdrop-insensitive-active); | 319 | @include button(backdrop-insensitive-active); | ||
320 | background-color: $button_color; | 320 | background-color: $button_color; | ||
321 | color: white; | 321 | color: white; | ||
322 | } | 322 | } | ||
323 | } | 323 | } | ||
324 | } | 324 | } | ||
325 | &.flat:backdrop, &.flat:disabled, &.flat:backdrop:disabled { | 325 | &.flat:backdrop, &.flat:disabled, &.flat:backdrop:disabled { | ||
326 | @include button(undecorated); | 326 | @include button(undecorated); | ||
327 | color: gtkalpha($button_color, 0.8); | 327 | color: gtkalpha($button_color, 0.8); | ||
328 | } | 328 | } | ||
329 | &:disabled { | 329 | &:disabled { | ||
330 | @include button(insensitive); | 330 | @include button(insensitive); | ||
331 | &:active, &:checked { | 331 | &:active, &:checked, &:focus { | ||
332 | @include button(insensitive-active); | 332 | @include button(insensitive-active); | ||
333 | background-color: $button_color; | 333 | background-color: $button_color; | ||
334 | color: white; | 334 | color: white; | ||
335 | } | 335 | } | ||
336 | } | 336 | } | ||
337 | } | 337 | } | ||
338 | } | 338 | } | ||
339 | 339 | | |||
Show All 19 Lines | 358 | &.image-button { | |||
359 | // we want image buttons to have a 1:1 aspect ratio, so compensation | 359 | // we want image buttons to have a 1:1 aspect ratio, so compensation | ||
360 | // of the padding added to the GtkImage is needed | 360 | // of the padding added to the GtkImage is needed | ||
361 | padding: 3px 0px; | 361 | padding: 3px 0px; | ||
362 | } | 362 | } | ||
363 | &.needs-attention > label, | 363 | &.needs-attention > label, | ||
364 | &.needs-attention > image { @extend %needs_attention; } | 364 | &.needs-attention > image { @extend %needs_attention; } | ||
365 | &.needs-attention:active > label, | 365 | &.needs-attention:active > label, | ||
366 | &.needs-attention:active > image, | 366 | &.needs-attention:active > image, | ||
367 | &.needs-attention:focus > label, | ||||
368 | &.needs-attention:focus > image, | ||||
367 | &.needs-attention:checked > label, | 369 | &.needs-attention:checked > label, | ||
368 | &.needs-attention:checked > image { | 370 | &.needs-attention:checked > image { | ||
369 | animation: none; | 371 | animation: none; | ||
370 | background-image: none; | 372 | background-image: none; | ||
371 | } | 373 | } | ||
372 | } | 374 | } | ||
373 | 375 | | |||
374 | //inline-toolbar buttons | 376 | //inline-toolbar buttons | ||
375 | .inline-toolbar &, .inline-toolbar &:backdrop { | 377 | .inline-toolbar &, .inline-toolbar &:backdrop { | ||
376 | border-radius: $r; | 378 | border-radius: $r; | ||
377 | border-width: 1px; | 379 | border-width: 1px; | ||
378 | @extend %linked; | 380 | @extend %linked; | ||
379 | } | 381 | } | ||
380 | 382 | | |||
381 | .primary-toolbar & { -gtk-icon-shadow: none; } | 383 | .primary-toolbar & { -gtk-icon-shadow: none; } | ||
382 | 384 | | |||
383 | .linked > &, | 385 | .linked > &, | ||
384 | .linked > &:hover, | 386 | .linked > &:hover, | ||
385 | .linked > &:active, | 387 | .linked > &:active, | ||
388 | .linked > &:focus, | ||||
386 | .linked > &:checked, | 389 | .linked > &:checked, | ||
387 | .linked > &:backdrop { @extend %linked; } | 390 | .linked > &:backdrop { @extend %linked; } | ||
388 | 391 | | |||
389 | .linked.vertical > &, | 392 | .linked.vertical > &, | ||
390 | .linked.vertical > &:hover, | 393 | .linked.vertical > &:hover, | ||
391 | .linked.vertical > &:active, | 394 | .linked.vertical > &:active, | ||
395 | .linked.vertical > &:focus, | ||||
392 | .linked.vertical > &:checked, | 396 | .linked.vertical > &:checked, | ||
393 | .linked.vertical > &:backdrop { @extend %linked_vertical; } | 397 | .linked.vertical > &:backdrop { @extend %linked_vertical; } | ||
394 | } | 398 | } | ||
395 | 399 | | |||
396 | /************** | 400 | /************** | ||
397 | * ComboBoxes * | 401 | * ComboBoxes * | ||
398 | **************/ | 402 | **************/ | ||
399 | combobox { | 403 | combobox { | ||
▲ Show 20 Lines • Show All 115 Lines • Show Last 20 Lines |