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

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: 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. *******************************/