Update clap style

vietnam-devs · Dec 15, 2017 · 9f087a5 · 9f087a5
1 parent c9a8dc8
commit 9f087a5
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/modules/CRMCore.Module.Spa/src/app/shared/components/post-clap/post-clap.component.html b/src/modules/CRMCore.Module.Spa/src/app/shared/components/post-clap/post-clap.component.html
@@ -1,7 +1,7 @@
 
 
 <div class="float-left">
-      <button class="button--link" (click) = "onClap()">
+      <button class="button--clap" (click) = "onClap()">
         <svg class="svgIcon--25px" width="25" height="25" viewBox="0 0 25 25">
        <g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"></path>
        <path d="M14.815 3.776l1.84-2.551-1.43-.471z"></path>
@@ -11,4 +11,4 @@
          </g></svg>
       </button>
 </div>
-<div>{{NumberOfClaps}}<div>
+<div class="clap">{{NumberOfClaps}}<div>
diff --git a/src/modules/CRMCore.Module.Spa/src/styles.css b/src/modules/CRMCore.Module.Spa/src/styles.css
@@ -142,15 +142,40 @@ html, body {
     font-family: medium-content-sans-serif-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;    }
   .button--chromeless,
   .button--link {
-      border-width: 0;
+      border: none;
+      padding: 2;
+      text-align: left;
+      vertical-align: baseline;
+      white-space: normal;
+      background-color: #f8f8f8;
+      margin-left: 9px;
+      margin-right: 9px;
+
+  }
+  .button--clap {
+      border: none;
       padding: 2;
       text-align: left;
       vertical-align: baseline;
       white-space: normal;
       background-color: #f8f8f8;
       margin-left: 9px;
       margin-right: 9px;
+      border-radius: 18px;
+      box-shadow: 0 6px #4CAF50;
+  }
+  .button--clap:hover {background-color: #3e8e41;border: none;}
+  .clap {
+        padding-top: 12px !important;
+       font-family: fantasy;
   }
+
+.button--clap:active {
+  background-color: #3e8e41;
+  box-shadow: 0 5px #666;
+  transform: translateY(4px);
+   border: none;
+}
  .svgIcon--25px {
     line-height: 25px;
     height: 25px;
@@ -279,6 +304,7 @@ html, body {
 
 }
 
+
 #wrapper .visible {
 position:relative;