/*! * # Fomantic-UI 2.8.8 - Popup * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Popup *******************************/ .ui.popup { display: none; position: absolute; top: 0; right: 0; /* 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: #FFFFFF; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: rgba(0, 0, 0, 0.87); border-radius: 0.33333333rem; -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); } .ui.popup > .header { padding: 0; font-family: 'Raleway', sans-serif; font-size: 1.16666667em; line-height: 1.2; font-weight: bold; } .ui.popup > .header + .content { padding-top: 0.58333333em; } .ui.popup:before { position: absolute; content: ''; width: 0.83333333em; height: 0.83333333em; background: #FFFFFF; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 1901; -webkit-box-shadow: 1px 1px 0 0 #bababc; box-shadow: 1px 1px 0 0 #bababc; } /******************************* Types *******************************/ /*-------------- Tooltip ---------------*/ /* Content */ [data-tooltip] { position: relative; } /* Arrow */ [data-tooltip]:before { pointer-events: none; position: absolute; content: ''; font-size: 1rem; width: 0.83333333em; height: 0.83333333em; background: #FFFFFF; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 1901; -webkit-box-shadow: 1px 1px 0 0 #bababc; box-shadow: 1px 1px 0 0 #bababc; } /* Popup */ [data-tooltip]:after { pointer-events: none; content: attr(data-tooltip); position: absolute; text-transform: none; text-align: left; text-shadow: none; white-space: nowrap; font-size: 1rem; border: 1px solid #D4D4D5; line-height: 1.4285em; max-width: none; background: #FFFFFF; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: rgba(0, 0, 0, 0.87); border-radius: 0.33333333rem; -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); z-index: 1900; } /* Default Position (Top Center) */ [data-tooltip]:not([data-position]):before { top: auto; right: auto; bottom: 100%; left: 50%; background: #FFFFFF; margin-left: -0.08333333rem; margin-bottom: 0.16666667rem; } [data-tooltip]:not([data-position]):after { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 100%; margin-bottom: 0.58333333em; } /* Animation */ [data-tooltip]:before, [data-tooltip]:after { pointer-events: none; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.1s ease, -webkit-transform 0.1s ease; transition: opacity 0.1s ease, -webkit-transform 0.1s ease; transition: transform 0.1s ease, opacity 0.1s ease; transition: transform 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease; } [data-tooltip]:before { -webkit-transform: rotate(45deg) scale(0) !important; transform: rotate(45deg) scale(0) !important; -webkit-transform-origin: center top; transform-origin: center top; } [data-tooltip]:after { -webkit-transform-origin: center bottom; transform-origin: center bottom; } [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; pointer-events: auto; opacity: 1; } [data-tooltip]:hover:before { -webkit-transform: rotate(45deg) scale(1) !important; transform: rotate(45deg) scale(1) !important; } /* Animation Position */ [data-tooltip]:after, [data-tooltip][data-position="top center"]:after, [data-tooltip][data-position="bottom center"]:after { -webkit-transform: translateX(-50%) scale(0) !important; transform: translateX(-50%) scale(0) !important; } [data-tooltip]:hover:after, [data-tooltip][data-position="bottom center"]:hover:after { -webkit-transform: translateX(-50%) scale(1) !important; transform: translateX(-50%) scale(1) !important; } [data-tooltip][data-position="left center"]:after, [data-tooltip][data-position="right center"]:after { -webkit-transform: translateY(-50%) scale(0) !important; transform: translateY(-50%) scale(0) !important; } [data-tooltip][data-position="left center"]:hover:after, [data-tooltip][data-position="right center"]:hover:after { -webkit-transform: translateY(-50%) scale(1) !important; transform: translateY(-50%) scale(1) !important; -moz-transform: translateY(-50%) scale(1.0001) !important; } [data-tooltip][data-position="top left"]:after, [data-tooltip][data-position="top right"]:after, [data-tooltip][data-position="bottom left"]:after, [data-tooltip][data-position="bottom right"]:after { -webkit-transform: scale(0) !important; transform: scale(0) !important; } [data-tooltip][data-position="top left"]:hover:after, [data-tooltip][data-position="top right"]:hover:after, [data-tooltip][data-position="bottom left"]:hover:after, [data-tooltip][data-position="bottom right"]:hover:after { -webkit-transform: scale(1) !important; transform: scale(1) !important; } [data-tooltip][data-variation~="fixed"]:after { white-space: normal; width: 250px; } [data-tooltip][data-variation*="wide fixed"]:after { width: 350px; } [data-tooltip][data-variation*="very wide fixed"]:after { width: 550px; } @media only screen and (max-width: 1023.98px) { [data-tooltip][data-variation~="fixed"]:after { width: 250px; } } /*-------------- Inverted ---------------*/ /* Arrow */ [data-tooltip][data-inverted]:before { -webkit-box-shadow: none !important; box-shadow: none !important; } /* Arrow Position */ [data-tooltip][data-inverted]:before { background: #1B1C1D; } /* Popup */ [data-tooltip][data-inverted]:after { background: #1B1C1D; color: #FFFFFF; border: none; -webkit-box-shadow: none; box-shadow: none; } [data-tooltip][data-inverted]:after .header { background: none; color: #FFFFFF; } /*-------------- Position ---------------*/ [data-position~="top"][data-tooltip]:before { background: #FFFFFF; } /* Top Center */ [data-position="top center"][data-tooltip]:after { top: auto; right: auto; left: 50%; bottom: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin-bottom: 0.58333333em; } [data-position="top center"][data-tooltip]:before { top: auto; right: auto; bottom: 100%; left: 50%; background: #FFFFFF; margin-left: -0.08333333rem; margin-bottom: 0.16666667rem; } /* Top Left */ [data-position="top left"][data-tooltip]:after { top: auto; right: auto; left: 0; bottom: 100%; margin-bottom: 0.58333333em; } [data-position="top left"][data-tooltip]:before { top: auto; right: auto; bottom: 100%; left: 1em; margin-left: -0.08333333rem; margin-bottom: 0.16666667rem; } /* Top Right */ [data-position="top right"][data-tooltip]:after { top: auto; left: auto; right: 0; bottom: 100%; margin-bottom: 0.58333333em; } [data-position="top right"][data-tooltip]:before { top: auto; left: auto; bottom: 100%; right: 1em; margin-left: -0.08333333rem; margin-bottom: 0.16666667rem; } [data-position~="bottom"][data-tooltip]:before { background: #FFFFFF; -webkit-box-shadow: -1px -1px 0 0 #bababc; box-shadow: -1px -1px 0 0 #bababc; } /* Bottom Center */ [data-position="bottom center"][data-tooltip]:after { bottom: auto; right: auto; left: 50%; top: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin-top: 0.58333333em; } [data-position="bottom center"][data-tooltip]:before { bottom: auto; right: auto; top: 100%; left: 50%; margin-left: -0.08333333rem; margin-top: 0.36666667em; -webkit-transform-origin: center top; transform-origin: center top; } /* Bottom Left */ [data-position="bottom left"][data-tooltip]:after { left: 0; top: 100%; margin-top: 0.58333333em; } [data-position="bottom left"][data-tooltip]:before { bottom: auto; right: auto; top: 100%; left: 1em; margin-left: -0.08333333rem; margin-top: 0.16666667rem; } /* Bottom Right */ [data-position="bottom right"][data-tooltip]:after { right: 0; top: 100%; margin-top: 0.58333333em; } [data-position="bottom right"][data-tooltip]:before { bottom: auto; left: auto; top: 100%; right: 1em; margin-left: -0.16666667rem; margin-top: 0.08333333rem; } /* Left Center */ [data-position="left center"][data-tooltip]:after { right: 100%; top: 50%; margin-right: 0.58333333em; -webkit-transform: translateY(-50%); transform: translateY(-50%); } [data-position="left center"][data-tooltip]:before { right: 100%; top: 50%; margin-top: -0.16666667rem; margin-right: -0.08333333rem; background: #FFFFFF; -webkit-box-shadow: 1px -1px 0 0 #bababc; box-shadow: 1px -1px 0 0 #bababc; } /* Right Center */ [data-position="right center"][data-tooltip]:after { left: 100%; top: 50%; margin-left: 0.58333333em; -webkit-transform: translateY(-50%); transform: translateY(-50%); } [data-position="right center"][data-tooltip]:before { left: 100%; top: 50%; margin-top: -0.08333333rem; margin-left: 0.16666667rem; background: #FFFFFF; -webkit-box-shadow: -1px 1px 0 0 #bababc; box-shadow: -1px 1px 0 0 #bababc; } /* Inverted Arrow Color */ [data-inverted][data-position~="bottom"][data-tooltip]:before { background: #1B1C1D; -webkit-box-shadow: -1px -1px 0 0 #bababc; box-shadow: -1px -1px 0 0 #bababc; } [data-inverted][data-position="left center"][data-tooltip]:before { background: #1B1C1D; -webkit-box-shadow: 1px -1px 0 0 #bababc; box-shadow: 1px -1px 0 0 #bababc; } [data-inverted][data-position="right center"][data-tooltip]:before { background: #1B1C1D; -webkit-box-shadow: -1px 1px 0 0 #bababc; box-shadow: -1px 1px 0 0 #bababc; } [data-inverted][data-position~="top"][data-tooltip]:before { background: #1B1C1D; } [data-position~="bottom"][data-tooltip]:before { -webkit-transform-origin: center bottom; transform-origin: center bottom; } [data-position~="bottom"][data-tooltip]:after { -webkit-transform-origin: center top; transform-origin: center top; } [data-position="left center"][data-tooltip]:before { -webkit-transform-origin: top center; transform-origin: top center; } [data-position="left center"][data-tooltip]:after { -webkit-transform-origin: right center; transform-origin: right center; } [data-position="right center"][data-tooltip]:before { -webkit-transform-origin: right center; transform-origin: right center; } [data-position="right center"][data-tooltip]:after { -webkit-transform-origin: left center; transform-origin: left center; } /*-------------- Basic ---------------*/ [data-tooltip][data-variation~="basic"]:before { display: none; } /*-------------- Spacing ---------------*/ .ui.popup { margin: 0; } /* Extending from Top */ .ui.top.popup { margin: 0 0 0.83333333em; } .ui.top.left.popup { -webkit-transform-origin: left bottom; transform-origin: left bottom; } .ui.top.center.popup { -webkit-transform-origin: center bottom; transform-origin: center bottom; } .ui.top.right.popup { -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Extending from Vertical Center */ .ui.left.center.popup { margin: 0 0.83333333em 0 0; -webkit-transform-origin: right 50%; transform-origin: right 50%; } .ui.right.center.popup { margin: 0 0 0 0.83333333em; -webkit-transform-origin: left 50%; transform-origin: left 50%; } /* Extending from Bottom */ .ui.bottom.popup { margin: 0.83333333em 0 0; } .ui.bottom.left.popup { -webkit-transform-origin: left top; transform-origin: left top; } .ui.bottom.center.popup { -webkit-transform-origin: center top; transform-origin: center top; } .ui.bottom.right.popup { -webkit-transform-origin: right top; transform-origin: right top; } /*-------------- Pointer ---------------*/ /*--- Below ---*/ .ui.bottom.center.popup:before { margin-left: -0.36666667em; top: -0.36666667em; left: 50%; right: auto; bottom: auto; -webkit-box-shadow: -1px -1px 0 0 #bababc; box-shadow: -1px -1px 0 0 #bababc; } .ui.bottom.left.popup { margin-left: 0; } /*rtl:rename*/ .ui.bottom.left.popup:before { top: -0.36666667em; left: 1em; right: auto; bottom: auto; margin-left: 0; -webkit-box-shadow: -1px -1px 0 0 #bababc; box-shadow: -1px -1px 0 0 #bababc; } .ui.bottom.right.popup { margin-right: 0; } /*rtl:rename*/ .ui.bottom.right.popup:before { top: -0.36666667em; right: 1em; bottom: auto; left: auto; margin-left: 0; -webkit-box-shadow: -1px -1px 0 0 #bababc; box-shadow: -1px -1px 0 0 #bababc; } /*--- Above ---*/ .ui.top.center.popup:before { top: auto; right: auto; bottom: -0.36666667em; left: 50%; margin-left: -0.36666667em; } .ui.top.left.popup { margin-left: 0; } /*rtl:rename*/ .ui.top.left.popup:before { bottom: -0.36666667em; left: 1em; top: auto; right: auto; margin-left: 0; } .ui.top.right.popup { margin-right: 0; } /*rtl:rename*/ .ui.top.right.popup:before { bottom: -0.36666667em; right: 1em; top: auto; left: auto; margin-left: 0; } /*--- Left Center ---*/ /*rtl:rename*/ .ui.left.center.popup:before { top: 50%; right: -0.36666667em; bottom: auto; left: auto; margin-top: -0.36666667em; -webkit-box-shadow: 1px -1px 0 0 #bababc; box-shadow: 1px -1px 0 0 #bababc; } /*--- Right Center ---*/ /*rtl:rename*/ .ui.right.center.popup:before { top: 50%; left: -0.36666667em; bottom: auto; right: auto; margin-top: -0.36666667em; -webkit-box-shadow: -1px 1px 0 0 #bababc; box-shadow: -1px 1px 0 0 #bababc; } .ui.right.center.popup:before, .ui.left.center.popup:before { background: #FFFFFF; } /* Arrow Color By Location */ .ui.bottom.popup:before { background: #FFFFFF; } .ui.top.popup:before { background: #FFFFFF; } /* Inverted Arrow Color */ .ui.inverted.bottom.popup:before { background: #1B1C1D; } .ui.inverted.right.center.popup:before, .ui.inverted.left.center.popup:before { background: #1B1C1D; } .ui.inverted.top.popup:before { background: #1B1C1D; } /******************************* 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(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /******************************* Variations *******************************/ /*-------------- Basic ---------------*/ .ui.basic.popup:before { display: none; } .ui.fixed.popup { width: 250px; } /*-------------- Wide ---------------*/ .ui.wide.popup { max-width: 350px; } .ui.wide.popup.fixed { width: 350px; } .ui[class*="very wide"].popup { max-width: 550px; } .ui[class*="very wide"].popup.fixed { width: 550px; } @media only screen and (max-width: 1023.98px) { .ui.wide.popup, .ui[class*="very wide"].popup { max-width: 250px; } .ui.wide.popup.fixed, .ui[class*="very wide"].popup.fixed { width: 250px; } } /*-------------- Fluid ---------------*/ .ui.fluid.popup { width: 100%; max-width: none; } /*-------------- Colors ---------------*/ /* Inverted colors */ .ui.inverted.popup { background: #1B1C1D; color: #FFFFFF; border: none; -webkit-box-shadow: none; box-shadow: none; } .ui.inverted.popup .header { background-color: none; color: #FFFFFF; } .ui.inverted.popup:before { background-color: #1B1C1D; -webkit-box-shadow: none !important; box-shadow: none !important; } /*-------------- Flowing ---------------*/ .ui.flowing.popup { max-width: none; } /*-------------- Sizes ---------------*/ .ui.popup { font-size: 1rem; } .ui.mini.popup { font-size: 0.75rem; } [data-tooltip][data-variation~="mini"]:before, [data-tooltip][data-variation~="mini"]:after { font-size: 0.75rem; } .ui.tiny.popup { font-size: 0.83333333rem; } [data-tooltip][data-variation~="tiny"]:before, [data-tooltip][data-variation~="tiny"]:after { font-size: 0.83333333rem; } .ui.small.popup { font-size: 0.91666667rem; } [data-tooltip][data-variation~="small"]:before, [data-tooltip][data-variation~="small"]:after { font-size: 0.91666667rem; } .ui.large.popup { font-size: 1.16666667rem; } [data-tooltip][data-variation~="large"]:before, [data-tooltip][data-variation~="large"]:after { font-size: 1.16666667rem; } .ui.big.popup { font-size: 1.25rem; } [data-tooltip][data-variation~="big"]:before, [data-tooltip][data-variation~="big"]:after { font-size: 1.25rem; } .ui.huge.popup { font-size: 1.41666667rem; } [data-tooltip][data-variation~="huge"]:before, [data-tooltip][data-variation~="huge"]:after { font-size: 1.41666667rem; } .ui.massive.popup { font-size: 1.75rem; } [data-tooltip][data-variation~="massive"]:before, [data-tooltip][data-variation~="massive"]:after { font-size: 1.75rem; } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/