mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-29 17:36:49 +01:00
64dd361cf7
- Visual design – Collapsed sidebar is wider than intended - Visual design – Change “Edit your account” to “Account” tooltip - Visual design – Slim side bar on bird hover, make the bird a little big bigger (don’t make it shrink as much) - Visual design – Change the tooltip to the darker indigo (discussed with ben and this is no longer necessary) - Visual design – Expand the space between the menu items (add 3px padding) - then adjust the flyout menu items spacing too - Visual design – Get the labels and icons to align vertically (space between icon and label) - Visual design – Make the width 60px - Visual design – Make the arrows slightly smaller and closer to the icons on slim view - Visual design – Move the bird higher up and slightly smaller, as per the designs - Animations – I wonder if the new |-> icon should flip horizontally rather than roll? (or maybe not animate at all?) The rolling animation feels a little strange as I think the pipe is meant to represent the always vertical menu - Animations – The Bird seems to have two hover states (try slowly moving your mouse cursor from top to bottom and you'll see it's wing appears before the hover animation is triggered). Not sure if this is intended behaviour. - UX – Unexpected behavior with the search – clicking the "Search" icon submits a search, while all other icons in the sidebar are safe to click (This will expand the menu in slim mode and only have pointer events to submit in expanded mode which should be acceptable as its the submit button for the field?) Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
180 lines
4.9 KiB
SCSS
180 lines
4.9 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-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';
|
||
|
||
$font-mono:
|
||
// iOS Safari, MacOS Safari
|
||
ui-monospace, Menlo, Monaco,
|
||
// Windows
|
||
'Cascadia Mono',
|
||
'Segoe UI Mono',
|
||
// Linux
|
||
'Roboto Mono',
|
||
'Oxygen Mono', 'Ubuntu Monospace',
|
||
// Android
|
||
'Source Code Pro',
|
||
// Firefox
|
||
'Fira Mono',
|
||
// Last resort Android/others
|
||
'Droid Sans Mono',
|
||
'Courier New', monospace,
|
||
// 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;
|
||
|
||
$object-title-height: 40px;
|
||
|
||
// 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%
|
||
);
|