viur-ignite-css/less/util.less

Core of VIUR Ignite - a less framework

@charset "UTF-8";
/**
 * UTILITY STYLES
 */

// Clearfix
.clear {clear:both;}

.clearfix {
  *zoom: 1;
  &:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
  }
}

// Floats
.f-left {float: left !important;}
.f-right {float: right !important;}
.f-none {float: none !important;}

// Text Align
.txt-right {text-align: right;}
.txt-left {text-align: left;}
.txt-center {text-align: center;}
.txt-justify {text-align: justify;}
.txt-nowrap {white-space: nowrap;}

// Text Transform
.txt-lowercase {text-transform: lowercase;}
.txt-uppercase {text-transform: uppercase;}
.txt-capitalize {text-transform: capitalize;}

// show and hiding
.show {display: block !important;}
.hidden {display: none !important;}
.visible {visibility: visible;}
.invisible {visibility: hidden;}

// Cursor => Pointer
.pointer {cursor: pointer;}

// Shadows
.shd {box-shadow: @defaultShadow;}
.txt-shd {text-shadow: @defaultShadow;}

// center
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.centerX {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.centerY {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

// responsive formats 16:9 / 4:3
.responsive-16by9 {width: 100%; padding-bottom: 56.25%;}
.responsive-4by3 {width: 100%; padding-bottom: 75%;}

// transparent background
.is-transparent {background: transparent !important;}


// => Utils 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) {
}