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

add first infoBoxes

Browse Source
This commit is contained in:
piensaenpixel 2016-02-03 19:19:42 +01:00
parent c11028772e
commit 0c08695652
4 changed files with 65 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/scss/cdb-components/boxes.scss
View File

@ -10,6 +10,7 @@
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
@ -19,3 +20,63 @@
background: $cWhite;
box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16);
}
/* SG
# Boxes/Info Boxes
```
<div class="CDB-InfoBox">
<h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
<p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
<ul class="CDB-InfoBox-footer">
<li class="CDB-InfoBox-footerItem">
<p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
</li>
<li class="CDB-InfoBox-footerItem">
<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="CDB-InfoBox is-alert">
<h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
<p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
<ul class="CDB-InfoBox-footer">
<li class="CDB-InfoBox-footerItem">
<p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
</li>
<li class="CDB-InfoBox-footerItem is-right">
<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
</li>
</ul>
</div>
```
*/
.CDB-InfoBox {
padding: 12px 16px;
border-radius: 4px;
background: $cThirdBackground;
&.is-alert {
background: rgba($cHighlightYellow, 0.60);
}
}
.CDB-InfoBox-footer {
@include display-flex();
@include align-items(center);
}
.CDB-InfoBox-footerItem {
@include flex(1);
&.is-right {
text-align: right;
}
}

1
src/scss/cdb-components/buttons.scss
View File

@ -146,7 +146,6 @@ Layout Component:
.CDB-Button--secondary {
border: 1px solid $cBlue;
background: $cWhite;
color: $cBlue;
&:hover {

3
src/scss/cdb-utilities/helpers.scss
View File

@ -27,6 +27,9 @@
.u-lSpace--xl {
margin-left: 12px;
}
.u-bSpace--m {
margin-bottom: 8px;
}
.u-iBlock {
@include inline-block();
}

1
src/scss/cdb-variables/_colors.scss
View File

@ -29,3 +29,4 @@ $cPublic: #9BC63B;
$cLink: #FEB100;
$cPassword: #FB7B23;
$cError: #F15743;
$cHighlightYellow: #FFFFC0;