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