mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-29 17:36:49 +01:00
108 lines
2.8 KiB
SCSS
108 lines
2.8 KiB
SCSS
@use 'sass:color';
|
||
// 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.
|
||
// */
|
||
|
||
$images-root: '../images/';
|
||
|
||
// 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: theme('colors.secondary.DEFAULT');
|
||
$color-teal-darker: theme('colors.secondary.400');
|
||
$color-teal-dark: theme('colors.secondary.600');
|
||
|
||
$color-salmon: #f37e77;
|
||
$color-salmon-light: #fcf2f2;
|
||
$color-white: theme('colors.white.DEFAULT');
|
||
$color-black: theme('colors.black.DEFAULT');
|
||
|
||
// darker to lighter
|
||
$color-grey-1: theme('colors.grey.600');
|
||
$color-grey-2: theme('colors.grey.400');
|
||
$color-grey-3: theme('colors.grey.200');
|
||
$color-grey-4: theme('colors.grey.100');
|
||
$color-grey-5: theme('colors.grey.50');
|
||
|
||
$color-menu-text: theme('colors.white-80');
|
||
|
||
$color-fieldset-hover: $color-white;
|
||
$color-input-border: $color-grey-4;
|
||
$color-input-focus: theme('colors.secondary.50');
|
||
$color-input-focus-border: theme('colors.secondary.100');
|
||
$color-input-error-bg: theme('colors.critical.50');
|
||
|
||
$color-button: $color-teal;
|
||
$color-button-hover: $color-teal-darker;
|
||
$color-button-yes: theme('colors.positive.100');
|
||
$color-button-no: theme('colors.critical.200');
|
||
$color-button-warning: theme('colors.warning.100');
|
||
|
||
$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: theme('colors.grey.600');
|
||
$color-text-input: theme('colors.grey.600');
|
||
|
||
// System Colors
|
||
$media-forced-colours: active;
|
||
$system-color-link-text: LinkText;
|
||
$system-color-button-text: ButtonText;
|
||
|
||
// Fonts
|
||
// Our fonts are based off of a list of system fallbacks to ensure
|
||
// that the most 'up-to-date' and available system font is used and rendered consistently as possible across browsers.
|
||
|
||
$font-sans: theme('fontFamily.sans');
|
||
$font-mono: theme('fontFamily.mono');
|
||
|
||
// Legacy icon font, to be removed in the near future.
|
||
$font-wagtail-icons: wagtail;
|
||
|
||
// misc sizing
|
||
$thumbnail-width: 130px;
|
||
$menu-width: 200px;
|
||
$menu-width-slim: 60px;
|
||
|
||
$menu-width-max: 320px;
|
||
|
||
$mobile-nav-indent: 50px;
|
||
|
||
$sidebar-toggle-spacing: 12px;
|
||
$sidebar-toggle-size: 35px;
|
||
|
||
// transitions
|
||
// Please keep in sync with SIDEBAR_TRANSITION_DURATION variable in `client/src/components/Sidebar/Sidebar.tsx`
|
||
$menu-transition-duration: 150ms;
|
||
|
||
$focus-outline-width: 3px;
|
||
|
||
$object-title-height: 40px;
|