| @@ -10,8 +10,10 @@ | ||
| 10 | 10 | -webkit-box-direction: normal; |
| 11 | 11 | -ms-flex-direction: column; |
| 12 | 12 | flex-direction: column; |
| 13 | 13 | gap: 15px; |
| 14 | + -webkit-transition: ease opacity 200ms; | |
| 15 | + transition: ease opacity 200ms; | |
| 14 | 16 | } |
| 15 | 17 | |
| 16 | 18 | .merchant-wait-list-success { |
| 17 | 19 | color: green; |
| @@ -18,11 +20,12 @@ | ||
| 18 | 20 | } |
| 19 | 21 | |
| 20 | 22 | .merchant-wait-list-error { |
| 21 | 23 | color: red; |
| 24 | + margin-block: 10px; | |
| 22 | 25 | } |
| 23 | 26 | |
| 24 | -#merchant-wait-list p { | |
| 27 | +#merchant-wait-list p:not(.merchant-wait-list-error, .merchant-wait-list-success) { | |
| 25 | 28 | font-weight: bold; |
| 26 | 29 | margin: 0; |
| 27 | 30 | } |
| 28 | 31 | |
| @@ -36,5 +39,56 @@ | ||
| 36 | 39 | } |
| 37 | 40 | |
| 38 | 41 | #merchant-wait-list button { |
| 39 | 42 | width: 100%; |
| 43 | +} | |
| 44 | + | |
| 45 | +.merchant-wait-list-container { | |
| 46 | + position: relative; | |
| 47 | + margin-bottom: 1rem; | |
| 48 | +} | |
| 49 | +.merchant-wait-list-container.merchant-loading .merchant-cover { | |
| 50 | + visibility: visible; | |
| 51 | +} | |
| 52 | +.merchant-wait-list-container.merchant-loading .merchant-wait-list { | |
| 53 | + opacity: 0.2; | |
| 54 | +} | |
| 55 | +.merchant-wait-list-container.merchant-loading .merchant-wait-list-loader { | |
| 56 | + opacity: 1; | |
| 57 | + visibility: visible; | |
| 58 | +} | |
| 59 | +.merchant-wait-list-container.merchant-loading button:focus { | |
| 60 | + outline: none; | |
| 61 | +} | |
| 62 | +.merchant-wait-list-container .merchant-cover { | |
| 63 | + display: -webkit-box; | |
| 64 | + display: -ms-flexbox; | |
| 65 | + display: flex; | |
| 66 | + -webkit-box-align: center; | |
| 67 | + -ms-flex-align: center; | |
| 68 | + align-items: center; | |
| 69 | + -webkit-box-pack: center; | |
| 70 | + -ms-flex-pack: center; | |
| 71 | + justify-content: center; | |
| 72 | + visibility: hidden; | |
| 73 | + position: absolute; | |
| 74 | + height: 100%; | |
| 75 | + width: 100%; | |
| 76 | + opacity: 0.5; | |
| 77 | + cursor: progress; | |
| 78 | +} | |
| 79 | + | |
| 80 | +.merchant-wait-list-loader { | |
| 81 | + position: absolute; | |
| 82 | + z-index: 2; | |
| 83 | + display: block; | |
| 84 | + font-size: 26px; | |
| 85 | + opacity: 0; | |
| 86 | + visibility: hidden; | |
| 87 | +} | |
| 88 | +.merchant-wait-list-loader svg { | |
| 89 | + width: 1em; | |
| 90 | + height: 1em; | |
| 91 | + fill: #212121; | |
| 92 | + -webkit-animation: merchant-fa-spin 0.75s linear infinite; | |
| 93 | + animation: merchant-fa-spin 0.75s linear infinite; | |
| 40 | 94 | } |
