Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
public.components.flat-ui.less.variables.less Maven / Gradle / Ivy
//
// Variables
// --------------------------------------------------
// == Colors
//
//##
// Color swatches
@turquoise: #1abc9c;
@green-sea: #16a085;
@emerald: #2ecc71;
@nephritis: #27ae60;
@peter-river: #3498db;
@belize-hole: #2980b9;
@amethyst: #9b59b6;
@wisteria: #8e44ad;
@wet-asphalt: #34495e;
@midnight-blue: #2c3e50;
@sun-flower: #f1c40f;
@orange: #f39c12;
@carrot: #e67e22;
@pumpkin: #d35400;
@alizarin: #e74c3c;
@pomegranate: #c0392b;
@clouds: #ecf0f1;
@silver: #bdc3c7;
@concrete: #95a5a6;
@asbestos: #7f8c8d;
// Grays
@gray: @concrete;
@gray-light: @silver;
@inverse: white;
// Brand colors
@brand-primary: @wet-asphalt;
@brand-secondary: @turquoise;
@brand-success: @emerald;
@brand-warning: @sun-flower;
@brand-danger: @alizarin;
@brand-info: @peter-river;
//== Scaffolding
//
//## Settings for some of the most global styles.
@body-bg: #fff;
@text-color: @brand-primary;
//** Global textual link color.
@link-color: @green-sea;
@link-hover-color: @turquoise;
//== Typography
//
//## Font, line-height for body text, headings, and more.
@font-family-base: "Lato", Helvetica, Arial, sans-serif;
@font-family-demo: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-size-base: 18px;
@local-font-path: "../fonts/lato/";
@local-font-name: "lato-regular";
@local-font-svg-id: "latoregular";
@local-font-name-light: "lato-light";
@local-font-svg-id-light: "latolight";
@local-font-name-black: "lato-black";
@local-font-svg-id-black: "latoblack";
@local-font-name-bold: "lato-bold";
@local-font-svg-id-bold: "latobold";
@local-font-name-italic: "lato-italic";
@local-font-svg-id-italic: "latoitalic";
@local-font-name-bold-italic: "lato-bolditalic";
@local-font-svg-id-bold-italic: "latobold-italic";
@font-size-h1: floor(@font-size-base * 3.444); // ~62px
@font-size-h2: ceil(@font-size-base * 2.889); // ~52px
@font-size-h3: ceil(@font-size-base * 2.222); // ~40px
@font-size-h4: ceil(@font-size-base * 1.611); // ~29px
@font-size-h5: floor(@font-size-base * 1.556); // ~28px
@font-size-h6: ceil(@font-size-base * 1.333); // ~24px
@line-height-base: 1.72222; // 31/18
@line-height-computed: floor(@font-size-base * @line-height-base); // ~31px
@headings-font-family: inherit;
@headings-font-weight: 700;
@headings-line-height: 1.1;
@headings-color: inherit;
//== Iconography
//
//## Specify custom locations of the include Glyphicons icon font.
@icon-font-path: "../fonts/";
@icon-font-name: "flat-ui-icons-regular";
@icon-font-svg-id: "flat-ui-icons-regular";
//** Icon sizes for use in components
@icon-normal: 16px;
@icon-medium: 18px;
@icon-large: 32px;
//== Components
//
//## Define common padding and border radius sizes and more.
//** Default font-size in components
@component-font-size-base: ceil(@font-size-base * 0.833); // ~15px
// Border-radius
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
//== Buttons
//
//## For each of Flat UI's buttons, define text, background, font size and height.
@btn-font-size-base: @component-font-size-base;
@btn-font-size-xs: ceil(@component-font-size-base * 0.80); // ~12px
@btn-font-size-sm: floor(@component-font-size-base * 0.867); // ~13px
@btn-font-size-lg: ceil(@component-font-size-base * 1.133); // ~17px
@btn-font-size-hg: floor(@component-font-size-base * 1.467); // ~22px
@btn-line-height-base: 1.4; // ~21px
@btn-line-height-hg: 1.227; // ~27px
@btn-line-height-lg: 1.471; // ~25px
@btn-line-height-sm: 1.385; // ~16px
@btn-line-height-xs: 1.083; // ~13px
@btn-social-font-size-base: floor(@component-font-size-base * 0.867); // ~13px
@btn-social-line-height-base: 1.077; // ~14px
@btn-font-weight: normal;
@btn-default-color: @inverse;
@btn-default-bg: @gray-light;
@btn-hover-bg: mix(@gray-light, white, 80%);
@btn-active-bg: mix(@gray-light, black, 85%);
@btn-primary-hover-bg: mix(@brand-secondary, white, 80%);
@btn-primary-active-bg: mix(@brand-secondary, black, 85%);
@btn-info-hover-bg: mix(@brand-info, white, 80%);
@btn-info-active-bg: mix(@brand-info, black, 85%);
@btn-success-hover-bg: mix(@brand-success, white, 80%);
@btn-success-active-bg: mix(@brand-success, black, 85%);
@btn-danger-hover-bg: mix(@brand-danger, white, 80%);
@btn-danger-active-bg: mix(@brand-danger, black, 85%);
@btn-warning-hover-bg: overlay(@brand-warning, darken(white, 37.5%));
@btn-warning-active-bg: mix(@brand-warning, black, 85%);
@btn-inverse-hover-bg: overlay(@brand-primary, darken(white, 37.5%));
@btn-inverse-active-bg: mix(@brand-primary, black, 85%);
@btn-link-disabled-color: @gray-light;
//== Forms
//
//##
@input-font-size-base: @component-font-size-base;
@input-font-size-small: floor(@component-font-size-base * 0.867); // ~13px
@input-font-size-large: ceil(@component-font-size-base * 1.133); // ~17px
@input-font-size-huge: floor(@component-font-size-base * 1.467); // ~22px
@input-line-height-base: 1.467; // ~22px
@input-line-height-small: 1.462; // ~19px
@input-line-height-large: 1.235; // ~21px
@input-line-height-huge: 1.318; // ~29px
@input-icon-font-size: ceil(@component-font-size-base * 1.333); // ~20px
@input-bg: @inverse;
@input-bg-disabled: mix(@gray, white, 10%);
@input-height-small: 35px;
@input-height-base: 41px;
@input-height-large: 45px;
@input-height-huge: 53px;
@input-border-radius: @border-radius-large;
@legend-color: inherit;
//== Forms
//
//##
@input-font-size-base: @component-font-size-base;
@input-font-size-small: floor(@component-font-size-base * 0.867); // ~13px
@input-font-size-large: ceil(@component-font-size-base * 1.133); // ~17px
@input-font-size-huge: floor(@component-font-size-base * 1.467); // ~22px
@input-line-height-base: 1.467; // ~22px
@input-line-height-small: 1.462; // ~19px
@input-line-height-large: 1.235; // ~21px
@input-line-height-huge: 1.318; // ~29px
@input-icon-font-size: ceil(@component-font-size-base * 1.333); // ~20px
@input-bg: @inverse;
@input-bg-disabled: mix(@gray, white, 10%);
@input-height-small: 35px;
@input-height-base: 41px;
@input-height-large: 45px;
@input-height-huge: 53px;
@input-border-radius: @border-radius-large;
@legend-color: inherit;
//== Pagination
//
//##
@pagination-color: mix(@brand-primary, white, 20%);
//== Pager
//
//##
@pager-padding: 9px 15px 10px;
//== Navbar
//
//##
// Basics of a navbar
@zindex-navbar: 1000;
@zindex-navbar-fixed: 1030;
@navbar-height-base: 53px;
@navbar-height-large: 76px;
@navbar-input-line-height: 1.4; // ~21px
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-large;
@navbar-default-bg: saturate(spin(tint(@brand-primary, 91%), -18), 2%);
// Navbar links
@navbar-default-link-color: @brand-primary;
@navbar-default-link-hover-color: @brand-secondary;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: @brand-secondary;
@navbar-default-link-active-bg: transparent;
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar nav carets
@navbar-default-caret-color: @navbar-default-link-color;
@navbar-default-caret-hover-color: @navbar-default-link-hover-color;
@navbar-default-caret-active-color: @navbar-default-link-active-color;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: @navbar-default-link-hover-color;
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-color: @navbar-default-link-color;
@navbar-default-toggle-hover-color: @navbar-default-link-hover-color;
// Navbar form
@navbar-default-form-placeholder: spin(tint(@brand-primary, 60%), 2);
@navbar-default-form-icon: desaturate(tint(@brand-primary, 45%), 2%);
@navbar-default-form-border: shade(@navbar-default-bg, 3%);
// Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-divider: darken(@brand-primary, 3%);
// Reset inverted navbar basics
@navbar-inverse-color: @inverse;
@navbar-inverse-bg: @brand-primary;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: @inverse;
@navbar-inverse-link-hover-color: @brand-secondary;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-color;
@navbar-inverse-link-active-bg: @brand-secondary;
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// Navbar nav carets
@navbar-inverse-caret-color: lighten(desaturate(@brand-primary, 7%), 9%);
@navbar-inverse-caret-hover-color: @navbar-inverse-link-hover-color;
@navbar-inverse-caret-active-color: @navbar-inverse-link-active-color;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: @navbar-inverse-link-hover-color;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-color: @navbar-inverse-link-color;
@navbar-inverse-toggle-hover-color: @navbar-inverse-link-hover-color;
// Navbar form
@navbar-inverse-form-bg: darken(@brand-primary, 6%);
@navbar-inverse-form-placeholder: desaturate(lighten(@brand-primary, 13%), 7%);
@navbar-inverse-form-icon: desaturate(lighten(@brand-primary, 13%), 6%);
@navbar-inverse-form-border: @navbar-inverse-divider;
// Dropdown menu
@navbar-inverse-dropdown-arrow: @navbar-inverse-bg;
@navbar-inverse-dropdown-bg: @navbar-inverse-bg;
@navbar-inverse-dropdown-link-color: mix(@navbar-inverse-bg, @navbar-inverse-color, 15%);
@navbar-inverse-dropdown-link-hover-color: @inverse;
@navbar-inverse-dropdown-link-hover-bg: @brand-secondary;
//== Dropdown Menu
//
//##
@dropdown-background: mix(@inverse, @brand-primary, 94%);
//== Iconbar
//
//##
@iconbar-background: mix(@brand-primary, black, 85%);
//== Progress bars
//
//##
@progress-height: 12px;
//== Slider
//
//##
@slider-height: 12px;
@slider-value-font-size: floor(@component-font-size-base * 0.867); // ~13px;
@slider-handle-bg: mix(@brand-secondary, black, 85%);
@slider-handle-hover-bg: mix(@brand-secondary, white, 80%);
@slider-handle-active-bg: mix(@brand-secondary, black, 85%);
@slider-range-bg: @brand-secondary;
@slider-segment-bg: mix(desaturate(@brand-primary, 15%), white, 20%);
//== Switch
//
//##
@switch-border-radius: 30px;
@switch-width: 80px;
//== Thumbnails
//
//##
//** Padding around the thumbnail image
@thumbnail-padding: 4px;
//** Thumbnail background color
@thumbnail-bg: @body-bg;
//** Thumbnail border color
@thumbnail-border: @gray-light;
//** Thumbnail border radius
@thumbnail-border-radius: @border-radius-large;
//** Custom text color for thumbnail captions
@thumbnail-caption-color: @text-color;
//** Padding around the thumbnail caption
@thumbnail-caption-padding: 9px;
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
@screen-xs-min: 480px;
// Small screen / tablet
@screen-sm-min: 768px;
// Medium screen / desktop
@screen-md-min: 992px;
// Large screen / wide desktop
@screen-lg-min: 1200px;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
// Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.
@state-success-text: @brand-success;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: @brand-info;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-warning-text: @brand-warning;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
@state-danger-text: @brand-danger;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
// Code
//
//##
@code-color: #c7254e;
@code-bg: #f9f2f4;
@kbd-color: @inverse;
@kbd-bg: @brand-primary;
@pre-bg: @inverse;
@pre-color: inherit;
@pre-border-color: mix(@brand-primary, @inverse, 12%);
@pre-scrollable-max-height: 340px;
@pre-border-radius: @border-radius-large;
// Type
//
//##
//** Text muted color
@text-muted: @gray-light;
//** Abbreviations and acronyms border color
@abbr-border-color: @gray-light;
//** Headings small color
@headings-small-color: mix(@brand-primary, @inverse, 12%);
//** Blockquote small color
@blockquote-small-color: inherit;
//** Blockquote border color
@blockquote-border-color: mix(@brand-primary, @inverse, 12%);
//** Page header border color
@page-header-border-color: mix(@brand-primary, @inverse, 12%);
// Miscellaneous
//
//##
//** Hr border color
@hr-border: mix(@brand-primary, @inverse, 63%);
//** Horizontal forms & lists
@component-offset-horizontal: 180px;
