song-ui-u/theme/tabs.css

vue3 + js的PC前端组件库

@charset "UTF-8";.x-tabs{width:100%;display:flex}.x-tabs--position-body_top{flex-direction:column}.x-tabs--position-body_bottom{flex-direction:column-reverse}.x-tabs--position-body_left{flex-direction:row}.x-tabs--position-body_right{flex-direction:row-reverse}.x-tabs__header{display:flex;border-bottom:1px solid var(--x-border-color-default);margin-bottom:15px}.x-tabs--position-header_top>div.is-active{border-bottom:2px solid var(--x-color-primary)}.x-tabs--position-header_bottom{margin-bottom:0}.x-tabs--position-header_bottom>div.is-active{border-bottom:2px solid var(--x-color-primary)}.x-tabs--position-header_left{flex-direction:column;border-bottom:none;border-right:1px solid var(--x-border-color-default);margin-right:15px;margin-bottom:0}.x-tabs--position-header_left>div.is-active{border-right:2px solid var(--x-color-primary)}.x-tabs--position-header_right{flex-direction:column-reverse;border-bottom:none;border-left:1px solid var(--x-border-color-default);margin-left:15px;margin-bottom:0}.x-tabs--position-header_right>div.is-active{border-left:2px solid var(--x-color-primary)}.x-tabs__header>div{display:flex;gap:8px;align-items:center;justify-content:center;padding:8px 20px;block-size:border-box;cursor:pointer;position:relative;color:var(--x-text-color-primary);font-weight:400}.x-tabs--type_card{padding:8px 20px;border:1px solid var(--x-border-color-default)}.x-tabs__header>div:hover{color:var(--x-color-primary);font-weight:500}.x-tabs__header>div.is-active{color:var(--x-color-primary);font-weight:600;transition:all .1s cubic-bezier(.645,.045,.355,1);border-color:var(--x-color-primary)}.x-tabs__content{padding:8px 0}