[gnome-shell/wip/fmuellner/notification-redux+sass: 59/61] Add banner style

[Florian Müllner <fmuellner src gnome org>]

commit 7b0114d003b28d3d556f95a1a5bf1ab2dba014a4
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed Feb 18 15:39:56 2015 +0100

    Add banner style

 data/theme/_common.scss |  131 +++++++----------------------------------------
 1 files changed, 19 insertions(+), 112 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 9df036b..ead20c3 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -941,7 +941,7 @@ StScrollBar {
 
 //close buttons
 
-.window-close, .notification-close {
+.window-close {
   background-image: url("close-window.svg");
   background-size: 32px;
   height: 32px;
@@ -951,12 +951,6 @@ StScrollBar {
     -shell-close-overlap: 16px;
     &:rtl { -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); }
   }
-  .notification-close {
-    -shell-close-overlap-x: 14px;
-    -shell-close-overlap-y: -12px;
-    
-    &:rtl { -shell-close-overlap-x: -14px; }
-  }
 
 /* NETWORK DIALOGS */
 
@@ -1318,111 +1312,34 @@ StScrollBar {
 
 /* NOTIFICATIONS & MESSAGE TRAY */
 
-#message-tray {
-  background: darken($osd_bg_color,10%) url("noise-texture.png");
-  background-repeat: repeat;
-  height: 72px;
-  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
-  padding: 4px;
-  .message-tray-summary { height: 72px; }
-  
-  .message-tray-menu-button {
-    StIcon {
-      padding: 0 20px;
-      color: $fg_color;
-      icon-size: 24px;
-      opacity: 1;
-    }
-    &:hover StIcon { color: lighten($fg_color, 15%); } 
-    &:active StIcon { color: lighten($selected_bg_color, 10%); }
-  } 
-  .no-messages-label { color: darken($fg_color,10%); }
-}
   .url-highlighter { link-color: $selected_bg_color; }
   
   // Banners
-  .notification { 
+  .notification-banner { 
     font-size: 11pt;
     width: 34em;
-    border-radius: 6px 6px 0 0;
+    margin: 5px;
+    border-radius: 6px;
     color: $_bubble_fg_color;
     background-color: $_bubble_bg_color;
     border: 1px solid $borders_color;
-    border-bottom-width: 0;
     //box-shadow: 0 1px 4px black;
-    spacing-rows: 4px;
-    padding: 8px 8px 4px 8px;
-    spacing-columns: 10px;
-    &.multi-line-notification { padding-bottom: 8px; }
-  }
-  .notification-unexpanded {
-    // We want to force the actor at a specific size, irrespective
-    // of its minimum and preferred size, so we override both
-    min-height: 36px;
-    height: 36px;
-  }
-  // We use row-span = 2 for the image cell, which prevents its height preferences to be
-  // taken into account during allocation, so its height ends up being limited by the height
-  // of the content in the other rows. To avoid showing a stretched image, we set the minimum
-  // height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 
-  .notification-with-image {
-    min-height: 159px;
-  }
-  .notification-body { spacing: 5px; }
-  .notification-actions {
-    paddinf-top: 18px;
-    spacing: 6px;
-  }
-  //Message tray items
-  .summary-source {
-    border-radius: 0;
-    -st-natural-width: 60px; //FIXME left aligned rather than centered
-    padding: 9px;
-    transition-duration: 100ms;
-  }
-  .summary-source-button { 
-    &:hover .summary-source,
-    &:selected .summary-source,
-    &:focus .summary-source { background-color: lighten($osd_bg_color,2%); }
-  }
-  .summary-source-counter {
-    font-size: 10pt;
-    font-weight: bold;
-    height: 1.6em; width: 1.6em;
-    -shell-counter-overlap-x: 3px;
-    -shell-counter-overlap-y: 3px;
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
-    border: 2px solid $osd_fg_color;
-    box-shadow: 0 2px 2px rgba(0,0,0,0.5);
-    border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
+    &:hover { background-color: $_bubble_bg_color; }
+    &:focus { background-color: $_bubble_bg_color; }
   }
-  
-  //Message tray popovers
-  .summary-boxpointer {
-    -arrow-border-radius: 15px;
-    -arrow-background-color: $_bubble_bg_color;
-    -arrow-base: 36px;
-    -arrow-rise: 18px;
-    color: $fg_color;
-    -boxpointer-gap: 4px;
-    .notification {
-      border-radius: 9px;
-      border-width: 0; //temporary workaround for border brokenness
-      background-color: transparent !important;
-      padding-bottom: 12px;
-    }
-    #summary-right-click-menu {
-      padding-top: 12px;
-      padding-bottom: 12px;
-    }
+  .notification-icon { padding: 5px; }
+  .notification-content { padding: 5px; spacing: 5px; }
+  .notification-actions {
+    background-color: $borders_color;
+    padding-top: 2px;
+    spacing: 1px;
   }
-  .summary-notification-stack-scrollview {
-    max-height: 24em;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    &:ltr { padding-right: 8px; }
-    &:rtl { padding-left: 8px; }
+  .notification-button {
+    padding: 4px 4px 5px;
+    background-color: darken($_bubble_bg_color,5%);
+    &:first-child { border-radius: 0 0 0 6px; }
+    &:last-child { border-radius: 0 0 6px 0; }
+    &:hover, &focus { background-color: darken($_bubble_bg_color,2%); }
   }
   .notification-scrollview {
     max-height: 18em;
@@ -1430,20 +1347,10 @@ StScrollBar {
     &:ltr > StScrollBar { padding-left: 6px; }
     &:rtl > StScrollBar { padding-right: 6px; }
   }
-  .notification-button {
-    //-st-natural-width: 140px;
-    height: 24px;
-  }
-  .notification-icon-button { 
-    border-radius: 5px; 
-    padding: 5px;
-    height: 24px; width: 24px;
-    &:focus { }
-    & > StIcon { icons-size: 16px; width: 16px; height: 16px; padding: 2px; }
-  }
   .secondary-icon { icon-size: 1.09em; }
 
   //chat bubbles
+  .chat-body { spacing: 5px; }
   .chat-log-message { color: darken($fg_color,10%); }
   .chat-empty-line { font-size: 4px; }
   .chat-received {