comic-plus

Version:

1 lines • 5.09 kB

CSS

.cu-tabs{max-width:100%;position:relative;overflow:hidden;padding:4px 0}.cu-tabs__header{margin-bottom:15px;width:100%;display:flex;flex:none;flex-wrap:nowrap;position:relative}.cu-tabs__head{position:relative;display:flex;flex:auto;overflow:hidden;flex-wrap:nowrap}.cu-tabs__scroll{display:flex;overflow-x:auto;scrollbar-width:none}.cu-tabs__header-extra{padding-bottom:2px;margin-left:10px;display:inline-flex;align-items:center}.cu-tabs.has-scroll .cu-tabs__head{padding:0 20px}.cu-tabs__header::after{content:'';display:block;height:2px;position:absolute;left:0;bottom:0;right:0;background-color:var(--cu-border-color);z-index:4}.cu-tabs__list{display:inline-flex;align-items:center;white-space:nowrap}.cu-tabs.is-only-tab .cu-tabs__header{margin-bottom:0}.cu-tabs.is-only-tab .cu-tabs__header::after{display:none}.cu-tabs.is-only-tab.is-card .cu-tabs__list{border-radius:var(--cu-border-radius) var(--cu-border-radius);border-bottom:1px solid var(--cu-border-color)}.cu-tabs.is-card .cu-tabs__header::after{bottom:-1px;height:1px}.cu-tabs.is-arc .cu-tabs__header::after{display:none}.cu-tabs__header .cu-tabs__button{position:absolute;width:20px;height:100%;background-color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--cu-text-color);cursor:pointer;z-index:3}.cu-tabs__header .cu-tabs__button:hover{font-size:18px;font-weight:900;color:var(--cu-tabs-color,var(--cu-color-primary))}.cu-tabs__header .cu-tabs__button.left-button{left:0;box-shadow:5px 0 5px -4px rgba(0,0,0,.3)}.cu-tabs__header .cu-tabs__button.right-button{right:0;box-shadow:-5px 0 5px -4px rgba(0,0,0,.3)}.cu-tabs.is-card .cu-tabs__button{background-color:var(--cu-background-color-light);border:1px solid var(--cu-border-color)}.cu-tabs.is-card:not(.is-only-tab) .cu-tabs__button{border-bottom:0}.cu-tabs.is-card:not(.is-only-tab) .cu-tabs__button.left-button{border-radius:var(--cu-border-radius) 0 0 0}.cu-tabs.is-card:not(.is-only-tab) .cu-tabs__button.right-button{border-radius:0 var(--cu-border-radius) 0 0}.cu-tabs.is-card.is-only-tab .cu-tabs__button.left-button{border-radius:var(--cu-border-radius) 0 0 var(--cu-border-radius)}.cu-tabs.is-card.is-only-tab .cu-tabs__button.right-button{border-radius:0 var(--cu-border-radius) var(--cu-border-radius) 0}.cu-tabs.is-card .cu-tabs__list{position:relative;padding:2px;border-radius:var(--cu-border-radius) var(--cu-border-radius) 0 0;border-left:1px solid var(--cu-border-color);border-right:1px solid var(--cu-border-color);border-top:1px solid var(--cu-border-color);background-color:var(--cu-background-color-light)}.cu-tabs.has-scroll.is-card .cu-tabs__list{border-left:0;border-right:0;border-radius:0}.cu-tabs__cardline{display:block;background-color:#fff;position:absolute;top:2px;bottom:2px;border-radius:var(--cu-border-radius);transition:all .2s ease-in-out;border:1px solid var(--cu-border-color);box-shadow:0 1px 2px 0 rgba(0,0,0,.03),0 1px 6px -1px rgba(0,0,0,.02),0 2px 4px 0 rgba(0,0,0,.02)}.cu-tabs.is-card .cu-tabs__label{position:relative;z-index:2}.cu-tabs__item{position:relative;cursor:pointer;color:var(--cu-text-color);font-size:14px;transition:color .2s;overflow:hidden;z-index:2;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;z-index:5}.cu-tabs.is-card .cu-tabs__label{transition:all .2s}.cu-tabs .cu-tabs__icon{margin-right:4px}.cu-tabs__list .cu-tabs__item:first-of-type{margin-left:0}.cu-tabs__list .cu-tabs__item:last-of-type{margin-right:0}.cu-tabs .cu-tabs__item.is-active,.cu-tabs .cu-tabs__item:hover{color:var(--cu-tabs-color,var(--cu-color-primary))}.cu-tabs.is-line .cu-tabs__item::after{content:'';display:block;height:2px;width:70%;position:absolute;left:50%;bottom:0;background-color:var(--cu-tabs-color,var(--cu-color-primary));transform:translateX(-50%) scaleX(0);transition:transform .4s;border-radius:2px}.cu-tabs .cu-tabs__item .cu-tabs__label{display:inline-flex;align-items:center}.cu-tabs.is-line .cu-tabs__item.is-active::after{transition:transform .4s cubic-bezier(.1, 0, .2, 2);transform:translateX(-50%) scaleX(1)}.cu-tabs__item+.cu-tabs__item{margin-left:10px}.cu-tabs.is-arc .cu-tabs__item .cu-tabs__arc{position:absolute;height:8px;right:12px;bottom:6px;transition:transform .2s;fill:var(--cu-tabs-color,var(--cu-color-primary));transform:scale(0)}.cu-tabs.is-arc .cu-tabs__item.is-active .cu-tabs__arc{transform:scale(1)}.cu-tabs__item .cu-tabs__closable{position:absolute;right:0;height:100%;opacity:0;display:inline-flex;align-items:center;margin-left:4px;font-size:14px;transition:opacity .2s ease-in-out}.cu-tabs__item .cu-tabs__closable .close-icon{border-radius:50%;transition:all .2s ease-in-out}.cu-tabs__item.is-active .cu-tabs__closable,.cu-tabs__item:hover .cu-tabs__closable{opacity:1}.cu-tabs.is-arc .cu-tabs__item .cu-tabs__closable,.cu-tabs.is-card .cu-tabs__item .cu-tabs__closable{height:14px;top:3px;right:2px}.cu-tabs.is-arc .cu-tabs__item .cu-tabs__closable .close-icon{border-radius:50%}.cu-tabs__item .cu-tabs__closable:hover .close-icon{background-color:var(--cu-tabs-color,var(--cu-color-primary));color:#fff}