modals.less 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. //
  2. // Misago Modals
  3. // --------------------------------------------------
  4. // Modals displaying messages
  5. // Small displays
  6. @media screen and (max-width: @screen-sm-max) {
  7. .modal-message {
  8. text-align: center;
  9. .message-icon {
  10. margin: @line-height-computed * 1.5;
  11. .material-icon {
  12. font-size: @message-page-icon-size * 2;
  13. }
  14. }
  15. }
  16. }
  17. // Full displays
  18. @media screen and (min-width: @screen-md-min) {
  19. .modal-message {
  20. .modal-body {
  21. padding-top: @line-height-computed;
  22. padding-bottom: @line-height-computed * 1.5;
  23. }
  24. .message-icon {
  25. float: left;
  26. position: relative;
  27. left: 7px;
  28. .material-icon {
  29. font-size: @line-height-computed * 2.5;
  30. }
  31. }
  32. .message-body {
  33. margin-left: @line-height-computed * 3.75;
  34. margin-top: @line-height-computed * .6 - 2px;
  35. p {
  36. margin-top: @line-height-computed;
  37. }
  38. .lead {
  39. margin-top: 0px;
  40. margin-bottom: 0px;
  41. }
  42. }
  43. }
  44. }
  45. // Modal loader
  46. .modal-loader {
  47. padding: @line-height-computed * 2.5 0px;
  48. .loader {
  49. width: 100%;
  50. height: @loader-size;
  51. text-align: center;
  52. }
  53. .loader-spinning-wheel {
  54. width: @loader-size;
  55. height: @loader-size;
  56. }
  57. }
  58. // Registration modal
  59. .modal-register .modal-footer a {
  60. float: left;
  61. margin-top: @line-height-computed / 3;
  62. }
  63. @media screen and (max-width: @screen-sm-max) {
  64. .modal-register .modal-footer {
  65. text-align: center;
  66. a {
  67. display: block;
  68. }
  69. .btn {
  70. display: block;
  71. float: none;
  72. margin-top: @line-height-computed / 2;
  73. width: 100%;
  74. }
  75. }
  76. }