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.

118 lines
2.4 KiB

11 years ago
11 years ago
  1. /*
  2. * # Semantic Modal
  3. * http://github.com/quirkyinc/semantic
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: Aug 05, 2013
  11. */
  12. /*******************************
  13. Modal
  14. *******************************/
  15. .ui.modal {
  16. display: none;
  17. position: fixed;
  18. z-index: 1001;
  19. top: 50%;
  20. left: 50%;
  21. text-align: left;
  22. width: 800px;
  23. margin-left: -400px;
  24. background-color: #FFFFFF;
  25. border: 1px solid #DDDDDD;
  26. -webkit-border-radius: 5px;
  27. -moz-border-radius: 5px;
  28. border-radius: 5px;
  29. }
  30. /*******************************
  31. Content
  32. *******************************/
  33. /*--------------
  34. Close
  35. ---------------*/
  36. .ui.modal > .close {
  37. cursor: pointer;
  38. position: absolute;
  39. opacity: 0.8;
  40. font-size: 1.25em;
  41. top: -1.75em;
  42. right: -1.75em;
  43. color: #FFFFFF;
  44. }
  45. .ui.modal > .close:hover {
  46. opacity: 1;
  47. }
  48. /*--------------
  49. Header
  50. ---------------*/
  51. .ui.modal > .header {
  52. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  53. margin: 0em;
  54. padding: 1.5rem 2rem;
  55. font-size: 1.6em;
  56. font-weight: bold;
  57. -webkit-border-radius: 0.325em 0.325em 0px 0px;
  58. -moz-border-radius: 0.325em 0.325em 0px 0px;
  59. border-radius: 0.325em 0.325em 0px 0px;
  60. }
  61. /*--------------
  62. Content
  63. ---------------*/
  64. .ui.modal > .content {
  65. display: table;
  66. position: relative;
  67. padding: 2em;
  68. background-color: #F4F4F4;
  69. }
  70. .ui.modal > .content > .left {
  71. display: table-cell;
  72. padding-right: 5%;
  73. }
  74. .ui.modal > .content > .right {
  75. display: table-cell;
  76. padding-left: 5%;
  77. vertical-align: middle;
  78. box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
  79. }
  80. .ui.modal > .content p {
  81. line-height: 1.6;
  82. }
  83. /*--------------
  84. Actions
  85. ---------------*/
  86. .ui.modal .actions {
  87. border-top: 1px solid rgba(0, 0, 0, 0.1);
  88. padding: 1rem 2rem;
  89. text-align: right;
  90. }
  91. .ui.modal .actions > .button {
  92. margin-left: 0.75em;
  93. }
  94. /*******************************
  95. Types
  96. *******************************/
  97. .ui.basic.modal {
  98. background-color: transparent;
  99. border: none;
  100. color: #FFFFFF;
  101. }
  102. .ui.basic.modal .content {
  103. background-color: transparent;
  104. }
  105. /*******************************
  106. Variations
  107. *******************************/
  108. /* A modal that cannot fit on the page */
  109. .ui.modal.scrolling {
  110. position: absolute;
  111. margin-top: 100px;
  112. }
  113. /*******************************
  114. States
  115. *******************************/
  116. .ui.active.modal {
  117. display: block;
  118. }