[libadwaita/wip/exalm/tabs: 123/124] Add styles for AdwTab*

[Alexander Mikhaylenko <alexm src gnome org>]

commit 9ced267e449ff9cede645d1dca464d696d3239ec
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sat Apr 17 16:46:07 2021 +0500

    Add styles for AdwTab*

 src/stylesheet/_widgets.scss          |   1 +
 src/stylesheet/meson.build            |   1 +
 src/stylesheet/widgets/_tab-view.scss | 205 ++++++++++++++++++++++++++++++++++
 3 files changed, 207 insertions(+)
---
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 6ed9628..315dc72 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -28,6 +28,7 @@
 @import 'widgets/spinner';
 @import 'widgets/spin-button';
 @import 'widgets/switch';
+@import 'widgets/tab-view';
 @import 'widgets/text-selection';
 @import 'widgets/toolbars';
 @import 'widgets/tooltip';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index a7ec73c..932172a 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -50,6 +50,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_spinner.scss',
       'widgets/_spin-button.scss',
       'widgets/_switch.scss',
+      'widgets/_tab-view.scss',
       'widgets/_text-selection.scss',
       'widgets/_toolbars.scss',
       'widgets/_tooltip.scss',
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
new file mode 100644
index 0000000..e9a8ea8
--- /dev/null
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -0,0 +1,205 @@
+$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;
+    }
+
+    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(black, 0.25));
+
+    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;
+      background: none;
+
+      &:hover {
+        background: gtkalpha($fg_color, .15);
+      }
+
+      &:active {
+        background: gtkalpha(black, .2);
+      }
+    }
+  }
+}
+
+tabview,
+tabbox {
+  box-shadow: none;
+}