meri-design-dev
Version:
基于vue框架的ui库
90 lines (73 loc) • 2.01 kB
text/stylus
/*!
* @meri-design-dev v0.0.13
* (c) 2019-2020 wangyongcun
* Released under the MIT License.
* 2024-04-29 11:26:20
*/
.p-tabs
font-size: 24px
.p-tabs-nav-container .p-tabs-nav-wrap
position: relative
.p-tabs-nav-container .p-tabs-nav-level
border-bottom: 1px solid $grey-200
.p-tabs-nav-container .p-tabs-nav-level-none
border: 0
.p-tabs-nav-container .p-tabs-navbar
position: absolute
height: 2px
bottom: 0
background: $blue-500
transition: left .3s ease-in-out
.p-tabs-nav-container .p-tabs-nav-item
display: inline-block
height: 100%
padding: 12px 16px
margin-right: 16px
line-height: 24px
font-size: 16px
color: $grey-900
cursor: pointer
text-align: center
transition: color .3s
.p-tabs-nav-container .p-tabs-card-nav-item
height: 32px
min-width: 30px
line-height: 21px
padding: 5px 16px
margin-right: 0
box-sizing: border-box
border: 1px solid $grey-400
border-right: none
font-size: 14px
color: $grey-900
overflow: hidden
white-space: nowrap
text-align: center
background: $theme
.p-tabs-nav-container .p-tabs-card-nav-item:hover
color: $blue-500
.p-tabs-nav-container div.p-tabs-card-nav-item:nth-child(3)
border-top-left-radius: 4px
border-bottom-left-radius: 4px
.p-tabs-nav-container div.p-tabs-card-nav-item:last-child
border-top-right-radius: 4px
border-bottom-right-radius: 4px
border-right: 1px solid $grey-400
.p-tabs-nav-container .p-tabs-line-item-active
color: $blue-500
.p-tabs-nav-container .p-tabs-line-item-disabled
color: $grey-400
cursor: not-allowed
.p-tabs-nav-container .p-tabs-card-item-active
color: $blue-500
border: 1px solid $blue-500 !important
border-right: 1px solid $blue-500
background: $blue-100
.p-tabs-nav-container .p-tabs-card-item-disabled
color: $grey-400
background: $grey-200
cursor: not-allowed
.p-tabs-nav-container .p-tabs-card-item-disabled:hover
color: $grey-400
.p-tabs-nav-container .p-tabs-card-item-active + div
border-left: none