add layout

This commit is contained in:
piensaenpixel 2016-08-19 16:14:30 +02:00
parent 88dc19c543
commit b54345217e

View File

@ -719,3 +719,118 @@
*/
/* SG
# Modals/Layout
```
<div class="Modal">
<div class="Modal-header">
<div class="Modal-headerContainer">
Header
</div>
</div>
<div class="Modal-container">
<div class="Modal-inner">
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
<p>Menu Entry</p>
</div>
</div>
<div class="Modal-footer">
<div class="Modal-footerContainer">
Footer
</div>
</div>
</div>
```
*/
.Modal {
@include display-flex();
@include flex-direction(column);
height: 100%;
background: $cThirdBackground;
overflow: hidden;
}
.Modal-header {
@include display-flex();
@include justify-content(center);
@include flex(0 0 auto);
padding: $baseSize * 3 0;
background: $cWhite;
}
.Modal-footer {
@include display-flex();
@include justify-content(center);
@include flex(0 0 auto);
}
.Modal-container {
@include display-flex();
@include justify-content(center);
@include flex(1 1 auto);
overflow: scroll;
}
.Modal-inner,
.Modal-headerContainer,
.Modal-footerContainer {
@include flex(0 0 auto);
width: 940px;
}
.Modal-footerContainer {
padding: 24px 0;
border-top: 1px solid $cSecondaryLine;
}