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.

396 lines
8.9 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
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
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
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Popup
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributor
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Theme
  13. *******************************/
  14. /*
  15. */
  16. /*******************************
  17. Folders
  18. *******************************/
  19. /* Path to theme packages */
  20. /* Path to site override folder */
  21. /*******************************
  22. Themes
  23. *******************************/
  24. /* To override a theme for an individual element
  25. specify theme name below
  26. Be sure to update the user folder name (see README)
  27. */
  28. /* Global */
  29. /* Elements */
  30. /* Collections */
  31. /* Modules */
  32. /* Views */
  33. /*******************************
  34. Import Directives
  35. *******************************/
  36. /*------------------
  37. Load Default
  38. -------------------*/
  39. /*******************************
  40. Site Settings
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Fonts
  47. --------------------*/
  48. /*-------------------
  49. Site Colors
  50. --------------------*/
  51. /*--- Colors ---*/
  52. /*--- Light Colors ---*/
  53. /*-------------------
  54. Page
  55. --------------------*/
  56. /* Used to match floats with text */
  57. /*-------------------
  58. Background Colors
  59. --------------------*/
  60. /* Used for differentiating neutrals */
  61. /* Used for differentiating layers */
  62. /*-------------------
  63. Grid
  64. --------------------*/
  65. /*-------------------
  66. Breakpoints
  67. --------------------*/
  68. /*******************************
  69. Power-User
  70. *******************************/
  71. /*-------------------
  72. Icons
  73. --------------------*/
  74. /* Max Width of Icon */
  75. /*-------------------
  76. Easing
  77. --------------------*/
  78. /*--- Neutrals ---*/
  79. /*--- Colored Backgrounds ---*/
  80. /*--- Colored Text ---*/
  81. /*--- Colored Headers ---*/
  82. /*-------------------
  83. Emotive Colors
  84. --------------------*/
  85. /* Mood */
  86. /* Solid Background Color */
  87. /* Status */
  88. /* Darkened Headers */
  89. /*-------------------
  90. Neutral Text
  91. --------------------*/
  92. /*-------------------
  93. Brand Colors
  94. --------------------*/
  95. /*-------------------
  96. Grid Columns
  97. --------------------*/
  98. /*-------------------
  99. Borders
  100. --------------------*/
  101. /*-------------------
  102. Sizes
  103. --------------------*/
  104. /*-------------------
  105. Transitions
  106. --------------------*/
  107. /*******************************
  108. States
  109. *******************************/
  110. /*-------------------
  111. Disabled
  112. --------------------*/
  113. /*-------------------
  114. Hover
  115. --------------------*/
  116. /*--- Colors ---*/
  117. /*--- Emotive ---*/
  118. /*--- Neutrals ---*/
  119. /*-------------------
  120. Down (:active)
  121. --------------------*/
  122. /*--- Colors ---*/
  123. /*--- Emotive ---*/
  124. /*--- Neutrals ---*/
  125. /*-------------------
  126. Active
  127. --------------------*/
  128. /*--- Standard ---*/
  129. /*--- Emotive ---*/
  130. /*--- Neutrals ---*/
  131. /*******************************
  132. Popup
  133. *******************************/
  134. /*-------------------
  135. Element
  136. --------------------*/
  137. /*-------------------
  138. Parts
  139. --------------------*/
  140. /* Placement */
  141. /* Header */
  142. /* Content Border */
  143. /* Arrow */
  144. /*-------------------
  145. Coupling
  146. --------------------*/
  147. /*-------------------
  148. States
  149. --------------------*/
  150. /*-------------------
  151. Variations
  152. --------------------*/
  153. /* Wide */
  154. /* Inverted */
  155. /* Sizes */
  156. /*------------------
  157. Load Theme
  158. -------------------*/
  159. /*------------------
  160. Load Site
  161. -------------------*/
  162. /*******************************
  163. User Global Variables
  164. *******************************/
  165. /*******************************
  166. User Variable Overrides
  167. *******************************/
  168. /*------------------
  169. Override Mix-in
  170. -------------------*/
  171. /*******************************
  172. Popup
  173. *******************************/
  174. .ui.popup {
  175. display: none;
  176. position: absolute;
  177. top: 0px;
  178. right: 0px;
  179. z-index: 900;
  180. border: 1px solid #cccccc;
  181. max-width: 250px;
  182. background-color: #ffffff;
  183. padding: 0.8em 1em;
  184. font-weight: normal;
  185. font-style: normal;
  186. color: rgba(0, 0, 0, 0.8);
  187. border-radius: 0.25em;
  188. box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  189. }
  190. .ui.popup > .header {
  191. padding: 0em;
  192. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  193. font-size: 1.125em;
  194. line-height: 1.2;
  195. font-weight: bold;
  196. }
  197. .ui.popup > .header + .content {
  198. padding-top: 0.5em;
  199. }
  200. .ui.popup:before {
  201. position: absolute;
  202. content: '';
  203. width: 0.75em;
  204. height: 0.75em;
  205. background: #ffffff;
  206. -webkit-transform: rotate(45deg);
  207. -ms-transform: rotate(45deg);
  208. transform: rotate(45deg);
  209. z-index: 2;
  210. box-shadow: 1px 1px 0px 0px #b3b3b3;
  211. }
  212. /*******************************
  213. Types
  214. *******************************/
  215. /*--------------
  216. Spacing
  217. ---------------*/
  218. .ui.popup {
  219. margin: 0em;
  220. }
  221. .ui.popup.bottom {
  222. margin: 0.75em 0em 0em;
  223. }
  224. .ui.popup.top {
  225. margin: 0em 0em 0.75em;
  226. }
  227. .ui.popup.left.center {
  228. margin: 0em 0.75em 0em 0em;
  229. }
  230. .ui.popup.right.center {
  231. margin: 0em 0em 0em 0.75em;
  232. }
  233. .ui.popup.center {
  234. margin-left: -1.25em;
  235. }
  236. /*--------------
  237. Pointer
  238. ---------------*/
  239. /*--- Below ---*/
  240. .ui.bottom.center.popup:before {
  241. margin-left: -0.325em;
  242. top: -0.325em;
  243. left: 50%;
  244. right: auto;
  245. bottom: auto;
  246. box-shadow: -1px -1px 0px 0px #b3b3b3;
  247. }
  248. .ui.bottom.left.popup {
  249. margin-left: 0em;
  250. }
  251. .ui.bottom.left.popup:before {
  252. top: -0.325em;
  253. left: 1em;
  254. right: auto;
  255. bottom: auto;
  256. margin-left: 0em;
  257. box-shadow: -1px -1px 0px 0px #b3b3b3;
  258. }
  259. .ui.bottom.right.popup {
  260. margin-right: 0em;
  261. }
  262. .ui.bottom.right.popup:before {
  263. top: -0.325em;
  264. right: 1em;
  265. bottom: auto;
  266. left: auto;
  267. margin-left: 0em;
  268. box-shadow: -1px -1px 0px 0px #b3b3b3;
  269. }
  270. /*--- Above ---*/
  271. .ui.top.center.popup:before {
  272. top: auto;
  273. right: auto;
  274. bottom: -0.325em;
  275. left: 50%;
  276. margin-left: -0.325em;
  277. }
  278. .ui.top.left.popup {
  279. margin-left: 0em;
  280. }
  281. .ui.top.left.popup:before {
  282. bottom: -0.325em;
  283. left: 1em;
  284. top: auto;
  285. right: auto;
  286. margin-left: 0em;
  287. }
  288. .ui.top.right.popup {
  289. margin-right: 0em;
  290. }
  291. .ui.top.right.popup:before {
  292. bottom: -0.325em;
  293. right: 1em;
  294. top: auto;
  295. left: auto;
  296. margin-left: 0em;
  297. }
  298. /*--- Left Center ---*/
  299. .ui.left.center.popup:before {
  300. top: 50%;
  301. right: -0.325em;
  302. bottom: auto;
  303. left: auto;
  304. margin-top: -0.325em;
  305. box-shadow: 1px -1px 0px 0px #b3b3b3;
  306. }
  307. /*--- Right Center ---*/
  308. .ui.right.center.popup:before {
  309. top: 50%;
  310. left: -0.325em;
  311. bottom: auto;
  312. right: auto;
  313. margin-top: -0.325em;
  314. box-shadow: -1px 1px 0px 0px #b3b3b3;
  315. }
  316. /*******************************
  317. States
  318. *******************************/
  319. .ui.loading.popup {
  320. display: block;
  321. visibility: hidden;
  322. z-index: -1;
  323. }
  324. .ui.animating.popup,
  325. .ui.visible.popup {
  326. display: block;
  327. }
  328. /*******************************
  329. Variations
  330. *******************************/
  331. /*--------------
  332. Wide
  333. ---------------*/
  334. .ui.wide.popup {
  335. width: 350px;
  336. max-width: 350px;
  337. }
  338. .ui[class*="very wide"].popup {
  339. width: 550px;
  340. max-width: 550px;
  341. }
  342. /*--------------
  343. Fluid
  344. ---------------*/
  345. .ui.fluid.popup {
  346. width: 100%;
  347. max-width: 99999px;
  348. }
  349. /*--------------
  350. Colors
  351. ---------------*/
  352. /* Inverted colors */
  353. .ui.inverted.popup {
  354. background: #17181d;
  355. color: #ffffff;
  356. border: none;
  357. box-shadow: none;
  358. }
  359. .ui.inverted.popup .header {
  360. background-color: none;
  361. color: #ffffff;
  362. }
  363. .ui.inverted.popup:before {
  364. background-color: #17181d;
  365. box-shadow: none;
  366. }
  367. /*--------------
  368. Sizes
  369. ---------------*/
  370. .ui.small.popup {
  371. font-size: 0.8rem;
  372. }
  373. .ui.popup {
  374. font-size: 0.875rem;
  375. }
  376. .ui.large.popup {
  377. font-size: 1rem;
  378. }
  379. .ui.huge.popup {
  380. font-size: 1.1rem;
  381. }
  382. /*******************************
  383. Overrides
  384. *******************************/
  385. /*******************************
  386. User Overrides
  387. *******************************/