[FEATURE] Whole area link (t3kit#11)

theevee · Feb 6, 2017 · b6c32fe · b6c32fe
1 parent 0ca99fd
commit b6c32fe
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 47 deletions.
diff --git a/dev/styles/main/contentElements/bigIconTextButton.less b/dev/styles/main/contentElements/bigIconTextButton.less
@@ -1,8 +1,8 @@
 // =========================================================
 // === Big icon text btn ===================================
 // =========================================================
-.big-icon-text-btn__header {
-}
+// .big-icon-text-btn__header {
+// }
 
 .big-icon-text-btn {
     text-align: center;
@@ -11,6 +11,8 @@
 }
 
 .big-icon-text-btn__link {
+    position: relative;
+    z-index: 1;
 
     &:after {
         .icons();
@@ -41,5 +43,20 @@
     display: inline-block;
 }
 
+.big-icon-text-btn__whole-area-link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    font-size: 0;
+    text-indent: -9999px;
+    z-index: 0;
+}
+
+.big-icon-text-btn._whole-area-link:hover .big-icon-text-btn__whole-area-link {
+    background-color: fade(#fff, 10%);
+}
+
 // =========================================================
 // =========================================================
diff --git a/dev/styles/main/contentElements/imageTextLink.less b/dev/styles/main/contentElements/imageTextLink.less
@@ -7,53 +7,80 @@
     padding-top: 50px;
 }
 
-.img-text-link__header {
-    // text-transform: uppercase;
-}
+// .img-text-link__header {
+//     // text-transform: uppercase;
+// }
 
 .img-text-link__img-link {
-   display:inline-block;
     position: relative;
-}
-.img-text-link__img-link:after{
-    content:'';
-    top: 0;
-    left: 0;
-    z-index: 10;
-    width: 100%;
-    height: 100%;
+    // display: inline-block;
     display: block;
-    position: absolute;
-    background: @main-color;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.5s ease, visibility 0.5s ease;
+    z-index: 1;
+
+    &:after {
+        content:'';
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+        z-index: 10;
+        width: 100%;
+        height: 100%;
+        background: @main-color;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.5s ease, visibility 0.5s ease;
+    }
+
+    &:before {
+        .icons();
+        position: absolute;
+        font-size: 38px;
+        padding: 12px;
+        border: 2px solid tint(@main-color, 90%);
+        border-radius: 50%;
+        top: 50%;
+        left: 50%;
+        margin-left: -33px;
+        margin-top: -33px;
+        z-index: 11;
+        color: tint(@main-color, 90%);
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.5s ease, visibility 0.5s ease;
+    }
+
+    &:hover {
+        &:after {
+            opacity: 0.5;
+            visibility: visible;
+        }
+
+        &:before {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
 }
-.img-text-link__img-link:hover:after{
-    opacity: 0.5;
-    visibility: visible;
+
+.img-text-link__link {
+    position: relative;
+    z-index: 1;
 }
-.img-text-link__img-link:before{
-    .icons();
+
+.img-text-link__whole-area-link {
     position: absolute;
-    font-size: 38px;
-    padding: 12px;
-    border: 2px solid tint(@main-color, 90%);
-    border-radius: 50%;
-    top: 50%;
-    left: 50%;
-    margin-left: -33px;
-    margin-top: -33px;
-    z-index: 11;
-    color: tint(@main-color, 90%);
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.5s ease, visibility 0.5s ease;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    font-size: 0;
+    text-indent: -9999px;
+    z-index: 0;
 }
 
-.img-text-link__img-link:hover:before{
-    opacity: 1;
-    visibility: visible;
+.img-text-link._whole-area-link:hover .img-text-link__whole-area-link {
+    background-color: fade(#fff, 10%);
 }
 
 // =========================================================

diff --git a/dev/styles/main/contentElements/leftIconTextButton.less b/dev/styles/main/contentElements/leftIconTextButton.less
@@ -10,17 +10,24 @@
     margin-bottom: 4px;
     display: inline-block;
 }
+
 .icon-right .icon-text-btn__icon {
     float: right;
 }
-.icon-text-btn__header {
-}
 
-.icon-text-btn{
+// .icon-text-btn__header {
+
+// }
+
+.icon-text-btn {
     padding: 40px 0;
     padding-top: 20px;
 }
+
 .icon-text-btn__link {
+    position: relative;
+    z-index: 1;
+
     &:after {
         .icons();
         // content: '\e675';
@@ -33,9 +40,25 @@
     }
 
 }
-.icon-text-btn__p{
+
+.icon-text-btn__p {
     margin-bottom: 18px;
 }
 
+.icon-text-btn__whole-area-link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    font-size: 0;
+    text-indent: -9999px;
+    z-index: 0;
+}
+
+.icon-text-btn._whole-area-link:hover .icon-text-btn__whole-area-link {
+    background-color: fade(#fff, 10%);
+}
+
 // =========================================================
 // =========================================================
diff --git a/dev/templates/pages/index.hbs b/dev/templates/pages/index.hbs
@@ -20,6 +20,7 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
                 text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
                 buttonName="READ MORE"
                 btnAsLink=true
+                wholeAreaLink="#background-link"
             }}
         </div>
         <div class="col-md-4">
@@ -54,6 +55,7 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
                     text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
                     buttonName="READ MORE"
                     btnAsLink=false
+                    wholeAreaLink="#background-link"
                 }}
             </div>
             <div class="col-md-4">
@@ -113,6 +115,7 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
                 text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."
                 linkName="Lorem Ipsum Dolor"
                 linkAsBtn=true
+                wholeAreaLink="#background-link"
             }}
         </div>
         <div class="col-md-4">
@@ -162,6 +165,7 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
                 text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
                 buttonName="READ MORE"
                 btnAsLink=true
+                wholeAreaLink="#background-link"
             }}
         </div>
         <div class="col-md-4">
