Scale stack-less buttons using padding which doesn't require restyling
This commit is contained in:
parent
27821ad460
commit
7a5ddca1ac
1 changed files with 18 additions and 16 deletions
|
@ -1,18 +1,20 @@
|
||||||
/* Effect */
|
/* Effect */
|
||||||
.toolbarbutton-icon { transition: transform 82ms linear !important; }
|
.toolbarbutton-icon,
|
||||||
toolbarbutton:not([disabled]):active > .toolbarbutton-icon,
|
.menuitem-iconic .menu-iconic-icon{
|
||||||
toolbarbutton:not([disabled]):active > .toolbarbutton-badge-stack > .toolbarbutton-icon{ transform: scale(0.6) }
|
transition: transform 82ms linear !important;
|
||||||
|
}
|
||||||
/* 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 > .toolbarbutton-icon{
|
||||||
toolbar .toolbarbutton-1:not([disabled]):hover,
|
transition: padding 82ms linear !important;
|
||||||
toolbar .toolbarbutton-1[open],
|
}
|
||||||
toolbar .toolbarbutton-1[checked]{
|
|
||||||
background-color: var(--toolbarbutton-hover-background);
|
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;
|
||||||
}
|
}
|
||||||
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;}
|
|
Loading…
Reference in a new issue