Skip to content

Commit d99f46c

Browse files
khurshid-alamkhurshid-alam
committed
[Gtk-3.22] Use box-shadow to draw border on Notebook tab
We were drawing border on both notebook tab and on widget > box, which results a double border on tab. The situation worse in case of tiling gtk3 apps like tilix which uses can use horizontal notebook inside vertical notebook.
1 parent f25d7e0 commit d99f46c

1 file changed

Lines changed: 94 additions & 106 deletions

File tree

‎src/gtk-3.20/scss/widgets/_notebook.scss‎

Lines changed: 94 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -145,28 +145,21 @@
145145

146146
tab {
147147
padding: 0;
148-
border-style: solid;
149-
border-width: 1px; // for reorderable tabs
150-
border-color: transparent; //
151-
background-image: none;
152-
box-shadow: none;
153148
outline: none;
154149

155150
> box,
156151
> label,
157152
> widget > box {
158-
padding: $spacing $spacing * 2; // top/bottom | left/right
159-
border-width: 2px;
160-
border-style: solid;
161-
border-color: transparent;
162-
transition: border-color .2s linear;
153+
padding: ($spacing + 2px) $spacing * 2; // top/bottom | left/right
154+
box-shadow: 1px 1px transparent; //duplicate shadows used for transition?
155+
transition: box-shadow .2s linear;
163156
}
164157

165158
&.reorderable-page {
166159
> box,
167160
> label,
168161
> widget > box {
169-
padding: $spacing $spacing * 2; // top | right | bottom | left
162+
padding: ($spacing + 2px) $spacing * 2; // top | right | bottom | left
170163
}
171164
}
172165

@@ -217,153 +210,122 @@
217210
}
218211
}
219212

