_common.scss 109 KB
Newer Older
1 2
@function gtkalpha($c,$a) {
  @return unquote("alpha(#{$c},#{$a})");
3 4
}

5 6
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$asset_suffix: if($variant=='dark', '-dark', '');
7
$backdrop_transition: 200ms ease-out;
8
$button_transition: all 200ms $ease-out-quad;
9

10 11 12 13 14 15 16 17 18 19 20 21 22 23
* {
  padding: 0;
  -GtkToolButton-icon-spacing: 4;
  -GtkTextView-error-underline-color: $error_color;

  // The size for scrollbars. The slider is 2px smaller, but we keep it
  // up so that the whole area is sensitive to button presses for the
  // slider. The stepper button is larger in both directions, the slider
  // only in the width

  -GtkScrolledWindow-scrollbar-spacing: 0;

  -GtkToolItemGroup-expander-size: 11;

24
  -GtkWidget-text-handle-width: 20;
25
  -GtkWidget-text-handle-height: 24;
26

27 28 29 30 31 32 33
  -GtkDialog-button-spacing: 4;
  -GtkDialog-action-area-border: 0;

  // We use the outline properties to signal the focus properties
  // to the adwaita engine: using real CSS properties is faster,
  // and we don't use any outlines for now.

34
  outline-color: gtkalpha(currentColor, 0.3);
35 36 37
  outline-style: dashed;
  outline-offset: -3px;
  outline-width: 1px;
38
  -gtk-outline-radius: 2px;
39 40

  -gtk-secondary-caret-color: $selected_bg_color
41 42 43 44 45 46 47
}


/***************
 * Base States *
 ***************/
.background {
48
  color: $fg_color;
49
  background-color: $bg_color;
50

51 52
  &:backdrop {
    color: $backdrop_fg_color;
53
    background-color: $backdrop_bg_color;
54 55
    text-shadow: none;
    -gtk-icon-shadow: none;
56
  }
57 58 59 60 61 62 63 64 65
}

/*
   These wildcard seems unavoidable, need to investigate.
   Wildcards are bad and troublesome, use them with care,
   or better, just don't.
   Everytime a wildcard is used a kitten dies, painfully.
*/

66
*:disabled { -gtk-icon-effect: dim; }
67 68 69

.gtkstyle-fallback {
  color: $fg_color;
70 71
  background-color: $bg_color;

72
  &:hover {
73
    color: $fg_color;
74
    background-color: lighten($bg_color, 10%);
75
  }
76

77 78
  &:active {
    color: $fg_color;
79
    background-color: darken($bg_color, 10%);
80
  }
81

82
  &:disabled {
83
    color: $insensitive_fg_color;
84
    background-color: $insensitive_bg_color;
85
  }
86

87 88
  &:selected {
    color: $selected_fg_color;
89
    background-color: $selected_bg_color;
90 91 92
  }
}

93 94
.view,
%view {
95
  color: $text_color;
96
  background-color: $base_color;
97

98
  &:backdrop {
99
    color: $backdrop_text_color;
100
    background-color: $backdrop_base_color;
101 102 103 104 105 106
    &:disabled { color: $backdrop_insensitive_color; }
  }

  &:disabled {
    color: $insensitive_fg_color;
    background-color: $insensitive_bg_color;
107
  }
108

109 110 111 112 113 114
  &:selected {
    &:focus, & {
      @extend %selected_items;

      border-radius: 3px;
    }
115 116 117
  }
}

118 119 120 121
.view,
textview {
  text {
    @extend %view;
122

123
    selection { &:focus, & { @extend %selected_items; }}
124
  }
125 126
}

127
textview border { background-color: mix($bg_color, $base_color, 50%); }
128

129 130
iconview { @extend .view; }

131 132
.rubberband,
rubberband {
Lapo Calamandrei's avatar
Lapo Calamandrei committed
133 134
  border: 1px solid darken($selected_bg_color, 10%);
  background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
135 136
}

