one-dark/gtk-3.0/sass/ui/toolbar.scss

//
// Comboboxes
//
combobox {
  button.combo {
    // Otherwise combos
    padding-top: 3px; // are bigger than
    padding-bottom: 3px; // buttons
  }
  arrow {
    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
    min-height: 16px;
    min-width: 16px;
  }

  &:drop(active) button.combo {
    @extend %button_basic_drop_active;
  }

  .linked:not(.vertical) > & > box > button.combo {
    // the combobox is a composite widget so the way we do button linking doesn't
    // work, special case needed.
    &:dir(ltr),
    &:dir(rtl) {
      @extend %linked_middle;
    }
  }

  .linked:not(.vertical) > &:first-child > box > button.combo {
    @extend %linked_left;
  }
  .linked:not(.vertical) > &:last-child > box > button.combo {
    @extend %linked_right;
  }
  .linked:not(.vertical) > &:only-child > box > button.combo {
    @extend %linked_only_child;
  }

  .linked.vertical > & > box > button.combo {
    @extend %linked_vertical_middle;
  }
  .linked.vertical > &:first-child > box > button.combo {
    @extend %linked_vertical_top;
  }
  .linked.vertical > &:last-child > box > button.combo {
    @extend %linked_vertical_bottom;
  }
  .linked.vertical > &:only-child > box > button.combo {
    @extend %linked_vertical_only_child;
  }
}

toolbar {
  -GtkWidget-window-dragging: true;
  padding: 4px;
  background-color: $bg_color;

  separator {
    background: none;
  }
  &.horizontal separator {
    margin: 0 6px;
  }
  &.vertical separator {
    margin: 6px 0;
  }

  .osd & {
    background-color: transparent;
  }

  &.osd {
    padding: 7px;
    border: 1px solid transparentize(black, 0.5);
    border-radius: 3px;
    background-color: transparentize($osd_bg_color, 0.1);

    &.left,
    &.right,
    &.top,
    &.bottom {
      border-radius: 0;
    } // positional classes for `attached` osd toolbars

    &.top {
      border-width: 0 0 1px 0;
    }
    &.bottom {
      border-width: 1px 0 0 0;
    }
    &.left {
      border-width: 0 1px 0 0;
    }
    &.right {
      border-width: 0 0 0 1px;
    }
  }

  &:not(.inline-toolbar) {
    switch,
    scale,
    entry,
    spinbutton,
    button {
      margin-right: 1px;
      margin-bottom: 1px;
    }
    .linked > button,
    .linked > entry {
      margin-right: 0;
    }
  }
}

.primary-toolbar toolbar,
.primary-toolbar:not(.libreoffice-toolbar) {
  // LO messes up the toolbar styling, so exclude LO toolbars
  color: $header_fg;
  background-color: opacify($header_bg, 1);
  box-shadow: none;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-image: linear-gradient(to bottom, opacify($header_bg, 1), darken($header_bg, 12%)) 1 0 1 0; //temporary hack for rhythmbox 3.1

  separator {
    @extend %header_separator;
  }
}

.primary-toolbar toolbar,
.primary-toolbar {
  @extend %header_widgets;
}

.inline-toolbar {
  @extend toolbar;
  background-color: darken($bg_color, 3%);
  border-style: solid;
  border-color: $borders_color;
  border-width: 0 1px 1px;
  padding: 3px;
  border-radius: 0 0 3px 3px;
}

