modals.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. //
  2. // Misago Modals
  3. // --------------------------------------------------
  4. // Modal toolbar
  5. .modal-toolbar {
  6. background: @gray-lighter;
  7. border-bottom: 1px solid @modal-header-border-color;
  8. overflow: auto;
  9. padding: @padding-base-vertical @padding-base-horizontal;
  10. .pull-left {
  11. margin-right: 8px;
  12. }
  13. p {
  14. padding: @padding-small-vertical 0px;
  15. margin-bottom: 0px;
  16. }
  17. }
  18. // Modals displaying messages
  19. // Small displays
  20. @media screen and (max-width: @screen-sm-max) {
  21. .modal-message {
  22. text-align: center;
  23. .message-icon {
  24. margin: @line-height-computed * 1.5;
  25. .material-icon {
  26. font-size: @message-page-icon-size * 2;
  27. }
  28. }
  29. }
  30. }
  31. // Full displays
  32. @media screen and (min-width: @screen-md-min) {
  33. .modal-message {
  34. .modal-body {
  35. padding-top: @line-height-computed;
  36. padding-bottom: @line-height-computed * 1.5;
  37. }
  38. .message-icon {
  39. float: left;
  40. position: relative;
  41. left: 7px;
  42. .material-icon {
  43. font-size: @line-height-computed * 2.5;
  44. }
  45. }
  46. .message-body {
  47. margin-left: @line-height-computed * 3.75;
  48. margin-top: @line-height-computed * .6 - 2px;
  49. p {
  50. margin-top: @line-height-computed;
  51. }
  52. .lead {
  53. margin-top: 0px;
  54. margin-bottom: 0px;
  55. }
  56. }
  57. }
  58. }
  59. // Modal loader
  60. .modal-loader {
  61. padding: @line-height-computed * 2.5 0px;
  62. .loader {
  63. width: 100%;
  64. height: @loader-size;
  65. text-align: center;
  66. }
  67. .loader-spinning-wheel {
  68. width: @loader-size;
  69. height: @loader-size;
  70. }
  71. }
  72. // Modal form
  73. .modal-body .form-group {
  74. min-height: 34px;
  75. }
  76. // Registration modal
  77. .modal-register .modal-footer a {
  78. float: left;
  79. margin-top: @line-height-computed / 3;
  80. }
  81. @media screen and (max-width: @screen-sm-max) {
  82. .modal-register .modal-footer {
  83. text-align: center;
  84. a {
  85. display: block;
  86. }
  87. .btn {
  88. display: block;
  89. float: none;
  90. margin-top: @line-height-computed / 2;
  91. width: 100%;
  92. }
  93. }
  94. }
  95. // Errors modal
  96. .list-item-errors {
  97. margin-bottom: @line-height-computed;
  98. }
  99. .list-errored-items li:last-child .list-item-errors {
  100. margin-bottom: 0px;
  101. }