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.

275 lines
7.2 KiB

  1. /*!
  2. * # Semantic UI 2.1.6 - Reveal
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Reveal
  13. *******************************/
  14. .ui.reveal {
  15. display: inherit;
  16. position: relative !important;
  17. font-size: 0em !important;
  18. }
  19. .ui.reveal > .visible.content {
  20. position: absolute !important;
  21. top: 0em !important;
  22. left: 0em !important;
  23. z-index: 3 !important;
  24. -webkit-transition: all 0.5s ease 0.1s;
  25. transition: all 0.5s ease 0.1s;
  26. }
  27. .ui.reveal > .hidden.content {
  28. position: relative !important;
  29. z-index: 2 !important;
  30. }
  31. /* Make sure hovered element is on top of other reveal */
  32. .ui.active.reveal .visible.content,
  33. .ui.reveal:hover .visible.content {
  34. z-index: 4 !important;
  35. }
  36. /*******************************
  37. Types
  38. *******************************/
  39. /*--------------
  40. Slide
  41. ---------------*/
  42. .ui.slide.reveal {
  43. position: relative !important;
  44. overflow: hidden !important;
  45. white-space: nowrap;
  46. }
  47. .ui.slide.reveal > .content {
  48. display: block;
  49. width: 100%;
  50. float: left;
  51. margin: 0em;
  52. -webkit-transition: -webkit-transform 0.5s ease 0.1s;
  53. transition: transform 0.5s ease 0.1s;
  54. }
  55. .ui.slide.reveal > .visible.content {
  56. position: relative !important;
  57. }
  58. .ui.slide.reveal > .hidden.content {
  59. position: absolute !important;
  60. left: 0% !important;
  61. width: 100% !important;
  62. -webkit-transform: translateX(100%) !important;
  63. transform: translateX(100%) !important;
  64. }
  65. .ui.slide.active.reveal > .visible.content,
  66. .ui.slide.reveal:hover > .visible.content {
  67. -webkit-transform: translateX(-100%) !important;
  68. transform: translateX(-100%) !important;
  69. }
  70. .ui.slide.active.reveal > .hidden.content,
  71. .ui.slide.reveal:hover > .hidden.content {
  72. -webkit-transform: translateX(0%) !important;
  73. transform: translateX(0%) !important;
  74. }
  75. .ui.slide.right.reveal > .visible.content {
  76. -webkit-transform: translateX(0%) !important;
  77. transform: translateX(0%) !important;
  78. }
  79. .ui.slide.right.reveal > .hidden.content {
  80. -webkit-transform: translateX(-100%) !important;
  81. transform: translateX(-100%) !important;
  82. }
  83. .ui.slide.right.active.reveal > .visible.content,
  84. .ui.slide.right.reveal:hover > .visible.content {
  85. -webkit-transform: translateX(100%) !important;
  86. transform: translateX(100%) !important;
  87. }
  88. .ui.slide.right.active.reveal > .hidden.content,
  89. .ui.slide.right.reveal:hover > .hidden.content {
  90. -webkit-transform: translateX(0%) !important;
  91. transform: translateX(0%) !important;
  92. }
  93. .ui.slide.up.reveal > .hidden.content {
  94. -webkit-transform: translateY(100%) !important;
  95. transform: translateY(100%) !important;
  96. }
  97. .ui.slide.up.active.reveal > .visible.content,
  98. .ui.slide.up.reveal:hover > .visible.content {
  99. -webkit-transform: translateY(-100%) !important;
  100. transform: translateY(-100%) !important;
  101. }
  102. .ui.slide.up.active.reveal > .hidden.content,
  103. .ui.slide.up.reveal:hover > .hidden.content {
  104. -webkit-transform: translateY(0%) !important;
  105. transform: translateY(0%) !important;
  106. }
  107. .ui.slide.down.reveal > .hidden.content {
  108. -webkit-transform: translateY(-100%) !important;
  109. transform: translateY(-100%) !important;
  110. }
  111. .ui.slide.down.active.reveal > .visible.content,
  112. .ui.slide.down.reveal:hover > .visible.content {
  113. -webkit-transform: translateY(100%) !important;
  114. transform: translateY(100%) !important;
  115. }
  116. .ui.slide.down.active.reveal > .hidden.content,
  117. .ui.slide.down.reveal:hover > .hidden.content {
  118. -webkit-transform: translateY(0%) !important;
  119. transform: translateY(0%) !important;
  120. }
  121. /*--------------
  122. Fade
  123. ---------------*/
  124. .ui.fade.reveal > .visible.content {
  125. opacity: 1;
  126. }
  127. .ui.fade.active.reveal > .visible.content,
  128. .ui.fade.reveal:hover > .visible.content {
  129. opacity: 0;
  130. }
  131. /*--------------
  132. Move
  133. ---------------*/
  134. .ui.move.reveal {
  135. position: relative !important;
  136. overflow: hidden !important;
  137. white-space: nowrap;
  138. }
  139. .ui.move.reveal > .content {
  140. display: block;
  141. float: left;
  142. margin: 0em;
  143. -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s;
  144. transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s;
  145. }
  146. .ui.move.reveal > .visible.content {
  147. position: relative !important;
  148. }
  149. .ui.move.reveal > .hidden.content {
  150. position: absolute !important;
  151. left: 0% !important;
  152. width: 100% !important;
  153. }
  154. .ui.move.active.reveal > .visible.content,
  155. .ui.move.reveal:hover > .visible.content {
  156. -webkit-transform: translateX(-100%) !important;
  157. transform: translateX(-100%) !important;
  158. }
  159. .ui.move.right.active.reveal > .visible.content,
  160. .ui.move.right.reveal:hover > .visible.content {
  161. -webkit-transform: translateX(100%) !important;
  162. transform: translateX(100%) !important;
  163. }
  164. .ui.move.up.active.reveal > .visible.content,
  165. .ui.move.up.reveal:hover > .visible.content {
  166. -webkit-transform: translateY(-100%) !important;
  167. transform: translateY(-100%) !important;
  168. }
  169. .ui.move.down.active.reveal > .visible.content,
  170. .ui.move.down.reveal:hover > .visible.content {
  171. -webkit-transform: translateY(100%) !important;
  172. transform: translateY(100%) !important;
  173. }
  174. /*--------------
  175. Rotate
  176. ---------------*/
  177. .ui.rotate.reveal > .visible.content {
  178. -webkit-transition-duration: 0.5s;
  179. transition-duration: 0.5s;
  180. -webkit-transform: rotate(0deg);
  181. transform: rotate(0deg);
  182. }
  183. .ui.rotate.reveal > .visible.content,
  184. .ui.rotate.right.reveal > .visible.content {
  185. -webkit-transform-origin: bottom right;
  186. transform-origin: bottom right;
  187. }
  188. .ui.rotate.active.reveal > .visible.conten,
  189. .ui.rotate.reveal:hover > .visible.content,
  190. .ui.rotate.right.active.reveal > .visible.content,
  191. .ui.rotate.right.reveal:hover > .visible.content {
  192. -webkit-transform: rotate(110deg);
  193. transform: rotate(110deg);
  194. }
  195. .ui.rotate.left.reveal > .visible.content {
  196. -webkit-transform-origin: bottom left;
  197. transform-origin: bottom left;
  198. }
  199. .ui.rotate.left.active.reveal > .visible.content,
  200. .ui.rotate.left.reveal:hover > .visible.content {
  201. -webkit-transform: rotate(-110deg);
  202. transform: rotate(-110deg);
  203. }
  204. /*******************************
  205. States
  206. *******************************/
  207. .ui.disabled.reveal:hover > .visible.visible.content {
  208. position: static !important;
  209. display: block !important;
  210. opacity: 1 !important;
  211. top: 0 !important;
  212. left: 0 !important;
  213. right: auto !important;
  214. bottom: auto !important;
  215. -webkit-transform: none !important;
  216. transform: none !important;
  217. }
  218. .ui.disabled.reveal:hover > .hidden.hidden.content {
  219. display: none !important;
  220. }
  221. /*******************************
  222. Variations
  223. *******************************/
  224. /*--------------
  225. Visible
  226. ---------------*/
  227. .ui.visible.reveal {
  228. overflow: visible;
  229. }
  230. /*--------------
  231. Instant
  232. ---------------*/
  233. .ui.instant.reveal > .content {
  234. -webkit-transition-delay: 0s !important;
  235. transition-delay: 0s !important;
  236. }
  237. /*--------------
  238. Sizing
  239. ---------------*/
  240. .ui.reveal > .content {
  241. font-size: 1rem !important;
  242. }
  243. /*******************************
  244. Site Overrides
  245. *******************************/