From: vincent@cubedesigners.com <vincent@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Mon, 4 Jul 2016 15:14:31 +0000 (+0000)
Subject: wip #529 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=9601b94cf371fe6c904f890df37385a48dd05ad4;p=fluidbook-v3.git

wip #529 @1.5
---

diff --git a/less/001-variables.less b/less/001-variables.less
index b84d9b4..f4b1b87 100644
--- a/less/001-variables.less
+++ b/less/001-variables.less
@@ -22,4 +22,7 @@
 //-- Content and breakpoints
 @mobile-breakpoint: 1024px;
 @desktop-min-width: 1200px;
-@content-max-width: 1680px;
\ No newline at end of file
+@content-max-width: 1680px;
+
+// -- transition times
+@transition-time-buttons:200ms;
\ No newline at end of file
diff --git a/less/003-mixins.less b/less/003-mixins.less
index 03759d3..12376f7 100644
--- a/less/003-mixins.less
+++ b/less/003-mixins.less
@@ -32,7 +32,7 @@
 }
 
 .border-button(@base-color,@border-color) {
-	transition: all 200ms;
+	transition: all @transition-time-buttons;
 
 	border-color: @border-color;
 	color: @base-color;
@@ -49,38 +49,36 @@
 
 .border-button-fill(@border-color,@color-text) {
 	.button();
-	transition: all 200ms;
+	transition: all @transition-time-buttons;
 
 	border: 1px solid @border-color;
 	color: @border-color;
 
-	&:hover {
-		background-color: @border-color;
-		color: @color-text;
-	}
-
 	&:active {
-		background-color: darken(@border-color, 2%);
-		border-color: darken(@border-color, 2%);
+		background-color: fade(@border-color, 20%);
 	}
 }
 
-.background-button(@base-color) {
-	transition: all 200ms;
+.background-button(@base-color,@active-color) {
+	transition: all @transition-time-buttons;
 
 	background-color: @base-color;
 	border-color: @base-color;
 
-	&:hover {
-		background-color: lighten(@base-color, 5%);
-		border-color: lighten(@base-color, 5%);
-	}
 	&:active {
-		background-color: darken(@base-color, 2%);
-		border-color: darken(@base-color, 2%);
+		background-color: @active-color;
+		border-color: @active-color;
 	}
 }
 
+.background-button-green() {
+	.background-button(#8aab41, #aac759);
+}
+
+.background-button-blue() {
+	.background-button(#3c9fd6, #53bde7);
+}
+
 .divider(@bottom-padding: 100px) {
 	position: relative;
 	padding-bottom: @bottom-padding;
@@ -116,20 +114,21 @@
 .longarrow-button(@padding-vertical,@padding-horizontal,@offset) {
 	padding: @padding-vertical @padding-horizontal;
 	position: relative;
-	transition: all 0.25s;
+	transition: all @transition-time-buttons;
+	line-height: 0.8em;
 
 	&:after {
 		content: '-';
 		font-family: @icons;
-		font-size: 19px;
+		font-size: 1.5em;
 		position: absolute;
-		top: 16px;
-		right: 45px;
+		top: @padding-vertical;
+		right: @padding-horizontal - @offset;
 		opacity: 0;
-		transition: opacity 0.3s;
+		transition: opacity @transition-time-buttons;
 	}
 
-	&:hover {
+	&:hover, &:active {
 		padding-right: @padding-horizontal + @offset;
 		padding-left: @padding-horizontal - @offset;
 
diff --git a/less/101-header.less b/less/101-header.less
index 2b7e25a..459059a 100644
--- a/less/101-header.less
+++ b/less/101-header.less
@@ -114,7 +114,7 @@ header {
 		a {
 			.rounded-button();
 			&.quoteLink {
-				.background-button(@color-green);
+				.background-button-green();
 				color: #fff;
 			}
 			&.agencies {
diff --git a/less/102-footer.less b/less/102-footer.less
index 233928b..6ee191b 100644
--- a/less/102-footer.less
+++ b/less/102-footer.less
@@ -75,7 +75,6 @@ footer.site {
 		.rounded-button();
 		.border-button(#fff, #fff);
 		.longarrow-button(20px, 65px, 19px);
-		line-height: 1;
 		border-radius: 26px;
 		text-transform: uppercase;
 		font-size: 12px;
diff --git a/less/103-contact-footer.less b/less/103-contact-footer.less
index b2c38b5..d885d61 100644
--- a/less/103-contact-footer.less
+++ b/less/103-contact-footer.less
@@ -9,12 +9,13 @@
 		margin-top: 50px;
 		a {
 			.border-button-fill(#343c44, #f3f3f3);
-			width: 220px;
+			.longarrow-button(20px, 40px, 18px);
+			min-width: 220px;
 			margin-right: 20px;
 
 			&.quoteLink {
 				color: #fff;
-				.background-button(#8aab41);
+				.background-button-green();
 			}
 		}
 
diff --git a/less/220-exemples.less b/less/220-exemples.less
index f4ff8b5..d6f464d 100644
--- a/less/220-exemples.less
+++ b/less/220-exemples.less
@@ -64,26 +64,18 @@
 				background-color: transparent;
 				&:nth-of-type(11n+1) {
 					background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%);
-					button {
-						.border-button-fill(#fff, rgba(231, 92, 123, 1));
-					}
 				}
 				&:nth-child(11n+9) {
 					background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%);
-					button {
-						.border-button-fill(#fff, #f6786e);
-					}
 				}
 				img {
 					height: auto;
 				}
 				button {
-					color: #fff;
-					border: 1px solid #fff;
-					padding: 0 20px;
 					margin-left: 20px;
 					margin-top: 5px;
-
+					.border-button-fill(#fff, rgba(231, 92, 123, 1));
+					.longarrow-button(20px, 40px, 18px);
 				}
 			}
 		}
diff --git a/less/315-quote.less b/less/315-quote.less
index b4d7810..4117568 100644
--- a/less/315-quote.less
+++ b/less/315-quote.less
@@ -98,7 +98,7 @@
 
 		button {
 			.button();
-			.background-button(@color-green);
+			.background-button-green();
 			.font-thinning();
 			color: #fff;
 			font-size: 14px;