Merge pull request #41 from CartoDB/add-loaders

Add loaders

src/scss/cdb-components/boxes.scss

@@ -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;
-}
+}

src/scss/cdb-components/loader.scss

@@ -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);
+  }
+}
+
+

src/scss/cdb-components/shapes/check-circle.scss

@@ -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;
+      top: 4px;
-      left: 3px;
+      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;
+  }
+}
+
+
 

src/scss/cdb-components/shapes/close.scss

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

src/scss/cdb-components/shapes/error-circle.scss

@@ -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;
+  }
 }

src/scss/cdb-components/shapes/threePoints.scss

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