Merge pull request #6687 from Automattic/update/signup

Signup: Minor transitions, contrast, and layout tweaks.
Automattic · Jul 18, 2016 · c080cfd · c080cfd
2 parents 1913d28 + ab0d470
commit c080cfd
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 19 deletions.
diff --git a/client/components/domains/domain-product-price/style.scss b/client/components/domains/domain-product-price/style.scss
@@ -1,5 +1,5 @@
 .domain-product-price {
-	color: darken( $gray, 10% );
+	color: darken( $gray, 30% );
 	display: inline-block;
 	font-size: 17px;
 	font-weight: 600;

diff --git a/client/components/domains/example-domain-suggestions/style.scss b/client/components/domains/example-domain-suggestions/style.scss
@@ -17,9 +17,10 @@
 		display: none;
 	}
 }
+
 .example-domain-suggestions__premium-price {
-	font-size: 11pt;
 	cursor: pointer;
+	border-bottom: 1px dotted $gray;
 }
 
 .example-domain-suggestions__information {
@@ -37,20 +38,19 @@
 }
 
 .example-domain-suggestions__header {
-	color: darken( $gray, 20% );
-	font-size: 22px;
-	font-weight: 200;
-	margin: 15px 20px;
+	color: darken( $gray, 30% );
+	font-size: 16px;
+	margin: 16px 24px;
 }
 
 .example-domain-suggestions__list {
 	list-style: none;
-	margin: 0 20px;
+	margin: 0 24px;
 
 	li {
-		background-color: $gray-light;
-		padding: 15px;
-		margin: 2px 0;
+		background: $gray-light;
+		margin-bottom: 1px;
+		padding: 16px;
 
 		@include clear-fix;
 
@@ -61,7 +61,7 @@
 }
 
 .example-domain-suggestions__price {
-	color: $gray;
+	color: darken( $gray, 10 );
 	font-size: 14px;
 
 	@include breakpoint( ">660px" ) {
@@ -80,7 +80,7 @@
 
 .example-domain-suggestions__mapping-information {
 	color: darken( $gray, 20% );
-	margin: 15px 20px;
+	margin: 16px 24px;
 
 	a {
 		text-decoration: underline;

diff --git a/client/components/header-cake/style.scss b/client/components/header-cake/style.scss
@@ -39,7 +39,7 @@
 
 .header-cake__title {
 	flex: 1 1 auto;
-	color: $gray;
+	color: darken( $gray, 20 );
 	text-align: center;
 	word-break: break-word;
 	white-space: nowrap;

diff --git a/client/signup/flow-progress-indicator/style.scss b/client/signup/flow-progress-indicator/style.scss
@@ -1,5 +1,5 @@
 .flow-progress-indicator {
-	color: $gray;
+	color: darken( $gray, 20 );
 	font-size: 14px;
 	font-weight: 300;
 	margin-bottom: -10px;

diff --git a/client/signup/step-wrapper/style.scss b/client/signup/step-wrapper/style.scss
@@ -1,6 +1,7 @@
 .step-wrapper__buttons {
 	text-align: center;
 }
+
 .step-wrapper__buttons.is-wide-navigation {
 	display: flex;
 	justify-content: space-around;
@@ -27,3 +28,11 @@
 		vertical-align: middle;
 	}
 }
+
+.step-wrapper__buttons .button.is-borderless {
+	color: darken( $gray, 20 );
+
+	&:hover {
+		color: $gray-dark;
+	}
+}
diff --git a/client/signup/style.scss b/client/signup/style.scss
@@ -34,12 +34,12 @@
 
 .signup__step-enter.signup__step-enter-active {
 	opacity: 1;
-	transition: .3s ease-in-out;
+	transition: .2s ease-in-out;
 	transition-delay: .2s;
 
 	.is-animated-content {
 		transform: translate3d( 0, 0, 0 );
-		transition: .3s ease-in-out;
+		transition: .2s ease-in-out;
 		transition-delay: .2s;
 	}
 }
@@ -54,11 +54,11 @@
 
 .signup__step-leave.signup__step-leave-active {
 	opacity: 0.01;
-	transition: .3s ease-in-out;
+	transition: .2s ease-in-out;
 
 	.is-animated-content {
-		transform: translate3d( 0, 32px, 0 );
-		transition: .3s ease-in-out;
+		transform: translate3d( 0, 32px, 0 ) scale( 0.9 );
+		transition: .2s ease-in-out;
 	}
 }