github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/reveal.css (about) 1 /*! 2 * # Semantic UI x.x - Reveal 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 Reveal 15 *******************************/ 16 17 .ui.reveal { 18 display: inline-block; 19 position: relative !important; 20 font-size: 0em !important; 21 } 22 .ui.reveal > .visible.content { 23 position: absolute !important; 24 top: 0em !important; 25 left: 0em !important; 26 z-index: 3 !important; 27 -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; 28 transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; 29 } 30 .ui.reveal > .hidden.content { 31 position: relative !important; 32 z-index: 2 !important; 33 } 34 35 /* Make sure hovered element is on top of other reveal */ 36 .ui.reveal:hover .visible.content { 37 z-index: 4 !important; 38 } 39 40 41 /******************************* 42 Types 43 *******************************/ 44 45 46 /*-------------- 47 Slide 48 ---------------*/ 49 50 .ui.slide.reveal { 51 position: relative !important; 52 overflow: hidden !important; 53 white-space: nowrap; 54 } 55 .ui.slide.reveal > .content { 56 display: block; 57 float: left; 58 margin: 0em; 59 -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; 60 transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; 61 } 62 .ui.slide.reveal > .visible.content { 63 position: relative !important; 64 } 65 .ui.slide.reveal > .hidden.content { 66 position: absolute !important; 67 left: 0% !important; 68 width: 100% !important; 69 -webkit-transform: translateX(100%) !important; 70 -ms-transform: translateX(100%) !important; 71 transform: translateX(100%) !important; 72 } 73 .ui.slide.reveal:hover > .visible.content { 74 -webkit-transform: translateX(-100%) !important; 75 -ms-transform: translateX(-100%) !important; 76 transform: translateX(-100%) !important; 77 } 78 .ui.slide.reveal:hover > .hidden.content { 79 -webkit-transform: translateX(0%) !important; 80 -ms-transform: translateX(0%) !important; 81 transform: translateX(0%) !important; 82 } 83 .ui.slide.right.reveal > .visible.content { 84 -webkit-transform: translateX(0%) !important; 85 -ms-transform: translateX(0%) !important; 86 transform: translateX(0%) !important; 87 } 88 .ui.slide.right.reveal > .hidden.content { 89 -webkit-transform: translateX(-100%) !important; 90 -ms-transform: translateX(-100%) !important; 91 transform: translateX(-100%) !important; 92 } 93 .ui.slide.right.reveal:hover > .visible.content { 94 -webkit-transform: translateX(100%) !important; 95 -ms-transform: translateX(100%) !important; 96 transform: translateX(100%) !important; 97 } 98 .ui.slide.right.reveal:hover > .hidden.content { 99 -webkit-transform: translateX(0%) !important; 100 -ms-transform: translateX(0%) !important; 101 transform: translateX(0%) !important; 102 } 103 .ui.slide.up.reveal > .hidden.content { 104 -webkit-transform: translateY(100%) !important; 105 -ms-transform: translateY(100%) !important; 106 transform: translateY(100%) !important; 107 } 108 .ui.slide.up.reveal:hover > .visible.content { 109 -webkit-transform: translateY(-100%) !important; 110 -ms-transform: translateY(-100%) !important; 111 transform: translateY(-100%) !important; 112 } 113 .ui.slide.up.reveal:hover > .hidden.content { 114 -webkit-transform: translateY(0%) !important; 115 -ms-transform: translateY(0%) !important; 116 transform: translateY(0%) !important; 117 } 118 .ui.slide.down.reveal > .hidden.content { 119 -webkit-transform: translateY(-100%) !important; 120 -ms-transform: translateY(-100%) !important; 121 transform: translateY(-100%) !important; 122 } 123 .ui.slide.down.reveal:hover > .visible.content { 124 -webkit-transform: translateY(100%) !important; 125 -ms-transform: translateY(100%) !important; 126 transform: translateY(100%) !important; 127 } 128 .ui.slide.down.reveal:hover > .hidden.content { 129 -webkit-transform: translateY(0%) !important; 130 -ms-transform: translateY(0%) !important; 131 transform: translateY(0%) !important; 132 } 133 134 /*-------------- 135 Fade 136 ---------------*/ 137 138 .ui.fade.reveal > .visible.content { 139 opacity: 1; 140 } 141 .ui.fade.reveal:hover > .visible.content { 142 opacity: 0; 143 } 144 145 /*-------------- 146 Move 147 ---------------*/ 148 149 .ui.move.reveal { 150 position: relative !important; 151 overflow: hidden !important; 152 white-space: nowrap; 153 } 154 .ui.move.reveal > .content { 155 display: block; 156 float: left; 157 margin: 0em; 158 -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; 159 transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; 160 } 161 .ui.move.reveal > .visible.content { 162 position: relative !important; 163 } 164 .ui.move.reveal > .hidden.content { 165 position: absolute !important; 166 left: 0% !important; 167 width: 100% !important; 168 } 169 .ui.move.reveal:hover > .visible.content { 170 -webkit-transform: translateX(-100%) !important; 171 -ms-transform: translateX(-100%) !important; 172 transform: translateX(-100%) !important; 173 } 174 .ui.move.right.reveal:hover > .visible.content { 175 -webkit-transform: translateX(100%) !important; 176 -ms-transform: translateX(100%) !important; 177 transform: translateX(100%) !important; 178 } 179 .ui.move.up.reveal:hover > .visible.content { 180 -webkit-transform: translateY(-100%) !important; 181 -ms-transform: translateY(-100%) !important; 182 transform: translateY(-100%) !important; 183 } 184 .ui.move.down.reveal:hover > .visible.content { 185 -webkit-transform: translateY(100%) !important; 186 -ms-transform: translateY(100%) !important; 187 transform: translateY(100%) !important; 188 } 189 190 /*-------------- 191 Rotate 192 ---------------*/ 193 194 .ui.rotate.reveal > .visible.content { 195 -webkit-transition-duration: 0.8s; 196 transition-duration: 0.8s; 197 -webkit-transform: rotate(0deg); 198 -ms-transform: rotate(0deg); 199 transform: rotate(0deg); 200 } 201 .ui.rotate.reveal > .visible.content, 202 .ui.rotate.right.reveal > .visible.content { 203 -webkit-transform-origin: bottom right; 204 -ms-transform-origin: bottom right; 205 transform-origin: bottom right; 206 } 207 .ui.rotate.reveal:hover > .visible.content, 208 .ui.rotate.right.reveal:hover > .visible.content { 209 -webkit-transform: rotate(110deg); 210 -ms-transform: rotate(110deg); 211 transform: rotate(110deg); 212 } 213 .ui.rotate.left.reveal > .visible.content { 214 -webkit-transform-origin: bottom left; 215 -ms-transform-origin: bottom left; 216 transform-origin: bottom left; 217 } 218 .ui.rotate.left.reveal:hover > .visible.content { 219 -webkit-transform: rotate(-110deg); 220 -ms-transform: rotate(-110deg); 221 transform: rotate(-110deg); 222 } 223 224 225 /******************************* 226 States 227 *******************************/ 228 229 .ui.disabled.reveal { 230 opacity: 1 !important; 231 } 232 .ui.disabled.reveal > .content { 233 -webkit-transition: none !important; 234 transition: none !important; 235 } 236 .ui.disabled.reveal:hover > .visible.content { 237 position: static !important; 238 display: block !important; 239 opacity: 1 !important; 240 top: 0 !important; 241 left: 0 !important; 242 right: auto !important; 243 bottom: auto !important; 244 -webkit-transform: none !important; 245 -ms-transform: none !important; 246 transform: none !important; 247 } 248 .ui.disabled.reveal:hover > .hidden.content { 249 display: none !important; 250 } 251 252 253 /******************************* 254 Variations 255 *******************************/ 256 257 258 /*-------------- 259 Masked 260 ---------------*/ 261 262 .ui.masked.reveal { 263 overflow: hidden; 264 } 265 266 /*-------------- 267 Instant 268 ---------------*/ 269 270 .ui.instant.reveal > .content { 271 -webkit-transition-delay: 0s !important; 272 transition-delay: 0s !important; 273 } 274 275 /*-------------- 276 Sizing 277 ---------------*/ 278 279 .ui.reveal > .content { 280 font-size: 1rem !important; 281 } 282 283 284 /******************************* 285 Theme Overrides 286 *******************************/ 287 288 289 290 /******************************* 291 Site Overrides 292 *******************************/ 293