@@ -219,228 +219,224 @@ interface ModalProps extends React.HTMLAttributes<any> {
219219
220220``` css
221221.rw-modal-root {
222- position : absolute ;
223- left : 0 ;
224- top : 0 ;
225- right : 0 ;
226- height : 0 ;
227- overflow : visible ;
228- z-index : 1050 ;
222+ position : absolute ;
223+ left : 0 ;
224+ top : 0 ;
225+ right : 0 ;
226+ height : 0 ;
227+ overflow : visible ;
228+ z-index : 1050 ;
229229}
230230
231231.rw-modal-container {
232- position : fixed ;
233- left : 0 ;
234- top : 0 ;
235- right : 0 ;
236- bottom : 0 ;
237- overflow : auto ;
232+ position : fixed ;
233+ left : 0 ;
234+ top : 0 ;
235+ right : 0 ;
236+ bottom : 0 ;
237+ overflow : auto ;
238238}
239239
240240.rw-modal-wrapper {
241- position : absolute ;
242- width : 100% ;
243- min-height : 100% ;
244- outline : none ;
241+ position : absolute ;
242+ width : 100% ;
243+ min-height : 100% ;
244+ outline : none ;
245245}
246246
247247.rw-modal-centered {
248- display : flex ;
249- align-items : center ;
250- justify-content : center ;
251- .rw-modal {
252- margin : 30px 0 ;
253- }
248+ display : flex ;
249+ align-items : center ;
250+ justify-content : center ;
254251}
255252
256- .rw-modal-wrapper :not (.rw-modal-centered ) {
257- .rw-modal {
258- margin : 0 auto ;
259- margin-bottom : 30px ;
260- top : 100px ;
261- }
253+ .rw-modal-centered .rw-modal {
254+ margin : 30px 0 ;
255+ }
256+
257+ .rw-modal-wrapper :not (.rw-modal-centered ) .rw-modal {
258+ margin : 0 auto ;
259+ margin-bottom : 30px ;
260+ top : 100px ;
262261}
263262
264263.rw-modal-wrapper-fullscreen {
265- overflow : hidden ;
266- height : 100% ;
264+ overflow : hidden ;
265+ height : 100% ;
267266}
268267
269- .rw-modal-wrapper.rw-modal-wrapper-fullscreen {
270- .rw-modal {
271- position : absolute ;
272- left : 0 ;
273- top : 0 ;
274- bottom : 0 ;
275- right : 0 ;
276- margin : 0 ;
277- }
268+ .rw-modal-wrapper.rw-modal-wrapper-fullscreen .rw-modal {
269+ position : absolute ;
270+ left : 0 ;
271+ top : 0 ;
272+ bottom : 0 ;
273+ right : 0 ;
274+ margin : 0 ;
278275}
279276
280277.rw-modal {
281- position : relative ;
282- display : flex ;
283- flex-direction : column ;
278+ position : relative ;
279+ display : flex ;
280+ flex-direction : column ;
284281}
285282
286283.rw-modal-content {
287- position : relative ;
288- background-color : #fff ;
289- border-radius : 2px ;
290- height : 100% ;
291- display : flex ;
292- flex-direction : column ;
293- box-shadow : 0 3px 6px -4px rgba (0 , 0 , 0 , 0.12 ), 0 6px 16px 0 rgba (0 , 0 , 0 , 0.08 ),
294- 0 9px 28px 8px rgba (0 , 0 , 0 , 0.05 );
284+ position : relative ;
285+ background-color : #fff ;
286+ border-radius : 2px ;
287+ height : 100% ;
288+ display : flex ;
289+ flex-direction : column ;
290+ box-shadow : 0 3px 6px -4px rgba (0 , 0 , 0 , 0.12 ), 0 6px 16px 0 rgba (0 , 0 , 0 , 0.08 ), 0 9px 28px 8px rgba (0 , 0 , 0 , 0.05 );
295291}
296292
297293.rw-modal-mask {
298- position : fixed ;
299- left : 0 ;
300- top : 0 ;
301- right : 0 ;
302- bottom : 0 ;
303- background-color : rgba (0 , 0 , 0 , 0.45 );
294+ position : fixed ;
295+ left : 0 ;
296+ top : 0 ;
297+ right : 0 ;
298+ bottom : 0 ;
299+ background-color : rgba (0 , 0 , 0 , 0.45 );
304300}
305301
306302.rw-modal-fixed ,
307303.rw-modal-mask-fixed {
308- position : fixed ;
304+ position : fixed ;
309305}
310306
311307.rw-modal-close {
312- position : absolute ;
313- top : 0 ;
314- right : 0 ;
315- z-index : 10 ;
316- padding : 0 ;
317- color : rgba (0 , 0 , 0 , 0.45 );
318- font-weight : 700 ;
319- line-height : 1 ;
320- text-decoration : none ;
321- background : 0 0 ;
322- border : 0 ;
323- // outline : 0 ;
324- cursor : pointer ;
325- transition : color 0.3s ;
308+ position : absolute ;
309+ top : 0 ;
310+ right : 0 ;
311+ z-index : 10 ;
312+ padding : 0 ;
313+ color : rgba (0 , 0 , 0 , 0.45 );
314+ font-weight : 700 ;
315+ line-height : 1 ;
316+ text-decoration : none ;
317+ background : 0 0 ;
318+ border : 0 ;
319+ /* outline: 0; */
320+ cursor : pointer ;
321+ transition : color 0.3s ;
326322}
327323
328324.rw-modal-close-x {
329- display : block ;
330- width : 56px ;
331- height : 56px ;
332- font-size : 16px ;
333- font-style : normal ;
334- line-height : 56px ;
335- text-align : center ;
336- text-transform : none ;
337- text-rendering : auto ;
325+ display : block ;
326+ width : 56px ;
327+ height : 56px ;
328+ font-size : 16px ;
329+ font-style : normal ;
330+ line-height : 56px ;
331+ text-align : center ;
332+ text-transform : none ;
333+ text-rendering : auto ;
338334}
339335
340336.rw-modal-header {
341- padding : 16px 24px ;
342- color : rgba (0 , 0 , 0 , 0.65 );
343- background : #fff ;
344- border-bottom : 1px solid #f0f0f0 ;
345- border-radius : 2px 2px 0 0 ;
346- flex : none ;
337+ padding : 16px 24px ;
338+ color : rgba (0 , 0 , 0 , 0.65 );
339+ background : #fff ;
340+ border-bottom : 1px solid #f0f0f0 ;
341+ border-radius : 2px 2px 0 0 ;
342+ flex : none ;
347343}
348344
349345.rw-modal-title {
350- margin : 0 ;
351- color : rgba (0 , 0 , 0 , 0.85 );
352- font-weight : 500 ;
353- font-size : 16px ;
354- line-height : 22px ;
355- word-wrap : break-word ;
346+ margin : 0 ;
347+ color : rgba (0 , 0 , 0 , 0.85 );
348+ font-weight : 500 ;
349+ font-size : 16px ;
350+ line-height : 22px ;
351+ word-wrap : break-word ;
356352}
357353
358354.rw-modal-body {
359- padding : 24px ;
360- font-size : 14px ;
361- line-height : 1.5715 ;
362- word-wrap : break-word ;
363- flex : 1 ;
364- overflow : auto ;
355+ padding : 24px ;
356+ font-size : 14px ;
357+ line-height : 1.5715 ;
358+ word-wrap : break-word ;
359+ flex : 1 ;
360+ overflow : auto ;
365361}
366362
367363.rw-modal-footer {
368- padding : 10px 16px ;
369- text-align : right ;
370- background : 0 0 ;
371- border-top : 1px solid #f0f0f0 ;
372- border-radius : 0 0 2px 2px ;
373- flex : none ;
364+ padding : 10px 16px ;
365+ text-align : right ;
366+ background : 0 0 ;
367+ border-top : 1px solid #f0f0f0 ;
368+ border-radius : 0 0 2px 2px ;
369+ flex : none ;
374370}
375371
376372/* **animate***/
377373.rw-modal-appear ,
378374.rw-modal-enter {
379- opacity : 0.01 ;
380- transform : translateY (-20px );
381- transition : transform 0.3s ease-out , opacity 0.3s ease-out ;
375+ opacity : 0.01 ;
376+ transform : translateY (-20px );
377+ transition : transform 0.3s ease-out , opacity 0.3s ease-out ;
382378}
383379.rw-modal-appear-active ,
384380.rw-modal-enter-active {
385- opacity : 1 ;
386- transform : translateY (0 );
381+ opacity : 1 ;
382+ transform : translateY (0 );
387383}
388384
389385.rw-modal-exit {
390- opacity : 1 ;
391- transform : translateY (0 );
392- transition : transform 0.3s ease-out , opacity 0.3s ease-out ;
386+ opacity : 1 ;
387+ transform : translateY (0 );
388+ transition : transform 0.3s ease-out , opacity 0.3s ease-out ;
393389}
394390.rw-modal-exit-active {
395- opacity : 0.01 ;
396- transform : translateY (-20px );
391+ opacity : 0.01 ;
392+ transform : translateY (-20px );
397393}
398394
399395.rw-modal-mask-appear ,
400396.rw-modal-mask-enter {
401- opacity : 0.01 ;
402- transition : opacity 0.3s ease-out ;
397+ opacity : 0.01 ;
398+ transition : opacity 0.3s ease-out ;
403399}
404400.rw-modal-mask-appear-active ,
405401.rw-modal-mask-enter-active {
406- opacity : 1 ;
402+ opacity : 1 ;
407403}
408404.rw-modal-mask-exit {
409- opacity : 1 ;
410- transition : opacity 0.3s ease-out ;
405+ opacity : 1 ;
406+ transition : opacity 0.3s ease-out ;
411407}
412408.rw-modal-mask-exit-active {
413- opacity : 0.01 ;
409+ opacity : 0.01 ;
414410}
415411
416412/* **footer button***/
417413.rw-modal-footer button + button {
418- margin-left : 8px ;
414+ margin-left : 8px ;
419415}
420416
421417.rw-btn {
422- // outline : 0 ;
423- line-height : 1.5715 ;
424- position : relative ;
425- display : inline-block ;
426- font-weight : 400 ;
427- white-space : nowrap ;
428- text-align : center ;
429- background-image : none ;
430- border : 1px solid transparent ;
431- cursor : pointer ;
432- height : 32px ;
433- padding : 4px 15px ;
434- font-size : 14px ;
435- border-radius : 2px ;
418+ /* outline: 0; */
419+ line-height : 1.5715 ;
420+ position : relative ;
421+ display : inline-block ;
422+ font-weight : 400 ;
423+ white-space : nowrap ;
424+ text-align : center ;
425+ background-image : none ;
426+ border : 1px solid transparent ;
427+ cursor : pointer ;
428+ height : 32px ;
429+ padding : 4px 15px ;
430+ font-size : 14px ;
431+ border-radius : 2px ;
436432}
437433
438434.rw-btn-primary {
439- color : #fff ;
440- background-color : #1890ff ;
441- border-color : #1890ff ;
442- text-shadow : 0 -1px 0 rgba (0 , 0 , 0 , 0.12 );
443- box-shadow : 0 2px 0 rgba (0 , 0 , 0 , 0.045 );
435+ color : #fff ;
436+ background-color : #1890ff ;
437+ border-color : #1890ff ;
438+ text-shadow : 0 -1px 0 rgba (0 , 0 , 0 , 0.12 );
439+ box-shadow : 0 2px 0 rgba (0 , 0 , 0 , 0.045 );
444440}
445441
446442```
0 commit comments