@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
CSS
._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))}._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)}
._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))}
._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))}
._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)}._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)}._ui3h1ct7:active{border-color:oklch(from var(--border-color) calc(l * var(--border-pressed-l-factor)) c h)}}