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.

115 lines
2.3 KiB

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. /*--------------
  81. Actions
  82. ---------------*/
  83. .ui.modal .actions {
  84. border-top: 1px solid rgba(0, 0, 0, 0.1);
  85. padding: 1rem 2rem;
  86. text-align: right;
  87. }
  88. .ui.modal .actions > .button {
  89. margin-left: 0.75em;
  90. }
  91. /*******************************
  92. Types
  93. *******************************/
  94. .ui.basic.modal {
  95. background-color: transparent;
  96. border: none;
  97. color: #FFFFFF;
  98. }
  99. .ui.basic.modal .content {
  100. background-color: transparent;
  101. }
  102. /*******************************
  103. Variations
  104. *******************************/
  105. /* A modal that cannot fit on the page */
  106. .ui.modal.scrolling {
  107. position: absolute;
  108. margin-top: 100px;
  109. }
  110. /*******************************
  111. States
  112. *******************************/
  113. .ui.active.modal {
  114. display: block;
  115. }