| <link rel="import" href="../html/polymer.html"> |
| |
| <!-- Common icon classes for Material Design WebUI. --> |
| <dom-module id="cr-icons"> |
| <template> |
| <style> |
| .icon-arrow-back { |
| --cr-icon-image: url(../images/icon_arrow_back.svg); |
| } |
| |
| .icon-arrow-dropdown { |
| --cr-icon-image: url(../images/icon_arrow_dropdown.svg); |
| } |
| |
| .icon-cancel { |
| --cr-icon-image: url(../images/icon_cancel.svg); |
| } |
| |
| .icon-clear { |
| --cr-icon-image: url(../images/icon_clear.svg); |
| } |
| |
| .icon-delete-gray { |
| --cr-icon-image: url(../images/icon_delete_gray.svg); |
| } |
| |
| .icon-picture-delete { |
| --cr-icon-image: url(../images/icon_picture_delete.svg); |
| } |
| |
| .icon-expand-less { |
| --cr-icon-image: url(../images/icon_expand_less.svg); |
| } |
| |
| .icon-expand-more { |
| --cr-icon-image: url(../images/icon_expand_more.svg); |
| } |
| |
| .icon-external { |
| --cr-icon-image: url(../images/open_in_new.svg); |
| } |
| |
| .icon-more-vert { |
| --cr-icon-image: url(../images/icon_more_vert.svg); |
| } |
| |
| .icon-refresh { |
| --cr-icon-image: url(../images/icon_refresh.svg); |
| } |
| |
| .icon-search { |
| --cr-icon-image: url(../images/icon_search.svg); |
| } |
| |
| .icon-settings { |
| --cr-icon-image: url(../images/icon_settings.svg); |
| } |
| |
| .icon-visibility { |
| --cr-icon-image: url(../images/icon_visibility.svg); |
| } |
| |
| .icon-visibility-off { |
| --cr-icon-image: url(../images/icon_visibility_off.svg); |
| } |
| |
| .subpage-arrow { |
| --cr-icon-image: url(../images/arrow_right.svg); |
| } |
| |
| .cr-icon { |
| @apply --cr-paper-icon-button-margin; |
| -webkit-mask-image: var(--cr-icon-image); |
| -webkit-mask-position: center; |
| -webkit-mask-repeat: no-repeat; |
| -webkit-mask-size: var(--cr-icon-size); |
| background-color: var(--google-grey-refresh-700); |
| flex-shrink: 0; |
| height: var(--cr-icon-ripple-size); |
| user-select: none; |
| width: var(--cr-icon-ripple-size); |
| } |
| |
| :host-context([dir=rtl]) .cr-icon { |
| transform: scaleX(-1); /* Invert X: flip on the Y axis (aka mirror). */ |
| } |
| |
| .cr-icon.no-overlap { |
| margin-inline-end: 0; |
| margin-inline-start: 0; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .cr-icon { |
| background-color: var(--google-grey-refresh-500); |
| } |
| } |
| </style> |
| </template> |
| </dom-module> |
