Redesign menu@cinnamon.org

data/theme/cinnamon-sass/_widgets.scss

@@ -15,3 +15,4 @@
 @import 'widgets/startmenu';
 @import 'widgets/switch-check';
 @import 'widgets/windowlist';
+@import 'widgets/deprecated';

data/theme/cinnamon-sass/widgets/_deprecated.scss

@@ -0,0 +1,98 @@
+// OLD MENU - Used by some of the menu spices
+
+$menu_outer_padding: 9px;
+$menu_outer_border_radius: $base_border_radius * 1.25;
+
+%start_menu_button {
+  padding: $base_padding;
+  spacing: $base_margin;
+  border-radius: $base_border_radius;
+}
+
+.menu {
+
+  // this can be used to color the entire menu background but we aren't using it here
+  &-background {}
+
+  &-favorites-box {
+    padding: $base_padding * 1.5;
+    background-color: $light_bg_color;
+    border: 1px solid transparentize(black, 0.9);
+    border-radius: $base_border_radius;
+  }
+
+  &-favorites-button {
+    padding: $base_padding * 1.5;
+    border-radius: $base_border_radius;
+
+    &:hover { background-color: $lightest_bg_color; }
+  }
+
+  &-categories-box { padding: $menu_outer_padding $base_padding * 4; }
+  &-applications-box { padding: $menu_outer_padding; }
+  &-applications-inner-box {
+    &:ltr { padding-left: $base_padding * 4; }
+    &:rtl { padding-right: $base_padding * 4; }
+  }
+
+  &-application-button {
+    @extend %start_menu_button;
+
+    &-label { padding: 0; }
+
+    &:highlighted { font-weight: bold; }
+
+    &-selected {
+      @extend %start_menu_button;
+
+      background-color: $light_bg_color;
+
+      &:highlighted { font-weight: bold; }
+    }
+  }
+
+  &-category-button {
+    @extend %start_menu_button;
+
+    &-label { padding: 0; }
+
+    &:hover { background-color: $lighter_bg_color; }
+
+    &-selected {
+      @extend %start_menu_button;
+
+      background-color: $light_bg_color;
+    }
+
+    &-greyed {
+      @extend %start_menu_button;
+      color: $insensitive_fg_color;
+      font-style: italic;
+
+      StIcon { opacity: 0.5; }
+    }
+  }
+
+  &-context-menu {}
+
+  &-selected-app-box {
+    padding-right: $base_padding * 4;
+    padding-left: $base_padding * 4;
+    text-align: right;
+  }
+
+  &-selected-app-title { @extend %heading; }
+  &-selected-app-description { color: $insensitive_fg_color; }
+
+  &-search-box {
+    padding: 0  0 $base_padding $menu_outer_padding;
+  }
+}
+
+#menu-search-entry {
+  @extend %entry;
+}
+
+.menu-search-entry-icon {
+  icon-size: $scalable_icon_size;
+}

data/theme/cinnamon-sass/widgets/_startmenu.scss

@@ -1,69 +1,102 @@
-$menu_outer_padding: 9px;
-$menu_outer_border_radius: $base_border_radius * 1.25;
+$appmenu_outer_padding: 9px;
+$appmenu_outer_border_radius: $base_border_radius * 1.25;
 
