test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 3.5 kB
CSS
.nut-searchbar{position:relative;display:flex;align-items:center;width:var(--nutui-searchbar-width, 100%);padding:var(--nutui-searchbar-padding, 9px 16px);background:var(--nutui-searchbar-background, var(--nsui-white-color-1, #FFFFFF));color:var(--nutui-gray-1, #595959);box-sizing:border-box;justify-content:center}.nut-searchbar__content{position:relative;flex:1;display:flex;align-items:center;justify-content:center;height:var(--nutui-searchbar-input-height, 32px);background:var(--nutui-searchbar-input-background, var(--nsui-gray-color-2, #F5F5F5));border:var(--nutui-searchbar-input-border, 1px solid transparent);border-radius:var(--nutui-searchbar-content-border-radius, 0px)}.nut-searchbar__icon{display:flex;align-items:center;justify-content:center;padding:var(--nutui-searchbar-icon-padding, 0px 4px 0px 12px);color:var(--nutui-searchbar-icon-color, var(--nsui-gray-color-6, #BFBFBF))}.nut-searchbar__rightin{display:flex;padding:0 4px}.nut-searchbar__input-box{display:flex;align-items:center;flex:1}.nut-searchbar__input{border:0;outline:0;box-sizing:border-box;width:var(--nutui-searchbar-input-width, 100%);height:var(--nutui-searchbar-input-height, 32px);line-height:var(--nutui-searchbar-input-height, 32px);padding:var(--nutui-searchbar-input-padding, 0px 0px);border-radius:0;flex:var(--nutui-searchbar-input-flex, unset);font-size:var(--nutui-searchbar-input-font-size, 14px);color:var(--nutui-searchbar-input-text-color, var(--nsui-gray-color-9, #262626));caret-color:var(--nutui-searchbar-input-curror-color, var(--nsui-brand-color-guide, #2C68FF));background:transparent;text-align:var(--nutui-searchbar-input-text-align, left)}.nut-searchbar__input::placeholder{color:var(--nutui-input-placeholder-color, var(--nsui-gray-color-6, #BFBFBF))}.nut-searchbar__round{border-radius:var(--nutui-searchbar-input-border-radius, 16px)}.nut-searchbar__disabled{cursor:not-allowed}.nut-searchbar__clear{display:flex;align-items:center;justify-content:center;padding:var(--nutui-searchbar-clear-icon-padding, 0 12px 0 4px)}.nut-searchbar__clear i{color:var(--nutui-searchbar-clear-icon-color, var(--nsui-gray-color-7, #8C8C8C))}.nut-searchbar .pos-right{right:40px}.nut-searchbar__left{display:flex;padding:var(--nutui-searchbar-left-padding, 0 12px 0 0);font-size:var(--nutui-searchbar-left-fontsize, 12px);color:var(--nutui-searchbar-left-color, var(--nutui-gray-1, #595959))}.nut-searchbar__right{display:flex;padding:var(--nutui-searchbar-right-padding, 0 0 0 12px);font-size:var(--nutui-searchbar-right-fontsize, 14px);color:var(--nutui-searchbar-right-color, var(--nutui-gray-1, #595959))}.nut-searchbar__association{width:100%;background:var(--nutui-searchbar-association-background, var(--nsui-gray-color-1, #ffffff))}.nut-searchbar__association--item{position:relative;font-size:var(--nutui-searchbar-association-font-size, 14px);line-height:var(--nutui-searchbar-association-line-height, 22px);color:var(--nutui-searchbar-association-color, var(--nsui-gray-color-9, #262626));padding:var(--nutui-searchbar-association-padding, 14px 16px)}.nut-searchbar__association--item-highlight{color:var(--nutui-searchbar-association-highlight-color, var(--nsui-brand-color-guide, #2C68FF))}.nut-searchbar__association--divider{position:absolute;left:16px;right:0;bottom:0;margin:0;width:unset}.nut-searchbar__association.association-fixed{position:absolute;top:var(--nutui-searchbar-association-top, 50px);left:0;z-index:var(--nutui-searchbar-association-z-index, 2)}