searchbar {
  background-color: $bg_color;
  border-style: solid;
  border-color: $borders_color;
  border-width: 0 0 1px;
  padding: 3px;
  //box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

actionbar {
  padding: 6px;
  border-top: 1px solid $borders_color;
  background-color: darken($bg_color, 3%);
}

//
// Headerbars
//
headerbar,
%titlebar {
  min-height: 42px;
  padding: 0 7px;

  border-width: 0 0 1px;
  border-style: solid;
  border-radius: 0;
  border-color: opacify($header_border, 1);

  color: $header_fg;
  background-color: opacify($header_bg, 1);
  box-shadow: inset 0 1px $header_highlight;

  .csd & {
    // Transparent header-bars only in csd windows
    background-color: $header_bg;
    border-color: $header_border;
  }

  &:backdrop {
    color: transparentize($header_fg, 0.4);
    box-shadow: none;
  }

  .title {
    font-weight: bold;
    padding-left: 12px;
    padding-right: 12px;
  }

  .subtitle {
    font-size: smaller;
    padding-left: 12px;
    padding-right: 12px;
  }

  // Selectionmode
  &.selection-mode {
    color: $selected_fg_color;
    background-color: $selection_mode_bg;
    border-color: darken($selection_mode_bg, 4%);
    box-shadow: none;

    &:backdrop {
      background-color: $selection_mode_bg;
      color: transparentize($selected_fg_color, 0.4);
    }

    .subtitle:link {
      @extend %link_selected;
    }

    button {
      color: $selected_fg_color;
      outline-color: transparentize($selected_fg_color, 0.7);
      background-color: transparentize($selected_fg_color, 1);
      border-color: transparentize($selected_fg_color, 1);

      &.flat {
        @include button(undecorated);
        color: $selected_fg_color;
        background-color: transparentize($selected_fg_color, 1);
      }
      &:hover {
        color: $selected_fg_color;
        outline-color: transparentize($selected_fg_color, 0.7);
        background-color: transparentize($selected_fg_color, 0.95);
        border-color: transparentize($selected_fg_color, 0.5);
      }
      &:active,
      &:checked {
        color: $selection_mode_bg;
        outline-color: transparentize($selection_mode_bg, 0.7);
        background-color: $selected_fg_color;
        border-color: $selected_fg_color;
      }
      &:disabled {
        color: transparentize($selected_fg_color, 0.6);
        background-color: transparentize($selected_fg_color, 1);
        border-color: transparentize($selected_fg_color, 1);

        &:active,
        &:checked {
          color: transparentize($selection_mode_bg, 0.6);
          background-color: transparentize($selected_fg_color, 0.85);
          border-color: transparentize($selected_fg_color, 0.85);
        }
      }
    }

    .selection-menu {
      box-shadow: none;
      padding-left: 10px;
      padding-right: 10px;
      GtkArrow {
        -GtkArrow-arrow-scaling: 1;
      }
      .arrow {
        -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
      }
    }
    .maximized & {
      background-color: opacify($selection_mode_bg, 1);
    }
  }

  .tiled &,
  .tiled &:backdrop,
  .maximized &,
  .maximized &:backdrop {
    border-radius: 0; // squared corners when the window is max'd or tiled
  }

  .maximized & {
    background-color: opacify($header_bg, 1);
    border-color: opacify($header_border, 1);
  }

  &.default-decoration,
  .csd &.default-decoration,             // needed under wayland, since all gtk3 windows are csd windows
  &.default-decoration:backdrop,
  .csd &.default-decoration:backdrop {
    min-height: 28px;
    padding: 0 7px;
    background-color: opacify($header_bg, 1);
    border-bottom-width: 0;

    .maximized & {
      background-color: opacify($header_bg, 1);
    }
  }
}

.titlebar {
  border-radius: 8px 8px 0 0;
}

headerbar {
  @extend %header_widgets;

  entry,
  button,
  separator {
    margin-top: 6px;
    margin-bottom: 6px;
  }

  // Fixes split headerbars
  separator:first-child + &,
  &:first-child {
    &,
    &:backdrop {
      border-top-left-radius: 8px;

      .maximized &,
      .tiled & {
        border-radius: 0;
      }
    }
  }

  &:last-child {
    &,
    &:backdrop {
      border-top-right-radius: 8px;

      .maximized &,
      .tiled & {
        border-radius: 0;
      }
    }
  }
}

// Fixes split headerbars too
.titlebar:not(headerbar) {
  window > &,
  window.csd > & {
    &,
    &:backdrop {
      padding: 0;
      background: none;
      border: none;
      box-shadow: none;
    }
  }

  > separator {
    background-image: _solid($header_border);
  }

  @extend %titlebar;
}

%header_separator {
  min-width: 1px;
  min-height: 1px;
  border-width: 0 1px;
  border-image: linear-gradient(
      to bottom,
      transparentize($header_fg, 1) 25%,
      transparentize($header_fg, 0.65) 25%,
      transparentize($header_fg, 0.65) 75%,
      transparentize($header_fg, 1) 75%
    )
    0 1/0 1px stretch;

  &:backdrop {
    opacity: 0.6;
  }
}

%header_widgets {
  // Headerbar Entries
  entry {
    @include entry(header-normal);

    &:backdrop {
      opacity: 0.85;
    }

    &:focus {
      @include entry(header-focus);
      background-clip: padding-box;

      image {
        color: transparentize($header_fg, 0.15);
      }
    }
    &:disabled {
      @include entry(header-insensitive);
    }

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

    progress {
      border-color: $selected_bg_color;
      background-image: none;
      background-color: transparent;
    }

    @each $e_type, $e_color, $e_fg_color in (warning, $warning_color, $warning_fg_color),
      (error, $error_color, $error_fg_color)
    {
      &.#{$e_type} {
        color: $e_fg_color;
        border-color: $header_entry_border;
        background-color: mix($e_color, $header_bg, 60%);

        &:focus {
          color: $e_fg_color;
          background-color: $e_color;
        }
        selection,
        selection:focus {
          background-color: $e_fg_color;
          color: $e_color;
        }
      }
    }
  }

  // Headerbar Buttons
  button {
    @include button(header-normal);

    &:backdrop {
      opacity: 0.7;
    }

    &:hover {
      @include button(header-hover);
    }
    &:active,
    &:checked {
      @include button(header-active);
      background-clip: padding-box;
    }
    &:disabled {
      @include button(header-insensitive);
    }
    &:disabled:active,
    &:disabled:checked {
      @include button(header-insensitive-active);
    }
  }

  &.selection-mode button {
    &,
    &.flat {
      @include button(undecorated);
      color: $selection_mode_fg;
      background-color: transparentize($selection_mode_fg, 1);
    }
    &:hover {
      @extend %selected_button_normal;
    }
    &:active,
    &:checked {
      @extend %selected_button_active;
    }

    &:disabled {
      @extend %selected_button_flat_disabled;

      &:checked,
      &:active {
        @extend %selected_button_disabled_checked;
      }
    }
  }

  // Linking stuff

  // Disconnect linked buttons
  .linked:not(.vertical):not(.path-bar):not(.stack-switcher) {
    button:not(:last-child):not(:only-child) {
      margin-right: 1px;
    }
  }

  // Reset buttons
  .linked:not(.vertical):not(.path-bar) > button {
    &,
    &:hover,
    &:active,
    &:checked,
    &:disabled {
      border-radius: 3px;
      border-style: solid;
    }
  }
  .linked:not(.vertical):not(.path-bar) {
    $_uncolored_button: 'button:not(:checked):not(:active):not(.suggested-action):not(.destructive-action)';

    > #{$_uncolored_button} + #{$_uncolored_button},
    > #{$_uncolored_button}:hover:not(:only-child),
    > #{$_uncolored_button}:hover + #{$_uncolored_button},
    > #{$_uncolored_button}:disabled:not(:only-child),
    > #{$_uncolored_button}:disabled + #{$_uncolored_button}:not(:hover) {
      box-shadow: none;
    }
  }

  // special case for path-bars and stack-switchers
  .linked:not(.vertical):not(.path-bar).stack-switcher,
  .linked:not(.vertical).path-bar {
    > button {
      @include button(header-hover);

      &:hover {
        background-color: lighten($header_button_bg, 15%);
      }
      &:active,
      &:checked {
        @include button(header-active);
      }
      &:disabled {
        color: transparentize($header_fg, 0.4);
      }

      &,
      &:hover,
      &:active,
      &:checked,
      &:disabled {
        @extend %linked;
      }
    }
  }

  // special case widgets like the linked entry and button in mintinstall toolbar
  .linked:not(.vertical) entry {
    box-shadow: none;

    &:focus {
      @include entry(header-normal);
      background-clip: padding-box;
    }

    & + button:last-child {
      @include button(header-hover);

      &:hover {
        background-color: lighten($header_button_bg, 15%);
      }
      &:active,
      &:checked {
        @include button(header-active);
      }
      &:disabled {
        color: transparentize($header_fg, 0.4);
        background-color: transparentize($header_button_bg, 0.2);
        border-color: $header_button_border;

        &:checked {
          background-color: transparentize($selected_bg_color, 0.35);
          color: transparentize($selected_fg_color, 0.25);
        }
      }

      &,
      &:hover,
      &:active,
      &:checked,
      &:disabled {
        @extend %linked;
      }
    }
  }

  // Headerbar Suggested and Destructive Action buttons
  @each $b_type, $b_color in (suggested-action, $suggested_color),
    (destructive-action, $destructive_color)
  {
    button.#{$b_type} {
      @include button(suggested_destructive, $b_color);

      &.flat {
        @include button(undecorated);
        color: $b_color;
        outline-color: transparentize($b_color, 0.7);
      }
      &:hover {
        @include button(suggested_destructive, lighten($b_color, 10%));
      }
      &:active,
      &:checked {
        @include button(suggested_destructive, darken($b_color, 10%));
      }
      &.flat:disabled,
      &:disabled {
        @include button(header-insensitive);
      }
    }
    button.#{$b_type}:backdrop,
    button.#{$b_type}:backdrop {
      opacity: 0.8;
    }
  }

  // Headerbar Spinbuttons
  & spinbutton {
    &:focus button {
      color: $selected_fg_color;

      &:hover {
        background-color: transparentize($selected_fg_color, 0.9);
        border-color: transparent;
      }
      &:disabled {
        color: transparentize($selected_fg_color, 0.6);
      }
    }
    button {
      color: $header_fg;

      &:hover {
        background-color: transparentize($header_fg, 0.75);
        border-color: transparent;
      }
      &:disabled {
        color: transparentize($header_fg, 0.3);
      }
      &:active {
        background-color: rgba(0, 0, 0, 0.1);
      }
    }
  }

  // Headerbar ComboBoxes
  combobox {
    &:disabled {
      color: transparentize($header_fg, 0.6);
    }

    > .linked > button.combo {
      @include entry(header-normal);

      &:hover {
        @include entry(header-focus);
        box-shadow: none;
      }
      &:disabled {
        @include entry(header-insensitive);
      }
    }

    > .linked > entry.combo {
      &:dir(ltr) {
        border-right-style: none;

        &:focus {
          box-shadow: none;
        }
      }
      &:dir(rtl) {
        border-left-style: none;

        &:focus {
          box-shadow: none;
        }
      }
    }
    > .linked > button.combo {
      &:dir(ltr) {
        &,
        &:hover,
        &:active,
        &:checked,
        &:disabled {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
      &:dir(rtl) {
        &,
        &:hover,
        &:active,
        &:checked,
        &:disabled {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }
  }

  // Headerbar Switches
  switch {
    &:backdrop {
      opacity: 0.75;
    }
  }

  progressbar {
    trough {
      background-color: $header_button_border;
    }

    &:backdrop {
      opacity: 0.75;
    }
  }

  // Headerbar Scale
  scale {
    $_trough_bg: $header_button_border;

    &:backdrop {
      opacity: 0.75;
    }

    slider {
      $_slider_border: opacify($header_button_border, 0.3);
      $_slider_bg: lighten(opacify($header_bg, 1), 10%);

      background-color: $_slider_bg;
      border-color: $_slider_border;

      &:hover {
        background-color: lighten($_slider_bg, 5%);
        border-color: $_slider_border;
      }
      &:active {
        background-color: $selected_bg_color;
        border-color: $selected_bg_color;
      }
      &:disabled {
        background-color: mix($_slider_bg, $header_bg, 70%);
        border-color: $_slider_border;
      }
    }
    trough {
      background-color: $_trough_bg;

      &:disabled {
        background-color: transparentize($_trough_bg, 0.1);
      }
    }
  }
}

//
// Pathbars
//
.path-bar button {
  &.text-button,
  &.image-button,
  & {
    padding-left: 6px;
    padding-right: 6px;
  }

  &.text-button.image-button label {
    padding-left: 0;
    padding-right: 0;
  }

  &.text-button.image-button,
  & {
    label:last-child {
      padding-right: 10px;
    }
    label:first-child {
      padding-left: 10px;
    }
  }

  &.slider-button,
  &:not(.image-button):not(.text-button) {
    padding-left: 1px;
    padding-right: 1px;
  }

  image {
    padding-left: 4px;
    padding-right: 4px;
  }
}