git.stevedylan.dev

gtk-3.0/widgets/_buttons.scss 13.4 K raw

/***********
 * Buttons *
 ***********/
// stuff for .needs-attention
$_dot_color: if($variant=='light', $selected_bg_color,
                                   lighten($selected_bg_color,15%));
@keyframes needs_attention {
  from {
    background-image: -gtk-gradient(radial,
                                    center center, 0,
                                    center center, 0.01,
                                    to($_dot_color),
                                    to(transparent));
  }

  to {
    background-image: -gtk-gradient(radial,
                                    center center, 0,
                                    center center, 0.5,
                                    to($selected_bg_color),
                                    to(transparent));
  }
}

%button,
button {
  @at-root %button_basic, & {
    min-height: 20px;
    min-width: 16px;
    padding: 2px 6px;
    border: 1px solid $borders_color;
    border-radius: 4px;
    transition: $button_transition;

    @include button(normal);

    &.flat {
      @include button(undecorated);
      // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
      // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
      // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
      // in this case the duration is increased.
      transition: none;

      &:hover {
        transition: $button_transition;
        transition-duration: 500ms;
        @include button(hover,$selected_bg_color,$selected_fg_color);
        &:active { transition: $button_transition; }
      }
    }

    &:hover {
      @include button(hover,$selected_bg_color,$selected_fg_color);
      -gtk-icon-effect: highlight;
    }

    &:active,
    &:checked {
      @include button(active,darken($selected_bg_color,5%),$selected_fg_color);

      transition-duration: 50ms;
    }

    &:backdrop {
      &.flat, & {
        @include button(backdrop);

        transition: $backdrop_transition;
        -gtk-icon-effect: none;

        &:active,
        &:checked { @include button(backdrop-active); }

        &:disabled {
          @include button(backdrop-insensitive);

          &:active,
          &:checked { @include button(backdrop-insensitive-active); }
        }
      }
    }

    &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}

    &:disabled {
      @include button(insensitive);

      &:active,
      &:checked { @include button(insensitive-active); }
    }

    &.image-button {
      min-width: 24px;
      padding-left: 4px;
      padding-right: 4px;
    }
    &.image-button.circular,&.image-button.sidebar-button{
      padding: 6px 4px;
      border-radius: 50px;
      box-shadow: none;
     }

    &.text-button {
      padding-left: 16px;
      padding-right: 16px;
    }

    &.text-button.image-button {
      padding-left: 8px;
      padding-right: 8px;
      border-radius: 2px;
      label {
        padding-left: 8px;
        padding-right: 8px;
      }
    }

    &:drop(active) {
      color: $drop_target_color;
      border-color: $drop_target_color;
      box-shadow: inset 0 0 0 1px $drop_target_color;
    }
  }

  @at-root %button_selected, & {
    row:selected & {
      @if $variant == 'light' { border-color: $selected_borders_color; }

      &.flat:not(:active):not(:checked):not(:hover):not(disabled) {
        color: $selected_fg_color;
        border-color: transparent;

        &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
      }
    }
  }


  // big standalone buttons like in Documents pager
  &.osd {
    min-width: 24px;
    min-height: 20px;

    &.image-button { min-width: 32px; }

    color: $osd_fg_color;
    border-radius: 5px;
    outline-color: transparentize($osd_fg_color, 0.7);  //FIXME: define a color var?

    @include button(osd);

    border: none;
    box-shadow: none;

    &:hover {
      @include button(osd-hover);

      border: none;
      box-shadow: none;
    }

    &:active,
    &:checked {
      @include button(osd-active);

      border: none;
      box-shadow: none;
    }

    &:disabled {
      &:backdrop, & {
        @include button(osd-insensitive);

        border: none;
      }
    }

    &:backdrop {
      @include button(osd-backdrop);

      border: none;
    }
  }

  //overlay / OSD style
  @at-root %osd_button,
  .osd & {
    @include button(osd);

    &:hover { @include button(osd-hover); }

    &:active,
    &:checked { &:backdrop, & { @include button(osd-active); }}

    &:disabled { &:backdrop, & { @include button(osd-insensitive); }}

    &:backdrop { @include button(osd-backdrop); }

    &.flat {
      @include button(undecorated);

      box-shadow: none; //FIXME respect no edge on the button mixin
      text-shadow: 0 1px black;
      -gtk-icon-shadow: 0 1px black;

      &:hover { @include button(osd-hover); }

      &:disabled {
        @include button(osd-insensitive);
        background-image: none;
        border-color: transparent;
        box-shadow: none;
      }

      &:backdrop { @include button(undecorated); }

      &:active,
      &:checked { @include button(osd-active); }
    }
  }

  // Suggested and Destructive Action buttons
  @each $b_type, $b_color in (suggested-action, $cyan),
                             (destructive-action, $destructive_color) {
    &.#{$b_type} {
      border: none;
      
      @if $b_type ==  suggested-action {
        @include button(rounded, $b_color, white);
      } @else {
        @include button(rounded-red, $b_color, white); 
      }

      &.flat {
       // @include button(undecorated);
        @include button(rounded, $b_color, white);
        //color: $b_color; //FIXME: does it work on the dark variant?
      }

      &:hover { @include button(hover, $b_color, white); }

      &:active,
      &:checked { @include button(active, $b_color, white); }

      &:backdrop,
      &.flat:backdrop {
        @include button(backdrop, $b_color, white);
        label { color: transparentize(white, 0.5);}
        &:active,
        &:checked { @include button(backdrop-active, $b_color, white); }

        &:disabled {
          @include button(backdrop-insensitive, $b_color, white);
          label { color: transparentize(white, 0.5);}

          &:active,
          &:checked { @include button(backdrop-insensitive-active, $b_color, white); }
        }
      }

      &.flat {
        &:backdrop, &:disabled, &:backdrop:disabled {
          @include button(undecorated);

          color: transparentize($b_color, 0.2);
        }
      }

      &:disabled {
        @include button(insensitive, $b_color, white);

        &:active,
        &:checked { @include button(insensitive-active, $b_color, white); }
      }

      .osd & {
        @include button(osd, $b_color);
        
        &:hover { @include button(osd-hover, $b_color); }

        &:active,
        &:checked { &:backdrop, & { @include button(osd-active, $b_color); }}

        &:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }}

        &:backdrop { @include button(osd-backdrop, $b_color); }
      }
    }
  }

  .stack-switcher > & {
    // to position the needs attention dot, padding is added to the button
    // child, a label needs just lateral padding while an icon needs vertical
    // padding added too.

    outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset

    > label {
      padding-left: 6px;  // label padding
      padding-right: 6px; //
    }

    > image {
      padding-left: 6px;   // image padding
      padding-right: 6px;  //
      padding-top: 3px;    //
      padding-bottom: 3px; //
    }

    &.text-button {
      // compensate text-button paddings
      padding-left: 10px;
      padding-right: 10px;
    }

    &.image-button {
      // we want image buttons to have a 1:1 aspect ratio, so compensation
      // of the padding added to the GtkImage is needed
      padding-left: 2px;
      padding-right: 2px;
    }

    &.needs-attention {
      > label,
      > image { @extend %needs_attention; }

      &:active,
      &:checked {
        > label,
        > image {
          animation: none;
          background-image: none;
        }
      }
    }
  }

  //inline-toolbar buttons
  .inline-toolbar &, .inline-toolbar &:backdrop {
    border-radius: 2px;
    border-width: 1px;
    @extend %linked;
  }

 .primary-toolbar &, .primary-toolbar .raised & { // tango icons don't need shadows
    -gtk-icon-shadow: none; 

    &:hover,
    &:focus {
      @include button(hover,$selected_bg_color,$selected_fg_color);
    }
  }

  .linked > &,
  .linked > &:hover,
  .linked > &:active,
  .linked > &:checked,
  .linked > &:backdrop { @extend %linked; }

  .linked.vertical > &,
  .linked.vertical > &:hover,
  .linked.vertical > &:active,
  .linked.vertical > &:checked,
  .linked.vertical > &:backdrop { @extend %linked_vertical; }
}