-%start_menu_button {
+%appmenu_button {
   padding: $base_padding;
   spacing: $base_margin;
   border-radius: $base_border_radius;
 }
 
-.menu {
+.appmenu {
 
   // this can be used to color the entire menu background but we aren't using it here
-  &-background {}
-
-  &-favorites-box {
-    padding: $base_padding * 1.5;
-    background-color: $light_bg_color;
-    border: 1px solid transparentize(black, 0.9);
-    border-radius: $base_border_radius;
+  &-background {
+    // using this to override the default padding on menus so widgets can span edge
+    // to edge. The side effect is that some of our internal container widgets
+    // will need to have a border-radius added to them or the corners will poke out
+    // the edges of the menu.
+    .popup-menu-content { padding: 0; }
   }
 
-  &-favorites-button {
-    padding: $base_padding * 1.5;
-    border-radius: $base_border_radius;
+  &-sidebar {
+    background-color: $base_color;
+    border-radius: $appmenu_outer_border_radius 0 0 $appmenu_outer_border_radius;
+    border-right-width: 1px;
+    border-color: $borders_color;
+
+    .sidebar-user-box {
+      padding-top: $appmenu_outer_padding;
+      padding-bottom: $appmenu_outer_padding / 2;
+    }
+
+    .appmenu-favorites-button {
+      @extend %appmenu_button;
+
+      padding: 3px $base_padding 3px $base_padding;
+      margin: 0 $appmenu_outer_padding 0 $appmenu_outer_padding;
 
-    &:hover { background-color: $lightest_bg_color; }
+      &:hover {
+        background-color: $lighter_bg_color;
+        border-color: $borders_color;
+      }
+    }
   }
 
-  &-categories-box { padding: $menu_outer_padding $base_padding * 4; }
-  &-applications-box { padding: $menu_outer_padding; }
-  &-applications-inner-box {
-    &:ltr { padding-left: $base_padding * 4; }
-    &:rtl { padding-right: $base_padding * 4; }
+  &-system-buttons-box {
+    spacing: 6px;
+    padding-left: 6px;
+    padding-right: 6px;
+
+    .system-button {
+      padding: $base_padding * 1.4;
+      border: 1px solid $borders_color;
+      border-radius: 9999px;
+      background-color: lighten($bg_color, 10%);
+
+      &:hover { background-color: $accent_color; }
+    }
   }
 
+  &-categories-box { padding: $appmenu_outer_padding $base_padding * 3; }
+  &-applications-box { padding: $appmenu_outer_padding; }
+  // This small amount of padding is needed to be able
+  // to resize the menu with the mouse
+  &-applications-scrollbox { padding-right: 3px; }
+
   &-application-button {
-    @extend %start_menu_button;
+    @extend %appmenu_button;
 
     &-label { padding: 0; }
+    &-description {
+      @extend %caption;
+      color: $light_text_color;
+    }
 
     &:highlighted { font-weight: bold; }
 
     &-selected {
-      @extend %start_menu_button;
-
+      @extend %appmenu_button;
       background-color: $light_bg_color;
 
       &:highlighted { font-weight: bold; }
     }
   }
 
   &-category-button {
-    @extend %start_menu_button;
+    @extend %appmenu_button;
 
     &-label { padding: 0; }
 
     &:hover { background-color: $lighter_bg_color; }
 
     &-selected {
-      @extend %start_menu_button;
+      @extend %appmenu_button;
 
       background-color: $light_bg_color;
     }
 
     &-greyed {
-      @extend %start_menu_button;
+      @extend %appmenu_button;
       color: $insensitive_fg_color;
       font-style: italic;
 
@@ -73,24 +106,18 @@ $menu_outer_border_radius: $base_border_radius * 1.25;
 
   &-context-menu {}
 
-  &-selected-app-box {
-    padding-right: $base_padding * 4;
-    padding-left: $base_padding * 4;
-    text-align: right;
+  &-search-box {
+    padding: $base_padding $base_padding $base_padding $appmenu_outer_padding;
+    border-bottom-width: 1px;
+    border-color: $borders_color;
   }
 
-  &-selected-app-title { @extend %heading; }
-  &-selected-app-description { color: $insensitive_fg_color; }
-
-  &-search-box {
-    padding: 0  0 $base_padding $menu_outer_padding;
+  &-search-entry-icon {
+    icon-size: $scalable_icon_size;
   }
 }
 
-#menu-search-entry {
+#appmenu-search-entry {
   @extend %entry;
-}
-
-.menu-search-entry-icon {
-  icon-size: $scalable_icon_size;
+  margin: $appmenu_outer_padding;
 }