Skip to content

Commit bbf00f2

Browse files
megaxlots0logs
megax
authored and
lots0logs
committed
GTK 3.20 :: Color chooser rewirte (#423)
* * Color chooser rewirte. * * Adding button.color code.
1 parent 0bc870b commit bbf00f2

1 file changed

Lines changed: 125 additions & 51 deletions

File tree

‎gtk-3.20/scss/widgets/_choosers.scss‎

Lines changed: 125 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,85 +4,159 @@
44

55
@include exports("colorchooser") {
66
colorswatch {
7-
&, &:selected {
8-
border: 1px solid alpha($black, .1);
9-
border-radius: $roundness - 1px;
10-
background-color: transparent;
11-
background-clip: border-box;
7+
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
8+
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
9+
// applied to the overlay box.
1210

13-
&:hover { border-color: alpha($black, .3); }
11+
&:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
12+
13+
$_colorswatch_radius: $roundness;
14+
15+
// base color corners rounding
16+
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
17+
// sports a bigger radius.
18+
// nth-child is needed by the custom color strip.
19+
20+
&.top {
21+
border-top-left-radius: $_colorswatch_radius + .5px;
22+
border-top-right-radius: $_colorswatch_radius + .5px;
23+
24+
overlay {
25+
border-top-left-radius: $_colorswatch_radius;
26+
border-top-right-radius: $_colorswatch_radius;
27+
}
1428
}
1529

16-
&.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; }
30+
&.bottom {
31+
border-bottom-left-radius: $_colorswatch_radius + .5px;
32+
border-bottom-right-radius: $_colorswatch_radius + .5px;
1733

18-
&.left, &:first-child {
19-
border-top-left-radius: $roundness;
20-
border-bottom-left-radius: $roundness;
34+
overlay {
35+
border-bottom-left-radius: $_colorswatch_radius;
36+
border-bottom-right-radius: $_colorswatch_radius;
37+
}
2138
}
2239

23-
&.right, &:last-child {
24-
border-top-right-radius: $roundness;
25-
border-bottom-right-radius: $roundness;
40+
&.left,
41+
&:first-child:not(.top) {
42+
border-top-left-radius: $_colorswatch_radius + .5px;
43+
border-bottom-left-radius: $_colorswatch_radius + .5px;
44+
45+
overlay {
46+
border-top-left-radius: $_colorswatch_radius;
47+
border-bottom-left-radius: $_colorswatch_radius;
48+
}
2649
}
2750

28-
&:only-child { border-radius: $roundness; }
51+
&.right,
52+
&:last-child:not(.bottom) {
53+
border-top-right-radius: $_colorswatch_radius + .5px;
54+
border-bottom-right-radius: $_colorswatch_radius + .5px;
2955

30-
&.top {
31-
border-top-left-radius: $roundness;
32-
border-top-right-radius: $roundness;
56+
overlay {
57+
border-top-right-radius: $_colorswatch_radius;
58+
border-bottom-right-radius: $_colorswatch_radius;
59+
}
3360
}
3461

35-
&.bottom {
36-
border-bottom-left-radius: $roundness;
37-
border-bottom-right-radius: $roundness;
62+
&.dark overlay {
63+
color: $selected_fg_color;
64+
65+
&:hover { border-color: if($variant == 'light', transparentize($black, .2), $borders_color); }
66+
67+
&:backdrop { color: $backdrop_selected_fg_color; }
3868
}
3969

40-
coloreditor & {
41-
border-radius: $roundness;
70+
&.light overlay {
71+
color: $text_color;
4272

43-
&.color-dark:hover, &.color-light:hover {
44-
background-image: none;
45-
border-color: alpha($black, .3);
46-
}
73+
&:hover { border-color: if($variant == 'light', transparentize($black, .5), $borders_color); }
74+
75+
&:backdrop { color: $backdrop_text_color; }
4776
}
48-
}
4977

50-
GtkColorChooserWidget #add-color-button {
51-
background-clip: padding-box;
52-
border-color: alpha($black, .1);
53-
background-color: shade($bg_color, .95);
54-
color: $fg_color;
78+
&:drop(active) {
79+
box-shadow: none;
5580

56-
&:hover {
57-
border-color: alpha($black, .3);
58-
background-color: shade($bg_color, .9);
59-
color: $fg_color;
81+
&.light overlay {
82+
border-color: $drop_target_color;
83+
box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
84+
inset 0 0 0 1px $drop_target_color;
85+
}
86+
87+
&.dark overlay {
88+
border-color: $drop_target_color;
89+
box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize($black, .7), $borders_color),
90+
inset 0 0 0 1px $drop_target_color;
91+
}
6092
}
61-
}
6293

63-
.color-active-badge {
64-
&, &:selected {
65-
border-width: 2px;
66-
border-style: solid;
67-
background-color: transparent;
94+
overlay {
95+
border: 1px solid if($variant == 'light', transparentize($black, .7), $borders_color);
96+
97+
&:hover {
98+
box-shadow: inset 0 1px transparentize($white, .6),
99+
inset 0 -1px transparentize($black, .8);
100+
}
101+
102+
&:backdrop,
103+
&:backdrop:hover {
104+
border-color: if($variant == 'light', transparentize($black, .7), $borders_color);
105+
box-shadow: none;
106+
}
68107
}
69108

70-
&.color-light {
71-
&, &:hover {
72-
border-color: alpha($black, .3);
73-
color: alpha($black, .3);
109+
&:disabled {
110+
opacity: .5;
111+
112+
overlay {
113+
border-color: transparentize($black, .4);
114+
box-shadow: none;
74115
}
75116
}
76117

77-
&.color-dark {
78-
&, &:hover {
79-
border-color: alpha($white, .3);
80-
color: alpha($white, .3);
118+
row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
119+
120+
&#add-color-button {
121+
border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
122+
123+
&:only-child { border-radius: $_colorswatch_radius; }
124+
125+
overlay {
126+
background-color: shade($bg_color, .95);
127+
color: $fg_color;
128+
129+
&:hover { background-color: shade($bg_color, .9); }
130+
131+
&:backdrop { background-color: shade($backdrop_bg_color, .95); }
81132
}
82133
}
134+
135+
&#editor-color-sample {
136+
border-radius: $_colorswatch_radius;
137+
138+
overlay { border-radius: $_colorswatch_radius + .5px; }
139+
}
140+
}
141+
142+
button.color {
143+
padding: $spacing;
144+
145+
colorswatch:only-child {
146+
&, overlay { border-radius: 0; }
147+
148+
@if $variant == 'light' { box-shadow: 0 1px _text_shadow_color(); }
149+
}
150+
151+
@if $variant == 'light' {
152+
&:disabled,
153+
&:backdrop,
154+
&:active,
155+
&:checked { colorswatch:only-child { box-shadow: none; } }
156+
}
83157
}
84158

85-
GtkColorButton.button { padding: $spacing; }
159+
colorchooser .popover.osd { border-radius: $roundness; }
86160
}
87161

88162

0 commit comments

Comments
 (0)