components
Version:
Upstage component library.
116 lines (87 loc) • 3.69 kB
text/less
// Variables
// --------------------------------------------------
// Typography
// -------------------------
@font-family-sans-serif: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-family-serif: 'Chronicle SSm A', 'Chronicle SSm B', Georgia, serif;
@font-family-monospace: Monaco, Menlo, 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-mini: ceil(@font-size-base * 0.75); // ~11px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family: @font-family-sans-serif;
@headings-font-weight: 500;
@headings-line-height: 1.1;
// Common
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)
@padding-base-vertical: 8px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 14px;
@padding-large-horizontal: 18px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@border-radius-base: 7px;
@border-radius-large: 10px;
@border-radius-small: 5px;
// Palette
// --------------------------------------------------
// Grays
// -------------------------
@black: #000;
@gray-darkest: #111;
@gray-darker: #262829;
@gray-dark: #333;
@gray: #555;
@gray-light: #a2a8a8;
@gray-lighter: #eee;
@gray-lightest: #f5f5f5;
@white: #fff;
// Brand colors
// -------------------------
@brand-primary: #33b5e5; // blue
@brand-info: #a6c; // purple
@brand-success: #9c0; // green
@brand-warning: #fb3; // yellow/orange
@brand-danger: #f44; // red
@brand-error: @brand-danger;
@brand-inverse: #fff;
@brand-primary-dark: #09c; // dark blue
@brand-info-dark: #93c; // dark purple
@brand-success-dark: #690; // dark green
@brand-warning-dark: #f80; // dark yellow/orange
@brand-danger-dark: #c00; // dark red
// Links
// -------------------------
@link-color: @brand-primary; // #25bac7;
@link-hover-color: darken(@link-color, 10%);
// Buttons
// -------------------------
@btn-default-color: #222;
@btn-default-bg: #e5e5e5;
@btn-default-border: @btn-default-bg;
@btn-primary-color: darken(#fff, 1%);
@btn-primary-bg: @brand-primary;
@btn-primary-border: @btn-primary-bg;
@btn-success-color: darken(#fff, 1%);
@btn-success-bg: @brand-success;
@btn-success-border: @btn-success-bg;
@btn-jade-color: darken(#fff, 1%);
@btn-jade-bg: #62c98f;
@btn-jade-bg-hover: #20c97b;
@btn-jade-border: @btn-jade-bg;
@btn-warning-color: darken(#fff, 1%);
@btn-warning-bg: @brand-warning;
@btn-warning-border: @btn-warning-bg;
@btn-danger-color: darken(#fff, 1%);
@btn-danger-bg: @brand-danger;
@btn-danger-border: @btn-danger-bg;
@btn-info-color: darken(#fff, 1%);
@btn-info-bg: @brand-info;
@btn-info-border: @btn-info-bg;
@btn-inverse-color: @gray-darker;
@btn-inverse-bg: @brand-inverse;
@btn-inverse-border: @btn-inverse-bg;