improved theming

rcaferati · Dec 22, 2017 · 0ef8bc9 · 0ef8bc9
1 parent 8f712db
commit 0ef8bc9
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 100 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/package.json b/package.json
@@ -58,13 +58,14 @@
     "webpack-dev-server": "^2.4.3"
   },
   "keywords": [
+    "react-component",
+    "react-awesome-button",
     "react",
+    "button",
     "awesome-button",
     "progress",
-    "button",
     "component",
-    "javascript",
-    "react-component",
-    "react-awesome-button"
+    "UI component",
+    "javascript"
   ]
 }
diff --git a/src/demo/data.js b/src/demo/data.js
@@ -17,13 +17,13 @@ const examples = [
   {
     title: 'Primary, Secondary and Disabled buttons',
     text: `
-<AwesomeButton>Primary Button</AwesomeButton>
-<AwesomeButton type="secondary">Secondary Button</AwesomeButton>
+<AwesomeButton bubbles>Primary Button</AwesomeButton>
+<AwesomeButton bubbles type="secondary">Secondary Button</AwesomeButton>
 <AwesomeButton disabled>Disabled Button</AwesomeButton>`,
     button: (
       <div>
-        <AwesomeButton cssModule={AwsBtnStyles}>Primary Button</AwesomeButton>
-        <AwesomeButton cssModule={AwsBtnStyles} type="secondary">Secondary Button</AwesomeButton>
+        <AwesomeButton bubbles cssModule={AwsBtnStyles}>Primary Button</AwesomeButton>
+        <AwesomeButton bubbles cssModule={AwsBtnStyles} type="secondary">Secondary Button</AwesomeButton>
         <AwesomeButton cssModule={AwsBtnStyles} disabled>Disabled Button</AwesomeButton>
       </div>
       ),
@@ -196,7 +196,7 @@ export default {
   name: 'AwesomeButton',
   title: 'React Components are awesome',
   description: 'The AwesomeButton is a performant, extendable, highly customisable, production ready react component that renders an animated basic set of UI buttons.',
-  size: '~4KB compressed <script + styles>',
+  size: '~3KB compressed <script + styles>',
   repository: 'https://github.com/rcaferati/react-awesome-button',
   article: '//caferati.me/labs/awesome-button',
   features,

diff --git a/src/demo/demo.js b/src/demo/demo.js
@@ -66,15 +66,15 @@ const Demo = () => (
       </h2>
       <p>{Data.description}</p>
     </header>
+    <ul className={Styles.examples}>
+      {renderExamples()}
+    </ul>
     <div className={Styles.features}>
       <h3>Main Features</h3>
       <ul>
         {renderFeatures()}
       </ul>
     </div>
-    <ul className={Styles.examples}>
-      {renderExamples()}
-    </ul>
     <footer>
       <div>
         <img className="support" src="/images/support.svg" alt="Modern Web Browsers" title="Modern Web Browsers" />

diff --git a/src/styles/base/base.scss b/src/styles/base/base.scss
@@ -31,9 +31,11 @@
 }
 
 @mixin getColorsBackgroundManual($colors) {
-  @each $color in $colors {
-    &--#{nth($color, 1)} {
-        @include color-pattern-background-manual(nth($color, 2), nth($color, 3), nth($color, 4));
+  @if($colors) {
+    @each $color in $colors {
+      &--#{nth($color, 1)} {
+          @include color-pattern-background-manual(nth($color, 2), nth($color, 3), nth($color, 4));
+      }
     }
   }
 }
@@ -51,7 +53,7 @@
 
 @mixin button-hover-skew($direction) {
   &:before {
-    transform: skewY(1deg * $button-hover-pressure * $direction) translateY(-1px * $button-hover-pressure/2);
+    transform: skewY(1deg * $button-hover-pressure * $direction) translate3d(0, -1px * $button-hover-pressure/2, 0);
   }
   .#{$button-root}__content {
     transform: skewY(1deg * $button-hover-pressure * -$direction);
@@ -60,10 +62,10 @@
 
 @mixin button-hover-middle($pressure) {
   &:before {
-    transform: translateY(-1px * $pressure);
+    transform: translate3d(0, -1px * $pressure, 0);
   }
   .#{$button-root}__content {
-    transform: translateY(1px * $pressure);
+    transform: translate3d(0, 1px * $pressure, 0);
   }
 }
 
@@ -229,11 +231,11 @@
       }
       &:before {
         content: attr(data-loading);
-    		transform: translateY(50%);
+    		transform: translate3d(0, 50%, 0);
       }
       &:after {
         content: attr(data-status);
-    		transform: translateY(-50%);
+    		transform: translate3d(0, -50%, 0);
       }
     }
     &.#{$button-root}--active {
@@ -246,18 +248,18 @@
   }
   &--active {
     &:before {
-  		transform: translateY(-$button-raise-level);
+  		transform: translate3d(0, -$button-raise-level, 0);
     }
     .#{$button-root}__content {
   		transition: transform $transform-speed * 0.8 ease-out, background $transform-speed * 0.8 ease-out, color $transform-speed * 0.8 ease-out;
-  		transform: translateY($button-raise-level);
+  		transform: translate3d(0, $button-raise-level, 0);
     }
   }
   &--start {
     .#{$button-root}__content {
       &:before {
         opacity: 1;
-        transform: translateY(0);
+        transform: translate3d(0, 0, 0);
       }
     }
     .#{$button-root}__wrapper {
