Bug 1352127 - Increase the size of the toolbarbutton icons in :hover:active. draft
authorJared Wein <jwein@mozilla.com>
Fri, 19 May 2017 12:48:21 -0400
changeset 581340 f0662cb2458e1c3981fb9fcf4b33b6c96cef19c9
parent 580489 cc65f9233e5b16265ae44b643c7d255556da14fb
child 629543 38e157d84abc4c96cb2fe59a389e35e0fb4db06c
push id59832
push userbmo:jaws@mozilla.com
push dateFri, 19 May 2017 16:51:01 +0000
bugs1352127
milestone55.0a1
Bug 1352127 - Increase the size of the toolbarbutton icons in :hover:active. We cannot use transform:scale(1.08); because that would also increase the visual size of the button since the hover and active background-color is applied directly to the .toolbarbutton-icon. Changing the padding and min-width allows the icon size to grow independently. MozReview-Commit-ID: D2BbsQaatpx
browser/themes/shared/toolbarbuttons.inc.css
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -298,16 +298,38 @@ toolbarbutton.bookmark-item[open="true"]
   background: var(--toolbarbutton-active-background);
 %ifndef MOZ_PHOTON_THEME
   border-color: var(--toolbarbutton-active-bordercolor);
   box-shadow: var(--toolbarbutton-active-boxshadow);
 %endif
   transition-duration: 10ms;
 }
 
+%ifdef MOZ_PHOTON_ANIMATIONS
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
+/* Needed because a #bookmarks-menu-button rule is more specific than the general rule below this one. */
+#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"][open]:not([overflowedItem="true"]) > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
+#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
+#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
+#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
+  min-width: 28px;
+  padding: 4px;
+}
+
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon {
+  min-width: 27px;
+}
+
+#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  min-width: 18px;
+}
+
+%endif
+
 #nav-bar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
   background-color: var(--toolbarbutton-checkedhover-backgroundcolor);
   transition: background-color .4s;
 }
 
 %ifndef MOZ_PHOTON_THEME
 /* unified back/forward button */