viur-ignite-css/less/key.less

Core of VIUR Ignite - a less framework

@charset "UTF-8";
/**
 * KEY ELEMENT
 *
 * The .key element is a stripped down replica of bulmas .hero element written in less.
 * Use it to present key visuals, claims or slogans.
 */

// #DOCUME: complete .key element

.key {
  align-items: stretch;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.key-vFull {min-height: 100vh;}

.key-up,
.key-down {
  flex-shrink: 0;
  & .barGroup-vLeft:not(.barGroup-vNav) :first-child {
    margin-left: 10px;
  }
}

.key-content {
  flex: 1;
  padding: 40px 20px;
  .key-vMedium & {
    padding-bottom: 120px;
    padding-top: 120px;
  }
  .key-vLarge & {
    padding-bottom: 240px;
    padding-top: 240px;
  }
  .key-vFull & {
    display: flex;
    align-items: center;
    & > .container {flex:1;}
  }
}


// => Key Media Queries

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

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

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

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

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