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

Merge pull request #107 from CartoDB/add-loader-state

Browse Source 
add new state
This commit is contained in:
piensaenpixel 2016-05-04 19:39:30 +02:00
commit 9ce66b6fd0
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,7 +54,7 @@ This is the generic loader for widgets, maps, components, ...
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div style="padding: 20px; background: #F9F9F9;">
<div class="CDB-LoaderIcon is-grey">
<div class="CDB-LoaderIcon-item">
<span class="CDB-LoaderIcon-itemClose"></span>
@ -63,6 +63,15 @@ This is the generic loader for widgets, maps, components, ...
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-LoaderIcon is-dark">
<div class="CDB-LoaderIcon-item">
<span class="CDB-LoaderIcon-itemClose"></span>
<span class="CDB-LoaderIcon-itemCircle"></span>
</div>
</div>
</div>
<div style="padding: 20px; background: #E27D61;">
<div class="CDB-LoaderIcon is-bg">
<div class="CDB-LoaderIcon-item">
@ -85,7 +94,7 @@ This is the generic loader for widgets, maps, components, ...
&.is-bg {
border: 2px solid rgba($cWhite, 0.9);
}
&.is-grey {
&.is-dark {
border: 2px solid $cSecondaryText;
}
}
@ -100,7 +109,7 @@ This is the generic loader for widgets, maps, components, ...
border-radius: 50%;
background: linear-gradient(to right, rgba($cWhite, 0.1) 10%, rgba($cWhite, 0) 42%);
&.is-grey {
&.is-dark {
background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
}
}
@ -131,12 +140,15 @@ This is the generic loader for widgets, maps, components, ...
background: $cWhite;
}
.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemCircle,
.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemClose {
.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-itemCircle,
.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-itemClose {
background: $cMainBg;
}
.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemCircle,
.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemClose {
background: $cThirdBackground;
}
@include keyframes(loader-icon) {
0% {