Bug 1244570 - Style the toolar menulists like toolbarbutton-1. r=mkmelin a=jorgk
authorRichard Marti <richard.marti@gmail.com>
Mon, 01 Feb 2016 19:13:15 +0100
changeset 26759 71483c515acd74e8b7b57b9a07415f4bd2765d95
parent 26758 b78a55a2bec615cb0b475d17e97f5875f9ec2c80
child 26760 7344e962567e6f0d0c01023f63721bf592fe977f
push id1850
push userclokep@gmail.com
push dateWed, 08 Mar 2017 19:29:12 +0000
treeherdercomm-esr52@028df196b2d9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmkmelin, jorgk
bugs1244570
Bug 1244570 - Style the toolar menulists like toolbarbutton-1. r=mkmelin a=jorgk
mail/themes/linux/mail/compose/messengercompose.css
mail/themes/linux/mail/mailWindow1.css
--- a/mail/themes/linux/mail/compose/messengercompose.css
+++ b/mail/themes/linux/mail/compose/messengercompose.css
@@ -112,18 +112,62 @@ toolbar[brighttext] #copy-button {
 toolbar[brighttext] #paste-button {
   list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.svg#paste-inverted");
 }
 
 toolbar[brighttext] #button-print {
   list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.svg#print-inverted");
 }
 
-#priority-button:not(:-moz-lwtheme) > label {
-  color: MenuText;
+/* ::::: menulists on toolbar ::::: */
+
+menulist {
+  -moz-appearance: none;
+  min-height: 24px;
+  color: inherit;
+  margin: 1px 4px;
+  padding: 1px 6px;
+  border: 1px solid;
+  background: var(--toolbarbutton-hover-background);
+  border-color: var(--toolbarbutton-hover-bordercolor);
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+  transition: background-color 150ms;
+}
+
+menulist:not([disabled="true"]):not([open="true"]):hover {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+}
+
+menulist[open="true"] {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
+menulist[disabled="true"] {
+  opacity: .6;
+}
+
+.menulist-dropmarker {
+  -moz-appearance: none;
+  display:-moz-box;
+  list-style-image: none;
+}
+
+menulist > .menulist-dropmarker > .dropmarker-icon {
+  width: 9px;
+  max-height: 7px;
+  margin: 7px 5px;
+  margin-inline-end: 0;
+  background-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.png");
+}
+
+toolbar[brighttext] menulist > .menulist-dropmarker > .dropmarker-icon {
+  background-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow-inverted.png");
 }
 
 /* ::::: special toolbar colors ::::: */
 
 #attachmentbucket-sizer {
   border-top: none;
 }
 
--- a/mail/themes/linux/mail/mailWindow1.css
+++ b/mail/themes/linux/mail/mailWindow1.css
@@ -367,8 +367,56 @@ treechildren::-moz-tree-image(subjectCol
   height: 16px;
 }
 
 /* ..... tabs ..... */
 
 #tabpanelcontainer {
   -moz-appearance: none;
 }
+
+/* ..... menulists on main toolbar ..... */
+
+menulist {
+  -moz-appearance: none;
+  min-height: 24px;
+  color: inherit;
+  margin: 1px 4px;
+  padding: 1px 6px;
+  border: 1px solid;
+  background: var(--toolbarbutton-hover-background);
+  border-color: var(--toolbarbutton-hover-bordercolor);
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+  transition: background-color 150ms;
+}
+
+menulist:not([disabled="true"]):not([open="true"]):hover {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+}
+
+menulist[open="true"] {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
+menulist[disabled="true"] {
+  opacity: .6;
+}
+
+.menulist-dropmarker {
+  -moz-appearance: none;
+  display:-moz-box;
+  list-style-image: none;
+}
+
+menulist > .menulist-dropmarker > .dropmarker-icon {
+  width: 9px;
+  max-height: 7px;
+  margin: 7px 5px;
+  margin-inline-end: 0;
+  background-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.png");
+}
+
+toolbar[brighttext] menulist > .menulist-dropmarker > .dropmarker-icon {
+  background-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow-inverted.png");
+}