balm-ui/components/icon-button/icon-button.css

A modular and customizable UI library based on Material Design and Vue 3

.mdc-icon-button{font-size:24px;height:48px;padding:12px;width:48px}.mdc-icon-button .mdc-icon-button__focus-ring{display:none}.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring{display:block;max-height:48px;max-width:48px}@media screen and (forced-colors:active){.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring{border:2px solid transparent;border-radius:6px;box-sizing:content-box;height:100%;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}}@media screen and (forced-colors:active) and (forced-colors:active){.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring{border-color:CanvasText}}@media screen and (forced-colors:active){.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring:after,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring:after{border:2px solid transparent;border-radius:8px;content:"";display:block;height:calc(100% + 4px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% + 4px)}}@media screen and (forced-colors:active) and (forced-colors:active){.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring:after,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring:after{border-color:CanvasText}}.mdc-icon-button.mdc-icon-button--reduced-size .mdc-icon-button__ripple{height:40px;margin:4px;width:40px}.mdc-icon-button.mdc-icon-button--reduced-size.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-icon-button.mdc-icon-button--reduced-size:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring{max-height:40px;max-width:40px}.mdc-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.mdc-icon-button img,.mdc-icon-button svg{height:24px;width:24px}.mdc-icon-button{background-color:transparent;border:none;box-sizing:border-box;display:inline-block;outline:none;position:relative;fill:currentColor;color:inherit;cursor:pointer;overflow:visible;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:0}.mdc-icon-button .mdc-icon-button__touch{height:48px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:48px}.mdc-icon-button:disabled{cursor:default;pointer-events:none}.mdc-icon-button--display-flex{align-items:center;display:inline-flex;justify-content:center}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button--on .mdc-icon-button__icon,.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}.mdc-icon-button__link{height:100%;left:0;outline:none;position:absolute;top:0;width:100%}@keyframes mdc-ripple-fg-radius-in{0%{animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-opacity-in{0%{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity,0)}}@keyframes mdc-ripple-fg-opacity-out{0%{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity,0)}to{opacity:0}}.mdc-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-icon-button .mdc-icon-button__ripple:after,.mdc-icon-button .mdc-icon-button__ripple:before{border-radius:50%;content:"";opacity:0;pointer-events:none;position:absolute}.mdc-icon-button .mdc-icon-button__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-icon-button .mdc-icon-button__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:after{left:0;top:0;transform:scale(0);transform-origin:center center}.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple:after{left:var(--mdc-ripple-left,0);top:var(--mdc-ripple-top,0)}.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-icon-button .mdc-icon-button__ripple:after,.mdc-icon-button .mdc-icon-button__ripple:before{height:100%;left:0;top:0;width:100%}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:after,.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:before{height:var(--mdc-ripple-fg-size,100%);left:var(--mdc-ripple-left,0);top:var(--mdc-ripple-top,0);width:var(--mdc-ripple-fg-size,100%)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:after{height:var(--mdc-ripple-fg-size,100%);width:var(--mdc-ripple-fg-size,100%)}.mdc-icon-button .mdc-icon-button__ripple:after,.mdc-icon-button .mdc-icon-button__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-icon-button:hover .mdc-icon-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12);transition-duration:75ms}.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12);transition-duration:75ms}.mdc-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-icon-button .mdc-icon-button__ripple{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:-1}.mdc-icon-button img,.mdc-icon-button svg{vertical-align:initial}