modal.sass 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. $modal-z: 40 !default
  2. $modal-background-background-color: rgba($black, 0.86) !default
  3. $modal-content-width: 640px !default
  4. $modal-content-margin-mobile: 20px !default
  5. $modal-content-spacing-mobile: 160px !default
  6. $modal-content-spacing-tablet: 40px !default
  7. $modal-close-dimensions: 40px !default
  8. $modal-close-right: 20px !default
  9. $modal-close-top: 20px !default
  10. $modal-card-spacing: 40px !default
  11. $modal-card-head-background-color: $background !default
  12. $modal-card-head-border-bottom: 1px solid $border !default
  13. $modal-card-head-padding: 20px !default
  14. $modal-card-head-radius: $radius-large !default
  15. $modal-card-title-color: $text-strong !default
  16. $modal-card-title-line-height: 1 !default
  17. $modal-card-title-size: $size-4 !default
  18. $modal-card-foot-radius: $radius-large !default
  19. $modal-card-foot-border-top: 1px solid $border !default
  20. $modal-card-body-background-color: $white !default
  21. $modal-card-body-padding: 20px !default
  22. .modal
  23. @extend %overlay
  24. align-items: center
  25. display: none
  26. flex-direction: column
  27. justify-content: center
  28. overflow: hidden
  29. position: fixed
  30. z-index: $modal-z
  31. // Modifiers
  32. &.is-active
  33. display: flex
  34. .modal-background
  35. @extend %overlay
  36. background-color: $modal-background-background-color
  37. .modal-content,
  38. .modal-card
  39. margin: 0 $modal-content-margin-mobile
  40. max-height: calc(100vh - #{$modal-content-spacing-mobile})
  41. overflow: auto
  42. position: relative
  43. width: 100%
  44. // Responsiveness
  45. +tablet
  46. margin: 0 auto
  47. max-height: calc(100vh - #{$modal-content-spacing-tablet})
  48. width: $modal-content-width
  49. .modal-close
  50. @extend %delete
  51. background: none
  52. height: $modal-close-dimensions
  53. position: fixed
  54. right: $modal-close-right
  55. top: $modal-close-top
  56. width: $modal-close-dimensions
  57. .modal-card
  58. display: flex
  59. flex-direction: column
  60. max-height: calc(100vh - #{$modal-card-spacing})
  61. overflow: hidden
  62. -ms-overflow-y: visible
  63. .modal-card-head,
  64. .modal-card-foot
  65. align-items: center
  66. background-color: $modal-card-head-background-color
  67. display: flex
  68. flex-shrink: 0
  69. justify-content: flex-start
  70. padding: $modal-card-head-padding
  71. position: relative
  72. .modal-card-head
  73. border-bottom: $modal-card-head-border-bottom
  74. border-top-left-radius: $modal-card-head-radius
  75. border-top-right-radius: $modal-card-head-radius
  76. .modal-card-title
  77. color: $modal-card-title-color
  78. flex-grow: 1
  79. flex-shrink: 0
  80. font-size: $modal-card-title-size
  81. line-height: $modal-card-title-line-height
  82. .modal-card-foot
  83. border-bottom-left-radius: $modal-card-foot-radius
  84. border-bottom-right-radius: $modal-card-foot-radius
  85. border-top: $modal-card-foot-border-top
  86. .button
  87. &:not(:last-child)
  88. margin-right: 0.5em
  89. .modal-card-body
  90. +overflow-touch
  91. background-color: $modal-card-body-background-color
  92. flex-grow: 1
  93. flex-shrink: 1
  94. overflow: auto
  95. padding: $modal-card-body-padding