137
flowbox {
138 139 140
  rubberband { @extend rubberband; }

  flowboxchild {
Matthias Clasen's avatar
Matthias Clasen committed
141
    padding: 3px;
142

Matthias Clasen's avatar
Matthias Clasen committed
143 144
    &:selected {
      @extend %selected_items;
145

Matthias Clasen's avatar
Matthias Clasen committed
146 147
      outline-offset: -2px;
    }
148
  }
149 150
}

151 152 153 154 155 156 157 158
.content-view .tile {
  margin: 2px;
  background-color: if($variant=='light', transparent, black);
  border-radius: 0;
  padding: 0;
  
  &:backdrop { background-color: if($variant=='light', transparent, darken($backdrop_base_color,5%)); }
  &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
159
  &:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); }
160 161
}

162
label {
163 164
  caret-color: currentColor; // this shouldn't be needed.

165 166
  &.separator {
    @extend .dim-label;
167 168 169

    color: $fg_color;

170 171
    &:backdrop { color: $backdrop_fg_color; }
  }
172

173
  row:selected &,
174
  &:selected { @extend %nobg_selected_items; }
175 176 177 178 179

  selection {
    background-color: $selected_bg_color;
    color: $selected_fg_color;
  }
180

181
  &:disabled {
182
    color: $insensitive_fg_color;
183

184 185
    selection { @extend %selected_items:disabled; }

186
    &:backdrop { color: $backdrop_insensitive_color; }
187
  }
188 189 190 191 192 193

  &:backdrop {
    color: $backdrop_fg_color;

    selection { @extend %selected_items:backdrop; }
  }
194 195
}

Lapo Calamandrei's avatar
Lapo Calamandrei committed
196
.dim-label {
197 198
  opacity: 0.55;
  text-shadow: none;
Lapo Calamandrei's avatar
Lapo Calamandrei committed
199 200
}

201
assistant {
202
  .sidebar {
203
    background-color: $base_color;
204
    border-top: 1px solid $borders_color;
205

206 207 208 209
    &:backdrop {
      background-color: $backdrop_base_color;
      border-color: $backdrop_borders_color;
    }
210
  }
211

212
  &.csd .sidebar { border-top-style: none; }
213 214 215 216

  .sidebar label { padding: 6px 12px; }

  .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); }
217 218
}

Lapo Calamandrei's avatar
Lapo Calamandrei committed
219 220
%osd,
.osd {
221
  color: $osd_fg_color;
222 223
  border: none;
  background-color: $osd_bg_color;
224
  background-clip: padding-box;
225
  text-shadow: 0 1px black;
226
  -gtk-icon-shadow: 0 1px black;
227

228 229 230 231
  &:backdrop {
    text-shadow: none;
    -gtk-icon-shadow: none;
  }
232
}
233

234

235 236 237 238
/*********************
 * Spinner Animation *
 *********************/
@keyframes spin {
239
  to { -gtk-icon-transform: rotate(1turn); }
240 241
}

242
spinner {
243
  background: none;
244 245
  opacity: 0; // non spinning spinner makes no sense
  -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
246

247
  &:checked {
248 249
    opacity: 1;
    animation: spin 1s linear infinite;
250 251

    &:disabled { opacity: 0.5; }
252 253 254
  }
}

255

256 257 258
/****************
 * Text Entries *
 ****************/
259 260

