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

289 lines
5.9 KiB
Plaintext
Raw Normal View History

/* 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;
}
}