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/**
87  * Markup  for bootstrap modal
88  <div class="uib-modal__content">
89    <div class="modal-header">
90      <h2 class="modal-title" id="modal_label">
91        Title here
92      </h2>
93      <button
94        type="button"
95        class="btn  btn--close"
96        ng-click="$dismiss()"
97        aria-label="close">
98        <icon file="icon-close.svg" aria-hidden="true"></icon>
99      </button>
100    </div>
101    <div class="modal-body">
102      Body content
103    </div>
104    <div class="modal-footer">
105      <button
106        type="button"
107        class="btn btn-secondary"
108        ng-click="$dismiss()">
109        Cancel
110      </button>
111      <button
112        type="submit"
113        class="btn btn-primary"
114        ng-click="function()">
115        Save
116      </button>
117    </div>
118  </div>
119*/
120
121.uib-modal.fade.in {
122  opacity: 1;
123}
124
125.uib-modal.in .modal-dialog {
126  transform: translate(0, 10vh);
127  margin-top: 50px;
128  .icon__close {
129    margin: 0;
130    padding: 0;
131  }
132  .modal-content {
133    border-radius: 0;
134    border-color: $primary-dark;
135  }
136}
137
138.modal-backdrop.in {
139  opacity: 0.5;
140}
141
142.uib-modal__content {
143  padding: 1em;
144  .modal-header {
145    display: block;
146  }
147  .btn--close {
148    padding: 0;
149    svg {
150      height: 1.6em;
151    }
152  }
153}
154
155.uib-modal {
156  .btn--close {
157    position: absolute;
158    right: 0;
159    top: 0;
160    svg {
161      height: 2em;
162    }
163  }
164}
165