@atlaskit/tabs
Version:
Tabs are used to organize content by grouping similar information on the same page.
121 lines • 9 kB
CSS
._10puz7ft [role=tab]:dir(rtl)[data-motion-state=entering][data-motion-direction=left]:after{animation:var(--ds-tab-indicator-enter-left,.15s cubic-bezier(0,.4,0,1) SlideInRight8px,.15s cubic-bezier(0,.4,0,1) FadeIn0to100)}
._13lhzznr [role=tab]:dir(rtl)[data-motion-state=entering][data-motion-direction=right]:after{animation:var(--ds-tab-indicator-enter-right,.15s cubic-bezier(0,.4,0,1) SlideInLeft8px,.15s cubic-bezier(0,.4,0,1) FadeIn0to100)}
._144y1kin [role=tab]:dir(rtl)[data-motion-state=exiting][data-motion-direction=left]:after{animation:var(--ds-tab-indicator-exit-right,.1s cubic-bezier(.6,0,.8,.6) SlideOutRight8px,.1s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
._1a1nzznr [role=tab][data-motion-state=entering][data-motion-direction=left]:after{animation:var(--ds-tab-indicator-enter-right,.15s cubic-bezier(0,.4,0,1) SlideInLeft8px,.15s cubic-bezier(0,.4,0,1) FadeIn0to100)}
._1bmz1erp [role=tab]:before{transition:var(--ds-tab,color opacity .15s cubic-bezier(.4,1,.6,1))}
._1rw111ou [role=tab][data-motion-state=exiting][data-motion-direction=left]:after{animation:var(--ds-tab-indicator-exit-left,.1s cubic-bezier(.6,0,.8,.6) SlideOutLeft8px,.1s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
._1sbx11ou [role=tab]:dir(rtl)[data-motion-state=exiting][data-motion-direction=right]:after{animation:var(--ds-tab-indicator-exit-left,.1s cubic-bezier(.6,0,.8,.6) SlideOutLeft8px,.1s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
._a0efz7ft [role=tab][data-motion-state=entering][data-motion-direction=right]:after{animation:var(--ds-tab-indicator-enter-left,.15s cubic-bezier(0,.4,0,1) SlideInRight8px,.15s cubic-bezier(0,.4,0,1) FadeIn0to100)}
._qwyt1qi0 [role=tab]{border-radius:var(--ds-radius-medium,6px)}
._siz91kin [role=tab][data-motion-state=exiting][data-motion-direction=right]:after{animation:var(--ds-tab-indicator-exit-right,.1s cubic-bezier(.6,0,.8,.6) SlideOutRight8px,.1s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
._ty7m1erp [role=tab]{transition:var(--ds-tab,color opacity .15s cubic-bezier(.4,1,.6,1))}
._1b8d1uh4 [role=tab]:active:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
._1lzu1uh4 [role=tab]:hover:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
._1mn4z0c1 [role=tab][aria-selected=true]:active:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border-selected,#1868db)}
._ipw1z0c1 [role=tab][aria-selected=true]:hover:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border-selected,#1868db)}
._k8nvz0c1 [role=tab][data-motion-state]:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border-selected,#1868db)}
._rsmzz0c1 [role=tab][aria-selected=true]:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border-selected,#1868db)}
._xcwz1uh4 [role=tab]:before{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._10f5idpf [role=tab]:before{opacity:0}
._10vzidpf [role=tab]{margin-right:0}
._12ydidpf [role=tab]:before{height:0}
._140sidpf [role=tab]:hover:after{height:0}
._15d8b3bt [role=tab]:hover:after{content:""}
._15plidpf [role=tab]{margin-left:0}
._15toidpf [role=tab][data-motion-state]:after{margin-left:0}
._15xxidpf [role=tab]:before{margin-left:0}
._166qidpf [role=tab]:hover:after{margin-left:0}
._16u6b3bt [role=tab]:active:after{content:""}
._170tidpf [role=tab]:active:after{margin-right:0}
._182cidpf [role=tab]:before{margin-right:0}
._1a85u2gc [role=tab]{padding-inline-end:var(--ds-space-100,8px)}
._1c9uu2gc [role=tab]:active:after{inset-inline-start:var(--ds-space-100,8px)}
._1cs8stnw:before{position:absolute}
._1dze1l2s [role=tab]{text-overflow:ellipsis}
._1e0c1txw{display:flex}
._1enwidpf:before{inset-inline-end:0}
._1fkridpf:before{inset-block-end:0}
._1fud15vq [role=tab]{overflow-y:hidden}
._1fztidpf [role=tab]:hover:after{inset-block-end:0}
._1fzxidpf [role=tab][data-motion-state]:after{inset-block-end:0}
._1g64u2gc [role=tab]:before{inset-inline-end:var(--ds-space-100,8px)}
._1gh0u2gc [role=tab]:before{inset-inline-start:var(--ds-space-100,8px)}
._1huvu2gc [role=tab][data-motion-state]:after{inset-inline-start:var(--ds-space-100,8px)}
._1jjcu2gc [role=tab][aria-selected=true]:after{inset-inline-start:var(--ds-space-100,8px)}
._1ksob3bt [role=tab][aria-selected=true]:after{content:""}
._1kt9b3bt:before{content:""}
._1lbou2gc [role=tab]:active:after{inset-inline-end:var(--ds-space-100,8px)}
._1lk3u2gc [role=tab][data-motion-state]:after{inset-inline-end:var(--ds-space-100,8px)}
._1m0e1kw7 [role=tab][aria-selected=true]:after{width:inherit}
._1mbxidpf [role=tab][aria-selected=true]:after{margin-right:0}
._1mmwidpf [role=tab]{margin-bottom:0}
._1mp41kw7:before{width:inherit}
._1n121kw7 [role=tab]:active:after{width:inherit}
._1nvfidpf [role=tab]:active:after{margin-left:0}
._1ofh12x7 [role=tab]{padding-block-end:var(--ds-space-075,6px)}
._1oi3b3bt [role=tab]:before{content:""}
._1olcu2gc [role=tab]:hover:after{inset-inline-start:var(--ds-space-100,8px)}
._1p9sidpf [role=tab][aria-selected=true]:after{inset-block-end:0}
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
._1q5jidpf [role=tab][data-motion-state]:after{margin-right:0}
._1qa1u2gc [role=tab][aria-selected=true]:after{inset-inline-end:var(--ds-space-100,8px)}
._1qjz1kw7 [role=tab][data-motion-state]:after{width:inherit}
._1quzazsu [role=tab]{color:var(--ds-text-subtle,#505258)}
._1rrikb7n [role=tab][data-motion-state]:after{z-index:1}
._1rus1l7x:before{background-color:var(--ds-border,#0b120e24)}
._1sglstnw [role=tab][aria-selected=true]:after{position:absolute}
._1tjxkb7n [role=tab]:hover:before{opacity:1}
._1tms1q9c [role=tab]{white-space:nowrap}
._1xrmidpf [role=tab]:hover:after{margin-right:0}
._1y4gkb7n [role=tab]:active:before{opacity:1}
._1yk1idpf [role=tab]:active:after{inset-block-end:0}
._24g71kw7 [role=tab]:hover:after{width:inherit}
._7gbuidpf [role=tab]:before{margin-top:0}
._7hip15vq [role=tab]{overflow-x:hidden}
._7p9oidpf [role=tab]:active:after{height:0}
._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
._93pdidpf [role=tab][aria-selected=true]:after{height:0}
._a2t91kw7 [role=tab]:before{width:inherit}
._ahbqx0bf{margin-inline-start:var(--ds-space-negative-100,-8px)}
._b1stidpf [role=tab][data-motion-state]:after{margin-bottom:0}
._bb0mh2mm [role=tab]{position:relative}
._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
._bppridpf [role=tab][aria-selected=true]:after{margin-top:0}
._bzrxglyw [role=tab][data-motion-state]:after{pointer-events:none}
._d825glyw [role=tab]:before{pointer-events:none}
._dt1cidpf [role=tab]:before{inset-block-end:0}
._eid3idpf:before{margin-right:0}
._fiem6x5g [role=tab][aria-selected=true]{color:var(--ds-text-selected,#1868db)}
._fiizidpf [role=tab]:hover:after{margin-top:0}
._fntnidpf:before{margin-left:0}
._gpbcidpf [role=tab]{margin-top:0}
._hsamidpf [role=tab]:before{margin-bottom:0}
._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
._k8qridpf [role=tab][data-motion-state]:after{margin-top:0}
._kfgte4h9:before{height:var(--ds-border-width,1px)}
._kn0bidpf [role=tab][aria-selected=true]:after{margin-bottom:0}
._kqswh2mm{position:relative}
._l0fpstnw [role=tab][data-motion-state]:after{position:absolute}
._lycustnw [role=tab]:hover:after{position:absolute}
._o2e1stnw [role=tab]:active:after{position:absolute}
._ozqtstnw [role=tab]:before{position:absolute}
._pascidpf:before{margin-top:0}
._pryi12x7 [role=tab]{padding-block-start:var(--ds-space-075,6px)}
._rmpau2gc [role=tab]{padding-inline-start:var(--ds-space-100,8px)}
._rzxytlke [role=tab]{cursor:pointer}
._sr6xglyw [role=tab][aria-selected=false]:not([data-motion-state=exiting]):active:after{content:none}
._stm6idpf [role=tab][data-motion-state]:after{height:0}
._vedkglyw [role=tab][aria-selected=false]:not([data-motion-state=exiting]):hover:after{content:none}
._w9ewidpf [role=tab]:active:after{margin-top:0}
._wd7eu2gc [role=tab]:hover:after{inset-inline-end:var(--ds-space-100,8px)}
._wqilb3bt [role=tab][data-motion-state]:after{content:""}
._wsgdidpf [role=tab][aria-selected=true]:after{margin-left:0}
._xyihidpf [role=tab]:hover:after{margin-bottom:0}
._y1g1idpf [role=tab]:active:after{margin-bottom:0}
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
._z5wtu2gc:before{inset-inline-start:var(--ds-space-100,8px)}
._zr3eidpf:before{margin-bottom:0}
._1oazazsu [role=tab]:hover{color:var(--ds-text-subtle,#505258)}
._gmk66x5g [role=tab][aria-selected=true]:hover{color:var(--ds-text-selected,#1868db)}
._1i20i7uo [role=tab]:active{color:var(--ds-text,#292a2e)}
._1oj46x5g [role=tab][aria-selected=true]:active{color:var(--ds-text-selected,#1868db)}
@media (prefers-reduced-motion:reduce){._19bsglyw [role=tab]{transition:none}._1uu4glyw [role=tab]:before{transition:none}._ne04glyw [role=tab][data-motion-state][data-motion-direction]:after{animation-name:none}._1s41glyw [role=tab]:dir(rtl)[data-motion-state][data-motion-direction]:after{animation-name:none}}