Skip to content

Commit 92f3805

Browse files
jnm2377Alessandra Davila
jnm2377
and
Alessandra Davila
authoredFeb 2, 2022
fix(styles): sync up modal styles (#10602)
Co-authored-by: Alessandra Davila <aledavila@ibm.com>
·
v11.78.2v10.53.0-rc.0
1 parent 1cb3a75 commit 92f3805

File tree

1 file changed

+90
-98
lines changed

1 file changed

+90
-98
lines changed
 

‎packages/styles/scss/components/modal/_modal.scss

+90-98
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@
5757
.#{$prefix}--dropdown,
5858
.#{$prefix}--dropdown-list,
5959
.#{$prefix}--number input[type='number'],
60-
.#{$prefix}--date-picker__input {
60+
.#{$prefix}--date-picker__input,
61+
.#{$prefix}--multi-select {
6162
background-color: $field-02;
6263
}
6364
}
@@ -67,6 +68,9 @@
6768
transition: transform $duration-moderate-02 motion(entrance, expressive);
6869
}
6970

71+
// -----------------------------
72+
// Modal container
73+
// -----------------------------
7074
.#{$prefix}--modal-container {
7175
position: fixed;
7276
top: 0;
@@ -90,16 +94,6 @@
9094
width: 84%;
9195
height: auto;
9296
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-
}
10397
}
10498

10599
@include breakpoint(lg) {
@@ -112,30 +106,81 @@
112106
}
113107
}
114108

115-
.#{$prefix}--modal-header,
109+
// -----------------------------
110+
// Modal content
111+
// -----------------------------
116112
.#{$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;
117120
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+
}
118131
}
119132

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,
122136
.#{$prefix}--modal-content__regular-content {
123-
padding-right: $spacing-05;
137+
padding-right: 20%;
138+
@include type-style('body-long-01');
124139
}
125140

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
126143
.#{$prefix}--modal-content--with-form {
127144
padding-right: $spacing-05;
128145
}
129146

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+
// -----------------------------
130175
.#{$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;
133179
}
134180

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;
139184
}
140185

141186
@include breakpoint(md) {
@@ -152,15 +197,18 @@
152197
}
153198
}
154199

200+
// -----------------------------
201+
// SM Modal
202+
// -----------------------------
155203
.#{$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;
158207
}
159208

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;
164212
}
165213

166214
@include breakpoint(md) {
@@ -170,46 +218,24 @@
170218
@include breakpoint(lg) {
171219
width: 42%;
172220
max-height: 72%;
173-
}
174-
175-
@include breakpoint(xlg) {
176-
width: 36%;
177221

178222
.#{$prefix}--modal-content p,
179223
.#{$prefix}--modal-content__regular-content {
180224
padding-right: 20%;
181225
}
226+
}
182227

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%;
187230
}
188231
}
189232

233+
// -----------------------------
234+
// LG Modal
235+
// -----------------------------
190236
.#{$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-
201237
@include breakpoint(md) {
202238
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-
}
213239
}
214240

215241
@include breakpoint(lg) {
@@ -222,49 +248,9 @@
222248
}
223249
}
224250

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+
// -----------------------------
268254
// Required so overflow-indicator disappears at end of content
269255
.#{$prefix}--modal-scroll-content > *:last-child {
270256
padding-bottom: $spacing-07;
@@ -310,6 +296,9 @@
310296
}
311297
}
312298

299+
// -----------------------------
300+
// Modal footer
301+
// -----------------------------
313302
.#{$prefix}--modal-footer {
314303
display: flex;
315304
height: rem(64px);
@@ -333,6 +322,9 @@
333322
align-items: flex-start;
334323
}
335324

325+
// -----------------------------
326+
// Modal close btn
327+
// -----------------------------
336328
.#{$prefix}--modal-close {
337329
position: absolute;
338330
z-index: 2;

0 commit comments

Comments
 (0)
Please sign in to comment.