|
57 | 57 | .#{$prefix}--dropdown,
|
58 | 58 | .#{$prefix}--dropdown-list,
|
59 | 59 | .#{$prefix}--number input[type='number'],
|
60 |
| - .#{$prefix}--date-picker__input { |
| 60 | + .#{$prefix}--date-picker__input, |
| 61 | + .#{$prefix}--multi-select { |
61 | 62 | background-color: $field-02;
|
62 | 63 | }
|
63 | 64 | }
|
|
67 | 68 | transition: transform $duration-moderate-02 motion(entrance, expressive);
|
68 | 69 | }
|
69 | 70 |
|
| 71 | + // ----------------------------- |
| 72 | + // Modal container |
| 73 | + // ----------------------------- |
70 | 74 | .#{$prefix}--modal-container {
|
71 | 75 | position: fixed;
|
72 | 76 | top: 0;
|
|
90 | 94 | width: 84%;
|
91 | 95 | height: auto;
|
92 | 96 | max-height: 90%;
|
93 |
| - |
94 |
| - .#{$prefix}--modal-content p, |
95 |
| - .#{$prefix}--modal-content__regular-content { |
96 |
| - padding-right: 20%; |
97 |
| - } |
98 |
| - |
99 |
| - .#{$prefix}--modal-content--with-form { |
100 |
| - // Override for `.#{$prefix}--modal-content` |
101 |
| - padding-right: $spacing-05; |
102 |
| - } |
103 | 97 | }
|
104 | 98 |
|
105 | 99 | @include breakpoint(lg) {
|
|
112 | 106 | }
|
113 | 107 | }
|
114 | 108 |
|
115 |
| - .#{$prefix}--modal-header, |
| 109 | + // ----------------------------- |
| 110 | + // Modal content |
| 111 | + // ----------------------------- |
116 | 112 | .#{$prefix}--modal-content {
|
| 113 | + @include type-style('body-long-01'); |
| 114 | + |
| 115 | + position: relative; |
| 116 | + // Required to accommodate focus outline's negative offset: |
| 117 | + padding-top: $spacing-03; |
| 118 | + // anything besides text/p spans full width, with just 16px padding |
| 119 | + padding-right: $spacing-05; |
117 | 120 | padding-left: $spacing-05;
|
| 121 | + margin-bottom: $spacing-09; |
| 122 | + color: $text-primary; |
| 123 | + font-weight: 400; |
| 124 | + grid-column: 1/-1; |
| 125 | + grid-row: 2/-2; |
| 126 | + overflow-y: auto; |
| 127 | + |
| 128 | + &:focus { |
| 129 | + @include focus-outline('outline'); |
| 130 | + } |
118 | 131 | }
|
119 | 132 |
|
120 |
| - .#{$prefix}--modal-header, |
121 |
| - .#{$prefix}--modal-content, |
| 133 | + //TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated |
| 134 | + // text/p gets 20% right padding |
| 135 | + .#{$prefix}--modal-content p, |
122 | 136 | .#{$prefix}--modal-content__regular-content {
|
123 |
| - padding-right: $spacing-05; |
| 137 | + padding-right: 20%; |
| 138 | + @include type-style('body-long-01'); |
124 | 139 | }
|
125 | 140 |
|
| 141 | + //TO-DO: remove .#{$prefix}--modal-content--with-form in v11 since hasForm has been deprecated\ |
| 142 | + // anything besides text/p spans full width, with just 16px padding |
126 | 143 | .#{$prefix}--modal-content--with-form {
|
127 | 144 | padding-right: $spacing-05;
|
128 | 145 | }
|
129 | 146 |
|
| 147 | + // ----------------------------- |
| 148 | + // Modal header |
| 149 | + // ----------------------------- |
| 150 | + .#{$prefix}--modal-header { |
| 151 | + padding-top: $spacing-05; |
| 152 | + padding-right: $spacing-09; |
| 153 | + padding-left: $spacing-05; |
| 154 | + margin-bottom: $spacing-03; |
| 155 | + grid-column: 1/-1; |
| 156 | + grid-row: 1/1; |
| 157 | + } |
| 158 | + |
| 159 | + .#{$prefix}--modal-header__label { |
| 160 | + @include type-style('label-01'); |
| 161 | + |
| 162 | + margin-bottom: $spacing-02; |
| 163 | + color: $text-secondary; |
| 164 | + } |
| 165 | + |
| 166 | + .#{$prefix}--modal-header__heading { |
| 167 | + @include type-style('productive-heading-03'); |
| 168 | + |
| 169 | + color: $text-primary; |
| 170 | + } |
| 171 | + |
| 172 | + // ----------------------------- |
| 173 | + // XS Modal |
| 174 | + // ----------------------------- |
130 | 175 | .#{$prefix}--modal-container--xs {
|
131 |
| - .#{$prefix}--modal-header { |
132 |
| - padding-right: $spacing-09; |
| 176 | + //text always spans full width in xs modals |
| 177 | + .#{$prefix}--modal-content__regular-content { |
| 178 | + padding-right: $spacing-05; |
133 | 179 | }
|
134 | 180 |
|
135 |
| - .#{$prefix}--modal-content, |
136 |
| - .#{$prefix}--modal-content__regular-content, |
137 |
| - .#{$prefix}--modal-content--with-form { |
138 |
| - padding-right: $spacing-05; |
| 181 | + .#{$prefix}--modal-content p { |
| 182 | + //.#{$prefix}--modal-content already has 16px padding so this doesn't need any |
| 183 | + padding-right: 0; |
139 | 184 | }
|
140 | 185 |
|
141 | 186 | @include breakpoint(md) {
|
|
152 | 197 | }
|
153 | 198 | }
|
154 | 199 |
|
| 200 | + // ----------------------------- |
| 201 | + // SM Modal |
| 202 | + // ----------------------------- |
155 | 203 | .#{$prefix}--modal-container--sm {
|
156 |
| - .#{$prefix}--modal-header { |
157 |
| - padding-right: $spacing-09; |
| 204 | + //text spans full width in sm modals below 1056 |
| 205 | + .#{$prefix}--modal-content__regular-content { |
| 206 | + padding-right: $spacing-05; |
158 | 207 | }
|
159 | 208 |
|
160 |
| - .#{$prefix}--modal-content, |
161 |
| - .#{$prefix}--modal-content__regular-content, |
162 |
| - .#{$prefix}--modal-content--with-form { |
163 |
| - padding-right: $spacing-05; |
| 209 | + .#{$prefix}--modal-content p { |
| 210 | + //.#{$prefix}--modal-content already has 16px padding so this doesn't need any |
| 211 | + padding-right: 0; |
164 | 212 | }
|
165 | 213 |
|
166 | 214 | @include breakpoint(md) {
|
|
170 | 218 | @include breakpoint(lg) {
|
171 | 219 | width: 42%;
|
172 | 220 | max-height: 72%;
|
173 |
| - } |
174 |
| - |
175 |
| - @include breakpoint(xlg) { |
176 |
| - width: 36%; |
177 | 221 |
|
178 | 222 | .#{$prefix}--modal-content p,
|
179 | 223 | .#{$prefix}--modal-content__regular-content {
|
180 | 224 | padding-right: 20%;
|
181 | 225 | }
|
| 226 | + } |
182 | 227 |
|
183 |
| - .#{$prefix}--modal-content--with-form { |
184 |
| - // Override for `.#{$prefix}--modal-content` |
185 |
| - padding-right: $spacing-05; |
186 |
| - } |
| 228 | + @include breakpoint(xlg) { |
| 229 | + width: 36%; |
187 | 230 | }
|
188 | 231 | }
|
189 | 232 |
|
| 233 | + // ----------------------------- |
| 234 | + // LG Modal |
| 235 | + // ----------------------------- |
190 | 236 | .#{$prefix}--modal-container--lg {
|
191 |
| - .#{$prefix}--modal-header { |
192 |
| - padding-right: $spacing-09; |
193 |
| - } |
194 |
| - |
195 |
| - .#{$prefix}--modal-content, |
196 |
| - .#{$prefix}--modal-content__regular-content, |
197 |
| - .#{$prefix}--modal-content--with-form { |
198 |
| - padding-right: $spacing-05; |
199 |
| - } |
200 |
| - |
201 | 237 | @include breakpoint(md) {
|
202 | 238 | width: 96%;
|
203 |
| - |
204 |
| - .#{$prefix}--modal-content p, |
205 |
| - .#{$prefix}--modal-content__regular-content { |
206 |
| - padding-right: 20%; |
207 |
| - } |
208 |
| - |
209 |
| - .#{$prefix}--modal-content--with-form { |
210 |
| - // Override for `.#{$prefix}--modal-content` |
211 |
| - padding-right: $spacing-05; |
212 |
| - } |
213 | 239 | }
|
214 | 240 |
|
215 | 241 | @include breakpoint(lg) {
|
|
222 | 248 | }
|
223 | 249 | }
|
224 | 250 |
|
225 |
| - .#{$prefix}--modal-header { |
226 |
| - padding-top: $spacing-05; |
227 |
| - padding-right: $spacing-09; |
228 |
| - margin-bottom: $spacing-03; |
229 |
| - grid-column: 1/-1; |
230 |
| - grid-row: 1/1; |
231 |
| - } |
232 |
| - |
233 |
| - .#{$prefix}--modal-header__label { |
234 |
| - @include type-style('label-01'); |
235 |
| - |
236 |
| - margin-bottom: $spacing-02; |
237 |
| - color: $text-secondary; |
238 |
| - } |
239 |
| - |
240 |
| - .#{$prefix}--modal-header__heading { |
241 |
| - @include type-style('productive-heading-03'); |
242 |
| - |
243 |
| - color: $text-primary; |
244 |
| - } |
245 |
| - |
246 |
| - .#{$prefix}--modal-content { |
247 |
| - @include type-style('body-long-01'); |
248 |
| - |
249 |
| - position: relative; |
250 |
| - // Required to accommodate focus outline's negative offset: |
251 |
| - padding-top: $spacing-03; |
252 |
| - margin-bottom: $spacing-09; |
253 |
| - color: $text-primary; |
254 |
| - font-weight: 400; |
255 |
| - grid-column: 1/-1; |
256 |
| - grid-row: 2/-2; |
257 |
| - overflow-y: auto; |
258 |
| - |
259 |
| - &:focus { |
260 |
| - @include focus-outline('outline'); |
261 |
| - } |
262 |
| - } |
263 |
| - |
264 |
| - .#{$prefix}--modal-content > p { |
265 |
| - @include type-style('body-long-01'); |
266 |
| - } |
267 |
| - |
| 251 | + // ----------------------------- |
| 252 | + // Modal overflow |
| 253 | + // ----------------------------- |
268 | 254 | // Required so overflow-indicator disappears at end of content
|
269 | 255 | .#{$prefix}--modal-scroll-content > *:last-child {
|
270 | 256 | padding-bottom: $spacing-07;
|
|
310 | 296 | }
|
311 | 297 | }
|
312 | 298 |
|
| 299 | + // ----------------------------- |
| 300 | + // Modal footer |
| 301 | + // ----------------------------- |
313 | 302 | .#{$prefix}--modal-footer {
|
314 | 303 | display: flex;
|
315 | 304 | height: rem(64px);
|
|
333 | 322 | align-items: flex-start;
|
334 | 323 | }
|
335 | 324 |
|
| 325 | + // ----------------------------- |
| 326 | + // Modal close btn |
| 327 | + // ----------------------------- |
336 | 328 | .#{$prefix}--modal-close {
|
337 | 329 | position: absolute;
|
338 | 330 | z-index: 2;
|
|
0 commit comments