wip #529 @1.5

diff --git a/less/001-variables.less b/less/001-variables.less
index b84d9b4bd13c509f5baeded1f1bb240da7e9d783..f4b1b87e8fda2daa4f8f01077c999ec74dd2ff34 100644 (file)
--- 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 03759d32e0ad4d9633bc4cbfeb43c070ad63e088..12376f7928400bbb1951e264725996ccc5ef1fde 100644 (file)
--- 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 2b7e25a11e477d95bd2ea4d9bdfe1841b8908eb4..459059a7946bc85a1ae277afbb55a83527d1bcac 100644 (file)
--- a/less/101-header.less
+++ b/less/101-header.less
@@ -114,7 +114,7 @@ header {
                a {\r
                        .rounded-button();\r
                        &.quoteLink {\r
-                               .background-button(@color-green);\r
+                               .background-button-green();\r
                                color: #fff;\r
                        }\r
                        &.agencies {\r

diff --git a/less/102-footer.less b/less/102-footer.less
index 233928b8cd42ed898e679b3c0c69e67e1dd6e9b5..6ee191bf56af13e76e56585c856da0287f64ecb6 100644 (file)
--- 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 b2c38b573226d573e9fc0cd7b173a1d85c7109f5..d885d611c59c46286c4d206ae2c9e02867c6a8e4 100644 (file)
--- a/less/103-contact-footer.less
+++ b/less/103-contact-footer.less
@@ -9,12 +9,13 @@
                margin-top: 50px;\r
                a {\r
                        .border-button-fill(#343c44, #f3f3f3);\r
-                       width: 220px;\r
+                       .longarrow-button(20px, 40px, 18px);\r
+                       min-width: 220px;\r
                        margin-right: 20px;\r
 \r
                        &.quoteLink {\r
                                color: #fff;\r
-                               .background-button(#8aab41);\r
+                               .background-button-green();\r
                        }\r
                }\r
 \r

diff --git a/less/220-exemples.less b/less/220-exemples.less
index f4ff8b53ccc8cf2fe5e8e9b9a4ce2f639f3febf8..d6f464df75b89b5ba6c0b4bb26c6c9f18477feda 100644 (file)
--- a/less/220-exemples.less
+++ b/less/220-exemples.less
@@ -64,26 +64,18 @@
                                background-color: transparent;\r
                                &:nth-of-type(11n+1) {\r
                                        background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%);\r
-                                       button {\r
-                                               .border-button-fill(#fff, rgba(231, 92, 123, 1));\r
-                                       }\r
                                }\r
                                &:nth-child(11n+9) {\r
                                        background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%);\r
-                                       button {\r
-                                               .border-button-fill(#fff, #f6786e);\r
-                                       }\r
                                }\r
                                img {\r
                                        height: auto;\r
                                }\r
                                button {\r
-                                       color: #fff;\r
-                                       border: 1px solid #fff;\r
-                                       padding: 0 20px;\r
                                        margin-left: 20px;\r
                                        margin-top: 5px;\r
-\r
+                                       .border-button-fill(#fff, rgba(231, 92, 123, 1));\r
+                                       .longarrow-button(20px, 40px, 18px);\r
                                }\r
                        }\r
                }\r

diff --git a/less/315-quote.less b/less/315-quote.less
index b4d78101dd9c414fd84d369b97240923501c8fd6..411756888a15513a4ad30a2450413d6f39499d51 100644 (file)
--- 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;