generator-fe-kit
Version:
Pixelant Front-End Starter Kit
203 lines (146 loc) • 6.17 kB
text/less
// Primary color
@main-color: #50b4d8; //#288FB4
// BODY
@main-body-bg: #fff;
@main-text-color: #7d7d7d;
@border-color: #ebf3f6;//#eee;
@main-link-color: @main-color;
@main-link-hover-color: tint(@main-color, 30%);
// HEADER
@header-top-height: 50px;
@header-top-bg-color: @main-body-bg;
@header-top-color: fade(@main-text-color, 50%);
@header-middle-height: 110px;
@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: @main-color;
@header-middle-search-btn-hover:lighten(@main-color, 20%);
@search-text-color: @main-text-color;
// Logo
@logo-top: 25px;
@logo-left: 16px;
@logo-width: 120px;
// Navigation
@nav-height: 60px;
@nav-link-color: #fff;
@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: tint(@nav-background-color, 10%);
@nav-link-arrow-color: fade(@nav-link-color, 50%);
@nav-background-color: darken(@main-text-color, 32%);
@nav-search-btn-color: fade(@main-color, 50%);
@mobile-nav-toggle-btn: left;
// Social icons
@social-icons-bg-color: @main-color;//lighten(@main-text-color, 30%);
@social-icons-hover-color: lighten(@main-color, 15%);
// Breadcrumbs
@breadcrumbs-background: @main-body-bg;
@breadcrumbs-link-color: @main-link-color; //darken(@main-text-color, 20%);
@breadcrumbs-link-active-color: darken(@main-text-color, 20%);
@breadcrumbs-link-hover-color: @main-link-hover-color; //lighten(@main-text-color, 15%);
@breadcrumbs-border-color: tint(@main-link-color, 70%);
// Sub navigation
@sub-navigation-background: @main-body-bg;
@sub-navigation-border: @border-color;
@sub-navigation-active-border: @main-color;
@sub-navigation-link-color: darken(@main-text-color, 20%);
// @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, 5%);
@sub-navigation-link-active-color: @nav-link-color; //@sub-navigation-link-color;
@sub-navigation-link-active-bg: @main-color; //fade(@main-color, 20%);
// FOOTER
@footer-background: #181818;
@footer-color: #8d8d8d;
@footer-link-color: @main-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 Condensed", Helvetica, Arial, sans-serif;
@font-family-serif: Garamond, "Crimson Text", "Times New Roman", serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 17px;
@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.4)); // ~38px
@font-size-h2: floor((@font-size-base * 2.1)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.5)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~20px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.52941176; // 1.428571429 (bootstrap default)
@headings-font-family: inherit;
@headings-font-weight: 700;
@headings-line-height: 1.1;
@headings-color: darken(@main-text-color, 30%);//inherit;
//== Buttons BOOTSTRAP
//
//## For each of Bootstrap's buttons, define text, background and border color.
@btn-font-weight: normal;
@btn-default-color: @main-color;
@btn-default-bg: transparent;
@btn-default-border: tint(@main-color, 70%);
@btn-border-radius-base: none;
@padding-base-vertical: 8px;
@padding-base-horizontal: 14px;
@padding-large-vertical: 12px;
@padding-large-horizontal: 18px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@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;
}
}