File: /var/www/tana/frontend/src/assets/style/pages/_services.scss
// Services map
//
// This map shows countries where service is provided. Country names are clickable and it opens a subpage with details for that country. Clickable rectangles are rendered using svg `<rect>`.
//
// Markup:
// <div class="services-map__container" id="servicesMapContainer">
// <div class="container">
// <div class="row">
// <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-md-3 col-lg-2 col-sm-offset-0">
// <a href="./" class="tana-logo-alternate">
// <img class="img-responsive" src="./../build/assets/images/tana-logo-alternate.png" alt="Tana logotip">
// </a>
// </div>
// </div>
// </div>
// <div class="visible-xs services-map__map-mobile">
// <img src="./assets/images/services-map-mobile.png" alt="Karta regije" class="img-responsive">
// </div>
// <div class="container">
// <div class="row hidden-xs">
// <div class="col-xs-12">
// <figure id="servicesMap" class="services-map__map-desktop">
// <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2240 1263"
// preserveAspectRatio="xMinYMin meet">
// <image width="2220" height="1263" xlink:href="./../build/assets/images/services-map.png">
// </image>
// <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Slovenia" xlink:href="#slovenia">
// <text class="services-map__link-text" x="385" y="460">Slovenia</text>
// </a>
// <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Croatia" xlink:href="#croatia">
// <text class="services-map__link-text" x="420" y="565">Croatia</text>
// </a>
// <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Bosnia-Herzegovina" xlink:href="#bosnia-herzegovina">
// <text class="services-map__link-text" x="0" y="670">Bosnia-Herzegovina</text>
// </a>
// <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Montenegro" xlink:href="#montenegro">
// <text class="services-map__link-text" x="250" y="780">Montenegro</text>
// </a>
// <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Serbia" xlink:href="#serbia">
// <text class="services-map__link-text" x="1880" y="625">Serbia</text>
// </a>
// <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Kosovo" xlink:href="#kosovo">
// <text class="services-map__link-text" x="1880" y="730">Kosovo</text>
// </a>
// <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Macedonia" xlink:href="#macedonia">
// <text class="services-map__link-text" x="1880" y="840">Macedonia</text>
// </a>
// <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Albania" xlink:href="#albania">
// <text class="services-map__link-text" x="1880" y="940">Albania</text>
// </a>
// </svg>
// </figure>
// </div>
// </div>
// <div class="row visible-xs">
// <div class="col-xs-12">
// <ul class="list list--unstyled services-map__list">
// <li class="services-map__list-item">
// <a href="#slovenia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Slovenia">Slovenia</a>
// </li>
// <li class="services-map__list-item" data-name="Croatia">
// <a href="#croatia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Croatia">Croatia</a>
// </li>
// <li class="services-map__list-item" data-name="Bosnia-Herzegovina">
// <a href="#bosnia-herzegovina" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Bosnia-Herzegovina">Bosnia-Herzegovina</a>
// </li>
// <li class="services-map__list-item" data-name="Montenegro">
// <a href="#montenegro" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Montenegro">Montenegro</a>
// </li>
// <li class="services-map__list-item" data-name="Serbia">
// <a href="#serbia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Serbia">Serbia</a>
// </li>
// <li class="services-map__list-item" data-name="Kosovo">
// <a href="#kosovo" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Kosovo">Kosovo</a>
// </li>
// <li class="services-map__list-item" data-name="Macedonia">
// <a href="#macedonia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Macedonia">Macedonia</a>
// </li>
// <li class="services-map__list-item" data-name="Albania">
// <a href="#albania" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Albania">Albania</a>
// </li>
// </ul>
// </div>
// </div>
// </div>
// </div>
//
// Styleguide Pages.services.services-map
.services-map {
&__link {
cursor: default;
&-text {
fill: $primary-bg-color;
font-size: rem(64);
font-weight: 700;
transition: $transition-time fill;
// &:hover {
// fill: $secondary-accent-color;
// }
}
}
&__map-desktop {
height: calc(100vh - 110px); // for IE
max-width: 1100px;
margin: 0 auto;
@media screen and (min-width: 1200px) and (min-height: 715px) {
transform: translateY(-20vh);
}
@media screen and (min-width: 1200px) and (min-height: 750px) {
transform: translateY(-17vh);
}
@media screen and (min-width: 1200px) and (min-height: 810px) {
transform: translateY(-12vh);
}
@media screen and (min-width: 1200px) and (min-height: 880px) {
transform: translateY(-8vh);
}
@media screen and (min-width: 1200px) and (min-height: 900px) {
transform: translateY(-5vh);
}
svg {
overflow: visible;
}
}
&__map-mobile {
transform: translateY(-15vh);
max-height: 50vh;
}
&__list {
margin-bottom: 30px;
&-item {
font-size: rem(21);
font-weight: 700;
color: $secondary-accent-color;
padding: .375rem 0;
}
}
}
// Service Boxes
//
// Boxes used to describe services. Each box will take available width. This example has five of them in a row because of the design.
//
// Markup:
// <div class="services">
// <div class="container">
// <div class="row">
// <div class="col-xs-12 col-sm-1-5">
// <div class="service">
// <h3 class="service__title">Patents</h3>
// <p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
// </div>
// </div>
// <div class="col-xs-12 col-sm-1-5">
// <div class="service">
// <h3 class="service__title">Trade marks</h3>
// <p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
// </div>
// </div>
// <div class="col-xs-12 col-sm-1-5">
// <div class="service">
// <h3 class="service__title">Designs</h3>
// <p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
// </div>
// </div>
// <div class="col-xs-12 col-sm-1-5">
// <div class="service">
// <h3 class="service__title">Copyright</h3>
// <p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
// </div>
// </div>
// <div class="col-xs-12 col-sm-1-5">
// <div class="service">
// <h3 class="service__title">Litigation</h3>
// <p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
// </div>
// </div>
// </div>
// </div>
// </div>
//
// Styleguide Pages.services.service-box
.service {
$self: &;
display: block;
border-top: 3px solid $secondary-accent-color;
padding-top: 10px;
margin-bottom: 30px;
cursor: pointer;
&__title {
font-size: rem(18);
font-weight: 700;
color: $primary-bg-color;
text-transform: uppercase;
letter-spacing: 1px;
transition: $transition-time color;
}
&__text {
font-size: rem(16);
line-height: 1.15;
color: $primary-bg-color;
transition: $transition-time color;
}
&:hover {
#{$self}__title,
#{$self}__text {
color: $secondary-accent-color;
}
}
}
.services {
@media screen and (min-width: 1200px) and (min-height: 715px) {
position: fixed;
width: 100%;
bottom: 0;
}
}