1/* 2 * Copyright (C) 2022 The Android Open Source Project 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16export const nodeStyles = ` 17 .node {position: relative;display: inline-flex;padding: 2px 0; width: 100%;} 18 .node.clickable {cursor: pointer;} 19 .node:not(.selected).added, 20 .node:not(.selected).addedMove { 21 background: #03ff35; 22 } 23 24 .node:not(.selected).deleted, 25 .node:not(.selected).deletedMove { 26 background: #ff6b6b; 27 } 28 29 .node:hover:not(.selected) {background-color: rgba(127, 127, 127, 0.5)} 30 31 .node:not(.selected).modified { 32 background: cyan; 33 } 34 35 .node.addedMove:after, 36 .node.deletedMove:after { 37 content: 'moved'; 38 margin: 0 5px; 39 background: #448aff; 40 border-radius: 5px; 41 padding: 3px; 42 color: white; 43 } 44 45 .selected {background-color: #365179;color: white;} 46`; 47 48// FIXME: child-hover selector is not working. 49export const treeNodeDataViewStyles = ` 50 .node + .children:not(.flattened) {margin-left: 12px;padding-left: 11px;border-left: 1px solid var(--border-color);} 51 .node.selected + .children {border-left: 1px solid rgb(150, 150, 150);} 52 .node:hover + .children {border-left: 1px solid rgba(150, 150, 150, 0.75);} 53 .node.child-hover + .children {border-left: 1px solid #b4b4b4;} 54`; 55 56export const nodeInnerItemStyles = ` 57 .leaf-node-icon {content: ''; display: inline-block; margin-left: 40%; margin-top: 40%; height: 5px; width: 5px; border-radius: 50%;background-color: #9b9b9b;} 58 .leaf-node-icon-wrapper, .description, .toggle-tree-btn, .expand-tree-btn, .pin-node-btn { position: relative; display: inline-block;} 59 .pin-node-btn {padding: 0; transform: scale(0.7)} 60 .description {align-items: center; flex: 1 1 auto; vertical-align: middle; word-break: break-all; flex-basis: 0;} 61 .leaf-node-icon-wrapper{padding-left: 6px; padding-right: 6px; min-height: 24px; width: 24px; position:relative; align-content: center; vertical-align: middle;} 62 63 .icon-button { 64 background: none; 65 border: none; 66 display: inline-block; 67 vertical-align: middle; 68 color: inherit; 69 } 70 71 .expand-tree-btn { 72 float: right; 73 padding-left: 0; 74 padding-right: 0; 75 } 76 77 .expand-tree-btn.modified { 78 background: cyan; 79 } 80 81 .expand-tree-btn.deleted, 82 .expand-tree-btn.deletedMove { 83 background: #ff6b6b; 84 } 85 86 .expand-tree-btn.added, 87 .expand-tree-btn.addedMove { 88 background: #03ff35; 89 } 90`; 91