| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/icon.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> |
| <link rel="import" href="chrome://bookmarks/shared_style.html"> |
| |
| <dom-module id="bookmarks-dnd-chip"> |
| <template> |
| <style include="shared-style"> |
| :host { |
| --chip-height: 40px; |
| --chip-padding-x: 8px; |
| --chip-width: 172px; |
| |
| left: 0; |
| pointer-events: none; |
| position: absolute; |
| top: 0; |
| transform: translate(calc(var(--mouse-x) - var(--chip-width) * 0.5), |
| calc(var(--mouse-y) - var(--chip-height) * 0.8)); |
| z-index: 2; |
| } |
| |
| :host(:not([showing_])) { |
| display: none; |
| } |
| |
| .chip-container { |
| background-color: var(--interactive-color); |
| border-radius: calc(var(--chip-height) / 2); |
| box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12), |
| 0 4px 10px 0 rgba(0, 0, 0, 0.24); |
| height: var(--chip-height); |
| left: 0; |
| padding: 0 var(--chip-padding-x); |
| position: absolute; |
| top: 0; |
| width: calc(var(--chip-width) - var(--chip-padding-x) * 2); |
| } |
| |
| #title { |
| -webkit-margin-end: 8px; |
| -webkit-margin-start: 12px; |
| color: white; |
| flex: 1; |
| font-weight: 500; |
| text-decoration: none; |
| } |
| |
| #icon-wrapper { |
| background: white; |
| border-radius: 12px; |
| color: var(--cr-secondary-text-color); |
| height: 24px; |
| position: relative; |
| width: 24px; |
| } |
| |
| .centered { |
| align-items: center; |
| display: flex; |
| justify-content: center; |
| } |
| |
| #count { |
| background: var(--google-red-500); |
| border-radius: 12px; |
| color: white; |
| font-weight: 500; |
| height: 24px; |
| min-width: 14px; |
| padding: 0 5px; |
| position: absolute; |
| right: -170px; |
| top: -10px; |
| } |
| |
| :host-context([dir='rtl']) #count { |
| left: 2px; |
| right: auto; |
| } |
| </style> |
| <div class="chip-container centered"> |
| <div id="icon-wrapper" class="centered"> |
| <div id="icon"></div> |
| </div> |
| <div id="title" class="elided-text"></div> |
| </div> |
| <div id="count" class="centered" hidden$="[[!isMultiItem_]]"></div> |
| </template> |
| <script src="chrome://bookmarks/dnd_chip.js"></script> |
| </dom-module> |