modal.less 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /*
  2. * Component: modal
  3. * ----------------
  4. */
  5. .modal {
  6. background: rgba(0, 0, 0, .3);
  7. }
  8. .modal-content {
  9. .border-radius(0);
  10. .box-shadow(0 2px 3px rgba(0, 0, 0, .125));
  11. border: 0;
  12. @media (min-width: @screen-sm-min) {
  13. .box-shadow(0 2px 3px rgba(0, 0, 0, .125));
  14. }
  15. }
  16. .modal-header {
  17. border-bottom-color: @box-border-color;
  18. }
  19. .modal-footer {
  20. border-top-color: @box-border-color;
  21. }
  22. //Modal variants
  23. .modal-primary {
  24. .modal-body {
  25. &:extend(.bg-light-blue);
  26. }
  27. .modal-header,
  28. .modal-footer {
  29. &:extend(.bg-light-blue-active);
  30. border-color: darken(@light-blue, 10%);
  31. }
  32. }
  33. .modal-warning {
  34. .modal-body {
  35. &:extend(.bg-yellow);
  36. }
  37. .modal-header,
  38. .modal-footer {
  39. &:extend(.bg-yellow-active);
  40. border-color: darken(@yellow, 10%);
  41. }
  42. }
  43. .modal-info {
  44. .modal-body {
  45. &:extend(.bg-aqua);
  46. }
  47. .modal-header,
  48. .modal-footer {
  49. &:extend(.bg-aqua-active);
  50. border-color: darken(@aqua, 10%);
  51. }
  52. }
  53. .modal-success {
  54. .modal-body {
  55. &:extend(.bg-green);
  56. }
  57. .modal-header,
  58. .modal-footer {
  59. &:extend(.bg-green-active);
  60. border-color: darken(@green, 10%);
  61. }
  62. }
  63. .modal-danger {
  64. .modal-body {
  65. &:extend(.bg-red);
  66. }
  67. .modal-header,
  68. .modal-footer {
  69. &:extend(.bg-red-active);
  70. border-color: darken(@red, 10%);
  71. }
  72. }