[gtk+/wip/notebook: 2/2] Adwaita: Adapt notebook styling a bit

From: Matthias Clasen <matthiasc src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk+/wip/notebook: 2/2] Adwaita: Adapt notebook styling a bit
Date: Sat, 31 Oct 2015 15:25:18 +0000 (UTC)
commit 24d105d3068945a306dff673c90e4503103d11fb
Author: Matthias Clasen <mclasen redhat com>
Date:   Sat Oct 31 10:25:50 2015 -0400

    Adwaita: Adapt notebook styling a bit
    
    This needs a lot more work.

 gtk/theme/Adwaita/_common.scss           |   31 +++++----
 gtk/theme/Adwaita/gtk-contained-dark.css |  106 +++++++++++++++---------------
 gtk/theme/Adwaita/gtk-contained.css      |  106 +++++++++++++++---------------
 3 files changed, 124 insertions(+), 119 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 7e9ccc2..f1e8f97 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1576,13 +1576,13 @@ notebook {
     &.left { border-left-width: 0; }
     &:backdrop { border-color: $backdrop_borders_color; }
   }
-  &.header {
+  & header {
     // FIXME: double borders in some case, can't fix it w/o a class tho
     // FIXME: doesn't work on dark var
     background-color: mix($bg_color, $borders_color, 70%);
 
     // this is the shading of the header behind the tabs
-    &.frame {
+    .frame & {
       border: 1px solid $borders_color;
       &.top { border-bottom-width: 0; }
       &.bottom { border-top-width: 0; }
@@ -1596,6 +1596,7 @@ notebook {
       box-shadow: $_header_shade,
                   inset 0 -1px $borders_color; // border
       &:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; }
+      & tab { padding: 8px 8px; }
     }
     &.bottom {
       box-shadow: $_header_shade,
@@ -1636,32 +1637,32 @@ notebook {
 
     //FIXME: we get double border in some cases, not considering the broken
     //notebook content frame...
-    &.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
-    &.left, &.right { padding: $ht_vpadding $ht_hpadding; }
+    .top &, .bottom & { padding: $vt_vpadding $vt_hpadding; }
+    .left &, .right & { padding: $ht_vpadding $ht_hpadding; }
 
 
     /* works for testnotebookdnd, but there's a superfluous border
        in gedit or web, commented out for now, needs gtk fixes
     &.reorderable-page {
-      &.top {
+      .top & {
         padding-top: ($vt_vpadding - 1px);
         border-top-width: 1px;
         border-left-width: 1px;
         border-right-width: 1px;
       }
-      &.bottom {
+      .bottom & {
         padding-bottom: ($vt_vpadding - 1px);
         border-bottom-width: 1px;
         border-left-width: 1px;
         border-right-width: 1px;
       }
-      &.left {
+      .left & {
         padding-left: ($ht_hpadding - 1px);
         border-left-width: 1px;
         border-top-width: 1px;
         border-bottom-width: 1px;
       }
-      &.right {
+      .right & {
         padding-right: ($ht_hpadding - 1px);
         border-right-width: 1px;
         border-top-width: 1px;
@@ -1670,30 +1671,30 @@ notebook {
     }
     */
     &.reorderable-page {
-      &.top, &.bottom {
+      .top &, .bottom & {
         padding-left: 12px;  // for a nicer close button
         padding-right: 12px; // placement
         border-left-width: 1px;
         border-right-width: 1px;
       }
-      &.left, &.right {
+      .left &, .right & {
         border-bottom-width: 1px;
         border-top-width: 1px;
       }
     }
-    &.top {
+    .top & {
       //padding-bottom: ($vt_vpadding -$tab_indicator_size);
       border-bottom-width: $tab_indicator_size;
     }
-    &.bottom {
+    .bottom & {
       //padding-top: ($vt_vpadding -$tab_indicator_size);
       border-top-width: $tab_indicator_size;
     }
-    &.left {
+    .left & {
       //padding-right: ($ht_hpadding -$tab_indicator_size);
       border-right-width: $tab_indicator_size;
     }
-    &.right {
+    .right & {
       //padding-left: ($ht_hpadding -$tab_indicator_size);
       border-left-width: $tab_indicator_size;
     }
@@ -1713,7 +1714,7 @@ notebook {
                              (bottom, top),
                              (left, right),
                              (right, left) {
-      &.reorderable-page.#{$_tab} {
+      .#{$_tab} &.reorderable-page {
         border-color: transparent;
         &:hover {
           border-color: transparentize($borders_color,0.7);
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index afa737c..1c51983 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -2142,37 +2142,39 @@ notebook {
       border-left-width: 0; }
     notebook.frame:backdrop {
       border-color: #1f2222; }
-  notebook.header {
+  notebook header {
     background-color: #303535; }
-    notebook.header.frame {
+    .frame notebook header {
       border: 1px solid #1c1f1f; }
-      notebook.header.frame.top {
+      .frame notebook header.top {
         border-bottom-width: 0; }
-      notebook.header.frame.bottom {
+      .frame notebook header.bottom {
         border-top-width: 0; }
-      notebook.header.frame.right {
+      .frame notebook header.right {
         border-left-width: 0; }
-      notebook.header.frame.left {
+      .frame notebook header.left {
         border-right-width: 0; }
-      notebook.header.frame:backdrop {
+      .frame notebook header:backdrop {
         border-color: #1f2222; }
-    notebook.header.top {
+    notebook header.top {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #1c1f1f; }
-      notebook.header.top:backdrop {
+      notebook header.top:backdrop {
         box-shadow: inset 0 -1px #1f2222; }
-    notebook.header.bottom {
+      notebook header.top tab {
+        padding: 8px 8px; }
+    notebook header.bottom {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #1c1f1f; }
-      notebook.header.bottom:backdrop {
+      notebook header.bottom:backdrop {
         box-shadow: inset 0 1px #1f2222; }
-    notebook.header.right {
+    notebook header.right {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #1c1f1f; }
-      notebook.header.right:backdrop {
+      notebook header.right:backdrop {
         box-shadow: inset 1px 0 #1f2222; }
-    notebook.header.left {
+    notebook header.left {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #1c1f1f; }
-      notebook.header.left:backdrop {
+      notebook header.left:backdrop {
         box-shadow: inset -1px 0 #1f2222; }
-    notebook.header:backdrop {
+    notebook header:backdrop {
       background-color: #303535;
       box-shadow: none; }
   notebook tab {
@@ -2184,25 +2186,25 @@ notebook {
     /* works for testnotebookdnd, but there's a superfluous border
        in gedit or web, commented out for now, needs gtk fixes
     &.reorderable-page {
-      &.top {
+      .top & {
         padding-top: ($vt_vpadding - 1px);
         border-top-width: 1px;
         border-left-width: 1px;
         border-right-width: 1px;
       }
-      &.bottom {
+      .bottom & {
         padding-bottom: ($vt_vpadding - 1px);
         border-bottom-width: 1px;
         border-left-width: 1px;
         border-right-width: 1px;
       }
-      &.left {
+      .left & {
         padding-left: ($ht_hpadding - 1px);
         border-left-width: 1px;
         border-top-width: 1px;
         border-bottom-width: 1px;
       }
-      &.right {
+      .right & {
         padding-right: ($ht_hpadding - 1px);
         border-right-width: 1px;
         border-top-width: 1px;
@@ -2210,25 +2212,25 @@ notebook {
       }
     }
     */ }
-    notebook tab.top, notebook tab.bottom {
+    .top notebook tab, .bottom notebook tab {
       padding: 8px 20px; }
-    notebook tab.left, notebook tab.right {
+    .left notebook tab, .right notebook tab {
       padding: 5px 20px; }
-    notebook tab.reorderable-page.top, notebook tab.reorderable-page.bottom {
+    .top notebook tab.reorderable-page, .bottom notebook tab.reorderable-page {
       padding-left: 12px;
       padding-right: 12px;
       border-left-width: 1px;
       border-right-width: 1px; }
-    notebook tab.reorderable-page.left, notebook tab.reorderable-page.right {
+    .left notebook tab.reorderable-page, .right notebook tab.reorderable-page {
       border-bottom-width: 1px;
       border-top-width: 1px; }
-    notebook tab.top {
+    .top notebook tab {
       border-bottom-width: 3px; }
-    notebook tab.bottom {
+    .bottom notebook tab {
       border-top-width: 3px; }
-    notebook tab.left {
+    .left notebook tab {
       border-right-width: 3px; }
-    notebook tab.right {
+    .right notebook tab {
       border-left-width: 3px; }
     notebook tab:hover {
       border-color: #1c1f1f; }
@@ -2237,80 +2239,80 @@ notebook {
     notebook tab:backdrop {
       background-color: transparent;
       border-color: transparent; }
-    notebook tab.reorderable-page.top {
+    .top notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.top:hover {
+      .top notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-bottom-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.top:active {
+      .top notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-bottom-color: #215d9c; }
-        notebook tab.reorderable-page.top:active:hover {
+        .top notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.top:active:backdrop {
+        .top notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-bottom-color: #215d9c; }
-      notebook tab.reorderable-page.top:backdrop {
+      .top notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.bottom {
+    .bottom notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.bottom:hover {
+      .bottom notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-top-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.bottom:active {
+      .bottom notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-top-color: #215d9c; }
-        notebook tab.reorderable-page.bottom:active:hover {
+        .bottom notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.bottom:active:backdrop {
+        .bottom notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-top-color: #215d9c; }
-      notebook tab.reorderable-page.bottom:backdrop {
+      .bottom notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.left {
+    .left notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.left:hover {
+      .left notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-right-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.left:active {
+      .left notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-right-color: #215d9c; }
-        notebook tab.reorderable-page.left:active:hover {
+        .left notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.left:active:backdrop {
+        .left notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-right-color: #215d9c; }
-      notebook tab.reorderable-page.left:backdrop {
+      .left notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.right {
+    .right notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.right:hover {
+      .right notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-left-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.right:active {
+      .right notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-left-color: #215d9c; }
-        notebook tab.reorderable-page.right:active:hover {
+        .right notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.right:active:backdrop {
+        .right notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-left-color: #215d9c; }
-      notebook tab.reorderable-page.right:backdrop {
+      .right notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
     notebook tab label {
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 3aa59d3..a9bc0bd 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -2148,37 +2148,39 @@ notebook {
       border-left-width: 0; }
     notebook.frame:backdrop {
       border-color: darkgray; }
-  notebook.header {
+  notebook header {
     background-color: #d6d6d6; }
-    notebook.header.frame {
+    .frame notebook header {
       border: 1px solid #a1a1a1; }
-      notebook.header.frame.top {
+      .frame notebook header.top {
         border-bottom-width: 0; }
-      notebook.header.frame.bottom {
+      .frame notebook header.bottom {
         border-top-width: 0; }
-      notebook.header.frame.right {
+      .frame notebook header.right {
         border-left-width: 0; }
-      notebook.header.frame.left {
+      .frame notebook header.left {
         border-right-width: 0; }
-      notebook.header.frame:backdrop {
+      .frame notebook header:backdrop {
         border-color: darkgray; }
-    notebook.header.top {
+    notebook header.top {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #a1a1a1; }
-      notebook.header.top:backdrop {
+      notebook header.top:backdrop {
         box-shadow: inset 0 -1px darkgray; }
-    notebook.header.bottom {
+      notebook header.top tab {
+        padding: 8px 8px; }
+    notebook header.bottom {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #a1a1a1; }
-      notebook.header.bottom:backdrop {
+      notebook header.bottom:backdrop {
         box-shadow: inset 0 1px darkgray; }
-    notebook.header.right {
+    notebook header.right {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #a1a1a1; }
-      notebook.header.right:backdrop {
+      notebook header.right:backdrop {
         box-shadow: inset 1px 0 darkgray; }
-    notebook.header.left {
+    notebook header.left {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #a1a1a1; }
-      notebook.header.left:backdrop {
+      notebook header.left:backdrop {
         box-shadow: inset -1px 0 darkgray; }
-    notebook.header:backdrop {
+    notebook header:backdrop {
       background-color: #d5d5d5;
       box-shadow: none; }
   notebook tab {
@@ -2190,25 +2192,25 @@ notebook {
     /* works for testnotebookdnd, but there's a superfluous border
        in gedit or web, commented out for now, needs gtk fixes
     &.reorderable-page {
-      &.top {
+      .top & {
         padding-top: ($vt_vpadding - 1px);
         border-top-width: 1px;
         border-left-width: 1px;
         border-right-width: 1px;
       }
-      &.bottom {
+      .bottom & {
         padding-bottom: ($vt_vpadding - 1px);
         border-bottom-width: 1px;
         border-left-width: 1px;
         border-right-width: 1px;
       }
-      &.left {
+      .left & {
         padding-left: ($ht_hpadding - 1px);
         border-left-width: 1px;
         border-top-width: 1px;
         border-bottom-width: 1px;
       }
-      &.right {
+      .right & {
         padding-right: ($ht_hpadding - 1px);
         border-right-width: 1px;
         border-top-width: 1px;
@@ -2216,25 +2218,25 @@ notebook {
       }
     }
     */ }
-    notebook tab.top, notebook tab.bottom {
+    .top notebook tab, .bottom notebook tab {
       padding: 8px 20px; }
-    notebook tab.left, notebook tab.right {
+    .left notebook tab, .right notebook tab {
       padding: 5px 20px; }
-    notebook tab.reorderable-page.top, notebook tab.reorderable-page.bottom {
+    .top notebook tab.reorderable-page, .bottom notebook tab.reorderable-page {
       padding-left: 12px;
       padding-right: 12px;
       border-left-width: 1px;
       border-right-width: 1px; }
-    notebook tab.reorderable-page.left, notebook tab.reorderable-page.right {
+    .left notebook tab.reorderable-page, .right notebook tab.reorderable-page {
       border-bottom-width: 1px;
       border-top-width: 1px; }
-    notebook tab.top {
+    .top notebook tab {
       border-bottom-width: 3px; }
-    notebook tab.bottom {
+    .bottom notebook tab {
       border-top-width: 3px; }
-    notebook tab.left {
+    .left notebook tab {
       border-right-width: 3px; }
-    notebook tab.right {
+    .right notebook tab {
       border-left-width: 3px; }
     notebook tab:hover {
       border-color: #a1a1a1; }
@@ -2243,80 +2245,80 @@ notebook {
     notebook tab:backdrop {
       background-color: transparent;
       border-color: transparent; }
-    notebook tab.reorderable-page.top {
+    .top notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.top:hover {
+      .top notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-bottom-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.top:active {
+      .top notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-bottom-color: #4a90d9; }
-        notebook tab.reorderable-page.top:active:hover {
+        .top notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.top:active:backdrop {
+        .top notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-bottom-color: #4a90d9; }
-      notebook tab.reorderable-page.top:backdrop {
+      .top notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.bottom {
+    .bottom notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.bottom:hover {
+      .bottom notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-top-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.bottom:active {
+      .bottom notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-top-color: #4a90d9; }
-        notebook tab.reorderable-page.bottom:active:hover {
+        .bottom notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.bottom:active:backdrop {
+        .bottom notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-top-color: #4a90d9; }
-      notebook tab.reorderable-page.bottom:backdrop {
+      .bottom notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.left {
+    .left notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.left:hover {
+      .left notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-right-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.left:active {
+      .left notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-right-color: #4a90d9; }
-        notebook tab.reorderable-page.left:active:hover {
+        .left notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.left:active:backdrop {
+        .left notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-right-color: #4a90d9; }
-      notebook tab.reorderable-page.left:backdrop {
+      .left notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.right {
+    .right notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.right:hover {
+      .right notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-left-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.right:active {
+      .right notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-left-color: #4a90d9; }
-        notebook tab.reorderable-page.right:active:hover {
+        .right notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.right:active:backdrop {
+        .right notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-left-color: #4a90d9; }
-      notebook tab.reorderable-page.right:backdrop {
+      .right notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
     notebook tab label {
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]