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.

254 lines
7.2 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;
  56. overflow: hidden !important;
  57. white-space: nowrap;
  58. }
  59. .ui.slide.reveal > .content {
  60. display: block;
  61. float: left;
  62. -webkit-box-sizing: border-box;
  63. -moz-box-sizing: border-box;
  64. -ms-box-sizing: border-box;
  65. box-sizing: border-box;
  66. margin: 0em;
  67. -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;
  68. -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;
  69. -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;
  70. 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;
  71. }
  72. .ui.slide.reveal > .visible.content {
  73. position: relative !important;
  74. }
  75. .ui.slide.reveal > .hidden.content {
  76. position: absolute !important;
  77. left: 100% !important;
  78. width: 100% !important;
  79. }
  80. .ui.slide.reveal:hover > .visible.content {
  81. left: -100% !important;
  82. }
  83. .ui.slide.reveal:hover > .hidden.content {
  84. left: 0% !important;
  85. }
  86. .ui.right.slide.reveal > .visible.content {
  87. left: 0%;
  88. }
  89. .ui.right.slide.reveal > .hidden.content {
  90. left: auto !important;
  91. right: 100% !important;
  92. }
  93. .ui.right.slide.reveal:hover > .visible.content {
  94. left: 100% !important;
  95. right: auto !important;
  96. }
  97. .ui.right.slide.reveal:hover > .hidden.content {
  98. left: auto !important;
  99. right: 0% !important;
  100. }
  101. .ui.up.slide.reveal > .visible.content {
  102. top: 0% !important;
  103. left: 0% !important;
  104. right: auto !important;
  105. bottom: auto !important;
  106. }
  107. .ui.up.slide.reveal > .hidden.content {
  108. top: 100% !important;
  109. left: 0% !important;
  110. right: auto !important;
  111. bottom: auto !important;
  112. }
  113. .ui.slide.up.reveal:hover > .visible.content {
  114. top: -100% !important;
  115. left: 0% !important;
  116. }
  117. .ui.slide.up.reveal:hover > .hidden.content {
  118. top: 0% !important;
  119. left: 0% !important;
  120. }
  121. .ui.down.slide.reveal > .visible.content {
  122. top: auto !important;
  123. right: auto !important;
  124. bottom: auto !important;
  125. bottom: 0% !important;
  126. }
  127. .ui.down.slide.reveal > .hidden.content {
  128. top: auto !important;
  129. right: auto !important;
  130. bottom: 100% !important;
  131. left: 0% !important;
  132. }
  133. .ui.slide.down.reveal:hover > .visible.content {
  134. left: 0% !important;
  135. bottom: -100% !important;
  136. }
  137. .ui.slide.down.reveal:hover > .hidden.content {
  138. left: 0% !important;
  139. bottom: 0% !important;
  140. }
  141. /*--------------
  142. Fade
  143. ---------------*/
  144. .ui.fade.reveal > .visible.content {
  145. opacity: 1;
  146. }
  147. .ui.fade.reveal:hover > .visible.content {
  148. opacity: 0;
  149. }
  150. /*--------------
  151. Move
  152. ---------------*/
  153. .ui.move.reveal > .visible.content,
  154. .ui.move.left.reveal > .visible.content {
  155. left: auto !important;
  156. top: auto !important;
  157. bottom: auto !important;
  158. right: 0% !important;
  159. }
  160. .ui.move.reveal:hover > .visible.content,
  161. .ui.move.left.reveal:hover > .visible.content {
  162. right: 100% !important;
  163. }
  164. .ui.move.right.reveal > .visible.content {
  165. right: auto !important;
  166. top: auto !important;
  167. bottom: auto !important;
  168. left: 0% !important;
  169. }
  170. .ui.move.right.reveal:hover > .visible.content {
  171. left: 100% !important;
  172. }
  173. .ui.move.up.reveal > .visible.content {
  174. right: auto !important;
  175. left: auto !important;
  176. top: auto !important;
  177. bottom: 0% !important;
  178. }
  179. .ui.move.up.reveal:hover > .visible.content {
  180. bottom: 100% !important;
  181. }
  182. .ui.move.down.reveal > .visible.content {
  183. right: auto !important;
  184. left: auto !important;
  185. top: 0% !important;
  186. bottom: auto !important;
  187. }
  188. .ui.move.down.reveal:hover > .visible.content {
  189. top: 100% !important;
  190. }
  191. /*--------------
  192. Rotate
  193. ---------------*/
  194. .ui.rotate.reveal > .visible.content {
  195. -webkit-transition-duration: 0.8s;
  196. -moz-transition-duration: 0.8s;
  197. -o-transition-duration: 0.8s;
  198. -ms-transition-duration: 0.8s;
  199. transition-duration: 0.8s;
  200. -webkit-transform: rotate(0deg);
  201. -moz-transform: rotate(0deg);
  202. -o-transform: rotate(0deg);
  203. -ms-transform: rotate(0deg);
  204. transform: rotate(0deg);
  205. }
  206. .ui.rotate.reveal > .visible.content,
  207. .ui.rotate.right.reveal > .visible.content {
  208. -webkit-transform-origin: bottom right;
  209. -moz-transform-origin: bottom right;
  210. -o-transform-origin: bottom right;
  211. -ms-transform-origin: bottom right;
  212. transform-origin: bottom right;
  213. }
  214. .ui.rotate.reveal:hover > .visible.content,
  215. .ui.rotate.right.reveal:hover > .visible.content {
  216. -webkit-transform: rotate(110deg);
  217. -moz-transform: rotate(110deg);
  218. -o-transform: rotate(110deg);
  219. -ms-transform: rotate(110deg);
  220. transform: rotate(110deg);
  221. }
  222. .ui.rotate.left.reveal > .visible.content {
  223. -webkit-transform-origin: bottom left;
  224. -moz-transform-origin: bottom left;
  225. -o-transform-origin: bottom left;
  226. -ms-transform-origin: bottom left;
  227. transform-origin: bottom left;
  228. }
  229. .ui.rotate.left.reveal:hover > .visible.content {
  230. -webkit-transform: rotate(-110deg);
  231. -moz-transform: rotate(-110deg);
  232. -o-transform: rotate(-110deg);
  233. -ms-transform: rotate(-110deg);
  234. transform: rotate(-110deg);
  235. }
  236. /*******************************
  237. Variations
  238. *******************************/
  239. /*--------------
  240. Masked
  241. ---------------*/
  242. .ui.masked.reveal {
  243. overflow: hidden;
  244. }
  245. /*--------------
  246. Instant
  247. ---------------*/
  248. .ui.instant.reveal > .content {
  249. -webkit-transition-delay: 0s !important;
  250. -moz-transition-delay: 0s !important;
  251. -o-transition-delay: 0s !important;
  252. -ms-transition-delay: 0s !important;
  253. transition-delay: 0s !important;
  254. }