bk-vue-cec
Version:
一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作
1 lines • 7.89 kB
Source Map (JSON)
{"version":3,"sources":["search-select.css"],"names":[],"mappings":"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","file":"search-select.min.css","sourcesContent":["@import \"./variable.css\";\r\n\r\n.search-select-wrap {\r\n position: relative;\r\n overflow: inherit;\r\n z-index: 9;\r\n height: 32px;\r\n .bk-search-select {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n font-size: 12px;\r\n min-height: 30px;\r\n box-sizing: border-box;\r\n position: relative;\r\n border: 1px solid #c4c6cc;\r\n border-radius: 2px;\r\n outline: none;\r\n resize: none;\r\n transition: border 0.2s linear;\r\n overflow: hidden;\r\n color: #63656e;\r\n flex-wrap: wrap;\r\n &.is-focus {\r\n border-color: #3c96ff !important;\r\n background: #fff !important;\r\n color: #3c96ff;\r\n overflow: auto;\r\n }\r\n .search-prefix {\r\n flex: 0 0 auto;\r\n display: flex;\r\n align-items: center;\r\n height: 100%;\r\n }\r\n .search-input {\r\n flex: 1;\r\n position: relative;\r\n padding: 0 2px;\r\n text-align: left;\r\n overflow: visible;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n min-height: 26px;\r\n margin-top: 4px;\r\n transition: max-height .3s cubic-bezier(0.4, 0, 0.2, 1);\r\n &-chip {\r\n flex: 0 0 auto;\r\n max-width: 99%;\r\n display: inline-block;\r\n align-self: center;\r\n color: #63656e;\r\n margin: 0 0 4px 6px;\r\n padding-left: 8px;\r\n position: relative;\r\n background: #f0f1f5;\r\n border-radius: 2px;\r\n line-height: 22px;\r\n &.hidden-chip {\r\n visibility: hidden\r\n }\r\n &:hover {\r\n background: #dcdee5;\r\n .chip-clear {\r\n color: #63656e;\r\n }\r\n }\r\n .chip-name {\r\n display: inline-block;\r\n margin-right: 20px;\r\n word-break: break-all;\r\n }\r\n .chip-clear {\r\n color: #979ba5;\r\n position: absolute;\r\n right: 3px;\r\n line-height: normal;\r\n display: inline-block;\r\n top: 4px;\r\n text-align: center;\r\n cursor: pointer;\r\n font-size: $iconSmallestSize;\r\n }\r\n }\r\n &-input {\r\n position: relative;\r\n padding: 0 10px;\r\n color: #63656e;\r\n flex: 1 1 auto;\r\n border: none;\r\n height: 100%;\r\n min-width: 40px;\r\n display: flex;\r\n align-items: center;\r\n margin-top: -4px;\r\n .div-input {\r\n flex: 1 1 auto;\r\n line-height: 20px;\r\n padding: 5px 0;\r\n height: 30px;\r\n word-break: break-all;\r\n &:focus {\r\n outline: none;\r\n }\r\n }\r\n .input-before {\r\n &:before {\r\n content: attr(data-placeholder);\r\n color: #c4c6cc;\r\n padding-left: 2px;\r\n }\r\n }\r\n .input-after {\r\n &:after {\r\n content: attr(data-tips);\r\n color: #c4c6cc;\r\n padding-left: 2px;\r\n }\r\n }\r\n }\r\n }\r\n .search-nextfix {\r\n @extend .search-prefix;\r\n color: #c4c6cc;\r\n display: flex;\r\n align-items: center;\r\n .search-clear {\r\n color: #c4c6cc;\r\n font-size: $iconSmallestSize;\r\n width: 12px;\r\n height: 12px;\r\n margin-right: 6px;\r\n &:hover {\r\n cursor: pointer;\r\n color: #979ba5;\r\n }\r\n }\r\n .search-nextfix-icon {\r\n margin-right: 8px;\r\n font-size: 16px;\r\n transition: color 0.2s linear;\r\n &.is-focus {\r\n border-color: #3c96ff !important;\r\n background: #fff !important;\r\n color: #3c96ff;\r\n }\r\n }\r\n }\r\n &::-webkit-scrollbar {\r\n width: 3px;\r\n height: 5px;\r\n }\r\n &::-webkit-scrollbar-thumb {\r\n border-radius: 20px;\r\n background: #e6e9ea;\r\n box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);\r\n }\r\n }\r\n .bk-select-tips {\r\n color: #EA3636;\r\n font-size: 12px;\r\n margin-top: 5px;\r\n display: flex;\r\n align-items: center;\r\n line-height: 16px;\r\n .select-tips {\r\n font-size: 16px;\r\n margin-right: 5px;\r\n width: 16px;\r\n height: 16px;\r\n }\r\n }\r\n}\r\n"]}