increased animation speed per design feedback

predixdesignsystem · Apr 27, 2017 · 263712c · 263712c
1 parent a51e959
commit 263712c
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 65 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,7 +1,8 @@
 v1.0.0-prerelease
 ==================
-* Major version bump for start of redesign
+* major version bump for start of redesign
 * updated colors for redesign
+* increased animation speed per design feedback
 
 v0.2.3
 ==================

diff --git a/css/px-clipboard-styles.html b/css/px-clipboard-styles.html
diff --git a/gulpfile.js b/gulpfile.js
@@ -44,13 +44,8 @@ function buildCSS(){
 }
 
 gulp.task('sass', function() {
-  return gulp.src(['./sass/*.scss', '!./sass/*sketch.scss'])
+  return gulp.src(['./sass/*.scss'])
     .pipe(buildCSS())
-    .pipe(gulpif(/.*predix/,
-      $.rename(function(path){
-        path.basename = new RegExp('.+?(?=\-predix)').exec(path.basename)[0];
-      })
-    ))
     .pipe(stylemod({
       moduleId: function(file) {
         return path.basename(file.path, path.extname(file.path)) + '-styles';

diff --git a/px-clipboard.html b/px-clipboard.html
@@ -44,7 +44,7 @@
 <dom-module id="px-clipboard">
   <template>
     <style include="px-clipboard-styles"></style>
-    
+
     <div class="flex flex--left">
       <div class="flex__item"><content></content></div>
       <div class="iron">
@@ -227,8 +227,7 @@
         copiedIcon.classList.remove('copiedIconGreen', 'fadeOutCopied');
         copiedIcon.classList.add('fadeIn');
         this.distributeContent();
-        // copiedText.classList.add('copiedText');
-      }.bind(this), 4000);
+      }.bind(this), 2000);
 
     },
     /**

diff --git a/sass/px-clipboard-predix.scss b/sass/px-clipboard-predix.scss
diff --git a/sass/px-clipboard-sketch.scss → sass/px-clipboard.scss b/sass/px-clipboard-sketch.scss → sass/px-clipboard.scss
@@ -9,17 +9,18 @@
  */
 
 //
-// Sass for the "sketch" notion of the px-clipboard component
+// Sass for the Predix notion of the px-clipboard component
 //
 // @author
 //
 
 /*
-THIS FILE SHOULD CONTAIN ONLY ABSTRACT/'SKETCH' THEME RULES, NOT SPECIFIC TO PREDIX BRANDING
-Predix branding rules go in px-clipboard-predix.scss, not in this file.
+THIS FILE SHOULD CONTAIN ONLY RULES SPECIFIC TO PREDIX BRANDING
+common/abstract rules go in px-clipboard-sketch.scss, not in this file.
 */
 
-
+// Settings
+@import "px-colors-design/_settings.colors.scss";
 
 // Generic
 @import "px-normalize-design/_generic.normalize.scss";
@@ -36,22 +37,23 @@ Predix branding rules go in px-clipboard-predix.scss, not in this file.
   height: calculateRem(24px);
   width: calculateRem(24px);
   margin-left: 5px;
+  color: var(--px-clipboard-icon-color, $gray13);
+  &:hover{
+    color: var(--px-clipboard-icon-color--hover, $primary-default);
+  }
+  &:active {
+    color: var(--px-clipboard-icon-color--pressed, $primary-pressed);
+  }
+  &.copiedIconGreen {
+   color: var(--px-clipboard-icon-color--copied, $status-green3);
+  }
 }
 .fadeOutCopied {
-
-  -webkit-transition: opacity 3s 2s;
-  -moz-transition: opacity 3s 2s;
-  -ms-transition: opacity 3s 2s;
-  -o-transition: opacity 3s 2s;
+  transition: opacity 2.5s 0.4s;
   opacity: 0;
-
-
 }
 .fadeIn {
-  -webkit-transition: opacity 3s;
-  -moz-transition: opacity 3s;
-  -ms-transition: opacity 3s;
-  -o-transition: opacity 3s;
+  transition: opacity 0.4s;
   opacity: 1;
 }