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.

255 lines
7.3 KiB

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