Less Mixins

mixins.less

//noinspection CssUnknownProperty
.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background: @color;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, @start), color-stop(1, @stop));
  background: -ms-linear-gradient(bottom, @start, @stop);
  background: -moz-linear-gradient(center bottom, @start 0%, @stop 100%);
  background: -o-linear-gradient(@stop, @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}

.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
  border-top: solid 1px @top-color;
  border-left: solid 1px @left-color;
  border-right: solid 1px @right-color;
  border-bottom: solid 1px @bottom-color;
}

.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}

.rounded(@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;

  .background-clip(padding-box);
}

.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
  -webkit-border-top-right-radius: @topright;
  -webkit-border-bottom-right-radius: @bottomright;
  -webkit-border-bottom-left-radius: @bottomleft;
  -webkit-border-top-left-radius: @topleft;
  -moz-border-radius-topright: @topright;
  -moz-border-radius-bottomright: @bottomright;
  -moz-border-radius-bottomleft: @bottomleft;
  -moz-border-radius-topleft: @topleft;
  border-top-right-radius: @topright;
  border-bottom-right-radius: @bottomright;
  border-bottom-left-radius: @bottomleft;
  border-top-left-radius: @topleft;

  .background-clip(padding-box);
}

.border-radius-unico(@margin) {
  -webkit-border-radius: @margin;
  -moz-border-radius: @margin;
  border-radius: @margin;
  .background-clip(padding-box);
}

//noinspection CssUnknownProperty
.opacity(@opacity: 0.5) {
  -moz-opacity: @opacity;
  -khtml-opacity: @opacity;
  -webkit-opacity: @opacity;
  opacity: @opacity;
  @opperc: @opacity * 100;
  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
  filter: ~"alpha(opacity=@{opperc})";
}

//noinspection CssUnknownProperty
.transition-duration(@duration: 0.2s) {
  -moz-transition-duration: @duration;
  -webkit-transition-duration: @duration;
  -o-transition-duration: @duration;
  transition-duration: @duration;
}

//noinspection CssUnknownProperty
.transform(...) {
  -webkit-transform: @arguments;
  -moz-transform: @arguments;
  -o-transform: @arguments;
  -ms-transform: @arguments;
  transform: @arguments;
}

.rotation(@deg:5deg) {
  .transform(rotate(@deg));
}

.scale(@ratio:1.5) {
  .transform(scale(@ratio));
}

//noinspection CssUnknownProperty
.transition_pronto(@prop: all, @duration:0.2s, @ease:ease-out) {
  -webkit-transition: @prop @duration @ease;
  -moz-transition: @prop @duration @ease;
  -o-transition: @prop @duration @ease;
  transition: @prop @duration @ease;
}

//noinspection CssUnknownProperty
.transition_pronto2(@prop1: all, @prop2: all, @duration:0.2s, @ease:ease-out) {
  -webkit-transition: @prop1 @duration @ease, @prop2 @duration @ease;
  -moz-transition: @prop1 @duration @ease, @prop2 @duration @ease;
  -o-transition: @prop1 @duration @ease, @prop2 @duration @ease;
  transition: @prop1 @duration @ease, @prop2 @duration @ease;
}

//noinspection CssUnknownProperty
.transition_pronto3(@prop1: all, @prop2: all, @prop3: all, @duration:0.2s, @ease:ease-out) {
  -webkit-transition: @prop1 @duration @ease, @prop2 @duration @ease, @prop3 @duration @ease;
  -moz-transition: @prop1 @duration @ease, @prop2 @duration @ease, @prop3 @duration @ease;
  -o-transition: @prop1 @duration @ease, @prop2 @duration @ease, @prop3 @duration @ease;
  transition: @prop1 @duration @ease, @prop2 @duration @ease, @prop3 @duration @ease;
}

//noinspection CssUnknownProperty
.transition(@t: all .3s linear) {
  -webkit-transition: @t;
  -moz-transition: @t;
  -o-transition: @t;
  transition: @t;
}

//noinspection CssUnknownProperty
.transition(@t, @t2) {
  -webkit-transition: @t, @t2;
  -moz-transition: @t, @t2;
  -o-transition: @t, @t2;
  transition: @t, @t2;
}

