@adobe/coral-spectrum/coral-component-popover/src/styles/index.css

Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.

/**
 * Copyright 2019 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
._coral-Popover {
  visibility: hidden;

  opacity: 0;

  transition: transform 130ms ease-in-out,
              opacity 130ms ease-in-out,
              visibility 0ms linear 130ms;

  pointer-events: none;
}
._coral-Popover.is-open {
  visibility: visible;

  opacity: 1;

  transition-delay: 0ms;

  pointer-events: auto;
}
._coral-Popover--bottom.is-open {
  transform: translateY(6px);
}
._coral-Popover--top.is-open {
  transform: translateY(-6px);
}
._coral-Popover--right.is-open {
  transform: translateX(6px);
}
._coral-Popover--left.is-open {
  transform: translateX(-6px);
}
._coral-Popover {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-direction: column;
      flex-direction: column;
  box-sizing: border-box;

  min-width: 32px;
  min-height: 32px;

  position: absolute;

  border-style: solid;
  border-width: 1px;
  border-radius: 4px;

  outline: none;
}
._coral-Popover-tip {
  position: absolute;
  overflow: hidden;
  width: 21px;
  height: 11px;
}
._coral-Popover-tip::after {
    content: '';
    width: 20px;
    height: 20px;
    border-width: 1px;
    border-style: solid;
    position: absolute;
    transform: rotate(45deg);
    top: -18px;
    left: -1px;
  }
._coral-Popover--dialog {
  min-width: 270px;
  padding: 30px 29px;
}
._coral-Popover--left._coral-Popover--withTip {
    margin-right: 13px;
  }
._coral-Popover--left ._coral-Popover-tip {
    right: -16px;
    transform: rotate(-90deg);
  }
._coral-Popover--right._coral-Popover--withTip {
    margin-left: 13px;
  }
._coral-Popover--right ._coral-Popover-tip {
    left: -16px;
    transform: rotate(90deg);
  }
._coral-Popover--left ._coral-Popover-tip, ._coral-Popover--right ._coral-Popover-tip {
    top: 50%;
    margin-top: -6px;
  }
._coral-Popover--bottom._coral-Popover--withTip {
    margin-top: 13px;
  }
._coral-Popover--bottom ._coral-Popover-tip {
    top: -11px;
    transform: rotate(180deg);
  }
._coral-Popover--top._coral-Popover--withTip {
    margin-bottom: 13px;
  }
._coral-Popover--top ._coral-Popover-tip {
    bottom: -11px;
  }
._coral-Popover--bottom ._coral-Popover-tip, ._coral-Popover--top ._coral-Popover-tip {
    left: 50%;
    margin-left: -12px;
  }
._coral-Popover._coral-Popover--dialog ._coral-Dialog-typeIcon {
      margin-left: 16px;
    }

.coral--large ._coral-Popover {

  transition: transform 130ms ease-in-out,
              opacity 130ms ease-in-out,
              visibility 0ms linear 130ms;
}
.coral--large ._coral-Popover--bottom.is-open {
  transform: translateY(8px);
}
.coral--large ._coral-Popover--top.is-open {
  transform: translateY(-8px);
}
.coral--large ._coral-Popover--right.is-open {
  transform: translateX(8px);
}
.coral--large ._coral-Popover--left.is-open {
  transform: translateX(-8px);
}
.coral--large ._coral-Popover {

  min-width: 40px;
  min-height: 40px;
  border-width: 1px;
  border-radius: 5px;
}
.coral--large ._coral-Popover-tip {
  width: 26px;
  height: 13.5px;
}
.coral--large ._coral-Popover-tip::after {
    width: 25px;
    height: 25px;
    border-width: 1px;
  }
.coral--large ._coral-Popover--dialog {
  min-width: 270px;
  padding: 30px 29px;
}
.coral--large ._coral-Popover--left._coral-Popover--withTip {
    margin-right: 13px;
  }
.coral--large ._coral-Popover--right._coral-Popover--withTip {
    margin-left: 13px;
  }
.coral--large ._coral-Popover--bottom._coral-Popover--withTip {
    margin-top: 13px;
  }
.coral--large ._coral-Popover--top._coral-Popover--withTip {
    margin-bottom: 13px;
  }
.coral--large ._coral-Popover._coral-Popover--dialog ._coral-Dialog-typeIcon {
      margin-left: 20px;
    }

.coral--light ._coral-Popover {
  background-color: rgb(255, 255, 255);
  border-color: rgb(202, 202, 202);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.coral--light ._coral-Popover ._coral-Dialog-header,
.coral--light ._coral-Popover ._coral-Dialog-footer,
.coral--light ._coral-Popover ._coral-Dialog-wrapper {
    background-color: transparent;
  }
.coral--light ._coral-Popover ._coral-Popover-tip::after {
    background-color: rgb(255, 255, 255);
    border-color: rgb(202, 202, 202);
    box-shadow: -1px -1px 4px rgba(0,0,0,0.15);
  }

.coral--lightest ._coral-Popover {
  background-color: rgb(255, 255, 255);
  border-color: rgb(211, 211, 211);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.coral--lightest ._coral-Popover ._coral-Dialog-header,
.coral--lightest ._coral-Popover ._coral-Dialog-footer,
.coral--lightest ._coral-Popover ._coral-Dialog-wrapper {
    background-color: transparent;
  }
.coral--lightest ._coral-Popover ._coral-Popover-tip::after {
    background-color: rgb(255, 255, 255);
    border-color: rgb(211, 211, 211);
    box-shadow: -1px -1px 4px rgba(0,0,0,0.15);
  }

.coral--dark ._coral-Popover {
  background-color: rgb(37, 37, 37);
  border-color: rgb(90, 90, 90);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.coral--dark ._coral-Popover ._coral-Dialog-header,
.coral--dark ._coral-Popover ._coral-Dialog-footer,
.coral--dark ._coral-Popover ._coral-Dialog-wrapper {
    background-color: transparent;
  }
.coral--dark ._coral-Popover ._coral-Popover-tip::after {
    background-color: rgb(37, 37, 37);
    border-color: rgb(90, 90, 90);
    box-shadow: -1px -1px 4px rgba(0,0,0,0.5);
  }

.coral--darkest ._coral-Popover {
  background-color: rgb(8, 8, 8);
  border-color: rgb(73, 73, 73);
  box-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.coral--darkest ._coral-Popover ._coral-Dialog-header,
.coral--darkest ._coral-Popover ._coral-Dialog-footer,
.coral--darkest ._coral-Popover ._coral-Dialog-wrapper {
    background-color: transparent;
  }
.coral--darkest ._coral-Popover ._coral-Popover-tip::after {
    background-color: rgb(8, 8, 8);
    border-color: rgb(73, 73, 73);
    box-shadow: -1px -1px 4px rgba(0,0,0,0.8);
  }

coral-popover {
  display: none;
}
coral-popover-footer,coral-popover-separator {
  display: block;
}
._coral-Popover {
  transition: left 130ms cubic-bezier(.45, 0, .40, 1), top 130ms cubic-bezier(.45, 0, .40, 1), opacity 130ms cubic-bezier(.45, 0, .40, 1), visibility 0ms cubic-bezier(0, 0, 1, 1) 130ms;
}
.coral--large ._coral-Popover {
  transition: left 130ms cubic-bezier(.45, 0, .40, 1), top 130ms cubic-bezier(.45, 0, .40, 1), opacity 130ms cubic-bezier(.45, 0, .40, 1), visibility 0ms cubic-bezier(0, 0, 1, 1) 130ms;
}
._coral-Popover:not(._coral-Popover--dialog) {
  min-width: 150px;
}
._coral-Popover:not(._coral-Popover--dialog) ._coral-Dialog-content {
  padding: 0;
  margin: 0;
}