%entry,
261
entry {
262 263 264 265 266 267 268
  %entry_basic, & {
    min-height: 32px;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid;
    border-radius: 3px;
    transition: all 200ms $ease-out-quad;
269

270
    @include entry(normal);
271

272
    image { // icons inside the entry
273 274
      &.left { margin-right: 6px; }
      &.right { margin-left: 6px; }
275
    }
276

277 278 279 280
    undershoot {
      &.left { @include undershoot(left); }
      &.right { @include undershoot(right); }
    }
281

282
    &.flat {
283
      &:focus, &:backdrop, &:disabled, &:backdrop:disabled, & {
284 285
        min-height: 0;
        padding: 2px;
286
        background-color: transparent;
287 288 289
        border-color: transparent;
        border-radius: 0;
      }
290
    }
291

292 293 294 295
    &:focus { @include entry(focus); }

    &:disabled { @include entry(insensitive); }

296 297 298 299 300
    &:backdrop {
      @include entry(backdrop);

      transition: $backdrop_transition;
    }
301 302 303

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

304
    selection { @extend %selected_items; }
305 306 307 308 309 310 311 312 313 314

    // entry error and warning style
    @each $e_type, $e_color in (error, $error_color),
                               (warning, $warning_color) {
      &.#{$e_type} {
        color: $e_color;
        border-color: entry_focus_border($e_color);

        &:focus { @include entry(focus, $e_color); }

315
        selection { background-color: $e_color; }
316 317 318
      }
    }

Lapo Calamandrei's avatar
Lapo Calamandrei committed
319
    image { // entry icons colors
320
      color: mix($fg_color, $base_color, 80%);
321

322
      &:hover { color: $fg_color; }
323

324
      &:active { color: $selected_bg_color; }
325

326 327 328 329 330 331 332 333 334
      &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); }
    }

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

336 337 338 339 340 341 342 343 344 345
    .osd & {
      @include entry(osd);

      &:focus { @include entry(osd-focus); }

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

      &:disabled { @include entry(osd-insensitive); }
    }
  }
346

347
  progress {
348
    margin: 2px -6px;
349 350
    background-color: transparent;
    background-image: none;
351 352 353 354 355
    border-radius: 0;
    border-width: 0 0 2px;
    border-color: $selected_bg_color;
    border-style: solid;
    box-shadow: none;
356

357 358
    &:backdrop { background-color: transparent; }
  }
359

360
   // linked entries
361
  .linked:not(.vertical) > & { @extend %linked; }
362
  .linked:not(.vertical) > &:focus + &,
Matthias Clasen's avatar
Matthias Clasen committed
363
  .linked:not(.vertical) > &:focus + button,
364
  .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); }
365

366 367 368 369
  .linked:not(.vertical) > &:focus.error + &,
  .linked:not(.vertical) > &:focus.error + button,
  .linked:not(.vertical) > &:focus.error + combobox > box > button.combo { border-left-color: entry_focus_border($error_color); }

370
  .linked:not(.vertical) > &:drop(active) + &,
371 372 373
  .linked:not(.vertical) > &:drop(active) + button,
  .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }

374 375 376 377
  // Vertically linked entries
  // FIXME: take care of "colored" entries
  .linked.vertical > & {
    @extend %linked_vertical;
378

379
    // brighter border between linked entries
380 381
    &:not(:disabled) + entry:not(:disabled),
    &:not(:disabled) + %entry:not(:disabled) {
382
      border-top-color: mix($borders_color, $base_color, 30%);
383

384
      &:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); }
385
    }
386

387
    // brighter border between linked insensitive entries
388
    &:disabled + %entry:disabled,
389
    &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
390

391
    // color back the top border of a linked focused entry following another entry.
392
    // :not(:only-child) is a specificity bump hack.
393
    + %entry:focus:not(:only-child),
394
    + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); }
395

396 397 398
    + %entry:focus.error:not(:only-child),
    + entry:focus.error:not(:only-child) { border-top-color: entry_focus_border($error_color); }

399
    + %entry:drop(active):not(:only-child),
400
    + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
401

402 403 404
    // this takes care of coloring the top border of the focused entry subsequent widget.
    // :not(:only-child) is a specificity bump hack.
    &:focus:not(:only-child) {
405
      + %entry,
406 407 408
      + entry,
      + button,
      + combobox > box > button.combo { border-top-color: entry_focus_border(); }
409
    }
410

411 412 413 414 415 416 417
    &:focus.error:not(:only-child) {
      + %entry,
      + entry,
      + button,
      + combobox > box > button.combo { border-top-color: entry_focus_border($error_color); }
    }

418
    &:drop(active):not(:only-child) {
419
      + %entry,
420 421 422
      + entry,
      + button,
      + combobox > box > button.combo { border-top-color: $drop_target_color; }
423 424 425 426
    }
  }
}

