yu.css.ui/dist/component/tabs.css

纯CSS通用UI模块和组件

.yu-tabs{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#606266;display:flex;flex-direction:column}.yu-tabs ul{padding-inline-start:0;padding:0;font-size:0;width:100%;border-bottom:1px solid #e4e7ed;box-sizing:border-box;margin:0;position:relative}.yu-tabs ul>li{list-style:none}.yu-tabs ul .line{display:block;height:2px;width:84px;background-color:#409eff;position:absolute;transition:all .4s ease;bottom:0;margin:0}.yu-tabs ul li{font-size:14px;border-bottom:2px solid #fff;transition:background-color .4s,color .4s;display:inline-block;height:40px;line-height:40px;padding:0 14px;text-align:center;cursor:pointer}.yu-tabs ul li.active{color:#409eff;border-color:#409eff;border-bottom:none}.yu-tabs ul li.active i.icon-close{font-size:14px;color:#73b8ff}.yu-tabs ul li.active i.icon-close:hover{color:#409eff}.yu-tabs.card ul{height:40px;border-left:none;border-right:none}.yu-tabs.card ul li{background-color:#fff;border-right:1px solid #e4e7ed;border-top:1px solid #e4e7ed;border-bottom:1px solid #e4e7ed}.yu-tabs.card ul li:first-child{border-left:1px solid #e4e7ed;border-top-left-radius:4px}.yu-tabs.card ul li:last-child{border-top-right-radius:4px}.yu-tabs.card ul li.active{border-bottom:1px solid #fff;color:#409eff}.yu-tabs.card ul .line{display:none}.yu-tabs.border-card ul{height:40px;background-color:#edeeee;border:1px solid #e4e7ed}.yu-tabs.border-card ul li{display:inline-block;box-sizing:border-box;border-bottom:none}.yu-tabs.border-card ul .line{display:none}.yu-tabs.border-card ul li.active{background-color:#fff;border-bottom:2px solid #fff;border-left:1px solid #e4e7ed;border-right:1px solid #e4e7ed;color:#409eff}.yu-tabs.border-card ul li.active:first-child{border-left:none}.yu-tabs.default.bottom{display:flex;flex-direction:column-reverse}.yu-tabs.default.bottom ul{margin:0;position:relative;border-top:1px solid #e4e7ed;border-bottom:none}.yu-tabs.default.bottom ul .line{display:block;height:2px;width:84px;background-color:#409eff;position:absolute;transition:all .4s ease;left:0;top:0;margin:0}.yu-tabs.default.bottom ul li{border-top:2px solid #fff}.yu-tabs.default.bottom ul li.active{border-bottom:none}.yu-tabs.default.left{display:flex}.yu-tabs.default.left ul{max-width:150px;border:none;text-align:center;position:relative}.yu-tabs.default.left ul .line{display:block;height:40px;width:2px;background-color:#409eff;position:absolute;transition:all .4s ease;left:0;top:0;margin:0}.yu-tabs.default.left ul li{display:block;border-bottom:none;border-right:2px solid #ebeef5}.yu-tabs.default.left ul li.active{color:#409eff}.yu-tabs.default.right{display:flex;flex-direction:row-reverse}.yu-tabs.default.right ul{max-width:150px;border:none;text-align:center;position:relative}.yu-tabs.default.right ul .line{display:block;height:40px;width:2px;background-color:#409eff;position:absolute;transition:all .4s ease;left:0;top:0;margin:0}.yu-tabs.default.right ul li{display:block;border-bottom:none;border-left:2px solid #ebeef5}.yu-tabs.default.right ul li.active{color:#409eff}