1
1
mirror of https://github.com/primer/css.git synced 2024-12-28 08:31:58 +03:00
css/scss/_variables.scss

108 lines
3.0 KiB
SCSS
Raw Normal View History

2016-02-17 19:26:50 +03:00
// These are our margin and padding utility spacers. The default step size we
// use is 6px. This gives us a key of:
// 0 => 0px
// 1 => 3px
// 2 => 6px
// 3 => 12px
// 4 => 24px
// 5 => 36px
$spacer: 6px !default;
$spacers: (
0,
round($spacer / 2),
$spacer,
$spacer * 2,
$spacer * 4,
$spacer * 6
) !default;
// Aliases for easy use
2016-03-04 18:42:22 +03:00
$spacer1: nth($spacers, 2) !default; // 3px
$spacer2: nth($spacers, 3) !default; // 6px
$spacer3: nth($spacers, 4) !default; // 12px
$spacer4: nth($spacers, 5) !default; // 24px
$spacer5: nth($spacers, 6) !default; // 36px
$container-width: 980px !default;
$grid-gutter: 10px !default;
2016-03-04 19:55:21 +03:00
// ---- Colors ----
// Brand
$blue: #4078c0 !default;
$gray-dark: #333 !default;
2016-03-04 19:55:21 +03:00
$gray-light: #999 !default;
$gray: #767676 !default;
$green: #6cc644 !default;
$orange: #c9510c !default;
$purple: #6e5494 !default;
$red: #bd2c00 !default;
$white: #fff !default;
2016-03-04 18:42:22 +03:00
// State indicators.
2016-03-04 19:55:21 +03:00
$status-renamed: #fffa5d !default;
$status-pending: #cea61b !default;
2016-03-04 18:42:22 +03:00
// Repository type colors
$repo-private-text: #a1882b !default;
$repo-private-bg: #fff9ea !default;
$repo-private-icon: #e9dba5 !default;
2016-02-17 19:26:50 +03:00
// Alerts
$flash-border-blue: #bac6d3 !default;
$flash-bg-blue: #e2eef9 !default;
$flash-text-blue: #246 !default;
$flash-border-yellow: #dfd8c2 !default;
$flash-bg-yellow: #fff9ea !default;
$flash-text-yellow: #4c4a42 !default;
$flash-border-red: #d2b2b2 !default;
$flash-bg-red: #fcdede !default;
$flash-text-red: #911 !default;
2016-03-04 19:55:21 +03:00
// Border colors
$border-blue: #c5d5dd !default;
$border-gray-dark: #ddd !default;
2016-02-17 19:26:50 +03:00
$border-gray-light: #eee !default;
2016-03-04 19:55:21 +03:00
$border-gray: #e5e5e5 !default;
// Background colors
$bg-blue-light: #f2f8fa !default;
$bg-blue: $blue !default;
2016-03-04 19:55:21 +03:00
$bg-gray-dark: $gray-dark !default;
$bg-gray-light: #fafafa !default;
$bg-gray: #f5f5f5 !default;
2016-03-04 19:55:21 +03:00
$bg-green: $green !default;
$bg-orange: $orange !default;
$bg-purple: $purple !default;
2016-03-04 19:55:21 +03:00
$bg-red: $red !default;
$bg-white: $white !default;
2016-03-04 19:55:21 +03:00
// Text colors
$text-blue: $blue !default;
$text-gray-dark: $gray-dark !default;
2016-03-04 19:55:21 +03:00
$text-gray-light: $gray-light !default;
$text-gray: $gray !default;
$text-green: darken($green, 10%) !default;
$text-orange: $orange !default;
$text-purple: $purple !default;
$text-red: $red !default;
$text-white: $white !default;
2016-03-04 19:55:21 +03:00
// Border size
$border-width: 1px !default;
$border-color: $border-gray !default;
$border-style: solid !default;
$border: $border-width $border-color $border-style !default;
2016-02-17 19:26:50 +03:00
$border-radius: 3px !default;
2016-03-04 18:42:22 +03:00
// Font stacks
$body-font: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
// Monospace font stack
$mono-font: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
// The base body size
$body-font-size: 13px !default;