@@ -277,17 +279,17 @@
     .#{$button-root}__content {
       &:after {
         opacity: 1;
-    		transform: translateY(0);
+    		transform: translate3d(0, 0, 0);
       }
       &:before {
-    		transform: translateY(50%);
+    		transform: translate3d(0, 50%, 0);
         opacity: 0;
       }
     }
   }
   &--off {
     &:before {
-  		transform: translateY(-$button-raise-level);
+  		transform: translate3d(0, -$button-raise-level, 0);
   		background-color: rgba(0, 0, 0, 0.05);
     }
     &:hover {
@@ -309,7 +311,7 @@
     .#{$button-root}__content {
       background-color: #353535;
   		color: #424242;
-  		transform: translateY($button-raise-level);
+  		transform: translate3d(0, $button-raise-level, 0);
     }
   }
   @include getSizes($button-sizes);

diff --git a/src/styles/default.scss b/src/styles/default.scss
@@ -44,4 +44,6 @@ $button-sizes:
   ("medium", 132px, $button-default-height, $button-default-font-size, $button-default-line-height)
   ("large", 196px, $button-default-height, $button-default-font-size, $button-default-line-height);
 
+$button-colors-bg-manual: null;
+
 @import './base/base.scss';
diff --git a/src/styles/themes/theme-one.scss b/src/styles/themes/theme-one.scss
@@ -1,47 +1,8 @@
-$button-root: "aws-btn";
+@import '../default.scss';
 
-$button-default-height: 44px;
-$button-default-font-size: 14px;
-$button-default-line-height: 20px;
 $button-default-border-radius: 0px;
-
-$button-font-family: inherit;
-$button-font-color: #FFFFFF;
-$button-font-weight: 600;
-$button-hover-darken-opacity: 0.1;
-$button-letter-spacing: 0px;
 $button-horizontal-padding: 20px;
-
 $button-raise-level: 4px;
-$button-hover-pressure: 1;
-
-$button-color-primary: #325c99;
-$button-color-secondary: #e53935;
-$button-color-disabled: #9E9E9E;
-
-$loading-transition-speed: 6s;
 $transform-speed: 0.175s;
 
-/**
- button-color: color-name, background, color
-*/
-$button-colors:
-  ("primary", $button-color-primary, lighten($button-color-primary, 55%)),
-  ("secondary", $button-color-secondary, lighten($button-color-secondary, 55%)),
-  ("disabled", $button-color-disabled, lighten($button-color-disabled, 15%)),
-  ("facebook", #3b5998, #FFFFFF),
-  ("twitter", #00aced, #FFFFFF),
-  ("linkedin", #0077b5, #FFFFFF),
-  ("whatsapp", #25d366, #FFFFFF),
-  ("github", #4e545a, #FFFFFF);
-
-/**
- button-size: size-name, width, height, font-size, line-height
-*/
-$button-sizes:
-  ("icon", 44px, $button-default-height, $button-default-font-size * 1.6, $button-default-line-height * 1.6)
-  ("small", 88px, $button-default-height, $button-default-font-size, $button-default-line-height)
-  ("medium", 132px, $button-default-height, $button-default-font-size, $button-default-line-height)
-  ("large", 196px, $button-default-height, $button-default-font-size, $button-default-line-height);
-
 @import '../base/base.scss';
diff --git a/src/styles/themes/theme-three.scss b/src/styles/themes/theme-three.scss
@@ -1,25 +1,9 @@
-$button-root: "aws-btn";
-
-$button-default-height: 44px;
 $button-default-font-size: 16px;
-$button-default-line-height: 20px;
 $button-default-border-radius: 4px;
-
-$button-font-family: inherit;
-$button-font-color: #FFFFFF;
 $button-font-weight: 800;
-$button-hover-darken-opacity: 0.1;
-$button-letter-spacing: 0px;
 $button-horizontal-padding: 18px;
-
-$button-raise-level: 2px;
 $button-hover-pressure: 0.65;
-
 $button-color-primary: #cc181e;
-$button-color-secondary: #e53935;
-$button-color-disabled: #9E9E9E;
-
-$loading-transition-speed: 6s;
 $transform-speed: 0.175s;
 
 /**

diff --git a/src/styles/themes/theme-two.scss b/src/styles/themes/theme-two.scss
@@ -1,27 +1,12 @@
-$button-root: "aws-btn";
+@import '../default.scss';
 
-$button-default-height: 44px;
-$button-default-font-size: 14px;
-$button-default-line-height: 20px;
 $button-default-border-radius: 40px;
-
-$button-font-family: inherit;
-$button-font-color: #FFFFFF;
-$button-font-weight: 600;
-$button-hover-darken-opacity: 0.1;
-$button-letter-spacing: 0px;
 $button-horizontal-padding: 20px;
 
-$button-raise-level: 2px;
-$button-hover-pressure: 1;
-
 $button-color-primary: #607D8B;
 $button-color-secondary: #757575;
 $button-color-disabled: #B0BEC5;
 
-$loading-transition-speed: 6s;
-$transform-speed: 0.150s;
-
 /**
  button-color: color-name, background, color
 */
@@ -44,4 +29,8 @@ $button-sizes:
   ("medium", 132px, $button-default-height, $button-default-font-size, $button-default-line-height)
   ("large", 196px, $button-default-height, $button-default-font-size, $button-default-line-height);
 
+
+$button-colors-bg-manual: null;
+
+
 @import '../base/base.scss';