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.

250 lines
4.2 KiB

  1. /*
  2. * # Semantic - Popup
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 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. z-index: 900;
  20. border: 1px solid rgba(0, 0, 0, 0.1);
  21. max-width: 250px;
  22. background-color: #FFFFFF;
  23. padding: 0.8em 1.2em;
  24. font-size: 0.875rem;
  25. font-weight: normal;
  26. font-style: normal;
  27. color: rgba(0, 0, 0, 0.7);
  28. border-radius: 0.2em;
  29. -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  30. box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  31. }
  32. .ui.popup .header {
  33. padding: 0em 0em 0.5em;
  34. font-size: 1.125em;
  35. line-height: 1.2;
  36. font-weight: bold;
  37. }
  38. .ui.popup:before {
  39. position: absolute;
  40. content: "";
  41. width: 0.75em;
  42. height: 0.75rem;
  43. background-image: none;
  44. background-color: #FFFFFF;
  45. -webkit-transform: rotate(45deg);
  46. -ms-transform: rotate(45deg);
  47. transform: rotate(45deg);
  48. z-index: 2;
  49. -webkit-box-sizing: border-box;
  50. -moz-box-sizing: border-box;
  51. -ms-box-sizing: border-box;
  52. box-sizing: border-box;
  53. -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  54. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  55. }
  56. .ui.popup .ui.button {
  57. width: 100%;
  58. }
  59. /*******************************
  60. Types
  61. *******************************/
  62. /*--------------
  63. Spacing
  64. ---------------*/
  65. .ui.popup {
  66. margin: 0em;
  67. }
  68. .ui.popup.bottom {
  69. margin: 0.75em 0em 0em;
  70. }
  71. .ui.popup.top {
  72. margin: 0em 0em 0.75em;
  73. }
  74. .ui.popup.left.center {
  75. margin: 0em 0.75em 0em 0em;
  76. }
  77. .ui.popup.right.center {
  78. margin: 0em 0em 0em 0.75em;
  79. }
  80. .ui.popup.center {
  81. margin-left: -1.25em;
  82. }
  83. /*--------------
  84. Pointer
  85. ---------------*/
  86. /*--- Below ---*/
  87. .ui.bottom.center.popup:before {
  88. margin-left: -0.4em;
  89. top: -0.4em;
  90. left: 50%;
  91. right: auto;
  92. bottom: auto;
  93. -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
  94. box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
  95. }
  96. .ui.bottom.left.popup {
  97. margin-right: -2em;
  98. }
  99. .ui.bottom.left.popup:before {
  100. top: -0.4em;
  101. right: 1em;
  102. bottom: auto;
  103. left: auto;
  104. margin-left: 0em;
  105. -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
  106. box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
  107. }
  108. .ui.bottom.right.popup {
  109. margin-left: -2em;
  110. }
  111. .ui.bottom.right.popup:before {
  112. top: -0.4em;
  113. left: 1em;
  114. right: auto;
  115. bottom: auto;
  116. margin-left: 0em;
  117. -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
  118. box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
  119. }
  120. /*--- Above ---*/
  121. .ui.top.center.popup:before {
  122. top: auto;
  123. right: auto;
  124. bottom: -0.4em;
  125. left: 50%;
  126. margin-left: -0.4em;
  127. }
  128. .ui.top.left.popup {
  129. margin-right: -2em;
  130. }
  131. .ui.top.left.popup:before {
  132. bottom: -0.4em;
  133. right: 1em;
  134. top: auto;
  135. left: auto;
  136. margin-left: 0em;
  137. }
  138. .ui.top.right.popup {
  139. margin-left: -2em;
  140. }
  141. .ui.top.right.popup:before {
  142. bottom: -0.4em;
  143. left: 1em;
  144. top: auto;
  145. right: auto;
  146. margin-left: 0em;
  147. }
  148. /*--- Left Center ---*/
  149. .ui.left.center.popup:before {
  150. top: 50%;
  151. right: -0.35em;
  152. bottom: auto;
  153. left: auto;
  154. margin-top: -0.4em;
  155. -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
  156. box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
  157. }
  158. /*--- Right Center ---*/
  159. .ui.right.center.popup:before {
  160. top: 50%;
  161. left: -0.35em;
  162. bottom: auto;
  163. right: auto;
  164. margin-top: -0.4em;
  165. -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
  166. box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
  167. }
  168. /*******************************
  169. States
  170. *******************************/
  171. .ui.loading.popup {
  172. display: block;
  173. visibility: hidden;
  174. }
  175. .ui.visible.popup {
  176. display: block;
  177. }
  178. /*******************************
  179. Variations
  180. *******************************/
  181. /*--------------
  182. Size
  183. ---------------*/
  184. .ui.small.popup {
  185. font-size: 0.75rem;
  186. }
  187. .ui.large.popup {
  188. font-size: 1rem;
  189. }
  190. /*--------------
  191. Colors
  192. ---------------*/
  193. /* Inverted colors */
  194. .ui.inverted.popup {
  195. background-color: #333333;
  196. border: none;
  197. color: #FFFFFF;
  198. -webkit-box-shadow: none;
  199. box-shadow: none;
  200. }
  201. .ui.inverted.popup .header {
  202. background-color: rgba(0, 0, 0, 0.2);
  203. color: #FFFFFF;
  204. }
  205. .ui.inverted.popup:before {
  206. background-color: #333333;
  207. -webkit-box-shadow: none;
  208. box-shadow: none;
  209. }