//noinspection CssUnknownProperty
.transition(@t, @t2, @t3) {
  -webkit-transition: @t, @t2, @t3;
  -moz-transition: @t, @t2, @t3;
  -o-transition: @t, @t2, @t3;
  transition: @t, @t2, @t3;
}

//noinspection CssUnknownProperty
.transition(@t, @t2, @t3, @t4) {
  -webkit-transition: @t, @t2, @t3, @t4;
  -moz-transition: @t, @t2, @t3, @t4;
  -o-transition: @t, @t2, @t3, @t4;
  transition: @t, @t2, @t3, @t4;
}

.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}

.box-shadow(@b1) {
  -webkit-box-shadow: @b1;
  -moz-box-shadow: @b1;
  box-shadow: @b1;
}

.box-shadow(@b1, @b2) {
  -webkit-box-shadow: @b1, @b2;
  -moz-box-shadow: @b1, @b2;
  box-shadow: @b1, @b2;
}

.box-shadow(@b1, @b2, @b3) {
  -webkit-box-shadow: @b1, @b2, @b3;
  -moz-box-shadow: @b1, @b2, @b3;
  box-shadow: @b1, @b2, @b3;
}

.box-shadow(@b1, @b2, @b3, @b4) {
  -webkit-box-shadow: @b1, @b2, @b3, @b4;
  -moz-box-shadow: @b1, @b2, @b3, @b4;
  box-shadow: @b1, @b2, @b3, @b4;
}

.box-shadow(@b1, @b2, @b3, @b4, @b5) {
  -webkit-box-shadow: @b1, @b2, @b3, @b4, @b5;
  -moz-box-shadow: @b1, @b2, @b3, @b4, @b5;
  box-shadow: @b1, @b2, @b3, @b4, @b5;
}

.box-shadow(@b1, @b2, @b3, @b4, @b5, @b6) {
  -webkit-box-shadow: @b1, @b2, @b3, @b4, @b5, @b6;
  -moz-box-shadow: @b1, @b2, @b3, @b4, @b5, @b6;
  box-shadow: @b1, @b2, @b3, @b4, @b5, @b6;
}

.box-shadow(@b1, @b2, @b3, @b4, @b5, @b6, @b7) {
  -webkit-box-shadow: @b1, @b2, @b3, @b4, @b5, @b6, @b7;
  -moz-box-shadow: @b1, @b2, @b3, @b4, @b5, @b6, @b7;
  box-shadow: @b1, @b2, @b3, @b4, @b5, @b6, @b7;
}

.box-shadow(@b1, @b2, @b3, @b4, @b5, @b6, @b7, @b8) {
  -webkit-box-shadow: @b1, @b2, @b3, @b4, @b5, @b6, @b7, @b8;
  -moz-box-shadow: @b1, @b2, @b3, @b4, @b5, @b6, @b7, @b8;
  box-shadow: @b1, @b2, @b3, @b4, @b5, @b6, @b7, @b8;
}

.box-sizing(@sizing: border-box) {
  -ms-box-sizing: @sizing;
  -moz-box-sizing: @sizing;
  -webkit-box-sizing: @sizing;
  box-sizing: @sizing;
}

//noinspection CssUnknownProperty
.user-select(@argument: none) {
  -webkit-user-select: @argument;
  -moz-user-select: @argument;
  -ms-user-select: @argument;
  user-select: @argument;
}

.translate(@x:0, @y:0) {
  .transform(translate(@x, @y));
}

.background-clip(@argument: padding-box) {
  -moz-background-clip: @argument;
  -webkit-background-clip: @argument;
  background-clip: @argument;
}

//noinspection CssInvalidPseudoSelector
.scrollbar(@fundo: #CCC, @barra: #CCC, @tamanho: 9px) {
  &::-webkit-scrollbar {
    & {
      width: @tamanho;
      height: @tamanho;
      display: none;
    }

    &-button {
      &:start,
      &:end {
        &:increment,
        &:decrement {
          width: 0px;
          height: 0px;
          display: none;
        }
      }
    }
  }

  &::-webkit-scrollbar {
    &,
    &-button:start:decrement,
    &-button:end:increment {
      display: block;
    }
  }

  &::-webkit-scrollbar-track {
    background: @fundo;

    &:disabled {
      display: none;
    }
  }

  &::-webkit-scrollbar-thumb {
    background: @barra;
    -webkit-transition: background-color 2.5s linear;
  }

  &:hover::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-thumb:hover {
    background: darken(@barra, 1%);
  }
}

