fine-true/lib/tabs/index.css

A small and beautiful Vue3 version of the UI Library

.fine-tabs{text-align:center}.fine-tabs-nav-container{position:relative}.fine-tabs-nav-container .fine-tabs-tab-next,.fine-tabs-nav-container .fine-tabs-tab-prev{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;background-color:#fff}.fine-tabs-nav-container .fine-tabs-tab-next:active,.fine-tabs-nav-container .fine-tabs-tab-prev:active{background-color:#f0f0f0}.fine-tabs-tab-position-top{padding-left:32px;padding-right:32px;border-bottom:1px solid #f0f0f0;margin-bottom:15px}.fine-tabs-tab-position-top .fine-tabs-tab{margin:0 32px 0 0;padding:12px 16px;display:inline-block}.fine-tabs-tab-position-top .fine-tabs-nav-mark{position:absolute;bottom:0;left:0;height:2px}.fine-tabs-tab-position-bottom{padding-left:32px;padding-right:32px;border-top:1px solid #f0f0f0;margin-top:15px}.fine-tabs-tab-position-bottom .fine-tabs-tab{margin:0 32px 0 0;padding:12px 16px;display:inline-block}.fine-tabs-tab-position-bottom .fine-tabs-nav-mark{position:absolute;top:0;left:0;height:2px}.fine-tabs-tab-position-bottom .fine-tabs-tab-next,.fine-tabs-tab-position-bottom .fine-tabs-tab-prev,.fine-tabs-tab-position-top .fine-tabs-tab-next,.fine-tabs-tab-position-top .fine-tabs-tab-prev{height:100%;width:32px}.fine-tabs-tab-position-bottom .fine-tabs-tab-prev,.fine-tabs-tab-position-top .fine-tabs-tab-prev{top:0;left:0}.fine-tabs-tab-position-bottom .fine-tabs-tab-next,.fine-tabs-tab-position-top .fine-tabs-tab-next{top:0;right:0}.fine-tabs-tab-position-left,.fine-tabs-tab-position-right{height:100%;padding-top:32px;padding-bottom:32px;overflow:hidden}.fine-tabs-tab-position-left{border-right:1px solid #f0f0f0;margin-right:15px;float:left}.fine-tabs-tab-position-left .fine-tabs-tab{display:block;margin:0 0 16px;padding:8px 24px}.fine-tabs-tab-position-left .fine-tabs-nav-mark{position:absolute;top:0;right:0;width:2px}.fine-tabs-tab-position-right{border-left:1px solid #f0f0f0;margin-left:15px;float:right}.fine-tabs-tab-position-right .fine-tabs-tab{display:block;margin:0 0 16px;padding:8px 24px}.fine-tabs-tab-position-right .fine-tabs-nav-mark{position:absolute;top:0;left:0;width:2px}.fine-tabs-tab-position-left .fine-tabs-nav-warp,.fine-tabs-tab-position-right .fine-tabs-nav-warp{height:100%}.fine-tabs-tab-position-left .fine-tabs-tab-next,.fine-tabs-tab-position-left .fine-tabs-tab-prev,.fine-tabs-tab-position-right .fine-tabs-tab-next,.fine-tabs-tab-position-right .fine-tabs-tab-prev{width:100%;height:32px}.fine-tabs-tab-position-left .fine-tabs-tab-prev,.fine-tabs-tab-position-right .fine-tabs-tab-prev{top:0;left:0}.fine-tabs-tab-position-left .fine-tabs-tab-next,.fine-tabs-tab-position-right .fine-tabs-tab-next{bottom:0;left:0}.fine-tabs-nav-warp{overflow:hidden}.fine-tabs-nav{position:relative;white-space:nowrap;display:inline-block;transition:transform .25s}.fine-tabs-nav .fine-tabs-tab{position:relative;box-sizing:border-box;height:100%;text-decoration:none;cursor:pointer;transition:color .3s cubic-bezier(.645,.045,.355,1)}.fine-tabs-nav .fine-tabs-tab:hover{color:#1890ff}.fine-tabs-nav .fine-tabs-tab:last-child{margin:0}.fine-tabs-nav .fine-tabs-tab-actived{color:#1890ff;text-shadow:0 0 .25px currentColor}.fine-tabs-nav .fine-tabs-nav-mark{z-index:1;box-sizing:border-box;background-color:#1890ff;transform-origin:0 0;transition:transform .25s}.fine-tabs-slot-container{overflow:hidden}