427
treeview entry {
428 429 430 431 432 433 434
  &:focus {
    &:dir(rtl), &:dir(ltr) { // specificity bump hack
      background-color: $base_color;
      transition-property: color, background;
    }
  }

435 436 437 438 439 440 441 442 443
  &.flat, & {
    border-radius: 0;
    background-image: none;
    background-color: $base_color;

    &:focus { border-color: $selected_bg_color; }
  }
}

Jakub Steiner's avatar
Jakub Steiner committed
444
.entry-tag {
445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480
  // sizing
  padding: 5px;

  margin-top: 2px;
  margin-bottom: 2px;

  // side margins: compensate the entry padding with a negative margin
  // then the negative margin itself
  :dir(ltr) & {
    margin-left: 8px;
    margin-right: -5px;
  }
  :dir(rtl) & {
    margin-left: -5px;
    margin-right: 8px;
  }

  border-style: none;

  $_entry_tag_color: if($variant=='light', $selected_fg_color, $base_color);
  color: $_entry_tag_color;

  $_entry_tag_bg: if($variant=='light', $selected_bg_color, mix($fg_color, $base_color, 50%));
  background-color: $_entry_tag_bg;

  &:hover {
    background-color: lighten($_entry_tag_bg, 10%);
  }

  :backdrop & {
    color: $backdrop_base_color;
    background-color: if($variant=='light', $selected_bg_color,
                                            mix($backdrop_fg_color, $backdrop_base_color, 50%));
  }

  &.button {
Jakub Steiner's avatar
Jakub Steiner committed
481
    background-color: transparent;
482 483 484 485 486 487 488 489 490 491 492 493
    color: transparentize($_entry_tag_color, 0.3);
  }

  :not(:backdrop) &.button {
    &:hover {
      border: 1px solid $_entry_tag_bg;
      color: $_entry_tag_color;
    }
    &:active {
      background-color: $_entry_tag_bg;
      color: transparentize($_entry_tag_color, 0.3);
    }
Jakub Steiner's avatar
Jakub Steiner committed
494 495
  }
}
496

497 498 499
/***********
 * Buttons *
 ***********/
500 501 502
// stuff for .needs-attention
$_dot_color: if($variant=='light', $selected_bg_color,
                                   lighten($selected_bg_color,15%));
503 504 505 506 507
@keyframes needs_attention {
  from {
    background-image: -gtk-gradient(radial,
                                    center center, 0,
                                    center center, 0.01,
508
                                    to($_dot_color),
509 510
                                    to(transparent));
  }
511

512 513 514 515 516 517 518 519 520
  to {
    background-image: -gtk-gradient(radial,
                                    center center, 0,
                                    center center, 0.5,
                                    to($selected_bg_color),
                                    to(transparent));
  }
}

521
%button,
Matthias Clasen's avatar
Matthias Clasen committed
522
button {
523
  @at-root %button_basic, & {
524

525 526 527 528 529
    min-height: 24px;
    min-width: 16px;
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 3px;
530
    transition: $button_transition;
531

532
    @include button(normal);
533

534 535 536 537 538 539 540
    &.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;
541

542
      &:hover {
543
        transition: $button_transition;
544 545
        transition-duration: 500ms;

546
        &:active { transition: $button_transition; }
547 548
      }
    }
549

550
    &:hover {
551 552 553
      @include button(hover);
      -gtk-icon-effect: highlight;
    }
554

555 556
    &:active,
    &:checked {
557
      @include button(active);
558

559
      transition-duration: 50ms;
560
    }
561

562 563 564
    &:backdrop {
      &.flat, & {
        @include button(backdrop);
565

566
        transition: $backdrop_transition;
567
        -gtk-icon-effect: none;
568

569 570 571 572 573
        &:active,
        &:checked { @include button(backdrop-active); }

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

575 576 577 578
          &:active,
          &:checked { @include button(backdrop-insensitive-active); }
        }
      }
579
    }
580

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

