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.

349 lines
6.2 KiB

10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
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 2.0.0 - Popup
  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. Popup
  13. *******************************/
  14. .ui.popup {
  15. display: none;
  16. position: absolute;
  17. top: 0px;
  18. right: 0px;
  19. /* Fixes content being squished when inline (moz only) */
  20. min-width: -webkit-min-content;
  21. min-width: -moz-min-content;
  22. min-width: min-content;
  23. z-index: 1900;
  24. border: 1px solid #d4d4d5;
  25. line-height: 1.4285em;
  26. max-width: 250px;
  27. background-color: #ffffff;
  28. padding: 0.833em 1em;
  29. font-weight: normal;
  30. font-style: normal;
  31. color: rgba(0, 0, 0, 0.87);
  32. border-radius: 0.28571429rem;
  33. box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08);
  34. }
  35. .ui.popup > .header {
  36. padding: 0em;
  37. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  38. font-size: 1.125em;
  39. line-height: 1.2;
  40. font-weight: bold;
  41. }
  42. .ui.popup > .header + .content {
  43. padding-top: 0.5em;
  44. }
  45. .ui.popup:before {
  46. position: absolute;
  47. content: '';
  48. width: 0.75em;
  49. height: 0.75em;
  50. background: #ffffff;
  51. -webkit-transform: rotate(45deg);
  52. -ms-transform: rotate(45deg);
  53. transform: rotate(45deg);
  54. z-index: 2;
  55. box-shadow: 1px 1px 0px 0px #bababc;
  56. }
  57. /*******************************
  58. Types
  59. *******************************/
  60. /*--------------
  61. Spacing
  62. ---------------*/
  63. .ui.popup {
  64. margin: 0em;
  65. }
  66. /* Extending from Top */
  67. .ui.top.popup {
  68. margin: 0em 0em 0.75em;
  69. }
  70. .ui.top.left.popup {
  71. -webkit-transform-origin: left bottom;
  72. -ms-transform-origin: left bottom;
  73. transform-origin: left bottom;
  74. }
  75. .ui.top.center.popup {
  76. -webkit-transform-origin: center bottom;
  77. -ms-transform-origin: center bottom;
  78. transform-origin: center bottom;
  79. }
  80. .ui.top.right.popup {
  81. -webkit-transform-origin: right bottom;
  82. -ms-transform-origin: right bottom;
  83. transform-origin: right bottom;
  84. }
  85. /* Extending from Vertical Center */
  86. .ui.left.center.popup {
  87. margin: 0em 0.75em 0em 0em;
  88. -webkit-transform-origin: right 50%;
  89. -ms-transform-origin: right 50%;
  90. transform-origin: right 50%;
  91. }
  92. .ui.right.center.popup {
  93. margin: 0em 0em 0em 0.75em;
  94. -webkit-transform-origin: left 50%;
  95. -ms-transform-origin: left 50%;
  96. transform-origin: left 50%;
  97. }
  98. /* Extending from Bottom */
  99. .ui.bottom.popup {
  100. margin: 0.75em 0em 0em;
  101. }
  102. .ui.bottom.left.popup {
  103. -webkit-transform-origin: left top;
  104. -ms-transform-origin: left top;
  105. transform-origin: left top;
  106. }
  107. .ui.bottom.center.popup {
  108. -webkit-transform-origin: center top;
  109. -ms-transform-origin: center top;
  110. transform-origin: center top;
  111. }
  112. .ui.bottom.right.popup {
  113. -webkit-transform-origin: right top;
  114. -ms-transform-origin: right top;
  115. transform-origin: right top;
  116. }
  117. /*--------------
  118. Pointer
  119. ---------------*/
  120. /*--- Below ---*/
  121. .ui.bottom.center.popup:before {
  122. margin-left: -0.325em;
  123. top: -0.325em;
  124. left: 50%;
  125. right: auto;
  126. bottom: auto;
  127. box-shadow: -1px -1px 0px 0px #bababc;
  128. }
  129. .ui.bottom.left.popup {
  130. margin-left: 0em;
  131. }
  132. .ui.bottom.left.popup:before {
  133. top: -0.325em;
  134. left: 1em;
  135. right: auto;
  136. bottom: auto;
  137. margin-left: 0em;
  138. box-shadow: -1px -1px 0px 0px #bababc;
  139. }
  140. .ui.bottom.right.popup {
  141. margin-right: 0em;
  142. }
  143. .ui.bottom.right.popup:before {
  144. top: -0.325em;
  145. right: 1em;
  146. bottom: auto;
  147. left: auto;
  148. margin-left: 0em;
  149. box-shadow: -1px -1px 0px 0px #bababc;
  150. }
  151. /*--- Above ---*/
  152. .ui.top.center.popup:before {
  153. top: auto;
  154. right: auto;
  155. bottom: -0.325em;
  156. left: 50%;
  157. margin-left: -0.325em;
  158. }
  159. .ui.top.left.popup {
  160. margin-left: 0em;
  161. }
  162. .ui.top.left.popup:before {
  163. bottom: -0.325em;
  164. left: 1em;
  165. top: auto;
  166. right: auto;
  167. margin-left: 0em;
  168. }
  169. .ui.top.right.popup {
  170. margin-right: 0em;
  171. }
  172. .ui.top.right.popup:before {
  173. bottom: -0.325em;
  174. right: 1em;
  175. top: auto;
  176. left: auto;
  177. margin-left: 0em;
  178. }
  179. /*--- Left Center ---*/
  180. .ui.left.center.popup:before {
  181. top: 50%;
  182. right: -0.325em;
  183. bottom: auto;
  184. left: auto;
  185. margin-top: -0.325em;
  186. box-shadow: 1px -1px 0px 0px #bababc;
  187. }
  188. /*--- Right Center ---*/
  189. .ui.right.center.popup:before {
  190. top: 50%;
  191. left: -0.325em;
  192. bottom: auto;
  193. right: auto;
  194. margin-top: -0.325em;
  195. box-shadow: -1px 1px 0px 0px #bababc;
  196. }
  197. /*******************************
  198. Coupling
  199. *******************************/
  200. /* Immediate Nested Grid */
  201. .ui.popup > .ui.grid:not(.padded) {
  202. width: calc(100% + 1.75rem);
  203. margin: -0.7rem -0.875rem;
  204. }
  205. /*******************************
  206. States
  207. *******************************/
  208. .ui.loading.popup {
  209. display: block;
  210. visibility: hidden;
  211. z-index: -1;
  212. }
  213. .ui.animating.popup,
  214. .ui.visible.popup {
  215. display: block;
  216. }
  217. .ui.visible.popup {
  218. -webkit-transform: translateZ(0px);
  219. transform: translateZ(0px);
  220. -webkit-backface-visibility: hidden;
  221. backface-visibility: hidden;
  222. }
  223. /*******************************
  224. Variations
  225. *******************************/
  226. /*--------------
  227. Basic
  228. ---------------*/
  229. .ui.basic.popup:before {
  230. display: none;
  231. }
  232. /*--------------
  233. Wide
  234. ---------------*/
  235. .ui.wide.popup {
  236. max-width: 350px;
  237. }
  238. .ui[class*="very wide"].popup {
  239. max-width: 550px;
  240. }
  241. /*--------------
  242. Fluid
  243. ---------------*/
  244. .ui.fluid.popup {
  245. width: 100%;
  246. max-width: none;
  247. }
  248. /*--------------
  249. Colors
  250. ---------------*/
  251. /* Inverted colors */
  252. .ui.inverted.popup {
  253. background: #1b1c1d;
  254. color: #ffffff;
  255. border: none;
  256. box-shadow: none;
  257. }
  258. .ui.inverted.popup .header {
  259. background-color: none;
  260. color: #ffffff;
  261. }
  262. .ui.inverted.popup:before {
  263. background-color: #1b1c1d;
  264. box-shadow: none !important;
  265. }
  266. /*--------------
  267. Flowing
  268. ---------------*/
  269. .ui.flowing.popup {
  270. max-width: none;
  271. }
  272. /*--------------
  273. Sizes
  274. ---------------*/
  275. .ui.mini.popup {
  276. font-size: 0.71428571rem;
  277. }
  278. .ui.tiny.popup {
  279. font-size: 0.85714286rem;
  280. }
  281. .ui.small.popup {
  282. font-size: 0.92857143rem;
  283. }
  284. .ui.popup {
  285. font-size: 1rem;
  286. }
  287. .ui.large.popup {
  288. font-size: 1.14285714rem;
  289. }
  290. .ui.huge.popup {
  291. font-size: 1.42857143rem;
  292. }
  293. /*******************************
  294. Theme Overrides
  295. *******************************/
  296. /*******************************
  297. User Overrides
  298. *******************************/