Changeset View
Changeset View
Standalone View
Standalone View
src/gtk3/widgets/_checkboxes.scss
1 | @charset "UTF-8"; | 1 | @charset "UTF-8"; | ||
---|---|---|---|---|---|
2 | 2 | | |||
3 | /************************* | 3 | /************************* | ||
4 | * Check and Radio items * | 4 | * Check and Radio items * | ||
5 | *************************/ | 5 | *************************/ | ||
6 | @each $s,$as in ('','-unchecked'), | 6 | @each $s, | ||
7 | $as in ('', '-unchecked'), | ||||
7 | (':hover', '-unchecked-hover'), | 8 | (':hover', '-unchecked-hover'), | ||
8 | (':active', '-unchecked-active'), | 9 | (':active', '-unchecked-active'), | ||
9 | (':backdrop', '-unchecked-backdrop'), | 10 | (':backdrop', '-unchecked-backdrop'), | ||
10 | (':checked', '-checked-active'), | 11 | (':checked', '-checked-active'), | ||
11 | (':checked:hover', '-checked-hover'), | 12 | (':checked:hover', '-checked-hover'), | ||
12 | (':checked:active', '-checked-active'), | 13 | (':checked:active', '-checked-active'), | ||
13 | (':backdrop:checked', '-checked-backdrop') { | 14 | (':backdrop:checked', '-checked-backdrop') { | ||
14 | .view.content-view.check#{$s}:not(list) { | 15 | .view.content-view.check#{$s}:not(list) { | ||
15 | -gtk-icon-shadow: none; | 16 | -gtk-icon-shadow: none; | ||
16 | -gtk-icon-source: -gtk-scaled(url("../assets/check-selectionmode#{$as}.png"), url("../assets/check-selectionmode#{$as}@2.png")); | 17 | -gtk-icon-source: -gtk-scaled(url("../assets/check-selectionmode#{$as}.png"), url("../assets/check-selectionmode#{$as}@2.png")); | ||
17 | background-color: transparent; | 18 | background-color: transparent; | ||
18 | } | 19 | } | ||
19 | } | 20 | } | ||
20 | 21 | | |||
21 | checkbutton.text-button, radiobutton.text-button { | 22 | checkbutton.text-button, | ||
23 | radiobutton.text-button { | ||||
22 | // this is for a nice focus on check and radios text | 24 | // this is for a nice focus on check and radios text | ||
23 | padding: 2px 0; | 25 | padding: 2px 0; | ||
24 | outline-offset: 0; | 26 | outline-offset: 0; | ||
25 | 27 | | |||
26 | label:not(:only-child) { | 28 | label:not(:only-child) { | ||
27 | &:first-child { margin-left: 4px; } | 29 | &:first-child { | ||
28 | &:last-child { margin-right: 4px; } | 30 | margin-left: 4px; | ||
31 | } | ||||
32 | | ||||
33 | &:last-child { | ||||
34 | margin-right: 4px; | ||||
35 | } | ||||
29 | } | 36 | } | ||
30 | } | 37 | } | ||
31 | 38 | | |||
32 | @each $a in ('check','radio') { | 39 | @each $a in ('check', 'radio') { | ||
33 | 40 | | |||
34 | #{$a} { | 41 | #{$a} { | ||
35 | margin: 0 4px; | 42 | margin: 0 4px; | ||
36 | 43 | | |||
37 | &:only-child { margin: 0; } | 44 | &:only-child { | ||
45 | margin: 0; | ||||
46 | } | ||||
38 | 47 | | |||
39 | min-height: 18px; | 48 | min-height: 18px; | ||
40 | min-width: 18px; | 49 | min-width: 18px; | ||
41 | //border: none; | 50 | //border: none; | ||
42 | animation: none; | 51 | animation: none; | ||
43 | background-color: transparent; | 52 | background-color: transparent; | ||
44 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); | 53 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); | ||
45 | 54 | | |||
46 | @each $s,$as in ('hover','-hover'), | 55 | @each $s, | ||
56 | $as in ('hover', '-hover'), | ||||
47 | ('active','-active'), | 57 | ('active', '-active'), | ||
48 | ('disabled','-insensitive'), | 58 | ('disabled', '-insensitive'), | ||
49 | ('backdrop','-backdrop'), | 59 | ('backdrop', '-backdrop'), | ||
50 | ('backdrop:disabled','-backdrop-insensitive') { | 60 | ('backdrop:disabled', '-backdrop-insensitive') { | ||
51 | &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked#{$as}.png"), url("../assets/#{$a}-unchecked#{$as}@2.png")); } | 61 | &:#{$s} { | ||
62 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked#{$as}.png"), url("../assets/#{$a}-unchecked#{$as}@2.png")); | ||||
63 | } | ||||
64 | | ||||
52 | &:checked { | 65 | &:checked { | ||
53 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); | 66 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); | ||
54 | &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked#{$as}.png"), url("../assets/#{$a}-checked#{$as}@2.png")); } | 67 | | ||
68 | &:#{$s} { | ||||
69 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked#{$as}.png"), url("../assets/#{$a}-checked#{$as}@2.png")); | ||||
55 | } | 70 | } | ||
71 | } | ||||
72 | | ||||
56 | &:indeterminate { | 73 | &:indeterminate { | ||
57 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); | 74 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); | ||
58 | &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed#{$as}.png"), url("../assets/#{$a}-mixed#{$as}@2.png")); } | 75 | | ||
76 | &:#{$s} { | ||||
77 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed#{$as}.png"), url("../assets/#{$a}-mixed#{$as}@2.png")); | ||||
78 | } | ||||
59 | } | 79 | } | ||
60 | } | 80 | } | ||
61 | 81 | | |||
62 | menu menuitem & { | 82 | menu menuitem & { | ||
63 | margin: 0; // this is a workaround for a menu check/radio size allocation issue | 83 | margin: 0; // this is a workaround for a menu check/radio size allocation issue | ||
64 | min-height: 18px; | 84 | min-height: 18px; | ||
65 | min-width: 18px; | 85 | min-width: 18px; | ||
66 | background-color: transparent; | 86 | background-color: transparent; | ||
67 | box-shadow: none; | 87 | box-shadow: none; | ||
68 | -gtk-icon-shadow: none; | 88 | -gtk-icon-shadow: none; | ||
69 | animation: none; | 89 | animation: none; | ||
90 | | ||||
70 | &:hover { | 91 | &:hover { | ||
71 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); | 92 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); | ||
72 | } | 93 | } | ||
94 | | ||||
73 | &:checked:hover { | 95 | &:checked:hover { | ||
74 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); | 96 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); | ||
75 | } | 97 | } | ||
98 | | ||||
76 | &:indeterminate:hover { | 99 | &:indeterminate:hover { | ||
77 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); | 100 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); | ||
78 | } | 101 | } | ||
79 | } | 102 | } | ||
80 | } | 103 | } | ||
81 | } | 104 | } | ||
105 | No newline at end of file |