diff --git a/dev/styles/main/contentElements/bigIconTextButton.less b/dev/styles/main/contentElements/bigIconTextButton.less index 6e19a25..5a8675c 100644 --- 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 index 2f744ea..dca2978 100644 --- 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 index 47c13ed..53b7d31 100644 --- 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 index bd209b1..c2c2122 100644 --- 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" }}