Bug 1379558 - Button style in onboarding should follow photon button style;r=mossop,rexboy draft
authorgasolin <gasolin@gmail.com>
Mon, 10 Jul 2017 15:38:17 +0800
changeset 606564 317182344a8863c022a0d61294d94bf116f02db7
parent 606556 0e41d07a703f19224f60b01577b2cbb5708046c9
child 636790 cb068e733bcea5665a8f39b41733a0691ed5d326
push id67724
push userbmo:gasolin@mozilla.com
push dateTue, 11 Jul 2017 03:25:47 +0000
reviewersmossop, rexboy
bugs1379558
milestone56.0a1
Bug 1379558 - Button style in onboarding should follow photon button style;r=mossop,rexboy MozReview-Commit-ID: JNXUvOPJDjO
browser/extensions/onboarding/content/onboarding.css
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -173,25 +173,16 @@
   height: 40px;
   width: 80%;
   padding: 7px;
 }
 
 #onboarding-tour-sync-page form > #onboarding-tour-sync-button {
   padding: 10px 20px;
   min-width: 40%;
-  font-size: 15px;
-  font-weight: normal;
-  line-height: 20px;
-  background: #0d96ff;
-  border: none;
-  border-radius: 3px;
-  color: #fff;
-  box-shadow: 0 1px 0 rgba(0,0,0,0.23);
-  cursor: pointer;
   margin: 15px 0;
   float: none;
 }
 
 /* Onboarding tour pages */
 .onboarding-tour-page {
   grid-row: page-start / footer-end;
   grid-column: page-start;
@@ -256,29 +247,38 @@
   grid-column: tour-page-end;
 }
 
 .onboarding-tour-action-button {
   padding: 10px 20px;
   font-size: 15px;
   font-weight: 600;
   line-height: 21px;
-  background: #0d96ff;
+  background: #0a84ff;
   border: none;
-  border-radius: 3px;
+  border-radius: 0;
   color: #fff;
-  box-shadow: 0 1px 0 rgba(0,0,0,0.23);
-  cursor: pointer;
   float: inline-end;
   margin-inline-end: 26px;
   margin-top: -32px;
 }
 
-.onboarding-tour-action-button:active {
-  background: #0881dd;
+.onboarding-tour-action-button:hover:not([disabled="true"]) ,
+#onboarding-notification-action-btn:hover {
+  background: #0060df;
+  cursor: pointer;
+}
+
+.onboarding-tour-action-button:active:not([disabled="true"]),
+#onboarding-notification-action-btn:active  {
+  background: #003EAA;
+}
+
+.onboarding-tour-action-button:disabled {
+  opacity: 0.5;
 }
 
 /* Tour Icons */
 #onboarding-tour-search {
   background-image: url("img/icons_search.svg");
 }
 
 #onboarding-tour-search.onboarding-active,
@@ -429,23 +429,22 @@
 #onboarding-notification-tour-icon {
   width: 64px;
   height: 64px;
   background-size: 64px;
   background-repeat: no-repeat;
 }
 
 #onboarding-notification-action-btn {
-  background: #0d96ff;
+  background: #0a84ff;
   border: none;
-  border-radius: 3px;
+  border-radius: 0;
   padding: 10px 20px;
   font-size: 14px;
   color: #fff;
-  box-shadow: 0 1px 0 rgba(0,0,0,0.23);
 }
 
 @media all and (max-width: 960px) {
   #onboarding-notification-icon {
     display: none;
   }
 }
 @media all and (max-width: 720px) {