/* *= depend_on semantic_ui/theme.config *= depend_on semantic_ui/config/modules/popup.overrides *= depend_on semantic_ui/config/modules/popup.variables */ /*! * # Semantic UI - Popup * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ @type : 'module'; @element : 'popup'; @import (multiple) 'semantic_ui/theme.config'; /******************************* Popup *******************************/ .ui.popup { display: none; position: absolute; top: 0px; right: 0px; z-index: @zIndex; border: @border; max-width: @maxWidth; background-color: @background; padding: @verticalPadding @horizontalPadding; font-weight: @fontWeight; font-style: @fontStyle; color: @color; border-radius: @borderRadius; box-shadow: @boxShadow; } .ui.popup > .header { padding: 0em; font-family: @headerFont; font-size: @headerFontSize; line-height: @headerLineHeight; font-weight: bold; } .ui.popup > .header + .content { padding-top: @headerDistance; } .ui.popup:before { position: absolute; content: ''; width: @arrowSize; height: @arrowSize; background: @arrowBackground; transform: rotate(45deg); z-index: @arrowZIndex; box-shadow: @arrowBoxShadow; } /******************************* Types *******************************/ /*-------------- Spacing ---------------*/ .ui.popup { margin: 0em; } .ui.popup.bottom { margin: @popupDistanceAway 0em 0em; } .ui.popup.top { margin: 0em 0em @popupDistanceAway; } .ui.popup.left.center { margin: 0em @popupDistanceAway 0em 0em; } .ui.popup.right.center { margin: 0em 0em 0em @popupDistanceAway; } /*-------------- Pointer ---------------*/ /*--- Below ---*/ .ui.bottom.center.popup:before { margin-left: @arrowOffset; top: @arrowOffset; left: 50%; right: auto; bottom: auto; box-shadow: @bottomArrowBoxShadow; } .ui.bottom.left.popup { margin-left: @boxArrowOffset; } .ui.bottom.left.popup:before { top: @arrowOffset; left: @arrowDistanceFromEdge; right: auto; bottom: auto; margin-left: 0em; box-shadow: @bottomArrowBoxShadow; } .ui.bottom.right.popup { margin-right: @boxArrowOffset; } .ui.bottom.right.popup:before { top: @arrowOffset; right: @arrowDistanceFromEdge; bottom: auto; left: auto; margin-left: 0em; box-shadow: @bottomArrowBoxShadow; } /*--- Above ---*/ .ui.top.center.popup:before { top: auto; right: auto; bottom: @arrowOffset; left: 50%; margin-left: @arrowOffset; } .ui.top.left.popup { margin-left: @boxArrowOffset; } .ui.top.left.popup:before { bottom: @arrowOffset; left: @arrowDistanceFromEdge; top: auto; right: auto; margin-left: 0em; } .ui.top.right.popup { margin-right: @boxArrowOffset; } .ui.top.right.popup:before { bottom: @arrowOffset; right: @arrowDistanceFromEdge; top: auto; left: auto; margin-left: 0em; } /*--- Left Center ---*/ .ui.left.center.popup:before { top: 50%; right: @arrowOffset; bottom: auto; left: auto; margin-top: @arrowOffset; box-shadow: @leftArrowBoxShadow; } /*--- Right Center ---*/ .ui.right.center.popup:before { top: 50%; left: @arrowOffset; bottom: auto; right: auto; margin-top: @arrowOffset; box-shadow: @rightArrowBoxShadow; } /******************************* Coupling *******************************/ /* Immediate Nested Grid */ .ui.popup > .ui.grid:not(.padded) { width: @nestedGridWidth; margin: @nestedGridMargin; } /******************************* States *******************************/ .ui.loading.popup { display: block; visibility: hidden; z-index: @loadingZIndex; } .ui.animating.popup, .ui.visible.popup { display: block; } /******************************* Variations *******************************/ /*-------------- Basic ---------------*/ .ui.basic.popup:before { display: none; } /*-------------- Wide ---------------*/ .ui.wide.popup { max-width: @wideWidth; } .ui[class*="very wide"].popup { max-width: @veryWideWidth; } /*-------------- Fluid ---------------*/ .ui.fluid.popup { width: 100%; max-width: none; } /*-------------- Colors ---------------*/ /* Inverted colors */ .ui.inverted.popup { background: @invertedBackground; color: @invertedColor; border: @invertedBorder; box-shadow: @invertedBoxShadow; } .ui.inverted.popup .header { background-color: @invertedHeaderBackground; color: @invertedHeaderColor; } .ui.inverted.popup:before { background-color: @invertedArrowColor; box-shadow: none !important; } /*-------------- Flowing ---------------*/ .ui.flowing.popup { max-width: none; } /*-------------- Sizes ---------------*/ .ui.small.popup { font-size: @small; } .ui.popup { font-size: @medium; } .ui.large.popup { font-size: @large; } .ui.huge.popup { font-size: @huge; } .loadUIOverrides();