1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16export const LitTreeNodeHtmlStyle = ` 17 <style> 18 :host{ 19 display: flex; 20 margin: 0; 21 align-items: center; 22 } 23 :host(:hover) #item{ 24 background-color: #f5f5f5; 25 border-radius: 4px; 26 } 27 28 :host(:not([arrow])) #arrow{ 29 display: none; 30 } 31 32 :host(:not([arrow])) #item{ 33 margin-left: 15px; 34 } 35 36 :host([top-depth]) #item{ 37 margin-left: 0; 38 } 39 40 #title{ 41 padding: 4px 6px; 42 } 43 44 #arrow{ 45 width: 0; 46 height: 0; 47 border-top: 8px solid #262626; 48 border-bottom: 0px solid transparent; 49 border-left: 5px solid transparent; 50 border-right: 5px solid transparent; 51 transition: all .3s ; 52 transform: translateX(-50%) rotateZ(0deg); 53 margin-left: 5px; 54 } 55 56 #icon{ 57 display: none; 58 margin-left: 5px; 59 } 60 61 /*画拖动辅助线*/ 62 #item[line-top]{ 63 position: relative; 64 width: 100%; 65 } 66 67 #item[line-top]::before{ 68 content: ''; 69 position: absolute; 70 top: 5px; 71 left: 0; 72 transform: translateY(-50%); 73 width: 6px; 74 height: 6px; 75 overflow: visible; 76 z-index: 999; 77 background-color: #fff; 78 border-radius: 6px; 79 border: 2px solid #42b983; 80 } 81 #item[line-top]::after{ 82 content: ''; 83 overflow: visible; 84 position: absolute; 85 z-index: 999; 86 top: 4px; 87 left: 10px; 88 width: 100%; 89 height: 2px; 90 background-color: #42b983; 91 } 92 93 #item[line-bottom]{ 94 position: relative; 95 width: 100%; 96 } 97 #item[line-bottom]::before{ 98 content: ''; 99 position: absolute; 100 bottom: 5px; 101 left: 0; 102 transform: translateY(50%); 103 width: 6px; 104 height: 6px; 105 overflow: visible; 106 z-index: 999; 107 background-color: #fff; 108 border-radius: 6px; 109 border: 2px solid #42b983; 110 } 111 #item[line-bottom]::after{ 112 content: ''; 113 overflow: visible; 114 position: absolute; 115 z-index: 999; 116 bottom: 4px; 117 left: 10px; 118 width: 100%; 119 height: 2px; 120 background-color: #42b983; 121 } 122 #item[line-bottom-right]{ 123 position: relative; 124 width: 100%; 125 } 126 #item[line-bottom-right]::before{ 127 content: ''; 128 position: absolute; 129 bottom: 5px; 130 left: 20px; 131 transform: translateY(50%); 132 width: 6px; 133 height: 6px; 134 overflow: visible; 135 z-index: 999; 136 background-color: #fff; 137 border-radius: 6px; 138 border: 2px solid #42b983; 139 } 140 #item[line-bottom-right]::after{ 141 content: ''; 142 overflow: visible; 143 position: absolute; 144 z-index: 999; 145 bottom: 4px; 146 left: 30px; 147 width: 100%; 148 height: 2px; 149 background-color: #42b983; 150 } 151 :host([missing]) #checkbox{ 152 position: relative; 153 } 154 155 :host([missing]) #checkbox::after{ 156 content: ''; 157 width: calc(100% - 20px); 158 height: calc(100% - 8px); 159 box-sizing: border-box; 160 top: 0; 161 left: 0; 162 margin: 4px; 163 background-color: #3391FF; 164 position: absolute; 165 } 166 167 </style> 168 `;