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
6.4 KiB

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