[libadwaita/wip/exalm/tabs: 20/21] Add styles for AdwTab*

[Alexander Mikhaylenko <alexm src gnome org>]

commit 228ae14de59fe61cd0dadf23bfe962b311a7cc62
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun Sep 13 02:28:08 2020 +0500

    Add styles for AdwTab*

 src/stylesheet/_custom.scss | 213 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 213 insertions(+)
---
diff --git a/src/stylesheet/_custom.scss b/src/stylesheet/_custom.scss
index e73f5fb..9c0d8e6 100644
--- a/src/stylesheet/_custom.scss
+++ b/src/stylesheet/_custom.scss
@@ -580,3 +580,216 @@ windowtitle {
     text-shadow: none;
   }
 }
+
+// Tabs
+
+$tab_bg: darken($bg_color, if($variant == 'dark', 6%, 12%));
+$tab_bg_backdrop: darken($backdrop_bg_color, 6%);
+
+@mixin undershoot-gradient($dir) {
+  @if $variant == 'dark' {
+    background: linear-gradient(to #{$dir},
+                                transparentize(black, .6),
+                                transparentize(black, 1) 20px);
+  }
+  @else {
+    background: linear-gradient(to #{$dir},
+                                transparentize(black, .93),
+                                transparentize(black, 1) 20px);
+  }
+}
+
+@mixin need-attention-gradient($dir) {
+  background: linear-gradient(to #{$dir},
+                              transparentize($selected_bg_color, .3),
+                              transparentize($selected_bg_color, .5) 1px,
+                              transparentize($selected_bg_color, 1) 20px);
+}
+
+tabbar {
+  .box {
+    min-height: 38px;
+    background: darken($tab_bg, 3%);
+    border-bottom: 1px solid $alt_borders_color;
+
+    &:backdrop {
+      background-color: darken($tab_bg_backdrop, 3%);
+      border-color: $backdrop_borders_color;
+    }
+  }
+
+  scrolledwindow.pinned {
+    undershoot {
+      border: 0 solid $alt_borders_color;
+    }
+
+    &:dir(rtl) undershoot.left {
+      border-left-width: 1px;
+    }
+
+    &:dir(ltr) undershoot.right {
+      border-right-width: 1px;
+    }
+
+    &:backdrop undershoot {
+      border-color: $backdrop_borders_color;
+    }
+  }
+
+  // FIXME: for some reason it's ignored if it's only present once
+  @for $i from 1 through 2 {
+    scrolledwindow.pinned tabbox {
+      &:dir(ltr) {
+        box-shadow: inset -1px 0 $alt_borders_color;
+
+        &:backdrop {
+          box-shadow: inset -1px 0 $backdrop_borders_color;
+        }
+      }
+
+      &:dir(rtl) {
+        box-shadow: inset 1px 0 $alt_borders_color;
+
+        &:backdrop {
+          box-shadow: inset 1px 0 $backdrop_borders_color;
+        }
+      }
+    }
+  }
+
+  undershoot {
+    transition: background 150ms ease-in-out;
+
+    &.left {
+      @include undershoot-gradient("right");
+    }
+
+    &.right {
+      @include undershoot-gradient("left");
+    }
+  }
+
+  .needs-attention-left undershoot.left {
+    @include need-attention-gradient("right");
+  }
+
+  .needs-attention-right undershoot.right {
+    @include need-attention-gradient("left");
+  }
+
+  tab {
+    border-style: solid;
+    border-color: $alt_borders_color;
+    border-width: 0 1px 0 1px;
+    transition: background 150ms ease-in-out, $focus_transition;
+    background-color: $tab_bg;
+
+    @include focus-ring();
+
+    &:checked {
+      background-color: lighten($tab_bg, 6%);
+
+      &:hover {
+        background-color: lighten($tab_bg, 9%);
+      }
+    }
+
+    &:hover {
+      background-color: lighten($tab_bg, 3%);
+    }
+
+    &:backdrop {
+      border-color: $backdrop_borders_color;
+      background-color: $tab_bg_backdrop;
+
+      &:checked {
+        background-color: $backdrop_bg_color;
+      }
+    }
+  }
+
+  .start-action,
+  .end-action {
+    background: $tab_bg;
+    border-color: $alt_borders_color;
+    border-style: solid;
+    transition: background 150ms ease-in-out;
+
+    &:backdrop {
+      border-color: $backdrop_borders_color;
+      background-color: $tab_bg_backdrop;
+    }
+
+    button {
+      border: none;
+      border-radius: 0;
+    }
+  }
+
+  .start-action:dir(ltr),
+  .end-action:dir(rtl) {
+    border-right-width: 1px;
+  }
+
+  .start-action:dir(rtl),
+  .end-action:dir(ltr) {
+    border-left-width: 1px;
+  }
+}
+
+dnd {
+  tab {
+    min-height: 26px;
+    background-color: lighten($tab_bg, 9%);
+
+    $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
+
+    box-shadow: 0 3px 9px 1px transparentize(black, 0.75),
+                0 0 0 1px $_wm_border, //doing borders with box-shadow
+                inset 0 1px $top_hilight;
+
+    margin: 25px;
+  }
+}
+
+tabbar,
+dnd {
+  tab {
+    padding: 6px;
+
+    &.needs-attention {
+      background-image:
+        radial-gradient(ellipse at bottom,
+                        transparentize(white, .2),
+                        transparentize($selected_bg_color, .8) 15%,
+                        transparentize($selected_bg_color, 1) 15%);
+    }
+
+    button {
+      padding: 0;
+      margin: 0;
+      min-width: 24px;
+      min-height: 24px;
+      border-radius: 99px;
+
+      border: none;
+      box-shadow: none;
+      -gtk-icon-shadow: none;
+      text-shadow: none;
+      background: none;
+
+      &:hover {
+        background: gtkalpha($fg_color, .15);
+      }
+
+      &:active {
+        background: gtkalpha(black, .2);
+      }
+    }
+  }
+}
+
+tabview,
+tabbox {
+  box-shadow: none;
+}