mixins2.less

import

(
)
{
  @import "cores";
  @import "mixins";
}

.bloco(@largura: auto, @altura: @largura, @display: block) {
  .bloco_conteudo(@largura, @altura, @display);

  text-indent: @largura * 2;
  white-space: nowrap;
  text-overflow: clip !important;
}

.bloco_conteudo(@largura: auto, @altura: @largura, @display: block) {
  width: @largura;
  height: @altura;

  display: @display;
  .limitar;
}

.bloco_conteudo(@largura: auto, @altura: @largura, @display: block) when (@largura = auto) {
  display: @display;

  .limitar;
}

.temp(@cor: #F00, @opacidade: 50%) {
  background-color: fade(@cor, @opacidade) !important;
}

.temp_hover(@cor: #F00, @opacidade: 50%) {
  .temp(@cor, @opacidade);
  .transition(background-color);

  &:hover {
    .temp(@cor, @opacidade + 20%);
  }
}

.limitar() {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nw() {
  white-space: nowrap;
}

.limitar2() {
  .limitar;
  .nw;
}

.final() {
  background: #FFF;
}

.clear {
  clear: both;

  &:before,
  &:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }
  &:after {
    clear: both;
  }
}

.ul_limpo() {
  list-style: none;

  &,
  & li {
    padding: 0;
    margin: 0;
  }
}

.borda_sombra(@cor: #6a6250, @fundo: #FFF) {
  .border-radius(5px);
  .box-shadow(inset 0 0 20px fade(@cor, 10%), 0 0 10px fade(@cor, 30%));

  border: 1px solid lighten(@cor, 40%);
  background: @fundo;
}

.borda_sombra2(@medida: 0 0 0, @cor:#6a6250, @fundo: #FFF) {
  -webkit-box-shadow: @medida @cor;
  -moz-box-shadow: @medida @cor;
  box-shadow: @medida @cor;
  border: 1px solid lighten(@cor, 40%);
  background: @fundo;
}

.transition2 (@elemento: background, @elemento2: color, @tempo: .4s, @easing: ease-in-out) {
  -webkit-transition: @elemento @tempo @easing, @elemento2 @tempo @easing;
  -moz-transition: @elemento @tempo @easing, @elemento2 @tempo @easing;
  -ms-transition: @elemento @tempo @easing, @elemento2 @tempo @easing;
  -o-transition: @elemento @tempo @easing, @elemento2 @tempo @easing;
  transition: @elemento @tempo @easing, @elemento2 @tempo @easing;
}

.transition3 (@elemento: background, @elemento2: color, @elemento3: color, @tempo: .4s, @easing: ease-in-out) {
  -webkit-transition: @elemento @tempo @easing, @elemento2 @tempo @easing, @elemento3 @tempo @easing;
  -moz-transition: @elemento @tempo @easing, @elemento2 @tempo @easing, @elemento3 @tempo @easing;
  -ms-transition: @elemento @tempo @easing, @elemento2 @tempo @easing, @elemento3 @tempo @easing;
  -o-transition: @elemento @tempo @easing, @elemento2 @tempo @easing, @elemento3 @tempo @easing;
  transition: @elemento @tempo @easing, @elemento2 @tempo @easing, @elemento3 @tempo @easing;
}

mixins3.less

import

(
)
{
  @import "cores";
  @import "mixins";
  @import "mixins2";
}

.link_transicao_cor(@cor1, @cor2, @tempo:.3s) {
  color: @cor1;
  text-decoration: none;

  .transition_pronto(color, @tempo);

  &:hover,
  &:focus {
    color: @cor2;
  }
}

.link_transicao_cor_escuro(@cor1, @escurecer: 20%, @tempo:.3s) {
  .link_transicao_cor(@cor1, darken(@cor1, @escurecer));
}

