rangetouch/docs/src/less/variables.less

A super tiny library to make input type='range' sliders work better on touch devices

// ==========================================================================
// Variables
// ==========================================================================

// Colors
// ---------------------------------------
@blue: #0081c5;
@green: #00bd9c;
@orange: #ff946a;
@gray-dark: #343f4a;
@gray: #4f5b60;
@gray-light: #6b7d86;
@gray-lighter: #8799a2;
@gray-lightest: #b6c5cd;
@gray-light-mega: #dbe3e8;
@off-white: #f7f8fa;

// Brands
// ---------------------------------------
@color-twitter: #4baaf4;

// Set brand colors
// ---------------------------------------
@brand-primary: @blue;
@brand-secondary: @green;

// Base
// ---------------------------------------
@body-background: linear-gradient(to left top, @brand-secondary, @brand-primary);
@text-color: #fff;

// Type
// ---------------------------------------
@font-stack: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@font-size-base: 15;
@font-size-large: ceil(@font-size-base * 1.2);
@font-size-small: ceil(@font-size-base * 0.85);
@font-size-h1: 54;
@font-weight-light: 300;
@font-weight-regular: 400;
@font-weight-medium: 500;
@font-weight-bold: 600;
@font-weight-black: 900;
@line-height: 1.5;
@line-height-computed: (@line-height * @font-size-base);

// Radii
// ---------------------------------------
@border-radius-base: 4px;

// Links
// ---------------------------------------
@link-color: @brand-primary;
@link-color-hover: @brand-secondary;

// Padding
// ---------------------------------------
@padding-base: 30px;

// Focus
// ---------------------------------------
@focus-outline-color: @gray-dark;

// Arrows
// ---------------------------------------
@arrow-size: 8px;

// Icons
// ---------------------------------------
@icon-size: 18px;

// Range
// ---------------------------------------
@range-track-height: 6px;
@range-track-bg: fade(@gray-dark, 50%);
@range-thumb-height: 20px;
@range-thumb-width: 20px;
@range-thumb-bg: @body-background;
@range-thumb-border: 3px solid #fff;

// Breakpoints
// ---------------------------------------
@screen-sm: 480px;
@screen-md: 768px;