@atlaskit/lozenge
Version:
A lozenge is a visual indicator used to highlight an item's status for quick recognition.
137 lines • 9.71 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)}
._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
._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}
._1h6d74of{border-color:var(--border-color)}
._152tze3t{inset-block-start:var(--ds-space-0,0)}
._17i7nkaw[data-selected=true] [data-lozenge-metric-wrapper]>span:first-of-type{background-color:var(--ds-background-neutral-hovered,#0b120e24)}
._17i7toke[data-selected=true] [data-lozenge-metric-wrapper]>span:first-of-type{background-color:var(--ds-background-neutral,#0515240f)}
._18m915vq{overflow-y:hidden}
._1axmnkaw:active [data-lozenge-metric-wrapper]>span:first-of-type{background-color:var(--ds-background-neutral-hovered,#0b120e24)}
._1axmtoke:active [data-lozenge-metric-wrapper]>span:first-of-type{background-color:var(--ds-background-neutral,#0515240f)}
._1bah1h6o{justify-content:center}
._1bto1l2s{text-overflow:ellipsis}
._1btozryt{text-overflow:clip}
._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
._1e0c116y{display:inline-flex}
._1e0c1txw{display:flex}
._1ftrnkaw [data-lozenge-metric-wrapper]>span:first-of-type{background-color:var(--ds-background-neutral-hovered,#0b120e24)}
._1oec1ign{transition-duration:var(--ds-duration-short,.15s)}
._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
._1pglindk{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
._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}
._3wu0131p{--border-color:var(--ds-border-accent-teal-subtle,#9dd9ee)}
._3wu0132u{--border-color:var(--ds-border-accent-magenta-subtle,#f797d2)}
._3wu018hp{--border-color:var(--ds-border-accent-blue-subtle,#8fb8f6)}
._3wu019v3{--border-color:var(--ds-border-discovery-subtle,#d8a0f7)}
._3wu01ip5{--border-color:var(--ds-border-accent-orange-subtle,#fbc828)}
._3wu01l7x{--border-color:var(--ds-border,#0b120e24)}
._3wu01m7d{--border-color:var(--ds-border-accent-lime-subtle,#b3df72)}
._3wu01mzp{--border-color:var(--ds-border-danger-subtle,#fd9891)}
._3wu01s7j{--border-color:var(--ds-border-accent-yellow-subtle,#eed12b)}
._3wu01wfx{--border-color:var(--ds-border-warning-subtle,#fbc828)}
._3wu02gvx{--border-color:var(--ds-border-success-subtle,#b3df72)}
._3wu05d2u{--border-color:var(--ds-border-accent-green-subtle,#7ee2b8)}
._3wu0luwt{--border-color:var(--ds-border-accent-purple-subtle,#d8a0f7)}
._3wu0n9dc{--border-color:var(--ds-border-accent-red-subtle,#fd9891)}
._3wu0wn4u{--border-color:var(--ds-border-information-subtle,#8fb8f6)}
._4cvr1h6o{align-items:center}
._4t3i1k92{height:1.25rem}
._5sag1ign{animation-duration:var(--ds-duration-short,.15s)}
._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
._6fl4indk{transition-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
._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)}
._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
._j7hq1bym{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
._k8m01rje{transition-property:background-color,border-color}
._k8m0brmi{transition-property:opacity}
._kqswh2mm{position:relative}
._kqswstnw{position:absolute}
._lcxvglyw{pointer-events:none}
._o5721q9c{white-space:nowrap}
._p12f1osq{max-width:100%}
._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)}
._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)}
._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
._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)}