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.

259 lines
6.6 KiB

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