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.

369 lines
7.5 KiB

11 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
10 years ago
10 years ago
11 years ago
10 years ago
10 years ago
11 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
10 years ago
11 years ago
10 years ago
10 years ago
11 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Semantic - Modal
  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. @type : 'module';
  15. @element : 'modal';
  16. @import '../../semantic.config';
  17. /*******************************
  18. Modal
  19. *******************************/
  20. .ui.modal {
  21. display: none;
  22. position: fixed;
  23. z-index: 1001;
  24. top: 50%;
  25. left: 50%;
  26. text-align: left;
  27. width: @width;
  28. margin-left: @xOffset;
  29. background: @background;
  30. border: @border;
  31. box-shadow: @boxShadow;
  32. border-radius: @borderRadius;
  33. user-select: text;
  34. will-change: top, left, margin, transform, opacity;
  35. }
  36. .ui.modal > :first-child:not(.icon),
  37. .ui.modal > .icon:first-child + * {
  38. border-top-left-radius: @borderRadius;
  39. border-top-right-radius: @borderRadius;
  40. }
  41. .ui.modal > :last-child {
  42. border-bottom-left-radius: @borderRadius;
  43. border-bottom-right-radius: @borderRadius;
  44. }
  45. /*******************************
  46. Content
  47. *******************************/
  48. /*--------------
  49. Close
  50. ---------------*/
  51. .ui.modal > .close {
  52. cursor: pointer;
  53. position: absolute;
  54. top: @closeTop;
  55. right: @closeRight;
  56. z-index: 1;
  57. opacity: @closeOpacity;
  58. font-size: @closeSize;
  59. color: @closeColor;
  60. width: @closeHitbox;
  61. height: @closeHitbox;
  62. padding: @closePadding;
  63. }
  64. .ui.modal > .close:hover {
  65. opacity: 1;
  66. }
  67. /*--------------
  68. Header
  69. ---------------*/
  70. .ui.modal > .header {
  71. display: block;
  72. font-family: @headerFontFamily;
  73. background: @headerBackground;
  74. margin: @headerMargin;
  75. padding: @headerPadding;
  76. box-shadow: @headerBoxShadow;
  77. font-size: @headerFontSize;
  78. font-weight: @headerFontWeight;
  79. color: @headerColor;
  80. border-bottom: @headerBorder;
  81. }
  82. /*--------------
  83. Content
  84. ---------------*/
  85. .ui.modal > .content {
  86. display: table;
  87. table-layout: fixed;
  88. width: 100%;
  89. font-size: @contentFontSize;
  90. line-height: @contentLineHeight;
  91. padding: @contentPadding;
  92. background: @contentBackground;
  93. }
  94. .ui.modal > .content > .image {
  95. display: table-cell;
  96. width: @imageWidth;
  97. vertical-align: @imageVerticalAlign;
  98. }
  99. .ui.modal > .content > .description {
  100. display: table-cell;
  101. vertical-align: top;
  102. min-width: @descriptionMinWidth;
  103. vertical-align: @descriptionVerticalAlign;
  104. }
  105. .ui.modal > .content > .icon + .description,
  106. .ui.modal > .content > .image + .description {
  107. padding-left: @descriptionDistance;
  108. }
  109. /*rtl:ignore*/
  110. .ui.modal > .content > .image > i.icon {
  111. font-size: @imageIconSize;
  112. margin: 0em;
  113. opacity: 1;
  114. }
  115. /*--------------
  116. Actions
  117. ---------------*/
  118. .ui.modal .actions {
  119. background: @actionBackground;
  120. padding: @actionPadding;
  121. border-top: @actionBorder;
  122. text-align: @actionAlign;
  123. }
  124. .ui.modal .actions > .button {
  125. margin-left: @buttonDistance;
  126. }
  127. /*-------------------
  128. Responsive
  129. --------------------*/
  130. /* Modal Width */
  131. @media only screen and (max-width : (@tabletBreakpoint - 1px)) {
  132. .ui.modal {
  133. width: @mobileWidth;
  134. margin: @mobileMargin;
  135. }
  136. }
  137. @media only screen and (min-width : @tabletBreakpoint) {
  138. .ui.modal {
  139. width: @tabletWidth;
  140. margin: @tabletMargin;
  141. }
  142. }
  143. @media only screen and (min-width : @computerBreakpoint) {
  144. .ui.modal {
  145. width: @computerWidth;
  146. margin: @computerMargin;
  147. }
  148. }
  149. @media only screen and (min-width : @largeMonitorBreakpoint) {
  150. .ui.modal {
  151. width: @largeMonitorWidth;
  152. margin: @largeMonitorMargin;
  153. }
  154. }
  155. @media only screen and (min-width : @widescreenMonitorBreakpoint) {
  156. .ui.modal {
  157. width: @widescreenMonitorWidth;
  158. margin: @widescreenMonitorMargin;
  159. }
  160. }
  161. /* Position Adjustments */
  162. @media only screen and (max-width : (@tabletBreakpoint - 1px)) {
  163. /*rtl:ignore*/
  164. .ui.modal .content > .image {
  165. display: block;
  166. padding: @mobileImagePadding;
  167. }
  168. /*rtl:ignore*/
  169. .ui.modal .content > .description {
  170. display: block;
  171. padding: @mobileDescriptionPadding;
  172. box-shadow: none;
  173. }
  174. .ui.modal .content .image {
  175. width: auto !important;
  176. max-width: 100%;
  177. }
  178. .ui.modal .actions {
  179. padding-bottom: 0em
  180. }
  181. .ui.modal .actions > .buttons,
  182. .ui.modal .actions > .button {
  183. margin-bottom: @mobileButtonDistance;
  184. }
  185. }
  186. /* Tablet and Mobile */
  187. @media only screen and (max-width : @computerBreakpoint) {
  188. .ui.modal > .close {
  189. top: @innerCloseTop;
  190. right: @innerCloseRight;
  191. color: @innerCloseColor;
  192. }
  193. }
  194. /*******************************
  195. Types
  196. *******************************/
  197. .ui.basic.modal {
  198. background-color: transparent;
  199. border: none;
  200. box-shadow: none;
  201. color: @basicModalColor;
  202. }
  203. .ui.basic.modal > .header,
  204. .ui.basic.modal > .content,
  205. .ui.basic.modal > .actions {
  206. background-color: transparent;
  207. }
  208. .ui.basic.modal > .header {
  209. color: @basicModalHeaderColor;
  210. }
  211. .ui.basic.modal > .close {
  212. top: @basicModalCloseTop;
  213. right: @basicModalCloseRight;
  214. }
  215. /*******************************
  216. Variations
  217. *******************************/
  218. /* A modal that cannot fit on the page */
  219. .ui.scrolling.dimmable.dimmed {
  220. overflow: hidden;
  221. }
  222. .ui.scrolling.dimmable.dimmed > .dimmer {
  223. overflow: auto;
  224. }
  225. .ui.scrolling.dimmable > .dimmer {
  226. position: fixed;
  227. }
  228. .ui.modal.scrolling {
  229. position: static;
  230. margin: @scrollingMargin auto;
  231. }
  232. /*******************************
  233. States
  234. *******************************/
  235. .ui.active.modal {
  236. display: block;
  237. }
  238. /*******************************
  239. Variations
  240. *******************************/
  241. /*--------------
  242. Full Screen
  243. ---------------*/
  244. .ui.fullscreen.modal {
  245. width: @fullScreenWidth !important;
  246. margin: @fullScreenMargin;
  247. }
  248. .ui.fullscreen.modal > .close {
  249. top: @innerCloseTop;
  250. right: @innerCloseRight;
  251. color: @innerCloseColor;
  252. }
  253. /*--------------
  254. Size
  255. ---------------*/
  256. /* Small */
  257. .ui.small.modal > .header {
  258. font-size: @smallHeaderSize;
  259. }
  260. /* Small Modal Width */
  261. @media only screen and (max-width : (@tabletBreakpoint - 1px)) {
  262. .ui.small.modal {
  263. width: @smallMobileWidth;
  264. margin: @smallMobileMargin;
  265. }
  266. }
  267. @media only screen and (min-width : @tabletBreakpoint) {
  268. .ui.small.modal {
  269. width: @smallTabletWidth;
  270. margin: @smallTabletMargin;
  271. }
  272. }
  273. @media only screen and (min-width : @computerBreakpoint) {
  274. .ui.small.modal {
  275. width: @smallComputerWidth;
  276. margin: @smallComputerMargin;
  277. }
  278. }
  279. @media only screen and (min-width : @largeMonitorBreakpoint) {
  280. .ui.small.modal {
  281. width: @smallLargeMonitorWidth;
  282. margin: @smallLargeMonitorMargin;
  283. }
  284. }
  285. @media only screen and (min-width : @widescreenMonitorBreakpoint) {
  286. .ui.small.modal {
  287. width: @smallWidescreenMonitorWidth;
  288. margin: @smallWidescreenMonitorMargin;
  289. }
  290. }
  291. /* Large Modal Width */
  292. .ui.large.modal > .header {
  293. font-size: @largeHeaderSize;
  294. }
  295. @media only screen and (max-width : (@tabletBreakpoint - 1px)) {
  296. .ui.large.modal {
  297. width: @largeMobileWidth;
  298. margin: @largeMobileMargin;
  299. }
  300. }
  301. @media only screen and (min-width : @tabletBreakpoint) {
  302. .ui.large.modal {
  303. width: @largeTabletWidth;
  304. margin: @largeTabletMargin;
  305. }
  306. }
  307. @media only screen and (min-width : @computerBreakpoint) {
  308. .ui.large.modal {
  309. width: @largeComputerWidth;
  310. margin: @largeComputerMargin;
  311. }
  312. }
  313. @media only screen and (min-width : @largeMonitorBreakpoint) {
  314. .ui.large.modal {
  315. width: @largeLargeMonitorWidth;
  316. margin: @largeLargeMonitorMargin;
  317. }
  318. }
  319. @media only screen and (min-width : @widescreenMonitorBreakpoint) {
  320. .ui.large.modal {
  321. width: @largeWidescreenMonitorWidth;
  322. margin: @largeWidescreenMonitorMargin;
  323. }
  324. }
  325. .loadUIOverrides();