220-
&.top tab,
221-
&.bottom tab {
213+
214+
&.top tab {
215+
box-shadow: inset 0 -1px $borders_color;
216+
transition: box-shadow .2s ease-out;
217+
222218
&:hover {
219+
outline: none;
223220
&:not(:first-child):not(:last-child):not(:only-child) {
224-
box-shadow: 1px 0 1px shade($base_color, .85), -1px 0 1px shade($base_color, .85);
221+
box-shadow: 1px 0 1px shade($base_color, .85), -1px 0 1px shade($base_color, .85), inset 0 -1px $borders_color;
225222
}
226223

227224
&:last-child:not(:only-child) {
228-
box-shadow: -1px 0 1px shade($base_color, .85);
225+
box-shadow: -1px 0 1px shade($base_color, .85), inset 0 -1px $borders_color;
229226
}
230227

231228
&:first-child:not(:only-child) {
232-
box-shadow: 1px 0 1px shade($base_color, .85);
233-
}
229+
box-shadow: 1px 0 1px shade($base_color, .85), inset 0 -1px $borders_color;
230+
}
234231
}
235232

236233
&:checked {
237-
&:not(:first-child):not(:last-child):not(:only-child) {
238-
box-shadow: 1px 0 1px shade($base_color, .8), -1px 0 1px shade($base_color, .8);
239-
}
234+
outline: none;
240235

241-
&:last-child:not(:only-child) {
242-
box-shadow: -1px 0 1px shade($base_color, .8);
236+
label {
237+
margin-bottom: 0;
238+
color: $selected_bg_color;
243239
}
244240

245-
&:first-child:not(:only-child) {
246-
box-shadow: 1px 0 1px shade($base_color, .8);
241+
&:hover {
242+
background-color: mix($bg_color, $base_color, .6);
247243
}
248-
}
249-
}
250244

251-
&.right tab,
252-
&.left tab {
253-
&:hover {
254245
&:not(:first-child):not(:last-child):not(:only-child) {
255-
box-shadow: 0 1px 1px shade($base_color, .85), 0 -1px 1px shade($base_color, .85);
246+
box-shadow: 1px 0 1px shade($base_color, .8), -1px 0 1px shade($base_color, .8), inset 0 -2px $selected_bg_color;
256247
}
257248

258249
&:last-child:not(:only-child) {
259-
box-shadow: 0 -1px 1px shade($base_color, .85);
250+
box-shadow: -1px 0 1px shade($base_color, .8), inset 0 -2px $selected_bg_color;
251+
260252
}
261253

262254
&:first-child:not(:only-child) {
263-
box-shadow: 0 1px 1px shade($base_color, .85);
255+
box-shadow: 1px 0 1px shade($base_color, .8), inset 0 -2px $selected_bg_color;
256+
264257
}
265258
}
259+
}
260+
261+
&.right tab {
262+
box-shadow: inset 1px 0 $borders_color;
263+
transition: box-shadow .3s ease-out;
264+
265+
&:hover {
266+
outline: none;
266267

267-
&:checked {
268268
&:not(:first-child):not(:last-child):not(:only-child) {
269-
box-shadow: 0 1px 1px shade($base_color, .8), 0 -1px 1px shade($base_color, .8);
269+
box-shadow: 0 1px 1px shade($base_color, .85), 0 -1px 1px shade($base_color, .85), inset 1px 0 $borders_color;
270270
}
271271

272272
&:last-child:not(:only-child) {
273-
box-shadow: 0 -1px 1px shade($base_color, .8);
273+
box-shadow: 0 -1px 1px shade($base_color, .85), inset 1px 0 $borders_color;
274274
}
275275

276276
&:first-child:not(:only-child) {
277-
box-shadow: 0 1px 1px shade($base_color, .8);
277+
box-shadow: 0 1px 1px shade($base_color, .85), inset 1px 0 $borders_color;
278278
}
279279
}
280-
}
281-
282-
&.top tab {
283-
border-style: solid;
284-
border-color: $borders_color;
285-
border-width: 0;
286-
border-bottom-width: 1px;
287-
transition: border-bottom-color .2s linear;
288-
289-
&:hover {
290-
outline: none;
291-
}
292280

293281
&:checked {
294-
border-bottom-color: $selected_bg_color;
295282
outline: none;
296283

297-
> box,
298-
> label,
299-
> widget > box {
300-
border-bottom-color: $selected_bg_color;
301-
}
302-
303284
label {
304-
margin-bottom: 0;
285+
margin-left: 0;
305286
color: $selected_bg_color;
306287
}
307288

308289
&:hover {
309290
background-color: mix($bg_color, $base_color, .6);
310291
}
311-
}
312-
}
313292

314-
&.right tab {
315-
border-style: solid;
316-
border-color: $borders_color;
317-
border-width: 0;
318-
border-left-width: 1px;
319-
transition: border-left-color .3s ease-out;
320-
321-
&:hover {
322-
outline: none;
323-
}
324-
325-
&:checked {
326-
border-left-color: $selected_bg_color;
327-
outline: none;
328-
329-
> box,
330-
> label,
331-
> widget > box {
332-
border-left-color: $selected_bg_color;
293+
&:not(:first-child):not(:last-child):not(:only-child) {
294+
box-shadow: 0 1px 1px shade($base_color, .8), 0 -1px 1px shade($base_color, .8), inset 2px 0 $selected_bg_color;
333295
}
334296

335-
label {
336-
margin-left: 0;
337-
color: $selected_bg_color;
297+
&:last-child:not(:only-child) {
298+
box-shadow: 0 -1px 1px shade($base_color, .8), inset 2px 0 $selected_bg_color;
338299
}
339300

340-
&:hover {
341-
background-color: mix($bg_color, $base_color, .6);
301+
&:first-child:not(:only-child) {
302+
box-shadow: 0 1px 1px shade($base_color, .8), inset 2px 0 $selected_bg_color;
342303
}
343304
}
344305
}
345306

346307
&.bottom tab {
347-
border-style: solid;
348-
border-color: $borders_color;
349-
border-width: 0;
350-
border-top-width: 1px;
351-
transition: border-top-color .3s ease-out;
308+
box-shadow: inset 0 1px $borders_color;
309+
transition: box-shadow .3s ease-out;
352310

353311
&:hover {
354312
outline: none;
313+
&:not(:first-child):not(:last-child):not(:only-child) {
314+
box-shadow: 1px 0 1px shade($base_color, .85), -1px 0 1px shade($base_color, .85), inset 0 1px $borders_color;
315+
}
316+
317+
&:last-child:not(:only-child) {
318+
box-shadow: -1px 0 1px shade($base_color, .85), inset 0 1px $borders_color;
319+
}
320+
321+
&:first-child:not(:only-child) {
322+
box-shadow: 1px 0 1px shade($base_color, .85), inset 0 1px $borders_color;
323+
}
355324
}
356325

357326
&:checked {
358-
border-top-color: $selected_bg_color;
359327
outline: none;
360328

361-
> box,
362-
> label,
363-
> widget > box {
364-
border-top-color: $selected_bg_color;
365-
}
366-
367329
label {
368330
margin-top: 0;
369331
color: $selected_bg_color;
@@ -372,30 +334,44 @@
372334
&:hover {
373335
background-color: mix($bg_color, $base_color, .6);
374336
}
337+
338+
&:not(:first-child):not(:last-child):not(:only-child) {
339+
box-shadow: 1px 0 1px shade($base_color, .8), -1px 0 1px shade($base_color, .8), inset 0 2px $selected_bg_color;
340+
}
341+
342+
&:last-child:not(:only-child) {
343+
box-shadow: -1px 0 1px shade($base_color, .8), inset 0 2px $selected_bg_color;
344+
}
345+
346+
&:first-child:not(:only-child) {
347+
box-shadow: 1px 0 1px shade($base_color, .8), inset 0 2px $selected_bg_color;
348+
}
375349
}
376350
}
377351

378352
&.left tab {
379-
border-style: solid;
380-
border-color: $borders_color;
381-
border-width: 0;
382-
border-right-width: 1px;
383-
transition: border-right-color .3s ease-out;
353+
box-shadow: inset -1px 0 $borders_color;
354+
transition: box-shadow .3s ease-out;
384355

385356
&:hover {
386357
outline: none;
358+
359+
&:not(:first-child):not(:last-child):not(:only-child) {
360+
box-shadow: 0 1px 1px shade($base_color, .85), 0 -1px 1px shade($base_color, .85), inset -1px 0 $borders_color;
361+
}
362+
363+
&:last-child:not(:only-child) {
364+
box-shadow: 0 -1px 1px shade($base_color, .85), inset -1px 0 $borders_color;
365+
}
366+
367+
&:first-child:not(:only-child) {
368+
box-shadow: 0 1px 1px shade($base_color, .85), inset -1px 0 $borders_color;
369+
}
387370
}
388371

389372
&:checked {
390-
border-right-color: $selected_bg_color;
391373
outline: none;
392374

393-
> box,
394-
> label,
395-
> widget > box {
396-
border-right-color: $selected_bg_color;
397-
}
398-
399375
label {
400376
margin-right: 0;
401377
color: $selected_bg_color;
@@ -404,6 +380,18 @@
404380
&:hover {
405381
background-color: mix($bg_color, $base_color, .6);
406382
}
383+
384+
&:not(:first-child):not(:last-child):not(:only-child) {
385+
box-shadow: 0 1px 1px shade($base_color, .8), 0 -1px 1px shade($base_color, .8), inset -2px 0 $selected_bg_color;
386+
}
387+
388+
&:last-child:not(:only-child) {
389+
box-shadow: 0 -1px 1px shade($base_color, .8), inset -2px 0 $selected_bg_color;
390+
}
391+
392+
&:first-child:not(:only-child) {
393+
box-shadow: 0 1px 1px shade($base_color, .8), inset -2px 0 $selected_bg_color;
394+
}
407395
}
408396
}
409397
}

0 commit comments

Comments
 (0)