github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/modules/popup.less (about) 1 /*! 2 * # Semantic UI - Popup 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Theme 15 *******************************/ 16 17 @type : 'module'; 18 @element : 'popup'; 19 20 @import (multiple) '../../theme.config'; 21 22 23 /******************************* 24 Popup 25 *******************************/ 26 27 .ui.popup { 28 display: none; 29 position: absolute; 30 top: 0px; 31 right: 0px; 32 33 /* Fixes content being squished when inline (moz only) */ 34 min-width: -moz-max-content; 35 36 z-index: @zIndex; 37 38 border: @border; 39 max-width: @maxWidth; 40 background-color: @background; 41 42 padding: @verticalPadding @horizontalPadding; 43 font-weight: @fontWeight; 44 font-style: @fontStyle; 45 color: @color; 46 47 border-radius: @borderRadius; 48 box-shadow: @boxShadow; 49 } 50 .ui.popup > .header { 51 padding: 0em; 52 53 font-family: @headerFont; 54 font-size: @headerFontSize; 55 line-height: @headerLineHeight; 56 font-weight: bold; 57 } 58 .ui.popup > .header + .content { 59 padding-top: @headerDistance; 60 } 61 62 .ui.popup:before { 63 position: absolute; 64 content: ''; 65 width: @arrowSize; 66 height: @arrowSize; 67 68 background: @arrowBackground; 69 transform: rotate(45deg); 70 71 z-index: @arrowZIndex; 72 box-shadow: @arrowBoxShadow; 73 } 74 75 /******************************* 76 Types 77 *******************************/ 78 79 /*-------------- 80 Spacing 81 ---------------*/ 82 83 .ui.popup { 84 margin: 0em; 85 } 86 .ui.popup.bottom { 87 margin: @popupDistanceAway 0em 0em; 88 } 89 .ui.popup.top { 90 margin: 0em 0em @popupDistanceAway; 91 } 92 .ui.popup.left.center { 93 margin: 0em @popupDistanceAway 0em 0em; 94 } 95 .ui.popup.right.center { 96 margin: 0em 0em 0em @popupDistanceAway; 97 } 98 99 /*-------------- 100 Pointer 101 ---------------*/ 102 103 /*--- Below ---*/ 104 .ui.bottom.center.popup:before { 105 margin-left: @arrowOffset; 106 top: @arrowOffset; 107 left: 50%; 108 right: auto; 109 bottom: auto; 110 box-shadow: @bottomArrowBoxShadow; 111 } 112 113 .ui.bottom.left.popup { 114 margin-left: @boxArrowOffset; 115 } 116 .ui.bottom.left.popup:before { 117 top: @arrowOffset; 118 left: @arrowDistanceFromEdge; 119 right: auto; 120 bottom: auto; 121 margin-left: 0em; 122 box-shadow: @bottomArrowBoxShadow; 123 } 124 125 .ui.bottom.right.popup { 126 margin-right: @boxArrowOffset; 127 } 128 .ui.bottom.right.popup:before { 129 top: @arrowOffset; 130 right: @arrowDistanceFromEdge; 131 bottom: auto; 132 left: auto; 133 margin-left: 0em; 134 box-shadow: @bottomArrowBoxShadow; 135 } 136 137 /*--- Above ---*/ 138 .ui.top.center.popup:before { 139 top: auto; 140 right: auto; 141 bottom: @arrowOffset; 142 left: 50%; 143 margin-left: @arrowOffset; 144 } 145 .ui.top.left.popup { 146 margin-left: @boxArrowOffset; 147 } 148 .ui.top.left.popup:before { 149 bottom: @arrowOffset; 150 left: @arrowDistanceFromEdge; 151 top: auto; 152 right: auto; 153 margin-left: 0em; 154 } 155 .ui.top.right.popup { 156 margin-right: @boxArrowOffset; 157 } 158 .ui.top.right.popup:before { 159 bottom: @arrowOffset; 160 right: @arrowDistanceFromEdge; 161 top: auto; 162 left: auto; 163 margin-left: 0em; 164 } 165 166 /*--- Left Center ---*/ 167 .ui.left.center.popup:before { 168 top: 50%; 169 right: @arrowOffset; 170 bottom: auto; 171 left: auto; 172 margin-top: @arrowOffset; 173 box-shadow: @leftArrowBoxShadow; 174 } 175 176 /*--- Right Center ---*/ 177 .ui.right.center.popup:before { 178 top: 50%; 179 left: @arrowOffset; 180 bottom: auto; 181 right: auto; 182 margin-top: @arrowOffset; 183 box-shadow: @rightArrowBoxShadow; 184 } 185 186 /******************************* 187 Coupling 188 *******************************/ 189 190 /* Immediate Nested Grid */ 191 .ui.popup > .ui.grid:not(.padded) { 192 width: @nestedGridWidth; 193 margin: @nestedGridMargin; 194 } 195 196 /******************************* 197 States 198 *******************************/ 199 200 .ui.loading.popup { 201 display: block; 202 visibility: hidden; 203 z-index: @loadingZIndex; 204 } 205 206 .ui.animating.popup, 207 .ui.visible.popup { 208 display: block; 209 } 210 211 212 /******************************* 213 Variations 214 *******************************/ 215 216 /*-------------- 217 Basic 218 ---------------*/ 219 220 .ui.basic.popup:before { 221 display: none; 222 } 223 224 225 /*-------------- 226 Wide 227 ---------------*/ 228 229 .ui.wide.popup { 230 max-width: @wideWidth; 231 } 232 .ui[class*="very wide"].popup { 233 max-width: @veryWideWidth; 234 } 235 236 237 /*-------------- 238 Fluid 239 ---------------*/ 240 241 .ui.fluid.popup { 242 width: 100%; 243 max-width: none; 244 } 245 246 247 /*-------------- 248 Colors 249 ---------------*/ 250 251 /* Inverted colors */ 252 .ui.inverted.popup { 253 background: @invertedBackground; 254 color: @invertedColor; 255 border: @invertedBorder; 256 box-shadow: @invertedBoxShadow; 257 } 258 .ui.inverted.popup .header { 259 background-color: @invertedHeaderBackground; 260 color: @invertedHeaderColor; 261 } 262 .ui.inverted.popup:before { 263 background-color: @invertedArrowColor; 264 box-shadow: none !important; 265 } 266 267 /*-------------- 268 Flowing 269 ---------------*/ 270 271 .ui.flowing.popup { 272 max-width: none; 273 } 274 275 276 /*-------------- 277 Sizes 278 ---------------*/ 279 280 .ui.small.popup { 281 font-size: @small; 282 } 283 .ui.popup { 284 font-size: @medium; 285 } 286 .ui.large.popup { 287 font-size: @large; 288 } 289 .ui.huge.popup { 290 font-size: @huge; 291 } 292 293 294 .loadUIOverrides();