/*! * # Semantic UI 2.0.0 - Popup * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Popup *******************************/ .ui.popup { display: none; position: absolute; top: 0px; right: 0px; /* Fixes content being squished when inline (moz only) */ min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; z-index: 1900; border: 1px solid #d4d4d5; line-height: 1.4285em; max-width: 250px; background-color: #ffffff; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: rgba(0, 0, 0, 0.87); border-radius: 0.28571429rem; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08); } .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 #bababc; } /******************************* Types *******************************/ /*-------------- Spacing ---------------*/ .ui.popup { margin: 0em; } /* Extending from Top */ .ui.top.popup { margin: 0em 0em 0.75em; } .ui.top.left.popup { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; } .ui.top.center.popup { -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } .ui.top.right.popup { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; } /* Extending from Vertical Center */ .ui.left.center.popup { margin: 0em 0.75em 0em 0em; -webkit-transform-origin: right 50%; -ms-transform-origin: right 50%; transform-origin: right 50%; } .ui.right.center.popup { margin: 0em 0em 0em 0.75em; -webkit-transform-origin: left 50%; -ms-transform-origin: left 50%; transform-origin: left 50%; } /* Extending from Bottom */ .ui.bottom.popup { margin: 0.75em 0em 0em; } .ui.bottom.left.popup { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .ui.bottom.center.popup { -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; } .ui.bottom.right.popup { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; } /*-------------- 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 #bababc; } .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 #bababc; } .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 #bababc; } /*--- 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 #bababc; } /*--- 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 #bababc; } /******************************* Coupling *******************************/ /* Immediate Nested Grid */ .ui.popup > .ui.grid:not(.padded) { 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; } .ui.visible.popup { -webkit-transform: translateZ(0px); transform: translateZ(0px); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /******************************* Variations *******************************/ /*-------------- Basic ---------------*/ .ui.basic.popup:before { display: none; } /*-------------- Wide ---------------*/ .ui.wide.popup { max-width: 350px; } .ui[class*="very wide"].popup { 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.mini.popup { font-size: 0.71428571rem; } .ui.tiny.popup { font-size: 0.85714286rem; } .ui.small.popup { font-size: 0.92857143rem; } .ui.popup { font-size: 1rem; } .ui.large.popup { font-size: 1.14285714rem; } .ui.huge.popup { font-size: 1.42857143rem; } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/