.button(@line-height: 54px, @horizontal-padding: 20px) {
display: inline-block;
- line-height: @line-height;
- padding-left: @horizontal-padding;
- padding-right: @horizontal-padding;
border: 0;
font-family: @montserrat;
font-weight: 300;
}
}
-.border-button-fill(@border-color,@color-text) {
+.border-button-fill(@border-color,@color-text,@fade-active:20%) {
.button();
transition: all @transition-time-buttons;
color: @border-color;
&:active {
- background-color: fade(@border-color, 20%);
+ background-color: fade(@border-color, @fade-active);
}
}
\r
> ul {\r
> li {\r
+\r
+ margin: 0 25px;\r
+ position: relative;\r
+\r
+ a {\r
+ position: relative;\r
+ &:after {\r
+ content: "";\r
+ height: 1px;\r
+ width: 100%;\r
+ position: absolute;\r
+ background-color: @color-header-grey;\r
+ transform: scaleX(0);\r
+ left: 0;\r
+ bottom: 0;\r
+ }\r
+ }\r
+\r
&.active > a, a:hover {\r
- border-bottom-color: @color-header-grey;\r
+ color: @color-header-grey;\r
+ transform: scaleX(1);\r
}\r
&:hover {\r
> ul {\r
display: block;\r
}\r
}\r
- margin: 0 25px;\r
- position: relative;\r
+\r
> ul {\r
position: absolute;\r
top: 40px;\r
}\r
a {\r
.rounded-button();\r
- .smallarrow-button(10px, 30px, 10px, 7px);\r
&.quoteLink {\r
.background-button-green();\r
-\r
color: #fff;\r
}\r
&.agencies {\r
- .border-button(@color-header-grey, #c2c4c7);\r
+ .border-button-fill(@color-header-grey, #c2c4c7, 5%);\r
}\r
+ .smallarrow-button(10px, 30px, 10px, 7px);\r
}\r
}\r
\r
.buttons {\r
margin-top: 50px;\r
a {\r
- .border-button-fill(#343c44, #f3f3f3);\r
+ .border-button-fill(#343c44, #f3f3f3, 5%);\r
.longarrow-button(20px, 40px, 18px);\r
min-width: 220px;\r
margin-right: 20px;\r