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.

282 lines
7.9 KiB

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