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 function selectHtmlStr(): string { 17 return ` 18 :host{ 19 display: inline-flex; 20 position: relative; 21 overflow: visible; 22 cursor: pointer; 23 border-radius: 2px; 24 outline: none; 25 -webkit-user-select:none ; 26 -moz-user-select:none; 27 user-select:none; 28 } 29 :host(:not([border])), 30 :host([border='true']){ 31 border: 1px solid var(--bark-prompt,#dcdcdc); 32 } 33 input{ 34 border: 0; 35 outline: none; 36 background-color: transparent; 37 cursor: pointer; 38 -webkit-user-select:none ; 39 -moz-user-select:none; 40 user-select:none; 41 display: inline-flex; 42 color: var(--dark-color2,rgba(0,0,0,0.9)); 43 } 44 :host([highlight]) input { 45 color: rgba(255,255,255,0.9); 46 } 47 :host([mode]) input{ 48 padding: 6px 0px; 49 } 50 :host([mode]) .root{ 51 padding: 1px 8px; 52 } 53 .root{ 54 position: relative; 55 padding: 3px 6px; 56 display: flex; 57 align-items: center; 58 justify-content: space-between; 59 border-radius: 2px; 60 outline: none; 61 font-size: 1rem; 62 z-index: 2; 63 -webkit-user-select:none ; 64 -moz-user-select:none; 65 user-select:none; 66 width: 100%; 67 } 68 .body{ 69 position: absolute; 70 bottom: 100%; 71 z-index: 99; 72 padding-top: 5px; 73 margin-top: 2px; 74 background-color: var(--dark-background4,#fff); 75 width: 100%; 76 transform: scaleY(.6); 77 visibility: hidden; 78 opacity: 0; 79 transform-origin: bottom center; 80 display: block; 81 flex-direction: column; 82 } 83 .body-bottom{ 84 bottom: auto; 85 top: 100%; 86 transform-origin: top center; 87 } 88 :host([placement="bottom"]) .body{ 89 bottom:unset; 90 top: 100%; 91 transition: none; 92 transform: none; 93 } 94 95 :host([rounded]) .body { 96 border-radius: 16px; 97 } 98 :host([rounded]) .root { 99 border-radius: 16px; 100 height: 25px; 101 } 102 .icon{ 103 pointer-events: none; 104 } 105 .noSelect{ 106 -moz-user-select:none; 107 -ms-user-select:none; 108 user-select:none; 109 -khtml-user-select:none; 110 -webkit-touch-callout:none; 111 -webkit-user-select:none; 112 } 113 114 :host(:not([border]):not([disabled]):focus), 115 :host([border='true']:not([disabled]):focus), 116 :host(:not([border]):not([disabled]):hover), 117 :host([border='true']:not([disabled]):hover){ 118 border:1px solid var(--bark-prompt,#ccc) 119 } 120 :host(:not([disabled]):focus) .body, 121 :host(:not([disabled]):focus-within) .body{ 122 transform: scaleY(1); 123 opacity: 1; 124 z-index: 99; 125 visibility: visible; 126 } 127 :host(:not([disabled]):focus) input{ 128 color: var(--dark-color,#bebebe); 129 } 130 :host(:not([border])[disabled]) *, 131 :host([border='true'][disabled]) *{ 132 background-color: var(--dark-background1,#f5f5f5); 133 color: #b7b7b7; 134 cursor: not-allowed; 135 } 136 :host([border='false'][disabled]) *{ 137 color: #b7b7b7; 138 cursor: not-allowed; 139 }`; 140} 141