@@ -202,6 +206,7 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
                         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
                         buttonName="READ MORE"
                         btnAsLink=false
+                        wholeAreaLink="#background-link"
                     }}
                 </div>
                 <div class="col-md-4">
@@ -236,6 +241,7 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
                         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
                         buttonName="READ MORE"
                         btnAsLink=false
+                        wholeAreaLink="#background-link"
                     }}
                 </div>
                 <div class="col-md-4">
@@ -344,6 +350,7 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
                     text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
                     buttonName="READ MORE"
                     btnAsLink=true
+                    wholeAreaLink="#background-link"
                 }}
             </div>
             <div class="col-md-4">
@@ -471,6 +478,7 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
                 text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."
                 linkName="Lorem Ipsum Dolor"
                 linkAsBtn=false
+                wholeAreaLink="#background-link"
             }}
         </div>
         <div class="col-md-4">

diff --git a/dev/templates/parts/content/contentElements/bigIconTextButton.hbs b/dev/templates/parts/content/contentElements/bigIconTextButton.hbs
@@ -1,4 +1,4 @@
-<div class="big-icon-text-btn">
+<div class="big-icon-text-btn{{#if this.wholeAreaLink}} _whole-area-link{{/if}}">
     {{#if this.bigTopIcon}}
         <span class="big-icon-text-btn__icon icons icon-{{bigTopIcon}}"></span>
     {{/if}}
@@ -11,4 +11,7 @@
     {{#if this.buttonName}}
         <a class="big-icon-text-btn__link {{#if this.btnAsLink}}{{else}}btn btn-default {{/if}}" title="{{buttonName}}" href="{{#if this.buttonLink}}{{buttonLink}}{{else}}#{{/if}}">{{buttonName}}</a>
     {{/if}}
+    {{#if this.wholeAreaLink}}
+        <a class="big-icon-text-btn__whole-area-link" title="{{buttonName}}" href="{{#if this.wholeAreaLink}}{{wholeAreaLink}}{{else}}#{{/if}}">{{buttonName}}</a>
+    {{/if}}
 </div>
diff --git a/dev/templates/parts/content/contentElements/iconTextButton.hbs b/dev/templates/parts/content/contentElements/iconTextButton.hbs
@@ -1,4 +1,4 @@
-<div class="icon-text-btn">
+<div class="icon-text-btn{{#if this.wholeAreaLink}} _whole-area-link{{/if}}">
     <h3 class="icon-text-btn__header">
         <span class="icon-text-btn__icon icons icon-{{headerLeftIcon}}"></span>
         {{header}}
@@ -9,4 +9,7 @@
     {{#if this.buttonName}}
         <a class="icon-text-btn__link {{#if this.btnAsLink}}{{else}}btn btn-default {{/if}}" title="{{buttonName}}" href="{{#if this.buttonLink}}{{buttonLink}}{{else}}#{{/if}}">{{buttonName}}</a>
     {{/if}}
+    {{#if this.wholeAreaLink}}
+        <a class="icon-text-btn__whole-area-link" title="{{buttonName}}" href="{{#if this.wholeAreaLink}}{{wholeAreaLink}}{{else}}#{{/if}}">{{buttonName}}</a>
+    {{/if}}
 </div>
diff --git a/dev/templates/parts/content/contentElements/imageTextLink.hbs b/dev/templates/parts/content/contentElements/imageTextLink.hbs
@@ -1,4 +1,4 @@
-<div class="img-text-link">
+<div class="img-text-link{{#if this.wholeAreaLink}} _whole-area-link{{/if}}">
     {{#if this.imgSrc}}
         {{#if this.imgLink}}
             <a class="img-text-link__img-link" title="{{imgLink}}" href="{{imgLink}}">
@@ -17,4 +17,7 @@
     {{#if this.linkName}}
         <a class="img-text-link__link {{#if this.linkAsBtn}}btn btn-default {{/if}}" title="{{linkName}}" href="{{#if this.link}}{{link}}{{else}}#{{/if}}">{{linkName}}</a>
     {{/if}}
+    {{#if this.wholeAreaLink}}
+        <a class="img-text-link__whole-area-link" title="{{buttonName}}" href="{{#if this.wholeAreaLink}}{{wholeAreaLink}}{{else}}#{{/if}}">{{linkName}}</a>
+    {{/if}}
 </div>