1.modal-overlay {
2  width: 100%;
3  height: 100%;
4  z-index: -1;
5  background-color: $primary-dark;
6  position: fixed;
7  top: 0;
8  left: 0;
9  margin: 0;
10  padding: 0;
11  opacity: 0;
12}
13
14.modal-overlay.active {
15  z-index: 100;
16  opacity: 0.5;
17  display: block;
18  @include fastTransition-all;
19}
20
21.modal:not(.uib-modal) {
22  width: auto;
23  min-width: 450px;
24  max-width: 960px;
25  height: auto;
26  left: 50%;
27  top: 50%;
28  transform: translate(-50%, -50%);
29  max-width: 850px;
30  min-width: 450px;
31  padding: 0.8em 1.5em;
32  border: thin $primary-dark solid;
33  background-color: $background-01;
34  z-index: 101;
35  position: fixed;
36  overflow: hidden;
37  @include fastTransition-all;
38  @include mediaQuery(medium) {
39    padding: 2.5em;
40  }
41}
42
43.modal.active {
44  @include fastTransition-all;
45  display: block;
46}
47
48.modal .page-header {
49  padding-bottom: 0.7em;
50}
51
52.screen-reader-offscreen {
53  position: absolute;
54  left: -999px;
55  width: 1px;
56  height: 1px;
57  top: auto;
58}
59.modal__content {
60  border-bottom: 1px solid $border-color-02;
61  padding-bottom: 1em;
62  margin-bottom: 2em;
63}
64.modal__link {
65  display: block;
66  margin: 0.8em 0 1em;
67  @include mediaQuery(medium) {
68    display: inline-block;
69    margin: 0.6em 0;
70  }
71}
72// TODO: Use the form__actions pattern / selector
73.modal__button-wrapper {
74  float: right;
75  button {
76    margin-bottom: 0.8em;
77    margin-right: 0.8em;
78    display: inline-block;
79    @include mediaQuery(medium) {
80      margin-left: 0.8em;
81      margin-right: 0;
82    }
83  }
84}
85
86.uib-modal.fade.in {
87  opacity: 1;
88}
89.uib-modal.in .modal-dialog {
90  transform: translate(0, 10vh);
91  margin-top: 50px;
92  .icon__close {
93    margin: 0;
94    padding: 0;
95  }
96  .modal-content {
97    border-radius: 0;
98    border-color: $primary-dark;
99  }
100}
101
102.uib-modal .modal-dialog {
103  // override bootstrap max-width set at 500px
104  max-width: 550px;
105}
106
107.modal-backdrop.in {
108  opacity: 0.5;
109}
110.uib-modal__content {
111  padding: 1em;
112  .modal-header {
113    display: block;
114  }
115  .btn--close {
116    padding: 0;
117    svg {
118      height: 1.6em;
119    }
120  }
121}
122
123.uib-modal {
124  .btn--close {
125    position: absolute;
126    right: 0;
127    top: 0;
128    svg {
129      height: 2em;
130    }
131  }
132}
133