viur-ignite-css/less/image.less

Core of VIUR Ignite - a less framework

@charset "UTF-8";
/**
 * IMAGE
 *
 * The .image class makes it easy to set up background imagery.
 */

// #DOCUME: .image as background-image

.image {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"><path fill="#333" d="M-3-7h809v814H-3z"/><g fill="#FFF"><path d="M375.349 409.837l-6.161-194.618H344.98l-6.326 174.863zm88.796.146l-5.31-168.664h-26.469l-5.459 148.634z"/><path d="M490.245 382.836v47.634l-88.521-47.634v47.634L313.2 382.836v47.634l-87.005-47.634v150.533H578.01V430.47l-87.765-47.634zM336.657 515.209h-86.255v-49.157h86.255v49.157zm108.574 0h-86.258v-49.157h86.258v49.157zm108.572 0H467.54v-49.157h86.263v49.157z"/></g><path d="M226.542 562.279l2.211 8.499c.484 1.865.933 3.593 1.244 5.319h.104c.38-1.692.933-3.488 1.485-5.285l2.729-8.533h2.556l2.592 8.36c.621 2.004 1.105 3.766 1.485 5.458h.104c.276-1.692.726-3.454 1.278-5.423l2.384-8.396h3.005L242.33 579h-2.764l-2.557-7.98c-.587-1.865-1.071-3.523-1.485-5.492h-.069c-.414 2.004-.933 3.73-1.52 5.527L231.24 579h-2.764l-5.043-16.721h3.109zm38.997 8.223c0 6.184-4.283 8.878-8.325 8.878-4.525 0-8.015-3.316-8.015-8.602 0-5.597 3.662-8.879 8.291-8.879 4.802 0 8.049 3.49 8.049 8.603zm-13.266.173c0 3.661 2.107 6.425 5.079 6.425 2.901 0 5.078-2.729 5.078-6.494 0-2.833-1.417-6.426-5.01-6.426s-5.147 3.316-5.147 6.495zm17.097-3.179c0-1.969-.035-3.662-.139-5.217h2.66l.104 3.282h.139c.76-2.245 2.591-3.662 4.629-3.662.346 0 .587.035.863.104v2.867a4.565 4.565 0 0 0-1.036-.104c-2.142 0-3.662 1.623-4.076 3.903a8.553 8.553 0 0 0-.139 1.416V579h-3.005v-11.504zm14.438 2.453h.069c.414-.588 1.001-1.312 1.485-1.9l4.905-5.77h3.662l-6.46 6.875 7.357 9.846h-3.696l-5.769-8.015-1.555 1.728V579H280.8v-24.527h3.006v15.476zm23.9-12.367c.034 1.036-.726 1.865-1.935 1.865-1.071 0-1.831-.829-1.831-1.865 0-1.071.795-1.9 1.9-1.9 1.14 0 1.866.829 1.866 1.9zM304.322 579v-16.721h3.04V579h-3.04zm8.082-12.194c0-1.728-.035-3.144-.139-4.526h2.694l.173 2.764h.069c.829-1.589 2.764-3.144 5.527-3.144 2.314 0 5.907 1.382 5.907 7.117V579h-3.04v-9.639c0-2.694-1.002-4.939-3.869-4.939-2.004 0-3.558 1.416-4.076 3.109-.139.38-.207.897-.207 1.416V579h-3.04v-12.194zm26.491.932c0-2.143-.069-3.869-.138-5.459h2.729l.139 2.868h.069c1.243-2.038 3.212-3.248 5.941-3.248 4.042 0 7.082 3.421 7.082 8.499 0 6.011-3.662 8.981-7.601 8.981-2.211 0-4.146-.967-5.146-2.625h-.07v9.085h-3.006v-18.101zm3.005 4.456c0 .449.069.864.138 1.244.553 2.106 2.384 3.558 4.561 3.558 3.213 0 5.078-2.625 5.078-6.46 0-3.351-1.762-6.218-4.975-6.218-2.073 0-4.008 1.485-4.595 3.766-.104.38-.207.828-.207 1.243v2.867zm16.647-4.698c0-1.969-.035-3.662-.139-5.217h2.66l.104 3.282h.139c.76-2.245 2.591-3.662 4.629-3.662.346 0 .587.035.863.104v2.867a4.565 4.565 0 0 0-1.036-.104c-2.142 0-3.662 1.623-4.076 3.903a8.553 8.553 0 0 0-.139 1.416V579h-3.005v-11.504zm26.079 3.006c0 6.184-4.283 8.878-8.325 8.878-4.525 0-8.015-3.316-8.015-8.602 0-5.597 3.662-8.879 8.291-8.879 4.802 0 8.049 3.49 8.049 8.603zm-13.266.173c0 3.661 2.107 6.425 5.079 6.425 2.901 0 5.078-2.729 5.078-6.494 0-2.833-1.417-6.426-5.01-6.426s-5.147 3.316-5.147 6.495zm31.503-8.396a73.597 73.597 0 0 0-.139 4.595v9.708c0 3.834-.76 6.184-2.384 7.635-1.623 1.52-3.973 2.003-6.08 2.003-2.004 0-4.215-.483-5.562-1.382l.76-2.314c1.105.691 2.833 1.312 4.905 1.312 3.109 0 5.39-1.623 5.39-5.838v-1.865h-.069c-.933 1.555-2.729 2.798-5.32 2.798-4.146 0-7.116-3.523-7.116-8.152 0-5.666 3.696-8.879 7.531-8.879 2.901 0 4.491 1.521 5.216 2.902h.069l.139-2.522h2.66zm-3.144 6.599c0-.519-.034-.967-.172-1.382-.553-1.762-2.039-3.213-4.25-3.213-2.901 0-4.975 2.453-4.975 6.322 0 3.281 1.658 6.011 4.94 6.011 1.865 0 3.559-1.175 4.215-3.109.173-.518.241-1.105.241-1.623v-3.006zm7.838-1.382c0-1.969-.034-3.662-.138-5.217h2.66l.104 3.282h.138c.761-2.245 2.592-3.662 4.63-3.662.345 0 .587.035.863.104v2.867a4.57 4.57 0 0 0-1.036-.104c-2.143 0-3.662 1.623-4.076 3.903a8.553 8.553 0 0 0-.139 1.416V579h-3.006v-11.504zm12.642 3.696c.068 4.111 2.694 5.804 5.734 5.804 2.177 0 3.489-.38 4.629-.863l.519 2.176c-1.071.484-2.902 1.037-5.562 1.037-5.147 0-8.223-3.386-8.223-8.43 0-5.043 2.971-9.017 7.842-9.017 5.459 0 6.909 4.802 6.909 7.877 0 .622-.068 1.105-.104 1.416h-11.744zm8.912-2.175c.035-1.935-.794-4.94-4.214-4.94-3.075 0-4.422 2.833-4.664 4.94h8.878zm6.285 6.874c.898.588 2.487 1.209 4.007 1.209 2.211 0 3.248-1.105 3.248-2.487 0-1.45-.864-2.245-3.109-3.074-3.006-1.071-4.422-2.729-4.422-4.732 0-2.695 2.176-4.906 5.77-4.906 1.692 0 3.178.484 4.11 1.037l-.76 2.211a6.5 6.5 0 0 0-3.42-.968c-1.797 0-2.799 1.036-2.799 2.28 0 1.382 1.002 2.004 3.179 2.833 2.901 1.105 4.387 2.556 4.387 5.043 0 2.937-2.279 5.01-6.252 5.01-1.831 0-3.524-.449-4.698-1.141l.759-2.315zm13.676 0c.898.588 2.487 1.209 4.007 1.209 2.211 0 3.248-1.105 3.248-2.487 0-1.45-.864-2.245-3.109-3.074-3.006-1.071-4.422-2.729-4.422-4.732 0-2.695 2.177-4.906 5.769-4.906 1.693 0 3.179.484 4.111 1.037l-.76 2.211a6.5 6.5 0 0 0-3.42-.968c-1.797 0-2.799 1.036-2.799 2.28 0 1.382 1.002 2.004 3.179 2.833 2.901 1.105 4.388 2.556 4.388 5.043 0 2.937-2.28 5.01-6.253 5.01-1.831 0-3.524-.449-4.698-1.141l.759-2.315zm22.623 1.312c0-1.277.828-2.176 2.038-2.176 1.243 0 2.038.898 2.038 2.176 0 1.244-.795 2.177-2.038 2.177-1.21 0-2.073-.933-2.038-2.177zm11.503 0c0-1.277.864-2.176 2.073-2.176s2.004.898 2.038 2.176c0 1.244-.829 2.177-2.073 2.177-1.209 0-2.072-.933-2.038-2.177zm11.504 0c0-1.277.864-2.176 2.073-2.176s2.038.898 2.038 2.176c0 1.244-.795 2.177-2.073 2.177-1.209 0-2.038-.933-2.038-2.177z" fill="#FFF"/></svg>');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

// An image with parallax effect wrapper makes it easy to use screen wide images with the well known scroll effect.
.image-vParallax {
  background-attachment: fixed;
}

// A squared image. Set the width of the .image container.
.image-vSquare:before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%;
}

