| 1 | .modaldialog__container {
|
| 2 | position: relative;
|
| 3 | align-items: center;
|
| 4 | cursor: default;
|
| 5 | display: flex;
|
| 6 | flex: 0 1 auto;
|
| 7 | flex-direction: column;
|
| 8 | opacity: 1;
|
| 9 | color: black;
|
| 10 | background: rgba(245, 245, 245, 0.85);
|
| 11 | border: 1px solid #575757;
|
| 12 | z-index: 2;
|
| 13 | border-radius: 0.5rem;
|
| 14 | box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); }
|
| 15 | @media screen and (min-width: 360px) {
|
| 16 | .modaldialog__container {
|
| 17 | max-height: 90vh;
|
| 18 | margin: 3.3rem; } }
|
| 19 |
|
| 20 | .modaldialog__header {
|
| 21 | min-width: 30.4rem;
|
| 22 | border-radius: 0.5rem 0.5rem 0 0;
|
| 23 | align-items: center;
|
| 24 | font-family: 'PT Sans';
|
| 25 | font-size: 2rem;
|
| 26 | margin: 0;
|
| 27 | padding: 2rem 2rem 1.5rem 2rem;
|
| 28 | border-bottom: 0.5rem solid #f0f0f0;
|
| 29 | background: #fafafa; }
|
| 30 | .modaldialog__header svg {
|
| 31 | margin-right: 1.6rem; }
|
| 32 |
|
| 33 | .modaldialog__closemodalbutton {
|
| 34 | cursor: pointer;
|
| 35 | position: absolute;
|
| 36 | background: white;
|
| 37 | border-radius: 100%;
|
| 38 | display: flex;
|
| 39 | flex-direction: row-reverse; }
|
| 40 | @media screen and (max-width: 360px) {
|
| 41 | .modaldialog__closemodalbutton {
|
| 42 | right: 0.5rem;
|
| 43 | top: 0.5rem; } }
|
| 44 | @media screen and (min-width: 360px) {
|
| 45 | .modaldialog__closemodalbutton {
|
| 46 | right: -3rem;
|
| 47 | top: -2rem; } }
|
| 48 |
|
| 49 | .modaldialog__buttons {
|
| 50 | border-top: 1px solid #575757;
|
| 51 | padding: 0.5rem 0;
|
| 52 | width: 100%;
|
| 53 | background: white;
|
| 54 | display: flex;
|
| 55 | align-items: center;
|
| 56 | justify-content: flex-end; }
|
| 57 |
|
| 58 | .modaldialog__body {
|
| 59 | display: flex;
|
| 60 | flex-direction: column;
|
| 61 | justify-content: center;
|
| 62 | min-width: 32rem;
|
| 63 | background: #fdfdfd;
|
| 64 | flex: 1 1 auto;
|
| 65 | padding: 2.4rem 1.2rem;
|
| 66 | overflow-y: auto; }
|
| 67 |
|
| 68 | .modal__background {
|
| 69 | position: fixed;
|
| 70 | height: 100%;
|
| 71 | top: 0;
|
| 72 | left: 0;
|
| 73 | width: 100%;
|
| 74 | background: rgba(0, 0, 0, 0.5);
|
| 75 | z-index: 4;
|
| 76 | opacity: 1;
|
| 77 | display: flex;
|
| 78 | align-items: center;
|
| 79 | justify-content: center;
|
| 80 | -webkit-tap-highlight-color: transparent; }
|
| 81 |
|
| 82 | .actionmodal__trigger {
|
| 83 | color: red; }
|