flectra/addons/theme_leith/static/less/layouts/mixins.less

/* BACKGROUND COLORS
   ========================================================================== */

.bg-mixin(@background; @color; @bs-selector; @wb-selector){
  background-color: @background;
  color: @color;
  a:not(.btn),
  &.fa,
  .text-@{bs-selector},
  .blockquote-text small{
    color: @color;
  }
  .bg-@{wb-selector}.label{
    background-color: @color;
    color: @background;
  }
  .btn.btn-@{bs-selector},
  .btn.btn-default{
    border: 1px solid @color;
    color: @color;
    &:hover{
      background-color: @color;
      color: @background;
    }
  }
  .bg-@{wb-selector}{
    &.fa{
      background-color: @color;
      color: @background;
    }
    .img-thumbnail(@background, @color);
  }
  .panel-@{wb-selector}{
    .panel-color(@color, @background);
  }
  .well-@{wb-selector}{
    .well-color(@color);
  }
  .img-thumbnail(@color, @background);
  .text-muted{
    color: @color;
  }
}

.bg-none(@background; @color){
  background-color: rgba(0, 0, 0, 0);
}

.white(@content-color){
  .bg-white{
    .bg-mixin(#fff, @content-color, white, white);
  }
  .panel-white{
    .panel-color(#fff, @content-color);
  }
  .well-white{
    .well-color(#fff);
  }
}

.gray-lighter(@content-color){
  .bg-gray-lighter{
    .bg-mixin(@gray-lighter, @content-color, gray-lighter, gray-lighter);
  }
  .panel-gray-lighter{
    .panel-color(@gray-lighter, @content-color);
  }
  .well-gray-lighter{
    .well-color(@gray-lighter);
  }
}

.gray(@content-color){
  .bg-gray{
    .bg-mixin(@gray, @content-color, gray, gray);
  }
  .panel-gray{
    .panel-color(@gray, @content-color);
  }
  .well-gray{
    .well-color(@gray);
  }
}

.gray-darker(@content-color){
  .bg-gray-darker{
    .bg-mixin(@gray-darker, @content-color, gray-darker, gray-darker);
  }
  .panel-gray-darker{
    .panel-color(@gray-darker, @content-color);
  }
  .well-gray-darker{
    .well-color(@gray-darker);
  }
  .well-gray-darker{
    .well-color(@gray-darker);
  }
}

.primary(@content-color){
  .bg-primary{
    .bg-mixin(@color-primary, @content-color, primary, primary);
  }
  .panel-primary{
    .panel-color(@color-primary, @content-color);
  }
  .panel-primary{
    .panel-variant(@color-primary; @content-color; @color-primary; @color-primary);
    .list-group-item.active{
  	background-color: @color-primary;
  	border-color: @color-primary;}
  }
  .well-primary{
    .well-color(@color-primary);
  }
}

.success(@content-color){
  .bg-success{
    .bg-mixin(@color-success, @content-color, success, success);
  }
  .panel-success{
    .panel-color(@color-success, @content-color);
  }
  .panel-success{
    .panel-variant(@color-success; @content-color; @color-success; @color-success);
     .list-group-item.active{
  	background-color: @color-success;
  	border-color: @color-success;}
  }
  .well-success{
    .well-color(@color-success);
  }
}

.info(@content-color){
  .bg-info{
    .bg-mixin(@color-info, @content-color, info, info);
  }
  .panel-info{
    .panel-color(@color-info, @content-color);
  }
  .panel-info{
    .panel-variant(@color-info; @content-color; @color-info; @color-info);
  
  .list-group-item.active{
  	background-color: @color-info;
  	border-color: @color-info;
  }}
  
  .well-info{
    .well-color(@color-info);
  }
}

.warning(@content-color){
  .bg-warning{
    .bg-mixin(@color-warning, @content-color, warning, warning);
  }
  .panel-warning{
    .panel-color(@color-warning, @content-color);
  }
  .panel-warning{
    .panel-variant(@color-warning; @content-color; @color-warning; @color-warning);
  
  .list-group-item.active{
  	background-color: @color-warning;
  	border-color: @color-warning;
  }}
  .well-warning{
    .well-color(@color-warning);
  }
}

.danger(@content-color){
  .bg-danger{
    .bg-mixin(@color-danger, @content-color, danger, danger);
  }
  .panel-danger{
    .panel-color(@color-danger, @content-color);
  }
  .panel-danger{
    .panel-variant(@color-danger; @content-color; @color-danger; @color-danger);
    .list-group-item.active{
  	background-color: @color-warning;
  	border-color: @color-warning;}
  }
  .well-danger{
    .well-color(@color-danger);
  }
}


/* PANEL COLORS
   ========================================================================== */

.panel-color(@color, @textcolor){
  border-color: @color;
  .list-group li.active{
    background-color: @color !important;
    color: @textcolor;
  }
  > .panel-heading{
    background-color: @color;
    color: @textcolor;
    .text-muted{
      color: @textcolor;
    }
    > .panel-title, a{
      color: @textcolor;
    }
  }
  .tab-content{
    border-left: 1px solid @color;
    border-bottom: 1px solid @color;
    border-right: 1px solid @color;
    padding: 20px;
  }
  .nav-tabs{
    border-bottom: 1px solid @color;  
    > li {
      > a{
        background-color: inherit;
        color: @color;
        &:hover,
        &:focus{
          background-color: @color;
          border: 1px solid @color;
          border-bottom-color: @color;
          color: @textcolor;
          .fa{
            color: @textcolor;
          }
        }
      }
      &.active a,
      &.active a:hover,
      &.active a:focus{
        border: 1px solid @color;
        background-color: @color;
        color: @textcolor;
        .fa{
          color: @textcolor;
        }
      }
    }
  }
}


.well-color(@color){
  background-color: rgba(0, 0, 0, 0);
  border-color: @color;
  color: inherit;
  .fa{
    color: @color;
  }
}


/* THUMBNAILS COLORS
   ========================================================================== */

.img-thumbnail(@first-border-color; @second-border-color){
  &.thumbnail,
  &.img-thumbnail{
    @shadow: 0 0 0 3px @first-border-color, 0 0 0 6px @second-border-color;
    .box-shadow(@shadow);
  } 
}


/* TEXT MUTED
   ========================================================================== */

.text-muted(@color){
  color: @color;
  opacity: (@opacity * 0.5);
}

/* Fix non-clickable input */
#wrapwrap {
  form div.text-muted,
  .wizard .text-muted {
    opacity: 1;
  }
}