From 8060bfe0b2e57a63ee13d029be130bf14b75c4c9 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Tue, 9 May 2017 18:17:30 +0200
Subject: [PATCH 1/4] update cartoassets with buttons and colors

---
 src/scss/cdb-components/buttons.scss | 94 +++++++++++++++++++++++++---
 src/scss/cdb-variables/_colors.scss  |  2 +-
 styleguide/_template.html            | 12 ++++
 3 files changed, 98 insertions(+), 10 deletions(-)

diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index c7136c3..6cb0bbc 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -9,8 +9,13 @@ Layout Component:
 
 ```
 
-<button class="CDB-Button CDB-Button--primary CDB-Button--big">
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--big">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
@@ -18,16 +23,26 @@ Layout Component:
 </button>
 
 
-<button class="CDB-Button CDB-Button--primary">
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--primary is-disabled">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--primary CDB-Button--small">
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--small">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
@@ -151,12 +166,14 @@ Layout Component:
 
 .CDB-Button {
   @include transition(background, 300ms);
-  padding: $baseSize + 1 $baseSize + 12;
+  position: relative;
+  padding: $baseSize $baseSize + 12;
   border: 1px solid transparent;
   border-radius: $baseSize / 2;
   cursor: pointer;
   box-sizing: border-box;
 
+
   .CDB-Button-Text {
     display: block;
   }
@@ -166,12 +183,51 @@ Layout Component:
   }
 }
 
+.CDB-Button--loading {
+
+  .CDB-Button-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transform-origin: 50%;
+    opacity: 0;
+    z-index: 10;
+  }
+  .CDB-Button-Text {
+    @include transition(all 600ms);
+  }
+  &.is-loading {
+    .CDB-Button-loader {
+      animation-name: showIn;
+      animation-duration: 600ms;
+      animation-fill-mode: forwards;
+    }
+    .CDB-Button-Text {
+      opacity: 0;
+    }
+  }
+}
+
+@keyframes showIn {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+
 .CDB-Button--small {
   padding: $baseSize / 2 $baseSize + 4;
+  border-radius: 3px;
 }
 
 .CDB-Button--big {
-  padding: $baseSize + 4 $baseSize + 12;
+  padding: $baseSize + 3 $baseSize + 12;
 }
 
 .CDB-Button--icon {
@@ -252,24 +308,44 @@ Layout Component:
 # Buttons/Secondary
 
 ```
-<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
+
 <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--secondary">
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
+
 <button class="CDB-Button CDB-Button--secondary is-disabled">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss
index 394a701..b15e06b 100644
--- a/src/scss/cdb-variables/_colors.scss
+++ b/src/scss/cdb-variables/_colors.scss
@@ -15,7 +15,7 @@ $cThirdBackground: #F9F9F9;
 //Lines
 $cHoverLine: #AAA;
 $cMainLine: #DDD;
-$cSecondaryLine: #EEE;
+$cSecondaryLine: rgba($cMainBg, 0.08);
 
 //Typography
 $cMainText: #2E3C43;
diff --git a/styleguide/_template.html b/styleguide/_template.html
index cbb6d23..f1a39b5 100644
--- a/styleguide/_template.html
+++ b/styleguide/_template.html
@@ -1,5 +1,8 @@
 <head>
   <link href='../css/cartostyles.css' type='text/css' rel='stylesheet'>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+
 </head>
 
 {{> theme}}
@@ -44,6 +47,12 @@
         // Show section in Styleguide
         j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
       }
+
+     $('.CDB-Button--loading').click(function(){
+        console.log($(this));
+        $(this).toggleClass("is-loading");
+     })
+
     });
 </script>
 
@@ -116,3 +125,6 @@
 		</div>
 	{{/each}}
 </div>
+
+
+

From fb7c98c04b3d585abbe96866ab2fedc03d95d47b Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Wed, 10 May 2017 11:28:38 +0200
Subject: [PATCH 2/4] fix loading state

---
 src/scss/cdb-components/buttons.scss | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index 6cb0bbc..50d0eed 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -198,6 +198,8 @@ Layout Component:
     @include transition(all 600ms);
   }
   &.is-loading {
+    cursor: default;
+
     .CDB-Button-loader {
       animation-name: showIn;
       animation-duration: 600ms;
@@ -245,6 +247,15 @@ Layout Component:
     background: darken($cBlue, 16%);
   }
 
+  &.is-loading {
+    &:hover {
+      background: $cBlue;
+    }
+    &:active {
+      background: $cBlue;
+    }
+  }
+
   &.is-disabled {
     &:hover {
       background: $cBlue;
@@ -414,6 +425,20 @@ Layout Component:
       background: transparent;
     }
   }
+
+  &.is-loading {
+    cursor: default;
+
+    &:hover {
+      background: $cWhite;
+      color: $cBlue;
+    }
+    &:active {
+      background: $cWhite;
+      color: $cBlue;
+    }
+  }
+
 }
 
 

From 5ec8402e70b426aec9cc02c47722ead73b055664 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Wed, 10 May 2017 11:43:15 +0200
Subject: [PATCH 3/4] add states

---
 src/scss/cdb-components/buttons.scss | 32 ++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index 50d0eed..3184375 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -368,8 +368,13 @@ Layout Component:
 <br/>
 
 <div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+    <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+      </svg>
+    </div>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
@@ -380,8 +385,13 @@ Layout Component:
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
-  <button class="CDB-Button CDB-Button--secondary CDB-Button--white">
+  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--white">
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+    <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+      </svg>
+    </div>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
@@ -430,11 +440,11 @@ Layout Component:
     cursor: default;
 
     &:hover {
-      background: $cWhite;
+      background: none;
       color: $cBlue;
     }
     &:active {
-      background: $cWhite;
+      background: none;
       color: $cBlue;
     }
   }
@@ -464,4 +474,18 @@ Layout Component:
       color: $cWhite;
     }
   }
+
+  &.is-loading {
+    cursor: default;
+
+    &:hover {
+      background: none;
+      color: $cWhite;
+    }
+    &:active {
+      background: none;
+      color: $cWhite;
+    }
+  }
+
 }

From b5be9eb8690de742ec7439ad241c2dd8a668fe04 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Wed, 10 May 2017 11:55:51 +0200
Subject: [PATCH 4/4] remove console.log

---
 styleguide/_template.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/styleguide/_template.html b/styleguide/_template.html
index f1a39b5..ff15055 100644
--- a/styleguide/_template.html
+++ b/styleguide/_template.html
@@ -49,7 +49,6 @@
       }
 
      $('.CDB-Button--loading').click(function(){
-        console.log($(this));
         $(this).toggleClass("is-loading");
      })