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.

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