.link_inverte_com_fundo(@fonte, @fundo, @tempo: .3s) {
  color: @fonte;
  background: @fundo;
  text-decoration: none;

  .transition(color @tempo ease-in-out, background-color @tempo ease-in-out);

  &:hover,
  &:focus {
    color: @fundo;
    background: @fonte;
  }
}

.sombra() {
  .box-shadow(0 0 7px fade(#000, 13%));
}

.degrade {
  .vertical(@cor1: #FFF, @cor2: #000) {
    background: mix(@cor1, @cor2);

    .degrade .vertical_transparente(@cor1, @cor2);
  }

  .vertical_transparente(@cor1: #FFF, @cor2: #000) {
    .cssgradients & {
      background-image: -ms-linear-gradient(top, @cor1 0%, @cor2 100%);
      background-image: -moz-linear-gradient(top, @cor1 0%, @cor2 100%);
      background-image: -o-linear-gradient(top, @cor1 0%, @cor2 100%);
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, @cor1), color-stop(1, @cor2));
      background-image: -webkit-linear-gradient(top, @cor1 0%, @cor2 100%);
      background-image: linear-gradient(to bottom, @cor1 0%, @cor2 100%);
    }
  }

  .horizontal(@cor1: #FFF, @cor2: #000) {
    background: mix(@cor1, @cor2);

    .cssgradients & {
      background-image: -ms-linear-gradient(left, @cor1 0%, @cor2 100%);
      background-image: -moz-linear-gradient(left, @cor1 0%, @cor2 100%);
      background-image: -o-linear-gradient(left, @cor1 0%, @cor2 100%);
      background-image: -webkit-gradient(linear, left top, right top, color-stop(0, @cor1), color-stop(1, @cor2));
      background-image: -webkit-linear-gradient(left, @cor1 0%, @cor2 100%);
      background-image: linear-gradient(to right, @cor1 0%, @cor2 100%);
    }
  }
}

.selection() {
  background: fade(#00368a, 25%) !important;
  //  color: #FFF !important;
}

::selection {
  .selection;
}

::-moz-selection {
  .selection;
}

.fundo {
  background-color: @fundo;
}

a {
  .link_transicao_cor_escuro(@principal, 15%);
}

.btn,
a {
  outline-color: @principal !important;
}

.btn {
  .rounded(6px);

  @default-1: #ffffff;
  @default-2: #d7d7d7;
  @default-3: #bebebe;

  @primary-1: #0c4ebc;
  @primary-2: #01378d;
  @primary-3: #012d76;

  @success-1: #0cbc22;
  @success-2: #018d11;
  @success-3: #017610;

  @danger-1: #bc0c13;
  @danger-2: #8d0108;
  @danger-3: #760106;

  outline: none !important;
  font-size: 15px;
  padding: 6px 20px;

  &:active {
    .box-shadow(inset 0 0 8px fade(#000, 60%));

    color: fade(#FFF, 85%);
  }

  .cor(@cor-1, @cor-2, @cor-3) {

    .degrade .vertical(@cor-1, @cor-2);

    border: 1px solid @cor-3;

    &:hover,
    &:focus {
      .degrade .vertical(lighten(@cor-1, 7%), lighten(@cor-2, 7%));
    }

    &:active {
      .degrade .vertical(@cor-2, @cor-1);

      border: 1px solid darken(@cor-3, 10%);
    }
  }

  &.btn-default {
    .cor(@default-1, @default-2, @default-3);

    &:active {
      color: #333;
    }
  }

  &.btn-primary {
    .cor(@primary-1, @primary-2, @primary-3);
  }

  &.btn-success {
    .cor(@success-1, @success-2, @success-3);
  }

  &.btn-danger {
    .cor(@danger-1, @danger-2, @danger-3);
  }

  &.btn-sm {
    font-size: 11px;
    padding: 4px 7px;
  }

  &.borda_diag {
    .rounded(0);

    padding: 10px 8px;
  }

  &.btn-block {
    padding-left: 0;
    padding-right: 0;
  }
}

.modal-footer .btn + .btn {
  margin-left: 16px;
  border-radius: 5px;
}

.modal-content {
  .box-shadow(3px 3px 0 0px fade(#000, 50%));
}

.alert {
  .fonte_arial;
}