ngx-smart-popover/css/popover-content.component.css

Simple popover control for your angular (v4+) applications using bootstrap4 with smart reflection logic when overflowing the viewport. This is a continuation of ngx-popover (https://github.com/pleerock/ngx-popover). If you want to use it without bootstrap

.popover .virtual-area {
  height: 11px;
  width: 100%;
  position: absolute;
}
.popover.bs-popover-top .virtual-area {
  bottom: -11px;
}
.popover.bs-popover-bottom .virtual-area {
  top: -11px;
}
.popover.bs-popover-left .virtual-area {
  right: -11px;
}
.popover.bs-popover-right .virtual-area {
  left: -11px;
}

.popover.popover-content {
  background-color: #757575;
  border: 0rem solid black;
  padding: 1.2rem;
  z-index: 1060;
  max-width: none;
  border-radius: 0rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  font-family: "Helvetica";
}
.popover.popover-content .arrow {
  position: absolute;
  display: block;
  width: 2.2rem;
  height: 1.1rem;
  margin: 0 !important;
}
.popover.popover-content .arrow::before, .popover.popover-content .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}
.popover.popover-content.sm {
  width: 20rem;
}
.popover.popover-content.md-sm {
  width: 26rem;
}
.popover.popover-content.md {
  width: 34rem;
}
.popover.popover-content.lg {
  width: 40rem;
}
.popover.popover-content .popover-header {
  color: white;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 2.1rem;
}
.popover.popover-content .popover-body {
  color: white;
  font-size: 1rem;
  line-height: 1.3rem;
}
.popover.popover-content.bs-popover-left {
  margin-left: calc(-1.1rem - 0.5rem);
}
.popover.popover-content.bs-popover-left .arrow:before, .popover.popover-content.bs-popover-left .arrow:after {
  right: 0px !important;
}
.popover.popover-content.bs-popover-right {
  margin-left: calc(1.1rem + 0.5rem);
}
.popover.popover-content.bs-popover-right .arrow:before, .popover.popover-content.bs-popover-right .arrow:after {
  left: 0px !important;
}
.popover.popover-content.bs-popover-top, .popover.popover-content.bs-popover-top-right, .popover.popover-content.bs-popover-top-left {
  margin-top: calc(-1.1rem - 0.5rem);
}
.popover.popover-content.bs-popover-top .arrow:before, .popover.popover-content.bs-popover-top .arrow:after, .popover.popover-content.bs-popover-top-right .arrow:before, .popover.popover-content.bs-popover-top-right .arrow:after, .popover.popover-content.bs-popover-top-left .arrow:before, .popover.popover-content.bs-popover-top-left .arrow:after {
  bottom: 0px !important;
}
.popover.popover-content.bs-popover-bottom, .popover.popover-content.bs-popover-bottom-right, .popover.popover-content.bs-popover-bottom-left {
  margin-top: calc(1.1rem + 0.5rem);
}
.popover.popover-content.bs-popover-bottom .arrow:before, .popover.popover-content.bs-popover-bottom .arrow:after, .popover.popover-content.bs-popover-bottom-right .arrow:before, .popover.popover-content.bs-popover-bottom-right .arrow:after, .popover.popover-content.bs-popover-bottom-left .arrow:before, .popover.popover-content.bs-popover-bottom-left .arrow:after {
  top: 0px !important;
}
.popover.popover-content.bs-popover-right .arrow, .popover.popover-content.bs-popover-left .arrow {
  top: 50%;
  transform: translateY(-50%);
}
.popover.popover-content.bs-popover-top .arrow, .popover.popover-content.bs-popover-bottom .arrow {
  left: 50%;
  transform: translateX(-50%);
}
.popover.popover-content.bs-popover-right .arrow {
  left: calc((1.1rem + 0rem) * -1);
  width: 1.1rem;
  height: 2.2rem;
  margin: 0 !important;
}
.popover.popover-content.bs-popover-right .arrow::before,
.popover.popover-content.bs-popover-right .arrow::after {
  border-width: calc(2.2rem / 2) 1.1rem calc(2.2rem / 2) 0;
}
.popover.popover-content.bs-popover-right .arrow::before {
  left: 0;
  border-right-color: #757575;
}
.popover.popover-content.bs-popover-right .arrow::after {
  left: 0rem !important;
  border-right-color: #757575;
}
.popover.popover-content.bs-popover-left .arrow {
  right: calc((1.1rem + 0rem) * -1);
  width: 1.1rem;
  height: 2.2rem;
  margin: 0 !important;
}
.popover.popover-content.bs-popover-left .arrow::before,
.popover.popover-content.bs-popover-left .arrow::after {
  border-width: calc(2.2rem / 2) 0 calc(2.2rem / 2) 1.1rem;
}
.popover.popover-content.bs-popover-left .arrow::before {
  right: 0;
  border-left-color: #757575;
}
.popover.popover-content.bs-popover-left .arrow::after {
  right: 0rem !important;
  border-left-color: #757575;
}
.popover.popover-content.bs-popover-top .arrow, .popover.popover-content.bs-popover-top-right .arrow, .popover.popover-content.bs-popover-top-left .arrow {
  bottom: calc((1.1rem + 0rem) * -1);
}
.popover.popover-content.bs-popover-top .arrow::before,
.popover.popover-content.bs-popover-top .arrow::after, .popover.popover-content.bs-popover-top-right .arrow::before,
.popover.popover-content.bs-popover-top-right .arrow::after, .popover.popover-content.bs-popover-top-left .arrow::before,
.popover.popover-content.bs-popover-top-left .arrow::after {
  border-width: 1.1rem calc(2.2rem / 2) 0;
}
.popover.popover-content.bs-popover-top .arrow::before, .popover.popover-content.bs-popover-top-right .arrow::before, .popover.popover-content.bs-popover-top-left .arrow::before {
  bottom: 0;
  border-top-color: #757575;
}
.popover.popover-content.bs-popover-top .arrow::after, .popover.popover-content.bs-popover-top-right .arrow::after, .popover.popover-content.bs-popover-top-left .arrow::after {
  bottom: 0rem !important;
  border-top-color: #757575;
}
.popover.popover-content.bs-popover-bottom .arrow, .popover.popover-content.bs-popover-bottom-right .arrow, .popover.popover-content.bs-popover-bottom-left .arrow {
  top: calc((1.1rem + 0rem) * -1);
}
.popover.popover-content.bs-popover-bottom .arrow::before,
.popover.popover-content.bs-popover-bottom .arrow::after, .popover.popover-content.bs-popover-bottom-right .arrow::before,
.popover.popover-content.bs-popover-bottom-right .arrow::after, .popover.popover-content.bs-popover-bottom-left .arrow::before,
.popover.popover-content.bs-popover-bottom-left .arrow::after {
  border-width: 0 calc(2.2rem / 2) 1.1rem calc(2.2rem / 2);
}
.popover.popover-content.bs-popover-bottom .arrow::before, .popover.popover-content.bs-popover-bottom-right .arrow::before, .popover.popover-content.bs-popover-bottom-left .arrow::before {
  top: 0;
  border-bottom-color: #757575;
}
.popover.popover-content.bs-popover-bottom .arrow::after, .popover.popover-content.bs-popover-bottom-right .arrow::after, .popover.popover-content.bs-popover-bottom-left .arrow::after {
  top: 0rem !important;
  border-bottom-color: #757575;
}
.popover.popover-content.bs-popover-bottom .popover-header::before, .popover.popover-content.bs-popover-bottom-right .popover-header::before, .popover.popover-content.bs-popover-bottom-left .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 2.2rem;
  margin-left: calc(2.2rem / -2);
  content: "";
  border-bottom: 0rem solid #6d6d6d;
}
.popover.popover-content.bs-popover-top-right, .popover.popover-content.bs-popover-bottom-right {
  transform: translateX(-2rem);
}
.popover.popover-content.bs-popover-top-right .arrow, .popover.popover-content.bs-popover-bottom-right .arrow {
  left: 0.9rem;
}
.popover.popover-content.bs-popover-top-left, .popover.popover-content.bs-popover-bottom-left {
  transform: translateX(2rem);
}
.popover.popover-content.bs-popover-top-left .arrow, .popover.popover-content.bs-popover-bottom-left .arrow {
  right: 0.9rem;
}

/*# sourceMappingURL=popover-content.component.css.map */