583 584
    &:disabled {
      @include button(insensitive);
585

586 587 588
      &:active,
      &:checked { @include button(insensitive-active); }
    }
589

590
    &.image-button {
591 592 593
      min-width: 24px;
      padding-left: 4px;
      padding-right: 4px;
594 595
    }

596 597 598 599
    &.text-button {
      padding-left: 16px;
      padding-right: 16px;
    }
600

601
    &.text-button.image-button {
602 603
      padding-left: 8px;
      padding-right: 8px;
604

605
      label {
606 607 608
        padding-left: 8px;
        padding-right: 8px;
      }
609
    }
610 611

    &:drop(active) {
612
      color: $drop_target_color;
613 614 615
      border-color: $drop_target_color;
      box-shadow: inset 0 0 0 1px $drop_target_color;
    }
616
  }
617

618 619 620 621 622 623 624 625 626 627 628 629 630 631
  @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); }
      }
    }
  }


Jakub Steiner's avatar
Jakub Steiner committed
632 633
  // big standalone buttons like in Documents pager
  &.osd {
634 635 636 637
    min-width: 24px;
    min-height: 32px;

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

Jakub Steiner's avatar
Jakub Steiner committed
639
    color: $osd_fg_color;
640
    border-radius: 5px;
641

Jakub Steiner's avatar
Jakub Steiner committed
642
    @include button(osd);
643

644
    border: none;
645
    box-shadow: none;
646

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

650
      border: none;
651 652
      box-shadow: none;
    }
653 654 655

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

658
      border: none;
659
      box-shadow: none;
660
    }
661

662 663 664 665 666 667
    &:disabled {
      &:backdrop, & {
        @include button(osd-insensitive);

        border: none;
      }
668
    }
669

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

673
      border: none;
674
    }
Jakub Steiner's avatar
Jakub Steiner committed
675
  }
676

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

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

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

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

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

691 692
    &.flat {
      @include button(undecorated);
693

694 695
      box-shadow: none; //FIXME respect no edge on the button mixin
      text-shadow: 0 1px black;
696
      -gtk-icon-shadow: 0 1px black;
697 698 699

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

700
      &:disabled {
701 702 703 704 705
        @include button(osd-insensitive);
        background-image: none;
        border-color: transparent;
        box-shadow: none;
      }
706

707
      &:backdrop { @include button(undecorated); }
708 709 710

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

714 715
  // Suggested and Destructive Action buttons
  @each $b_type, $b_color in (suggested-action, $selected_bg_color),
716
                             (destructive-action, $destructive_color) {
717
    &.#{$b_type} {
718
      @include button(normal, $b_color, white);
719

720 721
      &.flat {
        @include button(undecorated);
722

723 724
        color: $b_color; //FIXME: does it work on the dark variant?
      }
725

726
      &:hover { @include button(hover, $b_color, white); }
727 728 729 730 731 732

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

      &:backdrop,
      &.flat:backdrop {
733
        @include button(backdrop, $b_color, white);
734 735 736 737

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

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

741 742
          &:active,
          &:checked { @include button(backdrop-insensitive-active, $b_color, white); }
743 744
        }
      }
745

746 747 748 749 750 751
      &.flat {
        &:backdrop, &:disabled, &:backdrop:disabled {
          @include button(undecorated);

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

754
      &:disabled {
755
        @include button(insensitive);
756 757 758

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

761 762
      .osd & {
        @include button(osd, $b_color);
763 764 765 766

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

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

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

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

776
  .stack-switcher > & {
777 778 779
    // 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.
780 781 782

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

783
    > label {
784 785 786
      padding-left: 6px;  // label padding
      padding-right: 6px; //
    }
787

788
    > image {
789 790 791 792 793
      padding-left: 6px;   // image padding
      padding-right: 6px;  //
      padding-top: 3px;    //
      padding-bottom: 3px; //
    }
794

795
    &.text-button {
796 797 798
      // compensate text-button paddings
      padding-left: 10px;
      padding-right: 10px;
799
    }
800

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

808 809 810 811 812 813 814 815 816 817 818 819
    &.needs-attention {
      > label,
      > image { @extend %needs_attention; }

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

823 824 825
  // hide separators
  &.font,
  &.file { separator { background-color: transparent; }}
826

827 828
  &.font { > box > box > label { font-weight: bold; }}

829
  // inline-toolbar buttons
830 831 832
  .inline-toolbar &, .inline-toolbar &:backdrop {
    border-radius: 2px;
    border-width: 1px;
833
    @extend %linked;
834 835
  }

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

838 839 840 841 842 843 844 845 846 847 848
  .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; }
Lapo Calamandrei's avatar
Lapo Calamandrei committed
849 850 851 852 853 854

  &.circular { // The Bloody Circul Button
    border-radius: 9999px;
    -gtk-outline-radius: 9999px;

    label { padding: 0; }
855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876

    // the followind code is needed since we use a darker bottom border on buttons, which looks pretty
    // bad with a 100% border radius (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details),
    // so on relevant states we an additional background-image with a gradient clipped on the border-box,
    // so setting a transparent border would reveal it.
    // FIXME: take care of colored circular button.
    $_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%);

    &:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
      @include button(normal);
      background-image: $button_fill, $_border_bg;
      border-color: transparent;
    }

    &:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
      @include button(hover);
      background-image: $button_fill, $_border_bg;
      border-color: transparent;
    }

    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
Lapo Calamandrei's avatar
Lapo Calamandrei committed
877
  }
878 879
}

880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895
%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;
896

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

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

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

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

906 907 908 909 910
    @else { background-position: left 3px, left 2px; }
  }
}


