elemental
Version:
React UI Framework
379 lines (230 loc) • 9.69 kB
text/less
//
// Variables
// ==============================
// Colours
// ------------------------------
@react-blue: #00d8ff;
@ios-blue: #007aff;
@keystone-blue: #1385e5;
@elemental-turquoise: #31adb8;
@brand-primary: @elemental-turquoise;
@app-primary: @keystone-blue;
@app-danger: #d64242;
@app-info: #0090e0;
@app-success: #34c240;
@app-warning: #fa9f47;
@gray-base: #000;
@gray-darker: #222;
@gray-dark: #333;
@gray: #666;
@gray-light: #999;
@gray-lighter: #eee;
@body-bg: #fdfdfd;
@text-color: @gray-dark;
@heading-color: @gray-darker;
@link-color: @app-primary;
@link-hover-color: lighten(@link-color, 10%);
// Typography
// ------------------------------
@font-family-sans-serif: "Helvetica Neue", 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;
@line-height-base: 1.4;
@link-hover-decoration: underline;
@font-size-base: 14px;
@font-size-xs: 0.8rem;
@font-size-sm: 0.9rem;
@font-size-lg: 1.25rem;
@font-weight-bold: 500;
@code-text-color: #333;
@code-bg-color: darken(@body-bg, 1%);
@code-border-color: darken(@body-bg, 12%);
// Spacing
// ------------------------------
@spacing-xxs: 0.125em;
@spacing-xs: 0.25em;
@spacing-sm: 0.5em;
@spacing-md: 1em;
@spacing-lg: 2em;
@spacing-xl: 5em;
// used on inputs and buttons
@component-line-height: 2.3em;
@component-height: 2.4em;
@component-padding: 1em;
// Images
// ------------------------------
@thumbnail-bg-color: white;
@thumbnail-gutter-width: 4px;
@thumbnail-bg-hover-color: @thumbnail-bg-color;
@thumbnail-border-color: @input-border-color;
@thumbnail-border-hover-color: @link-color;
// Blank State
// ------------------------------
@blankstate-bg: darken(@body-bg, 4%);
@blankstate-color: @gray-light;
@blankstate-border-radius: @border-radius-base;
@blankstate-padding-vertical: @spacing-xl;
@blankstate-padding-horizontal: @spacing-lg;
// Forms
// ------------------------------
@form-animation-duration: 280ms;
@form-label-color: #777;
@form-label-width: 180px;
@form-help-color: @form-label-color;
@input-bg-color: white;
@input-bg-disabled: darken(@input-bg-color, 3%);
@input-placeholder-color: #aaa;
@input-border-color: #ccc;
@input-border-color-hover: darken(@input-border-color, 10%);
@input-border-color-focus: @app-primary;
@input-padding-horizontal: .75em;
@input-noedit-width: 180px;
@control-disabled-color: @gray-light;
// Buttons
// ------------------------------
@button-font-weight: 500;
@button-padding-horizontal: 1em;
@button-default-color: @app-primary;
@button-default-border: mix(@app-primary, @body-bg, 60%);
@button-default-disabled-bg: darken(@body-bg, 4%);
@button-primary-color: @app-primary;
@button-primary-bg: @app-primary;
@button-primary-border: mix(@button-primary-bg, @body-bg, 60%);
@button-success-color: @app-success;
@button-success-bg: @app-success;
@button-success-border: mix(@button-success-bg, @body-bg, 60%);
@button-warning-color: @app-warning;
@button-warning-bg: @app-warning;
@button-warning-border: mix(@button-warning-bg, @body-bg, 60%);
@button-danger-color: @app-danger;
@button-danger-bg: @app-danger;
@button-danger-border: mix(@button-danger-bg, @body-bg, 60%);
@button-link-disabled-color: @gray-light;
// Tags
// ------------------------------
@pill-default-color: @gray;
@pill-primary-color: @app-primary;
@pill-info-color: @app-info;
@pill-success-color: @app-success;
@pill-warning-color: @app-warning;
@pill-danger-color: @app-danger;
// Dropdowns
// ------------------------------
@dropdown-bg: white;
@dropdown-divider-bg: #e5e5e5;
@dropdown-caret-width: .33em;
@dropdown-link-color: @text-color;
@dropdown-link-hover-color: mix(@link-color, @text-color, 60%);
@dropdown-link-hover-bg: mix(@link-color, @dropdown-bg, 10%);
@dropdown-link-active-color: white;
@dropdown-link-active-bg: @app-primary;
@dropdown-link-disabled-color: @gray-light;
@dropdown-header-color: @gray-light;
@dropdown-menu-height: 360px; // totally arbitrary, just looks right
// Modals
// ------------------------------
@modal-bg: white;
@modal-backdrop-bg: rgba(0, 0, 0, 0.5);
@modal-padding-vertical: 20px;
@modal-padding-horizontal: 20px;
@modal-body-height: 400px;
@modal-width-small: 320px;
@modal-width-medium: 640px;
@modal-width-large: 960px;
// Pagination
// -------------------------
@pagination-color: @gray;
@pagination-hover-bg: white;
@pagination-hover-border: rgba(0, 0, 0, 0.1);
@pagination-hover-color: @gray;
@pagination-active-bg: rgba(0, 0, 0, 0.05);
@pagination-active-border: transparent;
@pagination-active-color: @gray;
@pagination-disabled-bg: transparent;
@pagination-disabled-color: @gray-light;
// Cards
// ------------------------------
@card-bg-color: white;
// Z-Index List
// ------------------------------
@zindex-dropdown: 100;
@zindex-dropdown-button: @zindex-dropdown + 1;
@zindex-dropdown-backdrop: @zindex-dropdown - 1;
@zindex-modal: 110;
@zindex-modal-backdrop: @zindex-modal - 1;
// Tables
// ------------------------------
@table-padding: .66em;
@table-border-color: rgba(0,0,0,0.06);
@table-sort-arrow-width: 4px;
@table-selected-row-bg: #fffef5;
@table-selected-row-color: inherit;
// Misc
// ------------------------------
@border-radius-lg: .5em;
@border-radius-base: .3em;
@border-radius-sm: .125em;
@spinner-dot-bg: @gray-light;
@spinner-dot-size: 8px;
@spinner-dot-size-sm: @spinner-dot-size / 2;
@spinner-dot-size-lg: @spinner-dot-size * 2;
// Media queries breakpoints
// ------------------------------
// Extra small screen / phone
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen / tablet
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
// 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
// ------------------------------
@grid-columns: 12;
@grid-gutter-width: 20px;
@grid-float-breakpoint: @screen-sm-min;
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
// Container sizes
// ------------------------------
// Small screen / tablet
@container-tablet: (720px + @grid-gutter-width);
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: (940px + @grid-gutter-width);
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: (1140px + @grid-gutter-width);
@container-lg: @container-large-desktop;
// ==============================
// Complementary Modules
// ==============================
// Date Select
// http://jedwatson.github.io/react-date-select
// ------------------------------
// @DateSelect-bg: #fafafa;
@DateSelect-primary: @app-primary;
// @DateSelect-text-color: #333333;
// @DateSelect-backdrop-bg: rgba(0, 0, 0, 0.5);
// @DateSelect-header-bg: desaturate(@DateSelect-primary, 10%);
// @DateSelect-footer-bg: darken(@DateSelect-bg, 5%);
// @DateSelect-footer-border: darken(@DateSelect-bg, 15%);
// @DateSelect-footer-color: #666;
// @DateSelect-selected-day-bg: @DateSelect-primary;
// @DateSelect-selected-day-color: white;
// @DateSelect-current-day-bg: darken(@DateSelect-bg, 3%);
// @DateSelect-current-day-border: darken(@DateSelect-bg, 15%);
// @DateSelect-legend-color: #999;
// @DateSelect-range-color: #666;