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([arrow])  #checkbox{
37            display: none;
38         }
39         
40         :host([top-depth])  #item{
41            margin-left: 0;
42         }
43         
44         #title{
45            padding: 4px 6px;
46         }
47         
48         #arrow{
49            width: 0;
50            height: 0;
51            border-top: 8px solid #262626;
52            border-bottom: 0px solid transparent;
53            border-left: 5px solid transparent;
54            border-right: 5px solid transparent;
55            transition: all .3s ;
56            transform: translateX(-50%) rotateZ(0deg);
57            margin-left: 5px;
58         }
59            
60         #icon{
61            display: none;
62            margin-left: 5px;
63         }
64      
65         /*画拖动辅助线*/
66         #item[line-top]{
67            position: relative;
68            width: 100%;
69         }
70         
71         #item[line-top]::before{
72            content: '';
73            position: absolute;
74            top: 5px;
75            left: 0;
76            transform: translateY(-50%);
77            width: 6px;
78            height: 6px;
79            overflow: visible;
80            z-index: 999;
81            background-color: #fff;
82            border-radius: 6px;
83            border: 2px solid #42b983;
84         }
85         #item[line-top]::after{
86            content: '';
87            overflow: visible;
88            position: absolute;
89            z-index: 999;
90            top: 4px;
91            left: 10px;
92            width: 100%;
93            height: 2px;
94            background-color: #42b983;
95         }
96         
97         #item[line-bottom]{
98            position: relative;
99            width: 100%;
100         }
101         #item[line-bottom]::before{
102            content: '';
103            position: absolute;
104            bottom: 5px;
105            left: 0;
106            transform: translateY(50%);
107            width: 6px;
108            height: 6px;
109            overflow: visible;
110            z-index: 999;
111            background-color: #fff;
112            border-radius: 6px;
113            border: 2px solid #42b983;
114         }
115         #item[line-bottom]::after{
116            content: '';
117            overflow: visible;
118            position: absolute;
119            z-index: 999;
120            bottom: 4px;
121            left: 10px;
122            width: 100%;
123            height: 2px;
124            background-color: #42b983;
125         }
126         #item[line-bottom-right]{
127            position: relative;
128            width: 100%;
129         }
130         #item[line-bottom-right]::before{
131            content: '';
132            position: absolute;
133            bottom: 5px;
134            left: 20px;
135            transform: translateY(50%);
136            width: 6px;
137            height: 6px;
138            overflow: visible;
139            z-index: 999;
140            background-color: #fff;
141            border-radius: 6px;
142            border: 2px solid #42b983;
143         }
144         #item[line-bottom-right]::after{
145            content: '';
146            overflow: visible;
147            position: absolute;
148            z-index: 999;
149            bottom: 4px;
150            left: 30px;
151            width: 100%;
152            height: 2px;
153            background-color: #42b983;
154         }
155         :host([missing]) #checkbox{
156            position: relative;
157         }
158       
159         :host([missing]) #checkbox::after{
160            content: '';
161            width: calc(100% - 20px);
162            height: calc(100% - 8px);
163            box-sizing: border-box;
164            top: 0;
165            left: 0;
166            margin: 4px;
167            background-color: #3391FF;
168            position: absolute;
169         }
170         
171        </style>
172        `;
173