You are here

modal_page.css in Modal 7

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h4,
.h4 {
  font-size: 18px;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #333;
  text-decoration: none;
}
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:focus,
.btn-default.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}
button.close {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.modal-open {
  overflow: hidden;
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  transition: transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

.modal-footer:after {
  display: table;
  content: " ";
}
.modal-header:after,
.modal-footer:after {
  clear: both;
}

File

css/modal_page.css
View source
  1. * {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box;
  5. }
  6. *:before,
  7. *:after {
  8. -webkit-box-sizing: border-box;
  9. -moz-box-sizing: border-box;
  10. box-sizing: border-box;
  11. }
  12. h4,
  13. .h4 {
  14. font-size: 18px;
  15. }
  16. .btn {
  17. display: inline-block;
  18. padding: 6px 12px;
  19. margin-bottom: 0;
  20. font-size: 14px;
  21. font-weight: normal;
  22. line-height: 1.42857143;
  23. text-align: center;
  24. white-space: nowrap;
  25. vertical-align: middle;
  26. -ms-touch-action: manipulation;
  27. touch-action: manipulation;
  28. cursor: pointer;
  29. -webkit-user-select: none;
  30. -moz-user-select: none;
  31. -ms-user-select: none;
  32. user-select: none;
  33. background-image: none;
  34. border: 1px solid transparent;
  35. border-radius: 4px;
  36. }
  37. .btn:focus,
  38. .btn:active:focus,
  39. .btn.active:focus,
  40. .btn.focus,
  41. .btn:active.focus,
  42. .btn.active.focus {
  43. outline: 5px auto -webkit-focus-ring-color;
  44. outline-offset: -2px;
  45. }
  46. .btn:hover,
  47. .btn:focus,
  48. .btn.focus {
  49. color: #333;
  50. text-decoration: none;
  51. }
  52. .btn:active,
  53. .btn.active {
  54. background-image: none;
  55. outline: 0;
  56. -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  57. box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  58. }
  59. a.btn.disabled,
  60. fieldset[disabled] a.btn {
  61. pointer-events: none;
  62. }
  63. .btn-default {
  64. color: #333;
  65. background-color: #fff;
  66. border-color: #ccc;
  67. }
  68. .btn-default:focus,
  69. .btn-default.focus {
  70. color: #333;
  71. background-color: #e6e6e6;
  72. border-color: #8c8c8c;
  73. }
  74. .btn-default:hover {
  75. color: #333;
  76. background-color: #e6e6e6;
  77. border-color: #adadad;
  78. }
  79. .btn-default:active,
  80. .btn-default.active,
  81. .open > .dropdown-toggle.btn-default {
  82. color: #333;
  83. background-color: #e6e6e6;
  84. border-color: #adadad;
  85. }
  86. .close {
  87. float: right;
  88. font-size: 21px;
  89. font-weight: bold;
  90. line-height: 1;
  91. color: #000;
  92. text-shadow: 0 1px 0 #fff;
  93. filter: alpha(opacity=20);
  94. opacity: .2;
  95. }
  96. .close:hover,
  97. .close:focus {
  98. color: #000;
  99. text-decoration: none;
  100. cursor: pointer;
  101. filter: alpha(opacity=50);
  102. opacity: .5;
  103. }
  104. button.close {
  105. -webkit-appearance: none;
  106. padding: 0;
  107. cursor: pointer;
  108. background: transparent;
  109. border: 0;
  110. }
  111. .modal-open {
  112. overflow: hidden;
  113. }
  114. .modal {
  115. position: fixed;
  116. top: 0;
  117. right: 0;
  118. bottom: 0;
  119. left: 0;
  120. z-index: 1050;
  121. display: none;
  122. overflow: hidden;
  123. -webkit-overflow-scrolling: touch;
  124. outline: 0;
  125. }
  126. .modal.fade .modal-dialog {
  127. -webkit-transition: -webkit-transform .3s ease-out;
  128. -o-transition: -o-transform .3s ease-out;
  129. transition: transform .3s ease-out;
  130. -webkit-transform: translate(0, -25%);
  131. -ms-transform: translate(0, -25%);
  132. -o-transform: translate(0, -25%);
  133. transform: translate(0, -25%);
  134. }
  135. .modal.in .modal-dialog {
  136. -webkit-transform: translate(0, 0);
  137. -ms-transform: translate(0, 0);
  138. -o-transform: translate(0, 0);
  139. transform: translate(0, 0);
  140. }
  141. .modal-open .modal {
  142. overflow-x: hidden;
  143. overflow-y: auto;
  144. }
  145. .modal-dialog {
  146. position: relative;
  147. width: auto;
  148. margin: 10px;
  149. }
  150. .modal-content {
  151. position: relative;
  152. background-color: #fff;
  153. -webkit-background-clip: padding-box;
  154. background-clip: padding-box;
  155. border: 1px solid #999;
  156. border: 1px solid rgba(0, 0, 0, .2);
  157. border-radius: 6px;
  158. outline: 0;
  159. -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  160. box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  161. }
  162. .modal-backdrop {
  163. position: fixed;
  164. top: 0;
  165. right: 0;
  166. bottom: 0;
  167. left: 0;
  168. z-index: 1040;
  169. background-color: #000;
  170. }
  171. .modal-backdrop.fade {
  172. filter: alpha(opacity=0);
  173. opacity: 0;
  174. }
  175. .modal-backdrop.in {
  176. filter: alpha(opacity=50);
  177. opacity: .5;
  178. }
  179. .modal-header {
  180. padding: 15px;
  181. border-bottom: 1px solid #e5e5e5;
  182. }
  183. .modal-header .close {
  184. margin-top: -2px;
  185. }
  186. .modal-title {
  187. margin: 0;
  188. line-height: 1.42857143;
  189. }
  190. .modal-body {
  191. position: relative;
  192. padding: 15px;
  193. }
  194. .modal-footer {
  195. padding: 15px;
  196. text-align: right;
  197. border-top: 1px solid #e5e5e5;
  198. }
  199. .modal-footer .btn + .btn {
  200. margin-bottom: 0;
  201. margin-left: 5px;
  202. }
  203. .modal-footer .btn-group .btn + .btn {
  204. margin-left: -1px;
  205. }
  206. .modal-footer .btn-block + .btn-block {
  207. margin-left: 0;
  208. }
  209. .modal-scrollbar-measure {
  210. position: absolute;
  211. top: -9999px;
  212. width: 50px;
  213. height: 50px;
  214. overflow: scroll;
  215. }
  216. @media (min-width: 768px) {
  217. .modal-dialog {
  218. width: 600px;
  219. margin: 30px auto;
  220. }
  221. .modal-content {
  222. -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  223. box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  224. }
  225. .modal-sm {
  226. width: 300px;
  227. }
  228. }
  229. @media (min-width: 992px) {
  230. .modal-lg {
  231. width: 900px;
  232. }
  233. }
  234. .modal-footer:after {
  235. display: table;
  236. content: " ";
  237. }
  238. .modal-header:after,
  239. .modal-footer:after {
  240. clear: both;
  241. }