cartodb4/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add layout

Browse Source
This commit is contained in:
piensaenpixel 2016-08-19 16:14:30 +02:00
parent 88dc19c543
commit b54345217e
1 changed files with 115 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
src/scss/cdb-components/modals.scss
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;
}