/*
* # Semantic - Popup * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Theme
*******************************/
@type : ‘module’; @element : ‘popup’;
@import ‘../../theme.config’;
/*******************************
Popup
*******************************/
.ui.popup {
display: none; position: absolute; top: 0px; right: 0px; z-index: @zIndex; border: @border; min-width: max-content; 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 {
width: @wideWidth; max-width: @wideWidth;
} .ui[class*=“very wide”].popup {
width: @veryWideWidth; 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();