From 082b77d610a834a3d6ce32d227f5cb320eac6c9c Mon Sep 17 00:00:00 2001 From: Sohee Lim Date: Thu, 31 Oct 2024 15:06:45 -0400 Subject: [PATCH] feat: add homepage --- assets/navigation-bundle.js | 107 +- assets/tailwind-output.css | 279 +- rollup.config.mjs | 67 +- script.js | 657 +-- src/index.js | 12 +- src/lib/types.ts | 133 +- src/modules/footer/Footer.tsx | 2 +- src/modules/homepage/Homepage.tsx | 182 + src/modules/homepage/index.tsx | 1 + src/modules/homepage/renderHomepage.tsx | 18 + src/modules/navigation/Navigation.tsx | 6 +- src/modules/navigation/ThemeSwitch.tsx | 4 +- src/modules/navigation/renderNavigation.tsx | 19 +- src/modules/shared/index.ts | 6 +- src/navigation.js | 48 +- src/svgs/Icons/index.tsx | 346 +- style.css | 4499 ------------------- styles/index.scss | 90 +- styles/main.css | 6 + tailwind.config.ts | 267 +- templates/document_head.hbs | 3 +- templates/footer.hbs | 4 +- templates/header.hbs | 2 - templates/home_page.hbs | 162 +- 24 files changed, 1161 insertions(+), 5759 deletions(-) create mode 100644 src/modules/homepage/Homepage.tsx create mode 100644 src/modules/homepage/index.tsx create mode 100644 src/modules/homepage/renderHomepage.tsx diff --git a/assets/navigation-bundle.js b/assets/navigation-bundle.js index 4a5327dd2..5483bb036 100644 --- a/assets/navigation-bundle.js +++ b/assets/navigation-bundle.js @@ -1,4 +1,6 @@ import { j as jsxRuntimeExports, ab as cn, ac as api, r as reactExports, ad as Ye, ae as yt, af as je, a7 as reactDomExports, a8 as ThemeProviders, a9 as createTheme } from 'shared'; +import { T as ThemeIconMap, S as Sun, M as Moon, C as Close, a as Menu } from 'index'; +import { P as PrimaryButton, L as LinkBase, B as ButtonBase } from 'index'; const MiniUnicon = ({ className, color = "accent-1" }) => { return (jsxRuntimeExports.jsxs("svg", { className: cn("MiniUnicon", className), viewBox: "0 0 96 96", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("path", { d: "M32.1304 9.55767C30.947 9.37684 30.8971 9.35561 31.454 9.27131C32.5212 9.10963 35.0413 9.32997 36.7779 9.73674C40.8321 10.686 44.5213 13.1178 48.4591 17.4366L49.5053 18.5839L51.0019 18.3469C57.3068 17.3489 63.7208 18.1421 69.0855 20.5832C70.5613 21.2548 72.8883 22.5917 73.179 22.9353C73.2716 23.0448 73.4417 23.7495 73.5569 24.5016C73.9554 27.1034 73.7559 29.0978 72.9481 30.5873C72.5084 31.3979 72.4839 31.6548 72.7794 32.3485C73.0154 32.9021 73.6732 33.3118 74.3245 33.3109C75.6577 33.3091 77.0927 31.1863 77.7575 28.2325L78.0216 27.0592L78.5448 27.643C81.4146 30.8457 83.6686 35.2134 84.0558 38.3224L84.1566 39.133L83.6743 38.3961C82.8441 37.128 82.01 36.2648 80.9418 35.5686C79.0164 34.3137 76.9805 33.8866 71.5888 33.6067C66.7192 33.3539 63.9632 32.9442 61.2304 32.0664C56.5808 30.5732 54.2369 28.5845 48.7138 21.4466C46.2606 18.2762 44.7443 16.5221 43.236 15.1094C39.8088 11.8997 36.4412 10.2163 32.1304 9.55767Z", className: cn({ @@ -31,99 +33,6 @@ const MiniUnicon = ({ className, color = "accent-1" }) => { }) })] })); }; -const Menu = ({ className, color = "neutral-2" }) => { - return (jsxRuntimeExports.jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { d: "M2 6C2 5.448 2.448 5 3 5H21C21.552 5 22 5.448 22 6C22 6.552 21.552 7 21 7H3C2.448 7 2 6.552 2 6ZM21 11H3C2.448 11 2 11.448 2 12C2 12.552 2.448 13 3 13H21C21.552 13 22 12.552 22 12C22 11.448 21.552 11 21 11ZM21 17H3C2.448 17 2 17.448 2 18C2 18.552 2.448 19 3 19H21C21.552 19 22 18.552 22 18C22 17.448 21.552 17 21 17Z", className: cn({ - "fill-light-neutral-2 dark:fill-dark-neutral-2": color === "neutral-2", - }) }) })); -}; -const Close = ({ className, color = "neutral-2" }) => { - return (jsxRuntimeExports.jsx("svg", { className: className, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L8.41421 7L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L7 8.41421L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z", className: cn("transition-all", { - "fill-light-neutral-2 group-hover:fill-light-neutral-1 dark:fill-dark-neutral-2 group-hover:dark:fill-dark-neutral-1": color === "neutral-2", - }) }) })); -}; -const Sun = ({ className, color = "neutral-2" }) => { - return (jsxRuntimeExports.jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { className: cn({ - "fill-light-neutral-2 dark:fill-dark-neutral-2": color === "neutral-2", - }), d: "M11 8C11 9.654 9.654 11 8 11C6.346 11 5 9.654 5 8C5 6.346 6.346 5 8 5C9.654 5 11 6.346 11 8ZM8.5 3.33333V2C8.5 1.724 8.276 1.5 8 1.5C7.724 1.5 7.5 1.724 7.5 2V3.33333C7.5 3.60933 7.724 3.83333 8 3.83333C8.276 3.83333 8.5 3.60933 8.5 3.33333ZM8.5 14V12.6667C8.5 12.3907 8.276 12.1667 8 12.1667C7.724 12.1667 7.5 12.3907 7.5 12.6667V14C7.5 14.276 7.724 14.5 8 14.5C8.276 14.5 8.5 14.276 8.5 14ZM3.83333 8C3.83333 7.724 3.60933 7.5 3.33333 7.5H2C1.724 7.5 1.5 7.724 1.5 8C1.5 8.276 1.724 8.5 2 8.5H3.33333C3.60933 8.5 3.83333 8.276 3.83333 8ZM14.5 8C14.5 7.724 14.276 7.5 14 7.5H12.6667C12.3907 7.5 12.1667 7.724 12.1667 8C12.1667 8.276 12.3907 8.5 12.6667 8.5H14C14.276 8.5 14.5 8.276 14.5 8ZM5.054 5.054C5.24933 4.85866 5.24933 4.54199 5.054 4.34666L4.11133 3.40399C3.91599 3.20866 3.59933 3.20866 3.40399 3.40399C3.20866 3.59933 3.20866 3.91599 3.40399 4.11133L4.34666 5.054C4.44399 5.15133 4.57199 5.20066 4.69999 5.20066C4.82799 5.20066 4.956 5.15133 5.054 5.054ZM12.596 12.596C12.7913 12.4007 12.7913 12.084 12.596 11.8887L11.6533 10.946C11.458 10.7507 11.1413 10.7507 10.946 10.946C10.7507 11.1413 10.7507 11.458 10.946 11.6533L11.8887 12.596C11.986 12.6933 12.114 12.7427 12.242 12.7427C12.37 12.7427 12.4987 12.694 12.596 12.596ZM4.11133 12.596L5.054 11.6533C5.24933 11.458 5.24933 11.1413 5.054 10.946C4.85866 10.7507 4.54199 10.7507 4.34666 10.946L3.40399 11.8887C3.20866 12.084 3.20866 12.4007 3.40399 12.596C3.50133 12.6933 3.62932 12.7427 3.75732 12.7427C3.88532 12.7427 4.01333 12.694 4.11133 12.596ZM11.6533 5.054L12.596 4.11133C12.7913 3.91599 12.7913 3.59933 12.596 3.40399C12.4007 3.20866 12.084 3.20866 11.8887 3.40399L10.946 4.34666C10.7507 4.54199 10.7507 4.85866 10.946 5.054C11.0433 5.15133 11.1713 5.20066 11.2993 5.20066C11.4273 5.20066 11.5553 5.15133 11.6533 5.054Z" }) })); -}; -const Moon = ({ className, color = "neutral-2" }) => { - return (jsxRuntimeExports.jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { className: cn({ - "fill-light-neutral-2 dark:fill-dark-neutral-2": color === "neutral-2", - }), d: "M8.75534 1.33337C8.75734 1.33337 8.76001 1.33337 8.76201 1.33337C8.97468 1.33337 9.06667 1.59538 8.90667 1.73338C7.786 2.69804 7.17002 4.2147 7.48402 5.84937C7.83268 7.66337 9.32535 9.04403 11.182 9.29203C12.3547 9.4487 13.4407 9.15203 14.304 8.55937C14.4793 8.4387 14.712 8.59804 14.6594 8.80204C13.9234 11.6794 11.084 13.73 7.84467 13.268C5.15401 12.884 3.02935 10.7247 2.71068 8.06337C2.54402 6.67537 2.85933 5.36738 3.51333 4.28005C4.57333 2.51605 6.52401 1.33337 8.75534 1.33337Z" }) })); -}; -const IconMap = ({ icon, color, className }) => { - switch (icon) { - case "sun": - return jsxRuntimeExports.jsx(Sun, { color: color, className: className }); - case "moon": - return jsxRuntimeExports.jsx(Moon, { color: color, className: className }); - default: - console.warn(`Icon ${icon} not found`); - return null; - } -}; - -function isValidEmail(href) { - // Regular expression to validate email address - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - return emailRegex.test(href); -} -function formatHrefAsMailto(href) { - // Check if the href is a valid email address - if (isValidEmail(href)) { - // If it doesn't already start with "mailto:", add it - if (!href.startsWith("mailto:")) { - return `mailto:${href}`; - } - } - // Return the original href if it's not an email or already formatted correctly - return href; -} - -const PrimaryButton = (props) => { - const { color = "accent-1", size = "medium", fullWidth = false, theme, } = props; - const containerStyle = cn("transition-colors flex flex-row items-center justify-center", { - "bg-light-accent-1 dark:bg-dark-accent-1 hover:bg-light-accent-1-hovered dark:hover:bg-dark-accent-1-hovered": !theme && color === "accent-1", - "bg-light-accent-2 dark:bg-dark-accent-2 hover:bg-light-accent-2-hovered dark:hover:bg-dark-accent-2-hovered": !theme && color === "accent-2", - "bg-light-surface-3 dark:bg-dark-surface-3 hover:bg-light-surface-3-hovered dark:hover:bg-dark-surface-3-hovered": !theme && color === "surface-3", - "bg-dark-accent-1 hover:bg-dark-accent-1-hovered": theme === "dark" && color === "accent-1", - "bg-light-accent-1 hover:bg-light-accent-1-hovered": theme === "light" && color === "accent-1", - "bg-dark-accent-2 hover:bg-dark-accent-2-hovered": theme === "dark" && color === "accent-2", - "bg-light-accent-2 hover:bg-light-accent-2-hovered": theme === "light" && color === "accent-2", - "rounded-small px-padding-small py-padding-small-dense": size === "medium", - "rounded-medium px-padding-large p-padding-medium": size === "large", - }); - const textStyle = cn({ - "text-white": color === "accent-1", - "text-light-accent-1 dark:text-dark-accent-1": color === "accent-2", - "text-light-neutral-1 dark:text-dark-neutral-1": color === "surface-3", - "button-label-4": size === "medium", - "button-label-2": size === "large", - }); - if ("href" in props) { - const { label, href, ariaLabel, className, onClick } = props; - return (jsxRuntimeExports.jsx("div", { className: cn("PrimaryButton flex", { - "w-full": fullWidth, - }), children: jsxRuntimeExports.jsx(LinkBase, { href: href, className: cn(containerStyle, className, { - "w-full": fullWidth, - }), ariaLabel: ariaLabel, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: textStyle, children: label }) }) })); - } - const { label, onClick, ariaLabel, role, className } = props; - return (jsxRuntimeExports.jsx("div", { className: "PrimaryButton flex", children: jsxRuntimeExports.jsx(ButtonBase, { onClick: onClick, className: cn(containerStyle, className), ariaLabel: ariaLabel, role: role, children: jsxRuntimeExports.jsx("span", { className: textStyle, children: label }) }) })); -}; -const ButtonBase = ({ className, onClick, children, ariaLabel, role, }) => { - return (jsxRuntimeExports.jsx("button", { onClick: onClick, className: className, "aria-label": ariaLabel, role: role, children: children })); -}; -const OPEN_IN_NEW_TAB_PROPS = { target: "_blank", rel: "noreferrer noopener" }; -const OPEN_IN_CURRENT_TAB_PROPS = { target: "_self" }; -const LinkBase = ({ className, href, children, ariaLabel, onClick, }) => { - const isInternalLink = href.startsWith("/") || href.startsWith("#"); - const targetProps = isInternalLink - ? OPEN_IN_CURRENT_TAB_PROPS - : OPEN_IN_NEW_TAB_PROPS; - return (jsxRuntimeExports.jsx("a", { className: className, href: formatHrefAsMailto(href), "aria-label": ariaLabel, onClick: onClick, ...targetProps, children: children })); -}; - class StorageManager { key; constructor(key) { @@ -151,17 +60,17 @@ const UIContext = reactExports.createContext(undefined); const useUIProvider = () => { const context = reactExports.useContext(UIContext); if (context === undefined) { - throw new Error("useUIProvider must be used within a UIProvider"); + throw new Error('useUIProvider must be used within a UIProvider'); } return context; }; const UIProvider = ({ children }) => { const [theme, setTheme] = reactExports.useState('light'); reactExports.useEffect(() => { - if (typeof window !== "undefined") { + if (typeof window !== 'undefined') { const currentTheme = ThemeManager.get(); if (!currentTheme) { - ThemeManager.set("light"); + ThemeManager.set('light'); } else { setTheme(currentTheme); @@ -170,7 +79,7 @@ const UIProvider = ({ children }) => { }, []); const toggleTheme = () => { setTheme((prev) => { - const newTheme = prev === "dark" ? "light" : "dark"; + const newTheme = prev === 'dark' ? 'light' : 'dark'; ThemeManager.set(newTheme); document.documentElement.classList.toggle('dark', newTheme === 'dark'); // Toggles the dark class return newTheme; @@ -187,7 +96,7 @@ const ThemeSwitch = () => { return (jsxRuntimeExports.jsxs(Ye, { checked: theme === 'dark', onChange: toggleTheme, className: cn('group relative inline-flex h-8 w-[3.75rem] items-center rounded-full', { 'bg-light-surface-3': theme === 'light', 'bg-dark-surface-3': theme === 'dark', - }), "aria-label": "Toggle theme", children: [jsxRuntimeExports.jsx("span", { className: "flex h-6 w-6 translate-x-1 items-center justify-center rounded-full bg-white transition group-data-[checked]:translate-x-8", children: jsxRuntimeExports.jsx(IconMap, { className: "h-4 w-4", icon: theme === 'dark' ? 'moon' : 'sun' }) }), jsxRuntimeExports.jsx(Sun, { className: "absolute left-2 h-4 w-4" }), jsxRuntimeExports.jsx(Moon, { className: "absolute right-2 h-4 w-4" })] })); + }), "aria-label": "Toggle theme", children: [jsxRuntimeExports.jsx("span", { className: "flex h-6 w-6 translate-x-1 items-center justify-center rounded-full bg-white transition group-data-[checked]:translate-x-8", children: jsxRuntimeExports.jsx(ThemeIconMap, { className: "h-4 w-4", icon: theme === 'dark' ? 'moon' : 'sun' }) }), jsxRuntimeExports.jsx(Sun, { className: "absolute left-2 h-4 w-4" }), jsxRuntimeExports.jsx(Moon, { className: "absolute right-2 h-4 w-4" })] })); }; const MobileMenuModal = ({ isOpen, close }) => { @@ -238,7 +147,7 @@ const Navigation = () => { }, [setScrollIsOnTop]); return (jsxRuntimeExports.jsxs(UIProvider, { children: [jsxRuntimeExports.jsx("nav", { className: cn('Navigation fixed top-0 left-0 right-0 z-nav flex w-screen justify-center bg-light-surface-1 dark:border-dark-surface-3 dark:bg-dark-surface-1', { 'border-b': !scrollIsOnTop, - }), children: jsxRuntimeExports.jsxs("div", { className: "flex w-full flex-row items-center justify-between border-light-surface-3 px-4 py-[1.15625rem] sm:px-[0.9375rem] sm:py-3 md:h-[4.5rem]", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-row items-center", children: jsxRuntimeExports.jsxs(LinkBase, { href: "/", className: "flex flex-row items-center", children: [jsxRuntimeExports.jsx(MiniUnicon, { className: "mb-[0.1875rem] h-8 w-8" }), jsxRuntimeExports.jsx("p", { className: "body-3 md:button-label-2 ml-2 text-light-accent-1 dark:text-dark-accent-1", children: "Uniswap Support" })] }) }), jsxRuntimeExports.jsx("div", { className: "sm:hidden", children: jsxRuntimeExports.jsx(ButtonBase, { onClick: () => { + }), children: jsxRuntimeExports.jsxs("div", { className: "flex w-full flex-row items-center justify-between border-light-surface-3 px-4 py-[1.15625rem] sm:px-[0.9375rem] sm:py-3 h-[4.5rem]", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-row items-center", children: jsxRuntimeExports.jsxs(LinkBase, { href: "/", className: "flex flex-row items-center", children: [jsxRuntimeExports.jsx(MiniUnicon, { className: "mb-[0.1875rem] h-8 w-8" }), jsxRuntimeExports.jsx("p", { className: "body-3 md:button-label-2 ml-2 text-light-accent-1 dark:text-dark-accent-1", children: "Uniswap Support" })] }) }), jsxRuntimeExports.jsx("div", { className: "sm:hidden", children: jsxRuntimeExports.jsx(ButtonBase, { onClick: () => { setMenuIsOpen((prev) => !prev); }, children: jsxRuntimeExports.jsx(Menu, { className: "h-padding-large w-padding-large" }) }) }), jsxRuntimeExports.jsxs("div", { className: "hidden sm:flex", children: [jsxRuntimeExports.jsx(ThemeSwitch, {}), jsxRuntimeExports.jsx(PrimaryButton, { className: "ml-padding-small-dense !my-auto !py-0 !h-8", label: "Submit Request", href: "https://support.uniswap.org/hc/en-us/requests/new", color: "accent-2" })] })] }) }), jsxRuntimeExports.jsx("div", { className: cn('fixed inset-0 z-scrim bg-scrim transition duration-500', { 'pointer-events-none opacity-0': !menuIsOpen, diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css index 424333eef..5301ae8bb 100644 --- a/assets/tailwind-output.css +++ b/assets/tailwind-output.css @@ -672,6 +672,10 @@ video { isolation: isolate; } +.z-10 { + z-index: 10; +} + .z-modal { z-index: 900; } @@ -697,6 +701,16 @@ video { margin-bottom: auto !important; } +.my-1 { + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.my-1\.5 { + margin-top: 0.375rem; + margin-bottom: 0.375rem; +} + .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; @@ -711,6 +725,10 @@ video { margin-bottom: 3rem; } +.mb-3 { + margin-bottom: 0.75rem; +} + .mb-\[0\.1875rem\] { margin-bottom: 0.1875rem; } @@ -727,10 +745,26 @@ video { margin-left: 0.5rem; } +.mr-2 { + margin-right: 0.5rem; +} + +.mr-4 { + margin-right: 1rem; +} + .mt-2 { margin-top: 0.5rem; } +.mt-\[1\.875rem\] { + margin-top: 1.875rem; +} + +.mt-padding-x-large { + margin-top: 2.25rem; +} + .block { display: block; } @@ -842,6 +876,10 @@ video { height: 1rem; } +.h-5 { + height: 1.25rem; +} + .h-6 { height: 1.5rem; } @@ -850,6 +888,10 @@ video { height: 2rem; } +.h-\[4\.5rem\] { + height: 4.5rem; +} + .h-padding-large { height: 1.5rem; } @@ -862,6 +904,10 @@ video { width: 1rem; } +.w-5 { + width: 1.25rem; +} + .w-6 { width: 1.5rem; } @@ -947,6 +993,10 @@ video { flex-direction: row; } +.flex-col { + flex-direction: column; +} + .flex-col-reverse { flex-direction: column-reverse; } @@ -971,6 +1021,10 @@ video { justify-content: space-between; } +.gap-4 { + gap: 1rem; +} + .gap-gap-large { gap: 1rem; } @@ -1058,6 +1112,10 @@ video { border-top-width: 1px; } +.border-t-\[1px\] { + border-top-width: 1px; +} + .border-\[top\2c left\2c right\2c bottom\] { border-color: top,left,right,bottom; } @@ -1090,6 +1148,23 @@ video { background-color: rgb(81 13 67 / var(--tw-bg-opacity)); } +.bg-dark-blue-light { + background-color: rgba(16, 20, 61, 0.8); +} + +.bg-dark-green-light { + background-color: rgba(15, 44, 26, 0.8); +} + +.bg-dark-orange-light { + background-color: rgba(55, 27, 12, 0.8); +} + +.bg-dark-pink-light { + --tw-bg-opacity: 1; + background-color: rgb(54 26 55 / var(--tw-bg-opacity)); +} + .bg-dark-surface-1 { --tw-bg-opacity: 1; background-color: rgb(19 19 19 / var(--tw-bg-opacity)); @@ -1133,6 +1208,26 @@ video { background-color: rgb(254 235 252 / var(--tw-bg-opacity)); } +.bg-light-blue-light { + --tw-bg-opacity: 1; + background-color: rgb(239 244 255 / var(--tw-bg-opacity)); +} + +.bg-light-green-light { + --tw-bg-opacity: 1; + background-color: rgb(238 251 241 / var(--tw-bg-opacity)); +} + +.bg-light-orange-light { + --tw-bg-opacity: 1; + background-color: rgb(254 245 234 / var(--tw-bg-opacity)); +} + +.bg-light-pink-light { + --tw-bg-opacity: 1; + background-color: rgb(254 244 255 / var(--tw-bg-opacity)); +} + .bg-light-surface-1 { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1165,10 +1260,18 @@ video { fill: #FC74FE; } +.fill-dark-blue-vibrant { + fill: #0C8911; +} + .fill-dark-brown-vibrant { fill: #85754A; } +.fill-dark-green-base { + fill: #0C8911; +} + .fill-dark-neutral-1 { fill: #FFFFFF; } @@ -1189,10 +1292,18 @@ video { fill: #F50DB4; } +.fill-light-blue-vibrant { + fill: #0047FF; +} + .fill-light-brown-vibrant { fill: #85754A; } +.fill-light-green-base { + fill: #0C8911; +} + .fill-light-neutral-1 { fill: #222222; } @@ -1236,6 +1347,11 @@ video { padding-right: 1rem; } +.px-margin-extension { + padding-left: 1rem; + padding-right: 1rem; +} + .px-margin-mobile { padding-left: 1.5rem; padding-right: 1.5rem; @@ -1246,6 +1362,11 @@ video { padding-right: 1.5rem; } +.px-padding-medium { + padding-left: 1rem; + padding-right: 1rem; +} + .px-padding-small { padding-left: 0.75rem; padding-right: 0.75rem; @@ -1256,6 +1377,16 @@ video { padding-bottom: 1.15625rem; } +.py-\[4\.84375rem\] { + padding-top: 4.84375rem; + padding-bottom: 4.84375rem; +} + +.py-margin-mobile-dense { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + .py-margin-web { padding-top: 2.5rem; padding-bottom: 2.5rem; @@ -1266,6 +1397,11 @@ video { padding-bottom: 1.5rem; } +.py-padding-small { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + .py-padding-small-dense { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -1358,6 +1494,16 @@ video { color: rgb(252 116 254 / var(--tw-text-opacity)); } +.text-dark-blue-vibrant { + --tw-text-opacity: 1; + color: rgb(12 137 17 / var(--tw-text-opacity)); +} + +.text-dark-green-base { + --tw-text-opacity: 1; + color: rgb(12 137 17 / var(--tw-text-opacity)); +} + .text-dark-neutral-1 { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1368,11 +1514,31 @@ video { color: rgb(155 155 155 / var(--tw-text-opacity)); } +.text-dark-orange-vibrant { + --tw-text-opacity: 1; + color: rgb(255 77 0 / var(--tw-text-opacity)); +} + +.text-dark-pink-vibrant { + --tw-text-opacity: 1; + color: rgb(252 116 254 / var(--tw-text-opacity)); +} + .text-light-accent-1 { --tw-text-opacity: 1; color: rgb(245 13 180 / var(--tw-text-opacity)); } +.text-light-blue-vibrant { + --tw-text-opacity: 1; + color: rgb(0 71 255 / var(--tw-text-opacity)); +} + +.text-light-green-base { + --tw-text-opacity: 1; + color: rgb(12 137 17 / var(--tw-text-opacity)); +} + .text-light-neutral-1 { --tw-text-opacity: 1; color: rgb(34 34 34 / var(--tw-text-opacity)); @@ -1383,6 +1549,16 @@ video { color: rgb(125 125 125 / var(--tw-text-opacity)); } +.text-light-orange-vibrant { + --tw-text-opacity: 1; + color: rgb(255 77 0 / var(--tw-text-opacity)); +} + +.text-light-pink-vibrant { + --tw-text-opacity: 1; + color: rgb(245 13 180 / var(--tw-text-opacity)); +} + .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1505,6 +1681,8 @@ video { a-z-a--z0-9: -; } +/* @import '../assets/types.css'; */ + .site-max-width { max-width: 1440px; } @@ -1521,6 +1699,20 @@ video { } } +.page-wrapper { + margin-top: 3.6875rem; + padding: 1.5rem; + padding-bottom: 2.5rem; +} + +@media (min-width: 768px) { + .page-wrapper { + padding-left: 2.5rem; + padding-right: 2.5rem; + padding-bottom: 7.5rem; + } +} + .hover\:bg-dark-accent-1-hovered:hover { --tw-bg-opacity: 1; background-color: rgb(253 60 254 / var(--tw-bg-opacity)); @@ -1541,6 +1733,11 @@ video { background-color: rgb(199 10 146 / var(--tw-bg-opacity)); } +.hover\:bg-light-accent-2:hover { + --tw-bg-opacity: 1; + background-color: rgb(254 244 255 / var(--tw-bg-opacity)); +} + .hover\:bg-light-accent-2-hovered:hover { --tw-bg-opacity: 1; background-color: rgb(254 235 252 / var(--tw-bg-opacity)); @@ -1573,6 +1770,15 @@ video { color: rgb(34 34 34 / var(--tw-text-opacity)); } +.group:hover .group-hover\:text-light-pink-vibrant { + --tw-text-opacity: 1; + color: rgb(245 13 180 / var(--tw-text-opacity)); +} + +.group:hover .group-hover\:opacity-100 { + opacity: 1; +} + .data-\[active\]\:bg-light-surface-3[data-active] { background-color: rgba(34,34,34,0.05); } @@ -1662,6 +1868,11 @@ video { padding-bottom: 0.75rem; } + .sm\:py-\[3\.75rem\] { + padding-top: 3.75rem; + padding-bottom: 3.75rem; + } + .sm\:pb-margin-web { padding-bottom: 2.5rem; } @@ -1672,6 +1883,10 @@ video { } @media (min-width: 1280px) { + .md\:col-span-2 { + grid-column: span 2 / span 2; + } + .md\:col-span-4 { grid-column: span 4 / span 4; } @@ -1683,10 +1898,6 @@ video { .md\:block { display: block; } - - .md\:h-\[4\.5rem\] { - height: 4.5rem; - } } .dark\:border-dark-surface-3:where(.dark, .dark *) { @@ -1703,11 +1914,33 @@ video { background-color: rgb(54 26 55 / var(--tw-bg-opacity)); } +.dark\:bg-dark-blue-light:where(.dark, .dark *) { + background-color: rgba(16, 20, 61, 0.8); +} + +.dark\:bg-dark-green-light:where(.dark, .dark *) { + background-color: rgba(15, 44, 26, 0.8); +} + +.dark\:bg-dark-orange-light:where(.dark, .dark *) { + background-color: rgba(55, 27, 12, 0.8); +} + +.dark\:bg-dark-pink-light:where(.dark, .dark *) { + --tw-bg-opacity: 1; + background-color: rgb(54 26 55 / var(--tw-bg-opacity)); +} + .dark\:bg-dark-surface-1:where(.dark, .dark *) { --tw-bg-opacity: 1; background-color: rgb(19 19 19 / var(--tw-bg-opacity)); } +.dark\:bg-dark-surface-2:where(.dark, .dark *) { + --tw-bg-opacity: 1; + background-color: rgb(27 27 27 / var(--tw-bg-opacity)); +} + .dark\:bg-dark-surface-3:where(.dark, .dark *) { background-color: rgba(255,255,255,0.12); } @@ -1716,10 +1949,18 @@ video { fill: #FC74FE; } +.dark\:fill-dark-blue-vibrant:where(.dark, .dark *) { + fill: #0C8911; +} + .dark\:fill-dark-brown-vibrant:where(.dark, .dark *) { fill: #85754A; } +.dark\:fill-dark-green-base:where(.dark, .dark *) { + fill: #0C8911; +} + .dark\:fill-dark-neutral-1:where(.dark, .dark *) { fill: #FFFFFF; } @@ -1741,6 +1982,16 @@ video { color: rgb(252 116 254 / var(--tw-text-opacity)); } +.dark\:text-dark-blue-vibrant:where(.dark, .dark *) { + --tw-text-opacity: 1; + color: rgb(12 137 17 / var(--tw-text-opacity)); +} + +.dark\:text-dark-green-base:where(.dark, .dark *) { + --tw-text-opacity: 1; + color: rgb(12 137 17 / var(--tw-text-opacity)); +} + .dark\:text-dark-neutral-1:where(.dark, .dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1751,6 +2002,16 @@ video { color: rgb(155 155 155 / var(--tw-text-opacity)); } +.dark\:text-dark-orange-vibrant:where(.dark, .dark *) { + --tw-text-opacity: 1; + color: rgb(255 77 0 / var(--tw-text-opacity)); +} + +.dark\:text-dark-pink-vibrant:where(.dark, .dark *) { + --tw-text-opacity: 1; + color: rgb(252 116 254 / var(--tw-text-opacity)); +} + .dark\:hover\:bg-dark-accent-1-hovered:hover:where(.dark, .dark *) { --tw-bg-opacity: 1; background-color: rgb(253 60 254 / var(--tw-bg-opacity)); @@ -1769,6 +2030,11 @@ video { background-color: rgba(255,255,255,0.16); } +.hover\:dark\:bg-dark-accent-2:where(.dark, .dark *):hover { + --tw-bg-opacity: 1; + background-color: rgb(54 26 55 / var(--tw-bg-opacity)); +} + .group:hover .group-hover\:dark\:fill-dark-neutral-1:where(.dark, .dark *) { fill: #FFFFFF; } @@ -1778,6 +2044,11 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.group:hover .dark\:group-hover\:text-dark-pink-vibrant:where(.dark, .dark *) { + --tw-text-opacity: 1; + color: rgb(252 116 254 / var(--tw-text-opacity)); +} + .group:hover .group-hover\:dark\:text-dark-neutral-1:where(.dark, .dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); diff --git a/rollup.config.mjs b/rollup.config.mjs index c9b1d13cb..a9d2faf31 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -1,29 +1,28 @@ /* eslint-env node */ -import zass from "./zass.mjs"; -import { nodeResolve } from "@rollup/plugin-node-resolve"; -import commonjs from "@rollup/plugin-commonjs"; -import json from "@rollup/plugin-json"; -import dynamicImportVars from "@rollup/plugin-dynamic-import-vars"; -import typescript from "@rollup/plugin-typescript"; -import replace from "@rollup/plugin-replace"; -import terser from "@rollup/plugin-terser"; -import svgr from "@svgr/rollup"; -import { generateImportMap } from "./generate-import-map.mjs"; -import { defineConfig } from "rollup"; -import sass from "rollup-plugin-sass"; +import zass from './zass.mjs'; +import { nodeResolve } from '@rollup/plugin-node-resolve'; +import commonjs from '@rollup/plugin-commonjs'; +import json from '@rollup/plugin-json'; +import dynamicImportVars from '@rollup/plugin-dynamic-import-vars'; +import typescript from '@rollup/plugin-typescript'; +import replace from '@rollup/plugin-replace'; +import terser from '@rollup/plugin-terser'; +import svgr from '@svgr/rollup'; +import { generateImportMap } from './generate-import-map.mjs'; +import { defineConfig } from 'rollup'; +import sass from 'rollup-plugin-sass'; -const fileNames = "[name]-bundle.js"; -const isProduction = process.env.NODE_ENV === "production"; -const TRANSLATION_FILE_REGEX = - /src\/modules\/(.+?)\/translations\/locales\/.+?\.json$/; +const fileNames = '[name]-bundle.js'; +const isProduction = process.env.NODE_ENV === 'production'; +const TRANSLATION_FILE_REGEX = /src\/modules\/(.+?)\/translations\/locales\/.+?\.json$/; export default defineConfig([ // Configuration for bundling the script.js file { - input: "src/index.js", + input: 'src/index.js', output: { - file: "script.js", - format: "iife", + file: 'script.js', + format: 'iife', }, plugins: [zass()], watch: { @@ -32,25 +31,27 @@ export default defineConfig([ }, // Configuration for bundling modules in the src/modules directory { - context: "this", + context: 'this', input: { - "new-request-form": "src/modules/new-request-form/index.tsx", - "flash-notifications": "src/modules/flash-notifications/index.ts", - "navigation": "src/modules/navigation/index.tsx", + 'new-request-form': 'src/modules/new-request-form/index.tsx', + 'flash-notifications': 'src/modules/flash-notifications/index.ts', + navigation: 'src/modules/navigation/index.tsx', + footer: 'src/modules/footer/index.tsx', + homepage: 'src/modules/homepage/index.tsx', }, output: { - dir: "assets", - format: "es", + dir: 'assets', + format: 'es', manualChunks: (id) => { if ( - id.includes("node_modules/@zendesk/help-center-wysiwyg") || - id.includes("node_modules/@ckeditor5") + id.includes('node_modules/@zendesk/help-center-wysiwyg') || + id.includes('node_modules/@ckeditor5') ) { - return "wysiwyg"; + return 'wysiwyg'; } - if (id.includes("node_modules") || id.includes("src/modules/shared")) { - return "shared"; + if (id.includes('node_modules') || id.includes('src/modules/shared')) { + return 'shared'; } // Bundle all files from `src/modules/MODULE_NAME/translations/locales/*.json to `${MODULE_NAME}-translations.js` @@ -64,20 +65,20 @@ export default defineConfig([ }, plugins: [ nodeResolve({ - extensions: [".js"], + extensions: ['.js'], }), commonjs(), typescript(), replace({ preventAssignment: true, - "process.env.NODE_ENV": '"production"', + 'process.env.NODE_ENV': '"production"', }), svgr({ svgo: true, svgoConfig: { plugins: [ { - name: "preset-default", + name: 'preset-default', params: { overrides: { removeTitle: false, diff --git a/script.js b/script.js index 16f7674cc..31dfeb95e 100644 --- a/script.js +++ b/script.js @@ -1,661 +1,6 @@ (function () { - 'use strict'; + 'use strict'; - // Key map - const ENTER = 13; - const ESCAPE = 27; - function toggleNavigation(toggle, menu) { - const isExpanded = menu.getAttribute("aria-expanded") === "true"; - menu.setAttribute("aria-expanded", !isExpanded); - toggle.setAttribute("aria-expanded", !isExpanded); - } - - function closeNavigation(toggle, menu) { - menu.setAttribute("aria-expanded", false); - toggle.setAttribute("aria-expanded", false); - toggle.focus(); - } - - // Navigation - - window.addEventListener("DOMContentLoaded", () => { - const menuButton = document.querySelector(".header .menu-button-mobile"); - const menuList = document.querySelector("#user-nav-mobile"); - - menuButton.addEventListener("click", (event) => { - event.stopPropagation(); - toggleNavigation(menuButton, menuList); - }); - - menuList.addEventListener("keyup", (event) => { - if (event.keyCode === ESCAPE) { - event.stopPropagation(); - closeNavigation(menuButton, menuList); - } - }); - - // Toggles expanded aria to collapsible elements - const collapsible = document.querySelectorAll( - ".collapsible-nav, .collapsible-sidebar" - ); - - collapsible.forEach((element) => { - const toggle = element.querySelector( - ".collapsible-nav-toggle, .collapsible-sidebar-toggle" - ); - - element.addEventListener("click", () => { - toggleNavigation(toggle, element); - }); - - element.addEventListener("keyup", (event) => { - console.log("escape"); - if (event.keyCode === ESCAPE) { - closeNavigation(toggle, element); - } - }); - }); - - // If multibrand search has more than 5 help centers or categories collapse the list - const multibrandFilterLists = document.querySelectorAll( - ".multibrand-filter-list" - ); - multibrandFilterLists.forEach((filter) => { - if (filter.children.length > 6) { - // Display the show more button - const trigger = filter.querySelector(".see-all-filters"); - trigger.setAttribute("aria-hidden", false); - - // Add event handler for click - trigger.addEventListener("click", (event) => { - event.stopPropagation(); - trigger.parentNode.removeChild(trigger); - filter.classList.remove("multibrand-filter-list--collapsed"); - }); - } - }); - }); - - const isPrintableChar = (str) => { - return str.length === 1 && str.match(/^\S$/); - }; - - function Dropdown(toggle, menu) { - this.toggle = toggle; - this.menu = menu; - - this.menuPlacement = { - top: menu.classList.contains("dropdown-menu-top"), - end: menu.classList.contains("dropdown-menu-end"), - }; - - this.toggle.addEventListener("click", this.clickHandler.bind(this)); - this.toggle.addEventListener("keydown", this.toggleKeyHandler.bind(this)); - this.menu.addEventListener("keydown", this.menuKeyHandler.bind(this)); - document.body.addEventListener("click", this.outsideClickHandler.bind(this)); - - const toggleId = this.toggle.getAttribute("id") || crypto.randomUUID(); - const menuId = this.menu.getAttribute("id") || crypto.randomUUID(); - - this.toggle.setAttribute("id", toggleId); - this.menu.setAttribute("id", menuId); - - this.toggle.setAttribute("aria-controls", menuId); - this.menu.setAttribute("aria-labelledby", toggleId); - - this.menu.setAttribute("tabindex", -1); - this.menuItems.forEach((menuItem) => { - menuItem.tabIndex = -1; - }); - - this.focusedIndex = -1; - } - - Dropdown.prototype = { - get isExpanded() { - return this.toggle.getAttribute("aria-expanded") === "true"; - }, - - get menuItems() { - return Array.prototype.slice.call( - this.menu.querySelectorAll("[role='menuitem'], [role='menuitemradio']") - ); - }, - - dismiss: function () { - if (!this.isExpanded) return; - - this.toggle.removeAttribute("aria-expanded"); - this.menu.classList.remove("dropdown-menu-end", "dropdown-menu-top"); - this.focusedIndex = -1; - }, - - open: function () { - if (this.isExpanded) return; - - this.toggle.setAttribute("aria-expanded", true); - this.handleOverflow(); - }, - - handleOverflow: function () { - var rect = this.menu.getBoundingClientRect(); - - var overflow = { - right: rect.left < 0 || rect.left + rect.width > window.innerWidth, - bottom: rect.top < 0 || rect.top + rect.height > window.innerHeight, - }; - - if (overflow.right || this.menuPlacement.end) { - this.menu.classList.add("dropdown-menu-end"); - } - - if (overflow.bottom || this.menuPlacement.top) { - this.menu.classList.add("dropdown-menu-top"); - } - - if (this.menu.getBoundingClientRect().top < 0) { - this.menu.classList.remove("dropdown-menu-top"); - } - }, - - focusByIndex: function (index) { - if (!this.menuItems.length) return; - - this.menuItems.forEach((item, itemIndex) => { - if (itemIndex === index) { - item.tabIndex = 0; - item.focus(); - } else { - item.tabIndex = -1; - } - }); - - this.focusedIndex = index; - }, - - focusFirstMenuItem: function () { - this.focusByIndex(0); - }, - - focusLastMenuItem: function () { - this.focusByIndex(this.menuItems.length - 1); - }, - - focusNextMenuItem: function (currentItem) { - if (!this.menuItems.length) return; - - const currentIndex = this.menuItems.indexOf(currentItem); - const nextIndex = (currentIndex + 1) % this.menuItems.length; - - this.focusByIndex(nextIndex); - }, - - focusPreviousMenuItem: function (currentItem) { - if (!this.menuItems.length) return; - - const currentIndex = this.menuItems.indexOf(currentItem); - const previousIndex = - currentIndex <= 0 ? this.menuItems.length - 1 : currentIndex - 1; - - this.focusByIndex(previousIndex); - }, - - focusByChar: function (currentItem, char) { - char = char.toLowerCase(); - - const itemChars = this.menuItems.map((menuItem) => - menuItem.textContent.trim()[0].toLowerCase() - ); - - const startIndex = - (this.menuItems.indexOf(currentItem) + 1) % this.menuItems.length; - - // look up starting from current index - let index = itemChars.indexOf(char, startIndex); - - // if not found, start from start - if (index === -1) { - index = itemChars.indexOf(char, 0); - } - - if (index > -1) { - this.focusByIndex(index); - } - }, - - outsideClickHandler: function (e) { - if ( - this.isExpanded && - !this.toggle.contains(e.target) && - !e.composedPath().includes(this.menu) - ) { - this.dismiss(); - this.toggle.focus(); - } - }, - - clickHandler: function (event) { - event.stopPropagation(); - event.preventDefault(); - - if (this.isExpanded) { - this.dismiss(); - this.toggle.focus(); - } else { - this.open(); - this.focusFirstMenuItem(); - } - }, - - toggleKeyHandler: function (e) { - const key = e.key; - - switch (key) { - case "Enter": - case " ": - case "ArrowDown": - case "Down": { - e.stopPropagation(); - e.preventDefault(); - - this.open(); - this.focusFirstMenuItem(); - break; - } - case "ArrowUp": - case "Up": { - e.stopPropagation(); - e.preventDefault(); - - this.open(); - this.focusLastMenuItem(); - break; - } - case "Esc": - case "Escape": { - e.stopPropagation(); - e.preventDefault(); - - this.dismiss(); - this.toggle.focus(); - break; - } - } - }, - - menuKeyHandler: function (e) { - const key = e.key; - const currentElement = this.menuItems[this.focusedIndex]; - - if (e.ctrlKey || e.altKey || e.metaKey) { - return; - } - - switch (key) { - case "Esc": - case "Escape": { - e.stopPropagation(); - e.preventDefault(); - - this.dismiss(); - this.toggle.focus(); - break; - } - case "ArrowDown": - case "Down": { - e.stopPropagation(); - e.preventDefault(); - - this.focusNextMenuItem(currentElement); - break; - } - case "ArrowUp": - case "Up": { - e.stopPropagation(); - e.preventDefault(); - this.focusPreviousMenuItem(currentElement); - break; - } - case "Home": - case "PageUp": { - e.stopPropagation(); - e.preventDefault(); - this.focusFirstMenuItem(); - break; - } - case "End": - case "PageDown": { - e.stopPropagation(); - e.preventDefault(); - this.focusLastMenuItem(); - break; - } - case "Tab": { - if (e.shiftKey) { - e.stopPropagation(); - e.preventDefault(); - this.dismiss(); - this.toggle.focus(); - } else { - this.dismiss(); - } - break; - } - default: { - if (isPrintableChar(key)) { - e.stopPropagation(); - e.preventDefault(); - this.focusByChar(currentElement, key); - } - } - } - }, - }; - - // Drodowns - - window.addEventListener("DOMContentLoaded", () => { - const dropdowns = []; - const dropdownToggles = document.querySelectorAll(".dropdown-toggle"); - - dropdownToggles.forEach((toggle) => { - const menu = toggle.nextElementSibling; - if (menu && menu.classList.contains("dropdown-menu")) { - dropdowns.push(new Dropdown(toggle, menu)); - } - }); - }); - - // Share - - window.addEventListener("DOMContentLoaded", () => { - const links = document.querySelectorAll(".share a"); - links.forEach((anchor) => { - anchor.addEventListener("click", (event) => { - event.preventDefault(); - window.open(anchor.href, "", "height = 500, width = 500"); - }); - }); - }); - - // Vanilla JS debounce function, by Josh W. Comeau: - // https://www.joshwcomeau.com/snippets/javascript/debounce/ - function debounce(callback, wait) { - let timeoutId = null; - return (...args) => { - window.clearTimeout(timeoutId); - timeoutId = window.setTimeout(() => { - callback.apply(null, args); - }, wait); - }; - } - - // Define variables for search field - let searchFormFilledClassName = "search-has-value"; - let searchFormSelector = "form[role='search']"; - - // Clear the search input, and then return focus to it - function clearSearchInput(event) { - event.target - .closest(searchFormSelector) - .classList.remove(searchFormFilledClassName); - - let input; - if (event.target.tagName === "INPUT") { - input = event.target; - } else if (event.target.tagName === "BUTTON") { - input = event.target.previousElementSibling; - } else { - input = event.target.closest("button").previousElementSibling; - } - input.value = ""; - input.focus(); - } - - // Have the search input and clear button respond - // when someone presses the escape key, per: - // https://twitter.com/adambsilver/status/1152452833234554880 - function clearSearchInputOnKeypress(event) { - const searchInputDeleteKeys = ["Delete", "Escape"]; - if (searchInputDeleteKeys.includes(event.key)) { - clearSearchInput(event); - } - } - - // Create an HTML button that all users -- especially keyboard users -- - // can interact with, to clear the search input. - // To learn more about this, see: - // https://adrianroselli.com/2019/07/ignore-typesearch.html#Delete - // https://www.scottohara.me/blog/2022/02/19/custom-clear-buttons.html - function buildClearSearchButton(inputId) { - const button = document.createElement("button"); - button.setAttribute("type", "button"); - button.setAttribute("aria-controls", inputId); - button.classList.add("clear-button"); - const buttonLabel = window.searchClearButtonLabelLocalized; - const icon = ``; - button.innerHTML = icon; - button.addEventListener("click", clearSearchInput); - button.addEventListener("keyup", clearSearchInputOnKeypress); - return button; - } - - // Append the clear button to the search form - function appendClearSearchButton(input, form) { - const searchClearButton = buildClearSearchButton(input.id); - form.append(searchClearButton); - if (input.value.length > 0) { - form.classList.add(searchFormFilledClassName); - } - } - - // Add a class to the search form when the input has a value; - // Remove that class from the search form when the input doesn't have a value. - // Do this on a delay, rather than on every keystroke. - const toggleClearSearchButtonAvailability = debounce((event) => { - const form = event.target.closest(searchFormSelector); - form.classList.toggle( - searchFormFilledClassName, - event.target.value.length > 0 - ); - }, 200); - - // Search - - window.addEventListener("DOMContentLoaded", () => { - // Set up clear functionality for the search field - const searchForms = [...document.querySelectorAll(searchFormSelector)]; - const searchInputs = searchForms.map((form) => - form.querySelector("input[type='search']") - ); - searchInputs.forEach((input) => { - appendClearSearchButton(input, input.closest(searchFormSelector)); - input.addEventListener("keyup", clearSearchInputOnKeypress); - input.addEventListener("keyup", toggleClearSearchButtonAvailability); - }); - }); - - const key = "returnFocusTo"; - - function saveFocus() { - const activeElementId = document.activeElement.getAttribute("id"); - sessionStorage.setItem(key, "#" + activeElementId); - } - - function returnFocus() { - const returnFocusTo = sessionStorage.getItem(key); - if (returnFocusTo) { - sessionStorage.removeItem("returnFocusTo"); - const returnFocusToEl = document.querySelector(returnFocusTo); - returnFocusToEl && returnFocusToEl.focus && returnFocusToEl.focus(); - } - } - - // Forms - - window.addEventListener("DOMContentLoaded", () => { - // In some cases we should preserve focus after page reload - returnFocus(); - - // show form controls when the textarea receives focus or back button is used and value exists - const commentContainerTextarea = document.querySelector( - ".comment-container textarea" - ); - const commentContainerFormControls = document.querySelector( - ".comment-form-controls, .comment-ccs" - ); - - if (commentContainerTextarea) { - commentContainerTextarea.addEventListener( - "focus", - function focusCommentContainerTextarea() { - commentContainerFormControls.style.display = "block"; - commentContainerTextarea.removeEventListener( - "focus", - focusCommentContainerTextarea - ); - } - ); - - if (commentContainerTextarea.value !== "") { - commentContainerFormControls.style.display = "block"; - } - } - - // Expand Request comment form when Add to conversation is clicked - const showRequestCommentContainerTrigger = document.querySelector( - ".request-container .comment-container .comment-show-container" - ); - const requestCommentFields = document.querySelectorAll( - ".request-container .comment-container .comment-fields" - ); - const requestCommentSubmit = document.querySelector( - ".request-container .comment-container .request-submit-comment" - ); - - if (showRequestCommentContainerTrigger) { - showRequestCommentContainerTrigger.addEventListener("click", () => { - showRequestCommentContainerTrigger.style.display = "none"; - Array.prototype.forEach.call(requestCommentFields, (element) => { - element.style.display = "block"; - }); - requestCommentSubmit.style.display = "inline-block"; - - if (commentContainerTextarea) { - commentContainerTextarea.focus(); - } - }); - } - - // Mark as solved button - const requestMarkAsSolvedButton = document.querySelector( - ".request-container .mark-as-solved:not([data-disabled])" - ); - const requestMarkAsSolvedCheckbox = document.querySelector( - ".request-container .comment-container input[type=checkbox]" - ); - const requestCommentSubmitButton = document.querySelector( - ".request-container .comment-container input[type=submit]" - ); - - if (requestMarkAsSolvedButton) { - requestMarkAsSolvedButton.addEventListener("click", () => { - requestMarkAsSolvedCheckbox.setAttribute("checked", true); - requestCommentSubmitButton.disabled = true; - requestMarkAsSolvedButton.setAttribute("data-disabled", true); - requestMarkAsSolvedButton.form.submit(); - }); - } - - // Change Mark as solved text according to whether comment is filled - const requestCommentTextarea = document.querySelector( - ".request-container .comment-container textarea" - ); - - const usesWysiwyg = - requestCommentTextarea && - requestCommentTextarea.dataset.helper === "wysiwyg"; - - function isEmptyPlaintext(s) { - return s.trim() === ""; - } - - function isEmptyHtml(xml) { - const doc = new DOMParser().parseFromString(`<_>${xml}`, "text/xml"); - const img = doc.querySelector("img"); - return img === null && isEmptyPlaintext(doc.children[0].textContent); - } - - const isEmpty = usesWysiwyg ? isEmptyHtml : isEmptyPlaintext; - - if (requestCommentTextarea) { - requestCommentTextarea.addEventListener("input", () => { - if (isEmpty(requestCommentTextarea.value)) { - if (requestMarkAsSolvedButton) { - requestMarkAsSolvedButton.innerText = - requestMarkAsSolvedButton.getAttribute("data-solve-translation"); - } - } else { - if (requestMarkAsSolvedButton) { - requestMarkAsSolvedButton.innerText = - requestMarkAsSolvedButton.getAttribute( - "data-solve-and-submit-translation" - ); - } - } - }); - } - - const selects = document.querySelectorAll( - "#request-status-select, #request-organization-select" - ); - - selects.forEach((element) => { - element.addEventListener("change", (event) => { - event.stopPropagation(); - saveFocus(); - element.form.submit(); - }); - }); - - // Submit requests filter form on search in the request list page - const quickSearch = document.querySelector("#quick-search"); - if (quickSearch) { - quickSearch.addEventListener("keyup", (event) => { - if (event.keyCode === ENTER) { - event.stopPropagation(); - saveFocus(); - quickSearch.form.submit(); - } - }); - } - - // Submit organization form in the request page - const requestOrganisationSelect = document.querySelector( - "#request-organization select" - ); - - if (requestOrganisationSelect) { - requestOrganisationSelect.addEventListener("change", () => { - requestOrganisationSelect.form.submit(); - }); - - requestOrganisationSelect.addEventListener("click", (e) => { - // Prevents Ticket details collapsible-sidebar to close on mobile - e.stopPropagation(); - }); - } - - // If there are any error notifications below an input field, focus that field - const notificationElm = document.querySelector(".notification-error"); - if ( - notificationElm && - notificationElm.previousElementSibling && - typeof notificationElm.previousElementSibling.focus === "function" - ) { - notificationElm.previousElementSibling.focus(); - } - }); })(); diff --git a/src/index.js b/src/index.js index b03b317ff..271f09f70 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ -import "../styles/index.scss"; +import '../styles/index.scss'; -import "./navigation"; -import "./dropdowns"; -import "./share"; -import "./search"; -import "./forms"; +// import "./navigation"; +// import "./dropdowns"; +// import "./share"; +// import "./search"; +// import "./forms"; diff --git a/src/lib/types.ts b/src/lib/types.ts index 80b36053e..6da56772e 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -1,3 +1,5 @@ +import { ColoredCardsIcon } from '../svgs/Icons'; + export type Tag = { title: string; slug: string; @@ -57,6 +59,98 @@ export type GlobalSettings = { connectBlockNewsletterTitle: string; }; +// export type CategoryJSON = { +// created_at?: string; +// description?: string; +// html_url?: string; +// id: number; +// locale: string; +// name: string; +// outdated?: boolean; +// position?: number; +// source_locale?: string; +// updated_at?: string; +// url?: string; +// }; + +export type Badge = { + id: string; + name: string; + description: string; + category_slug: string; + icon_url: string; + assigned_at: string; +}; + +export type Organization = { + id: string; + name: string; +}; + +export type Author = { + name: string; + id: number; + url: string; + agent: boolean; + avatar_url: string; + badges: Badge[]; + organizations: Organization[]; +}; + +export type PathStep = { + name: string; + url: string; + target: string; +}; + +export type ArticleLabel = { + identifier: string; +}; + +export type Article = { + id: number; + url: string; + title: string; + body: any; + locale: string; + promoted: boolean; + internal: boolean; + updated_at: string; + created_at: string; + edited_at: string; + vote_sum: number; + vote_count: number; + upvote_count: number; + comment_count: number; + comments_disabled: boolean; + author: Author; + vote: Function; // double check this. + path_steps: PathStep[]; + labels: ArticleLabel[]; + snippet: string; +}; + +export type Section = { + id: number; + name: string; + description: string; + url: string; + article_count: number; + more_articles: boolean; // If there are more articles than the ones in the articles array (the current page). Starting with Templating API v4, this property is not available in the Home page + articles: Article[]; // array An array of up to 30 article objects. See more_articles above. For sections displayed on category pages, an array of up to 6 article objects. For subsections displayed on section pages, an array of up to 5 article objects. Starting with Templating API v4, this property is not available in the Home page + more_sections: boolean; // If there are more sections than the ones in the sections array + sections: Section[]; // array An array of up to 30 section objects. See more_sections above. This array is populated only for Guide Enterprise customers. Starting with Templating API v4, the number of sections is limited to 5 on the Home page and the Category page +}; + +export type Category = { + id: number; + name: string; + description: string; + url: string; + more_sections: boolean; // If there are more sections than the ones in the sections array + sections: Section[]; // An array of up to 5 category section objects +}; + export interface Navigation { article_id: number; html_url: string; @@ -78,16 +172,31 @@ export type FooterPageData = { footerLinksEcosystem: Link[]; }; -export type CategoryJSON = { - created_at?: string; - description?: string; - html_url?: string; - id: number; - locale: string; - name: string; - outdated?: boolean; - position?: number; - source_locale?: string; - updated_at?: string; - url?: string; +export type ColoredCardsColor = 'pink' | 'green' | 'blue' | 'orange'; +export type HomepageData = { + hero: { + headerLine1: string; + headerLine2: string; + }; + coloredCardsBlock: { + cards: { + icon: ColoredCardsIcon; + title: string; + description: string; + color: ColoredCardsColor; + }[]; + }; + faqBlock: { + articles: { + title: string; + description: string; + url: string; + }[]; + }; + guidesBlock: { + promotedArticles: Article[]; + }; + topicsBlock: { + categories: Category[]; + }; }; diff --git a/src/modules/footer/Footer.tsx b/src/modules/footer/Footer.tsx index a568e9e39..b41eb88f2 100644 --- a/src/modules/footer/Footer.tsx +++ b/src/modules/footer/Footer.tsx @@ -16,7 +16,7 @@ const Footer: FC = ({ footerPageData }) => {
- + {/* */}

Uniswap Labs

diff --git a/src/modules/homepage/Homepage.tsx b/src/modules/homepage/Homepage.tsx new file mode 100644 index 000000000..b77f8a0f5 --- /dev/null +++ b/src/modules/homepage/Homepage.tsx @@ -0,0 +1,182 @@ +import { FC } from 'react'; +import cn from 'classnames'; + +import { + ColoredCardsIconMap, + ColoredCardsIconColor, + GraduationCap, + ArrowRight, + BookOpen, + Layers, +} from '@/src/svgs/Icons'; +import { HomepageData, ColoredCardsColor } from '../../lib/types'; + +type Props = { + homepageData: HomepageData; +}; + +const Homepage: FC = ({ homepageData }) => { + console.log(homepageData); + const getColorName = (color: ColoredCardsColor): ColoredCardsIconColor => { + if (color === 'blue') { + return 'blue-vibrant'; + } + if (color === 'green') { + return 'green-base'; + } + if (color === 'orange') { + return 'orange-vibrant'; + } + return 'pink-vibrant'; + }; + + return ( +
+
+

+ {homepageData.hero.headerLine1} + + {homepageData.hero.headerLine2} + +

+
+ {homepageData.coloredCardsBlock && homepageData.coloredCardsBlock.cards.length > 0 ? ( +
+ {homepageData.coloredCardsBlock.cards.map((card) => { + const textColorName = getColorName(card.color); + + return ( +
+ +
+

+ {card.title} +

+

+ {card.description} +

+
+
+ ); + })} +
+ ) : null} + + {homepageData.faqBlock && homepageData.faqBlock.articles.length > 0 ? ( +
+
+ +

FAQ

+
+
+ {homepageData.faqBlock.articles.map((article) => ( + + ))} +
+
+ ) : null} + + {homepageData.guidesBlock && homepageData.guidesBlock.promotedArticles.length > 0 ? ( +
+
+ +

Guides

+
+
+ {homepageData.guidesBlock.promotedArticles.map((article) => { + return ( + + ); + })} +
+
+ ) : null} + + {homepageData.topicsBlock && homepageData.topicsBlock.categories.length > 0 ? ( +
+
+ +

Topics

+
+
+ {homepageData.topicsBlock.categories.map((category) => { + return ( + + {category.name} + + ); + })} +
+
+ ) : null} + +
+ ); +}; + +export default Homepage; + +const ArticleLinkCard: FC<{ title: string; description: string; url: string }> = ({ + title, + description, + url, +}) => { + return ( + +
+ +
+

+ {title} +

+

{description}

+ + ); +}; + +const Divider: FC = () => { + return ( +
+ ); +}; diff --git a/src/modules/homepage/index.tsx b/src/modules/homepage/index.tsx new file mode 100644 index 000000000..82ba6b005 --- /dev/null +++ b/src/modules/homepage/index.tsx @@ -0,0 +1 @@ +export { renderHomepage } from './renderHomepage'; diff --git a/src/modules/homepage/renderHomepage.tsx b/src/modules/homepage/renderHomepage.tsx new file mode 100644 index 000000000..b389f2d8b --- /dev/null +++ b/src/modules/homepage/renderHomepage.tsx @@ -0,0 +1,18 @@ +import { render } from 'react-dom'; +import { HomepageData } from '../../lib/types'; +import { Settings } from '../shared'; +import { createTheme, ThemeProviders } from '../shared'; +import Homepage from './Homepage'; + +export async function renderHomepage( + settings: Settings, + homepageData: HomepageData, + container: HTMLElement +) { + render( + + + , + container + ); +} diff --git a/src/modules/navigation/Navigation.tsx b/src/modules/navigation/Navigation.tsx index 17e5dc21f..8980a2e17 100644 --- a/src/modules/navigation/Navigation.tsx +++ b/src/modules/navigation/Navigation.tsx @@ -1,5 +1,5 @@ import { FC, useState, useEffect } from 'react'; -import type { Navigation } from "./data-types"; +import type { Navigation } from './data-types'; import cn from 'classnames'; @@ -38,10 +38,10 @@ const Navigation: FC = () => { 'Navigation fixed top-0 left-0 right-0 z-nav flex w-screen justify-center bg-light-surface-1 dark:border-dark-surface-3 dark:bg-dark-surface-1', { 'border-b': !scrollIsOnTop, - }, + } )} > -
+
diff --git a/src/modules/navigation/ThemeSwitch.tsx b/src/modules/navigation/ThemeSwitch.tsx index 17529d345..3f41f0730 100644 --- a/src/modules/navigation/ThemeSwitch.tsx +++ b/src/modules/navigation/ThemeSwitch.tsx @@ -2,7 +2,7 @@ import { FC } from 'react'; import { useUIProvider } from '../../context/uiProvider'; -import { IconMap, Sun, Moon } from '../../svgs/Icons'; +import { ThemeIconMap, Sun, Moon } from '../../svgs/Icons'; import { Switch } from '@headlessui/react'; import cn from 'classnames'; @@ -21,7 +21,7 @@ const ThemeSwitch: FC = () => { aria-label="Toggle theme" > - + diff --git a/src/modules/navigation/renderNavigation.tsx b/src/modules/navigation/renderNavigation.tsx index 05f862bd9..fe5a7ea0f 100644 --- a/src/modules/navigation/renderNavigation.tsx +++ b/src/modules/navigation/renderNavigation.tsx @@ -1,18 +1,9 @@ -import { render } from "react-dom"; -import type { Settings } from "../shared"; -import { - createTheme, - ThemeProviders, - loadTranslations, - initI18next, -} from "../shared"; -import Navigation from "./Navigation"; -import type { Navigation as NavigationProps } from "./data-types"; +import { render } from 'react-dom'; +import type { Settings } from '../shared'; +import { createTheme, ThemeProviders } from '../shared'; +import Navigation from './Navigation'; -export async function renderNavigation( - settings: Settings, - container: HTMLElement -) { +export async function renderNavigation(settings: Settings, container: HTMLElement) { render( diff --git a/src/modules/shared/index.ts b/src/modules/shared/index.ts index 23b4e11d7..bb22be8bf 100644 --- a/src/modules/shared/index.ts +++ b/src/modules/shared/index.ts @@ -1,3 +1,3 @@ -export * from "./notifications"; -export * from "./i18n"; -export * from "./garden-theme"; +export * from './notifications'; +export * from './i18n'; +export * from './garden-theme'; diff --git a/src/navigation.js b/src/navigation.js index ecbfab0c7..0d8c6eb70 100644 --- a/src/navigation.js +++ b/src/navigation.js @@ -1,29 +1,29 @@ -import { ESCAPE } from "./Keys"; +import { ESCAPE } from './Keys'; function toggleNavigation(toggle, menu) { - const isExpanded = menu.getAttribute("aria-expanded") === "true"; - menu.setAttribute("aria-expanded", !isExpanded); - toggle.setAttribute("aria-expanded", !isExpanded); + const isExpanded = menu.getAttribute('aria-expanded') === 'true'; + menu.setAttribute('aria-expanded', !isExpanded); + toggle.setAttribute('aria-expanded', !isExpanded); } function closeNavigation(toggle, menu) { - menu.setAttribute("aria-expanded", false); - toggle.setAttribute("aria-expanded", false); + menu.setAttribute('aria-expanded', false); + toggle.setAttribute('aria-expanded', false); toggle.focus(); } // Navigation -window.addEventListener("DOMContentLoaded", () => { - const menuButton = document.querySelector(".header .menu-button-mobile"); - const menuList = document.querySelector("#user-nav-mobile"); +window.addEventListener('DOMContentLoaded', () => { + const menuButton = document.querySelector('.header .menu-button-mobile'); + const menuList = document.querySelector('#user-nav-mobile'); - menuButton.addEventListener("click", (event) => { + menuButton.addEventListener('click', (event) => { event.stopPropagation(); toggleNavigation(menuButton, menuList); }); - menuList.addEventListener("keyup", (event) => { + menuList.addEventListener('keyup', (event) => { if (event.keyCode === ESCAPE) { event.stopPropagation(); closeNavigation(menuButton, menuList); @@ -31,21 +31,17 @@ window.addEventListener("DOMContentLoaded", () => { }); // Toggles expanded aria to collapsible elements - const collapsible = document.querySelectorAll( - ".collapsible-nav, .collapsible-sidebar" - ); + const collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'); collapsible.forEach((element) => { - const toggle = element.querySelector( - ".collapsible-nav-toggle, .collapsible-sidebar-toggle" - ); + const toggle = element.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle'); - element.addEventListener("click", () => { + element.addEventListener('click', () => { toggleNavigation(toggle, element); }); - element.addEventListener("keyup", (event) => { - console.log("escape"); + element.addEventListener('keyup', (event) => { + console.log('escape'); if (event.keyCode === ESCAPE) { closeNavigation(toggle, element); } @@ -53,20 +49,18 @@ window.addEventListener("DOMContentLoaded", () => { }); // If multibrand search has more than 5 help centers or categories collapse the list - const multibrandFilterLists = document.querySelectorAll( - ".multibrand-filter-list" - ); + const multibrandFilterLists = document.querySelectorAll('.multibrand-filter-list'); multibrandFilterLists.forEach((filter) => { if (filter.children.length > 6) { // Display the show more button - const trigger = filter.querySelector(".see-all-filters"); - trigger.setAttribute("aria-hidden", false); + const trigger = filter.querySelector('.see-all-filters'); + trigger.setAttribute('aria-hidden', false); // Add event handler for click - trigger.addEventListener("click", (event) => { + trigger.addEventListener('click', (event) => { event.stopPropagation(); trigger.parentNode.removeChild(trigger); - filter.classList.remove("multibrand-filter-list--collapsed"); + filter.classList.remove('multibrand-filter-list--collapsed'); }); } }); diff --git a/src/svgs/Icons/index.tsx b/src/svgs/Icons/index.tsx index c7a14ce60..786d903cf 100644 --- a/src/svgs/Icons/index.tsx +++ b/src/svgs/Icons/index.tsx @@ -1,23 +1,17 @@ -import { FC } from "react"; -import cn from "classnames"; -import React from "react"; +import { FC } from 'react'; +import cn from 'classnames'; +import React from 'react'; export const Menu: FC<{ className?: string; - color?: "neutral-2"; -}> = ({ className, color = "neutral-2" }) => { + color?: 'neutral-2'; +}> = ({ className, color = 'neutral-2' }) => { return ( - + @@ -26,22 +20,16 @@ export const Menu: FC<{ export const Chevron: FC<{ className?: string; - color?: "neutral-1"; -}> = ({ className, color = "neutral-1" }) => { + color?: 'neutral-1'; +}> = ({ className, color = 'neutral-1' }) => { return ( - + @@ -50,22 +38,17 @@ export const Chevron: FC<{ export const Github: FC<{ className?: string; - color?: "neutral-2"; -}> = ({ className, color = "neutral-2" }) => { + color?: 'neutral-2'; +}> = ({ className, color = 'neutral-2' }) => { return ( - + @@ -74,20 +57,15 @@ export const Github: FC<{ export const X: FC<{ className?: string; - color?: "neutral-2"; -}> = ({ className, color = "neutral-2" }) => { + color?: 'neutral-2'; +}> = ({ className, color = 'neutral-2' }) => { return ( - + @@ -96,20 +74,15 @@ export const X: FC<{ export const Discord: FC<{ className?: string; - color?: "neutral-2"; -}> = ({ className, color = "neutral-2" }) => { + color?: 'neutral-2'; +}> = ({ className, color = 'neutral-2' }) => { return ( - + @@ -118,26 +91,17 @@ export const Discord: FC<{ export const Globe: FC<{ className?: string; - color: "orange-vibrant" | "brown-vibrant" | "pink-vibrant" | "neutral-2"; + color: 'orange-vibrant' | 'brown-vibrant' | 'pink-vibrant' | 'neutral-2'; }> = ({ className, color }) => { return ( - + @@ -146,22 +110,17 @@ export const Globe: FC<{ export const Close: FC<{ className?: string; - color?: "neutral-2"; -}> = ({ className, color = "neutral-2" }) => { + color?: 'neutral-2'; +}> = ({ className, color = 'neutral-2' }) => { return ( - + @@ -170,20 +129,125 @@ export const Close: FC<{ export const HelpCircle: FC<{ className?: string; - color?: "orange-vibrant"; -}> = ({ className, color = "orange-vibrant" }) => { + color?: 'orange-vibrant' | 'blue-vibrant' | 'green-base' | 'pink-vibrant'; +}> = ({ className, color = 'orange-vibrant' }) => { return ( - + + + ); +}; + +export const Lightbulb: FC<{ + className?: string; + color?: 'orange-vibrant' | 'blue-vibrant' | 'green-base' | 'pink-vibrant'; +}> = ({ className, color = 'orange-vibrant' }) => { + return ( + + + + ); +}; + +export const GraduationCap: FC<{ + className?: string; + color?: 'orange-vibrant' | 'blue-vibrant' | 'green-base' | 'pink-vibrant' | 'neutral-1'; +}> = ({ className, color = 'orange-vibrant' }) => { + return ( + + + + ); +}; + +export const BookOpen: FC<{ + className?: string; + color?: 'neutral-1'; +}> = ({ className, color = 'neutral-1' }) => { + return ( + + + + ); +}; + +export const Layers: FC<{ + className?: string; + color?: 'neutral-1'; +}> = ({ className, color = 'neutral-1' }) => { + return ( + + + + ); +}; + +export const ArrowRight: FC<{ + className?: string; + color?: 'accent-1'; +}> = ({ className, color = 'accent-1' }) => { + return ( + + + + ); +}; + +export const MessageQuestion: FC<{ + className?: string; + color?: 'orange-vibrant' | 'blue-vibrant' | 'green-base' | 'pink-vibrant'; +}> = ({ className, color = 'orange-vibrant' }) => { + return ( + + @@ -192,20 +256,14 @@ export const HelpCircle: FC<{ export const Chat: FC<{ className?: string; - color?: "brown-vibrant"; -}> = ({ className, color = "brown-vibrant" }) => { + color?: 'brown-vibrant'; +}> = ({ className, color = 'brown-vibrant' }) => { return ( - + @@ -214,22 +272,15 @@ export const Chat: FC<{ export const Envlope: FC<{ className?: string; - color?: "pink-vibrant" | "neutral-2"; -}> = ({ className, color = "pink-vibrant" }) => { + color?: 'pink-vibrant' | 'neutral-2'; +}> = ({ className, color = 'pink-vibrant' }) => { return ( - + @@ -238,19 +289,13 @@ export const Envlope: FC<{ export const Sun: FC<{ className?: string; - color?: "neutral-2"; -}> = ({ className, color = "neutral-2" }) => { + color?: 'neutral-2'; +}> = ({ className, color = 'neutral-2' }) => { return ( - + @@ -260,19 +305,13 @@ export const Sun: FC<{ export const Moon: FC<{ className?: string; - color?: "neutral-2"; -}> = ({ className, color = "neutral-2" }) => { + color?: 'neutral-2'; +}> = ({ className, color = 'neutral-2' }) => { return ( - + @@ -280,20 +319,47 @@ export const Moon: FC<{ ); }; -export type Icon = "sun" | "moon"; +export type ThemeIcon = 'sun' | 'moon'; -export const IconMap: FC<{ - icon: Icon; +export const ThemeIconMap: FC<{ + icon: ThemeIcon; className?: string; - color?: "neutral-2"; + color?: 'neutral-2'; }> = ({ icon, color, className }) => { switch (icon) { - case "sun": + case 'sun': return ; - case "moon": + case 'moon': return ; default: console.warn(`Icon ${icon} not found`); return null; } }; + +export type ColoredCardsIcon = 'helpCircle' | 'lightbulb' | 'graduationCap' | 'messageQuestion'; +export type ColoredCardsIconColor = + | 'blue-vibrant' + | 'green-base' + | 'orange-vibrant' + | 'pink-vibrant'; + +export const ColoredCardsIconMap: FC<{ + icon: ColoredCardsIcon; + className?: string; + color?: ColoredCardsIconColor; +}> = ({ icon, color, className }) => { + switch (icon) { + case 'helpCircle': + return ; + case 'lightbulb': + return ; + case 'graduationCap': + return ; + case 'messageQuestion': + return ; + default: + console.warn(`Icon ${icon} not found`); + return null; + } +}; diff --git a/style.css b/style.css index 3b324a84b..76f8b100b 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,3 @@ -@charset "UTF-8"; /***** Normalize.css *****/ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html { @@ -179,4502 +178,4 @@ template { [hidden] { display: none; -} - -/***** Base *****/ -* { - box-sizing: border-box; -} - -body { - background-color: $background_color; - color: $text_color; - font-family: $text_font; - font-size: 15px; - line-height: 1.5; - -webkit-font-smoothing: antialiased; -} -@media (min-width: 1024px) { - body > main { - min-height: 65vh; - } -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: $heading_font; - margin-top: 0; -} - -h1 { - font-size: 32px; -} - -h2 { - font-size: 22px; -} - -h3 { - font-size: 18px; - font-weight: 600; -} - -h4 { - font-size: 16px; -} - -a { - color: $link_color; - text-decoration: none; -} -a:visited { - color: $visited_link_color; -} - -.hbs-form input, -.hbs-form textarea, -.search input, -.search textarea { - color: #000; - font-size: 14px; -} -.hbs-form input, -.search input { - max-width: 100%; - box-sizing: border-box; - transition: border 0.12s ease-in-out; - /* We use the :where selector to not increase the specificity of the selector */ -} -.hbs-form input:where(:not([type=checkbox])), -.search input:where(:not([type=checkbox])) { - outline: none; -} -.hbs-form input:where(:not([type=checkbox])):focus, -.search input:where(:not([type=checkbox])):focus { - border: 1px solid $brand_color; -} -.hbs-form input[disabled], -.search input[disabled] { - background-color: #ddd; -} -.hbs-form select, -.search select { - -webkit-appearance: none; - -moz-appearance: none; - background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff; - background-position: right 10px center; - border: 1px solid #87929d; - border-radius: 4px; - padding: 8px 30px 8px 10px; - outline: none; - color: #555; - width: 100%; -} -.hbs-form select:focus, -.search select:focus { - border: 1px solid $brand_color; -} -.hbs-form select::-ms-expand, -.search select::-ms-expand { - display: none; -} -.hbs-form textarea, -.search textarea { - border: 1px solid #87929d; - border-radius: 2px; - resize: vertical; - width: 100%; - outline: none; - padding: 10px; -} -.hbs-form textarea:focus, -.search textarea:focus { - border: 1px solid $brand_color; -} - -.container { - max-width: 1160px; - margin: 0 auto; - padding: 0 5%; -} -@media (min-width: 1160px) { - .container { - padding: 0; - width: 90%; - } -} - -.container-divider { - border-top: 1px solid #ddd; - margin-bottom: 20px; -} - -ul { - list-style: none; - margin: 0; - padding: 0; -} - -.error-page { - max-width: 1160px; - margin: 0 auto; - padding: 0 5%; -} -@media (min-width: 1160px) { - .error-page { - padding: 0; - width: 90%; - } -} - -.visibility-hidden { - border: 0; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - white-space: nowrap; -} - -/***** Buttons *****/ -.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button { - background-color: transparent; - border: 1px solid $brand_color; - border-radius: 4px; - color: $brand_color; - cursor: pointer; - display: inline-block; - font-size: 12px; - line-height: 2.34; - margin: 0; - padding: 0 20px; - text-align: center; - transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out; - user-select: none; - white-space: nowrap; - width: 100%; - -webkit-touch-callout: none; -} -@media (min-width: 768px) { - .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button { - width: auto; - } -} -.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited { - color: $brand_color; -} -.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary { - background-color: $brand_color; - color: $brand_text_color; - text-decoration: none; -} -.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active { - background-color: darken($brand_color, 20%); - border-color: darken($brand_color, 20%); -} -.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] { - cursor: default; -} - -.button-large, -.hbs-form input[type=submit] { - cursor: pointer; - background-color: $brand_color; - border: 0; - border-radius: 4px; - color: $brand_text_color; - font-size: 14px; - line-height: 2.72; - min-width: 190px; - padding: 0 1.9286em; - width: 100%; -} -@media (min-width: 768px) { - .button-large, - .hbs-form input[type=submit] { - width: auto; - } -} -.button-large:visited, -.hbs-form input[type=submit]:visited { - color: $brand_text_color; -} -.button-large:hover, .button-large:active, .button-large:focus, -.hbs-form input[type=submit]:hover, -.hbs-form input[type=submit]:active, -.hbs-form input[type=submit]:focus { - background-color: darken($brand_color, 20%); -} -.button-large[disabled], -.hbs-form input[type=submit][disabled] { - background-color: #ddd; -} - -.button-secondary { - color: lighten($text_color, 20%); - border: 1px solid #87929d; - background-color: transparent; -} -.button-secondary:visited { - color: lighten($text_color, 20%); -} -.button-secondary:hover, .button-secondary:focus, .button-secondary:active { - color: $text_color; - border: 1px solid #87929d; - background-color: darken($background_color, 3%); -} - -/***** Split button *****/ -.split-button { - display: flex; -} - -.split-button button { - background-color: $brand_color; - border: 0; - color: $brand_text_color; - height: 32px; - line-height: 16px; - outline-color: $brand_color; -} - -[dir=rtl] .split-button button:not(:only-child):first-child { - border-left: 1px solid $brand_text_color; - border-top-left-radius: unset; - border-bottom-left-radius: unset; -} -[dir=ltr] .split-button button:not(:only-child):first-child { - border-right: 1px solid $brand_text_color; - border-top-right-radius: unset; - border-bottom-right-radius: unset; -} -.split-button button:not(:only-child):last-child { - display: flex; - justify-content: center; - align-items: center; - width: 26px; - min-width: 26px; - max-width: 26px; - padding: 0; -} -[dir=rtl] .split-button button:not(:only-child):last-child { - border-top-right-radius: unset; - border-bottom-right-radius: unset; -} -[dir=ltr] .split-button button:not(:only-child):last-child { - border-top-left-radius: unset; - border-bottom-left-radius: unset; -} - -/***** Tables *****/ -.table { - width: 100%; - table-layout: fixed; - border-collapse: collapse; - border-spacing: 0; -} -@media (min-width: 768px) { - .table { - table-layout: auto; - } -} -.table th, -.table th a { - color: lighten($text_color, 20%); - font-size: 13px; - text-align: left; -} -[dir=rtl] .table th, -[dir=rtl] .table th a { - text-align: right; -} -.table tr { - border-bottom: 1px solid #ddd; - display: block; - padding: 20px 0; -} -@media (min-width: 768px) { - .table tr { - display: table-row; - } -} -.table td { - display: block; -} -@media (min-width: 768px) { - .table td { - display: table-cell; - } -} -@media (min-width: 1024px) { - .table td, - .table th { - padding: 20px 30px; - } -} -@media (min-width: 768px) { - .table td, - .table th { - padding: 10px 20px; - height: 60px; - } -} - -/***** Forms *****/ -.form { - max-width: 650px; -} - -.form-field ~ .form-field { - margin-top: 25px; -} - -.form-field label { - display: block; - font-size: 13px; - margin-bottom: 5px; -} - -.form-field input { - border: 1px solid #87929d; - border-radius: 4px; - padding: 10px; - width: 100%; -} -.form-field input:focus { - border: 1px solid $brand_color; -} - -.form-field input[type=text] { - border: 1px solid #87929d; - border-radius: 4px; -} -.form-field input[type=text]:focus { - border: 1px solid $brand_color; -} - -.form-field input[type=checkbox] { - width: auto; -} - -.form-field .nesty-input { - border-radius: 4px; - border: 1px solid #87929d; - height: 40px; - line-height: 40px; - outline: none; - vertical-align: middle; -} -.form-field .nesty-input:focus { - border: 1px solid $brand_color; - text-decoration: none; -} - -.form-field .hc-multiselect-toggle { - border: 1px solid #87929d; -} - -.form-field .hc-multiselect-toggle:focus { - outline: none; - border: 1px solid $brand_color; - text-decoration: none; -} - -.form-field textarea { - vertical-align: middle; -} - -.form-field input[type=checkbox] + label { - margin: 0 0 0 10px; -} - -.form-field .optional { - color: lighten($text_color, 20%); - margin-left: 4px; -} - -.form-field p { - color: lighten($text_color, 20%); - font-size: 12px; - margin: 5px 0; -} - -.form footer { - margin-top: 40px; - padding-top: 30px; -} - -.form footer a { - color: lighten($text_color, 20%); - cursor: pointer; - margin-right: 15px; -} - -.form .suggestion-list { - font-size: 13px; - margin-top: 30px; -} -.form .suggestion-list label { - border-bottom: 1px solid #ddd; - display: block; - padding-bottom: 5px; -} -.form .suggestion-list li { - padding: 10px 0; -} -.form .suggestion-list li a:visited { - color: $visited_link_color; -} - -/***** Header *****/ -.header { - width: 100%; - position: relative; - align-items: center; - display: flex; - height: 71px; - justify-content: space-between; -} - -.logo img { - max-height: 37px; - vertical-align: middle; -} - -.logo span { - margin: 0 10px; - color: $brand_color; -} - -.logo a { - display: inline-block; -} - -.logo a:hover, -.logo a:focus, -.logo a:active { - text-decoration: none; -} - -.user-nav { - display: inline-block; - position: absolute; - white-space: nowrap; -} -@media (min-width: 768px) { - .user-nav { - position: relative; - } -} -.user-nav[aria-expanded=true] { - background-color: #fff; - box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1); - border: solid 1px #ddd; - right: 0; - left: 0; - top: 71px; - z-index: 1; -} -.user-nav[aria-expanded=true] > a { - display: block; - margin: 20px; -} -.user-nav[aria-expanded=true] > .user-nav-list li { - display: block; -} -.user-nav[aria-expanded=true] > .user-nav-list a { - display: block; - margin: 20px; -} - -.user-nav-list { - display: block; - list-style: none; -} -.user-nav-list > li { - display: inline-block; -} - -@media (max-width: 768px) { - .nav-wrapper-desktop { - display: none; - } -} -@media (min-width: 768px) { - .nav-wrapper-desktop { - display: none; - } -} -@media (min-width: 1024px) { - .nav-wrapper-desktop { - display: inline-block; - } -} -.nav-wrapper-desktop a { - border: 0; - color: $link_color; - display: none; - font-size: 14px; - padding: 0 20px 0 0; - width: auto; -} -@media (min-width: 768px) { - .nav-wrapper-desktop a { - display: inline-block; - } -} -[dir=rtl] .nav-wrapper-desktop a { - padding: 0 0 0 20px; -} -.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active { - background-color: transparent; - color: $link_color; - text-decoration: underline; -} - -@media (min-width: 1024px) { - .nav-wrapper-mobile { - display: none; - } -} -.nav-wrapper-mobile .menu-button-mobile { - background: none; - border: 0; - width: auto; - min-width: 71px; - cursor: pointer; -} -.nav-wrapper-mobile .menu-button-mobile .icon-menu { - padding: 7px; - vertical-align: middle; - width: 30px; - height: 30px; - border-radius: 50%; -} -.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu { - background: #f3f3f3; -} -.nav-wrapper-mobile .menu-list-mobile { - position: absolute; - background-color: #fff; - box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15); - border-top: solid 1px #ddd; - border-bottom: solid 1px #ddd; - right: 0; - left: 0; - top: 71px; - z-index: 2; -} -.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] { - display: none; -} -.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] { - display: block; -} -.nav-wrapper-mobile .menu-list-mobile-items .item { - margin: 4px 0; -} -.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) { - display: none; -} -.nav-wrapper-mobile .menu-list-mobile-items .nav-divider { - border-bottom: 0.1px solid #ddd; - padding: 0; -} -.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child { - display: none; -} -.nav-wrapper-mobile .menu-list-mobile-items button { - background: none; - border: none; - padding: 8px 24px; - width: 100%; - height: 100%; - color: $text_color; - cursor: pointer; - text-align: start; -} -.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover { - background-color: #f3f3f3; - text-decoration: underline; -} -.nav-wrapper-mobile .menu-list-mobile-items a { - display: block; - padding: 8px 24px; - width: 100%; - height: 100%; - color: $text_color; -} -.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover { - background-color: #f3f3f3; -} -.nav-wrapper-mobile .menu-list-mobile-items .my-profile { - display: flex; - line-height: 1.5; -} -.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip { - font-size: 12px; - color: #68737d; -} -.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar { - height: 20px; - width: 20px; - border-radius: 50%; - display: inline-block; - margin-right: 8px; - margin-top: 1px; -} -[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar { - margin-right: 0; - margin-left: 8px; -} - -.skip-navigation { - align-items: center; - background-color: black; - color: white; - display: flex; - font-size: 14px; - justify-content: center; - left: -999px; - margin: 20px; - padding: 20px; - overflow: hidden; - position: absolute; - top: auto; - z-index: -999; -} -[dir=rtl] .skip-navigation { - left: initial; - right: -999px; -} -.skip-navigation:focus, .skip-navigation:active { - left: auto; - overflow: auto; - text-align: center; - text-decoration: none; - top: auto; - z-index: 999; -} -[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active { - left: initial; - right: auto; -} - -#zd-modal-container ~ .skip-navigation { - display: none; -} - -/***** User info in header *****/ -.user-info { - display: inline-block; -} -.user-info .dropdown-toggle::after { - display: none; -} -@media (min-width: 768px) { - .user-info .dropdown-toggle::after { - display: inline-block; - } -} -.user-info > button { - border: 0; - color: $link_color; - min-width: 0; - padding: 0; - white-space: nowrap; -} -.user-info > button:hover, .user-info > button:focus { - color: $link_color; - background-color: transparent; -} -.user-info > button::after { - color: $link_color; - padding-right: 15px; -} -[dir=rtl] .user-info > button::after { - padding-left: 15px; - padding-right: 0; -} - -#user #user-name { - display: none; - font-size: 14px; -} -@media (min-width: 768px) { - #user #user-name { - display: inline-block; - } -} -#user #user-name:hover { - text-decoration: underline; -} - -/***** User avatar *****/ -.user-avatar { - height: 25px; - width: 25px; - border-radius: 50%; - display: inline-block; - vertical-align: middle; -} - -.avatar { - display: inline-block; - position: relative; -} -.avatar img { - height: 40px; - width: 40px; -} -.avatar .icon-agent { - color: $brand_color; - border: 2px solid #fff; - border-radius: 50%; - bottom: -4px; - background-color: $brand_text_color; - font-size: 17px; - height: 17px; - line-height: 17px; - position: absolute; - right: -2px; - text-align: center; - width: 17px; -} - -/***** Footer *****/ -.footer { - border-top: 1px solid #ddd; - margin-top: 60px; - padding: 30px 0; -} -.footer a { - color: lighten($text_color, 20%); -} -.footer-inner { - max-width: 1160px; - margin: 0 auto; - padding: 0 5%; - display: flex; - justify-content: space-between; -} -@media (min-width: 1160px) { - .footer-inner { - padding: 0; - width: 90%; - } -} -.footer-language-selector button { - color: lighten($text_color, 20%); - display: inline-block; -} - -.powered-by-zendesk a, -.powered-by-zendesk a:visited { - color: lighten($text_color, 20%); -} - -/***** Breadcrumbs *****/ -.breadcrumbs { - margin: 0 0 15px 0; - padding: 0; - display: flex; -} -@media (min-width: 768px) { - .breadcrumbs { - margin: 0; - } -} -.breadcrumbs li { - color: lighten($text_color, 20%); - font-size: 13px; - max-width: 450px; - overflow: hidden; - text-overflow: ellipsis; -} -.breadcrumbs li + li::before { - content: ">"; - margin: 0 4px; -} -.breadcrumbs li a:visited { - color: $link_color; -} - -/***** Search field *****/ -.search-container { - position: relative; -} - -.search { - border-color: #87929d; - border-radius: 30px; - border-style: solid; - border-width: 1px; - display: flex; - position: relative; - transition: border 0.12s ease-in-out; -} -.search:focus-within { - border-color: $brand_color; -} -.search input[type=search], -.search .clear-button { - background-color: #fff; - border-radius: 30px; - border: none; -} -.search-full input[type=search], .search-full .clear-button { - border-color: #fff; -} -.search input[type=search] { - appearance: none; - -webkit-appearance: none; - box-sizing: border-box; - color: #666; - flex: 1 1 auto; - height: 40px; - width: 100%; -} -.search input[type=search]:focus { - color: #555; -} -.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration { - -webkit-appearance: none; -} -.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus { - -webkit-box-shadow: 0 0 0 1000px #fff inset; -} -.search .clear-button { - align-items: center; - box-sizing: border-box; - color: #777; - cursor: pointer; - display: none; - flex: none; - justify-content: center; - padding: 0 15px; -} -.search .clear-button:hover { - background-color: $brand_color; - color: #fff; -} -.search .clear-button:focus { - outline: 0; - box-shadow: 0 0 0 3px $brand_color; -} -.search-has-value .clear-button { - display: flex; -} - -[dir=ltr] .search input[type=search] { - padding-left: 40px; - padding-right: 20px; -} -[dir=ltr] .search-has-value input[type=search] { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - border-right-color: transparent; -} -[dir=ltr] .search-has-value input[type=search]:focus { - border-right-color: $brand_color; -} -[dir=ltr] .search .clear-button { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - border-left-color: transparent; -} -[dir=ltr] .search .clear-button:focus { - border-left-color: $brand_color; -} - -[dir=rtl] .search input[type=search] { - padding-left: 20px; - padding-right: 40px; -} -[dir=rtl] .search-has-value input[type=search] { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - border-left-color: transparent; -} -[dir=rtl] .search-has-value input[type=search]:focus { - border-left-color: $brand_color; -} -[dir=rtl] .search .clear-button { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - border-right-color: transparent; -} -[dir=rtl] .search .clear-button:focus { - border-right-color: $brand_color; -} - -.search-icon { - position: relative; - top: 50%; - transform: translateY(-50%); - position: absolute; - left: 15px; - z-index: 1; - width: 18px; - height: 18px; - color: #777; - pointer-events: none; -} -[dir=rtl] .search-icon { - left: auto; - right: 15px; -} - -/***** Hero component *****/ -.hero { - background-image: url($homepage_background_image); - background-position: center; - background-size: cover; - height: 300px; - padding: 0 20px; - text-align: center; - width: 100%; -} -.hero-inner { - position: relative; - top: 50%; - transform: translateY(-50%); - max-width: 610px; - margin: 0 auto; -} - -.page-header { - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: space-between; - margin: 10px 0; -} -@media (min-width: 768px) { - .page-header { - align-items: baseline; - flex-direction: row; - flex-wrap: wrap; - gap: 16px; - margin: 0; - } -} -.page-header .section-subscribe { - flex-shrink: 0; - margin-bottom: 10px; -} -@media (min-width: 768px) { - .page-header .section-subscribe { - margin-bottom: 0; - } -} -.page-header h1 { - flex-grow: 1; - margin-bottom: 10px; -} -.page-header-description { - font-style: italic; - margin: 0 0 30px 0; - word-break: break-word; -} -@media (min-width: 1024px) { - .page-header-description { - flex-basis: 100%; - } -} -.page-header .icon-lock { - height: 20px; - width: 20px; - position: relative; - left: -5px; - vertical-align: baseline; -} - -.sub-nav { - align-items: baseline; - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: 15px 30px; - justify-content: space-between; - margin-bottom: 55px; -} -@media (min-width: 768px) { - .sub-nav { - flex-direction: row; - } -} -.sub-nav .breadcrumbs { - margin: 0; -} -.sub-nav .search-container { - max-width: 300px; - width: 100%; -} -@media (min-width: 768px) { - .sub-nav .search-container { - flex: 0 1 300px; - } -} -.sub-nav input[type=search]::after { - font-size: 15px; -} - -/***** Blocks *****/ -/* Used in Homepage#categories and Community#topics */ -.blocks-list { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - list-style: none; - padding: 0; -} -@media (min-width: 768px) { - .blocks-list { - margin: 0 -15px; - } -} -.blocks-item { - border: 1px solid $brand_color; - border-radius: 4px; - box-sizing: border-box; - color: $brand_color; - display: flex; - flex: 1 0 340px; - margin: 0 0 30px; - max-width: 100%; - text-align: center; -} -@media (min-width: 768px) { - .blocks-item { - margin: 0 15px 30px; - } -} -.blocks-item:hover, .blocks-item:focus, .blocks-item:active { - background-color: $brand_color; -} -.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * { - color: $brand_text_color; - text-decoration: none; -} -.blocks-item-internal { - background-color: transparent; - border: 1px solid #ddd; -} -.blocks-item-internal .icon-lock { - height: 15px; - width: 15px; - bottom: 5px; - position: relative; -} -.blocks-item-internal a { - color: $text_color; -} -.blocks-item-link { - color: $brand_color; - padding: 20px 30px; - display: flex; - flex-direction: column; - flex: 1; - justify-content: center; - border-radius: inherit; -} -.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active { - color: inherit; - text-decoration: none; -} -.blocks-item-link:focus { - outline: 0; - box-shadow: 0 0 0 3px $brand_color; - text-decoration: none; -} -.blocks-item-title { - margin-bottom: 0; - font-size: 16px; -} -.blocks-item-description { - margin: 0; -} -.blocks-item-description:not(:empty) { - margin-top: 10px; -} - -/***** Homepage *****/ -.section { - margin-bottom: 40px; -} -@media (min-width: 768px) { - .section { - margin-bottom: 60px; - } -} - -.home-section h2 { - margin-bottom: 10px; - text-align: center; -} - -/***** Promoted articles *****/ -.promoted-articles { - display: flex; - flex-direction: column; - flex-wrap: wrap; -} -@media (min-width: 1024px) { - .promoted-articles { - flex-direction: row; - } -} -.promoted-articles-item { - flex: 1 0 auto; -} -@media (min-width: 1024px) { - .promoted-articles-item { - align-self: flex-end; - flex: 0 0 auto; - padding-right: 30px; - width: 33%; /* Three columns on desktop */ - } - [dir=rtl] .promoted-articles-item { - padding: 0 0 0 30px; - } -} -.promoted-articles-item:nth-child(3n) { - padding-right: 0; -} -.promoted-articles-item a { - display: block; - border-bottom: 1px solid #ddd; - padding: 15px 0; -} -.promoted-articles-item .icon-lock { - vertical-align: baseline; -} -.promoted-articles-item:last-child a { - border: 0; -} -@media (min-width: 1024px) { - .promoted-articles-item:last-child a { - border-bottom: 1px solid #ddd; - } -} - -/***** Community section in homepage *****/ -.community { - text-align: center; -} -.community-image { - min-height: 300px; - margin-top: 32px; - background-image: url($community_image); - background-position: center; - background-repeat: no-repeat; - max-width: 100%; -} -.community a { - color: $link_color; - text-decoration: underline; -} -.community a:visited { - color: $visited_link_color; -} -.community a:hover, .community a:active, .community a:focus { - color: $hover_link_color; -} - -.community, -.activity { - border-top: 1px solid #ddd; - padding: 30px 0; -} - -/***** Recent activity *****/ -.recent-activity-header { - margin-bottom: 10px; - text-align: center; -} -.recent-activity-list { - padding: 0; -} -.recent-activity-item { - border-bottom: 1px solid #ddd; - overflow: auto; - padding: 20px 0; -} -.recent-activity-item h3 { - margin: 0; -} -.recent-activity-item-parent { - font-size: 16px; - font-weight: 600; -} -.recent-activity-item-parent, .recent-activity-item-link { - margin: 6px 0; - display: inline-block; - width: 100%; -} -@media (min-width: 768px) { - .recent-activity-item-parent, .recent-activity-item-link { - width: 70%; - margin: 0; - } -} -.recent-activity-item-link { - font-size: 14px; - overflow: hidden; - text-overflow: ellipsis; -} -.recent-activity-item-meta { - color: $text_color; - margin: 15px 0 0 0; - float: none; -} -@media (min-width: 768px) { - .recent-activity-item-meta { - margin: 0; - float: right; - } - [dir=rtl] .recent-activity-item-meta { - float: left; - } -} -.recent-activity-item-time, .recent-activity-item-comment { - display: inline-block; - font-size: 13px; -} -.recent-activity-item-comment { - padding-left: 5px; -} -[dir=rtl] .recent-activity-item-comment { - padding: 0 5px 0 0; -} -.recent-activity-item-comment::before { - display: inline-block; -} -.recent-activity-controls { - padding-top: 15px; -} -.recent-activity-controls a { - color: $link_color; - text-decoration: underline; -} -.recent-activity-controls a:visited { - color: $visited_link_color; -} -.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus { - color: $hover_link_color; -} -.recent-activity-accessibility-label { - border: 0; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - white-space: nowrap; -} -.recent-activity-comment-icon svg { - vertical-align: middle; - color: $brand_color; - width: 16px; - height: 16px; -} -.recent-activity-comment-icon:after { - content: attr(data-comment-count); - margin-left: 3px; -} -[dir=rtl] .recent-activity-comment-icon:after { - margin-left: 0; - margin-right: 3px; -} - -/***** Category pages *****/ -.category-container { - display: flex; - justify-content: flex-end; -} -.category-content { - flex: 1; - max-width: 100%; -} -@media (min-width: 1024px) { - .category-content { - flex: 0 0 80%; - } -} - -.section-tree { - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: space-between; -} -@media (min-width: 768px) { - .section-tree { - flex-direction: row; - } -} -.section-tree .section { - flex: initial; - max-width: 100%; -} -@media (min-width: 768px) { - .section-tree .section { - flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */ - } -} -.section-tree-title { - margin-bottom: 0; - font-size: 18px; - font-weight: 600; -} -.section-tree-title a { - color: $text_color; -} -.section-tree .see-all-articles { - display: block; - padding: 15px 0; -} - -.article-list-item { - font-size: 16px; - padding: 15px 0; - text-overflow: ellipsis; - overflow: hidden; -} -.article-list-item a { - color: $text_color; -} - -.icon-star { - color: $brand_color; - font-size: 18px; -} - -/***** Section pages *****/ -.section-container { - display: flex; - justify-content: flex-end; -} -.section-content { - flex: 1; - max-width: 100%; -} -@media (min-width: 1024px) { - .section-content { - flex: 0 0 80%; - } -} -.section-list { - margin: 40px 0; -} - -.section-list-item { - border-bottom: 1px solid #ddd; - font-size: 16px; - padding: 15px 0; -} -.section-list-item:first-child { - border-top: 1px solid #ddd; -} -.section-list-item a { - align-items: center; - color: $text_color; - display: flex; - justify-content: space-between; -} - -.see-all-sections-trigger { - cursor: pointer; - display: block; - padding: 15px; - text-align: center; -} -.see-all-sections-trigger[aria-hidden=true] { - display: none; -} - -/***** Article *****/ -.article { - /* - * The article grid is defined this way to optimize readability: - * Sidebar | Content | Free space - * 17% | 66% | 17% - */ - flex: 1 0 auto; -} -@media (min-width: 1024px) { - .article { - flex: 1 0 66%; - max-width: 66%; - min-width: 640px; - padding: 0 30px; - } -} -.article-container { - display: flex; - flex-direction: column; -} -@media (min-width: 1024px) { - .article-container { - flex-direction: row; - } -} -.article-header { - align-items: flex-start; - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: space-between; - margin-bottom: 40px; - margin-top: 20px; -} -@media (min-width: 768px) { - .article-header { - flex-direction: row; - margin-top: 0; - } -} -.article-avatar { - margin-right: 10px; -} -.article-author { - margin-bottom: 10px; -} -.article-title { - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; -} -@media (min-width: 768px) { - .article-title { - flex-basis: 100%; /* Take entire row */ - } -} -.article-title .icon-lock { - position: relative; - left: -5px; - vertical-align: baseline; -} -.article [role=button] { - flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/ - width: 100%; -} -@media (min-width: 768px) { - .article [role=button] { - width: auto; - } -} -.article-info { - max-width: 100%; -} -.article-meta { - display: inline-block; - vertical-align: middle; -} -.article-body { - display: flow-root; -} -.article-body a { - color: $link_color; - text-decoration: underline; -} -.article-body a:visited { - color: $visited_link_color; -} -.article-body a:hover, .article-body a:active, .article-body a:focus { - color: $hover_link_color; -} -.article-body img { - height: auto; - max-width: 100%; -} -.article-body p > img.image-style-align-left { - float: left; - margin: 8px 20px 6px 0; -} -.article-body p > img.image-style-align-right { - float: right; - margin: 8px 0px 6px 20px; -} -.article-body p > img.image-style-block-align-right { - margin-left: auto; - margin-right: 0; -} -.article-body p > img.image-style-block-align-left { - margin-left: 0; - margin-right: auto; -} -.article-body figure.image { - display: table; - margin: 0 auto; -} -.article-body figure.image > img { - display: block; - width: 100%; -} -.article-body figure.image.image-style-align-left { - float: left; - margin: 8px 20px 6px 0; -} -.article-body figure.image.image-style-align-right { - float: right; - margin: 8px 0px 6px 20px; -} -.article-body figure.image.image-style-block-align-right { - margin-left: auto; - margin-right: 0; -} -.article-body figure.image.image-style-block-align-left { - margin-left: 0; - margin-right: auto; -} -.article-body figcaption { - padding: 10px 0; - font-size: 12px; - text-align: center; - background-color: darken($background_color, 5%); -} -.article-body ul, -.article-body ol { - padding-left: 20px; - list-style-position: outside; - margin: 20px 0 20px 20px; -} -[dir=rtl] .article-body ul, -[dir=rtl] .article-body ol { - padding-right: 20px; - padding-left: 0; - margin-left: 0; - margin-right: 20px; -} -.article-body ul > ul, -.article-body ol > ol, -.article-body ol > ul, -.article-body ul > ol, -.article-body li > ul, -.article-body li > ol { - margin: 0; -} -.article-body ul { - list-style-type: disc; -} -.article-body :not(pre) > code { - background: darken($background_color, 3%); - border: 1px solid #ddd; - border-radius: 3px; - padding: 0 5px; - margin: 0 2px; -} -.article-body pre { - background: darken($background_color, 3%); - border: 1px solid #ddd; - border-radius: 3px; - padding: 10px 15px; - overflow: auto; - white-space: pre; -} -.article-body blockquote { - border-left: 1px solid #ddd; - color: lighten($text_color, 20%); - font-style: italic; - padding: 0 15px; -} -.article-body > p:last-child { - margin-bottom: 0; -} -.article-content { - line-height: 1.6; - margin: 40px 0; - word-wrap: break-word; -} -.article-footer { - align-items: center; - display: flex; - justify-content: space-between; - padding-bottom: 20px; -} -.article-comment-count { - color: lighten($text_color, 20%); -} -.article-comment-count:hover { - text-decoration: none; -} -.article-comment-count-icon { - vertical-align: middle; - color: $brand_color; - width: 18px; - height: 18px; -} -.article-sidebar { - border-bottom: 1px solid #ddd; - border-top: 1px solid #ddd; - flex: 1 0 auto; - margin-bottom: 20px; - padding: 0; -} -@media (min-width: 1024px) { - .article-sidebar { - border: 0; - flex: 0 0 17%; - height: auto; - max-width: 17%; - } -} -.article-relatives { - border-top: 1px solid #ddd; - display: flex; - flex-direction: column; - padding: 20px 0; -} -@media (min-width: 768px) { - .article-relatives { - flex-direction: row; - } -} -.article-relatives > * { - flex: 1 0 50%; - min-width: 50%; - overflow-wrap: break-word; - margin-right: 0; -} -.article-relatives > *:last-child { - padding: 0; -} -@media (min-width: 768px) { - .article-relatives > * { - padding-right: 20px; - } -} -.article-votes { - border-top: 1px solid #ddd; - padding: 30px 0; - text-align: center; -} -.article-votes-question { - font-size: 15px; - font-weight: normal; - margin-bottom: 0; -} -.article-vote { - margin: 10px 5px; - min-width: 90px; - width: auto; -} -.article-more-questions { - margin: 10px 0 20px; - text-align: center; -} -.article-more-questions a { - color: $link_color; - text-decoration: underline; -} -.article-more-questions a:visited { - color: $visited_link_color; -} -.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus { - color: $hover_link_color; -} -.article-return-to-top { - border-top: 1px solid #87929d; -} -@media (min-width: 1024px) { - .article-return-to-top { - display: none; - } -} -.article-return-to-top a { - color: $text_color; - display: block; - padding: 20px 0; -} -.article-return-to-top a:hover, .article-return-to-top a:focus { - text-decoration: none; -} -.article-return-to-top-icon { - transform: rotate(0.5turn); -} -.article td > p:first-child, -.article th > p:first-child { - margin-top: 0; -} -.article td > p:last-child, -.article th > p:last-child { - margin-bottom: 0; -} - -.sidenav-title { - font-size: 15px; - position: relative; - font-weight: 600; -} -.sidenav-item { - display: block; - margin-top: 10px; - margin-bottom: 16px; - overflow: hidden; - text-overflow: ellipsis; -} - -.recent-articles li, -.related-articles li { - margin-bottom: 15px; -} - -/***** Attachments *****/ -/* Styles attachments inside posts, articles and comments */ -.attachments .attachment-item { - padding-left: 20px; - position: relative; - margin-bottom: 10px; -} -.attachments .attachment-item:last-child { - margin-bottom: 0; -} -.attachments .attachment-item .attachment-icon { - color: $text_color; - left: 0; - position: absolute; - top: 5px; -} -[dir=rtl] .attachments .attachment-item { - padding-left: 0; - padding-right: 20px; -} -[dir=rtl] .attachments .attachment-item .attachment-icon { - left: auto; - right: 0; -} - -.upload-dropzone span { - color: lighten($text_color, 20%); -} - -/***** Social share links *****/ -.share { - padding: 0; - white-space: nowrap; -} - -.share li, -.share a { - display: inline-block; -} - -.share li { - height: 25px; - width: 25px; -} - -.share a { - color: lighten($text_color, 20%); -} -.share a:hover { - text-decoration: none; - color: $brand_color; -} -.share a svg { - height: 18px; - width: 18px; - display: block; -} - -/***** Comments *****/ -/* Styles comments inside articles, posts and requests */ -.comment { - border-bottom: 1px solid #ddd; - padding: 20px 0; -} -.comment-heading, .recent-articles-title, -.related-articles-title { - margin-bottom: 5px; - margin-top: 0; - font-size: 18px; - font-weight: 600; -} -.comment-overview { - border-bottom: 1px solid #ddd; - border-top: 1px solid #ddd; - padding: 20px 0; -} -.comment-overview p { - margin-top: 0; -} -.comment-callout { - color: lighten($text_color, 20%); - display: inline-block; - font-size: 13px; - margin-bottom: 0; -} -.comment-callout a { - color: $link_color; - text-decoration: underline; -} -.comment-callout a:visited { - color: $visited_link_color; -} -.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus { - color: $hover_link_color; -} -.comment-sorter { - display: inline-block; - float: right; -} -.comment-sorter .dropdown-toggle { - color: lighten($text_color, 20%); - font-size: 13px; -} -[dir=rtl] .comment-sorter { - float: left; -} -.comment-wrapper { - display: flex; - position: relative; -} -.comment-wrapper.comment-official { - border: 1px solid $brand_color; - padding: 40px 20px 20px; -} -@media (min-width: 768px) { - .comment-wrapper.comment-official { - padding-top: 20px; - } -} -.comment-info { - min-width: 0; - padding-right: 20px; - width: 100%; -} -[dir=rtl] .comment-info { - padding-right: 0; - padding-left: 20px; -} -.comment-author { - align-items: flex-end; - display: flex; - flex-wrap: wrap; - margin-bottom: 20px; -} -@media (min-width: 768px) { - .comment-author { - justify-content: space-between; - } -} -.comment-avatar { - margin-right: 10px; -} -[dir=rtl] .comment-avatar { - margin-left: 10px; - margin-right: 0; -} -.comment-meta { - flex: 1 1 auto; -} -.comment-labels { - flex-basis: 100%; -} -@media (min-width: 768px) { - .comment-labels { - flex-basis: auto; - } -} -.comment .status-label:not(.status-label-official) { - margin-top: 10px; -} -@media (min-width: 768px) { - .comment .status-label:not(.status-label-official) { - margin-top: 0; - } -} -.comment-form { - display: flex; - padding-top: 30px; - word-wrap: break-word; -} -.comment-container { - width: 100%; -} -.comment-form-controls { - display: none; - margin-top: 10px; - text-align: left; -} -@media (min-width: 768px) { - [dir=ltr] .comment-form-controls { - text-align: right; - } -} -.comment-form-controls input[type=submit] { - margin-top: 15px; -} -@media (min-width: 1024px) { - .comment-form-controls input[type=submit] { - margin-left: 15px; - } - [dir=rtl] .comment-form-controls input[type=submit] { - margin-left: 0; - margin-right: 15px; - } -} -.comment-form-controls input[type=checkbox] { - margin-right: 5px; -} -.comment-form-controls input[type=checkbox] [dir=rtl] { - margin-left: 5px; -} -.comment-ccs { - display: none; -} -.comment-ccs + textarea { - margin-top: 10px; -} -.comment-attachments { - margin-top: 10px; -} -.comment-attachments a { - color: $brand_color; -} -.comment-body { - -moz-hyphens: auto; - -ms-hyphens: auto; - -webkit-hyphens: auto; - word-break: break-word; - word-wrap: break-word; - display: flow-root; - font-family: $text_font; - line-height: 1.6; - overflow-x: auto; -} -.comment-body a { - color: $link_color; - text-decoration: underline; -} -.comment-body a:visited { - color: $visited_link_color; -} -.comment-body a:hover, .comment-body a:active, .comment-body a:focus { - color: $hover_link_color; -} -.comment-body img { - height: auto; - max-width: 100%; -} -.comment-body p > img.image-style-align-left { - float: left; - margin: 8px 20px 6px 0; -} -.comment-body p > img.image-style-align-right { - float: right; - margin: 8px 0px 6px 20px; -} -.comment-body p > img.image-style-block-align-right { - margin-left: auto; - margin-right: 0; -} -.comment-body p > img.image-style-block-align-left { - margin-left: 0; - margin-right: auto; -} -.comment-body figure.image { - display: table; - margin: 0 auto; -} -.comment-body figure.image > img { - display: block; - width: 100%; -} -.comment-body figure.image.image-style-align-left { - float: left; - margin: 8px 20px 6px 0; -} -.comment-body figure.image.image-style-align-right { - float: right; - margin: 8px 0px 6px 20px; -} -.comment-body figure.image.image-style-block-align-right { - margin-left: auto; - margin-right: 0; -} -.comment-body figure.image.image-style-block-align-left { - margin-left: 0; - margin-right: auto; -} -.comment-body figcaption { - padding: 10px 0; - font-size: 12px; - text-align: center; - background-color: darken($background_color, 5%); -} -.comment-body ul, -.comment-body ol { - padding-left: 20px; - list-style-position: outside; - margin: 20px 0 20px 20px; -} -[dir=rtl] .comment-body ul, -[dir=rtl] .comment-body ol { - padding-right: 20px; - padding-left: 0; - margin-left: 0; - margin-right: 20px; -} -.comment-body ul > ul, -.comment-body ol > ol, -.comment-body ol > ul, -.comment-body ul > ol, -.comment-body li > ul, -.comment-body li > ol { - margin: 0; -} -.comment-body ul { - list-style-type: disc; -} -.comment-body :not(pre) > code { - background: darken($background_color, 3%); - border: 1px solid #ddd; - border-radius: 3px; - padding: 0 5px; - margin: 0 2px; -} -.comment-body pre { - background: darken($background_color, 3%); - border: 1px solid #ddd; - border-radius: 3px; - padding: 10px 15px; - overflow: auto; - white-space: pre; -} -.comment-body blockquote { - border-left: 1px solid #ddd; - color: lighten($text_color, 20%); - font-style: italic; - padding: 0 15px; -} -.comment-mark-as-solved { - display: inline-block; -} - -/***** Vote *****/ -/* Used in article comments, post comments and post */ -.vote { - display: flex; - flex-direction: column; - text-align: center; -} -.vote a:active, .vote a:hover, .vote a:focus { - text-decoration: none; -} - -.vote-sum { - color: lighten($text_color, 20%); - display: block; - margin: 3px 0; -} -[dir=rtl] .vote-sum { - direction: ltr; - unicode-bidi: bidi-override; -} - -.vote-up svg { - transform: scale(1, -1); -} - -.vote-up:hover, -.vote-down:hover { - color: $brand_color; -} - -.vote-up, -.vote-down { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border: none; - color: lighten($text_color, 20%); - cursor: pointer; - min-height: 35px; - min-width: 35px; - display: flex; - align-items: center; - justify-content: center; -} - -.vote-voted { - color: $brand_color; -} - -.vote-voted:hover { - color: darken($brand_color, 20%); -} - -/***** Actions *****/ -/* Styles admin and en user actions(edit, delete, change status) in comments and posts */ -.actions { - text-align: center; - flex-shrink: 0; /*Avoid collapsing elements in Safari*/ -} -.actions button { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border: none; - cursor: pointer; - min-height: 35px; - min-width: 35px; - display: flex; - align-items: center; - justify-content: center; -} - -/***** Community *****/ -.community-hero { - background-image: url($community_background_image); - margin-bottom: 10px; -} -.community-footer { - padding-top: 50px; - text-align: center; -} -.community-footer-title { - font-size: 16px; - margin-bottom: 20px; -} -.community-featured-posts .title { - font-size: 18px; - font-weight: 600; -} -.community-featured-posts, .community-activity { - padding-top: 40px; - width: 100%; -} -.community-header { - margin-bottom: 30px; -} -.community-header .title { - margin-bottom: 0; - font-size: 16px; -} - -.post-to-community { - margin-top: 10px; -} -@media (min-width: 768px) { - .post-to-community { - margin: 0; - } -} - -/* Community topics grid */ -.topics { - max-width: none; - width: 100%; -} -.topics-item .meta-group { - justify-content: center; - margin-top: 20px; -} - -/* Community topic page */ -.topic-header { - border-bottom: 1px solid #ddd; - font-size: 13px; -} -@media (min-width: 768px) { - .topic-header { - padding-bottom: 10px; - } -} -.topic-header .dropdown { - display: block; - border-top: 1px solid #ddd; - padding: 10px 0; -} -@media (min-width: 768px) { - .topic-header .dropdown { - border-top: 0; - display: inline-block; - margin-right: 20px; - padding: 0; - } -} - -.no-posts-with-filter { - margin-top: 20px; - margin-bottom: 20px; -} - -/* Topic, post and user follow button */ -.community-follow { - margin-bottom: 10px; - width: 100%; -} -@media (min-width: 768px) { - .community-follow { - margin-bottom: 0; - width: auto; - } -} -.community-follow button { - line-height: 30px; - padding: 0 10px 0 15px; - position: relative; - width: 100%; -} -@media (min-width: 768px) { - .community-follow button { - width: auto; - } -} -.community-follow button:hover { - background-color: $brand_color; -} -.community-follow button:hover::after, .community-follow button:focus::after { - border-color: $brand_text_color; - color: $brand_text_color; -} -.community-follow button[data-selected=true] { - background-color: $brand_color; - color: $brand_text_color; -} -.community-follow button[data-selected=true]::after { - border-left: 1px solid $brand_text_color; - color: $brand_text_color; -} -.community-follow button[data-selected=true]:hover { - background-color: darken($brand_color, 20%); - border-color: darken($brand_color, 20%); -} -.community-follow button::after { - border-left: 1px solid $brand_color; - content: attr(data-follower-count); - color: $brand_color; - display: inline-block; - font-family: $heading_font; - margin-left: 15px; - padding-left: 10px; - position: absolute; - right: 10px; -} -@media (min-width: 768px) { - .community-follow button::after { - position: static; - } -} -[dir=rtl] .community-follow button::after { - border-left: 0; - border-right: 1px solid $brand_color; - margin: 0 10px 0 0; - padding: 0 10px 0 0; -} - -/***** Striped list *****/ -/* Used in community posts list and requests list */ -.striped-list { - padding: 0; -} -.striped-list-item { - align-items: flex-start; - border-bottom: 1px solid #ddd; - display: flex; - flex-direction: column; - justify-content: flex-end; - padding: 20px 0; -} -@media (min-width: 768px) { - .striped-list-item { - align-items: center; - flex-direction: row; - } -} -.striped-list-info { - flex: 2; -} -.striped-list-title { - color: $link_color; - margin-bottom: 10px; - margin-right: 5px; -} -.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active { - text-decoration: underline; -} -.striped-list-title:visited { - color: $visited_link_color; -} -.striped-list .meta-group { - margin: 5px 0; -} -.striped-list-count { - color: lighten($text_color, 20%); - font-size: 13px; - justify-content: flex-start; - text-transform: capitalize; -} -@media (min-width: 768px) { - .striped-list-count { - display: flex; - flex: 1; - justify-content: space-around; - } -} -.striped-list-count-item::after { - content: "·"; - display: inline-block; - padding: 0 5px; -} -@media (min-width: 768px) { - .striped-list-count-item::after { - display: none; - } -} -.striped-list-count-item:last-child::after { - display: none; -} -.striped-list-number { - text-align: center; -} -@media (min-width: 768px) { - .striped-list-number { - color: $text_color; - display: block; - } -} - -/***** Status labels *****/ -/* Styles labels used in posts, articles and requests */ -.status-label { - background-color: #038153; - border-radius: 4px; - color: #fff; - font-size: 12px; - font-weight: 600; - margin-right: 2px; - padding: 3px 10px; - vertical-align: middle; - white-space: nowrap; - display: inline-block; -} -.status-label:hover, .status-label:active, .status-label:focus { - text-decoration: none; -} -.status-label-pinned, .status-label-featured, .status-label-official { - background-color: $brand_color; -} -.status-label-official { - border-radius: 0; - margin-right: 0; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 100%; -} -@media (min-width: 768px) { - .status-label-official { - border-radius: 0 0 4px 4px; - right: 30px; - width: auto; - } -} -[dir=rtl] .status-label-official { - left: 30px; - right: auto; -} -.status-label-not-planned, .status-label-closed { - background-color: #e9ebed; - color: lighten($text_color, 20%); -} -.status-label-pending, .status-label-pending-moderation { - background-color: #1f73b7; - text-align: center; -} -.status-label-open { - background-color: #c72a1c; -} -.status-label-solved { - background-color: #68737d; -} -.status-label-new { - background-color: #ffb648; - color: #703b15; -} -.status-label-hold { - background-color: #000; -} -.status-label-request { - max-width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -@media (max-width: 768px) { - .status-label-request { - max-width: 150px; - } -} - -/***** Post *****/ -/* -* The post grid is defined this way: -* Content | Sidebar -* 70% | 30% -*/ -.post { - flex: 1; - margin-bottom: 10px; -} -@media (min-width: 1024px) { - .post { - flex: 1 0 70%; - max-width: 70%; - } -} -.post-container { - display: flex; - flex-direction: column; -} -@media (min-width: 1024px) { - .post-container { - flex-direction: row; - } -} -.post-header { - align-items: center; - display: flex; - flex-direction: column; - justify-content: space-between; - margin-bottom: 10px; -} -@media (min-width: 768px) { - .post-header { - align-items: baseline; - flex-direction: row; - } -} -.post-header .status-label { - vertical-align: super; -} -.post-title { - margin-bottom: 20px; - width: 100%; -} -@media (min-width: 768px) { - .post-title { - margin-bottom: 0; - padding-right: 10px; - } -} -.post-title h1 { - display: inline; - vertical-align: middle; -} -@media (min-width: 768px) { - .post-title h1 { - margin-right: 5px; - } -} -.post-author { - align-items: flex-start; - display: flex; - justify-content: space-between; -} -.post-avatar { - margin-bottom: 30px; -} -.post-content { - font-family: $text_font; - line-height: 1.6; - word-break: break-word; -} -.post-info-container { - display: flex; - margin-bottom: 40px; -} -.post-info { - min-width: 0; - padding-right: 20px; - width: 100%; -} -[dir=rtl] .post-info { - padding-right: 0; - padding-left: 20px; -} -.post-meta { - display: inline-block; - flex: 1; - margin-left: 10px; - vertical-align: middle; -} -[dir=rtl] .post-meta { - margin-left: 0; - margin-right: 10px; -} -.post-body { - display: flow-root; -} -.post-body a { - color: $link_color; - text-decoration: underline; -} -.post-body a:visited { - color: $visited_link_color; -} -.post-body a:hover, .post-body a:active, .post-body a:focus { - color: $hover_link_color; -} -.post-body img { - height: auto; - max-width: 100%; -} -.post-body p > img.image-style-align-left { - float: left; - margin: 8px 20px 6px 0; -} -.post-body p > img.image-style-align-right { - float: right; - margin: 8px 0px 6px 20px; -} -.post-body p > img.image-style-block-align-right { - margin-left: auto; - margin-right: 0; -} -.post-body p > img.image-style-block-align-left { - margin-left: 0; - margin-right: auto; -} -.post-body figure.image { - display: table; - margin: 0 auto; -} -.post-body figure.image > img { - display: block; - width: 100%; -} -.post-body figure.image.image-style-align-left { - float: left; - margin: 8px 20px 6px 0; -} -.post-body figure.image.image-style-align-right { - float: right; - margin: 8px 0px 6px 20px; -} -.post-body figure.image.image-style-block-align-right { - margin-left: auto; - margin-right: 0; -} -.post-body figure.image.image-style-block-align-left { - margin-left: 0; - margin-right: auto; -} -.post-body figcaption { - padding: 10px 0; - font-size: 12px; - text-align: center; - background-color: darken($background_color, 5%); -} -.post-body ul, -.post-body ol { - padding-left: 20px; - list-style-position: outside; - margin: 20px 0 20px 20px; -} -[dir=rtl] .post-body ul, -[dir=rtl] .post-body ol { - padding-right: 20px; - padding-left: 0; - margin-left: 0; - margin-right: 20px; -} -.post-body ul > ul, -.post-body ol > ol, -.post-body ol > ul, -.post-body ul > ol, -.post-body li > ul, -.post-body li > ol { - margin: 0; -} -.post-body ul { - list-style-type: disc; -} -.post-body :not(pre) > code { - background: darken($background_color, 3%); - border: 1px solid #ddd; - border-radius: 3px; - padding: 0 5px; - margin: 0 2px; -} -.post-body pre { - background: darken($background_color, 3%); - border: 1px solid #ddd; - border-radius: 3px; - padding: 10px 15px; - overflow: auto; - white-space: pre; -} -.post-body blockquote { - border-left: 1px solid #ddd; - color: lighten($text_color, 20%); - font-style: italic; - padding: 0 15px; -} -.post-footer { - align-items: center; - display: flex; - justify-content: space-between; - padding-bottom: 20px; -} -.post-comment-count { - color: lighten($text_color, 20%); -} -.post-comment-count:hover { - text-decoration: none; -} -.post-comment-count .icon-comments { - color: $brand_color; - display: inline-block; - width: 18px; - height: 18px; - margin: 5px; - vertical-align: middle; -} -.post-sidebar { - border-top: 1px solid #ddd; - flex: 1; - padding: 30px 0; - text-align: center; -} -@media (min-width: 1024px) { - .post-sidebar { - border: 0; - flex: 1 0 30%; - padding: 0 0 0 50px; - text-align: initial; - } - [dir=rtl] .post-sidebar { - padding: 0 50px 0 0; - } -} -.post-sidebar-title { - font-size: 18px; - font-weight: 600; -} -.post-comments { - margin-bottom: 20px; -} -@media (min-width: 1024px) { - .post-comments { - margin-bottom: 0; - } -} - -/* Navigation element that collapses on mobile */ -.collapsible-nav { - flex-direction: column; - font-size: 14px; - position: relative; -} -@media (min-width: 768px) { - .collapsible-nav { - flex-direction: row; - } -} - -.collapsible-nav-border { - border-bottom: 1px solid #ddd; - border-top: 1px solid #ddd; -} -@media (min-width: 768px) { - .collapsible-nav-border { - border-top: 0; - } -} - -.collapsible-nav-toggle { - top: 22.5px; - transform: translateY(-50%); - position: absolute; - right: 0; - padding: 0; - border: 0; - background: none; - width: 25px; - height: 25px; - border-radius: 50%; -} -@media (min-width: 768px) { - .collapsible-nav-toggle { - display: none; - } -} -[dir=rtl] .collapsible-nav-toggle { - left: 0; - right: auto; -} -.collapsible-nav-toggle-icon { - display: none; -} -.collapsible-nav-toggle[aria-expanded=false] .chevron-icon { - display: inline-block; -} -.collapsible-nav-toggle[aria-expanded=true] .x-icon { - display: inline-block; -} -.collapsible-nav-toggle:focus { - outline: none; - border: 1px solid $brand_color; -} - -.collapsible-nav-list { - display: flex; - flex-direction: column; -} -@media (min-width: 768px) { - .collapsible-nav-list { - flex-direction: row; - } -} -.collapsible-nav-list li { - color: $text_color; - line-height: 45px; - order: 1; -} -@media (min-width: 768px) { - .collapsible-nav-list li { - line-height: normal; - margin-right: 30px; - } - [dir=rtl] .collapsible-nav-list li { - margin-left: 30px; - margin-right: 0; - } - .collapsible-nav-list li a { - text-decoration: none; - padding: 15px 0; - } -} -.collapsible-nav-list li a { - color: $text_color; - display: block; -} -@media (min-width: 768px) { - .collapsible-nav-list li:hover { - border-bottom: 4px solid #ddd; - } - .collapsible-nav-list li:hover a:not([aria-current=page]) { - padding: 15px 0 11px 0; - text-decoration: none; - } -} -.collapsible-nav-list li:not([aria-selected=true]), -.collapsible-nav-list li:not(.current) { - display: none; -} -@media (min-width: 768px) { - .collapsible-nav-list li:not([aria-selected=true]), - .collapsible-nav-list li:not(.current) { - display: block; - } -} -@media (min-width: 768px) { - .collapsible-nav-list li[aria-selected=true] { - padding: 15px 0 11px 0; - } -} -.collapsible-nav-list li[aria-selected=true], -.collapsible-nav-list li.current { - order: 0; - position: relative; -} -@media (min-width: 768px) { - .collapsible-nav-list li[aria-selected=true], - .collapsible-nav-list li.current { - border-bottom: 4px solid $brand_color; - order: 1; - } -} -.collapsible-nav-list li[aria-selected=true] a, -.collapsible-nav-list li.current a { - color: $text_color; -} - -.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]), -.collapsible-nav[aria-expanded=true] li:not(.current) { - display: block; -} - -/* Sidebar navigation that collapses on mobile */ -.collapsible-sidebar { - flex: 1; - max-height: 45px; - overflow: hidden; - padding: 10px 0; - position: relative; -} -@media (min-width: 1024px) { - .collapsible-sidebar { - max-height: none; - padding: 0; - } -} -.collapsible-sidebar-title { - margin-top: 0; -} -.collapsible-sidebar-toggle { - position: absolute; - top: 22.5px; - transform: translateY(-50%); - right: 0; - padding: 0; - border: 0; - background: none; - width: 25px; - height: 25px; - border-radius: 50%; -} -@media (min-width: 1024px) { - .collapsible-sidebar-toggle { - display: none; - } -} -[dir=rtl] .collapsible-sidebar-toggle { - left: 0; - right: auto; -} -.collapsible-sidebar-toggle-icon { - display: none; -} -.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon { - display: inline-block; -} -.collapsible-sidebar-toggle[aria-expanded=true] .x-icon { - display: inline-block; -} -.collapsible-sidebar-toggle:focus { - outline: none; - border: 1px solid $brand_color; -} -.collapsible-sidebar-body { - display: none; -} -@media (min-width: 1024px) { - .collapsible-sidebar-body { - display: block; - } -} -.collapsible-sidebar[aria-expanded=true] { - max-height: none; -} -.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body { - display: block; -} - -/***** My activities *****/ -.my-activities-nav { - background-color: darken($background_color, 5%); - margin-bottom: 20px; -} -.my-activities-sub-nav { - margin-bottom: 30px; -} -.my-activities-table .striped-list-title { - /* My activities tables */ - display: block; - margin-bottom: 10px; - max-width: 350px; - white-space: normal; -} -@media (min-width: 1024px) { - .my-activities-table .striped-list-title { - margin-bottom: 0; - max-width: 500px; - min-width: 350px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} -.my-activities-table thead { - display: none; -} -@media (min-width: 768px) { - .my-activities-table thead { - display: table-header-group; - } -} -.my-activities-table th:first-child, -.my-activities-table td:first-child { - padding-left: 0; -} -@media (min-width: 1024px) { - .my-activities-table th:first-child, - .my-activities-table td:first-child { - width: 500px; - } -} -.my-activities-table th:last-child, -.my-activities-table td:last-child { - padding-right: 0; -} -.my-activities-table td:not(:first-child) { - display: none; -} -@media (min-width: 768px) { - .my-activities-table td:not(:first-child) { - display: table-cell; - } -} - -/* Requests table */ -.requests-search { - width: 100%; -} -.requests-table-toolbar { - align-items: flex-end; - display: flex; - flex-direction: column; -} -@media (min-width: 768px) { - .requests-table-toolbar { - flex-direction: row; - } -} -.requests-table-toolbar .search { - flex: 1; - width: 100%; -} -.requests-table-toolbar .request-table-filter { - width: 100%; -} -@media (min-width: 768px) { - .requests-table-toolbar .request-table-filter { - width: auto; - } -} -.requests-table-toolbar .request-filter { - display: block; -} -@media (min-width: 768px) { - .requests-table-toolbar .request-filter { - margin: 0 0 0 30px; - } - [dir=rtl] .requests-table-toolbar .request-filter { - margin: 0 30px 0 0; - } -} -.requests-table-toolbar .request-filter-label { - font-size: 13px; - margin-top: 30px; -} -@media (min-width: 768px) { - .requests-table-toolbar .request-filter-label { - margin-top: 0; - } -} -.requests-table-toolbar select { - max-height: 40px; - margin-bottom: 30px; - width: 100%; -} -@media (min-width: 768px) { - .requests-table-toolbar select { - margin-bottom: 0; - max-width: 300px; - width: auto; - } -} -@media (min-width: 768px) { - .requests-table-toolbar .organization-subscribe { - margin-left: 10px; - } - [dir=rtl] .requests-table-toolbar .organization-subscribe { - margin: 0 10px 0 0; - } -} -.requests-table-toolbar .organization-subscribe button { - line-height: 40px; - max-height: 40px; - padding: 0 20px; -} -.requests-table-toolbar + .requests-search-info { - margin-top: 15px; -} -.requests-table-toolbar + .requests-search-info.meta-data::after { - content: ""; - margin: 0; -} -.requests-table-toolbar + .requests-search-info + .requests { - margin-top: 20px; -} -.requests-table-toolbar + .requests { - margin-top: 40px; -} -.requests .requests-table-meta { - display: block; -} -@media (min-width: 768px) { - .requests .requests-table-meta { - display: none; - } -} -.requests .requests-table thead { - display: none; -} -@media (min-width: 768px) { - .requests .requests-table thead { - display: table-header-group; - } -} -.requests .requests-table-info { - display: block; -} -@media (min-width: 768px) { - .requests .requests-table-info { - display: table-cell; - vertical-align: middle; - width: auto; - } -} -.requests .requests-table .requests-link { - position: relative; -} -.requests .requests-table .requests-sort-symbol { - position: absolute; - left: calc(100% + 3px); - bottom: 0; - font-size: 10px; -} - -/* Following table */ -@media (min-width: 768px) { - .subscriptions-subscribe button { - width: auto; - } -} -.subscriptions-table td:last-child { - display: block; -} -@media (min-width: 768px) { - .subscriptions-table td:last-child { - display: table-cell; - } -} -.subscriptions-table td:first-child { - display: flex; - align-items: center; -} -.subscriptions-table .user-avatar { - margin-right: 10px; -} -.subscriptions .striped-list-title { - display: inline-block; - vertical-align: middle; -} - -/* Contributions table */ -.contributions-table td:last-child { - color: lighten($text_color, 20%); - font-size: 13px; -} -@media (min-width: 768px) { - .contributions-table td:last-child { - color: inherit; - font-size: inherit; - font-weight: inherit; - } -} - -.no-activities { - color: lighten($text_color, 20%); -} - -/***** Request *****/ -.request-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: space-between; -} -@media (min-width: 1024px) { - .request-container { - align-items: flex-start; - flex-direction: row; - } -} -.request-container .comment-container { - min-width: 0; -} -.request-breadcrumbs { - margin-bottom: 40px; -} -@media (min-width: 1024px) { - .request-breadcrumbs { - margin-bottom: 60px; - } -} -.request-main { - flex: 1 0 auto; - order: 1; -} -.request-main .comment-fields, -.request-main .request-submit-comment { - display: none; -} -.request-main .comment-fields.shown { - display: block; -} -.request-main .request-submit-comment.shown { - display: inline; -} -@media (min-width: 1024px) { - .request-main { - flex: 0 0 66%; - order: 0; - min-width: 0; - } -} -.request-main .comment-form-controls { - display: block; -} -.request-main .comment-ccs { - display: block; -} -.request-main .comment-show-container { - border-radius: 2px; - border: 1px solid #ddd; - color: lighten($text_color, 20%); - text-align: inherit; - padding: 8px 25px; - width: 100%; -} -.request-main .comment-show-container.hidden { - display: none; -} -.request-main .form-field.comment-ccs > ul { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border-bottom: 0; -} -.request-main .form-field.comment-ccs > ul[data-hc-focus=true] { - border: 1px solid $brand_color; -} -.request-main .form-field.comment-ccs > input[type=text] { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border-bottom: 0; -} -.request-main .comment-ccs + textarea { - border-top-left-radius: 0; - border-top-right-radius: 0; - margin-top: 0; -} -.request-main .comment-ccs + textarea:focus { - border-top: 1px solid $brand_color; -} -.request-main input#mark_as_solved { - display: none; -} -.request-title { - width: 100%; -} -@media (min-width: 1024px) { - .request-title { - border-bottom: 1px solid #ddd; - margin-bottom: 0; - max-width: 66%; - padding-bottom: 20px; - } -} -.request-sidebar { - border-bottom: 1px solid #ddd; - border-top: 1px solid #ddd; - flex: 1 0 auto; - order: 0; -} -@media (min-width: 1024px) { - .request-sidebar { - background-color: darken($background_color, 3%); - border: 0; - font-size: 13px; - flex: 0 0 auto; - padding: 0 20px; - width: 30%; - } -} -.request-sidebar h2 { - font-size: 15px; - font-weight: 600; - position: relative; -} -@media (min-width: 1024px) { - .request-sidebar h2 { - display: none; - } -} -.request-details { - border-bottom: 1px solid #ddd; - font-size: 0; - margin: 0; - padding-bottom: 20px; -} -.request-details:last-child { - border: 0; -} -.request-details dt, -.request-details dd { - display: inline-block; - vertical-align: top; - font-size: 13px; - margin: 20px 0 0 0; -} -.request-details dd { - padding: 0 10px; - width: 60%; -} -.request-details dd::after { - content: "\a"; - white-space: pre; -} -.request-details dt { - color: lighten($text_color, 20%); - width: 40%; -} -.request-details .request-collaborators { - display: inline-block; -} -.request-attachments dt, -.request-attachments dd { - width: 100%; -} -.request-attachments dd { - margin: 10px 0 0 0; -} -.request-form textarea { - min-height: 120px; -} -.request-follow-up { - padding-top: 20px; -} - -/***** Pagination *****/ -.pagination { - margin: 20px 0; - text-align: center; -} -.pagination-next, .pagination-prev, .pagination-first, .pagination-last { - display: inline-block; -} -.pagination-first-link, .pagination-last-link { - padding: 0 10px; -} -.pagination-first-text, .pagination-last-text { - border: 0; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - white-space: nowrap; -} -.pagination-next-link { - padding-right: 10px; -} -.pagination-next-text { - margin-right: 10px; -} -[dir=rtl] .pagination-next-link { - padding-left: 10px; -} -[dir=rtl] .pagination-next-text { - margin-left: 10px; -} -.pagination-prev-link { - padding-left: 10px; -} -.pagination-prev-text { - margin-left: 10px; -} -[dir=rtl] .pagination-prev-link { - padding-right: 10px; -} -[dir=rtl] .pagination-prev-text { - margin-right: 10px; -} - -/***** Metadata *****/ -.meta-group { - display: block; -} - -.meta-group-opposite { - float: right; -} - -[dir=rtl] .meta-group-opposite { - float: left; -} - -.meta-group * { - display: inline; -} - -.meta-data { - color: lighten($text_color, 20%); - font-size: 13px; -} -.meta-data:not(:last-child)::after { - content: "·"; - margin: 0 5px; -} - -/* User Profiles */ -.profile-header { - padding: 30px 0; - background-color: darken($background_color, 3%); -} - -.profile-header .container { - display: flex; - flex-wrap: wrap; -} -@media (min-width: 768px) { - .profile-header .container { - flex-wrap: nowrap; - } -} - -.profile-header .profile-info { - flex-basis: 100%; - display: flex; - flex-wrap: wrap; - min-width: 0; -} - -.profile-avatar { - position: relative; - line-height: 0; - align-self: center; - margin-right: 10px; -} -[dir=rtl] .profile-avatar { - margin-left: 10px; - margin-right: 0; -} - -.profile-avatar .user-avatar { - width: 80px; - height: 80px; -} - -.profile-avatar .icon-agent { - bottom: 0; - right: 0; -} - -.profile-header .basic-info { - -moz-hyphens: auto; - -ms-hyphens: auto; - -webkit-hyphens: auto; - word-break: break-word; - word-wrap: break-word; - display: flex; - flex-direction: column; - justify-content: center; - flex-grow: 1; - flex-basis: 0; - min-width: 0; -} -.profile-header .basic-info .name { - margin: 0; - line-height: 25px; - vertical-align: middle; - display: inline; -} - -.profile-header .options { - display: flex; - flex-basis: 100%; - margin-top: 12px; - align-items: flex-start; - flex-wrap: wrap; -} -@media (min-width: 768px) { - .profile-header .options { - flex-wrap: nowrap; - flex-basis: auto; - margin-top: 0; - margin-left: 10px; - } - [dir=rtl] .profile-header .options { - margin-left: 0; - margin-right: 10px; - } - .profile-header .options > :not(:last-child) { - margin-bottom: 0; - margin-right: 10px; - } - [dir=rtl] .profile-header .options > :not(:last-child) { - margin-left: 10px; - margin-right: 0; - } -} - -.user-profile-actions { - width: 100%; - margin-bottom: 15px; -} - -.profile-header .description { - -moz-hyphens: auto; - -ms-hyphens: auto; - -webkit-hyphens: auto; - word-break: break-word; - word-wrap: break-word; - margin: 15px 0; - flex-basis: 100%; -} - -.profile-stats { - font-size: 13px; - display: flex; - flex-direction: column; - flex-basis: 100%; -} - -.profile-stats .stat { - display: flex; - margin-bottom: 10px; -} - -.profile-stats .stat-label { - color: lighten($text_color, 20%); - flex: 0 0 100px; - margin-right: 10px; -} -[dir=rtl] .profile-stats .stat-label { - margin-left: 10px; - margin-right: 0; -} - -.profile-stats-activity { - border-top: solid 1px #ddd; - margin-top: 15px; -} -@media (min-width: 768px) { - .profile-stats-activity { - border-top: 0; - flex-direction: row; - } -} - -@media (min-width: 768px) { - .profile-stats-activity .stat { - flex-direction: column; - } -} - -.profile-stats-activity .stat:first-child { - margin-top: 10px; -} -@media (min-width: 768px) { - .profile-stats-activity .stat:first-child { - margin-top: 0; - } -} - -@media (min-width: 768px) { - .profile-stats-activity .stat:not(:last-child) { - margin-right: 40px; - } - [dir=rtl] .profile-stats-activity .stat:not(:last-child) { - margin-left: 40px; - margin-right: 0; - } -} - -@media (min-width: 768px) { - .profile-stats-activity .stat-label { - flex: 0 1 auto; - } -} - -.profile-stats-counters { - border-bottom: solid 1px #ddd; -} -@media (min-width: 768px) { - .profile-stats-counters { - flex: 0 0 200px; - border-bottom: 0; - margin-left: 40px; - } - [dir=rtl] .profile-stats-counters { - margin-left: 0; - margin-right: 40px; - } -} -@media (min-width: 1024px) { - .profile-stats-counters { - flex: 0 0 270px; - margin-left: 60px; - } - [dir=rtl] .profile-stats-counters { - margin-right: 60px; - margin-left: 0; - } -} - -@media (min-width: 768px) { - .profile-stats-counters .stat { - flex-direction: column; - } -} -@media (min-width: 1024px) { - .profile-stats-counters .stat { - flex-direction: row; - } -} - -@media (min-width: 768px) { - .profile-stats-counters .stat:not(:last-child) { - margin-bottom: 15px; - } -} - -@media (min-width: 768px) { - .profile-stats-counters .stat-label { - flex: 0 1 auto; - } -} -@media (min-width: 1024px) { - .profile-stats-counters .stat-label { - flex: 0 0 100px; - } -} - -.profile-private-badge { - flex-basis: 100%; - border: solid 1px $brand_color; - border-radius: 4px; - color: $brand_color; - padding: 5px 20px; - font-size: 12px; - text-align: center; -} -.profile-private-badge .profile-private-icon { - margin-left: 5px; - line-height: 15px; -} -@media (min-width: 768px) { - .profile-private-badge { - flex-basis: auto; - } -} - -.profile-nav { - background-color: darken($background_color, 5%); - margin-bottom: 37px; -} - -.profile-section { - width: 100%; -} -@media (min-width: 1024px) { - .profile-section { - width: calc(100% - 330px); - } -} - -.profile-section-header { - display: flex; - flex-wrap: wrap; -} - -.profile-section-title { - flex-basis: 100%; - margin-bottom: 0; -} - -.profile-section-description { - flex-basis: 100%; - padding: 10px 0; - color: lighten($text_color, 20%); - font-size: 13px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -@media (min-width: 768px) { - .profile-section-description { - flex: 1 0 50%; - padding-bottom: 0; - } -} - -.profile-section-sorter { - flex-basis: 100%; - border-top: solid 1px #eee; - font-size: 13px; -} -.profile-section-sorter .dropdown-toggle { - padding: 10px 0; - width: 100%; -} -.profile-section-sorter .dropdown-toggle::after { - position: absolute; - right: 0; -} -[dir=rtl] .profile-section-sorter .dropdown-toggle::after { - left: 0; - right: initial; -} -@media (min-width: 768px) { - .profile-section-sorter .dropdown-toggle::after { - position: relative; - } -} -@media (min-width: 768px) { - .profile-section-sorter { - flex: 0 1 auto; - padding-top: 0; - border-top: 0; - margin-left: 20px; - } - [dir=rtl] .profile-section-sorter { - margin-left: 0; - margin-right: 20px; - } -} - -.profile-badges-items { - margin-top: 25px; -} -.profile-badges-item { - border-top: 1px solid #ddd; - display: flex; - flex: 1; - flex-direction: row; - justify-content: flex-start; - padding: 27px 12px; -} -.profile-badges-item > div { - padding-right: 12px; - padding-left: 12px; -} -.profile-badges-item-image { - height: 40px; - width: 40px; - margin-right: 12px; -} -.profile-badges-item-image img { - max-height: 40px; -} -[dir=rtl] .profile-badges-item-image { - margin-left: 12px; - margin-right: 0; -} -.profile-badges-item-title, .profile-badges-item-metadata-title { - font-size: 15px; - margin-bottom: 10px; -} -.profile-badges-item-title { - font-weight: 600; -} -.profile-badges-item-description, .profile-badges-item-metadata-description { - color: lighten($text_color, 20%); - font-size: 13px; - margin: 0; -} -.profile-badges-item-metadata { - margin-left: auto; - text-align: right; -} -[dir=rtl] .profile-badges-item-metadata { - margin-left: 0; - margin-right: auto; - text-align: left; -} - -.profile-contribution { - -moz-hyphens: auto; - -ms-hyphens: auto; - -webkit-hyphens: auto; - word-break: break-word; - word-wrap: break-word; - padding: 20px 0; - position: relative; -} - -.profile-contribution-header { - margin-bottom: 5px; -} - -.profile-contribution-title { - margin: 0 0 5px 0; - display: inline; - line-height: 21px; - font-size: 15px; - vertical-align: middle; -} - -.profile-contribution-body { - margin: 10px 0; -} - -.profile-contribution-list > .profile-contribution { - border-top: 1px solid #eee; -} -@media (min-width: 768px) { - .profile-contribution-list > .profile-contribution { - padding-left: 30px; - } - [dir=rtl] .profile-contribution-list > .profile-contribution { - padding-right: 30px; - padding-left: 0; - } -} - -.profile-contribution-list > .profile-contribution:last-child { - border-bottom: 1px solid #eee; -} - -.profile-contribution-icon { - left: 0; - position: absolute; - color: #ccc; - line-height: 25px; -} -[dir=rtl] .profile-contribution-icon { - right: 0; -} -.profile-contribution-icon svg { - vertical-align: middle; -} - -.profile-contribution-list .profile-contribution-header { - margin-left: 30px; -} -[dir=rtl] .profile-contribution-list .profile-contribution-header { - padding-right: 30px; - padding-left: 0; -} -@media (min-width: 768px) { - .profile-contribution-list .profile-contribution-header { - margin-left: 0; - } - [dir=rtl] .profile-contribution-list .profile-contribution-header { - padding-right: 0; - } -} - -.profile-comments .profile-contribution-breadcrumbs { - margin-left: 30px; -} -[dir=rtl] .profile-comments .profile-contribution-breadcrumbs { - padding-right: 30px; - padding-left: 0; -} -@media (min-width: 768px) { - .profile-comments .profile-contribution-breadcrumbs { - margin-left: 0; - } - [dir=rtl] .profile-comments .profile-contribution-breadcrumbs { - padding-right: 0; - } -} - -.profile-section .no-activity, -.profile-section .private-activity { - display: block; - margin-top: 40px; - color: #999; -} - -.private-activity-icon { - margin-right: 10px; -} -[dir=rtl] .private-activity-icon { - margin-right: 0; - margin-left: 10px; -} - -.profile-activity-list { - margin-top: 25px; -} - -.profile-activity { - position: relative; - padding-bottom: 30px; -} -@media (min-width: 768px) { - .profile-activity { - padding-left: 20px; - } - [dir=rtl] .profile-activity { - padding-right: 20px; - padding-left: 0; - } -} - -@media (min-width: 768px) { - .profile-activity:not(:last-child) { - border-left: 1px solid #ddd; - } - [dir=rtl] .profile-activity:not(:last-child) { - border-left: 0; - border-right: 1px solid #ddd; - } -} - -.profile-activity-header { - display: flex; - align-items: center; - margin-left: 35px; -} -[dir=rtl] .profile-activity-header { - margin-left: 0; - margin-right: 35px; -} -@media (min-width: 768px) { - .profile-activity-header { - margin-left: 0; - } - [dir=rtl] .profile-activity-header { - margin-right: 0; - } -} - -.profile-activity-header .user-avatar { - width: 40px; - height: 40px; - margin-right: 10px; - min-width: 40px; - align-self: flex-start; -} -[dir=rtl] .profile-activity-header .user-avatar { - margin-left: 10px; - margin-right: 0; -} - -.profile-activity-description { - -moz-hyphens: auto; - -ms-hyphens: auto; - -webkit-hyphens: auto; - word-break: break-word; - word-wrap: break-word; - margin: 0; - min-width: 0; - width: 100%; -} - -.profile-activity-description span:first-child { - font-weight: 600; - display: inline; -} - -.profile-activity-contribution { - padding: 20px; - margin-top: 10px; - border-radius: 8px; - background-color: darken($background_color, 3%); -} -@media (min-width: 768px) { - .profile-activity-contribution { - margin-top: 0; - margin-left: 50px; - } - [dir=rtl] .profile-activity-contribution { - margin-left: 0; - margin-right: 50px; - } -} - -.profile-activity-icon { - position: absolute; - left: 0; - width: 28px; - height: 28px; - border-radius: 50%; - background-size: 14px 14px; - background-repeat: no-repeat; - background-color: $background_color; - background-position: 50% 50%; - text-align: center; - color: #ccc; -} -[dir=rtl] .profile-activity-icon { - right: 0; -} -@media (min-width: 768px) { - .profile-activity-icon { - left: -14px; - } - [dir=rtl] .profile-activity-icon { - right: -14px; - } -} - -.profile-activity-icon svg { - position: relative; - top: 50%; - transform: translateY(-50%); - width: 1em; - height: 1em; - margin: auto; -} - -/***** Search results *****/ -.search-results { - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: space-between; -} -@media (min-width: 1024px) { - .search-results { - flex-direction: row; - } -} -.search-results-column { - flex: 1; -} -@media (min-width: 1024px) { - .search-results-column { - flex: 0 0 75%; - } -} -.search-results-sidebar { - border-top: 1px solid #ddd; - flex: 1 0 auto; - margin-bottom: 20px; - padding: 0; -} -@media (min-width: 1024px) { - .search-results-sidebar { - border: 0; - flex: 0 0 20%; - height: auto; - } -} -.search-results-sidebar .sidenav-item { - border-radius: 4px; - padding: 10px 36px; - margin-bottom: 4px; - color: $text_color; -} -.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current { - background-color: #e9ebed; - text-decoration: none; -} -.search-results-sidebar .sidenav-subitem { - unicode-bidi: embed; -} -.search-results-sidebar .sidenav-tag { - display: flex; - flex-direction: row; - align-items: flex-start; - flex-grow: 0; -} -.search-results-sidebar .sidenav-tag .content-tag { - background: #e9ebed; - border-radius: 4px; - padding: 4px 12px; - text-decoration: none; -} -.search-results-sidebar .sidenav-tag .content-tag .label { - font-style: normal; - font-weight: 600; - font-size: 12px; - line-height: 24px; - text-align: center; - letter-spacing: -0.000427656px; - color: #49545c; - flex-grow: 0; - vertical-align: middle; - display: inline-block; -} -.search-results-sidebar .sidenav-tag .content-tag .close-icon { - color: #555555; - vertical-align: middle; - display: inline-block; -} -.search-results-sidebar .collapsible-sidebar { - margin-bottom: 30px; -} -.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list { - display: none; -} -@media (min-width: 1024px) { - .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list { - display: block; - } -} -.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) { - display: none; -} -.search-results-sidebar .multibrand-filter-list .doc-count { - color: #666; -} -.search-results-sidebar .see-all-filters { - background: none; - border: none; - cursor: pointer; - display: block; - padding: 10px; - color: $link_color; -} -.search-results-sidebar .see-all-filters[aria-hidden=true] { - display: none; -} -.search-results-sidebar .see-all-filters:hover { - text-decoration: underline; -} -.search-results-sidebar .see-all-filters::after { - content: " ⌄"; - font-weight: bold; -} -.search-results-subheading { - font-size: 18px; - font-weight: 600; -} -.search-results-list { - margin-bottom: 25px; -} -.search-results-list > li { - padding: 20px 0; -} -.search-results-list > li:first-child { - border-top: 1px solid #ddd; -} -.search-results .no-results { - display: flex; - flex-direction: column; - align-items: center; - padding-top: 4rem; -} -.search-results .no-results .headline { - color: #2f3941; - font-weight: 400; - font-size: 18px; - line-height: 24px; - letter-spacing: -0.45px; -} -.search-results .no-results .action-prompt { - color: #68737d; - font-weight: 400; - font-size: 14px; - line-height: 20px; - letter-spacing: -0.154px; -} -.search-results .no-results .action-prompt a { - color: $link_color; -} -.search-results .no-results .action-prompt a:visited { - color: $link_color; -} - -.search-result-title-container { - display: flex; - justify-content: space-between; - align-items: center; -} -.search-result-title { - font-size: 16px; - margin-bottom: 0; -} -.search-result-votes, .search-result-meta-count { - color: lighten($text_color, 20%); - font-size: 13px; -} -.search-result-votes-icon, .search-result-meta-count-icon { - color: $brand_color; - vertical-align: middle; - width: 13px; - height: 13px; -} -[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count { - margin-left: 20px; -} -[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count { - margin-right: 20px; -} -.search-result-meta-container { - color: #666; - display: flex; - flex-direction: column; -} -@media (min-width: 1024px) { - .search-result-meta-container { - flex-direction: row; - align-items: center; - } -} -@media (min-width: 1024px) { - .search-result-meta-container nav { - flex: 1; - } -} -@media (min-width: 1024px) { - [dir=ltr] .search-result-meta-container .meta-data { - margin-left: 20px; - } -} -@media (min-width: 1024px) { - [dir=rtl] .search-result-meta-container .meta-data { - margin-right: 20px; - } -} -.search-result-meta-container .meta-data::after { - content: none; -} -.search-result-breadcrumbs { - margin: 0; -} -.search-result-description { - margin-top: 10px; - margin-bottom: 0; - word-break: break-word; -} - -/* By default use bold instead of italic to highlight */ -.search-results-description em { - font-style: normal; - font-weight: bold; -} - -/* Add a yellow background for Chinese */ -html[lang|=zh] .search-results-description em { - font-style: normal; - background: yellow; -} - -/***** Notifications *****/ -.notification { - border: 1px solid; - display: table; - font-family: sans-serif; - font-size: 12px; - padding: 13px 15px; - transition: height 0.2s; - width: 100%; - color: #555; -} - -.notification a { - color: #158ec2; -} - -.notification-inner { - margin: 0 auto; - padding: 0 20px; - max-width: 980px; -} - -.notification-icon, .notification-inline.notification-error::before, -.notification-text, -.notification-dismiss { - display: table-cell; - vertical-align: middle; -} - -.notification-text { - padding: 0 15px; - width: 100%; -} - -.notification + .notification { - margin-bottom: -1px; - position: relative; - top: -1px; -} - -/* Error */ -.notification-error { - background: #ffeded; - border-color: #f7cbcb; -} - -.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E"); -} - -/* Notice */ -.notification-notice { - background: #dbf3ff; - border-color: #b5e0f5; -} - -.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E"); -} - -/* Alert / Lock */ -.notification-alert { - color: #ad5e18; - background: #fff8ed; - border-color: #fcdba9; -} - -.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E"); -} - -.notification-icon::before, .notification-inline.notification-error::before { - background-size: cover; - content: ""; - display: inline-block; - height: 14px; - width: 14px; - vertical-align: middle; -} - -/* Dismiss button */ -.notification-dismiss, -a.notification-dismiss { - color: #555; - cursor: pointer; - opacity: 0.6; - transition: opacity 100ms ease; - text-decoration: none !important; -} - -.notification-dismiss:hover { - opacity: 1; -} - -/* Inline notifications */ -.notification-inline { - border-radius: 4px; - line-height: 14px; - margin-top: 5px; - padding: 5px; - position: relative; - text-align: left; - vertical-align: middle; -} -[dir=rtl] .notification-inline { - text-align: right; -} -.notification-inline[aria-hidden=true] { - display: none; -} -.notification-inline.notification-error::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E"); - margin: -2px 5px 0 0; -} -[dir=rtl] .notification-inline.notification-error::before { - margin: 0 0 0 5px; -} -.notification-inline.notification-error { - background-color: #fff0f1; - border: 1px solid #e35b66; - color: #cc3340; -} -.notification-inline.notification-large { - padding: 13px 15px; - margin-bottom: 25px; -} - -.notification-left-aligned { - text-align: left; - padding-left: 0; -} - -html[dir=rtl] .notification-left-aligned { - text-align: right; - padding-left: auto; - padding-right: 0; -} - -.dropdown { - position: relative; - display: inline-block; -} - -.dropdown-toggle { - cursor: pointer; - background: none; - border: 0; - display: inline-block; - padding: 0; - text-align: initial; - vertical-align: middle; -} -.dropdown-toggle:hover { - text-decoration: none; -} -.dropdown-toggle > * { - display: inline-block; -} -.dropdown-toggle[aria-expanded=true] + .dropdown-menu { - display: block; -} - -.dropdown-menu { - background: #fff; - border: 1px solid #d8dcde; - border-radius: 3px; - box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15); - display: none; - font-size: 14px; - font-style: normal; - font-weight: normal; - left: 0; - margin-top: 1px; - min-width: 170px; - padding: 10px 0; - position: absolute; - text-align: left; - z-index: 1000; -} -[dir=rtl] .dropdown-menu { - text-align: right; -} -.dropdown-menu [role=separator] { - border-bottom: 1px solid #e9ebed; - margin: 4px 0; -} -.dropdown-menu [role=menuitem], -.dropdown-menu [role=menuitemradio] { - color: #2f3941; - cursor: pointer; - display: block; - padding: 7px 40px 7px 20px; - white-space: nowrap; - background-color: transparent; - border: 0; - -webkit-appearance: none; - text-align: start; - line-height: inherit; - width: 100%; -} -[dir=rtl] .dropdown-menu [role=menuitem], -[dir=rtl] .dropdown-menu [role=menuitemradio] { - padding: 7px 20px 7px 40px; -} -.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus, -.dropdown-menu [role=menuitemradio]:hover, -.dropdown-menu [role=menuitemradio]:focus { - background: rgba(31, 115, 183, 0.08); - text-decoration: none; - color: #2f3941; -} -.dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-checked=true], -.dropdown-menu [role=menuitemradio][aria-selected=true], -.dropdown-menu [role=menuitemradio][aria-checked=true] { - cursor: default; -} -.dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitem][aria-checked=true]::after, -.dropdown-menu [role=menuitemradio][aria-selected=true]::after, -.dropdown-menu [role=menuitemradio][aria-checked=true]::after { - content: ""; - background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E"); - display: inline-block; - height: 12px; - margin-left: 10px; - width: 12px; -} -[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after, [dir=rtl] .dropdown-menu [role=menuitem][aria-checked=true]::after, -[dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after, -[dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after { - margin-left: 0; - margin-right: 10px; - float: left; -} -.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true], -.dropdown-menu [role=menuitemradio][hidden], -.dropdown-menu [role=menuitemradio][aria-hidden=true] { - display: none !important; -} - -.dropdown-menu-end { - left: auto; - right: 0; -} - -.dropdown-menu-top { - bottom: 100%; - margin-bottom: 1px; -} - -[dir=rtl] .dropdown-menu { - left: auto; - right: 0; - text-align: right; -} -[dir=rtl] .dropdown-menu-end { - left: 0; - right: auto; -} - -.dropdown-chevron-icon { - vertical-align: middle; -} - -.content-tags > p { - color: #68737d; - margin-top: 32px; - margin-bottom: 4px; -} -.content-tags-add-hint { - color: #68737d; - font-size: 14px; -} - -.content-tag-list { - display: flex; - flex-wrap: wrap; - word-break: break-word; -} -.content-tag-list li { - border-right: 1px solid #c2c8cc; - margin-bottom: 4px; -} -[dir=ltr] .content-tag-list li { - padding-right: 8px; - margin-right: 8px; -} -[dir=rtl] .content-tag-list li { - padding-left: 8px; - margin-left: 8px; -} -.content-tag-list li:last-child { - border: none; -} - -/***** WYSIWYG Editor *****/ -#hc-wysiwyg { - border: 1px solid #87929d; -} - -/***** Upload Dropzone *****/ -.upload-dropzone { - border: 1px solid #87929d; -} - -/***** Summary component *****/ -zd-summary-block { - background: #f3f6f6; -} -[dir=ltr] zd-summary-block { - border-left-color: #859fa1; -} -[dir=rtl] zd-summary-block { - border-right-color: #859fa1; } \ No newline at end of file diff --git a/styles/index.scss b/styles/index.scss index 0a441fa46..c4c467c58 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -1,45 +1,45 @@ -@import "normalize"; -@import "variables"; -@import "mixins"; -@import "base"; -@import "buttons"; -@import "split_button"; -@import "tables"; -@import "forms"; -@import "header"; -@import "user"; -@import "footer"; -@import "breadcrumbs"; -@import "search"; -@import "hero"; -@import "page_header"; -@import "sub-nav"; -@import "blocks"; -@import "home-page"; -@import "recent-activity"; -@import "category"; -@import "section"; -@import "article"; -@import "attachments"; -@import "share"; -@import "comments"; -@import "vote"; -@import "actions"; -@import "community"; -@import "striped_list"; -@import "status-label"; -@import "post"; -@import "collapsible-nav"; -@import "collapsible-sidebar"; -@import "my-activities"; -@import "request"; -@import "pagination"; -@import "metadata"; -@import "user-profiles"; -@import "search_results"; -@import "notifications"; -@import "dropdowns"; -@import "content-tags"; -@import "wysiwyg"; -@import "upload_dropzone"; -@import "summary"; +@import 'normalize'; +// @import 'variables'; +// @import 'mixins'; +// @import 'base'; +// @import 'buttons'; +// @import "split_button"; +// @import "tables"; +// @import "forms"; +// @import "header"; +// @import "user"; +// @import "footer"; +// @import "breadcrumbs"; +// @import "search"; +// @import "hero"; +// @import "page_header"; +// @import "sub-nav"; +// @import "blocks"; +// @import "home-page"; +// @import "recent-activity"; +// @import "category"; +// @import "section"; +// @import "article"; +// @import "attachments"; +// @import "share"; +// @import "comments"; +// @import "vote"; +// @import "actions"; +// @import "community"; +// @import "striped_list"; +// @import "status-label"; +// @import "post"; +// @import "collapsible-nav"; +// @import "collapsible-sidebar"; +// @import "my-activities"; +// @import "request"; +// @import "pagination"; +// @import "metadata"; +// @import "user-profiles"; +// @import "search_results"; +// @import "notifications"; +// @import "dropdowns"; +// @import "content-tags"; +// @import "wysiwyg"; +// @import "upload_dropzone"; +// @import "summary"; diff --git a/styles/main.css b/styles/main.css index 952e4caaa..5c8fb48c9 100644 --- a/styles/main.css +++ b/styles/main.css @@ -2,6 +2,8 @@ @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; +/* @import '../assets/types.css'; */ + .site-max-width { max-width: 1440px; } @@ -9,3 +11,7 @@ .default-grid { @apply grid grid-cols-4 gap-gap-large sm:grid-cols-8; } + +.page-wrapper { + @apply p-margin-mobile pb-margin-web sm:px-margin-web sm:pb-[7.5rem] mt-nav-h; +} diff --git a/tailwind.config.ts b/tailwind.config.ts index 8ff5c5fb2..8b4504f63 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,6 +1,6 @@ -import type { Config } from "tailwindcss"; -const plugin = require("tailwindcss/plugin"); -import type { PluginAPI } from "tailwindcss/types/config"; +import type { Config } from 'tailwindcss'; +const plugin = require('tailwindcss/plugin'); +import type { PluginAPI } from 'tailwindcss/types/config'; const rem = (px: number) => `${px / 16}rem`; @@ -40,123 +40,131 @@ const config: Config = { large: rem(20), medium: rem(16), small: rem(12), - "x-small": rem(6), + 'x-small': rem(6), }, zIndex: { - modal: "900", - scrim: "850", - nav: "800", + modal: '900', + scrim: '850', + nav: '800', }, spacing: { - "margin-web": rem(40), - "margin-mobile": rem(24), - "margin-mobile-dense": rem(12), - "margin-extension": rem(16), - "padding-x-small": rem(8), - "padding-x-small-dense": rem(6), - "padding-small": rem(12), - "padding-small-dense": rem(8), - "padding-medium": rem(16), - "padding-large": rem(24), - "padding-x-large": rem(36), - "gap-large": rem(16), - "gap-medium": rem(12), - "gap-small": rem(8), - "gap-x-small": rem(4), - "mobile-nav-h": rem(72), - "nav-h": rem(59), + 'margin-web': rem(40), + 'margin-mobile': rem(24), + 'margin-mobile-dense': rem(12), + 'margin-extension': rem(16), + 'padding-x-small': rem(8), + 'padding-x-small-dense': rem(6), + 'padding-small': rem(12), + 'padding-small-dense': rem(8), + 'padding-medium': rem(16), + 'padding-large': rem(24), + 'padding-x-large': rem(36), + 'gap-large': rem(16), + 'gap-medium': rem(12), + 'gap-small': rem(8), + 'gap-x-small': rem(4), + 'mobile-nav-h': rem(72), + 'nav-h': rem(59), }, boxShadow: { - "light-short": - "0px 1px 6px 2px rgba(0, 0, 0, 0.03), 0px 1px 2px 0px rgba(0, 0, 0, 0.02)", - "light-medium": - "0px 6px 15px -3px rgba(18, 18, 23, 0.18), 0px 2px 6px -2px rgba(18, 18, 23, 0.17)", - "light-long": - "0px 10px 24px -6px rgba(18, 18, 23, 0.03), 0px 4px 8px -3px rgba(18, 18, 23, 0.02)", - "dark-short": - "0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24)", - "dark-medium": - "0px 10px 15px -3px rgba(18, 18, 23, 0.54), 0px 4px 6px -2px rgba(18, 18, 23, 0.40)", - "dark-long": - "0px 20px 25px -5px rgba(18, 18, 23, 0.54), 0px 10px 10px -5px rgba(18, 18, 23, 0.40)", + 'light-short': '0px 1px 6px 2px rgba(0, 0, 0, 0.03), 0px 1px 2px 0px rgba(0, 0, 0, 0.02)', + 'light-medium': + '0px 6px 15px -3px rgba(18, 18, 23, 0.18), 0px 2px 6px -2px rgba(18, 18, 23, 0.17)', + 'light-long': + '0px 10px 24px -6px rgba(18, 18, 23, 0.03), 0px 4px 8px -3px rgba(18, 18, 23, 0.02)', + 'dark-short': '0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24)', + 'dark-medium': + '0px 10px 15px -3px rgba(18, 18, 23, 0.54), 0px 4px 6px -2px rgba(18, 18, 23, 0.40)', + 'dark-long': + '0px 20px 25px -5px rgba(18, 18, 23, 0.54), 0px 10px 10px -5px rgba(18, 18, 23, 0.40)', }, colors: { - scrim: "rgba(0,0,0,0.60)", - black: "#000000", - white: "#ffffff", - "dark-neutral-1": "#FFFFFF", - "dark-neutral-2": "#9B9B9B", - "dark-neutral-3": "#5E5E5E", - "light-neutral-1": "#222222", - "light-neutral-2": "#7D7D7D", - "light-neutral-3": "#CECECE", - "dark-surface-1": "#131313", - "dark-surface-2": "#1B1B1B", - "dark-surface-3": "rgba(255,255,255,0.12)", - "dark-surface-4": "rgba(255,255,255,0.20)", - "dark-surface-5": "rgba(0,0,0,0.04)", - "dark-surface-1-hovered": "#181818", - "dark-surface-2-hovered": "#242424", - "dark-surface-3-hovered": "rgba(255,255,255,0.16)", - "light-surface-1": "#FFFFFF", - "light-surface-2": "#F9F9F9", - "light-surface-3": "rgba(34,34,34,0.05)", - "light-surface-4": "rgba(255,255,255,0.64)", - "light-surface-5": "rgba(0,0,0,0.04)", - "light-surface-1-hovered": "#F5F5F5", - "light-surface-2-hovered": "#F2F2F2", - "light-surface-3-hovered": "rgba(34,34,34,0.09)", - "dark-accent-1": "#FC74FE", - "dark-accent-2": "#361A37", - "dark-accent-3": "#FFF", - "dark-accent-1-hovered": "#FD3CFE", - "dark-accent-2-hovered": "#510D43", - "dark-accent-3-hovered": "#F5F5F5", - "light-accent-1": "#F50DB4", - "light-accent-2": "#FEF4FF", - "light-accent-3": "#000", - "light-accent-1-hovered": "#C70A92", - "light-accent-2-hovered": "#FEEBFC", - "light-accent-3-hovered": "#131313", - "dark-status-success-1": "#21C95E", - "dark-status-warning-1": "#FFBF17", - "dark-status-critical-1": "#FF5F52", - "dark-status-success-2": "#0F2C1A", - "dark-status-warning-2": "#1F1E02", - "dark-status-critical-2": "#2E0805", - "dark-status-success-1-hovered": "#15863C", - "dark-status-warning-1-hovered": "#FFDD0D", - "dark-status-critical-1-hovered": "#FF3931", - "dark-status-success-2-hovered": "#093A16", - "dark-status-warning-2-hovered": "#302E03", - "dark-status-critical-2-hovered": "#470402", - "light-status-success-1": "#21C95E", - "light-status-warning-1": "#FFBF17", - "light-status-critical-1": "#FF5F52", - "light-status-success-2": "#EEFBF1", - "light-status-warning-2": "#FFFBEB", - "light-status-critical-2": "#FFF2F1", - "light-status-success-1-hovered": "#15863C", - "light-status-warning-1-hovered": "#FFDD0D", - "light-status-critical-1-hovered": "#FF3931", - "light-status-success-2-hovered": "#BCEECC", - "light-status-warning-2-hovered": "#FFFBD7", - "light-status-critical-2-hovered": "#FFD5D4", - "light-orange-vibrant": "#FF4D00", - "light-orange-fade": "#FBF5F2", - "dark-orange-vibrant": "#FF4D00", - "dark-orange-fade": "#371B0C", - "dark-orange-fade-80": "rgba(55,27,12,0.80)", - "light-brown-vibrant": "#85754A", - "light-brown-fade": "#F7F5F4", - "dark-brown-vibrant": "#85754A", - "dark-brown-fade": "#231E0F", - "dark-brown-fade-80": "rgba(35,30,15,0.80)", - "light-pink-vibrant": "#F50DB4", - "light-pink-fade": "#FEF4FF", - "dark-pink-vibrant": "#FC74FE", - "dark-pink-fade": "#361A37", - "dark-pink-fade-80": "rgba(54,26,55,0.80)", + scrim: 'rgba(0,0,0,0.60)', + black: '#000000', + white: '#ffffff', + 'dark-neutral-1': '#FFFFFF', + 'dark-neutral-2': '#9B9B9B', + 'dark-neutral-3': '#5E5E5E', + 'light-neutral-1': '#222222', + 'light-neutral-2': '#7D7D7D', + 'light-neutral-3': '#CECECE', + 'dark-surface-1': '#131313', + 'dark-surface-2': '#1B1B1B', + 'dark-surface-3': 'rgba(255,255,255,0.12)', + 'dark-surface-4': 'rgba(255,255,255,0.20)', + 'dark-surface-5': 'rgba(0,0,0,0.04)', + 'dark-surface-1-hovered': '#181818', + 'dark-surface-2-hovered': '#242424', + 'dark-surface-3-hovered': 'rgba(255,255,255,0.16)', + 'light-surface-1': '#FFFFFF', + 'light-surface-2': '#F9F9F9', + 'light-surface-3': 'rgba(34,34,34,0.05)', + 'light-surface-4': 'rgba(255,255,255,0.64)', + 'light-surface-5': 'rgba(0,0,0,0.04)', + 'light-surface-1-hovered': '#F5F5F5', + 'light-surface-2-hovered': '#F2F2F2', + 'light-surface-3-hovered': 'rgba(34,34,34,0.09)', + 'dark-accent-1': '#FC74FE', + 'dark-accent-2': '#361A37', + 'dark-accent-3': '#FFF', + 'dark-accent-1-hovered': '#FD3CFE', + 'dark-accent-2-hovered': '#510D43', + 'dark-accent-3-hovered': '#F5F5F5', + 'light-accent-1': '#F50DB4', + 'light-accent-2': '#FEF4FF', + 'light-accent-3': '#000', + 'light-accent-1-hovered': '#C70A92', + 'light-accent-2-hovered': '#FEEBFC', + 'light-accent-3-hovered': '#131313', + 'dark-status-success-1': '#21C95E', + 'dark-status-warning-1': '#FFBF17', + 'dark-status-critical-1': '#FF5F52', + 'dark-status-success-2': '#0F2C1A', + 'dark-status-warning-2': '#1F1E02', + 'dark-status-critical-2': '#2E0805', + 'dark-status-success-1-hovered': '#15863C', + 'dark-status-warning-1-hovered': '#FFDD0D', + 'dark-status-critical-1-hovered': '#FF3931', + 'dark-status-success-2-hovered': '#093A16', + 'dark-status-warning-2-hovered': '#302E03', + 'dark-status-critical-2-hovered': '#470402', + 'light-status-success-1': '#21C95E', + 'light-status-warning-1': '#FFBF17', + 'light-status-critical-1': '#FF5F52', + 'light-status-success-2': '#EEFBF1', + 'light-status-warning-2': '#FFFBEB', + 'light-status-critical-2': '#FFF2F1', + 'light-status-success-1-hovered': '#15863C', + 'light-status-warning-1-hovered': '#FFDD0D', + 'light-status-critical-1-hovered': '#FF3931', + 'light-status-success-2-hovered': '#BCEECC', + 'light-status-warning-2-hovered': '#FFFBD7', + 'light-status-critical-2-hovered': '#FFD5D4', + 'light-orange-light': '#FEF5EA', + 'dark-orange-light': 'rgba(55, 27, 12, 0.8)', + 'light-orange-vibrant': '#FF4D00', + 'light-orange-fade': '#FBF5F2', + 'dark-orange-vibrant': '#FF4D00', + 'dark-orange-fade': '#371B0C', + 'dark-orange-fade-80': 'rgba(55,27,12,0.80)', + 'light-brown-vibrant': '#85754A', + 'light-brown-fade': '#F7F5F4', + 'dark-brown-vibrant': '#85754A', + 'dark-brown-fade': '#231E0F', + 'dark-brown-fade-80': 'rgba(35,30,15,0.80)', + 'light-pink-vibrant': '#F50DB4', + 'light-pink-light': '#FEF4FF', + 'dark-pink-vibrant': '#FC74FE', + 'dark-pink-light': '#361A37', + 'dark-pink-light-80': 'rgba(54,26,55,0.80)', + 'light-green-base': '#0C8911', + 'dark-green-base': '#0C8911', + 'light-green-light': '#EEFBF1', + 'dark-green-light': 'rgba(15, 44, 26, 0.8)', + 'light-blue-light': '#EFF4FF', + 'dark-blue-light': 'rgba(16, 20, 61, 0.8)', + 'light-blue-vibrant': '#0047FF', + 'dark-blue-vibrant': '#0C8911', }, }, }, @@ -165,35 +173,32 @@ const config: Config = { matchUtilities, theme, }: { - matchUtilities: PluginAPI["matchUtilities"]; - theme: PluginAPI["theme"]; + matchUtilities: PluginAPI['matchUtilities']; + theme: PluginAPI['theme']; }) { - const flattenedColors = Object.entries(theme("colors") || "").reduce( - (acc, [key, value]) => { - if (typeof value === "string") acc[key] = value; - else { - Object.entries(value).forEach(([number, color]) => { - acc[`${key}-${number}`] = color; - }); - } - return acc; - }, - {} as { [key: string]: any } - ); + const flattenedColors = Object.entries(theme('colors') || '').reduce((acc, [key, value]) => { + if (typeof value === 'string') acc[key] = value; + else { + Object.entries(value).forEach(([number, color]) => { + acc[`${key}-${number}`] = color; + }); + } + return acc; + }, {} as { [key: string]: any }); matchUtilities( { - "progress-bar": (value) => ({ + 'progress-bar': (value) => ({ backgroundColor: value, - "&::-webkit-progress-bar": { + '&::-webkit-progress-bar': { backgroundColor: value, }, }), - "progress-value": (value) => ({ + 'progress-value': (value) => ({ color: value, - "&::-webkit-progress-value": { + '&::-webkit-progress-value': { backgroundColor: value, }, - "&::-moz-progress-bar": { + '&::-moz-progress-bar': { backgroundColor: value, }, }), diff --git a/templates/document_head.hbs b/templates/document_head.hbs index 987a5ed6e..c12ceae64 100644 --- a/templates/document_head.hbs +++ b/templates/document_head.hbs @@ -15,10 +15,11 @@ "flash-notifications": "{{asset 'flash-notifications-bundle.js'}}", "navigation": "{{asset 'navigation-bundle.js'}}", "footer": "{{asset 'footer-bundle.js'}}", + "homepage": "{{asset 'homepage-bundle.js'}}", "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}", "shared": "{{asset 'shared-bundle.js'}}", "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}", - "index": "{{asset 'index-bundle.js'}}" + "index": "{{asset 'index-bundle2.js'}}" } } diff --git a/templates/footer.hbs b/templates/footer.hbs index 87febe111..764a46198 100644 --- a/templates/footer.hbs +++ b/templates/footer.hbs @@ -56,9 +56,7 @@ }, ] } -console.log('!!!!!!', window.uniswapGlobalDataObj) + // Make sure arguments are correctly typed. renderFooter(settings, footerPageData, container); - - diff --git a/templates/header.hbs b/templates/header.hbs index c9e396d3b..8e64c0459 100644 --- a/templates/header.hbs +++ b/templates/header.hbs @@ -1,5 +1,3 @@ -{{t 'skip_navigation' }} -
diff --git a/templates/home_page.hbs b/templates/home_page.hbs index 229f38292..c8960efde 100644 --- a/templates/home_page.hbs +++ b/templates/home_page.hbs @@ -1,83 +1,89 @@ -

{{ help_center.name }}

- -
-
-

{{ t 'search' }}

- - {{search submit=false instant=settings.instant_search class='search search-full'}} -
-
- -
-
-

{{ t 'categories' }}

-
- - {{pagination}} -
+
+
- {{#if promoted_articles}} -
-

{{t 'promoted_articles'}}

-