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  height: auto;
24  left: 50%;
25  top: 50%;
26  transform: translate(-50%, -50%);
27  max-width: 850px;
28  min-width: 450px;
29  padding: 0.8em 1.5em;
30  border: thin $primary-dark solid;
31  background-color: $background-01;
32  z-index: 101;
33  position: fixed;
34  overflow: hidden;
35  @include fastTransition-all;
36  @include mediaQuery(medium) {
37    padding: 2.5em;
38  }
39}
40
41.modal.active {
42  @include fastTransition-all;
43  display: block;
44}
45
46.modal .page-header {
47  padding-bottom: 0.7em;
48}
49
50.screen-reader-offscreen {
51  position: absolute;
52  left: -999px;
53  width: 1px;
54  height: 1px;
55  top: auto;
56}
57.modal__content {
58  border-bottom: 1px solid $border-color-02;
59  padding-bottom: 1em;
60  margin-bottom: 2em;
61}
62.modal__link {
63  display: block;
64  margin: 0.8em 0 1em;
65  @include mediaQuery(medium) {
66    display: inline-block;
67    margin: 0.6em 0;
68  }
69}
70// TODO: Use the form__actions pattern / selector
71.modal__button-wrapper {
72  float: right;
73  button {
74    margin-bottom: 0.8em;
75    margin-right: 0.8em;
76    display: inline-block;
77    @include mediaQuery(medium) {
78      margin-left: 0.8em;
79      margin-right: 0;
80    }
81  }
82}
83
84.uib-modal.fade.in {
85  opacity: 1;
86}
87.uib-modal.in .modal-dialog {
88  transform: translate(0, 10vh);
89  margin-top: 50px;
90  .icon__close {
91    margin: 0;
92    padding: 0;
93  }
94  .modal-content {
95    border-radius: 0;
96    border-color: $primary-dark;
97  }
98}
99
100.modal-backdrop.in {
101  opacity: 0.5;
102}
103.uib-modal__content {
104  padding: 1em;
105}
106