touchstonejs-ui
Version:
React.js UI components for the TouchstoneJS platform http://touchstonejs.io
250 lines (160 loc) • 6.28 kB
text/less
//
// Variables
// ==============================
// Colors
// ------------------------------
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 40%); // #666
@gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
@green: #4acc1f;
@blue: #007aff;
@light-blue: #5ac8fa;
@yellow: #ff9d34;
@red: #ff3f34;
@app-primary: @blue;
@app-muted: @gray-light;
@app-success: @green;
@app-info: @light-blue;
@app-warning: @yellow;
@app-danger: @red;
// Scaffolding
// ------------------------------
@body-bg: #f6f6f7;
@text-color: black;
@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: "Times New Roman", Times, Georgia, serif;
@font-family-monospace: Courier, monospace;
@font-family-base: @font-family-sans-serif;
@font-weight-bold: 500;
@font-size-xxs: 11px;
@font-size-xs: 13px;
@font-size-sm: 15px;
@font-size-base: 17px;
@font-size-lg: 20px;
@font-size-xl: 24px;
@font-size-xxl: 32px;
@line-height-base: 1.4;
@line-height-computed: floor((@font-size-base * @line-height-base));
@hr-border: rgba(0, 0, 0, 0.1);
@headings-font-family: @font-family-base;
@headings-font-weight: 400;
@headings-line-height: 1.1;
@headings-color: inherit;
@font-size-h1: 36px;
@font-size-h2: 24px;
@font-size-h3: 18px;
@font-size-h4: 16px;
@font-size-h5: 14px;
@font-size-h6: 12px;
@icon-size-tiny: 8px;
@icon-size-small: 12px;
@icon-size-base: 16px;
@icon-size-large: 24px;
@icon-size-huge: 32px;
@icon-size-massive: 64px;
@icon-size-gargantuan: 128px;
// Components
// ------------------------------
// lists
@list-header-color: #4d4d4d;
// border radii
@border-radius-small: 4px;
@border-radius-base: 8px;
@border-radius-large: 16px;
// gutters
@gutter-sm: 8px;
@gutter-base: 10px;
@gutter-lg: 34px;
// groups
@group-bg: white;
@group-color: @text-color;
@group-header-color: #4d4d4d;
@group-footer-color: @group-header-color;
// items
@item-bg: @group-bg;
@item-bg-tap: #d9d9d9;
@item-color: @text-color;
@item-divider-color: mix(black, @body-bg, 20%);
@item-height: 44px;
@item-avatar-size: 40px;
@item-thumbnail-size: 60px;
@item-icon-size: 29px;
// spacing
@padding-base-vertical: 12px;
@padding-base-horizontal: 15px;
// buttons
@button-disabled-color: #c7c7cc;
// segmented controls
@segmented-control-height: 29px;
// Headerbar
// ------------------------------
@statusbar-height: 20px;
@headerbar-bg: #efeff4;
@headerbar-color: @gray-darker;
@headerbar-height: 44px;
@headerbar-button-color: @app-primary;
@headerbar-button-color-disabled: #ccc;
@headerbar-left-arrow-width: 12px;
@headerbar-left-arrow-with-gutter: @headerbar-left-arrow-width + (@gutter-sm * 2);
@searchfield-height: 28px;
// Footerbar
// ------------------------------
@footerbar-bg: @headerbar-bg;
@footerbar-color: @headerbar-color;
@footerbar-height: @headerbar-height;
@footerbar-tab-bg-tapped: transparent;
@footerbar-tab-bg-selected: transparent;
@footerbar-tab-color-tapped: inherit;
@footerbar-tab-color-selected: @app-primary;
// Forms
// ------------------------------
@field-color: @text-color;
@field-border: #ddd;
@field-border-focus: darken(@field-border, 10%);
@field-placeholder: #c7c7cd;
@field-label-color: @gray;
@field-height: 44px;
@field-padding-vertical: @padding-base-vertical;
@field-padding-horizontal: @padding-base-horizontal;
// Layers
// ------------------------------
@zindex-dropdown: 1000;
@zindex-popover: 1010;
@zindex-tooltip: 1030;
@zindex-popup-backdrop: 1040;
@zindex-popup: 1050;
@zindex-alertbar: 1060;
// Views
// -------------------------------
// transitions
@view-transition-distance: 125px; // TODO: 375/3 (375 = width of iPhone 6)
@view-transition-duration: 500ms; // emulate iOS
@view-transition-timing-function: cubic-bezier(.36, .66, .04, 1); // emulate iOS
// stack
@view-transition-stack-stable: 5;
@view-transition-stack-top: 20;
@view-transition-stack-bottom: 10;
// Switch
// -------------------------------
@switch-width: 51px;
@switch-height: 31px;
@switch-border-width: 2px;
@switch-border-radius: 20px;
@switch-handle-width: @switch-height - (@switch-border-width * 2);
@switch-handle-height: @switch-handle-width;
@switch-handle-radius: @switch-handle-width;
@switch-handle-dragging-bg-color: darken(#fff, 5%);
@switch-on-default-bg: #4cd964;
@switch-on-default-border: @switch-on-default-bg;
@switch-off-bg-color: #fff;
@switch-off-border-color: #e6e6e6;
@switch-handle-off-bg-color: white;
@switch-handle-on-bg-color: @switch-handle-off-bg-color;
@switch-transition-duration: .3s;
@switch-hit-area-expansion: 5px;