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