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

Merge pull request #41 from CartoDB/add-loaders

Browse Source 
Add loaders
This commit is contained in:
piensaenpixel 2016-02-04 19:52:38 +01:00
commit e520071afe
9 changed files with 254 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/fonts/cartoIcon.eot
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.ttf
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.woff
View File

Binary file not shown.

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

@ -2,7 +2,7 @@
// ----------------------------------------------
/* SG
# Boxes/Box Dropdown
# Boxes/Dropdown
```
@ -21,6 +21,136 @@
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 $baseSize * 3;
border-top: 1px solid $cMainLine;
}
.CDB-BoxLoader-inner {
padding: $baseSize + 4 0;
border-top: 1px solid $cMainLine;
&:first-child {
border-top: 0;
}
}
.CDB-BoxLoader-item {
@include display-flex();
padding: $baseSize 0;
color: $cTypo2;
&.is-working {
color: $cTypo3;
}
}
.CDB-BoxLoader-info {
@include flex(1);
padding-right: $baseSize * 2;
}
/* SG
# Boxes/Info Boxes
@ -71,4 +201,4 @@
.CDB-InfoBox-footerItem--right {
text-align: right;
}
}

91
src/scss/cdb-components/loader.scss
View File

@ -2,10 +2,9 @@
// ----------------------------------------------
/* SG
# Loader
# Loader/principal
This is the generic loader for widgets, maps, components, ...
There is only one state 'is-visible', in order to make it visible.
```
<div class="CDB-Loader is-visible"></div>
@ -13,6 +12,8 @@ There is only one state 'is-visible', in order to make it visible.
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';
.CDB-Loader {
@include css3-prefix(animation, loader-progress 1000ms linear 1);
@ -39,3 +40,89 @@ There is only one state 'is-visible', in order to make it visible.
width: 100%;
}
}
/* SG
# Loader/circle
```
<div style="padding: 20px;">
<div class="CDB-LoaderIcon">
<div class="CDB-LoaderIcon-item"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-LoaderIcon is-grey">
<div class="CDB-LoaderIcon-item is-grey"></div>
</div>
</div>
```
*/
.CDB-LoaderIcon {
box-sizing: border-box;
position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
border: 2px solid $cMainLine;
border-radius: 50%;
&.is-grey {
border: 2px solid $cTypo2;
}
}
.CDB-LoaderIcon-item {
@include css3-prefix(animation, loader-icon 1.4s linear infinite);
position: absolute;
top: -2px;
left: -2px;
width: $baseSize * 2;
height: $baseSize * 2;
border-radius: 50%;
background: linear-gradient(to right, $cWhite 10%, rgba($cWhite, 0) 42%);
&::before,
&::after {
position: absolute;
top: 0;
left: 0;
content: '';
}
&::before {
width: 50%;
height: 50%;
border-radius: 100% 0 0;
background: $cMainLine;
}
&::after {
right: 0;
bottom: 0;
width: 75%;
height: 75%;
margin: auto;
border-radius: 50%;
background: $cWhite;
}
&.is-grey {
background: linear-gradient(to right, $cMainDark 10%, rgba($cWhite, 0) 42%);
&::before {
background: $cTypo2;
}
&::after {
background: $cMainDark;
}
}
}
@include keyframes(loader-icon) {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

22
src/scss/cdb-components/shapes/check-circle.scss
View File

@ -100,25 +100,25 @@ Description
&.is-medium {
&::before {
top: 6px;
top: 5px;
left: 4px;
height: 4px;
}
&::after {
top: 4px;
top: 3px;
right: 5px;
height: 7px;
height: 6px;
}
}
&.is-small {
&::before {
top: 5px;
left: 3px;
top: 4px;
left: 2px;
height: 3px;
}
&::after {
top: 3px;
top: 2px;
right: 3px;
height: 5px;
}
@ -143,4 +143,14 @@ Description
}
}
.CDB-Shape-tick.is-green {
&::before {
background: $cHighlight;
}
&::after {
background: $cHighlight;
}
}

10
src/scss/cdb-components/shapes/close.scss
View File

@ -137,3 +137,13 @@ Description
background: $cWhite;
}
}
.CDB-Shape-close.is-red {
&::before {
background: $cError;
}
&::after {
background: $cError;
}
}

8
src/scss/cdb-components/shapes/error-circle.scss
View File

@ -66,7 +66,7 @@ Description
&.is-small {
width: 9px;
height: 9px;
margin: 2px auto;
margin: 0 auto;
}
&.is-blue {
border: 1px solid $cBlue;
@ -74,4 +74,10 @@ Description
&.is-white {
border: 1px solid $cWhite;
}
&.is-green {
border: 1px solid $cHighlight;
}
&.is-red {
border: 1px solid $cError;
}
}

1
src/scss/cdb-components/shapes/threePoints.scss
View File

@ -104,4 +104,3 @@ Description
background: $cWhite;
}
}