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.

257 lines
6.6 KiB

10 years ago
  1. /*
  2. * # Semantic - Reveal
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributor
  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: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
  25. transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
  26. }
  27. .ui.reveal > .visible.content {
  28. position: absolute !important;
  29. top: 0em !important;
  30. left: 0em !important;
  31. z-index: 4 !important;
  32. -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
  33. transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
  34. }
  35. .ui.reveal > .hidden.content {
  36. position: relative !important;
  37. z-index: 3 !important;
  38. }
  39. /*------------------
  40. Loose Coupling
  41. -------------------*/
  42. .ui.reveal.button {
  43. overflow: hidden;
  44. }
  45. /*******************************
  46. Types
  47. *******************************/
  48. /*--------------
  49. Slide
  50. ---------------*/
  51. .ui.slide.reveal {
  52. position: relative !important;
  53. display: block;
  54. overflow: hidden !important;
  55. white-space: nowrap;
  56. }
  57. .ui.slide.reveal > .content {
  58. display: block;
  59. float: left;
  60. -ms-box-sizing: border-box;
  61. box-sizing: border-box;
  62. margin: 0em;
  63. -webkit-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
  64. transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
  65. }
  66. .ui.slide.reveal > .visible.content {
  67. position: relative !important;
  68. }
  69. .ui.slide.reveal > .hidden.content {
  70. position: absolute !important;
  71. left: 100% !important;
  72. width: 100% !important;
  73. }
  74. .ui.slide.reveal:hover > .visible.content {
  75. left: -100% !important;
  76. }
  77. .ui.slide.reveal:hover > .hidden.content {
  78. left: 0% !important;
  79. }
  80. .ui.right.slide.reveal > .visible.content {
  81. left: 0%;
  82. }
  83. .ui.right.slide.reveal > .hidden.content {
  84. left: auto !important;
  85. right: 100% !important;
  86. }
  87. .ui.right.slide.reveal:hover > .visible.content {
  88. left: 100% !important;
  89. right: auto !important;
  90. }
  91. .ui.right.slide.reveal:hover > .hidden.content {
  92. left: auto !important;
  93. right: 0% !important;
  94. }
  95. .ui.up.slide.reveal > .visible.content {
  96. top: 0% !important;
  97. left: 0% !important;
  98. right: auto !important;
  99. bottom: auto !important;
  100. }
  101. .ui.up.slide.reveal > .hidden.content {
  102. top: 100% !important;
  103. left: 0% !important;
  104. right: auto !important;
  105. bottom: auto !important;
  106. }
  107. .ui.slide.up.reveal:hover > .visible.content {
  108. top: -100% !important;
  109. left: 0% !important;
  110. }
  111. .ui.slide.up.reveal:hover > .hidden.content {
  112. top: 0% !important;
  113. left: 0% !important;
  114. }
  115. .ui.down.slide.reveal > .visible.content {
  116. top: auto !important;
  117. right: auto !important;
  118. bottom: auto !important;
  119. bottom: 0% !important;
  120. }
  121. .ui.down.slide.reveal > .hidden.content {
  122. top: auto !important;
  123. right: auto !important;
  124. bottom: 100% !important;
  125. left: 0% !important;
  126. }
  127. .ui.slide.down.reveal:hover > .visible.content {
  128. left: 0% !important;
  129. bottom: -100% !important;
  130. }
  131. .ui.slide.down.reveal:hover > .hidden.content {
  132. left: 0% !important;
  133. bottom: 0% !important;
  134. }
  135. /*--------------
  136. Fade
  137. ---------------*/
  138. .ui.fade.reveal > .visible.content {
  139. opacity: 1;
  140. }
  141. .ui.fade.reveal:hover > .visible.content {
  142. opacity: 0;
  143. }
  144. /*--------------
  145. Move
  146. ---------------*/
  147. .ui.move.reveal > .visible.content,
  148. .ui.move.left.reveal > .visible.content {
  149. left: auto !important;
  150. top: auto !important;
  151. bottom: auto !important;
  152. right: 0% !important;
  153. }
  154. .ui.move.reveal:hover > .visible.content,
  155. .ui.move.left.reveal:hover > .visible.content {
  156. right: 100% !important;
  157. }
  158. .ui.move.right.reveal > .visible.content {
  159. right: auto !important;
  160. top: auto !important;
  161. bottom: auto !important;
  162. left: 0% !important;
  163. }
  164. .ui.move.right.reveal:hover > .visible.content {
  165. left: 100% !important;
  166. }
  167. .ui.move.up.reveal > .visible.content {
  168. right: auto !important;
  169. left: auto !important;
  170. top: auto !important;
  171. bottom: 0% !important;
  172. }
  173. .ui.move.up.reveal:hover > .visible.content {
  174. bottom: 100% !important;
  175. }
  176. .ui.move.down.reveal > .visible.content {
  177. right: auto !important;
  178. left: auto !important;
  179. top: 0% !important;
  180. bottom: auto !important;
  181. }
  182. .ui.move.down.reveal:hover > .visible.content {
  183. top: 100% !important;
  184. }
  185. /*--------------
  186. Rotate
  187. ---------------*/
  188. .ui.rotate.reveal > .visible.content {
  189. -webkit-transition-duration: 0.8s;
  190. transition-duration: 0.8s;
  191. -webkit-transform: rotate(0deg);
  192. -ms-transform: rotate(0deg);
  193. transform: rotate(0deg);
  194. }
  195. .ui.rotate.reveal > .visible.content,
  196. .ui.rotate.right.reveal > .visible.content {
  197. -webkit-transform-origin: bottom right;
  198. -ms-transform-origin: bottom right;
  199. transform-origin: bottom right;
  200. }
  201. .ui.rotate.reveal:hover > .visible.content,
  202. .ui.rotate.right.reveal:hover > .visible.content {
  203. -webkit-transform: rotate(110deg);
  204. -ms-transform: rotate(110deg);
  205. transform: rotate(110deg);
  206. }
  207. .ui.rotate.left.reveal > .visible.content {
  208. -webkit-transform-origin: bottom left;
  209. -ms-transform-origin: bottom left;
  210. transform-origin: bottom left;
  211. }
  212. .ui.rotate.left.reveal:hover > .visible.content {
  213. -webkit-transform: rotate(-110deg);
  214. -ms-transform: rotate(-110deg);
  215. transform: rotate(-110deg);
  216. }
  217. /*******************************
  218. States
  219. *******************************/
  220. .ui.disabled.reveal {
  221. opacity: 1 !important;
  222. }
  223. .ui.disabled.reveal > .content {
  224. -webkit-transition: none !important;
  225. transition: none !important;
  226. }
  227. .ui.disabled.reveal:hover > .visible.content {
  228. position: static !important;
  229. display: block !important;
  230. opacity: 1 !important;
  231. top: 0 !important;
  232. left: 0 !important;
  233. right: auto !important;
  234. bottom: auto !important;
  235. -webkit-transform: none !important;
  236. -ms-transform: none !important;
  237. transform: none !important;
  238. }
  239. .ui.disabled.reveal:hover > .hidden.content {
  240. display: none !important;
  241. }
  242. /*******************************
  243. Variations
  244. *******************************/
  245. /*--------------
  246. Masked
  247. ---------------*/
  248. .ui.masked.reveal {
  249. overflow: hidden;
  250. }
  251. /*--------------
  252. Instant
  253. ---------------*/
  254. .ui.instant.reveal > .content {
  255. -webkit-transition-delay: 0s !important;
  256. transition-delay: 0s !important;
  257. }