[gnome-shell/wip/snwh/sass-cleanup] theme: more search sass reorganization

[Sam Hewitt <snwh src gnome org>]

commit b8f59cf14a365b66b683272c53c39caae24fe69a
Author: Sam Hewitt <sam snwh org>
Date:   Mon Dec 2 13:53:26 2019 -0500

    theme: more search sass reorganization

 data/theme/gnome-shell-sass/_colors.scss           |   2 +-
 .../gnome-shell-sass/widgets/_search-results.scss  | 152 ++++++++++++---------
 data/theme/gnome-shell.scss                        |   2 +-
 3 files changed, 91 insertions(+), 65 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index 2f9ed570ca..c2506d90d2 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -25,7 +25,7 @@ $osd_bg_color: if($variant == 'light', rgba(255,255,255,0.9), transparentize(dar
 $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
 $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
 $osd_borders_color:  if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
-$osd_outer_borders_color: rgba(255,255,255,0.16);
+$osd_outer_borders_color: if($variant == 'light', rgba(255,255,255,0.4), rgba(255,255,255,0.1));
 
 $shadow_color: rgba(0,0,0,0.9);
 
diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss 
b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index 3c5731db16..0df312979e 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -1,41 +1,57 @@
 /* Search */
 
+%search_result_bubble {
+       background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
+       border-radius: $modal_radius + 3px;
+       border: 1px solid $osd_outer_borders_color;
+       box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
+       text-shadow: 0 1px rgba(0,0,0,0.3);
+       color: $osd_fg_color;
+}
+
+// search overview container
 #searchResultsContent {
        max-width: 1000px;
        padding: $base_padding * 2;
        spacing: 0;
+       margin-bottom: $base_margin * 2;
 }
 
+// search results section
 .search-section {
-       background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
-       border-radius: $base_border_radius * 3;
-       border: 1px solid $osd_outer_borders_color;
-       box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
-       color: $osd_fg_color;
-       text-shadow: 1px rgba(0,0,0,0.3);
+       @extend %search_result_bubble;
        padding: $base_padding * 2;
-       margin-bottom: $base_padding;
        spacing:0;
-}
+       margin-top: $base_padding * 2;
+       margin-bottom: $base_padding * 2;
+
+       // hide separator
+       &:first-child .search-section-separator,
+       &:last-child .search-section-separator {
+               background-color: transparent;
+       }
 
+       // separator
+       .search-section-separator { 
+               // margin-top: $base_padding * 2;
+               // height: 1px;
+               // background-color: $osd_outer_borders_color;
+               height: 0px;
+               background-color: transparent;
+       }
 
-.search-section-content {
-       spacing: 0;
+       // content
+       .search-section-content {
+               spacing: 0;
+       }
 }
 
+
 // "no results" text
 .search-statustext {
        @extend %status_text;
 }
 
-.search-section-separator { 
-       // height: 2px; background-color: rgba(255, 255, 255, 0.2);
-       height: 0; 
-       background-color:transparent;
-}
-
-.search-section:last-child .search-section-separator { background-color: transparent; }
-
 // Search results with icons
 .grid-search-result {
        > .overview-icon {
@@ -52,8 +68,7 @@
        &:focus,
        &:selected {
                .overview-icon {
-                       // background-color: transparentize($osd_bg_color,0.8);
-                       background-color: red;
+                       background-color: transparentize($osd_bg_color,0.8);
                        color: $osd_fg_color;
                }
        }
@@ -68,66 +83,77 @@
        }
 }
 
-// Search results
-.list-search-results {
-       spacing: $base_spacing;
-}
-
-.list-search-result {
+// search result provider
+.search-provider-icon {
        @extend %icon_tile;
+
+       padding: 0;
        spacing: 0;
-       color: $osd_fg_color;
-       
+       margin-right: $base_margin * 2;
+
        &:focus,
        &:selected,
        &:hover {
                background-color: transparentize($osd_fg_color,.9);
                transition-duration: 200ms;
        }
+
        &:active,
        &:checked {
                background-color: transparentize(darken($osd_bg_color,10%),.1);
        }
-}
 
-.list-search-result-content {
-       spacing: 0;
-}
+       // content
+       .list-search-provider-content {
+               spacing: $base_spacing * 3;
 
-.list-search-result-title {
-       color: darken($osd_fg_color,5%);
-       spacing: 12px;
-       padding-right: $base_padding;
+               // provider labels
+               .list-search-provider-details {
+                       width: 160px;
+                       margin-top: 0;
+                       color: darken($osd_fg_color, 8%);
+                       font-weight: bold;
+               }
+       }
 }
 
-.list-search-result-description {
-       color: darken($osd_fg_color, 30%);
-}
+// search results list
+.list-search-results {
+       spacing: $base_spacing;
 
-.list-search-provider-details {
-       width: 150px;
-       color: darken($osd_fg_color,5%);
-       margin-top: $base_margin;
-}
+       // search result listitem
+       .list-search-result {
+               @extend %icon_tile;
+               spacing: 0;
+               color: $osd_fg_color;
 
-.list-search-provider-content {
-       spacing: 20px;
-}
+               &:focus,
+               &:selected,
+               &:hover {
+                       background-color: transparentize($osd_fg_color,.9);
+                       transition-duration: 200ms;
+               }
+               &:active,
+               &:checked {
+                       background-color: transparentize(darken($osd_bg_color,10%),.1);
+               }
 
-// icons
-.search-provider-icon {
-       @extend %icon_tile;
-       padding: 0;
-       spacing: 0;
-       
-       &:focus,
-       &:selected,
-       &:hover {
-               background-color: transparentize($osd_fg_color,.9);
-               transition-duration: 200ms;
-       }
-       &:active,
-       &:checked {
-               background-color: transparentize(darken($osd_bg_color,10%),.1);
+               // content
+               .list-search-result-content {
+                       spacing: 0;
+               }
+
+               // list item title
+               .list-search-result-title {
+                       color: $osd_fg_color;
+                       spacing: $base_spacing * 2;
+                       padding-right: $base_padding;
+                       font-weight: bold;
+               }
+
+               // list item description
+               .list-search-result-description {
+                       color: darken($osd_fg_color, 30%);
+               }
        }
-}
\ No newline at end of file
+}
diff --git a/data/theme/gnome-shell.scss b/data/theme/gnome-shell.scss
index 62237fd5d3..3def5896cf 100644
--- a/data/theme/gnome-shell.scss
+++ b/data/theme/gnome-shell.scss
@@ -1,4 +1,4 @@
-$variant: 'light';
+$variant: 'dark';
 
 @import "gnome-shell-sass/_colors"; //use gtk colors
 @import "gnome-shell-sass/_drawing";