feat: Added progress bar styling samples to demo

convoo · Dec 30, 2017 · aa833e3 · aa833e3
1 parent 4463abb
commit aa833e3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/demo/login-fire-social.html b/demo/login-fire-social.html
@@ -131,13 +131,15 @@ <h3>Max horizontal, no icons login-fire-social Demo</h3>
         <style is="custom-style">
         login-fire-social.custom {
           width: 100%;
+          --paper-progress-active-color: darkred;
+          --paper-progress-secondary-color: lightred;
           --login-fire-button-text:{
             font-size: 12px;
             font-weight: bold;
-          }
+          };
           --login-fire-button-icon:{
             display: none
-          }
+          };
         }
         </style>
       </template>

diff --git a/demo/login-fire.html b/demo/login-fire.html
@@ -132,6 +132,8 @@ <h3>login-fire Demo with all options in dark style</h3>
           --paper-input-container-color: #a58e7a;
           --paper-input-container-focus-color: #fecea8;
           --paper-input-container-input-color: white;
+          --paper-progress-active-color: orangered;
+          --paper-progress-secondary-color: whitesmoke;
           --login-fire-form: {
             width: 400px;
           };

diff --git a/login-fire-button.html b/login-fire-button.html
@@ -131,11 +131,12 @@
         @apply --login-fire-btn-signout-hover;
       }
 
-      paper-progress {
+      .btn-progress {
         position: absolute;
         left: 0;
         bottom: 0;
         width: 100%;
+        @apply --login-fire-button-progress;
       }
 
       [hidden] {
@@ -147,7 +148,7 @@
       <iron-icon class="btn__icon" icon="login-fire-icons:[[provider]]" hidden$="[[_hideIcon]]"></iron-icon>
       <iron-icon class="btn__icon" icon="login-fire-icons:logout" hidden$="[[!_hideIcon]]"></iron-icon>
       <span class="btn__text">[[_text]]</span>
-      <paper-progress hidden$="[[!_inProgress]]" disabled$="[[!_inProgress]]" indeterminate></paper-progress>
+      <paper-progress class="btn-progress" hidden$="[[!_inProgress]]" disabled$="[[!_inProgress]]" indeterminate></paper-progress>
     </paper-button>
 
     <firebase-auth id="auth"

diff --git a/login-fire-form.html b/login-fire-form.html
@@ -148,11 +148,12 @@
     paper-icon-button {
       color: grey;
     }
-    paper-progress {
+    .btn-progress  {
       position: absolute;
       left: 0;
       bottom: 0;
       width: 100%;
+      @apply --login-fire-button-progress;
     }
     </style>
 
@@ -204,7 +205,7 @@
         </paper-input>
         <paper-button raised$="[[!flat]]" type="submit" on-click="_signUp" class="btn--signup" disabled$="[[_inProgress]]">
           <span>[[localize('lf-signup-button')]]</span>
-          <paper-progress hidden$="[[!_inProgress]]" disabled$="[[!_inProgress]]" indeterminate></paper-progress>
+          <paper-progress class="btn-progress" hidden$="[[!_inProgress]]" disabled$="[[!_inProgress]]" indeterminate></paper-progress>
         </paper-button>
         <p class="signup-toggle">
           <span>[[localize('lf-already-have-account')]]</span>
@@ -222,7 +223,7 @@
         </p>
         <paper-button raised$="[[!flat]]" type="submit" on-click="_signIn" class="btn--signin" disabled$="[[_inProgress]]">
           <span>[[localize('lf-signin-button')]]</span>
-          <paper-progress hidden$="[[!_inProgress]]" disabled$="[[!_inProgress]]" indeterminate></paper-progress>
+          <paper-progress class="btn-progress" hidden$="[[!_inProgress]]" disabled$="[[!_inProgress]]" indeterminate></paper-progress>
         </paper-button>
         <template is="dom-if" if="[[!noSignUp]]">
           <p class="signup-toggle">
@@ -238,7 +239,7 @@
     <template is="dom-if" if="[[showResetPW]]">
       <paper-button raised$="[[!flat]]" type="submit" on-click="_resetPassword" class="btn--resetpw" disabled$="[[_inProgress]]">
         <span>[[localize('lf-resetpw-button')]]</span>
-        <paper-progress hidden$="[[!_inProgress]]" disabled$="[[!_inProgress]]" indeterminate></paper-progress>
+        <paper-progress class="btn-progress" hidden$="[[!_inProgress]]" disabled$="[[!_inProgress]]" indeterminate></paper-progress>
       </paper-button>
       <p>
         <paper-button class="link--reset-pw" on-click="toggleShowResetPW"