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 16let listHeight = ''; 17let css = ` 18<style> 19 :host{ 20 display: inline-flex; 21 position: relative; 22 overflow: visible; 23 cursor: pointer; 24 border-radius: 2px; 25 outline: none; 26 -webkit-user-select:none ; 27 -moz-user-select:none; 28 user-select:none; 29 } 30 :host(:not([border])), 31 :host([border='true']){ 32 border: 1px solid var(--bark-prompt,#dcdcdc); 33 } 34 input{ 35 border: 0; 36 outline: none; 37 background-color: transparent; 38 cursor: pointer; 39 -webkit-user-select:none ; 40 -moz-user-select:none; 41 user-select:none; 42 display: inline-flex; 43 color: var(--dark-color2,rgba(0,0,0,0.9)); 44 } 45 :host([highlight]) input { 46 color: rgba(255,255,255,0.9); 47 } 48 :host([mode]) input{ 49 padding: 6px 0px; 50 } 51 :host([mode]) .root{ 52 padding: 1px 8px; 53 } 54 .root{ 55 position: relative; 56 padding: 3px 6px; 57 display: flex; 58 align-items: center; 59 justify-content: space-between; 60 border-radius: 2px; 61 outline: none; 62 font-size: 1rem; 63 z-index: 2; 64 -webkit-user-select:none ; 65 -moz-user-select:none; 66 user-select:none; 67 width: 100%; 68 } 69 .body{ 70 position: absolute; 71 bottom: 100%; 72 z-index: 99; 73 padding-top: 5px; 74 margin-top: 2px; 75 background-color: var(--dark-background4,#fff); 76 width: 100%; 77 transform: scaleY(.6); 78 visibility: hidden; 79 opacity: 0; 80 transform-origin: bottom center; 81 display: block; 82 flex-direction: column; 83 } 84 .body-bottom{ 85 bottom: auto; 86 top: 100%; 87 transform-origin: top center; 88 } 89 :host([placement="bottom"]) .body{ 90 bottom:unset; 91 top: 100%; 92 transition: none; 93 transform: none; 94 } 95 96 :host([rounded]) .body { 97 border-radius: 16px; 98 } 99 :host([rounded]) .root { 100 border-radius: 16px; 101 height: 25px; 102 } 103 .icon{ 104 pointer-events: none; 105 } 106 .noSelect{ 107 -moz-user-select:none; 108 -ms-user-select:none; 109 user-select:none; 110 -khtml-user-select:none; 111 -webkit-touch-callout:none; 112 -webkit-user-select:none; 113 } 114 115 :host(:not([border]):not([disabled]):focus), 116 :host([border='true']:not([disabled]):focus), 117 :host(:not([border]):not([disabled]):hover), 118 :host([border='true']:not([disabled]):hover){ 119 border:1px solid var(--bark-prompt,#ccc) 120 } 121 :host(:not([disabled]):focus) .body, 122 :host(:not([disabled]):focus-within) .body{ 123 transform: scaleY(1); 124 opacity: 1; 125 z-index: 99; 126 visibility: visible; 127 } 128 :host(:not([disabled]):focus) input{ 129 color: var(--dark-color,#bebebe); 130 } 131 :host(:not([border])[disabled]) *, 132 :host([border='true'][disabled]) *{ 133 background-color: var(--dark-background1,#f5f5f5); 134 color: #b7b7b7; 135 cursor: not-allowed; 136 } 137 :host([border='false'][disabled]) *{ 138 color: #b7b7b7; 139 cursor: not-allowed; 140 } 141 :host(:not([mode])) input{ 142 width: 100%; 143 } 144 .body{ 145 max-height: ${listHeight}; 146 overflow: auto; 147 border-radius: 2px; 148 box-shadow: 0 5px 15px 0px #00000033; 149 } 150 .multipleRoot input::-webkit-input-placeholder { 151 color: var(--dark-color,#aab2bd); 152 } 153 :host(:not([loading])) .loading{ 154 display: none; 155 } 156 :host([loading]) .loading{ 157 display: flex; 158 } 159 :host(:not([allow-clear])) .clear{ 160 display: none; 161 } 162 :host([loading]) .icon{ 163 display: none; 164 } 165 :host(:not([loading])) .icon{ 166 display: flex; 167 } 168 .clear:hover{ 169 color: #8c8c8c; 170 } 171 .clear{ 172 color: #bfbfbf; 173 display: none; 174 } 175 .multipleRoot{ 176 display: flex; 177 align-items: center; 178 flex-flow: wrap; 179 flex-wrap: wrap; 180 flex-direction: column; 181 } 182 .search{ 183 color: #bfbfbf; 184 display: none; 185 } 186 .tag{ 187 overflow: auto; 188 height: auto; 189 display: inline-flex; 190 position: relative; 191 align-items: center; 192 font-size: .75rem; 193 font-weight: bold; 194 padding: 1px 4px; 195 margin-right: 4px; 196 margin-top: 1px; 197 margin-bottom: 1px; 198 color: #242424; 199 background-color: #f5f5f5; 200 } 201 .tag-close:hover{ 202 color: #333; 203 } 204 .tag-close{ 205 padding: 2px; 206 font-size: .8rem; 207 color: #999999; 208 margin-left: 0px; 209 } 210 </style> 211`; 212 213export const selectHtmlStr = (height: string): string => { 214 listHeight = height; 215 return css; 216}; 217 218export const selectVHtmlStr = ` 219 <style> 220 :host{ 221 display: inline-flex; 222 position: relative; 223 overflow: visible; 224 cursor: pointer; 225 border-radius: 2px; 226 outline: none; 227 -webkit-user-select:none ; 228 -moz-user-select:none; 229 user-select:none; 230 } 231 :host(:not([border])), 232 :host([border='true']){ 233 border: 1px solid var(--bark-prompt,#dcdcdc); 234 } 235 input{ 236 border: 0; 237 outline: none; 238 background-color: transparent; 239 cursor: pointer; 240 -webkit-user-select:none ; 241 -moz-user-select:none; 242 user-select:none; 243 display: inline-flex; 244 color: var(--dark-color2,rgba(0,0,0,0.9)); 245 } 246 :host([highlight]) input { 247 color: rgba(255,255,255,0.9); 248 } 249 :host([mode]) input{ 250 padding: 6px 0px; 251 } 252 :host([mode]) .root{ 253 padding: 1px 8px; 254 } 255 .root{ 256 position: relative; 257 padding: 3px 6px; 258 display: flex; 259 align-items: center; 260 justify-content: space-between; 261 border-radius: 2px; 262 outline: none; 263 font-size: 1rem; 264 z-index: 2; 265 -webkit-user-select:none ; 266 -moz-user-select:none; 267 user-select:none; 268 width: 100%; 269 } 270 .body{ 271 position: absolute; 272 bottom: 100%; 273 z-index: 99; 274 padding-top: 5px; 275 margin-top: 2px; 276 background-color: var(--dark-background4,#fff); 277 width: 100%; 278 transform: scaleY(.6); 279 visibility: hidden; 280 opacity: 0; 281 transform-origin: bottom center; 282 display: block; 283 flex-direction: column; 284 } 285 .body-bottom{ 286 bottom: auto; 287 top: 100%; 288 transform-origin: top center; 289 } 290 :host([placement="bottom"]) .body{ 291 bottom:unset; 292 top: 100%; 293 transition: none; 294 transform: none; 295 } 296 297 :host([rounded]) .body { 298 border-radius: 16px; 299 } 300 :host([rounded]) .root { 301 border-radius: 16px; 302 height: 25px; 303 } 304 .icon{ 305 pointer-events: none; 306 } 307 .noSelect{ 308 -moz-user-select:none; 309 -ms-user-select:none; 310 user-select:none; 311 -khtml-user-select:none; 312 -webkit-touch-callout:none; 313 -webkit-user-select:none; 314 } 315 316 :host(:not([border]):not([disabled]):focus), 317 :host([border='true']:not([disabled]):focus), 318 :host(:not([border]):not([disabled]):hover), 319 :host([border='true']:not([disabled]):hover){ 320 border:1px solid var(--bark-prompt,#ccc) 321 } 322 :host(:not([disabled]):focus) .body, 323 :host(:not([disabled]):focus-within) .body{ 324 transform: scaleY(1); 325 opacity: 1; 326 z-index: 99; 327 visibility: visible; 328 } 329 :host(:not([disabled]):focus) input{ 330 color: var(--dark-color,#bebebe); 331 } 332 :host(:not([border])[disabled]) *, 333 :host([border='true'][disabled]) *{ 334 background-color: var(--dark-background1,#f5f5f5); 335 color: #b7b7b7; 336 cursor: not-allowed; 337 } 338 :host([border='false'][disabled]) *{ 339 color: #b7b7b7; 340 cursor: not-allowed; 341 } 342 .body{ 343 max-height: 286px; 344 box-shadow: 0 5px 15px 0px #00000033; 345 border-radius: 10px; 346 } 347 input{ 348 width: 100%; 349 } 350 #search-input { 351 outline: none; 352 border: none; 353 } 354 .body-select { 355 margin-top: 3px; 356 background-color: var(--dark-background4,#fff); 357 width: 100%; 358 border-bottom: none; 359 } 360 .body-opt{ 361 width: 100%; 362 max-height: 256px; 363 border-top: none; 364 overflow: auto; 365 border-bottom-left-radius: 10px; 366 border-bottom-right-radius: 10px; 367 background-color: var(--dark-background4,#fff); 368 } 369 .loading{ 370 display: none; 371 } 372 input::-webkit-input-placeholder { 373 color: var(--dark-color,#aab2bd); 374 } 375 #search-input{ 376 margin-left: 15px; 377 } 378 .icon{ 379 display: flex; 380 } 381 /*Define the height, width and background of the scroll bar*/ 382 ::-webkit-scrollbar 383 { 384 width: 8px; 385 border-radius: 10px; 386 background-color: var(--dark-background3,#FFFFFF); 387 } 388 389 /*define slider*/ 390 ::-webkit-scrollbar-thumb 391 { 392 border-radius: 6px; 393 background-color: var(--dark-background7,rgba(0,0,0,0.1)); 394 } 395 396 </style> 397 `; 398