scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 17:16:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

use padding rather than margin to avoid margin collapse; drop overflow clear approach

Browse source
This commit is contained in:
Ben Wheeler 2019-07-15 16:07:39 -04:00
parent 96a1b89ccb
commit 27cb6199b5
3 changed files with 10 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/join-flow/join-flow-step.scss
View file

@ -9,6 +9,8 @@
.join-flow-inner-content { .join-flow-inner-content {
box-shadow: none; box-shadow: none;
width: calc(100% - 5.875rem); width: calc(100% - 5.875rem);
margin: 2.3125rem auto 2.5rem; /* must use padding for top, rather than margin, because margins will collapse */
margin: 0 auto;
padding: 2.3125rem 0 2.5rem;
font-size: .875rem; font-size: .875rem;
} }

16
src/components/modal/base/modal-inner-content.jsx
View file

@ -8,15 +8,13 @@ const ModalInnerContent = ({
children, children,
className className
}) => ( }) => (
<div className="modal-inner-clear"> <div
<div className={classNames(
className={classNames( 'modal-inner-content',
'modal-inner-content', className
className )}
)} >
> {children}
{children}
</div>
</div> </div>
); );

9
src/components/modal/base/modal-inner-content.scss
View file

@ -1,15 +1,6 @@
@import "../../../colors"; @import "../../../colors";
@import "../../../frameless"; @import "../../../frameless";
/*
necessary to prevent modal-inner-content's margins from
unexpectedly collapsing with a parent
*/
.modal-inner-clear {
overflow: auto;
height: 100%;
}
.modal-inner-content { .modal-inner-content {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;