add layout
This commit is contained in:
parent
88dc19c543
commit
b54345217e
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user