UNPKG

@atlaskit/lozenge

Version:

A lozenge is a visual indicator used to highlight an item's status for quick recognition.

186 lines (185 loc) 13.3 kB
._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)} ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)} ._2rko12b0{border-radius:var(--ds-radius-small,4px)} ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)} ._zulp12x7{gap:var(--ds-space-075,6px)} ._zulp1b66{gap:var(--ds-space-050,4px)} ._189ee4h9{border-width:var(--ds-border-width,1px)} ._1dqonqa1{border-style:solid} ._1h6d1j28{border-color:transparent} ._1h6dzs9d{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-value))!important}._111i1h4e{--icon-pressed-l-factor:0.7} ._13muu67f{--cm-border-color:#fff} ._152tze3t{inset-block-start:var(--ds-space-0,0)} ._168qx19p{--cm-icon-value:20%} ._18dicjiy{--border-hovered-l-factor:1.2} ._18m915vq{overflow-y:hidden} ._1axm1bqy:active [data-lozenge-metric-wrapper]>span:first-of-type{background-color:var(--badge-background-color-pressed)} ._1b3i17hp{--icon-color:var(--ds-icon-accent-green,#22a06b)} ._1b3i1cv2{--icon-color:var(--ds-icon-subtlest,#6b6e76)} ._1b3i1diz{--icon-color:var(--ds-icon-accent-gray,#7d818a)} ._1b3i1j6y{--icon-color:var(--ds-icon-accent-orange,#e06c00)} ._1b3i1oqg{--icon-color:var(--ds-icon-accent-yellow,#b38600)} ._1b3i4pcx{--icon-color:var(--ds-icon-success,#6a9a23)} ._1b3i6txe{--icon-color:var(--ds-icon-accent-blue,#357de8)} ._1b3i8645{--icon-color:var(--ds-icon-accent-lime,#6a9a23)} ._1b3i8uof{--icon-color:var(--ds-icon-accent-teal,#2898bd)} ._1b3iervl{--icon-color:var(--ds-icon-warning,#e06c00)} ._1b3inbxb{--icon-color:var(--ds-icon-accent-red,#c9372c)} ._1b3iqm1h{--icon-color:var(--ds-icon-discovery,#af59e1)} ._1b3is4qr{--icon-color:var(--ds-icon-danger,#c9372c)} ._1b3iuq3u{--icon-color:var(--ds-icon-accent-purple,#af59e1)} ._1b3iv8hk{--icon-color:var(--ds-icon-accent-magenta,#cd519d)} ._1b3iyhbg{--icon-color:var(--ds-icon-information,#357de8)} ._1bah1h6o{justify-content:center} ._1bn814je{--badge-background-color:#b7b9be} ._1bn85usi{--badge-background-color:var(--ds-background-discovery-subtler-pressed,#d8a0f7)} ._1bn8ar1y{--badge-background-color:var(--ds-background-information-subtler-pressed,#8fb8f6)} ._1bn8bkku{--badge-background-color:var(--ds-background-warning-subtler-pressed,#fbc828)} ._1bn8d6jc{--badge-background-color:var(--ds-background-success-subtler-pressed,#b3df72)} ._1bn8jkmi{--badge-background-color:var(--ds-background-danger-subtler-pressed,#fd9891)} ._1bn8vuon{--badge-background-color:var(--ds-surface,#fff)} ._1bto1l2s{text-overflow:ellipsis} ._1cp21w66:hover>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-hovered-value))} ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)} ._1e0c116y{display:inline-flex} ._1e0c1txw{display:flex} ._1ftrbpke [data-lozenge-metric-wrapper]>span:first-of-type{background-color:var(--badge-background-color)} ._1gqs1mvc:active>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-pressed-value))} ._1iel6xdd{--icon-hovered-l-factor:0.8} ._1k671038{--border-l-factor:1.33} ._1q511b66{padding-block-start:var(--ds-space-050,4px)} ._1q51v77o{padding-block-start:var(--ds-space-025,2px)} ._1reo15vq{overflow-x:hidden} ._1tkeviql{min-height:2rem} ._1xe213kw>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-pressed-l-factor)) c h)!important} ._1xe213rw>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-value))} ._3wu016y8{--border-color:var(--ds-border-accent-red,#e2483d)} ._3wu01b2s{--border-color:var(--ds-border-accent-orange,#e06c00)} ._3wu01bqt{--border-color:var(--ds-border-danger,#e2483d)} ._3wu01crs{--border-color:var(--ds-border-accent-green,#22a06b)} ._3wu01h3o{--border-color:var(--ds-border-accent-teal,#2898bd)} ._3wu01hqq{--border-color:var(--ds-border-accent-purple,#af59e1)} ._3wu01ihb{--border-color:var(--ds-border-bold,#7d818a)} ._3wu01mps{--border-color:var(--ds-border-success,#6a9a23)} ._3wu01w55{--border-color:var(--ds-border-accent-blue,#357de8)} ._3wu01xiv{--border-color:var(--ds-border-warning,#e06c00)} ._3wu08yml{--border-color:var(--ds-border-accent-gray,#7d818a)} ._3wu0feiv{--border-color:var(--ds-border-accent-yellow,#b38600)} ._3wu0nf89{--border-color:var(--ds-border-accent-lime,#6a9a23)} ._3wu0uwd0{--border-color:var(--ds-border-accent-magenta,#cd519d)} ._3wu0v30g{--border-color:var(--ds-border-discovery,#af59e1)} ._3wu0vbh5{--border-color:var(--ds-border-information,#357de8)} ._46v5hwvj{--cm-icon-pressed-value:40%} ._4ayg18vq{--badge-background-color-pressed:var(--ds-background-discovery-pressed,#e3bdfa)} ._4ayg1c1j{--badge-background-color-pressed:var(--ds-background-information-pressed,#adcbfb)} ._4ayg1fkg{--badge-background-color-pressed:#dddee1} ._4ayg1r4b{--badge-background-color-pressed:var(--ds-background-danger-pressed,#ffb8b2)} ._4ayg1wl5{--badge-background-color-pressed:var(--ds-background-success-pressed,#bde97c)} ._4aygvuon{--badge-background-color-pressed:var(--ds-surface,#fff)} ._4aygzr32{--badge-background-color-pressed:var(--ds-background-warning-pressed,#fbd779)} ._4cvr1h6o{align-items:center} ._4t3i1k92{height:1.25rem} ._4uq11yqs{--icon-l-factor:0.88} ._85i51b66{padding-block-end:var(--ds-space-050,4px)} ._85i5v77o{padding-block-end:var(--ds-space-025,2px)} ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)} ._bfhk14j0{background-color:var(--ds-background-success-subtler,#d3f1a7)} ._bfhk165s{background-color:var(--ds-background-accent-orange-subtler,#fce4a6)} ._bfhk1773{background-color:var(--ds-background-accent-yellow-subtler,#f5e989)} ._bfhk18wg{background-color:var(--ds-background-danger-subtler,#ffd5d2)} ._bfhk1a17{background-color:var(--ds-background-accent-teal-subtler,#c6edfb)} ._bfhk1dy8{background-color:var(--ds-background-accent-blue-subtler,#cfe1fd)} ._bfhk1nm4{background-color:var(--ds-background-accent-purple-subtler,#eed7fc)} ._bfhk1rtt{background-color:var(--ds-background-accent-red-subtler,#ffd5d2)} ._bfhk1wnw{background-color:var(--ds-background-accent-green-subtler,#baf3db)} ._bfhk8lbg{background-color:var(--ds-background-information-subtler,#cfe1fd)} ._bfhke670{background-color:var(--ds-background-discovery-subtler,#eed7fc)} ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)} ._bfhkv9ra{background-color:var(--ds-background-accent-magenta-subtler,#fdd0ec)} ._bfhkysee{background-color:var(--ds-background-accent-gray-subtlest,#f0f1f2)} ._bfhkz2ec{background-color:var(--ds-background-accent-lime-subtler,#d3f1a7)} ._bg3q9by0{--cm-border-pressed-value:10%} ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)} ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)} ._fdt01r5k{--cm-icon-hovered-value:30%} ._hyog26zw{--border-pressed-l-factor:1.08} ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)} ._kqswh2mm{position:relative} ._kqswstnw{position:absolute} ._lcxvglyw{pointer-events:none} ._m71tr3uz{--cm-icon-color:#000} ._o5721q9c{white-space:nowrap} ._oe6mmko7{--cm-border-value:45%} ._rjxpze3t{inset-inline-end:var(--ds-space-0,0)} ._syaz12v7{color:var(--ds-text-accent-teal-bolder,#164555)} ._syaz1blx{color:var(--ds-text-danger-bolder,#5d1f1a)} ._syaz1g72{color:var(--ds-text-discovery-bolder,#48245d)} ._syaz1ik3{color:var(--ds-text-accent-lime-bolder,#37471f)} ._syaz1kyx{color:var(--ds-text-accent-blue-bolder,#123263)} ._syaz1mn1{color:var(--ds-text-accent-purple-bolder,#48245d)} ._syaz1p1e{color:var(--ds-text-success-bolder,#37471f)} ._syaz1qd9{color:var(--ds-text-information-bolder,#123263)} ._syaz1qur{color:var(--ds-text-accent-magenta-bolder,#50253f)} ._syaz1tmo{color:var(--ds-text-accent-gray-bolder,#1e1f21)} ._syaz1y78{color:var(--ds-text-accent-green-bolder,#164b35)} ._syaz6x5g{color:var(--ds-text-selected,#1868db)} ._syaz7i1p{color:var(--ds-text-accent-orange-bolder,#693200)} ._syazekll{color:var(--ds-text-accent-yellow-bolder,#533f04)} ._syazhwvp{color:var(--ds-text-accent-red-bolder,#5d1f1a)} ._syazi7uo{color:var(--ds-text,#292a2e)} ._syazmgs1{color:var(--ds-text-warning-bolder,#693200)} ._tzy4idpf{opacity:0} ._u7coze3t{inset-block-end:var(--ds-space-0,0)} ._vchhusvi{box-sizing:border-box} ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)} ._y4ti303w{padding-inline-end:.0625rem} ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)} ._ylgq1r5k{--cm-border-hovered-value:30%} [data-color-mode=dark] ._16burnys{--badge-background-color-pressed:#3d3f43} [data-color-mode=dark] ._189qkb7n{--icon-l-factor:1} [data-color-mode=dark] ._18mn783i{--icon-pressed-l-factor:1.37} [data-color-mode=dark] ._196p1btq{--icon-hovered-l-factor:1.15} [data-color-mode=dark] ._1f28f1ug{--cm-icon-value:0%} [data-color-mode=dark] ._1t75u67f{--cm-icon-color:#fff} [data-color-mode=dark] ._aewt1n8h{--cm-icon-pressed-value:70%} [data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000} [data-color-mode=dark] ._iymy8hz0{--badge-background-color:#4b4d51} [data-color-mode=dark] ._l0666xdd{--border-hovered-l-factor:0.8} [data-color-mode=dark] ._ockq1r5k{--cm-icon-hovered-value:30%} [data-color-mode=dark] ._pclnn8xv{--border-pressed-l-factor:0.9} [data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7} ._4cvx7ddx:hover{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-hovered-value))!important} ._irr315aw:hover{background-color:var(--ds-background-information-subtler-hovered,#adcbfb)} ._irr31axx:hover{background-color:var(--ds-background-accent-magenta-subtler-hovered,#fcb6e1)} ._irr31e2h:hover{background-color:var(--ds-background-accent-green-subtler-hovered,#97edc9)} ._irr31ei0:hover{background-color:var(--ds-background-accent-orange-subtler-hovered,#fbd779)} ._irr31gf0:hover{background-color:var(--ds-background-accent-lime-subtler-hovered,#bde97c)} ._irr31r82:hover{background-color:var(--ds-background-success-subtler-hovered,#bde97c)} ._irr31uw7:hover{background-color:var(--ds-background-accent-yellow-subtler-hovered,#efdd4e)} ._irr31yx4:hover{background-color:var(--ds-background-warning-subtler-hovered,#fbd779)} ._irr370oi:hover{background-color:var(--ds-background-danger-subtler-hovered,#ffb8b2)} ._irr3815t:hover{background-color:var(--ds-background-accent-blue-subtler-hovered,#adcbfb)} ._irr3affd:hover{background-color:var(--ds-background-accent-red-subtler-hovered,#ffb8b2)} ._irr3attl:hover{background-color:var(--ds-background-accent-purple-subtler-hovered,#e3bdfa)} ._irr3kwwr:hover{background-color:var(--ds-background-accent-teal-subtler-hovered,#b1e4f7)} ._irr3plhp:hover{background-color:var(--ds-background-neutral-hovered,#0b120e24)} ._irr3rumk:hover{background-color:var(--ds-background-discovery-subtler-hovered,#e3bdfa)} ._irr3wejn:hover{background-color:var(--ds-background-accent-gray-subtlest-hovered,#dddee1)} ._q4zt1csi:active{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-pressed-value))!important} ._1di618ut:active{background-color:var(--ds-background-accent-gray-subtlest-pressed,#b7b9be)} ._1di61gdz:active{background-color:var(--ds-background-neutral-pressed,#080f214a)} ._1di61j5a:active{background-color:var(--ds-background-accent-red-subtler-pressed,#fd9891)} ._1di61jb0:active{background-color:var(--ds-background-accent-teal-subtler-pressed,#9dd9ee)} ._1di61r9w:active{background-color:var(--ds-background-accent-yellow-subtler-pressed,#eed12b)} ._1di62kxc:active{background-color:var(--ds-background-accent-lime-subtler-pressed,#b3df72)} ._1di63nfk:active{background-color:var(--ds-background-accent-purple-subtler-pressed,#d8a0f7)} ._1di642ri:active{background-color:var(--ds-background-accent-magenta-subtler-pressed,#f797d2)} ._1di65usi:active{background-color:var(--ds-background-discovery-subtler-pressed,#d8a0f7)} ._1di6ar1y:active{background-color:var(--ds-background-information-subtler-pressed,#8fb8f6)} ._1di6bkku:active{background-color:var(--ds-background-warning-subtler-pressed,#fbc828)} ._1di6d6jc:active{background-color:var(--ds-background-success-subtler-pressed,#b3df72)} ._1di6dpo3:active{background-color:var(--ds-background-accent-orange-subtler-pressed,#fbc828)} ._1di6jkmi:active{background-color:var(--ds-background-danger-subtler-pressed,#fd9891)} ._1di6rwxf:active{background-color:var(--ds-background-accent-blue-subtler-pressed,#8fb8f6)} ._1di6ybhx:active{background-color:var(--ds-background-accent-green-subtler-pressed,#7ee2b8)} @supports (color:oklch(from white l c h)){._1easxmrh{border-color:oklch(from var(--border-color) calc(l * var(--border-l-factor)) c h)!important}._1r9r1ss3>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-l-factor)) c h)}._1lh71sfd:hover>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-hovered-l-factor)) c h)}._11o31cha:active>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-pressed-l-factor)) c h)}._75gv2l9f:hover{border-color:oklch(from var(--border-color) calc(l * var(--border-hovered-l-factor)) c h)!important}._ui3h1ct7:active{border-color:oklch(from var(--border-color) calc(l * var(--border-pressed-l-factor)) c h)!important}}