uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
124 lines (91 loc) • 4.25 kB
text/less
//
// Component: Variables
// Description: Defines common values which are used across all components
//
// ========================================================================
// Load deprecated components
// ========================================================================
@deprecated: false;
// Breakpoints
// ========================================================================
// Phone Portrait: Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736)
// Phone Landscape: Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414)
// Tablet Portrait: iPad (768x1024), Galaxy Tab (800x1280),
// Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366),
// Desktop: Galaxy Tab (1280x800), iPad Pro (1366x1024)
@breakpoint-small: 640px; // Phone landscape
@breakpoint-medium: 960px; // Tablet Landscape
@breakpoint-large: 1200px; // Desktop
@breakpoint-xlarge: 1600px; // Large Screens
@breakpoint-xsmall-max: (@breakpoint-small - 1);
@breakpoint-small-max: (@breakpoint-medium - 1);
@breakpoint-medium-max: (@breakpoint-large - 1);
@breakpoint-large-max: (@breakpoint-xlarge - 1);
// Global variables
// ========================================================================
//
// Typography
//
@global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@global-font-size: 16px;
@global-line-height: 1.5; // 24px
@global-2xlarge-font-size: 2.625rem; // 42px
@global-xlarge-font-size: 2rem; // 32px
@global-large-font-size: 1.5rem; // 24px
@global-medium-font-size: 1.25rem; // 20px
@global-small-font-size: 0.875rem; // 14px
//
// Colors
//
@global-color: #666;
@global-emphasis-color: #333;
@global-muted-color: #999;
@global-link-color: #1e87f0;
@global-link-hover-color: #0f6ecd;
@global-inverse-color: #fff;
//
// Backgrounds
//
@global-background: #fff;
@global-muted-background: #f8f8f8;
@global-primary-background: #1e87f0;
@global-secondary-background: #222;
@global-success-background: #32d296;
@global-warning-background: #faa05a;
@global-danger-background: #f0506e;
//
// Borders
//
@global-border-width: 1px;
@global-border: #e5e5e5;
//
// Box-Shadows
//
@global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08);
@global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08);
@global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16);
@global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16);
//
// Spacings
//
// Used in margin, section, list
@global-margin: 20px;
@global-small-margin: 10px;
@global-medium-margin: 40px;
@global-large-margin: 70px;
@global-xlarge-margin: 140px;
// Used in grid, column, container, align, card, padding
@global-gutter: 30px;
@global-small-gutter: 15px;
@global-medium-gutter: 40px;
@global-large-gutter: 70px;
//
// Controls
//
@global-control-height: 40px;
@global-control-small-height: 30px;
@global-control-large-height: 55px;
//
// Z-index
//
@global-z-index: 1000;