// Arrows (up and down) in base64:
.arrowsUpDownBg() {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137.14286 50" height="50" width="80"><path d="M0 16.429l30-34.286 30 34.286H0zm0 17.142l30 34.286 30-34.286H0z"/></svg>');
}

// avoid overflow by high resolution images
img {max-width: 100%;height: auto;}

// image shapes
.img-rounded {display: inline-block; border-radius: 6px;}
.img-circle {display: inline-block; border-radius: 100%;}
.img-thumbnail {
  display: inline-block;
  padding: .5em;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

// thumbnail
.thumbnail {
    display: block;
    padding: .5em;
    margin-bottom: 1em;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: .2s ease border;
    p {
      color: @textColor; // reset color, to avoid a link color if is wrapped by a link
    }
}
a:hover .thumbnail {
  border-color: @mainColor;
}
.thumbnail-img {}
.thumbnail-caption {
  margin-top: .5em;
  padding: 1em;
}


// => Image Media Queries

.media-mixin(@break) when (@break = @breakSmall) {
  .image-vParallax {
    background-attachment: scroll !important;
    background-size: cover;
  }
}

.media-mixin(@break) when (@break = @breakMedium) {
  .image-vParallax {
    background-attachment: scroll !important;
  }
}

.media-mixin(@break) when (@break = @breakLarge) {
}

.media-mixin(@break) when (@break = @break2x) {
  //  disable background-attachment: fixed; on iOS devices
  .image-vParallax {
    background-attachment: scroll !important;
    background-size: 100%;
  }
}

.media-mixin(@break) when (@break = @breakPrint) {
}