%needs_attention {
  animation: needs_attention 150ms ease-in;
  $_dot_shadow: _text_shadow_color();
  $_dot_shadow_r: if($variant=='light',0.5,0.45);
  background-image: -gtk-gradient(radial,
                                  center center, 0,
                                  center center, 0.5,
                                  to($_dot_color),
                                  to(transparent)),
                    -gtk-gradient(radial,
                                  center center, 0,
                                  center center, $_dot_shadow_r,
                                  to($_dot_shadow),
                                  to(transparent));
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;

  @if $variant == 'light' { background-position: right 3px, right 4px; }

  @else { background-position: right 3px, right 2px; }

  &:backdrop { background-size: 6px 6px, 0 0;}

  &:dir(rtl) {
    @if $variant == 'light' { background-position: left 3px, left 4px; }

    @else { background-position: left 3px, left 2px; }
  }
}

toolbar {
  button {
    &:hover { @include button(normal,darken($bg_color,7%));}
    &:active { @include button(normal,darken($bg_color,12%));}
  }
}
// all the following is for the +|- buttons on inline toolbars, that way
// should really be deprecated...
.inline-toolbar toolbutton > button { // redefining the button look is
                                      // needed since those are flat...
  @include button(undecorated);

  &:hover { color: $selected_fg_color; }

  &:active,
  &:checked{ color: darken($selected_fg_color, 5%); }

  &:disabled {
    color: $backdrop_text_color;

    &:active,
    &:checked { color: transparentize(darken($selected_fg_color, 5%),0.7); }
  }

  &:backdrop {
    color: $backdrop_text_color;

    &:active,
    &:checked { color: darken($selected_fg_color, 5%); }

    &:disabled {
      color: $backdrop_text_color;

      &:active,
      &:checked { color: transparentize(darken($selected_fg_color, 5%),0.7); }
    }
  }
}

