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.

350 lines
6.3 KiB

9 years ago
9 years ago
9 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
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
  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: -webkit-calc(100% + 1.75rem);
  203. width: calc(100% + 1.75rem);
  204. margin: -0.7rem -0.875rem;
  205. }
  206. /*******************************
  207. States
  208. *******************************/
  209. .ui.loading.popup {
  210. display: block;
  211. visibility: hidden;
  212. z-index: -1;
  213. }
  214. .ui.animating.popup,
  215. .ui.visible.popup {
  216. display: block;
  217. }
  218. .ui.visible.popup {
  219. -webkit-transform: translateZ(0px);
  220. transform: translateZ(0px);
  221. -webkit-backface-visibility: hidden;
  222. backface-visibility: hidden;
  223. }
  224. /*******************************
  225. Variations
  226. *******************************/
  227. /*--------------
  228. Basic
  229. ---------------*/
  230. .ui.basic.popup:before {
  231. display: none;
  232. }
  233. /*--------------
  234. Wide
  235. ---------------*/
  236. .ui.wide.popup {
  237. max-width: 350px;
  238. }
  239. .ui[class*="very wide"].popup {
  240. max-width: 550px;
  241. }
  242. /*--------------
  243. Fluid
  244. ---------------*/
  245. .ui.fluid.popup {
  246. width: 100%;
  247. max-width: none;
  248. }
  249. /*--------------
  250. Colors
  251. ---------------*/
  252. /* Inverted colors */
  253. .ui.inverted.popup {
  254. background: #1b1c1d;
  255. color: #ffffff;
  256. border: none;
  257. box-shadow: none;
  258. }
  259. .ui.inverted.popup .header {
  260. background-color: none;
  261. color: #ffffff;
  262. }
  263. .ui.inverted.popup:before {
  264. background-color: #1b1c1d;
  265. box-shadow: none !important;
  266. }
  267. /*--------------
  268. Flowing
  269. ---------------*/
  270. .ui.flowing.popup {
  271. max-width: none;
  272. }
  273. /*--------------
  274. Sizes
  275. ---------------*/
  276. .ui.mini.popup {
  277. font-size: 0.71428571rem;
  278. }
  279. .ui.tiny.popup {
  280. font-size: 0.85714286rem;
  281. }
  282. .ui.small.popup {
  283. font-size: 0.92857143rem;
  284. }
  285. .ui.popup {
  286. font-size: 1rem;
  287. }
  288. .ui.large.popup {
  289. font-size: 1.14285714rem;
  290. }
  291. .ui.huge.popup {
  292. font-size: 1.42857143rem;
  293. }
  294. /*******************************
  295. Theme Overrides
  296. *******************************/
  297. /*******************************
  298. User Overrides
  299. *******************************/