wagtail/client/scss/settings/_variables.scss

// paths

// We can't use absolute paths here, because those are dependent on Django's
// STATIC_URL setting. Instead, relative paths from the final location of the
// compiled CSS files are used.
// */

$static-root: '../../';
$images-root: $static-root + 'wagtailadmin/images/';
$font-root: '../../wagtailadmin/fonts/';

// grid settings
$grid-columns: 12;
$grid-gutter-width: 3%;
$grid-max-width: 1200px;
$grid-content-indent: 0.7;

$mobile-nice-padding: 20px;
$desktop-nice-padding: 50px;

// screen breakpoints
$breakpoints: (
    xs: 0,
    sm: 50em,    // 800px
    md: 56.25em, // 900px
    lg: 75em,    // 1200px
    xl: 100em,   // 1440px
);

// colours
$color-teal: #007d7e;
$color-teal-darker: darken(adjust-hue($color-teal, 1), 4);
$color-teal-dark: darken(adjust-hue($color-teal, 1), 7);

$color-blue: #71b2d4;
$color-red: #cd3238;
$color-red-dark: #b4191f;
$color-orange: #e9b04d;
$color-orange-dark: #bb5b03;
$color-green: #189370;
$color-green-dark: #157b57;
$color-green-darker: #105d42; // White has AAA compatibility when this is used in bgd.
$color-salmon: #f37e77;
$color-salmon-light: #fcf2f2;
$color-white: #fff;
$color-black: #000;

// darker to lighter
$color-grey-1: darken($color-white, 80);
$color-grey-2: darken($color-white, 70);
$color-grey-3: darken($color-white, 15);
$color-grey-4: darken($color-white, 10);
$color-grey-5: darken($color-white, 2);

$color-menu-text: darken($color-white, 20);

$color-thead-bg: $color-grey-5;
$color-header-bg: $color-teal;

$color-fieldset-hover: $color-grey-5;
$color-input-border: $color-grey-4;
$color-input-focus: lighten(desaturate($color-teal, 40), 72);
$color-input-focus-border: lighten(saturate($color-teal, 12), 10);
$color-input-error-bg: lighten(saturate($color-red, 28), 45);

$color-button: $color-teal;
$color-button-hover: $color-teal-darker;
$color-button-yes: $color-green-dark;
$color-button-yes-hover: darken($color-button-yes, 8%);
$color-button-no: $color-red-dark;
$color-button-no-hover: darken($color-button-no, 20%);
$color-button-warning: $color-orange-dark;
$color-button-warning-hover: darken($color-button-warning, 20%);

$color-link: $color-teal-darker;
$color-link-hover: $color-teal-dark;

// The focus outline color is defined without reusing a named color variable
// because it shouldn’t be reused for anything else in the UI.
$color-focus-outline: #ffbf47;

$color-text-base: darken($color-white, 85);
$color-text-input: darken($color-white, 90);

// Color states
$color-state-live: #59b524;
$color-state-draft: #808080;
$color-state-absent: #ff8f11;
$color-state-live-draft: #43b1b0;

// Fonts
$font-sans: Open Sans, Arial, sans-serif;
$font-serif: Roboto Slab, Georgia, serif;

// misc sizing
$thumbnail-width: 130px;
$menu-width: 200px;
$menu-width-max: 320px;
$mobile-nav-indent: 50px;

$focus-outline-width: 3px;

$nav-wrapper-inner-z-index: 26;
$draftail-editor-z-index: $nav-wrapper-inner-z-index + 1;

// Nav
$nav-grey-1: darken($color-white, 80);
$nav-grey-2: darken($color-white, 60);
$nav-item-hover-bg: rgba(100, 100, 100, 0.15);
$nav-item-active-bg: darken($color-white, 90);
$nav-submenu-bg: darken($color-white, 85);
$nav-footer-account-bg: $nav-item-active-bg;
$nav-footer-submenu-bg: $nav-submenu-bg;
$nav-footer-closed-height: 50px;
$nav-footer-submenu-height: 77px;
$nav-footer-open-height: $nav-footer-closed-height + $nav-footer-submenu-height;

// Nav search
$nav-search-color: darken($color-white, 20);
$nav-search-border: darken($color-white, 40);
$nav-search-bg: $nav-grey-1;
$nav-search-hover-bg: $nav-item-hover-bg;
$nav-search-focus-color: $color-white;
$nav-search-focus-bg: $nav-item-hover-bg;