SemanSemantic-UItic-UI/build/uncompressed/definitions/modules/popup.css

/*
 * # Semantic - Popup
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributor
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */
/*******************************
            Theme
*******************************/
/*

███████╗███████╗███╗   ███╗ █████╗ ███╗   ██╗████████╗██╗ ██████╗    ██╗   ██╗██╗
██╔════╝██╔════╝████╗ ████║██╔══██╗████╗  ██║╚══██╔══╝██║██╔════╝    ██║   ██║██║
███████╗█████╗  ██╔████╔██║███████║██╔██╗ ██║   ██║   ██║██║         ██║   ██║██║
╚════██║██╔══╝  ██║╚██╔╝██║██╔══██║██║╚██╗██║   ██║   ██║██║         ██║   ██║██║
███████║███████╗██║ ╚═╝ ██║██║  ██║██║ ╚████║   ██║   ██║╚██████╗    ╚██████╔╝██║
╚══════╝╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝ ╚═════╝     ╚═════╝ ╚═╝

*/
/*******************************
           Folders
*******************************/
/* Path to theme packages */
/* Path to site override folder */
/*******************************
            Themes
*******************************/
/* To override a theme for an individual element
   specify theme name below

   Be sure to update the user folder name (see README)
*/
/* Global */
/* Elements */
/* Collections */
/* Modules */
/* Views */
/*******************************
        Import Directives
*******************************/
/*------------------
     Load Default
-------------------*/
/*******************************
         Site Settings
*******************************/
/*-------------------
        Paths
--------------------*/
/*-------------------
       Fonts
--------------------*/
/*-------------------
      Site Colors
--------------------*/
/*---  Colors  ---*/
/*-------------------
        Page
--------------------*/
/*-------------------
  Background Colors
--------------------*/
/* Used for differentiating neutrals */
/* Used for differentiating layers */
/*-------------------
        Grid
--------------------*/
/*-------------------
     Breakpoints
--------------------*/
/*******************************
           Power-User
*******************************/
/*-------------------
       Icons
--------------------*/
/* Max Width of Icon */
/*-------------------
       Easing
--------------------*/
/*---  Light Variations  ---*/
/*---   Neutrals  ---*/
/*--- Colored Backgrounds ---*/
/*--- Colored Text ---*/
/*--- Colored Headers ---*/
/*-------------------
    Emotive Colors
--------------------*/
/* Mood */
/* Solid Background Color */
/* Status */
/* Darkened Headers */
/*-------------------
     Neutral Text
--------------------*/
/*-------------------
     Brand Colors
--------------------*/
/*-------------------
    Grid Columns
--------------------*/
/*-------------------
      Borders
--------------------*/
/*-------------------
        Sizes
--------------------*/
/*-------------------
     Transitions
--------------------*/
/*******************************
           States
*******************************/
/*-------------------
      Disabled
--------------------*/
/*-------------------
        Hover
--------------------*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Neutrals  ---*/
/*-------------------
    Down (:active)
--------------------*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Neutrals  ---*/
/*-------------------
        Active
--------------------*/
/*---  Standard  ---*/
/*---  Emotive  ---*/
/*---  Neutrals  ---*/
/*******************************
             Popup
*******************************/
/*-------------------
       Element
--------------------*/
/*-------------------
       Parts
--------------------*/
/* Placement */
/* Header */
/* Arrow */
/*-------------------
       Coupling
--------------------*/
/*-------------------
       States
--------------------*/
/*-------------------
       Variations
--------------------*/
/* Wide */
/* Inverted */
/* Sizes */
/*------------------
     Load Theme
-------------------*/
/*------------------
     Load Site
-------------------*/
/*******************************
     User Global Variables
*******************************/
/*******************************
    User Variable Overrides
*******************************/
/*------------------
 Override Mix-in
-------------------*/
/*******************************
            Popup
*******************************/
.ui.popup {
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 900;
  border: 1px solid rgba(0, 0, 0, 0.1);
  max-width: 250px;
  background-color: #ffffff;
  padding: 0.8em 1.2em;
  font-weight: normal;
  font-style: normal;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 0.2em;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
.ui.popup .header {
  padding: 0em;
  font-family: 'Open Sans', "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 1.125em;
  line-height: 1.2;
  font-weight: bold;
}
.ui.popup .header + .content {
  padding-top: 0.5em;
}
.ui.popup:before {
  position: absolute;
  content: '';
  width: 0.75em;
  height: 0.75em;
  background: #ffffff;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 2;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.ui.popup .ui.button {
  width: 100%;
}
/*******************************
            Types
*******************************/
/*--------------
     Spacing
---------------*/
.ui.popup {
  margin: 0em;
}
.ui.popup.bottom {
  margin: 0.75em 0em 0em;
}
.ui.popup.top {
  margin: 0em 0em 0.75em;
}
.ui.popup.left.center {
  margin: 0em 0.75em 0em 0em;
}
.ui.popup.right.center {
  margin: 0em 0em 0em 0.75em;
}
.ui.popup.center {
  margin-left: -1.25em;
}
/*--------------
     Pointer
---------------*/
/*--- Below ---*/
.ui.bottom.center.popup:before {
  margin-left: -0.375em;
  top: -0.375em;
  left: 50%;
  right: auto;
  bottom: auto;
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}
.ui.bottom.left.popup {
  margin-left: 0em;
}
.ui.bottom.left.popup:before {
  top: -0.375em;
  left: 1em;
  right: auto;
  bottom: auto;
  margin-left: 0em;
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}
.ui.bottom.right.popup {
  margin-right: 0em;
}
.ui.bottom.right.popup:before {
  top: -0.375em;
  right: 1em;
  bottom: auto;
  left: auto;
  margin-left: 0em;
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}
/*--- Above ---*/
.ui.top.center.popup:before {
  top: auto;
  right: auto;
  bottom: -0.375em;
  left: 50%;
  margin-left: -0.375em;
}
.ui.top.left.popup {
  margin-left: 0em;
}
.ui.top.left.popup:before {
  bottom: -0.375em;
  left: 1em;
  top: auto;
  right: auto;
  margin-left: 0em;
}
.ui.top.right.popup {
  margin-right: 0em;
}
.ui.top.right.popup:before {
  bottom: -0.375em;
  right: 1em;
  top: auto;
  left: auto;
  margin-left: 0em;
}
/*--- Left Center ---*/
.ui.left.center.popup:before {
  top: 50%;
  right: -0.375em;
  bottom: auto;
  left: auto;
  margin-top: -0.375em;
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
}
/*--- Right Center  ---*/
.ui.right.center.popup:before {
  top: 50%;
  left: -0.375em;
  bottom: auto;
  right: auto;
  margin-top: -0.375em;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
}
/*******************************
            States
*******************************/
.ui.loading.popup {
  display: block;
  visibility: hidden;
  z-index: -1;
}
.ui.animating.popup,
.ui.visible.popup {
  display: block;
}
/*******************************
            Variations
*******************************/
/*--------------
     Wide
---------------*/
.ui.wide.popup {
  width: 350px;
  max-width: 350px;
}
.ui.very.wide.popup {
  width: 550px;
  max-width: 550px;
}
/*--------------
     Fluid
---------------*/
.ui.fluid.popup {
  width: 100%;
  max-width: 99999px;
}
/*--------------
     Colors
---------------*/
/* Inverted colors  */
.ui.inverted.popup {
  background: #191919;
  color: #ffffff;
  border: none;
  box-shadow: none;
}
.ui.inverted.popup .header {
  background-color: none;
  color: #ffffff;
}
.ui.inverted.popup:before {
  background-color: #191919;
  box-shadow: none;
}
/*--------------
     Sizes
---------------*/
.ui.small.popup {
  font-size: 0.8rem;
}
.ui.popup {
  font-size: 0.875rem;
}
.ui.large.popup {
  font-size: 1rem;
}
.ui.huge.popup {
  font-size: 1.1rem;
}
/*******************************
           Overrides
*******************************/
/*******************************
        User Overrides
*******************************/