azure-devops-ui/Components/Pill/Pill.css

React components for building web UI in Azure DevOps

/* 
    We're using absolute height and negative margins in this file
    this is because borders make a lot of this logic weird, and the spec calls for overlap of borders
    between what are logically parent and child elements

    eg. in Outlined pills, the button focus circle should exactly overlap the pill's outline

    Using negative margin means we need to do less padding management of the container based on
    what elements it happens to contain, and elements can just intrude on the left-right padding of the parent
    */
.bolt-pill {
  border-radius: 120px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.bolt-pill.clickable {
  cursor: pointer;
}
.bolt-pill.count .bolt-pill-content {
  font-weight: 600;
}
.bolt-pill .bolt-pill-content {
  margin: 0px 0.5rem;
  padding: 2px 0;
}
.bolt-pill .bolt-pill-icon {
  margin-left: 0.25rem;
  margin-right: 0.375rem;
}
.bolt-pill.compact.has-filled-visual .bolt-pill-content, .bolt-pill.compact.has-icon .bolt-pill-content, .bolt-pill.regular.has-filled-visual .bolt-pill-content, .bolt-pill.regular.has-icon .bolt-pill-content, .bolt-pill.large.has-filled-visual .bolt-pill-content, .bolt-pill.large.has-icon .bolt-pill-content {
  margin-left: 0;
}
.bolt-pill.compact.has-remove-button .bolt-pill-content, .bolt-pill.regular.has-remove-button .bolt-pill-content, .bolt-pill.large.has-remove-button .bolt-pill-content {
  margin-right: 0.375rem;
}
.bolt-pill.compact {
  font-size: 0.6875rem;
}
.bolt-pill.regular {
  font-size: 0.75rem;
}
.bolt-pill.regular .bolt-pill-filled-visual {
  width: 1.25rem;
}
.bolt-pill.large {
  font-size: 0.875rem;
}
.bolt-pill.large .bolt-pill-filled-visual {
  width: 1.5rem;
}
.bolt-pill.standard {
  background-color: rgba(0, 0, 0, 0.06);
  background-color: var(--palette-black-alpha-6,rgba(0, 0, 0, 0.06));
}
.bolt-pill.standard.clickable.hover {
  background-color: rgba(0, 0, 0, 0.10);
  background-color: var(--palette-black-alpha-10,rgba(0, 0, 0, 0.10));
}
.bolt-pill.themed-standard {
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}
body.ms-vss-web-vsts-theme-hc-dark .bolt-pill.themed-standard {
  background-color: transparent;
  border-color: rgba(0, 0, 0, .9);
  border-color: var(--text-primary-color,rgba(0, 0, 0, .9));
}
body.ms-vss-web-vsts-theme-hc-light .bolt-pill.themed-standard {
  background-color: transparent;
  border-color: rgba(0, 0, 0, .9);
  border-color: var(--text-primary-color,rgba(0, 0, 0, .9));
}
@media (forced-colors: active) {
  .bolt-pill.themed-standard {
    background-color: transparent;
    border-color: ButtonText;
    color: ButtonText;
  }
}
.bolt-pill.themed-standard.clickable.hover {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}
body.ms-vss-web-vsts-theme-hc-dark .bolt-pill.themed-standard.clickable.hover {
  background-color: rgba(0, 0, 0, 0.10);
  background-color: var(--palette-black-alpha-10,rgba(0, 0, 0, 0.10));
}
body.ms-vss-web-vsts-theme-hc-light .bolt-pill.themed-standard.clickable.hover {
  background-color: rgba(0, 0, 0, 0.10);
  background-color: var(--palette-black-alpha-10,rgba(0, 0, 0, 0.10));
}
@media (forced-colors: active) {
  .bolt-pill.themed-standard.clickable.hover {
    background-color: transparent;
    color: ButtonText;
  }
}
.bolt-pill.outlined {
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.20);
  border-color: var(--palette-black-alpha-20,rgba(0, 0, 0, 0.20));
}
.bolt-pill.outlined.clickable.hover {
  background-color: rgba(0, 0, 0, 0.06);
  background-color: var(--palette-black-alpha-6,rgba(0, 0, 0, 0.06));
}
.bolt-pill.outlined .bolt-pill-button {
  border: 1px solid transparent;
}
.bolt-pill.colored.dark {
  color: white;
}
.bolt-pill.colored.light {
  color: black;
}

.bolt-focus-visible .bolt-pill:focus {
  border-color: rgba(0, 120, 212, 1);
  border-color: var(--communication-background,rgba(0, 120, 212, 1));
  animation: ms-focus-shadow-pulse 4s ease-in-out infinite;
}
@media (forced-colors: active) {
  .bolt-focus-visible .bolt-pill:focus {
    animation: none;
  }
}
.bolt-focus-visible .bolt-pill:focus {
  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.23);
  box-shadow: 0 0 0 3px var(--focus-pulse-max-color,rgba(0, 120, 212, 0.23));
}
@media (forced-colors: active) {
  .bolt-focus-visible .bolt-pill:focus {
    forced-color-adjust: none;
    border-color: highlight;
  }
}
@media screen and (forced-colors: active) and (prefers-color-scheme: light) {
  .bolt-focus-visible .bolt-pill:focus {
    outline: 1px solid highlight;
    outline-offset: 1px;
  }
}
@media (forced-colors: active) {
  .bolt-focus-visible .bolt-pill:focus {
    background: transparent !important;
    color: windowtext;
  }
}
.bolt-focus-visible .bolt-pill:focus {
  outline: none;
}

.bolt-pill-icon {
  padding: 2px;
}

.bolt-pill-filled-visual {
  overflow: hidden;
  border-radius: 50%;
  margin-right: 4px;
}

button.bolt-pill-button.bolt-button.icon-only {
  border-radius: 50%;
  color: inherit;
  margin-left: auto;
  padding: 2px;
}
button.bolt-pill-button.bolt-button.icon-only:hover {
  background-color: rgba(0, 0, 0, 0.06);
  background-color: var(--palette-black-alpha-6,rgba(0, 0, 0, 0.06));
}

/*# sourceMappingURL=Pill.css.map */