123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 |
- @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-light: var(--color-primary-light);
- $color-teal-lighter: var(--color-primary-lighter);
- $color-teal: var(--color-primary);
- $color-teal-darker: var(--color-primary-darker);
- $color-teal-dark: var(--color-primary-dark);
- $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: color.adjust($color-white, $lightness: -80%);
- $color-grey-2: color.adjust($color-white, $lightness: -70%);
- $color-grey-3: color.adjust($color-white, $lightness: -15%);
- $color-grey-4: color.adjust($color-white, $lightness: -10%);
- $color-grey-5: color.adjust($color-white, $lightness: -2%);
- $color-menu-text: color.adjust($color-white, $lightness: -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: var(--color-input-focus);
- $color-input-focus-border: var(--color-input-focus-border);
- $color-input-error-bg: color.adjust(
- color.adjust($color-red, $saturation: 28%),
- $lightness: 45%
- );
- $color-button: $color-teal;
- $color-button-hover: $color-teal-darker;
- $color-button-yes: $color-green-dark;
- $color-button-yes-hover: color.adjust($color-button-yes, $lightness: -8%);
- $color-button-no: $color-red-dark;
- $color-button-no-hover: color.adjust($color-button-no, $lightness: -20%);
- $color-button-warning: $color-orange-dark;
- $color-button-warning-hover: color.adjust(
- $color-button-warning,
- $lightness: -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: color.adjust($color-white, $lightness: -85%);
- $color-text-input: color.adjust($color-white, $lightness: -90%);
- // 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:
- // iOS Safari, macOS Safari, macOS Firefox
- -apple-system,
- // macOS Chrome
- BlinkMacSystemFont,
- // Windows - for all browsers on Windows 7+ (putting Segoe UI before system-ui ensures Segoe UI will be rendered for different languages)
- 'Segoe UI',
- system-ui,
- // Targets Android and newer Chrome OS'. (If Roboto is installed on your windows computer Segoe UI will take precedence.)
- Roboto,
- // A common fallback font for older macOS'
- 'Helvetica Neue',
- // Very old Windows versions (special shout-out to whoever is using windows 95)
- Arial,
- // A last resort if all else fails, just give us something without serifs :)
- sans-serif,
- // All the emojis 👋🙂
- 'Apple Color Emoji',
- 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
- // 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;
- $nav-wrapper-inner-z-index: 26;
- $draftail-editor-z-index: $nav-wrapper-inner-z-index + 1;
- $object-title-height: 40px;
- // Nav
- $nav-grey-1: color.adjust($color-white, $lightness: -80%);
- $nav-grey-2: color.adjust($color-white, $lightness: -60%);
- $nav-grey-3: #262626;
- $nav-item-hover-bg: rgba(100, 100, 100, 0.15);
- $nav-item-active-bg: color.adjust($color-white, $lightness: -90%);
- $nav-submenu-bg: color.adjust($color-white, $lightness: -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: 85px;
- $nav-footer-open-height: $nav-footer-closed-height + $nav-footer-submenu-height;
- // Nav search
- $nav-search-color: color.adjust($color-white, $lightness: -20%);
- $nav-search-border: color.adjust($color-white, $lightness: -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;
- // Form Errors
- $color-text-error: color.change($color-red, $saturation: 69%, $lightness: 52%);
- $color-text-error-forced-color: color.change(
- $color-red,
- $saturation: 100%,
- $lightness: 50%
- );
- $color-text-warning-forced-color: color.change(
- $color-orange,
- $saturation: 100%,
- $lightness: 70%
- );
|