/*
$page: string
$gradient: boolean
$language: string: {'', en-CA', 'fr-CA'}
$version: integer
*/
@mixin hero-banner ($page, $gradient, $resolution, $language, $version) {
@if ($language != '') {
html[lang = "#{$language}"] {
@include hero-banner-nest($page, $gradient, $resolution, $language, $version); }
}
@if ($language == '') {
@include hero-banner-nest($page, $gradient, $resolution, '', $version);
}
}
/*
$page: string
$gradient: boolean
$language: string: {'', en-CA', 'fr-CA'}
$version: integer
*/
@mixin hero-banner-nest($page, $gradient, $resolution, $language, $version) {
$gradient-result: '';
@if ($gradient != '') {
$gradient-result: $gradient;
}
@if ($language != '') {
$language: $language + '/';
}
#eca .page-#{$page} .banner {
background-image: #{$gradient-result} url(#{$hero-path}#{$language}#{$page}-phone-1x.jpg?v=#{$version});}
@if ($resolution != '') {
@include hero-banner-with-res-media($page, $language, $gradient, $min-resolution, $breakpoint-not-tablet, 'phone-2x', $version);
}
@include hero-banner-with-res-media($page, $language, $gradient, '', $breakpoint-tablet-view, 'tablet-1x', $version);
@if ($resolution != '') {
@include hero-banner-with-res-media($page, $language, $gradient, $min-resolution, $breakpoint-tablet-view, 'tablet-2x', $version);
}
@include hero-banner-with-res-media($page, $language, $gradient, '', $breakpoint-small-desktop-view, 'desktop-1x', $version);
@if ($resolution != '') {
@include hero-banner-with-res-media($page, $language, $gradient, $min-resolution, $breakpoint-small-desktop-view, 'desktop-2x', $version);
}
@include hero-banner-with-res-media($page, $language, $gradient, '', $breakpoint-large-desktop-view, 'desktop-hd-1x', $version);
@if ($resolution != '') {
@include hero-banner-with-res-media($page, $language, $gradient, $min-resolution, $breakpoint-large-desktop-view, 'desktop-hd-2x', $version);
} }
/*
$page: string
$gradient: boolean
$language: string: {'', en-CA', 'fr-CA'}
$version: integer
$media: string : {$breakpoint-tablet-view, $breakpoint-small-desktop-view, $breakpoint-large-desktop-view}
$image-ending: {'tablet', 'phone', 'desktop', 'desktop-hd'}
*/
//@mixin hero-banner-with-media($page, $language, $gradient, $media, $image-ending, $version) {
// $gradient-result: '';
// @if ($gradient == 1) {
// $gradient-result: 'linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 53%),';
// }
// @media screen and #{$media} {
// #eca .page-#{$page} .banner {
// background-image: #{$gradient-result} url(#{$hero-path}#{$language}#{$page}-#{$image-ending}.jpg?v=#{$version});
// }
// }
//}
/*
$page: string
$gradient: boolean
$resolution: string
$language: string: {'', en-CA', 'fr-CA'}
$version: integer
$media: string : {$breakpoint-tablet-view, $breakpoint-small-desktop-view, $breakpoint-large-desktop-view}
$image-ending: {'tablet', 'phone', 'desktop', 'desktop-hd'}
*/
@mixin hero-banner-with-res-media($page, $language, $gradient, $resolution, $media, $image-ending, $version) {
$gradient-result: '';
@if ($gradient != '') {
$gradient-result: $gradient;
}
@if ($resolution!= '') {
@media screen and #{$resolution} and #{$media} {
#eca .page-#{$page} .banner {
background-image: #{$gradient-result} url(#{$hero-path}#{$language}#{$page}-#{$image-ending}.jpg?v=#{$version});
}
}
} @else {
@media screen and #{$media} {
#eca .page-#{$page} .banner {
background-image: #{$gradient-result} url(#{$hero-path}#{$language}#{$page}-#{$image-ending}.jpg?v=#{$version});
}
}
}
}
/*
$page-name: string
$language: string: {'', en-CA', 'fr-CA'}
$version: integer
*/
@mixin half-panel-banner($page-name, $resolution, $language, $version) {
@if ($language != '') {
html[lang="#{$language}"] {
@include half-panel-banner-nest($page-name, $resolution, $language, $version);
}
}
@if ($language == '') {
@include half-panel-banner-nest($page-name, $resolution, $language, $version);
}
}
@mixin half-panel-banner-nest($page-name, $resolution, $language, $version) {
@if ($language != '') {
$language: $language + '/';
}
/* phone */
@media screen and #{$breakpoint-mobile-xs} {
#eca .page-#{$page-name} .half-panel:before {
background-image: url(#{$hero-path}#{$language}#{$page-name}-phone-1x.jpg?v=#{$version}); }
}
@if ($resolution != '') {
@media screen and #{$min-resolution} and #{$breakpoint-mobile-xs} {
#eca .page-#{$page-name} .half-panel:before {
background-image: url(#{$hero-path}#{$language}#{$page-name}-phone-2x.jpg?v=#{$version}); }
}
}
/* tablet */
@media screen and #{$breakpoint-tablet} {
#eca .page-#{$page-name} .half-panel:before {
background-image: url(#{$hero-path}#{$language}#{$page-name}-tablet-1x.jpg?v=#{$version}); }
}
@if ($resolution != '') {
@media screen and #{$min-resolution} and #{$breakpoint-tablet} {
#eca .page-#{$page-name} .half-panel:before {
background-image: url(#{$hero-path}#{$language}#{$page-name}-tablet-2x.jpg?v=#{$version}); }
}
}
/* desktop */
@media screen and #{$breakpoint-small-desktop-view} {
#eca .page-#{$page-name} .half-panel {
background-image: url(#{$hero-path}#{$language}#{$page-name}-desktop-1x.jpg?v=#{$version}); }
}
@if ($resolution != '') {
@media screen and #{$min-resolution} and #{$breakpoint-small-desktop-view} {
#eca .page-#{$page-name} .half-panel {
background-image: url(#{$hero-path}#{$language}#{$page-name}-desktop-2x.jpg?v=#{$version}); }
}
}
/* high-resolution desktop */
@media screen and #{$breakpoint-large-desktop-view} {
#eca .page-#{$page-name} .half-panel {
background-image: url(#{$hero-path}#{$language}#{$page-name}-desktop-hd-1x.jpg?v=#{$version}); }
}
@if ($resolution != '') {
@media screen and #{$min-resolution} and #{$breakpoint-large-desktop-view} {
#eca .page-#{$page-name} .half-panel {
background-image: url(#{$hero-path}#{$language}#{$page-name}-desktop-hd-2x.jpg?v=#{$version}); }
}
}
}
$hero-path: '/_Insurance/images/hero-banners/';
$gradient-black: 'linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 53%),';
$gradient-white: 'linear-gradient(to right, rgba(255,255,255,0.8) 0, transparent 80%),';
/*
$hero-page-names: 'about', 'claims', 'tfc-contest', 'careers', 'calculator', 'contact', 'crm', 'complaints', 'news', 'sponsorship', 'ins-auto', 'ins-home', 'ins-landlord', 'ins-tenant', 'ins-condo', 'blog', 'geo-targeting';
*/
$hero-page-name-gradient-pairs: ('about': $gradient-white,
'claims': $gradient-white,
'tfc-contest': $gradient-black,
'careers': $gradient-white,
'calculator': $gradient-white,
'contact': $gradient-white,
'crm': $gradient-white,
'complaints': $gradient-white, /*apply the new gradient & copy to this image as-is*/
'news': $gradient-black,
'sponsorship': $gradient-black,
'ins-auto': $gradient-white,
'ins-home': $gradient-white,
'ins-landlord': $gradient-white,
'ins-tenant': $gradient-white,
'ins-condo': $gradient-white,
'blog': $gradient-white,
'geo-targeting': $gradient-black,
'nhl-contest-2018': $gradient-black,
'home': $gradient-white
);
$hero-image-version: '11';
/*
We have only single home image now. Keeping this block for reference purposes
@include hero-banner ('home', 1, $min-resolution, 'en-CA', $hero-image-version);
@include hero-banner ('home', 1, $min-resolution, 'fr-CA', $hero-image-version);
@include half-panel-banner('home', $min-resolution, 'en-CA', $hero-image-version);
@include half-panel-banner('home', $min-resolution, 'fr-CA', $hero-image-version);
*/
/*
@include hero-banner ('nhl-contest-2018', 0, '', '', $hero-image-version);
*/
/*
@each $page-name in $hero-page-names {
@include hero-banner($page-name, 1, '', '', $hero-image-version);
@include half-panel-banner($page-name, '', '', $hero-image-version);
}
*/
@each $page-name, $gradient in $hero-page-name-gradient-pairs {
@include hero-banner($page-name, $gradient, '', '', $hero-image-version);
@include half-panel-banner($page-name, '', '', $hero-image-version);
}
