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.

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