mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +08:00
3da5c31cdd
Summary: Added animation and input with url of gmail auth for users where the broswer redirect doesnt work. Still need to finish up some minor styling. style(onboarding): add input with link for gmail auth if browser redirect doesnt work Test Plan: testing on my local install Reviewers: juan Reviewed By: juan Subscribers: sdw Differential Revision: https://phab.nylas.com/D3119
240 lines
7.7 KiB
Plaintext
240 lines
7.7 KiB
Plaintext
// Color abstraction hierarchy:
|
|
// 1. Hex code (#428bca)
|
|
// 2. Common color name (@blue)
|
|
// 3. Generic color descriptor (@accent-primary, @background-primary)
|
|
// --------
|
|
// 4. Generic usage descriptor (@input-background, @button-background)
|
|
// 5. Application-specific usage (@unread-label-background)
|
|
|
|
// Typography abstraction hierarchy
|
|
// 1. Font-face (Nylas-Pro)
|
|
// 2. Common name (@bold, @italic)
|
|
// 3. Generic font descriptor mixins (.bold, .italic, .h1, .h2)
|
|
// --------
|
|
// 4. Generic usage descriptor (.btn-text, .p-body)
|
|
// 5. Application-specific usage (.message-list-h1)
|
|
|
|
|
|
//=============================== Colors ===============================//
|
|
//== Color Definitions
|
|
@black: #231f20;
|
|
@gray-base: #0a0b0c;
|
|
@gray-darker: lighten(@gray-base, 13.5%); // #222
|
|
@gray-dark: lighten(@gray-base, 20%); // #333
|
|
@gray: lighten(@gray-base, 33.5%); // #555
|
|
@gray-light: lighten(@gray-base, 46.7%); // #777
|
|
@gray-lighter: lighten(@gray-base, 92.5%); // #eee
|
|
@white: #ffffff;
|
|
|
|
@blue-dark: #3187e1;
|
|
@blue: #419bf9;
|
|
@blue-light: #009ec4;
|
|
|
|
//== Color Descriptors
|
|
@accent-primary: @blue;
|
|
@accent-primary-dark: @blue-dark;
|
|
|
|
@background-primary: @white;
|
|
@background-off-primary: #fdfdfd;
|
|
@background-secondary: #f6f6f6;
|
|
@background-tertiary: #6d7987;
|
|
|
|
@color-info: @blue-dark;
|
|
@color-success: #5CB346;
|
|
@color-warning: #f0ad4e;
|
|
@color-error: #d9534f;
|
|
@color-danger: #d9534f;
|
|
|
|
@component-active-color: @accent-primary-dark;
|
|
@component-active-bg: @background-primary;
|
|
|
|
@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%,
|
|
rgba(253,253,253,0.75) 100%);
|
|
|
|
@border-color-primary: darken(@background-primary, 10%);
|
|
@border-color-secondary: darken(@background-secondary, 10%);
|
|
@border-color-tertiary: darken(@background-tertiary, 10%);
|
|
@border-color-divider: @border-color-secondary;
|
|
|
|
|
|
//============================= Typography =============================//
|
|
|
|
// ----- Colors -----
|
|
@text-color: @black;
|
|
@text-color-subtle: fadeout(@text-color, 20%);
|
|
@text-color-very-subtle: fadeout(@text-color, 50%);
|
|
@text-color-inverse: @white;
|
|
@text-color-inverse-subtle: fadeout(@text-color-inverse, 20%);
|
|
@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
|
|
|
|
@text-color-heading: #434648;
|
|
|
|
@text-color-link: @blue;
|
|
@text-color-link-hover: @blue-dark;
|
|
@text-color-link-active: @blue-dark;
|
|
|
|
@text-color-selected: @text-color-inverse;
|
|
|
|
@text-color-search-match: #fff000;
|
|
@text-color-search-current-match: #ff8b1a;
|
|
|
|
@font-family-sans-serif: "Nylas-Pro", "Helvetica", sans-serif;
|
|
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
|
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
|
|
@font-family: @font-family-sans-serif;
|
|
@font-family-heading: @font-family-sans-serif;
|
|
|
|
// ----- Font Weights -----
|
|
@font-weight-thin: 200;
|
|
@font-weight-blond: 300;
|
|
@font-weight-normal: 400;
|
|
@font-weight-medium: 500;
|
|
@font-weight-semi-bold: 600;
|
|
@headings-font-weight: 600;
|
|
|
|
// ----- Font Sizes -----
|
|
@font-size-base: 14px;
|
|
|
|
@font-size-tiny: @font-size-base * 0.75; // 10.5px
|
|
@font-size-smaller: @font-size-base * 0.86; // 12px
|
|
@font-size-small: @font-size-base * 0.93; // 13px
|
|
@font-size: @font-size-base; // 14px
|
|
@font-size-large: @font-size-base * 1.14; // 16px
|
|
@font-size-larger: @font-size-base * 1.29; // 18px
|
|
|
|
@font-size-h1: @font-size-base * 1.71; // 24px
|
|
@font-size-h2: @font-size-base * 1.71; // 24px
|
|
@font-size-h3: @font-size-base * 1.43; // 20px
|
|
@font-size-h4: @font-size-base * 1.29; // 18px
|
|
@font-size-h5: @font-size-base;
|
|
@font-size-h6: @font-size-base * 0.86; // 12px
|
|
|
|
// ----- Line Height -----
|
|
@line-height-base: 1.5; // 22.5/15
|
|
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
|
@line-height-heading: 1.1;
|
|
|
|
|
|
//============================== Spacing ===============================//
|
|
// Define common padding and border radius sizes and more. Values based on
|
|
// 14px text and 1.428 line-height (~20px to start).
|
|
|
|
@spacing-standard: @font-size-base;
|
|
|
|
@spacing-quarter: @spacing-standard * 0.25;
|
|
@spacing-half: @spacing-standard * 0.5;
|
|
@spacing-three-quarters: @spacing-standard * 0.75;
|
|
@spacing-double: @spacing-standard * 2;
|
|
|
|
@padding-base-vertical: 5px;
|
|
@padding-base-horizontal: 12px;
|
|
|
|
@padding-large-vertical: 9px;
|
|
@padding-large-horizontal: 16px;
|
|
|
|
@padding-small-vertical: 4px;
|
|
@padding-small-horizontal: 10px;
|
|
|
|
@padding-xs-vertical: 1px;
|
|
@padding-xs-horizontal: 5px;
|
|
|
|
@line-height-large: @line-height-computed * 1.3;
|
|
@line-height-small: @line-height-computed * 0.95;
|
|
|
|
@border-radius-base: 3px;
|
|
@border-radius-large: 5px;
|
|
@border-radius-small: 2px;
|
|
|
|
|
|
//============================== Shadows ===============================//
|
|
|
|
@standard-shadow-color: rgba(0, 0, 0, 0.15);
|
|
@standard-shadow: 0 1px 4px 0 @standard-shadow-color;
|
|
@standard-shadow-up: 0 -1px 4px 0 @standard-shadow-color;
|
|
@shadow-border: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color,
|
|
0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color;
|
|
|
|
|
|
//=============================== Buttons ==============================//
|
|
|
|
@btn-shadow: @standard-shadow;
|
|
|
|
@btn-default-bg-color: darken(@background-primary, 0.5%);
|
|
@btn-default-text-color: @text-color;
|
|
|
|
@btn-icon-color: #919191;
|
|
|
|
@btn-action-bg-color: @color-success;
|
|
@btn-action-text-color: @text-color;
|
|
|
|
@btn-emphasis-bg-color: #5b90fb;
|
|
@btn-emphasis-text-color: @text-color-inverse;
|
|
|
|
@btn-danger-bg-color: @color-danger;
|
|
@btn-danger-text-color: @text-color-inverse;
|
|
|
|
|
|
//=============================== Dropdowns ============================//
|
|
|
|
@dropdown-default-bg-color: @background-primary;
|
|
@dropdown-default-text-color: @text-color;
|
|
@dropdown-default-border-color: fadeout(@border-color-primary, 10%);
|
|
|
|
|
|
//=============================== Inputs ===============================//
|
|
|
|
@input-bg: @white;
|
|
@input-bg-disabled: @gray-lighter;
|
|
|
|
@input-border-color: fadeout(@border-color-primary, 10%);
|
|
@input-border-color-blurred: desaturate(@input-border-color, 100%);
|
|
|
|
@input-font-size: 14px;
|
|
|
|
|
|
//=============================== Components ===========================//
|
|
|
|
//== Toolbar
|
|
@toolbar-background-color: darken(@white, 17.5%);
|
|
|
|
//== Account Sidebar
|
|
@panel-background-color: @gray-lighter;
|
|
@source-list-bg: @panel-background-color;
|
|
@source-list-active-bg: @panel-background-color;
|
|
@source-list-active-color: @component-active-color;
|
|
|
|
//== Thread List (e.g, `.list-group-item`, `.list-item`)
|
|
@list-bg: @white;
|
|
@list-border: #ddd;
|
|
@list-hover-bg: darken(@list-bg, 4%);
|
|
@list-focused-color: @list-bg;
|
|
@list-focused-bg: @component-active-color;
|
|
@list-focused-border: @list-focused-bg;
|
|
@list-selected-color: inherit;
|
|
@list-selected-bg: mix(@component-active-color, @list-bg, 17%);
|
|
@list-selected-border: mix(@component-active-color, @list-bg, 50%);
|
|
|
|
//== Notifications
|
|
@background-color-info: @blue-light;
|
|
@background-color-success: #00ac6f;
|
|
@background-color-warning: #ff4800;
|
|
@background-color-error: #ca2541;
|
|
@background-color-pending: #b4babd;
|
|
|
|
//== Menus
|
|
@menu-item-color-hover: fade(@blue-light, 10%);
|
|
@menu-item-color-selected: @blue-light;
|
|
@menu-text-color-selected: @text-color-inverse;
|
|
|
|
//== Sizes
|
|
@component-padding: 10px;
|
|
@component-icon-padding: 5px;
|
|
@component-icon-size: 16px;
|
|
@component-line-height: 25px;
|
|
@component-border-radius: 2px;
|
|
|
|
|
|
// Helpers for Specs - Do Not Remove
|
|
@spec-test-variable: rgb(152,123,0);
|