| <style> |
| :host { |
| display: block; |
| user-select: none; |
| white-space: nowrap; |
| } |
| |
| .row { |
| align-items: center; |
| appearance: none; |
| background: transparent; |
| border: none; |
| box-sizing: border-box; |
| color: currentColor; |
| cursor: pointer; |
| display: grid; |
| grid-template-areas: 'arrow icon title'; |
| grid-template-columns: 20px 20px auto; |
| height: 40px; |
| line-height: 40px; |
| padding-inline-start: calc(var(--node-depth) * 17px); |
| text-align: start; |
| width: 100%; |
| } |
| |
| .row:hover, |
| .row:focus-visible:focus { |
| background-color: var(--cr-hover-background-color); |
| outline: none; |
| } |
| |
| .row:active { |
| background-color: var(--cr-active-background-color); |
| } |
| |
| #arrow { |
| grid-area: arrow; |
| justify-self: center; |
| } |
| |
| #arrowIcon { |
| --cr-icon-button-hover-background-color: transparent; |
| --cr-icon-button-active-background-color: transparent; |
| margin: 0; |
| transform: rotate(-90deg); |
| transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| #arrowIcon[open] { |
| transform: rotate(0); |
| } |
| |
| :host-context([dir='rtl']) #arrowIcon:not([open]) { |
| transform: rotate(90deg); |
| } |
| |
| .icon { |
| background-position: left center; |
| background-repeat: no-repeat; |
| grid-area: icon; |
| height: 16px; |
| justify-self: center; |
| width: 16px; |
| } |
| |
| #folderIcon { |
| background-image: url(chrome://theme/IDR_FOLDER_CLOSED); |
| } |
| |
| .title { |
| grid-area: title; |
| overflow: hidden; |
| padding: 0 10px; |
| text-overflow: ellipsis; |
| } |
| |
| .bookmark { |
| color: currentColor; |
| text-decoration: none; |
| } |
| </style> |
| <button class="row" on-click="onFolderClick_" tabindex="0"> |
| <div id="arrow" hidden$="[[!folder.children.length]]"> |
| <cr-icon-button |
| id="arrowIcon" |
| iron-icon="cr:arrow-drop-down" |
| open$="[[open_]]" |
| tabindex="-1"> |
| </cr-icon-button> |
| </div> |
| <div id="folderIcon" class="icon"></div> |
| <div class="title">[[folder.title]]</div> |
| </button> |
| |
| <div id="children" role="group"> |
| <template is="dom-if" if="[[open_]]"> |
| <template is="dom-repeat" items="[[folder.children]]"> |
| <template is="dom-if" if="[[!item.url]]"> |
| <bookmark-folder role="treeitem" folder="[[item]]" |
| depth="[[childDepth_]]" |
| open-folders="[[openFolders]]"> |
| </bookmark-folder> |
| </template> |
| |
| <template is="dom-if" if="[[item.url]]"> |
| <a role="treeitem" href="[[item.url]]" class="bookmark row" |
| on-click="onBookmarkClick_"> |
| <div |
| class="icon" |
| style="background-image: [[getBookmarkIcon_(item.url)]]"> |
| </div> |
| <div class="title">[[item.title]]</div> |
| </a> |
| </template> |
| </template> |
| </template> |
| </div> |