No Description

_modal.scss 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. // Modals
  2. // Design element Dialogs
  3. // --------------------------------------------------
  4. .modal-content {
  5. border: 0;
  6. // Modal header
  7. // Top section of the modal w/ title and dismiss
  8. .modal-header {
  9. border-bottom: none;
  10. & button {
  11. position: absolute;
  12. right: 27px;
  13. top: 24px;
  14. outline: 0;
  15. padding: 1rem;
  16. margin: -1rem -1rem -1rem auto;
  17. }
  18. .title{
  19. color: $black;
  20. margin-top: 5px;
  21. margin-bottom: 0;
  22. }
  23. .modal-title{
  24. color: $black;
  25. }
  26. i.tim-icons {
  27. font-size: 16px;
  28. }
  29. }
  30. // Modal body
  31. // Where all modal content resides (sibling of .modal-header and .modal-footer)
  32. .modal-body {
  33. line-height: 1.9;
  34. p{
  35. color: $black;
  36. }
  37. }
  38. // Footer (for actions)
  39. .modal-footer {
  40. border-top: 0;
  41. -webkit-justify-content: space-between; /* Safari 6.1+ */
  42. justify-content: space-between;
  43. button {
  44. margin: 0;
  45. padding-left: 16px;
  46. padding-right: 16px;
  47. width: auto;
  48. &.pull-left {
  49. padding-left: 5px;
  50. padding-right: 5px;
  51. position: relative;
  52. left: -5px;
  53. }
  54. }
  55. }
  56. .modal-body + .modal-footer {
  57. padding-top: 0;
  58. }
  59. }
  60. .modal-backdrop {
  61. background: rgba(0,0,0,0.3);
  62. }
  63. .modal{
  64. &.modal-default{
  65. @include modal-colors($white, $black);
  66. }
  67. &.modal-primary{
  68. @include modal-colors($primary, $white);
  69. }
  70. &.modal-danger{
  71. @include modal-colors($danger, $white);
  72. }
  73. &.modal-warning{
  74. @include modal-colors($warning, $white);
  75. }
  76. &.modal-success{
  77. @include modal-colors($success, $white);
  78. }
  79. &.modal-info{
  80. @include modal-colors($info, $white);
  81. }
  82. .modal-header .close{
  83. color: $danger;
  84. text-shadow: none;
  85. &:hover,
  86. &:focus{
  87. opacity: 1;
  88. }
  89. }
  90. &.modal-black{
  91. .modal-content{
  92. background: linear-gradient(to bottom, $black 0%, $black-states 100%);
  93. color: rgba($white, 0.8);
  94. .modal-header{
  95. .modal-title, .title{
  96. color: rgba($white, 0.9);
  97. }
  98. }
  99. .modal-body{
  100. p{
  101. color: rgba($white, 0.8);
  102. }
  103. }
  104. }
  105. h1, h2, h3, h4, h5, h6, p{
  106. color: $white;
  107. }
  108. }
  109. }
  110. .modal-search{
  111. .modal-dialog{
  112. margin: 20px auto;
  113. max-width: 650px;
  114. input{
  115. border: none;
  116. font-size: 17px;
  117. font-weight: 100;
  118. }
  119. span{
  120. font-size: 35px;
  121. color: $search-gray;
  122. }
  123. }
  124. .modal-content{
  125. .modal-header{
  126. padding: 24px;
  127. }
  128. }
  129. .modal-header .close{
  130. color: $dark-background;
  131. top: 30px !important;
  132. }
  133. .modal-footer{
  134. border-top: 2px solid #f9f9f9;
  135. margin: 0px 25px 20px;
  136. }
  137. }