bulma/sass/components/modal.sass

82 lines
1.4 KiB
Sass
Raw Normal View History

.modal-background
+overlay
2016-06-29 22:59:48 +00:00
background-color: rgba($black, 0.86)
2016-09-22 21:03:22 +00:00
.modal-content,
.modal-card
margin: 0 20px
max-height: calc(100vh - 160px)
overflow: auto
position: relative
width: 100%
2016-04-10 15:27:27 +00:00
// Responsiveness
+tablet
margin: 0 auto
max-height: calc(100vh - 40px)
width: 640px
.modal-close
2016-09-22 22:14:18 +00:00
+delete
background: none
height: 40px
position: fixed
right: 20px
top: 20px
width: 40px
.modal-card
display: flex
flex-direction: column
max-height: calc(100vh - 40px)
overflow: hidden
.modal-card-head,
.modal-card-foot
align-items: center
2016-06-29 22:59:48 +00:00
background-color: $background
display: flex
flex-shrink: 0
justify-content: flex-start
padding: 20px
position: relative
.modal-card-head
border-bottom: 1px solid $border
border-top-left-radius: $radius-large
border-top-right-radius: $radius-large
.modal-card-title
color: $text-strong
2016-07-31 10:45:56 +00:00
flex-grow: 1
flex-shrink: 0
font-size: $size-4
line-height: 1
.modal-card-foot
border-bottom-left-radius: $radius-large
border-bottom-right-radius: $radius-large
border-top: 1px solid $border
.button
&:not(:last-child)
margin-right: 10px
.modal-card-body
2016-12-22 19:51:52 +00:00
+overflow-touch
background-color: $white
2016-07-31 10:45:56 +00:00
flex-grow: 1
flex-shrink: 1
overflow: auto
padding: 20px
.modal
+overlay
align-items: center
display: none
justify-content: center
overflow: hidden
position: fixed
z-index: 1986
2016-04-10 15:27:27 +00:00
// Modifiers
&.is-active
display: flex