You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

364 lines
8.2 KiB

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