bulma/sass/components/modal.sass at master · csseditor/bulma · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
.modal-background
  +overlay
  background-color: rgba($black, 0.86)

.modal-content,
.modal-card
  margin: 0 20px
  max-height: calc(100vh - 160px)
  overflow: auto
  position: relative
  width: 100%
  // Responsiveness
  +tablet
    margin: 0 auto
    max-height: calc(100vh - 40px)
    width: 640px

.modal-close
  +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
  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
  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
  +overflow-touch
  background-color: $white
  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: 20
  // Modifiers
  &.is-active
    display: flex