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

9 years ago
9 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
  1. /*!
  2. * # Semantic UI 1.11.5 - Popup
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  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. /* Fixes content being squished when inline (moz only) */
  20. min-width: -moz-min-content;
  21. z-index: 1900;
  22. border: 1px solid #cccccc;
  23. max-width: 250px;
  24. background-color: #ffffff;
  25. padding: 0.833em 1em;
  26. font-weight: normal;
  27. font-style: normal;
  28. color: rgba(0, 0, 0, 0.8);
  29. border-radius: 0.2857rem;
  30. box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  31. }
  32. .ui.popup > .header {
  33. padding: 0em;
  34. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  35. font-size: 1.125em;
  36. line-height: 1.2;
  37. font-weight: bold;
  38. }
  39. .ui.popup > .header + .content {
  40. padding-top: 0.5em;
  41. }
  42. .ui.popup:before {
  43. position: absolute;
  44. content: '';
  45. width: 0.75em;
  46. height: 0.75em;
  47. background: #ffffff;
  48. -webkit-transform: rotate(45deg);
  49. -ms-transform: rotate(45deg);
  50. transform: rotate(45deg);
  51. z-index: 2;
  52. box-shadow: 1px 1px 0px 0px #b3b3b3;
  53. }
  54. /*******************************
  55. Types
  56. *******************************/
  57. /*--------------
  58. Spacing
  59. ---------------*/
  60. .ui.popup {
  61. margin: 0em;
  62. }
  63. .ui.popup.bottom {
  64. margin: 0.75em 0em 0em;
  65. }
  66. .ui.popup.top {
  67. margin: 0em 0em 0.75em;
  68. }
  69. .ui.popup.left.center {
  70. margin: 0em 0.75em 0em 0em;
  71. }
  72. .ui.popup.right.center {
  73. margin: 0em 0em 0em 0.75em;
  74. }
  75. /*--------------
  76. Pointer
  77. ---------------*/
  78. /*--- Below ---*/
  79. .ui.bottom.center.popup:before {
  80. margin-left: -0.325em;
  81. top: -0.325em;
  82. left: 50%;
  83. right: auto;
  84. bottom: auto;
  85. box-shadow: -1px -1px 0px 0px #b3b3b3;
  86. }
  87. .ui.bottom.left.popup {
  88. margin-left: 0em;
  89. }
  90. .ui.bottom.left.popup:before {
  91. top: -0.325em;
  92. left: 1em;
  93. right: auto;
  94. bottom: auto;
  95. margin-left: 0em;
  96. box-shadow: -1px -1px 0px 0px #b3b3b3;
  97. }
  98. .ui.bottom.right.popup {
  99. margin-right: 0em;
  100. }
  101. .ui.bottom.right.popup:before {
  102. top: -0.325em;
  103. right: 1em;
  104. bottom: auto;
  105. left: auto;
  106. margin-left: 0em;
  107. box-shadow: -1px -1px 0px 0px #b3b3b3;
  108. }
  109. /*--- Above ---*/
  110. .ui.top.center.popup:before {
  111. top: auto;
  112. right: auto;
  113. bottom: -0.325em;
  114. left: 50%;
  115. margin-left: -0.325em;
  116. }
  117. .ui.top.left.popup {
  118. margin-left: 0em;
  119. }
  120. .ui.top.left.popup:before {
  121. bottom: -0.325em;
  122. left: 1em;
  123. top: auto;
  124. right: auto;
  125. margin-left: 0em;
  126. }
  127. .ui.top.right.popup {
  128. margin-right: 0em;
  129. }
  130. .ui.top.right.popup:before {
  131. bottom: -0.325em;
  132. right: 1em;
  133. top: auto;
  134. left: auto;
  135. margin-left: 0em;
  136. }
  137. /*--- Left Center ---*/
  138. .ui.left.center.popup:before {
  139. top: 50%;
  140. right: -0.325em;
  141. bottom: auto;
  142. left: auto;
  143. margin-top: -0.325em;
  144. box-shadow: 1px -1px 0px 0px #b3b3b3;
  145. }
  146. /*--- Right Center ---*/
  147. .ui.right.center.popup:before {
  148. top: 50%;
  149. left: -0.325em;
  150. bottom: auto;
  151. right: auto;
  152. margin-top: -0.325em;
  153. box-shadow: -1px 1px 0px 0px #b3b3b3;
  154. }
  155. /*******************************
  156. Coupling
  157. *******************************/
  158. /* Immediate Nested Grid */
  159. .ui.popup > .ui.grid:not(.padded) {
  160. width: -webkit-calc(100% + 1.75rem);
  161. width: calc(100% + 1.75rem);
  162. margin: -0.7rem -0.875rem;
  163. }
  164. /*******************************
  165. States
  166. *******************************/
  167. .ui.loading.popup {
  168. display: block;
  169. visibility: hidden;
  170. z-index: -1;
  171. }
  172. .ui.animating.popup,
  173. .ui.visible.popup {
  174. display: block;
  175. }
  176. /*******************************
  177. Variations
  178. *******************************/
  179. /*--------------
  180. Basic
  181. ---------------*/
  182. .ui.basic.popup:before {
  183. display: none;
  184. }
  185. /*--------------
  186. Wide
  187. ---------------*/
  188. .ui.wide.popup {
  189. max-width: 350px;
  190. }
  191. .ui[class*="very wide"].popup {
  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.785714rem;
  230. }
  231. .ui.popup {
  232. font-size: 0.85714rem;
  233. }
  234. .ui.large.popup {
  235. font-size: 1rem;
  236. }
  237. .ui.huge.popup {
  238. font-size: 1.14285rem;
  239. }
  240. /*******************************
  241. Theme Overrides
  242. *******************************/
  243. /*******************************
  244. User Overrides
  245. *******************************/