// More inline toolbar buttons
toolbar.inline-toolbar toolbutton,
toolbar.inline-toolbar toolbutton:backdrop {
  > button.flat {
    &:backdrop {
      border-color: transparent;
      box-shadow: none;
    }
  }
}

%linked_middle {
  border: 1px solid $borders_color;
  border-radius: 0;
  border-right-style: none;
  box-shadow: none;
  &:disabled {
    @include button(insensitive, $base_color, $text_color); 
    color: $insensitive_fg_color;
  }
}

%linked {
  @extend %linked_middle;

  &:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  &:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-right-style: solid;
  }

  &:only-child {
    border-radius: 3px;
    border-style: solid;
  }
}

%linked_vertical_middle {
  border-style: solid solid none solid;
  border-radius: 0;
}

%linked_vertical{
  @extend %linked_vertical_middle;

  &:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

  &:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-style: solid;
  }

  &:only-child {
    border-radius: 3px;
    border-style: solid;
  }
}

%undecorated_button {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: inset 0 1px transparentize(white,1),
              0 1px transparentize(white, 1);
  text-shadow: none;
  -gtk-icon-shadow: none;
}

/* menu buttons */
modelbutton.flat,
.menuitem.button.flat {
  min-height: 26px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
  outline-offset: -2px;

  @extend %undecorated_button;

  &:hover { background-color: $popover_hover_color; }

  &:selected { @extend %selected_items; }

  &:backdrop,
  &:backdrop:hover { @extend %undecorated_button; }

  // FIXME: remove the following when the checks/radios rewrite lands
  check:last-child,
  radio:last-child { margin-left: 8px; }

  check:first-child,
  radio:first-child { margin-right: 8px; }
}

modelbutton.flat arrow {
  background: none;

  &:hover { background: none; }

  &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }

  &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
}

button.color {
  padding: 4px;

  colorswatch:only-child {
    &, overlay { border-radius: 0; }

    @if $variant == 'light' {
      box-shadow: none;

      &:disabled,
      &:backdrop { box-shadow: none; }
    }
  }
}

notebook, list, .view, popover {
  button {
    box-shadow: none;
    &:backdrop {
      box-shadow: none;
    }
  }
  .linked > button {
    box-shadow: none;
  }
}

