mirror of
https://github.com/atom/atom.git
synced 2026-01-14 01:18:01 -05:00
232 lines
7.2 KiB
Plaintext
232 lines
7.2 KiB
Plaintext
@import "ui-variables";
|
|
|
|
//
|
|
// Variables (Forked from Bootstrap 3.3.6)
|
|
// Don't use these variables in packages/themes.
|
|
// Only use the public ui-variables.less + syntax-variables.less
|
|
// --------------------------------------------------
|
|
|
|
|
|
//== Colors
|
|
//
|
|
//## Gray and brand colors for use across Bootstrap.
|
|
|
|
@gray-base: #000;
|
|
@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, 93.5%); // #eee
|
|
|
|
@brand-primary: @text-color-info;
|
|
@brand-info: @text-color-info;
|
|
@brand-success: @text-color-success;
|
|
@brand-warning: @text-color-warning;
|
|
@brand-danger: @text-color-error;
|
|
|
|
|
|
//== Scaffolding
|
|
//
|
|
//## Settings for some of the most global styles.
|
|
|
|
//** Background color for `<body>`.
|
|
@body-bg: @app-background-color;
|
|
//** Global textual link color.
|
|
@link-color: @brand-primary;
|
|
//** Link hover color set via `darken()` function.
|
|
@link-hover-color: darken(@link-color, 15%);
|
|
//** Link hover decoration.
|
|
@link-hover-decoration: underline;
|
|
|
|
|
|
//== Typography
|
|
//
|
|
//## Font, line-height, and color for body text, headings, and more.
|
|
|
|
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
|
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
|
|
@font-size-base: @font-size;
|
|
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
|
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
|
|
|
//** Unit-less `line-height` for use in components like buttons.
|
|
@line-height-base: 1.428571429; // 20/14
|
|
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
|
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
|
|
|
|
|
//== Components
|
|
//
|
|
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
|
|
|
@padding-base-vertical: 6px;
|
|
@padding-base-horizontal: 12px;
|
|
|
|
@padding-large-vertical: 10px;
|
|
@padding-large-horizontal: 16px;
|
|
|
|
@padding-small-vertical: 5px;
|
|
@padding-small-horizontal: 10px;
|
|
|
|
@padding-xs-vertical: 1px;
|
|
@padding-xs-horizontal: 5px;
|
|
|
|
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
|
|
@line-height-small: 1.5;
|
|
|
|
@border-radius-base: 4px;
|
|
@border-radius-large: 6px;
|
|
@border-radius-small: 3px;
|
|
|
|
//** Global color for active items (e.g., navs or dropdowns).
|
|
@component-active-color: #fff;
|
|
//** Global background color for active items (e.g., navs or dropdowns).
|
|
@component-active-bg: @brand-primary;
|
|
|
|
//** Width of the `border` for generating carets that indicator dropdowns.
|
|
@caret-width-base: 4px;
|
|
//** Carets increase slightly in size for larger components.
|
|
@caret-width-large: 5px;
|
|
|
|
|
|
//== Buttons
|
|
//
|
|
//## For each of Bootstrap's buttons, define text, background and border color.
|
|
|
|
@btn-default-color: @text-color;
|
|
@btn-default-bg: @button-background-color;
|
|
|
|
@btn-primary-color: #fff;
|
|
@btn-primary-bg: @background-color-info;
|
|
|
|
@btn-success-color: #fff;
|
|
@btn-success-bg: @background-color-success;
|
|
|
|
@btn-info-color: #fff;
|
|
@btn-info-bg: @background-color-info;
|
|
|
|
@btn-warning-color: #fff;
|
|
@btn-warning-bg: @background-color-warning;
|
|
|
|
@btn-error-color: #fff;
|
|
@btn-error-bg: @background-color-error;
|
|
|
|
@btn-link-disabled-color: @text-color-subtle;
|
|
|
|
// Allows for customizing button radius independently from global border radius
|
|
@btn-border-radius-base: @component-border-radius;
|
|
@btn-border-radius-large: @component-border-radius * 2;
|
|
@btn-border-radius-small: @component-border-radius / 2;
|
|
|
|
|
|
|
|
//== Media queries breakpoints
|
|
//
|
|
//## Define the breakpoints at which your layout will change, adapting to different screen sizes
|
|
|
|
@screen-sm: 768px;
|
|
@screen-sm-min: @screen-sm;
|
|
|
|
@screen-xs-max: (@screen-sm-min - 1);
|
|
|
|
// //== Form states and alerts
|
|
// //
|
|
// //## Define colors for form feedback states and, by default, alerts.
|
|
//
|
|
@state-success-text: #3c763d;
|
|
@state-success-bg: #dff0d8;
|
|
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
|
|
|
@state-info-text: #31708f;
|
|
@state-info-bg: #d9edf7;
|
|
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
|
|
|
@state-warning-text: #8a6d3b;
|
|
@state-warning-bg: #fcf8e3;
|
|
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
|
|
|
|
@state-danger-text: #a94442;
|
|
@state-danger-bg: #f2dede;
|
|
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
|
|
|
|
|
|
// == List group
|
|
//
|
|
// ##
|
|
|
|
//** Background color on `.list-group-item`
|
|
@list-group-bg: #fff;
|
|
//** `.list-group-item` border color
|
|
@list-group-border: #ddd;
|
|
//** List group border radius
|
|
@list-group-border-radius: @border-radius-base;
|
|
|
|
//** Background color of single list items on hover
|
|
@list-group-hover-bg: #f5f5f5;
|
|
//** Text color of active list items
|
|
@list-group-active-color: @component-active-color;
|
|
//** Background color of active list items
|
|
@list-group-active-bg: @component-active-bg;
|
|
//** Border color of active list elements
|
|
@list-group-active-border: @list-group-active-bg;
|
|
//** Text color for content within active list items
|
|
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
|
|
|
//** Text color of disabled list items
|
|
@list-group-disabled-color: @gray-light;
|
|
//** Background color of disabled list items
|
|
@list-group-disabled-bg: @gray-lighter;
|
|
//** Text color for content within disabled list items
|
|
@list-group-disabled-text-color: @list-group-disabled-color;
|
|
|
|
@list-group-link-color: #555;
|
|
@list-group-link-hover-color: @list-group-link-color;
|
|
@list-group-link-heading-color: #333;
|
|
|
|
|
|
//== Thumbnails
|
|
//
|
|
//##
|
|
|
|
//** Padding around the thumbnail image
|
|
@thumbnail-padding: 4px;
|
|
//** Thumbnail background color
|
|
@thumbnail-bg: @body-bg;
|
|
//** Thumbnail border color
|
|
@thumbnail-border: #ddd;
|
|
//** Thumbnail border radius
|
|
@thumbnail-border-radius: @border-radius-base;
|
|
|
|
|
|
//== Type
|
|
//
|
|
//##
|
|
|
|
//** Horizontal offset for forms and lists.
|
|
@component-offset-horizontal: 180px;
|
|
//** Text muted color
|
|
@text-muted: @gray-light;
|
|
//** Abbreviations and acronyms border color
|
|
@abbr-border-color: @gray-light;
|
|
//** Headings small color
|
|
@headings-small-color: @gray-light;
|
|
//** Blockquote small color
|
|
@blockquote-small-color: @gray-light;
|
|
//** Blockquote font size
|
|
@blockquote-font-size: (@font-size-base * 1.25);
|
|
//** Blockquote border color
|
|
@blockquote-border-color: @gray-lighter;
|
|
//** Page header border color
|
|
@page-header-border-color: @gray-lighter;
|
|
//** Horizontal line color.
|
|
@hr-border: @gray-lighter;
|
|
|
|
|
|
//== Misc
|
|
//
|
|
//##
|
|
|
|
//** Disabled cursor for form controls and buttons.
|
|
@cursor-disabled: not-allowed;
|