@layui/layui-vue
Version:
a component library for Vue 3 base on layui-vue
2 lines (1 loc) • 7.42 kB
CSS
.layui-tab{display:flex;margin:10px 0;text-align:left!important}.layui-tab[overflow]>.layui-tab-head>.layui-tab-title{overflow:hidden}.layui-tab.is-left{flex-direction:row}.layui-tab.is-right{flex-direction:row-reverse;justify-content:space-between}.layui-tab.is-top{flex-direction:column}.layui-tab.is-bottom{flex-direction:column-reverse}.layui-tab-head{display:inline-block;overflow:hidden;position:relative}.layui-tab-head.is-left,.layui-tab-head.is-right{height:100%}.layui-tab-card .layui-tab-head{background-color:var(--global-neutral-color-1)}.layui-tab-title{position:relative;left:0;height:40px;white-space:nowrap;font-size:0;border-bottom:none;transition:all .2s;-webkit-transition:all .2s;z-index:2}.layui-tab-title li{display:inline-block;vertical-align:middle;font-size:14px;transition:all .2s;-webkit-transition:all .2s;position:relative;line-height:40px;min-width:65px;padding:0 15px;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none}.layui-tab-title li a{display:block;padding:0 15px;margin:0 -15px}.layui-tab-head:after{content:"";position:absolute;left:0;bottom:0;width:100%;border-bottom:1px solid var(--global-neutral-color-3);z-index:1}.layui-tab-head.is-left:after,.layui-tab-head.is-right:after{height:100%;border-bottom:none}.layui-tab-head.is-left:after{border-right:1px solid var(--global-neutral-color-3)}.layui-tab-head.is-right:after{border-left:1px solid var(--global-neutral-color-3)}.layui-tab-head.is-top,.layui-tab-head.is-bottom,.layui-tab-title.is-top,.layui-tab-title.is-bottom{width:100%;position:relative}.layui-tab-title.is-right,.layui-tab-title.is-left{height:100%;min-width:60px;border-bottom-width:0px;border-bottom-style:none}.layui-tab-title.is-left li{display:list-item;margin-right:-1px}.layui-tab-title.is-right li{display:list-item;margin-left:-1px}.layui-tab-title.is-right{border-left:1px solid var(--global-neutral-color-3)}.layui-tab-title.is-left{border-right:1px solid var(--global-neutral-color-3)}.layui-tab-title .layui-this{color:#000;background-color:#fff}.layui-tab-head .layui-tab-title .layui-this:after{position:absolute;left:0;top:0;content:"";width:100%;height:100%;border-width:1px;border-style:solid;border-bottom-color:#fff;border-radius:2px 2px 0 0;box-sizing:border-box;pointer-events:none}.layui-tab-title.is-left .layui-this:after{border:1px solid var(--global-neutral-color-3);border-right-color:#fff}.layui-tab-title.is-right .layui-this:after{border:1px solid var(--global-neutral-color-3);border-left-color:#fff}.layui-tab-brief>.layui-tab-head{background-color:transparent}.layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this{color:var(--global-checked-color)}.layui-tab-brief>.layui-tab-head>.layui-tab-more li.layui-this:after,.layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this:after{border:none;border-radius:0}.layui-tab-brief>.layui-tab-head.is-right>.layui-tab-title{border-left:1px solid var(--global-neutral-color-3)}.layui-tab-brief>.layui-tab-head.is-left>.layui-tab-title{border-right:1px solid var(--global-neutral-color-3)}.layui-tab-brief[overflow]>.layui-tab-head>.layui-tab-title .layui-this:after{top:-1px}.layui-tab-brief>.layui-tab-head.is-right>.layui-tab-title li,.layui-tab-brief>.layui-tab-head.is-left>.layui-tab-title li{margin-right:0}.layui-tab-brief>.layui-tab-head.is-top>.layui-tab-title li{margin-top:0;margin-bottom:0}.layui-tab-card{border-width:1px;border-style:solid;border-radius:var(--global-border-radius);box-shadow:0 2px 5px #0000001a}.layui-tab-card .layui-tab-head .layui-tab-title.is-top li:first-child:after,.layui-tab-card .layui-tab-head .layui-tab-title.is-bottom li:first-child:after{border-left:none}.layui-tab-card>.layui-tab-head>.layui-tab-title.is-right,.layui-tab-card>.layui-tab-head>.layui-tab-title.is-left{margin-right:-1px;margin-left:-1px}.layui-tab-card>.layui-tab-head>.layui-tab-title.is-bottom li{margin-top:-1px}.layui-tab-card>.layui-tab-head>.layui-tab-title .layui-this:after{border-radius:0}.layui-tab-card>.layui-tab-head>.layui-tab-title.is-bottom{border-top:1px solid var(--global-neutral-color-3);margin-bottom:-2px;margin-left:-1px}.layui-tab-card>.layui-tab-head>.layui-tab-title.is-left li,.layui-tab-card>.layui-tab-head>.layui-tab-title.is-right li{margin-top:-1px;margin-bottom:-1px}.layui-tab-card>.layui-tab-head>.layui-tab-title.is-top .layui-this:after{border:1px solid var(--global-neutral-color-3);border-bottom-color:#fff;border-top:none}.layui-tab-card>.layui-tab-head>.layui-tab-title.is-bottom .layui-this:after{border:1px solid var(--global-neutral-color-3);border-top-color:#fff;border-bottom:none}.layui-tab-card>.layui-tab-head>.layui-tab-title.is-left .layui-this:after{border:1px solid var(--global-neutral-color-3);border-right-color:#fff}.layui-tab-card>.layui-tab-head>.layui-tab-title.is-right .layui-this:after{border:1px solid var(--global-neutral-color-3);border-left-color:#fff}.layui-tab-card>.layui-tab-head .layui-tab-bar{width:40px;border-radius:0}.layui-tab-card>.layui-tab-head.is-top .layui-tab-bar,.layui-tab-card>.layui-tab-head.is-bottom .layui-tab-bar{border-right:none}.layui-tab-card>.layui-tab-head.is-top .layui-tab-bar{border-top:none}.layui-tab-card .layui-tab-head.is-left .prev,.layui-tab-card .layui-tab-head.is-right .prev{border-top:none}.layui-tab-card>.layui-tab-more .layui-this{background:0 0;color:var(--global-checked-color)}.layui-tab-card>.layui-tab-more .layui-this:after{border:none}.layui-tab-bar{display:flex;align-items:center;justify-content:center;position:absolute;right:0;top:0;z-index:10;width:30px;height:40px;border-width:1px;border-style:solid;border-radius:2px 2px 0 0;background-color:#fff;cursor:pointer;border-bottom-color:#fff}.layui-tab-bar.prev{left:0;border-right:1px solid var(--global-neutral-color-3)}.layui-tab-card .layui-tab-bar{border-left:none}.layui-tab-bar .layui-icon{font-size:13.6px;transition:all .3s;-webkit-transition:all .3s}.layui-tab-head.is-left .layui-tab-bar,.layui-tab-head.is-right .layui-tab-bar{width:100%;bottom:0;top:unset}.layui-tab-head.is-left .layui-tab-bar.prev,.layui-tab-head.is-right .layui-tab-bar.prev{top:0}.layui-tab-item{display:none}.layui-tab-more{padding-right:30px;height:auto;white-space:normal}.layui-tab-more li.layui-this:after{border-bottom-color:var(--global-neutral-color-3);border-radius:2px}.layui-tab-more .layui-tab-bar .layui-icon{top:-2px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.layui-tab-title li .layui-tab-close{position:relative;display:inline-block;width:18px;height:18px;line-height:20px;margin-left:8px;top:1px;text-align:center;font-size:14px;color:var(--global-neutral-color-8);transition:all .2s;-webkit-transition:all .2s}.layui-tab-title li .layui-tab-close:hover{border-radius:2px;background-color:#ff5722;color:#fff}.layui-tab-content{padding:15px 0;flex:1}.layui-tab.is-right>.layui-tab-content,.layui-tab.is-left>.layui-tab-content{height:100%;padding:0 10px;display:inline-block;vertical-align:top}.layui-tab-active-bar{position:absolute;bottom:0;left:0;height:1.5px;background-color:var(--global-checked-color);z-index:2;list-style:none;box-sizing:border-box;pointer-events:none}.is-top .layui-tab-active-bar{bottom:0;height:1.5px}.is-left .layui-tab-active-bar{left:auto;right:-1px;top:0;bottom:auto;width:1.5px}.is-right .layui-tab-active-bar{left:-1px;right:auto;top:0;bottom:auto;width:1.5px}