From 2158972b820a199d8c61c4a202d1432dfd8970f8 Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Mon, 4 Jul 2016 14:08:42 +0000 Subject: [PATCH] Refactor footer button style to reuse it in other places | wip #529 @0.2 --- less/003-mixins.less | 42 +++++-- less/102-footer.less | 261 ++++++++++++++++++++----------------------- 2 files changed, 154 insertions(+), 149 deletions(-) diff --git a/less/003-mixins.less b/less/003-mixins.less index e1bf538..03759d3 100644 --- a/less/003-mixins.less +++ b/less/003-mixins.less @@ -99,16 +99,42 @@ .list() { list-style: none; li { - position: relative; - padding-left: 1.5em; + position: relative; + padding-left: 1.5em; &:before { - content: '>'; - font-family: @icons; - font-size: 0.7em; - position: absolute; - top: 0.5em; - left: 0; + content: '>'; + font-family: @icons; + font-size: 0.7em; + position: absolute; + top: 0.5em; + left: 0; + } + } +} + +.longarrow-button(@padding-vertical,@padding-horizontal,@offset) { + padding: @padding-vertical @padding-horizontal; + position: relative; + transition: all 0.25s; + + &:after { + content: '-'; + font-family: @icons; + font-size: 19px; + position: absolute; + top: 16px; + right: 45px; + opacity: 0; + transition: opacity 0.3s; + } + + &:hover { + padding-right: @padding-horizontal + @offset; + padding-left: @padding-horizontal - @offset; + + &:after { + opacity: 1; } } } \ No newline at end of file diff --git a/less/102-footer.less b/less/102-footer.less index f52a568..233928b 100644 --- a/less/102-footer.less +++ b/less/102-footer.less @@ -1,158 +1,137 @@ @import "000-imports"; footer { - .font-thinning(); - max-width: @content-max-width; - margin: 0 auto; - - a { - color: #fff; - text-decoration: none; - } + .font-thinning(); + max-width: @content-max-width; + margin: 0 auto; + + a { + color: #fff; + text-decoration: none; + } } footer.site { - color: #fff; - background-color: @color-footer-bg-primary; - padding: 75px 85px 75px 42px; - - // Flexbox setup - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - - // Footer containers - &> div { - flex-grow: 1; - padding-right: 20px; // so elements don't get too close when layout shrinks - &:last-of-type { - padding-right: 0; - } - } - - .contact-details { - flex-grow: 4; // Increase space bias for this block - } - - address { - margin-top: 4px; - margin-left: 41px; - font-style: normal; - font-size: 14px; - line-height: 32/14; - } - - .footer-social { - text-align: center; - } - - .social-link { - margin-right: 20px; - display: inline-block; - border-radius: 50%; - border: 1px solid #fff; - transition: all 0.25s; - - &:last-of-type { - margin-right: 0; - } - - &:hover { - background-color: currentColor; - border-color: currentColor; - } - - img { - display: block; - } - } - - .workshop { - text-align: right; - } - .workshop-link { - .rounded-button(); - .border-button(#fff, #fff); - line-height: 1; - padding: 20px 65px; - border-radius: 26px; - text-transform: uppercase; - font-size: 12px; - position: relative; - transition: all 0.25s; - - &:after { - content: '-'; - font-family: @icons; - font-size: 19px; - position: absolute; - top: 16px; - right: 45px; - opacity: 0; - transition: opacity 0.3s; - } - - &:hover { - padding: 20px 84px 20px 46px; - - &:after { - opacity: 1; - } - } - } + color: #fff; + background-color: @color-footer-bg-primary; + padding: 75px 85px 75px 42px; + + // Flexbox setup + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + + // Footer containers + & > div { + flex-grow: 1; + padding-right: 20px; // so elements don't get too close when layout shrinks + &:last-of-type { + padding-right: 0; + } + } + + .contact-details { + flex-grow: 4; // Increase space bias for this block + } + + address { + margin-top: 4px; + margin-left: 41px; + font-style: normal; + font-size: 14px; + line-height: 32/14; + } + + .footer-social { + text-align: center; + } + + .social-link { + margin-right: 20px; + display: inline-block; + border-radius: 50%; + border: 1px solid #fff; + transition: all 0.25s; + + &:last-of-type { + margin-right: 0; + } + + &:hover { + background-color: currentColor; + border-color: currentColor; + } + + img { + display: block; + } + } + + .workshop { + text-align: right; + } + .workshop-link { + .rounded-button(); + .border-button(#fff, #fff); + .longarrow-button(20px, 65px, 19px); + line-height: 1; + border-radius: 26px; + text-transform: uppercase; + font-size: 12px; + } } .footer-menu { - line-height: 32/14; - flex-grow: 2; - - .menu-title { - text-transform: uppercase; - font-family: @montserrat; - font-weight: 600; - } - - ul { - list-style: none; - } + line-height: 32/14; + flex-grow: 2; + + .menu-title { + text-transform: uppercase; + font-family: @montserrat; + font-weight: 600; + } + + ul { + list-style: none; + } } // Copyright and legal bar footer.legal { - background-color: @color-footer-bg-secondary; - color: #5c6268; - padding: 40px 85px; - font-size: 14px; - position: relative; + background-color: @color-footer-bg-secondary; + color: #5c6268; + padding: 40px 85px; + font-size: 14px; + position: relative; } .locale-nav { - position: absolute; - top: 21px; - right: 85px; - - a { - display: inline-block; - width: 52px; - line-height: 52px; - margin-right: 20px; - text-align: center; - font-family: @montserrat; - font-size: 14px; - font-weight: 600; - text-transform: uppercase; - color: #fff; - border: 1px solid currentColor; - border-radius: 100%; - transition: all 0.25s; - - &.active, &:hover { - color: #8aaa43; - } - - &:last-of-type { - margin-right: 0; - } - } + position: absolute; + top: 21px; + right: 85px; + + a { + display: inline-block; + width: 52px; + line-height: 52px; + margin-right: 20px; + text-align: center; + font-family: @montserrat; + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + color: #fff; + border: 1px solid currentColor; + border-radius: 100%; + transition: all 0.25s; + + &.active, &:hover { + color: #8aaa43; + } + + &:last-of-type { + margin-right: 0; + } + } } \ No newline at end of file -- 2.39.5