github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/popup.css (about) 1 /*! 2 * # Semantic UI x.x - 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 Popup 15 *******************************/ 16 17 .ui.popup { 18 display: none; 19 position: absolute; 20 top: 0px; 21 right: 0px; 22 23 /* Fixes content being squished when inline (moz only) */ 24 min-width: -moz-max-content; 25 z-index: 1900; 26 border: 1px solid #cccccc; 27 max-width: 250px; 28 background-color: #ffffff; 29 padding: 0.833em 1em; 30 font-weight: normal; 31 font-style: normal; 32 color: rgba(0, 0, 0, 0.8); 33 border-radius: 0.2857rem; 34 box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); 35 } 36 .ui.popup > .header { 37 padding: 0em; 38 font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; 39 font-size: 1.125em; 40 line-height: 1.2; 41 font-weight: bold; 42 } 43 .ui.popup > .header + .content { 44 padding-top: 0.5em; 45 } 46 .ui.popup:before { 47 position: absolute; 48 content: ''; 49 width: 0.75em; 50 height: 0.75em; 51 background: #ffffff; 52 -webkit-transform: rotate(45deg); 53 -ms-transform: rotate(45deg); 54 transform: rotate(45deg); 55 z-index: 2; 56 box-shadow: 1px 1px 0px 0px #b3b3b3; 57 } 58 59 60 /******************************* 61 Types 62 *******************************/ 63 64 65 /*-------------- 66 Spacing 67 ---------------*/ 68 69 .ui.popup { 70 margin: 0em; 71 } 72 .ui.popup.bottom { 73 margin: 0.75em 0em 0em; 74 } 75 .ui.popup.top { 76 margin: 0em 0em 0.75em; 77 } 78 .ui.popup.left.center { 79 margin: 0em 0.75em 0em 0em; 80 } 81 .ui.popup.right.center { 82 margin: 0em 0em 0em 0.75em; 83 } 84 85 /*-------------- 86 Pointer 87 ---------------*/ 88 89 90 /*--- Below ---*/ 91 92 .ui.bottom.center.popup:before { 93 margin-left: -0.325em; 94 top: -0.325em; 95 left: 50%; 96 right: auto; 97 bottom: auto; 98 box-shadow: -1px -1px 0px 0px #b3b3b3; 99 } 100 .ui.bottom.left.popup { 101 margin-left: 0em; 102 } 103 .ui.bottom.left.popup:before { 104 top: -0.325em; 105 left: 1em; 106 right: auto; 107 bottom: auto; 108 margin-left: 0em; 109 box-shadow: -1px -1px 0px 0px #b3b3b3; 110 } 111 .ui.bottom.right.popup { 112 margin-right: 0em; 113 } 114 .ui.bottom.right.popup:before { 115 top: -0.325em; 116 right: 1em; 117 bottom: auto; 118 left: auto; 119 margin-left: 0em; 120 box-shadow: -1px -1px 0px 0px #b3b3b3; 121 } 122 123 /*--- Above ---*/ 124 125 .ui.top.center.popup:before { 126 top: auto; 127 right: auto; 128 bottom: -0.325em; 129 left: 50%; 130 margin-left: -0.325em; 131 } 132 .ui.top.left.popup { 133 margin-left: 0em; 134 } 135 .ui.top.left.popup:before { 136 bottom: -0.325em; 137 left: 1em; 138 top: auto; 139 right: auto; 140 margin-left: 0em; 141 } 142 .ui.top.right.popup { 143 margin-right: 0em; 144 } 145 .ui.top.right.popup:before { 146 bottom: -0.325em; 147 right: 1em; 148 top: auto; 149 left: auto; 150 margin-left: 0em; 151 } 152 153 /*--- Left Center ---*/ 154 155 .ui.left.center.popup:before { 156 top: 50%; 157 right: -0.325em; 158 bottom: auto; 159 left: auto; 160 margin-top: -0.325em; 161 box-shadow: 1px -1px 0px 0px #b3b3b3; 162 } 163 164 /*--- Right Center ---*/ 165 166 .ui.right.center.popup:before { 167 top: 50%; 168 left: -0.325em; 169 bottom: auto; 170 right: auto; 171 margin-top: -0.325em; 172 box-shadow: -1px 1px 0px 0px #b3b3b3; 173 } 174 175 176 /******************************* 177 Coupling 178 *******************************/ 179 180 181 /* Immediate Nested Grid */ 182 .ui.popup > .ui.grid:not(.padded) { 183 width: -webkit-calc(100% + 1.75rem); 184 width: calc(100% + 1.75rem); 185 margin: -0.7rem -0.875rem; 186 } 187 188 189 /******************************* 190 States 191 *******************************/ 192 193 .ui.loading.popup { 194 display: block; 195 visibility: hidden; 196 z-index: -1; 197 } 198 .ui.animating.popup, 199 .ui.visible.popup { 200 display: block; 201 } 202 203 204 /******************************* 205 Variations 206 *******************************/ 207 208 209 /*-------------- 210 Basic 211 ---------------*/ 212 213 .ui.basic.popup:before { 214 display: none; 215 } 216 217 /*-------------- 218 Wide 219 ---------------*/ 220 221 .ui.wide.popup { 222 max-width: 350px; 223 } 224 .ui[class*="very wide"].popup { 225 max-width: 550px; 226 } 227 228 /*-------------- 229 Fluid 230 ---------------*/ 231 232 .ui.fluid.popup { 233 width: 100%; 234 max-width: none; 235 } 236 237 /*-------------- 238 Colors 239 ---------------*/ 240 241 242 /* Inverted colors */ 243 .ui.inverted.popup { 244 background: #1b1c1d; 245 color: #ffffff; 246 border: none; 247 box-shadow: none; 248 } 249 .ui.inverted.popup .header { 250 background-color: none; 251 color: #ffffff; 252 } 253 .ui.inverted.popup:before { 254 background-color: #1b1c1d; 255 box-shadow: none !important; 256 } 257 258 /*-------------- 259 Flowing 260 ---------------*/ 261 262 .ui.flowing.popup { 263 max-width: none; 264 } 265 266 /*-------------- 267 Sizes 268 ---------------*/ 269 270 .ui.small.popup { 271 font-size: 0.785714rem; 272 } 273 .ui.popup { 274 font-size: 0.85714rem; 275 } 276 .ui.large.popup { 277 font-size: 1rem; 278 } 279 .ui.huge.popup { 280 font-size: 1.14285rem; 281 } 282 283 284 /******************************* 285 Theme Overrides 286 *******************************/ 287 288 289 290 /******************************* 291 User Overrides 292 *******************************/ 293