1	/***********
2	* Buttons *
3	***********/
4	// stuff for .needs-attention
5	$_dot_color: if($variant=='light', $selected_bg_color,
6	lighten($selected_bg_color,15%));
7	@keyframes needs_attention {
8	from {
9	background-image: -gtk-gradient(radial,
10	center center, 0,
11	center center, 0.01,
12	to($_dot_color),
13	to(transparent));
14	}
15
16	to {
17	background-image: -gtk-gradient(radial,
18	center center, 0,
19	center center, 0.5,
20	to($selected_bg_color),
21	to(transparent));
22	}
23	}
24
25	%button,
26	button {
27	@at-root %button_basic, & {
28	min-height: 20px;
29	min-width: 16px;
30	padding: 2px 6px;
31	border: 1px solid $borders_color;
32	border-radius: 4px;
33	transition: $button_transition;
34
35	@include button(normal);
36
37	&.flat {
38	@include button(undecorated);
39	// to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
40	// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
41	// it won't fade out when the pointer leave the button allocation area. To make the transition more evident
42	// in this case the duration is increased.
43	transition: none;
44
45	&:hover {
46	transition: $button_transition;
47	transition-duration: 500ms;
48	@include button(hover,$selected_bg_color,$selected_fg_color);
49	&:active { transition: $button_transition; }
50	}
51	}
52
53	&:hover {
54	@include button(hover,$selected_bg_color,$selected_fg_color);
55	-gtk-icon-effect: highlight;
56	}
57
58	&:active,
59	&:checked {
60	@include button(active,darken($selected_bg_color,5%),$selected_fg_color);
61
62	transition-duration: 50ms;
63	}
64
65	&:backdrop {
66	&.flat, & {
67	@include button(backdrop);
68
69	transition: $backdrop_transition;
70	-gtk-icon-effect: none;
71
72	&:active,
73	&:checked { @include button(backdrop-active); }
74
75	&:disabled {
76	@include button(backdrop-insensitive);
77
78	&:active,
79	&:checked { @include button(backdrop-insensitive-active); }
80	}
81	}
82	}
83
84	&.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
85
86	&:disabled {
87	@include button(insensitive);
88
89	&:active,
90	&:checked { @include button(insensitive-active); }
91	}
92
93	&.image-button {
94	min-width: 24px;
95	padding-left: 4px;
96	padding-right: 4px;
97	}
98	&.image-button.circular,&.image-button.sidebar-button{
99	padding: 6px 4px;
100	border-radius: 50px;
101	box-shadow: none;
102	}
103
104	&.text-button {
105	padding-left: 16px;
106	padding-right: 16px;
107	}
108
109	&.text-button.image-button {
110	padding-left: 8px;
111	padding-right: 8px;
112	border-radius: 2px;
113	label {
114	padding-left: 8px;
115	padding-right: 8px;
116	}
117	}
118
119	&:drop(active) {
120	color: $drop_target_color;
121	border-color: $drop_target_color;
122	box-shadow: inset 0 0 0 1px $drop_target_color;
123	}
124	}
125
126	@at-root %button_selected, & {
127	row:selected & {
128	@if $variant == 'light' { border-color: $selected_borders_color; }
129
130	&.flat:not(:active):not(:checked):not(:hover):not(disabled) {
131	color: $selected_fg_color;
132	border-color: transparent;
133
134	&:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
135	}
136	}
137	}
138
139
140	// big standalone buttons like in Documents pager
141	&.osd {
142	min-width: 24px;
143	min-height: 20px;
144
145	&.image-button { min-width: 32px; }
146
147	color: $osd_fg_color;
148	border-radius: 5px;
149	outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var?
150
151	@include button(osd);
152
153	border: none;
154	box-shadow: none;
155
156	&:hover {
157	@include button(osd-hover);
158
159	border: none;
160	box-shadow: none;
161	}
162
163	&:active,
164	&:checked {
165	@include button(osd-active);
166
167	border: none;
168	box-shadow: none;
169	}
170
171	&:disabled {
172	&:backdrop, & {
173	@include button(osd-insensitive);
174
175	border: none;
176	}
177	}
178
179	&:backdrop {
180	@include button(osd-backdrop);
181
182	border: none;
183	}
184	}
185
186	//overlay / OSD style
187	@at-root %osd_button,
188	.osd & {
189	@include button(osd);
190
191	&:hover { @include button(osd-hover); }
192
193	&:active,
194	&:checked { &:backdrop, & { @include button(osd-active); }}
195
196	&:disabled { &:backdrop, & { @include button(osd-insensitive); }}
197
198	&:backdrop { @include button(osd-backdrop); }
199
200	&.flat {
201	@include button(undecorated);
202
203	box-shadow: none; //FIXME respect no edge on the button mixin
204	text-shadow: 0 1px black;
205	-gtk-icon-shadow: 0 1px black;
206
207	&:hover { @include button(osd-hover); }
208
209	&:disabled {
210	@include button(osd-insensitive);
211	background-image: none;
212	border-color: transparent;
213	box-shadow: none;
214	}
215
216	&:backdrop { @include button(undecorated); }
217
218	&:active,
219	&:checked { @include button(osd-active); }
220	}
221	}
222
223	// Suggested and Destructive Action buttons
224	@each $b_type, $b_color in (suggested-action, $cyan),
225	(destructive-action, $destructive_color) {
226	&.#{$b_type} {
227	border: none;
228
229	@if $b_type == suggested-action {
230	@include button(rounded, $b_color, white);
231	} @else {
232	@include button(rounded-red, $b_color, white);
233	}
234
235	&.flat {
236	// @include button(undecorated);
237	@include button(rounded, $b_color, white);
238	//color: $b_color; //FIXME: does it work on the dark variant?
239	}
240
241	&:hover { @include button(hover, $b_color, white); }
242
243	&:active,
244	&:checked { @include button(active, $b_color, white); }
245
246	&:backdrop,
247	&.flat:backdrop {
248	@include button(backdrop, $b_color, white);
249	label { color: transparentize(white, 0.5);}
250	&:active,
251	&:checked { @include button(backdrop-active, $b_color, white); }
252
253	&:disabled {
254	@include button(backdrop-insensitive, $b_color, white);
255	label { color: transparentize(white, 0.5);}
256
257	&:active,
258	&:checked { @include button(backdrop-insensitive-active, $b_color, white); }
259	}
260	}
261
262	&.flat {
263	&:backdrop, &:disabled, &:backdrop:disabled {
264	@include button(undecorated);
265
266	color: transparentize($b_color, 0.2);
267	}
268	}
269
270	&:disabled {
271	@include button(insensitive, $b_color, white);
272
273	&:active,
274	&:checked { @include button(insensitive-active, $b_color, white); }
275	}
276
277	.osd & {
278	@include button(osd, $b_color);
279
280	&:hover { @include button(osd-hover, $b_color); }
281
282	&:active,
283	&:checked { &:backdrop, & { @include button(osd-active, $b_color); }}
284
285	&:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }}
286
287	&:backdrop { @include button(osd-backdrop, $b_color); }
288	}
289	}
290	}
291
292	.stack-switcher > & {
293	// to position the needs attention dot, padding is added to the button
294	// child, a label needs just lateral padding while an icon needs vertical
295	// padding added too.
296
297	outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
298
299	> label {
300	padding-left: 6px; // label padding
301	padding-right: 6px; //
302	}
303
304	> image {
305	padding-left: 6px; // image padding
306	padding-right: 6px; //
307	padding-top: 3px; //
308	padding-bottom: 3px; //
309	}
310
311	&.text-button {
312	// compensate text-button paddings
313	padding-left: 10px;
314	padding-right: 10px;
315	}
316
317	&.image-button {
318	// we want image buttons to have a 1:1 aspect ratio, so compensation
319	// of the padding added to the GtkImage is needed
320	padding-left: 2px;
321	padding-right: 2px;
322	}
323
324	&.needs-attention {
325	> label,
326	> image { @extend %needs_attention; }
327
328	&:active,
329	&:checked {
330	> label,
331	> image {
332	animation: none;
333	background-image: none;
334	}
335	}
336	}
337	}
338
339	//inline-toolbar buttons
340	.inline-toolbar &, .inline-toolbar &:backdrop {
341	border-radius: 2px;
342	border-width: 1px;
343	@extend %linked;
344	}
345
346	.primary-toolbar &, .primary-toolbar .raised & { // tango icons don't need shadows
347	-gtk-icon-shadow: none;
348
349	&:hover,
350	&:focus {
351	@include button(hover,$selected_bg_color,$selected_fg_color);
352	}
353	}
354
355	.linked > &,
356	.linked > &:hover,
357	.linked > &:active,
358	.linked > &:checked,
359	.linked > &:backdrop { @extend %linked; }
360
361	.linked.vertical > &,
362	.linked.vertical > &:hover,
363	.linked.vertical > &:active,
364	.linked.vertical > &:checked,
365	.linked.vertical > &:backdrop { @extend %linked_vertical; }
366	}
367
368	%needs_attention {
369	animation: needs_attention 150ms ease-in;
370	$_dot_shadow: _text_shadow_color();
371	$_dot_shadow_r: if($variant=='light',0.5,0.45);
372	background-image: -gtk-gradient(radial,
373	center center, 0,
374	center center, 0.5,
375	to($_dot_color),
376	to(transparent)),
377	-gtk-gradient(radial,
378	center center, 0,
379	center center, $_dot_shadow_r,
380	to($_dot_shadow),
381	to(transparent));
382	background-size: 6px 6px, 6px 6px;
383	background-repeat: no-repeat;
384
385	@if $variant == 'light' { background-position: right 3px, right 4px; }
386
387	@else { background-position: right 3px, right 2px; }
388
389	&:backdrop { background-size: 6px 6px, 0 0;}
390
391	&:dir(rtl) {
392	@if $variant == 'light' { background-position: left 3px, left 4px; }
393
394	@else { background-position: left 3px, left 2px; }
395	}
396	}
397
398	toolbar {
399	button {
400	&:hover { @include button(normal,darken($bg_color,7%));}
401	&:active { @include button(normal,darken($bg_color,12%));}
402	}
403	}
404	// all the following is for the +\|- buttons on inline toolbars, that way
405	// should really be deprecated...
406	.inline-toolbar toolbutton > button { // redefining the button look is
407	// needed since those are flat...
408	@include button(undecorated);
409
410	&:hover { color: $selected_fg_color; }
411
412	&:active,
413	&:checked{ color: darken($selected_fg_color, 5%); }
414
415	&:disabled {
416	color: $backdrop_text_color;
417
418	&:active,
419	&:checked { color: transparentize(darken($selected_fg_color, 5%),0.7); }
420	}
421
422	&:backdrop {
423	color: $backdrop_text_color;
424
425	&:active,
426	&:checked { color: darken($selected_fg_color, 5%); }
427
428	&:disabled {
429	color: $backdrop_text_color;
430
431	&:active,
432	&:checked { color: transparentize(darken($selected_fg_color, 5%),0.7); }
433	}
434	}
435	}
436
437	// More inline toolbar buttons
438	toolbar.inline-toolbar toolbutton,
439	toolbar.inline-toolbar toolbutton:backdrop {
440	> button.flat {
441	&:backdrop {
442	border-color: transparent;
443	box-shadow: none;
444	}
445	}
446	}
447
448	%linked_middle {
449	border: 1px solid $borders_color;
450	border-radius: 0;
451	border-right-style: none;
452	box-shadow: none;
453	&:disabled {
454	@include button(insensitive, $base_color, $text_color);
455	color: $insensitive_fg_color;
456	}
457	}
458
459	%linked {
460	@extend %linked_middle;
461
462	&:first-child {
463	border-top-left-radius: 3px;
464	border-bottom-left-radius: 3px;
465	}
466
467	&:last-child {
468	border-top-right-radius: 3px;
469	border-bottom-right-radius: 3px;
470	border-right-style: solid;
471	}
472
473	&:only-child {
474	border-radius: 3px;
475	border-style: solid;
476	}
477	}
478
479	%linked_vertical_middle {
480	border-style: solid solid none solid;
481	border-radius: 0;
482	}
483
484	%linked_vertical{
485	@extend %linked_vertical_middle;
486
487	&:first-child {
488	border-top-left-radius: 3px;
489	border-top-right-radius: 3px;
490	}
491
492	&:last-child {
493	border-bottom-left-radius: 3px;
494	border-bottom-right-radius: 3px;
495	border-style: solid;
496	}
497
498	&:only-child {
499	border-radius: 3px;
500	border-style: solid;
501	}
502	}
503
504	%undecorated_button {
505	background-color: transparent;
506	background-image: none;
507	border-color: transparent;
508	box-shadow: inset 0 1px transparentize(white,1),
509	0 1px transparentize(white, 1);
510	text-shadow: none;
511	-gtk-icon-shadow: none;
512	}
513
514	/* menu buttons */
515	modelbutton.flat,
516	.menuitem.button.flat {
517	min-height: 26px;
518	padding-left: 5px;
519	padding-right: 5px;
520	border-radius: 3px;
521	outline-offset: -2px;
522
523	@extend %undecorated_button;
524
525	&:hover { background-color: $popover_hover_color; }
526
527	&:selected { @extend %selected_items; }
528
529	&:backdrop,
530	&:backdrop:hover { @extend %undecorated_button; }
531
532	// FIXME: remove the following when the checks/radios rewrite lands
533	check:last-child,
534	radio:last-child { margin-left: 8px; }
535
536	check:first-child,
537	radio:first-child { margin-right: 8px; }
538	}
539
540	modelbutton.flat arrow {
541	background: none;
542
543	&:hover { background: none; }
544
545	&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
546
547	&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
548	}
549
550	button.color {
551	padding: 4px;
552
553	colorswatch:only-child {
554	&, overlay { border-radius: 0; }
555
556	@if $variant == 'light' {
557	box-shadow: none;
558
559	&:disabled,
560	&:backdrop { box-shadow: none; }
561	}
562	}
563	}
564
565	notebook, list, .view, popover {
566	button {
567	box-shadow: none;
568	&:backdrop {
569	box-shadow: none;
570	}
571	}
572	.linked > button {
573	box-shadow: none;
574	}
575	}