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.

293 lines
4.6 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic UI
  3. * https://github.com/Semantic-Org/Semantic-UI
  4. * http://beta.semantic-ui.com/
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Popup
  13. *******************************/
  14. .ui.popup {
  15. display: none;
  16. position: absolute;
  17. top: 0px;
  18. right: 0px;
  19. z-index: 900;
  20. border: 1px solid #cccccc;
  21. max-width: 250px;
  22. background-color: #ffffff;
  23. padding: 0.8em 1em;
  24. font-weight: normal;
  25. font-style: normal;
  26. color: rgba(0, 0, 0, 0.8);
  27. border-radius: 0.2857rem;
  28. box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  29. }
  30. .ui.popup > .header {
  31. padding: 0em;
  32. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  33. font-size: 1.125em;
  34. line-height: 1.2;
  35. font-weight: bold;
  36. }
  37. .ui.popup > .header + .content {
  38. padding-top: 0.5em;
  39. }
  40. .ui.popup:before {
  41. position: absolute;
  42. content: '';
  43. width: 0.75em;
  44. height: 0.75em;
  45. background: #ffffff;
  46. -webkit-transform: rotate(45deg);
  47. -ms-transform: rotate(45deg);
  48. transform: rotate(45deg);
  49. z-index: 2;
  50. box-shadow: 1px 1px 0px 0px #b3b3b3;
  51. }
  52. /*******************************
  53. Types
  54. *******************************/
  55. /*--------------
  56. Spacing
  57. ---------------*/
  58. .ui.popup {
  59. margin: 0em;
  60. }
  61. .ui.popup.bottom {
  62. margin: 0.75em 0em 0em;
  63. }
  64. .ui.popup.top {
  65. margin: 0em 0em 0.75em;
  66. }
  67. .ui.popup.left.center {
  68. margin: 0em 0.75em 0em 0em;
  69. }
  70. .ui.popup.right.center {
  71. margin: 0em 0em 0em 0.75em;
  72. }
  73. /*--------------
  74. Pointer
  75. ---------------*/
  76. /*--- Below ---*/
  77. .ui.bottom.center.popup:before {
  78. margin-left: -0.325em;
  79. top: -0.325em;
  80. left: 50%;
  81. right: auto;
  82. bottom: auto;
  83. box-shadow: -1px -1px 0px 0px #b3b3b3;
  84. }
  85. .ui.bottom.left.popup {
  86. margin-left: 0em;
  87. }
  88. .ui.bottom.left.popup:before {
  89. top: -0.325em;
  90. left: 1em;
  91. right: auto;
  92. bottom: auto;
  93. margin-left: 0em;
  94. box-shadow: -1px -1px 0px 0px #b3b3b3;
  95. }
  96. .ui.bottom.right.popup {
  97. margin-right: 0em;
  98. }
  99. .ui.bottom.right.popup:before {
  100. top: -0.325em;
  101. right: 1em;
  102. bottom: auto;
  103. left: auto;
  104. margin-left: 0em;
  105. box-shadow: -1px -1px 0px 0px #b3b3b3;
  106. }
  107. /*--- Above ---*/
  108. .ui.top.center.popup:before {
  109. top: auto;
  110. right: auto;
  111. bottom: -0.325em;
  112. left: 50%;
  113. margin-left: -0.325em;
  114. }
  115. .ui.top.left.popup {
  116. margin-left: 0em;
  117. }
  118. .ui.top.left.popup:before {
  119. bottom: -0.325em;
  120. left: 1em;
  121. top: auto;
  122. right: auto;
  123. margin-left: 0em;
  124. }
  125. .ui.top.right.popup {
  126. margin-right: 0em;
  127. }
  128. .ui.top.right.popup:before {
  129. bottom: -0.325em;
  130. right: 1em;
  131. top: auto;
  132. left: auto;
  133. margin-left: 0em;
  134. }
  135. /*--- Left Center ---*/
  136. .ui.left.center.popup:before {
  137. top: 50%;
  138. right: -0.325em;
  139. bottom: auto;
  140. left: auto;
  141. margin-top: -0.325em;
  142. box-shadow: 1px -1px 0px 0px #b3b3b3;
  143. }
  144. /*--- Right Center ---*/
  145. .ui.right.center.popup:before {
  146. top: 50%;
  147. left: -0.325em;
  148. bottom: auto;
  149. right: auto;
  150. margin-top: -0.325em;
  151. box-shadow: -1px 1px 0px 0px #b3b3b3;
  152. }
  153. /*******************************
  154. Coupling
  155. *******************************/
  156. /* Immediate Nested Grid */
  157. .ui.popup > .ui.grid:not(.padded) {
  158. width: -webkit-calc(100% + 1.75rem);
  159. width: calc(100% + 1.75rem);
  160. margin: -0.7rem -0.875rem;
  161. }
  162. /*******************************
  163. States
  164. *******************************/
  165. .ui.loading.popup {
  166. display: block;
  167. visibility: hidden;
  168. z-index: -1;
  169. }
  170. .ui.animating.popup,
  171. .ui.visible.popup {
  172. display: block;
  173. }
  174. /*******************************
  175. Variations
  176. *******************************/
  177. /*--------------
  178. Basic
  179. ---------------*/
  180. .ui.basic.popup:before {
  181. display: none;
  182. }
  183. /*--------------
  184. Wide
  185. ---------------*/
  186. .ui.wide.popup {
  187. width: 350px;
  188. max-width: 350px;
  189. }
  190. .ui[class*="very wide"].popup {
  191. width: 550px;
  192. max-width: 550px;
  193. }
  194. /*--------------
  195. Fluid
  196. ---------------*/
  197. .ui.fluid.popup {
  198. width: 100%;
  199. max-width: none;
  200. }
  201. /*--------------
  202. Colors
  203. ---------------*/
  204. /* Inverted colors */
  205. .ui.inverted.popup {
  206. background: #1b1c1d;
  207. color: #ffffff;
  208. border: none;
  209. box-shadow: none;
  210. }
  211. .ui.inverted.popup .header {
  212. background-color: none;
  213. color: #ffffff;
  214. }
  215. .ui.inverted.popup:before {
  216. background-color: #1b1c1d;
  217. box-shadow: none !important;
  218. }
  219. /*--------------
  220. Flowing
  221. ---------------*/
  222. .ui.flowing.popup {
  223. max-width: none;
  224. }
  225. /*--------------
  226. Sizes
  227. ---------------*/
  228. .ui.small.popup {
  229. font-size: 0.8rem;
  230. }
  231. .ui.popup {
  232. font-size: 0.875rem;
  233. }
  234. .ui.large.popup {
  235. font-size: 1rem;
  236. }
  237. .ui.huge.popup {
  238. font-size: 1.1rem;
  239. }
  240. /*******************************
  241. Theme Overrides
  242. *******************************/
  243. /*******************************
  244. User Overrides
  245. *******************************/