| <style> | |
| :host { | |
| --cr-icon-button-fill-color: var(--google-grey-700); | |
| --cr-icon-button-icon-start-offset: 0; | |
| --cr-icon-button-icon-size: 20px; | |
| --cr-icon-button-size: 36px; | |
| --cr-icon-button-height: var(--cr-icon-button-size); | |
| --cr-icon-button-transition: 150ms ease-in-out; | |
| --cr-icon-button-width: var(--cr-icon-button-size); | |
| /* Copied from paper-fab.html. Prevents square touch highlight. */ | |
| -webkit-tap-highlight-color: transparent; | |
| border-radius: 50%; | |
| color: var(--cr-icon-button-stroke-color, | |
| var(--cr-icon-button-fill-color)); | |
| cursor: pointer; | |
| display: inline-flex; | |
| flex-shrink: 0; | |
| height: var(--cr-icon-button-height); | |
| margin-inline-end: var(--cr-icon-button-margin-end, | |
| var(--cr-icon-ripple-margin)); | |
| margin-inline-start: var(--cr-icon-button-margin-start); | |
| outline: none; | |
| overflow: hidden; | |
| user-select: none; | |
| vertical-align: middle; | |
| width: var(--cr-icon-button-width); | |
| } | |
| :host(:hover) { | |
| background-color: var(--cr-icon-button-hover-background-color, | |
| var(--cr-hover-background-color)); | |
| } | |
| :host(:focus-visible:focus) { | |
| box-shadow: inset 0 0 0 2px var(--cr-icon-button-focus-outline-color, | |
| var(--cr-focus-outline-color)); | |
| } | |
| @media (forced-colors: active) { | |
| :host(:focus-visible:focus) { | |
| /* Use outline instead of box-shadow (which does not work) in Windows | |
| HCM. */ | |
| outline: var(--cr-focus-outline-hcm); | |
| } | |
| } | |
| :host(:active) { | |
| background-color: var(--cr-icon-button-active-background-color, | |
| var(--cr-active-background-color)); | |
| } | |
| :host([disabled]) { | |
| cursor: initial; | |
| opacity: var(--cr-disabled-opacity); | |
| pointer-events: none; | |
| } | |
| :host(.no-overlap) { | |
| --cr-icon-button-margin-end: 0; | |
| --cr-icon-button-margin-start: 0; | |
| } | |
| :host-context([dir=rtl]):host(:not([dir=ltr]):not([multiple-icons_])) { | |
| transform: scaleX(-1); /* Invert X: flip on the Y axis (aka mirror). */ | |
| } | |
| :host-context([dir=rtl]):host(:not([dir=ltr])[multiple-icons_]) | |
| iron-icon { | |
| transform: scaleX(-1); /* Invert X: flip on the Y axis (aka mirror). */ | |
| } | |
| :host(:not([iron-icon])) #maskedImage { | |
| -webkit-mask-image: var(--cr-icon-image); | |
| -webkit-mask-position: center; | |
| -webkit-mask-repeat: no-repeat; | |
| -webkit-mask-size: var(--cr-icon-button-icon-size); | |
| -webkit-transform: var(--cr-icon-image-transform, none); | |
| background-color: var(--cr-icon-button-fill-color); | |
| height: 100%; | |
| transition: background-color var(--cr-icon-button-transition); | |
| width: 100%; | |
| } | |
| @media (forced-colors: active) { | |
| :host(:not([iron-icon])) #maskedImage { | |
| background-color: ButtonText; | |
| } | |
| } | |
| #icon { | |
| align-items: center; | |
| border-radius: 4px; | |
| display: flex; | |
| height: 100%; | |
| justify-content: center; | |
| padding-inline-start: var(--cr-icon-button-icon-start-offset); | |
| /* The |_rippleContainer| must be position relative. */ | |
| position: relative; | |
| width: 100%; | |
| } | |
| iron-icon { | |
| --iron-icon-fill-color: var(--cr-icon-button-fill-color); | |
| --iron-icon-stroke-color: var(--cr-icon-button-stroke-color, none); | |
| --iron-icon-height: var(--cr-icon-button-icon-size); | |
| --iron-icon-width: var(--cr-icon-button-icon-size); | |
| transition: fill var(--cr-icon-button-transition), | |
| stroke var(--cr-icon-button-transition); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :host { | |
| --cr-icon-button-fill-color: var(--google-grey-500); | |
| } | |
| } | |
| </style> | |
| <div id="icon"> | |
| <div id="maskedImage"></div> | |
| </div> |