Refactor footer button style to reuse it in other places | wip #529 @0.2

diff --git a/less/003-mixins.less b/less/003-mixins.less
index e1bf538a5c1f7df83be1ad64f161f917e5704b4d..03759d32e0ad4d9633bc4cbfeb43c070ad63e088 100644 (file)
--- 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 f52a5687bde4778b8bfaa853cc534e06f6e7f5cf..233928b8cd42ed898e679b3c0c69e67e1dd6e9b5 100644 (file)
--- 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