911 912
// all the following is for the +|- buttons on inline toolbars, that way
// should really be deprecated...
913
.inline-toolbar toolbutton > button { // redefining the button look is
Lapo Calamandrei's avatar
Lapo Calamandrei committed
914
                                      // needed since those are flat...
915
  @include button(normal);
916

917
  &:hover { @include button(hover); }
918

919
  &:active,
920
  &:checked{ @include button(active); }
921

922 923
  &:disabled {
    @include button(insensitive);
924

925 926 927
    &:active,
    &:checked { @include button(insensitive-active); }
  }
928

929 930
  &:backdrop {
    @include button(backdrop);
931

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

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

938 939 940 941
      &:active,
      &:checked { @include button(backdrop-insensitive-active); }
    }
  }
942 943
}

944
// More inline toolbar buttons
945 946
toolbar.inline-toolbar toolbutton,
toolbar.inline-toolbar toolbutton:backdrop {
947
  > button.flat { @extend %linked_middle; }
948

Matthias Clasen's avatar
Matthias Clasen committed
949
  &:first-child > button.flat { @extend %linked:first-child; }
950

Matthias Clasen's avatar
Matthias Clasen committed
951
  &:last-child > button.flat { @extend %linked:last-child; }
952

Matthias Clasen's avatar
Matthias Clasen committed
953
  &:only-child > button.flat { @extend %linked:only-child; }
Lapo Calamandrei's avatar
Lapo Calamandrei committed
954 955
}

956
%linked_middle {
957
  border-radius: 0;
958
  border-right-style: none;
959 960
}

961
%linked_left {
962 963
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
964 965 966 967
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-style: none;
}
968

969 970 971
%linked_right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
972 973 974
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-right-style: solid;
975 976 977 978 979 980 981 982 983 984 985 986 987 988 989
}

