generator-fe-kit/app/templates/felayout_t3kit/dev/styles/customVariables.less

Pixelant Front-End Starter Kit

// Primary color
@main-color:                    #288FB4; //#288FB4

// BODY
@main-body-bg:                  #fff;
@main-text-color:               #555;
@border-color:                  #eee;


@main-link-color:               @main-color;
@main-link-hover-color:         lighten(@main-color, 15%);



// HEADER
@header-top-height:             50px;
@header-top-bg-color:           @main-body-bg;
@header-top-color:              fade(@main-text-color, 50%);

@header-middle-height:          130px;
@header-middle-bg-color:        @main-body-bg;
@header-border-color:           @border-color;

// Header middle search form
@header-middle-search-height:   44px;
@header-middle-search-btn-bg:   lighten(@main-text-color, 30%);
@header-middle-search-btn-hover:lighten(@main-color, 15%);
@search-text-color: @main-text-color;


// Logo
@logo-top:                      30px;
@logo-left:                     10px;
@logo-width:                    120px;


// Navigation
@nav-height:                    64px;
@nav-link-color:                @main-text-color;
@nav-link-hover-color:          @nav-link-color;
@nav-link-active-color:         @main-color;
@nav-link-active-hover-color:   @nav-link-active-color;
@nav-link-hover-background:     darken(@main-body-bg, 10%);

@nav-link-arrow-color:          fade(@main-text-color, 50%);

@nav-background-color:          @main-body-bg;

@nav-search-btn-color:          fade(@main-text-color, 50%);

@mobile-nav-toggle-btn:        left;

// Social icons
@social-icons-bg-color:         lighten(@main-text-color, 30%);
@social-icons-hover-color:      lighten(@main-color, 15%);

// Breadcrumbs
@breadcrumbs-background:        @main-body-bg;
@breadcrumbs-link-color:        @main-text-color;
@breadcrumbs-link-active-color: @main-color;
@breadcrumbs-link-hover-color:  lighten(@main-text-color, 15%);


// Sub navigation
@sub-navigation-background:         @main-body-bg;
@sub-navigation-border:             @border-color;
@sub-navigation-active-border:      @main-color;
@sub-navigation-link-color:         @main-text-color;
@sub-navigation-link-hover-color:   @sub-navigation-link-color;
@sub-navigation-link-hover-bg:      darken(@main-body-bg, 15%);

@sub-navigation-link-active-color:  @sub-navigation-link-color;
@sub-navigation-link-active-bg:     @sub-navigation-link-hover-bg;




// FOOTER
@footer-background:             #1D556F; //#1D556F;
@footer-color:                  #eee; //#eee;
@footer-link-color:             @footer-color;
@footer-link-hover-color:       @main-link-hover-color;


// =========================================================
// BOOTSTRAP Variables  ====================================
// =========================================================
@body-bg:                       @main-body-bg;
@text-color:                    @main-text-color;
@link-color:                    @main-link-color;
@link-hover-color:              @main-link-hover-color;
@link-hover-decoration:         none; //underline

// Font variables
@font-family-sans-serif:        Roboto, Helvetica, Arial, sans-serif;
@font-family-serif:             Georgia, "Times New Roman", Times, serif;
@font-family-monospace:         Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:              @font-family-sans-serif;



@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:              1.428571429; // 20/14

@headings-font-family:          inherit;
@headings-font-weight:          500;
@headings-line-height:          1.1;
@headings-color:                inherit;


//== Buttons BOOTSTRAP
//
//## For each of Bootstrap's buttons, define text, background and border color.

@btn-font-weight:               normal;
@btn-default-color:             @text-color;
@btn-default-bg:                darken(@main-body-bg, 15%);
@btn-default-border:            lighten(@main-body-bg, 10%);
@btn-border-radius-base:        none;



@border-radius-base:            0;
@border-radius-large:           0;
@border-radius-small:           0;


//== Panels
//
//##

@panel-bg:                    #fff;
@panel-body-padding:          15px;
@panel-heading-padding:       10px 15px;
@panel-footer-padding:        @panel-heading-padding;
@panel-border-radius:         @border-radius-base;

@panel-default-text:            @main-text-color;
// @panel-default-border:          @light-grey-color;
// @panel-default-heading-bg:      @light-grey-color;


//== Tabs
// @nav-tabs-border-color:                     @light-grey-color;

// @nav-tabs-link-hover-border-color:          @light-grey-color;

@nav-tabs-active-link-hover-bg:             @main-body-bg;
@nav-tabs-active-link-hover-color:          @main-text-color;
// @nav-tabs-active-link-hover-border-color:   @light-grey-color;


//== Pills
@nav-pills-active-link-hover-bg:            @main-color;
@nav-pills-active-link-hover-color:         #fff;


.input-placeholder-color(@color) {
	&::placeholder {
		color: @color;
		opacity: .6;
	}
	&::-webkit-input-placeholder
	{
		color: @color;
		opacity: .6;
	}
	&::-moz-placeholder {
		color: @color;
		opacity: .6;
	}
	&:-ms-input-placeholder {
		color: @color;
		opacity: .6;
	}
	&:-moz-placeholder {
		color: @color;
		opacity: .6;
	}
}