From 7a5ddca1acaf7767260ec7d9eee57694670a5fb9 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Wed, 5 Dec 2018 20:51:43 +0200 Subject: [PATCH] Scale stack-less buttons using padding which doesn't require restyling --- chrome/button_effect_scale_onclick.css | 34 ++++++++++++++------------ 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/chrome/button_effect_scale_onclick.css b/chrome/button_effect_scale_onclick.css index 686df35..cac7d3b 100644 --- a/chrome/button_effect_scale_onclick.css +++ b/chrome/button_effect_scale_onclick.css @@ -1,18 +1,20 @@ /* Effect */ -.toolbarbutton-icon { transition: transform 82ms linear !important; } -toolbarbutton:not([disabled]):active > .toolbarbutton-icon, -toolbarbutton:not([disabled]):active > .toolbarbutton-badge-stack > .toolbarbutton-icon{ transform: scale(0.6) } - -/* Restyle hover state - remove everything below if you want the scale effect to also apply to background-color */ -toolbar .toolbarbutton-1{ clip-path: inset(3px) } -toolbar .toolbarbutton-1:not([disabled]):hover, -toolbar .toolbarbutton-1[open], -toolbar .toolbarbutton-1[checked]{ - background-color: var(--toolbarbutton-hover-background); +.toolbarbutton-icon, +.menuitem-iconic .menu-iconic-icon{ + transition: transform 82ms linear !important; } -toolbar .toolbarbutton-1 > .toolbarbutton-icon, -toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack{ background-color: transparent !important } -/* Back button override */ -:root:not([uidensity="compact"]) #back-button{ clip-path: none; background-color: transparent } -:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon{ background-color: var(--backbutton-background) !important;} -:root:not([uidensity="compact"]) .toolbarbutton-1:not(#back-button){margin: var(--toolbarbutton-outer-padding) 0 !important;} \ No newline at end of file + +toolbar .toolbarbutton-1 > .toolbarbutton-icon{ + transition: padding 82ms linear !important; +} + +toolbarbutton:not(.toolbarbutton-1):active > .toolbarbutton-icon, +toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-badge-stack > .toolbarbutton-icon, +.menuitem-iconic:active .menu-iconic-icon{ + transform: scale(0.6) !important; +} + +toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-icon, +#back-button:not([disabled]):active > .toolbarbutton-icon{ + padding: calc(var(--toolbarbutton-inner-padding) + 3px) !important; +} \ No newline at end of file