// .linked assumes Box, which reverses nodes in RTL, so 1st child is always left
%linked {
  @extend %linked_middle;

  &:first-child { @extend %linked_left; }
  &:last-child { @extend %linked_right; }

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

Daniel Boles's avatar
Daniel Boles committed
990
// Other widgets use widget child order, so 1st/last child are at text start/end
991 992 993 994 995 996 997 998 999 1000 1001
%linked_flippable {
  @extend %linked_middle;

  &:dir(ltr) {
    &:first-child { @extend %linked_left; }
    &:last-child { @extend %linked_right; }
  }

  &:dir(rtl) {
    &:first-child { @extend %linked_right; }
    &:last-child { @extend %linked_left; }
1002
  }
1003

1004 1005 1006
  &:only-child {
    border-radius: 3px;
    border-style: solid;
1007 1008 1009
  }
}

1010
%linked_vertical_middle {
1011
  border-style: solid solid none solid;
1012 1013 1014 1015 1016
  border-radius: 0;
}

%linked_vertical{
  @extend %linked_vertical_middle;
1017

1018
  &:first-child {
1019 1020
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
1021
  }
1022

1023
  &:last-child {
1024 1025
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
1026
    border-style: solid;
1027
  }
1028

1029 1030 1031
  &:only-child {
    border-radius: 3px;
    border-style: solid;
1032 1033 1034 1035 1036 1037
  }
}

%undecorated_button {
  background-color: transparent;
  background-image: none;
1038
  border-color: transparent;
Lapo Calamandrei's avatar
Lapo Calamandrei committed
1039
  box-shadow: inset 0 1px transparentize(white, 1),
1040
              0 1px transparentize(white, 1);
1041
  text-shadow: none;
1042
  -gtk-icon-shadow: none;
1043 1044 1045
}

/* menu buttons */
1046
modelbutton.flat,
1047
.menuitem.button.flat {
1048 1049 1050 1051 1052 1053
  min-height: 26px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
  outline-offset: -2px;

1054
  @extend %undecorated_button;
1055

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

1058
  &:selected { @extend %selected_items; }
1059 1060 1061

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

1064
modelbutton.flat arrow {
1065
  background: none;
1066

1067
  &:hover { background: none; }
1068

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

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

1074
button.color {
1075
  padding: 4px;
1076

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

1080 1081 1082 1083 1084
    @if $variant == 'light' {
      box-shadow: 0 1px _text_shadow_color();

      .osd & { box-shadow: none; }
    }
1085
  }
1086

1087
  @if $variant == 'light' {
1088 1089 1090 1091 1092 1093
    .osd &, & {
      &:disabled,
      &:backdrop,
      &:active,
      &:checked { colorswatch:only-child { box-shadow: none; }}
    }
1094 1095
  }
}
1096

Jakub Steiner's avatar
Jakub Steiner committed
1097 1098 1099 1100 1101 1102
/* list buttons */
/* tone down as per new designs, see issue #1473 */
list row button {
  @extend %undecorated_button;
  border: 1px solid transparentize($borders_color, .5);
}
1103

1104 1105 1106
/*********
 * Links *
 *********/
1107 1108

%link,
1109
*:link {
1110
  color: $link_color;
1111

1112 1113
  &:visited {
    color: $link_visited_color;
1114

1115 1116
    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
  }
1117

1118 1119
  &:hover {
    color: lighten($link_color,10%);
1120

1121 1122
    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
  }
1123

1124 1125
  &:active {
    color: $link_color;
1126

1127
    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
1128
  }
1129

1130
  &:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { color: $selected_bg_color; }}
1131

1132
  @at-root %link_selected,
1133
  &:selected,
1134
  *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
1135 1136
}

1137 1138
button:link,
button:visited {
1139
  @extend %undecorated_button;
1140

1141
  @extend *:link;
1142

1143
  text-shadow: none;
1144 1145 1146 1147

  &:hover,
  &:active,
  &:checked {
1148
    @extend %undecorated_button;
1149

1150 1151
    text-shadow: none;
  }
1152

1153 1154 1155 1156 1157
  > label {
    @extend %link;

    text-decoration-line: underline;
  }
1158 1159
}

1160

1161 1162 1163
/*****************
 * GtkSpinButton *
 *****************/
Matthias Clasen's avatar
Matthias Clasen committed
1164
spinbutton {
1165
  &:not(.vertical) {
1166 1167 1168
    // in this horizontal configuration, the whole spinbutton
    // behaves as the entry, so we extend the entry styling
    // and nuke the style on the internal entry
1169
    @extend %entry;
1170