pelican-themes/syte/static/less/mixins.less

/* mixins.less 
 * CSS Reset and base mixinis for LESS based development. 
 * Inspired by bootstrap.less initially created by Mark Dotto
 * https://github.com/markdotto/preboot.less
 **/

// Clearfix for clearing floats 
.clearfix() {
  zoom: 1;
  &:before, &:after {display: table; content: "";}
  &:after {clear: both;}
}

// Center-align a block level element
.center-block() {
  display: block;
  margin: 0 auto;
}

// Sizing Shortcuts
.size(@width: 5px, @height: 5px) {
  height: @height; width: @width;
}

.square(@size: 5px) {
  .size(@size, @size);
}

// Fonts
.font(@weight: normal, @size: 14px, @lineHeight: 20px) {
  font-size: @size;
  font-weight: @weight;
  line-height: @lineHeight;
}

.font-sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  .font(@weight, @size, @lineHeight);
}

.font-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
  font-family: "Georgia", Times New Roman, Times, serif;
  .font(@weight, @size, @lineHeight);
}

.font-monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
  font-family: "Monaco", Courier New, monospace;
  .font(@weight, @size, @lineHeight);
}

// Border Radius
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// Box Shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}

.reset-box-shadow() {
  -webkit-box-shadow: 0 0 0;
  -moz-box-shadow: 0 0 0;
  box-shadow: 0 0 0;
}

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}

.rotate(@rotation) {
  -webkit-transform: rotate(@rotation);
  -moz-transform: rotate(@rotation);
  -ms-transform: rotate(@rotation);
  -o-transform: rotate(@rotation);
  transform: rotate(@rotation);
}


// Background Clipping
.background-clip(@clip) {
  -webkit-background-clip: @clip;
  -moz-background-clip: @clip;
  background-clip: @clip;
}

// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) {
  -webkit-column-count: @columnCount;
  -webkit-column-gap: @columnGap;
  -moz-column-count: @columnCount;
  -moz-column-gap: @columnGap;
  column-count: @columnCount;
  column-gap: @columnGap;
}

// Add a transparency value to a background 
.alpha-background(@color: @white, @alpha: 1) {
  background-color: @color;
  background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

// Add a transparency value to a border 
.alpha-border(@color: @white, @alpha: 1) {
  border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
  background-clip: padding-box;
}

// Gradients
.gradient(@startColor: #555, @endColor: #333) {
  background-color: @endColor;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
  background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
  background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
  background-image: linear-gradient(top, @startColor, @endColor); // The standard
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}

.horizontal-gradient(@startColor: #555, @endColor: #333) {
  background-color: @endColor;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
  background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
  background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
  background-image: linear-gradient(left, @startColor, @endColor); // Le standard
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
}

.directional-gradient(@startColor: #555, @endColor: #333, @deg: 45deg) {
  background-color: @endColor;
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
  background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
  background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
  background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
}

.vertical-gradient-3(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
  background-color: @endColor;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
  background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
  background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
  background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
  background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
  background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
}

.reset-ie-gradient() {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}

// Opacity
.opacity(@opacity: 100) {
  filter: e(%("alpha(opacity=%d)", @opacity));
  -khtml-opacity: @opacity / 100;
  -moz-opacity: @opacity / 100;
  opacity: @opacity / 100;
}

// Word spacing wrap
.break-word() {
  white-space: pre-wrap;
  word-wrap: break-word;
}

// PATTERN ANIMATIONS
// ------------------
.fade {
  .transition(opacity .15s linear);
  opacity: 0;
  &.in {
    opacity: 1;
  }
}

.user-select(@select) {
  -webkit-user-select: @select;
  -khtml-user-select: @select;
  -moz-user-select: @select;
  -o-user-select: @select;
  user-select: @select;
}

//Arrows
.arrow-top(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) {
  bottom: 0;
  left: @arrow-location;
  margin-left: -@arrow-size;
  border-left: @arrow-size solid transparent;
  border-right: @arrow-size solid transparent;
  border-top: @arrow-size solid @arrow-color;
  position: absolute;
  width: 0;
  height: 0;
}

.arrow-right(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) {
  top: @arrow-location;
  left: 0;
  margin-top: -@arrow-size;
  border-top: @arrow-size solid transparent;
  border-bottom: @arrow-size solid transparent;
  border-right: @arrow-size solid @arrow-color;
  position: absolute;
  width: 0;
  height: 0;
}

.arrow-bottom(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) {
  top: 0;
  left: @arrow-location;
  margin-left: -@arrow-size;
  border-left: @arrow-size solid transparent;
  border-right: @arrow-size solid transparent;
  border-bottom: @arrow-size solid @arrow-color;
  position: absolute;
  width: 0;
  height: 0;
}

.arrow-left(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) {
  top: @arrow-location;
  right: 0;
  margin-top: -@arrow-size;
  border-top: @arrow-size solid transparent;
  border-bottom: @arrow-size solid transparent;
  border-left: @arrow-size solid @arrow-color;
  position: absolute;
  width: 0;
  height: 0;
}