/* * # Semantic UI * https://github.com/Semantic-Org/Semantic-UI * http://www.semantic-ui.com/ * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Popup
*******************************/
.ui.popup {
display: none; position: absolute; top: 0px; right: 0px; z-index: 900; border: 1px solid #cccccc; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; max-width: 250px; background-color: #ffffff; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: rgba(0, 0, 0, 0.8); border-radius: 0.2857rem; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
} .ui.popup > .header {
padding: 0em; font-family: 'Lato', '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 0px 0px #b3b3b3;
}
/*******************************
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;
}
/*————–
Pointer
—————*/
/*— Below —*/
.ui.bottom.center.popup:before {
margin-left: -0.325em; top: -0.325em; left: 50%; right: auto; bottom: auto; box-shadow: -1px -1px 0px 0px #b3b3b3;
} .ui.bottom.left.popup {
margin-left: 0em;
} .ui.bottom.left.popup:before {
top: -0.325em; left: 1em; right: auto; bottom: auto; margin-left: 0em; box-shadow: -1px -1px 0px 0px #b3b3b3;
} .ui.bottom.right.popup {
margin-right: 0em;
} .ui.bottom.right.popup:before {
top: -0.325em; right: 1em; bottom: auto; left: auto; margin-left: 0em; box-shadow: -1px -1px 0px 0px #b3b3b3;
}
/*— Above —*/
.ui.top.center.popup:before {
top: auto; right: auto; bottom: -0.325em; left: 50%; margin-left: -0.325em;
} .ui.top.left.popup {
margin-left: 0em;
} .ui.top.left.popup:before {
bottom: -0.325em; left: 1em; top: auto; right: auto; margin-left: 0em;
} .ui.top.right.popup {
margin-right: 0em;
} .ui.top.right.popup:before {
bottom: -0.325em; right: 1em; top: auto; left: auto; margin-left: 0em;
}
/*— Left Center —*/
.ui.left.center.popup:before {
top: 50%; right: -0.325em; bottom: auto; left: auto; margin-top: -0.325em; box-shadow: 1px -1px 0px 0px #b3b3b3;
}
/*— Right Center —*/
.ui.right.center.popup:before {
top: 50%; left: -0.325em; bottom: auto; right: auto; margin-top: -0.325em; box-shadow: -1px 1px 0px 0px #b3b3b3;
}
/*******************************
Coupling
*******************************/
/* Immediate Nested Grid */ .ui.popup > .ui.grid:not(.padded) {
width: -webkit-calc(100% + 1.75rem); width: calc(100% + 1.75rem); margin: -0.7rem -0.875rem;
}
/*******************************
States
*******************************/
.ui.loading.popup {
display: block; visibility: hidden; z-index: -1;
} .ui.animating.popup, .ui.visible.popup {
display: block;
}
/*******************************
Variations
*******************************/
/*————–
Basic
—————*/
.ui.basic.popup:before {
display: none;
}
/*————–
Wide
—————*/
.ui.wide.popup {
width: 350px; max-width: 350px;
} .ui[class*=“very wide”].popup {
width: 550px; max-width: 550px;
}
/*————–
Fluid
—————*/
.ui.fluid.popup {
width: 100%; max-width: none;
}
/*————–
Colors
—————*/
/* Inverted colors */ .ui.inverted.popup {
background: #1b1c1d; color: #ffffff; border: none; box-shadow: none;
} .ui.inverted.popup .header {
background-color: none; color: #ffffff;
} .ui.inverted.popup:before {
background-color: #1b1c1d; box-shadow: none !important;
}
/*————–
Flowing
—————*/
.ui.flowing.popup {
max-width: none;
}
/*————–
Sizes
—————*/
.ui.small.popup {
font-size: 0.785714rem;
} .ui.popup {
font-size: 0.85714rem;
} .ui.large.popup {
font-size: 1rem;
} .ui.huge.popup {
font-size: 1.14285rem;
}
/*******************************
Theme Overrides
*******************************/
/*******************************
User Overrides
*******************************/