modal.css 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
  1. /*!
  2. * # Semantic UI 2.2.6 - Modal
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Modal
  12. *******************************/
  13. .ui.modal {
  14. display: none;
  15. position: fixed;
  16. z-index: 1001;
  17. top: 50%;
  18. left: 50%;
  19. text-align: left;
  20. background: #FFFFFF;
  21. border: none;
  22. box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
  23. -webkit-transform-origin: 50% 25%;
  24. transform-origin: 50% 25%;
  25. border-radius: 0.28571429rem;
  26. -webkit-user-select: text;
  27. -moz-user-select: text;
  28. -ms-user-select: text;
  29. user-select: text;
  30. will-change: top, left, margin, transform, opacity;
  31. }
  32. .ui.modal > :first-child:not(.icon),
  33. .ui.modal > .icon:first-child + * {
  34. border-top-left-radius: 0.28571429rem;
  35. border-top-right-radius: 0.28571429rem;
  36. }
  37. .ui.modal > :last-child {
  38. border-bottom-left-radius: 0.28571429rem;
  39. border-bottom-right-radius: 0.28571429rem;
  40. }
  41. /*******************************
  42. Content
  43. *******************************/
  44. /*--------------
  45. Close
  46. ---------------*/
  47. .ui.modal > .close {
  48. cursor: pointer;
  49. position: absolute;
  50. top: -2.5rem;
  51. right: -2.5rem;
  52. z-index: 1;
  53. opacity: 0.8;
  54. font-size: 1.25em;
  55. color: #FFFFFF;
  56. width: 2.25rem;
  57. height: 2.25rem;
  58. padding: 0.625rem 0rem 0rem 0rem;
  59. }
  60. .ui.modal > .close:hover {
  61. opacity: 1;
  62. }
  63. /*--------------
  64. Header
  65. ---------------*/
  66. .ui.modal > .header {
  67. display: block;
  68. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  69. background: #FFFFFF;
  70. margin: 0em;
  71. padding: 1.25rem 1.5rem;
  72. box-shadow: none;
  73. color: rgba(0, 0, 0, 0.85);
  74. border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  75. }
  76. .ui.modal > .header:not(.ui) {
  77. font-size: 1.42857143rem;
  78. line-height: 1.2857em;
  79. font-weight: bold;
  80. }
  81. /*--------------
  82. Content
  83. ---------------*/
  84. .ui.modal > .content {
  85. display: block;
  86. width: 100%;
  87. font-size: 1em;
  88. line-height: 1.4;
  89. padding: 1.5rem;
  90. background: #FFFFFF;
  91. }
  92. .ui.modal > .image.content {
  93. display: -webkit-box;
  94. display: -webkit-flex;
  95. display: -ms-flexbox;
  96. display: flex;
  97. -webkit-box-orient: horizontal;
  98. -webkit-box-direction: normal;
  99. -webkit-flex-direction: row;
  100. -ms-flex-direction: row;
  101. flex-direction: row;
  102. }
  103. /* Image */
  104. .ui.modal > .content > .image {
  105. display: block;
  106. -webkit-box-flex: 0;
  107. -webkit-flex: 0 1 auto;
  108. -ms-flex: 0 1 auto;
  109. flex: 0 1 auto;
  110. width: '';
  111. -webkit-align-self: top;
  112. -ms-flex-item-align: top;
  113. align-self: top;
  114. }
  115. .ui.modal > [class*="top aligned"] {
  116. -webkit-align-self: top;
  117. -ms-flex-item-align: top;
  118. align-self: top;
  119. }
  120. .ui.modal > [class*="middle aligned"] {
  121. -webkit-align-self: middle;
  122. -ms-flex-item-align: middle;
  123. align-self: middle;
  124. }
  125. .ui.modal > [class*="stretched"] {
  126. -webkit-align-self: stretch;
  127. -ms-flex-item-align: stretch;
  128. align-self: stretch;
  129. }
  130. /* Description */
  131. .ui.modal > .content > .description {
  132. display: block;
  133. -webkit-box-flex: 1;
  134. -webkit-flex: 1 0 auto;
  135. -ms-flex: 1 0 auto;
  136. flex: 1 0 auto;
  137. min-width: 0px;
  138. -webkit-align-self: top;
  139. -ms-flex-item-align: top;
  140. align-self: top;
  141. }
  142. .ui.modal > .content > .icon + .description,
  143. .ui.modal > .content > .image + .description {
  144. -webkit-box-flex: 0;
  145. -webkit-flex: 0 1 auto;
  146. -ms-flex: 0 1 auto;
  147. flex: 0 1 auto;
  148. min-width: '';
  149. width: auto;
  150. padding-left: 2em;
  151. }
  152. /*rtl:ignore*/
  153. .ui.modal > .content > .image > i.icon {
  154. margin: 0em;
  155. opacity: 1;
  156. width: auto;
  157. line-height: 1;
  158. font-size: 8rem;
  159. }
  160. /*--------------
  161. Actions
  162. ---------------*/
  163. .ui.modal > .actions {
  164. background: #F9FAFB;
  165. padding: 1rem 1rem;
  166. border-top: 1px solid rgba(34, 36, 38, 0.15);
  167. text-align: right;
  168. }
  169. .ui.modal .actions > .button {
  170. margin-left: 0.75em;
  171. }
  172. /*-------------------
  173. Responsive
  174. --------------------*/
  175. /* Modal Width */
  176. @media only screen and (max-width: 767px) {
  177. .ui.modal {
  178. width: 95%;
  179. margin: 0em 0em 0em -47.5%;
  180. }
  181. }
  182. @media only screen and (min-width: 768px) {
  183. .ui.modal {
  184. width: 88%;
  185. margin: 0em 0em 0em -44%;
  186. }
  187. }
  188. @media only screen and (min-width: 992px) {
  189. .ui.modal {
  190. width: 850px;
  191. margin: 0em 0em 0em -425px;
  192. }
  193. }
  194. @media only screen and (min-width: 1200px) {
  195. .ui.modal {
  196. width: 900px;
  197. margin: 0em 0em 0em -450px;
  198. }
  199. }
  200. @media only screen and (min-width: 1920px) {
  201. .ui.modal {
  202. width: 950px;
  203. margin: 0em 0em 0em -475px;
  204. }
  205. }
  206. /* Tablet and Mobile */
  207. @media only screen and (max-width: 991px) {
  208. .ui.modal > .header {
  209. padding-right: 2.25rem;
  210. }
  211. .ui.modal > .close {
  212. top: 1.0535rem;
  213. right: 1rem;
  214. color: rgba(0, 0, 0, 0.87);
  215. }
  216. }
  217. /* Mobile */
  218. @media only screen and (max-width: 767px) {
  219. .ui.modal > .header {
  220. padding: 0.75rem 1rem !important;
  221. padding-right: 2.25rem !important;
  222. }
  223. .ui.modal > .content {
  224. display: block;
  225. padding: 1rem !important;
  226. }
  227. .ui.modal > .close {
  228. top: 0.5rem !important;
  229. right: 0.5rem !important;
  230. }
  231. /*rtl:ignore*/
  232. .ui.modal .image.content {
  233. -webkit-box-orient: vertical;
  234. -webkit-box-direction: normal;
  235. -webkit-flex-direction: column;
  236. -ms-flex-direction: column;
  237. flex-direction: column;
  238. }
  239. .ui.modal .content > .image {
  240. display: block;
  241. max-width: 100%;
  242. margin: 0em auto !important;
  243. text-align: center;
  244. padding: 0rem 0rem 1rem !important;
  245. }
  246. .ui.modal > .content > .image > i.icon {
  247. font-size: 5rem;
  248. text-align: center;
  249. }
  250. /*rtl:ignore*/
  251. .ui.modal .content > .description {
  252. display: block;
  253. width: 100% !important;
  254. margin: 0em !important;
  255. padding: 1rem 0rem !important;
  256. box-shadow: none;
  257. }
  258. /* Let Buttons Stack */
  259. .ui.modal > .actions {
  260. padding: 1rem 1rem 0rem !important;
  261. }
  262. .ui.modal .actions > .buttons,
  263. .ui.modal .actions > .button {
  264. margin-bottom: 1rem;
  265. }
  266. }
  267. /*--------------
  268. Coupling
  269. ---------------*/
  270. .ui.inverted.dimmer > .ui.modal {
  271. box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
  272. }
  273. /*******************************
  274. Types
  275. *******************************/
  276. .ui.basic.modal {
  277. background-color: transparent;
  278. border: none;
  279. border-radius: 0em;
  280. box-shadow: none !important;
  281. color: #FFFFFF;
  282. }
  283. .ui.basic.modal > .header,
  284. .ui.basic.modal > .content,
  285. .ui.basic.modal > .actions {
  286. background-color: transparent;
  287. }
  288. .ui.basic.modal > .header {
  289. color: #FFFFFF;
  290. }
  291. .ui.basic.modal > .close {
  292. top: 1rem;
  293. right: 1.5rem;
  294. }
  295. .ui.inverted.dimmer > .basic.modal {
  296. color: rgba(0, 0, 0, 0.87);
  297. }
  298. .ui.inverted.dimmer > .ui.basic.modal > .header {
  299. color: rgba(0, 0, 0, 0.85);
  300. }
  301. /* Tablet and Mobile */
  302. @media only screen and (max-width: 991px) {
  303. .ui.basic.modal > .close {
  304. color: #FFFFFF;
  305. }
  306. }
  307. /*******************************
  308. States
  309. *******************************/
  310. .ui.active.modal {
  311. display: block;
  312. }
  313. /*******************************
  314. Variations
  315. *******************************/
  316. /*--------------
  317. Scrolling
  318. ---------------*/
  319. /* A modal that cannot fit on the page */
  320. .scrolling.dimmable.dimmed {
  321. overflow: hidden;
  322. }
  323. .scrolling.dimmable.dimmed > .dimmer {
  324. overflow: auto;
  325. -webkit-overflow-scrolling: touch;
  326. }
  327. .scrolling.dimmable > .dimmer {
  328. position: fixed;
  329. }
  330. .modals.dimmer .ui.scrolling.modal {
  331. position: static !important;
  332. margin: 3.5rem auto !important;
  333. }
  334. /* undetached scrolling */
  335. .scrolling.undetached.dimmable.dimmed {
  336. overflow: auto;
  337. -webkit-overflow-scrolling: touch;
  338. }
  339. .scrolling.undetached.dimmable.dimmed > .dimmer {
  340. overflow: hidden;
  341. }
  342. .scrolling.undetached.dimmable .ui.scrolling.modal {
  343. position: absolute;
  344. left: 50%;
  345. margin-top: 3.5rem !important;
  346. }
  347. /* Coupling with Sidebar */
  348. .undetached.dimmable.dimmed > .pusher {
  349. z-index: auto;
  350. }
  351. @media only screen and (max-width: 991px) {
  352. .modals.dimmer .ui.scrolling.modal {
  353. margin-top: 1rem !important;
  354. margin-bottom: 1rem !important;
  355. }
  356. }
  357. /*--------------
  358. Full Screen
  359. ---------------*/
  360. .ui.fullscreen.modal {
  361. width: 95% !important;
  362. left: 2.5% !important;
  363. margin: 1em auto;
  364. }
  365. .ui.fullscreen.scrolling.modal {
  366. left: 0em !important;
  367. }
  368. .ui.fullscreen.modal > .header {
  369. padding-right: 2.25rem;
  370. }
  371. .ui.fullscreen.modal > .close {
  372. top: 1.0535rem;
  373. right: 1rem;
  374. color: rgba(0, 0, 0, 0.87);
  375. }
  376. /*--------------
  377. Size
  378. ---------------*/
  379. .ui.modal {
  380. font-size: 1rem;
  381. }
  382. /* Small */
  383. .ui.small.modal > .header:not(.ui) {
  384. font-size: 1.3em;
  385. }
  386. /* Small Modal Width */
  387. @media only screen and (max-width: 767px) {
  388. .ui.small.modal {
  389. width: 95%;
  390. margin: 0em 0em 0em -47.5%;
  391. }
  392. }
  393. @media only screen and (min-width: 768px) {
  394. .ui.small.modal {
  395. width: 70.4%;
  396. margin: 0em 0em 0em -35.2%;
  397. }
  398. }
  399. @media only screen and (min-width: 992px) {
  400. .ui.small.modal {
  401. width: 680px;
  402. margin: 0em 0em 0em -340px;
  403. }
  404. }
  405. @media only screen and (min-width: 1200px) {
  406. .ui.small.modal {
  407. width: 720px;
  408. margin: 0em 0em 0em -360px;
  409. }
  410. }
  411. @media only screen and (min-width: 1920px) {
  412. .ui.small.modal {
  413. width: 760px;
  414. margin: 0em 0em 0em -380px;
  415. }
  416. }
  417. /* Large Modal Width */
  418. .ui.large.modal > .header {
  419. font-size: 1.6em;
  420. }
  421. @media only screen and (max-width: 767px) {
  422. .ui.large.modal {
  423. width: 95%;
  424. margin: 0em 0em 0em -47.5%;
  425. }
  426. }
  427. @media only screen and (min-width: 768px) {
  428. .ui.large.modal {
  429. width: 88%;
  430. margin: 0em 0em 0em -44%;
  431. }
  432. }
  433. @media only screen and (min-width: 992px) {
  434. .ui.large.modal {
  435. width: 1020px;
  436. margin: 0em 0em 0em -510px;
  437. }
  438. }
  439. @media only screen and (min-width: 1200px) {
  440. .ui.large.modal {
  441. width: 1080px;
  442. margin: 0em 0em 0em -540px;
  443. }
  444. }
  445. @media only screen and (min-width: 1920px) {
  446. .ui.large.modal {
  447. width: 1140px;
  448. margin: 0em 0em 0em -570px;
  449. }
  450. }
  451. /*******************************
  452. Theme Overrides
  453. *******************************/
  454. /*******************************
  455. Site Overrides
  456. *******************************/