meri-design/dist/theme/Tabs.css

基于vue框架的ui库

/*!
 * @meri-design v2.2.19-beta10
 * (c) 2019-2022 YuShu-Web
 * Released under the MIT License.
 * 2025-01-14 15:25:40
 */.p-tabs-slider-nav{display:flex}.p-tabs-nav-container .p-tabs-nav-wrap{position:relative}.p-tabs-nav-container .p-tabs-nav-level{border-bottom:1px solid #e8ecf0}.p-tabs-nav-container .p-tabs-nav-level-none{border:0}.p-tabs-nav-container .p-tabs-navbar{background:#246fe5;bottom:0;height:2px;position:absolute;transition:left .3s ease-in-out}.p-tabs-nav-container .p-tabs-slider-navbar{background:#fff;border-radius:4px;bottom:2px;box-shadow:0 2px 10px rgba(27,33,41,.1);height:calc(100% - 4px);transition:left .3s ease-in-out;z-index:10}.p-tabs-nav-container .p-tabs-nav-item{color:#1b2129;cursor:pointer;display:inline-block;font-size:16px;height:100%;line-height:24px;margin-right:16px;padding:12px 16px;text-align:center;transition:color .3s}.p-tabs-nav-container .p-tabs-card-nav-item{background:#fff;border:1px solid #c4c9cf;border-right:none;box-sizing:border-box;color:#1b2129;font-size:14px;height:32px;line-height:21px;margin-right:0;min-width:30px;overflow:hidden;padding:5px 16px;text-align:center;white-space:nowrap}.p-tabs-nav-container .p-tabs-card-nav-item:hover{color:#246fe5}.p-tabs-nav-container div.p-tabs-card-nav-item:nth-child(3){border-bottom-left-radius:4px;border-top-left-radius:4px}.p-tabs-nav-container div.p-tabs-card-nav-item:last-child{border-bottom-right-radius:4px;border-right:1px solid #c4c9cf;border-top-right-radius:4px}.p-tabs-nav-container .p-tabs-line-item-active{color:#246fe5}.p-tabs-nav-container .p-tabs-line-item-disabled{color:#c4c9cf;cursor:not-allowed}.p-tabs-nav-container .p-tabs-card-item-active{background:#d9ebff;border:1px solid #246fe5!important;border-right:1px solid #246fe5;color:#246fe5}.p-tabs-nav-container .p-tabs-card-item-disabled{background:#e8ecf0;color:#c4c9cf;cursor:not-allowed}.p-tabs-nav-container .p-tabs-card-item-disabled:hover{color:#c4c9cf}.p-tabs-nav-container .p-tabs-card-item-active+div{border-left:none}.p-tabs-nav-container .p-tabs-slider-nav-wrap{background:#e8ecf0;border-radius:4px;display:flex;gap:2px;padding:2px}.p-tabs-nav-container .p-tabs-slider-nav-item{align-items:center;border-radius:4px;box-sizing:border-box;color:#1b2129;display:inline-flex;font-size:14px;height:28px;justify-content:center;line-height:22px;margin-right:0;min-width:76px;overflow:hidden;padding:0 16px;text-align:center;white-space:nowrap;z-index:20}.p-tabs-nav-container .p-tabs-slider-nav-item:hover{background:#fff}.p-tabs-nav-container .p-tabs-slider-nav-item.large{font-size:16px;height:38px;line-height:24px;min-width:102px}.p-tabs-nav-container .p-tabs-slider-nav-item.small{font-size:14px;height:24px;line-height:22px;min-width:72px}.p-tabs-nav-container .p-tabs-slider-item-active{color:#246fe5;font-weight:bolder}.p-tabs-nav-container .p-tabs-slider-item-disabled{color:#c4c9cf;cursor:not-allowed}.p-tabs-nav-container .p-tabs-slider-item-disabled:hover{background:none}.p-tabs-nav-container .p-tabs-slider-item-active+div{border-left:none}.p-tabs.dark .p-tabs-slider-navbar{background:#246fe5}.p-tabs.dark .p-tabs-slider-nav-item:hover{background:#246fe5;color:#fff}.p-tabs.dark .p-tabs-slider-item-active{color:#fff}.p-tabs.dark .p-tabs-slider-item-disabled{color:#c4c9cf;cursor:not-allowed}.p-tabs.dark .p-tabs-slider-item-disabled:hover{background:none;color:#c4c9cf}