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.

321 lines
6.7 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: 1rem !important;
  22. }
  23. .ui.reveal > .visible.content {
  24. -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s;
  25. transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s;
  26. }
  27. .ui.reveal > .visible.content {
  28. position: absolute !important;
  29. top: 0em !important;
  30. right: 0em !important;
  31. z-index: 4 !important;
  32. -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s;
  33. transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 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: right;
  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.320, 1) 0.15s,
  66. right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
  67. left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
  68. bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s;
  69. transition: top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
  70. right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
  71. left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
  72. bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 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. bottom: 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. transition-duration: 0.8s;
  200. -webkit-transform: rotate(0deg);
  201. -ms-transform: rotate(0deg);
  202. transform: rotate(0deg);
  203. }
  204. .ui.rotate.reveal > .visible.content,
  205. .ui.rotate.right.reveal > .visible.content {
  206. -webkit-transform-origin: bottom left;
  207. -ms-transform-origin: bottom left;
  208. transform-origin: bottom left;
  209. }
  210. .ui.rotate.reveal:hover > .visible.content,
  211. .ui.rotate.right.reveal:hover > .visible.content {
  212. -webkit-transform: rotate(110deg);
  213. -ms-transform: rotate(110deg);
  214. transform: rotate(110deg);
  215. }
  216. .ui.rotate.left.reveal > .visible.content {
  217. -webkit-transform-origin: bottom right;
  218. -ms-transform-origin: bottom right;
  219. transform-origin: bottom right;
  220. }
  221. .ui.rotate.left.reveal:hover > .visible.content {
  222. -webkit-transform: rotate(-110deg);
  223. -ms-transform: rotate(-110deg);
  224. transform: rotate(-110deg);
  225. }
  226. /*******************************
  227. States
  228. *******************************/
  229. .ui.disabled.reveal {
  230. opacity: 1 !important;
  231. }
  232. .ui.disabled.reveal > .content {
  233. -webkit-transition: none !important;
  234. transition: none !important;
  235. }
  236. .ui.disabled.reveal:hover > .visible.content {
  237. position: static !important;
  238. display: block !important;
  239. opacity: 1 !important;
  240. top: 0 !important;
  241. right: 0 !important;
  242. left: auto !important;
  243. bottom: auto !important;
  244. -webkit-transform: none !important;
  245. -ms-transform: none !important;
  246. transform: none !important;
  247. }
  248. .ui.disabled.reveal:hover > .hidden.content {
  249. display: none !important;
  250. }
  251. /*******************************
  252. Variations
  253. *******************************/
  254. /*--------------
  255. Masked
  256. ---------------*/
  257. .ui.masked.reveal {
  258. overflow: hidden;
  259. }
  260. /*--------------
  261. Instant
  262. ---------------*/
  263. .ui.instant.reveal > .content {
  264. -webkit-transition-delay: 0s !important;
  265. transition-delay: 0s !important;
  266. }