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

React components for building web UI in Azure DevOps

.bolt-bubble-callout {
  animation: bubble-reveal 400ms cubic-bezier(0.215, 0.61, 0.17, 1.14);
  border-radius: 4px;
}
.bolt-bubble-callout.bolt-bubble-fullscreen {
  margin: 0px;
  max-height: none;
  max-width: none;
  height: auto;
  width: auto;
  border-radius: 0px;
}
.bolt-bubble-callout.fade-out {
  animation: bubble-dismiss 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.bolt-bubble-callout.left-primary {
  margin-left: 8px;
}
.bolt-bubble-callout.left-primary .bolt-bubble-beak {
  left: -7.071px;
}
.bolt-bubble-callout.right-primary {
  margin-right: 8px;
}
.bolt-bubble-callout.right-primary .bolt-bubble-beak {
  right: -7.071px;
}
.bolt-bubble-callout.top-primary {
  margin-top: 8px;
}
.bolt-bubble-callout.top-primary .bolt-bubble-beak {
  top: -7.071px;
}
.bolt-bubble-callout.bottom-primary {
  margin-bottom: 8px;
}
.bolt-bubble-callout.bottom-primary .bolt-bubble-beak {
  bottom: -7.071px;
}
.bolt-bubble-callout.left-secondary .bolt-bubble-beak {
  left: 16px;
}
.bolt-bubble-callout.right-secondary .bolt-bubble-beak {
  right: 16px;
}
.bolt-bubble-callout.top-secondary .bolt-bubble-beak {
  top: 16px;
}
.bolt-bubble-callout.bottom-secondary .bolt-bubble-beak {
  bottom: 16px;
}
.bolt-bubble-callout.center-h .bolt-bubble-beak {
  left: calc(50% - 14.142px / 2);
}
.bolt-bubble-callout.center-v .bolt-bubble-beak {
  top: calc(50% - 14.142px / 2);
}
.bolt-bubble-callout[class*=left][class*=top] {
  transform-origin: left top;
}
.bolt-bubble-callout[class*=right][class*=top] {
  transform-origin: right top;
}
.bolt-bubble-callout[class*=left][class*=bottom] {
  transform-origin: left bottom;
}
.bolt-bubble-callout[class*=right][class*=bottom] {
  transform-origin: right bottom;
}
.bolt-bubble-callout.left-primary.center-v {
  transform-origin: left center;
}
.bolt-bubble-callout.right-primary.center-v {
  transform-origin: right center;
}
.bolt-bubble-callout.center-h.top-primary {
  transform-origin: center top;
}
.bolt-bubble-callout.center-h.bottom-primary {
  transform-origin: center bottom;
}

.bolt-bubble-beak {
  position: absolute;
  width: 14.142px;
  height: 14.142px;
  background: rgba(255, 255, 255, 1);
  background: var(--callout-background-color,rgba(255, 255, 255, 1));
  transform: rotate(45deg);
}
body.ms-vss-web-vsts-theme-hc-dark .bolt-bubble-beak {
  box-shadow: none;
  border-left: 2px solid rgba(0, 120, 212, 1);
  border-left: 2px solid var(--focus-border-color,rgba(0, 120, 212, 1));
  border-top: 2px solid rgba(0, 120, 212, 1);
  border-top: 2px solid var(--focus-border-color,rgba(0, 120, 212, 1));
}
body.ms-vss-web-vsts-theme-hc-light .bolt-bubble-beak {
  box-shadow: none;
  border-left: 2px solid rgba(0, 120, 212, 1);
  border-left: 2px solid var(--focus-border-color,rgba(0, 120, 212, 1));
  border-top: 2px solid rgba(0, 120, 212, 1);
  border-top: 2px solid var(--focus-border-color,rgba(0, 120, 212, 1));
}

.bolt-bubble-content {
  background: rgba(255, 255, 255, 1);
  background: var(--callout-background-color,rgba(255, 255, 255, 1));
  border-radius: 4px;
  max-width: 368px;
}

.bolt-bubble-text-only {
  max-width: 240px;
  padding: 16px;
}

.bolt-bubble-text {
  padding-bottom: 0px;
}
.bolt-bubble-text.no-buttons {
  padding-bottom: 16px;
}

.bolt-bubble-description {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

.bolt-bubble-close.close-button.bolt-button.subtle {
  top: 12px;
  right: 12px;
  position: absolute;
  font-size: 1rem;
  padding: 3px;
}

@keyframes bubble-reveal {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bubble-dismiss {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

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