Subversion Repositories Integrator Subversion

//##  Flat UI Color Variations
//
// Color variations can be used for Metronic components, such as portlets, buttons, dashboard stats.

@mixin flatui-color-variant($name, $color, $text-color) {
        
        /* Button */
        .#{$name} {
                &.btn {
                        @include button-variant($text-color, $color, "");
                }
        }

        /* Button Strip */
        .btn.#{$name}-stripe {
                border-left: 3px solid $color;
        }  

        /* Portlet */
        @include porlet-background($name, $color);
        @include porlet-solid($name, $text-color);
        @include porlet-box($name, $color, $text-color); 

        /* Statistic Block */
        .dashboard-stat {
                @include dashboard-stat-variant($name, $color, $text-color);
        }

        /* General Element */
        .bg-#{$name} {
                border-color: $color !important;
                background-image: none !important;
            background-color: $color !important;
            color: $text-color !important;
        }

        /* General Text & Icon Font Colors */
        .font-#{$name} {
                color: $color !important;
        }

        .progress-bar.#{$name} {
                background: $color !important;
                color: $text-color !important;
        }
}

/* Button */
.btn.default {
        @include button-variant(#333333, #E5E5E5, ""); 
}

/**********
Blue Colors
***********/

/***
Blue Default
***/

@include flatui-color-variant("blue", #4B8DF8, #FFFFFF);

/***
Blue Madison
***/

@include flatui-color-variant("blue-madison", #578ebe, #FFFFFF);

/***
Blue Chambray
***/

@include flatui-color-variant("blue-chambray", #2C3E50, #FFFFFF);

/***
Blue Ebonyclay
***/

@include flatui-color-variant("blue-ebonyclay", #22313F, #FFFFFF);

/***
Blue Hoki
***/

@include flatui-color-variant("blue-hoki", #67809F, #FFFFFF);

/***
Blue Stell
***/

@include flatui-color-variant("blue-steel", #4B77BE, #FFFFFF);

/***
Blue Soft
***/

@include flatui-color-variant("blue-soft", #4c87b9, #FFFFFF);

/***
Blue Dark
***/

@include flatui-color-variant("blue-dark", #5e738b, #FFFFFF);

/***
Blue Sharp
***/

@include flatui-color-variant("blue-sharp", #5C9BD1, #FFFFFF);


/***********
Green Colors
************/

/***
Green Default
***/

@include flatui-color-variant("green", #35aa47, #FFFFFF);

/***
Green Meadow
***/

@include flatui-color-variant("green-meadow", #1BBC9B, #FFFFFF);

/***
Green Seagreen
***/

@include flatui-color-variant("green-seagreen", #1BA39C, #FFFFFF);

/***
Green Turquoise
***/

@include flatui-color-variant("green-turquoise", #36D7B7, #FFFFFF);

/***
Green Haze
***/

@include flatui-color-variant("green-haze", #44b6ae, #FFFFFF);

/***
Green Jungle
***/

@include flatui-color-variant("green-jungle", #26C281, #FFFFFF);

/***
Green Sharp
***/

@include flatui-color-variant("green-sharp", #4DB3A2, #FFFFFF);

/***
Green Sharp
***/

@include flatui-color-variant("green-soft", #3faba4, #FFFFFF);


/***********
Grey Colors
************/

/***
Grey Default
***/

@include flatui-color-variant("grey", #E5E5E5, #333333);

/***
Grey Steel
***/

@include flatui-color-variant("grey-steel", #e9edef, #80898e);      

/***
Grey Cararra
***/

@include flatui-color-variant("grey-cararra", #fafafa, #333333);

/***
Grey Gallery
***/

@include flatui-color-variant("grey-gallery", #555555, #ffffff); 

/***
Grey Cascade
***/

@include flatui-color-variant("grey-cascade", #95A5A6, #FFFFFF);

/***
Grey Silver
***/

@include flatui-color-variant("grey-silver", #BFBFBF, #FAFCFB);
 
/***
Grey Salsa
***/

@include flatui-color-variant("grey-salsa", #ACB5C3, #FAFCFB);

/***
Grey Salt
***/

@include flatui-color-variant("grey-salt", #bfcad1, #FAFCFB);

/***
Grey Mint
***/

@include flatui-color-variant("grey-mint", #9eacb4, #FAFCFB);


/***********
Red Colors
************/

/***
Red Default
***/

@include flatui-color-variant("red", #d84a38, #FFFFFF); 

/***
Red Pink
***/

@include flatui-color-variant("red-pink", #E08283, #FFFFFF);

/***
Red Sunglo
***/

@include flatui-color-variant("red-sunglo", #E26A6A, #FFFFFF);

/***
Red Intense
***/

@include flatui-color-variant("red-intense", #e35b5a, #FFFFFF);

/***
Red Thunderbird
***/
  
@include flatui-color-variant("red-thunderbird", #D91E18, #FFFFFF);

/***
Red Flamingo
***/

@include flatui-color-variant("red-flamingo", #EF4836, #FFFFFF);

/***
Red Flamingo
***/

@include flatui-color-variant("red-soft", #d05454, #FFFFFF);

/***
Red Haze
***/

@include flatui-color-variant("red-haze", #f36a5a, #FFFFFF);


/***********
Yellow Colors
************/

/***
Yellow Default
***/

@include flatui-color-variant("yellow", #FFB848, #FFFFFF);

/***
Yellow Gold
***/

@include flatui-color-variant("yellow-gold", #E87E04, #FFFFFF);

/***
Yellow Casablanca
***/

@include flatui-color-variant("yellow-casablanca", #f2784b, #FFFFFF);    

/***
Yellow Crusta
***/

@include flatui-color-variant("yellow-crusta", #f3c200, #FFFFFF);

/***
Yellow Lemon
***/

@include flatui-color-variant("yellow-lemon", #F7CA18, #FFFFFF);

/***
Yellow Saffron
***/

@include flatui-color-variant("yellow-saffron", #F4D03F, #FFFFFF);


/***********
Purple Colors
************/

/***
Purple Default
***/

@include flatui-color-variant("purple", #8E44AD, #FFFFFF);

/***
Purple Plum
***/ 

@include flatui-color-variant("purple-plum", #8775a7, #FFFFFF);

/***
Purple Medium
***/

@include flatui-color-variant("purple-medium", #BF55EC, #FFFFFF);

/***
Purple Studio
***/

@include flatui-color-variant("purple-studio", #8E44AD, #FFFFFF);

/***
Purple Wisteria
***/

@include flatui-color-variant("purple-wisteria", #9B59B6, #FFFFFF);

/***
Purple Seance
***/

@include flatui-color-variant("purple-seance", #9A12B3, #FFFFFF);

/***
Purple Intense
***/

@include flatui-color-variant("purple-intense", #8775a7, #FFFFFF);

/***
Purple Sharp
***/

@include flatui-color-variant("purple-sharp", #796799, #FFFFFF);

/***
Purple Soft
***/

@include flatui-color-variant("purple-soft", #8877a9, #FFFFFF);

/***
Transparent Button
***/

.btn-transparent.btn {
  background: transparent;   
  color: #888;
}