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

add loader and loader box

Browse Source
This commit is contained in:
piensaenpixel
2016-02-03 16:52:31 +01:00
parent ece198db8f
commit e4f5c098e0
9 changed files with 256 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/cdb-components/boxes.scss
+134 -1
View File
@@ -2,7 +2,7 @@
// ----------------------------------------------
/* SG
# Boxes/Box Dropdown
# Boxes/Dropdown
```
@@ -10,6 +10,7 @@
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
@@ -19,3 +20,135 @@
background: $cWhite;
box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16);
}
/* SG
# Boxes/Loader
```
<div class="CDB-BoxLoader">
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-green is-medium">
<div class="CDB-Shape-tick is-medium is-green"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows</p>
</div>
<div class="CDB-BoxLoader-actions">
<div class="CDB-Shape">
<div class="CDB-Shape-threePoints is-small is-blue">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-BoxLoader">
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-green is-medium">
<div class="CDB-Shape-tick is-medium is-green"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
</div>
</li>
<li class="CDB-BoxLoader-item is-working">
<div class="CDB-LoaderIcon u-rSpace--m">
<div class="CDB-LoaderIcon-item"></div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Geocoding populated_places_2 (28%)</p>
</div>
<div class="CDB-BoxLoader-actions">
<div class="CDB-Shape">
<div class="CDB-Shape-close is-blue is-large"></div>
</div>
</div>
</li>
</ul>
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-green is-medium">
<div class="CDB-Shape-tick is-medium is-green"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
</div>
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-BoxLoader">
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-red">
<div class="CDB-Shape-close is-medium is-red"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Error in query. Data might be outdated</p>
</div>
<div class="CDB-BoxLoader-actions">
<div class="CDB-Shape">
<div class="CDB-Shape-threePoints is-small is-blue">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
```
*/
.CDB-BoxLoader {
padding: 0 24px;
border-top: 1px solid $cMainLine;
}
.CDB-BoxLoader-inner {
padding: 12px 0;
border-top: 1px solid $cMainLine;
&:first-child {
border-top: 0;
}
}
.CDB-BoxLoader-item {
@include display-flex();
padding: 8px 0;
color: $cTypo2;
&.is-working {
color: $cTypo3;
}
}
.CDB-BoxLoader-info {
@include flex(1);
padding-right: 16px;
}