diff --git a/components/doc/common/docsectioncode.js b/components/doc/common/docsectioncode.js index c94784096b..633a5acd9f 100644 --- a/components/doc/common/docsectioncode.js +++ b/components/doc/common/docsectioncode.js @@ -32,39 +32,13 @@ export function DocSectionCode(props) { return ( <> {!props.embedded && ( -
- {codeMode === 'basic' && ( -
- - {props.code.basic} - -
- )} - {codeMode === 'data' && ( -
- - {props.code.data} - -
- )} - {codeMode !== 'basic' && codeLang === 'javascript' && ( -
- {props.code.javascript} -
- )} - {codeMode !== 'basic' && codeLang === 'typescript' && ( -
- - {props.code.typescript} - -
- )} -
+
+
{codeMode !== 'basic' && !props.hideToggleCode && codeMode !== 'data' && ( <> + > + + )} {!props.hideToggleCode && props.code.data ? ( + > + + ) : null} {!props.hideCodeSandbox && ( @@ -117,25 +93,47 @@ export function DocSectionCode(props) { {!props.hideStackBlitz && ( )} - +
+ + {codeMode === 'basic' && ( +
+ + {props.code.basic} + +
+ )} + {codeMode === 'data' && ( +
+ + {props.code.data} + +
+ )} + {codeMode !== 'basic' && codeLang === 'javascript' && ( +
+ {props.code.javascript} +
+ )} + {codeMode !== 'basic' && codeLang === 'typescript' && ( +
+ + {props.code.typescript} + +
+ )}
)} {props.embedded &&
} diff --git a/components/layout/config.js b/components/layout/config.js index da335f0c03..1f17c0ab5d 100644 --- a/components/layout/config.js +++ b/components/layout/config.js @@ -1,17 +1,17 @@ import React, { useEffect, useState } from 'react'; import { Button } from '../lib/button/Button'; import { InputSwitch } from '../lib/inputswitch/InputSwitch'; -import { RadioButton } from '../lib/radiobutton/RadioButton'; +import { SelectButton } from '../lib/selectbutton/SelectButton'; import { Sidebar } from '../lib/sidebar/Sidebar'; import { classNames } from '../lib/utils/Utils'; export default function Config(props) { const [scale, setScale] = useState(14); const [scales, setScales] = useState([12, 13, 14, 15, 16]); + const [inputStyle, setInputStyle] = useState('outlined'); + const [compactMaterial, setCompactMaterial] = useState(false); - const onThemeChange = (theme, dark) => { - props.onThemeChange({ theme, dark }); - }; + const lightOnlyThemes = ['fluent-light', 'mira', 'nano']; const decrementScale = () => { setScale((prevScale) => --prevScale); @@ -21,305 +21,322 @@ export default function Config(props) { setScale((prevScale) => ++prevScale); }; + const inputStyles = [ + { label: 'Outlined', value: 'outlined' }, + { label: 'Filled', value: 'filled' } + ]; + + const changeInputStyle = (e) => { + setInputStyle(e.value); + props.onInputStyleChange(e.value); + }; + + const darkToggleDisabled = () => { + return lightOnlyThemes.includes(props.theme); + }; + + const changeTheme = (theme, color) => { + let newTheme, dark; + + if (lightOnlyThemes.includes(theme)) { + newTheme = theme; + dark = false; + } else { + newTheme = theme + '-' + (props.dark ? 'dark' : 'light'); + + if (color) { + newTheme += '-' + color; + } + + if (newTheme.startsWith('md-') && compactMaterial) { + newTheme = newTheme.replace('md-', 'mdc-'); + } + + dark = props.dark; + } + + props.onThemeChange({ theme: newTheme, dark: dark }); + }; + + const isThemeActive = (theme, color) => { + let themeName; + let themePrefix = compactMaterial ? 'mdc' : theme; + + if (lightOnlyThemes.includes(themePrefix)) { + themeName = themePrefix; + } else { + themeName = themePrefix + (props.dark ? '-dark' : '-light'); + } + + if (color) { + themeName += '-' + color; + } + + return props.theme === themeName; + }; + + const onCompactMaterialChange = (e) => { + setCompactMaterial(e.value); + + if (props.theme.startsWith('md')) { + let tokens = props.theme.split('-'); + + changeTheme(tokens[0].substring(0, 2), tokens[2]); + } + }; + useEffect(() => { document.documentElement.style.fontSize = scale + 'px'; }, [scale]); // eslint-disable-line react-hooks/exhaustive-deps return ( - props.onHide()} className="layout-config w-full sm:w-30rem" position="right"> + props.onHide()} className={classNames('layout-config w-full sm:w-30rem', { 'layout-dark': props.dark }, { 'layout-light': !props.dark })} position="right">
-
-

Component Scale

-
-
-
-

Input Style

+
+ Input Style
-
- props.onInputStyleChange('outlined')} checked={props.inputStyle === 'outlined'} /> - -
-
- props.onInputStyleChange('filled')} checked={props.inputStyle === 'filled'} /> - -
+ { + changeInputStyle(e); + }} + options={inputStyles} + optionLabel={'label'} + optionValue={'value'} + allowEmpty={false} + />
-
-

Ripple Effect

+
+ Ripple Effect props.onRippleChange(e.value)} />
-
-

Themes

-

Bootstrap

-
-
- - Blue -
-
- - Purple -
-
- - Blue -
-
- - Purple -
-
+
+ Dark Mode + props.darkModeSwitch()} disabled={darkToggleDisabled()} /> +
-

Material Design

-
-
- - Indigo -
-
- - Deep Purple -
-
- - Indigo -
-
- - Deep Purple -
+
+
Themes
+
+ Lara Light Teal + Lara
- -

Material Design Compact

-
-
- - Indigo -
-
- - Deep Purple -
-
- - Indigo -
-
- - Deep Purple -
+
+ + + +
+
-

Fluent UI

-
-
- - Blue +
+
+ Material Design + Material Design +
+ +
+
+ + +
+
+
+
-

PrimeOne Design

-
-
- - Lara Indigo -
-
- - Lara Blue -
-
- - Lara Purple -
-
- - Lara Teal -
-
- - Lara Indigo -
-
- - Lara Blue -
-
- - Lara Purple -
-
- - Lara Teal -
+
+
+ Bootstrap + Bootstrap
+
+ + +
+
+
+
-

Misc

-
-
- - Soho Light -
-
- - Soho Dark -
-
- - Viva Light -
-
- - Viva Dark -
-
- - Mira -
-
- - Nano -
+
+
+
+
+ Soho + Soho +
+ +
+
+
+ Viva + Viva +
+ +
+
+
+
-

PrimeOne Design - Legacy

-
-
- - Saga Blue -
-
- - Saga Green -
-
- - Saga Orange -
-
- - Saga Purple -
-
- - Vela Blue -
-
- - Vela Green -
-
- - Vela Orange -
-
- - Vela Purple -
-
- - Arya Blue -
-
- - Arya Green -
-
- - Arya Orange -
-
- - Arya Purple -
+
+
+
+
+ Fluent + Fluent +
+ +
+
+
+ Mira + Mira +
+ +
+
+
+ Nano + Nano +
+ +
+
diff --git a/components/layout/layout.js b/components/layout/layout.js index f19e155060..ea15928a3f 100644 --- a/components/layout/layout.js +++ b/components/layout/layout.js @@ -10,6 +10,7 @@ import Menu from './menu'; import Topbar from './topbar'; import { PrimeReactContext } from '../lib/api/PrimeReactContext'; import PrimeReact from '../lib/api/Api'; +import HeaderSection from '../../pages/landing/headersection'; export default function Layout(props) { const [ripple, setRipple] = useState(true); @@ -24,8 +25,8 @@ export default function Layout(props) { 'layout-news-active': props.newsActive, 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false, - 'layout-wrapper-dark': props.dark, - 'layout-wrapper-light': !props.dark + 'layout-dark': props.dark, + 'layout-light': !props.dark }); const maskClassName = classNames('layout-mask', { 'layout-mask-active': sidebarActive @@ -75,6 +76,20 @@ export default function Layout(props) { setConfigActive(true); }; + const toggleColorScheme = () => { + let newTheme; + let currentTheme = props.theme; + + if (props.dark) { + newTheme = currentTheme.replace('dark', 'light'); + } else { + if (currentTheme.includes('light') && currentTheme !== 'fluent-light') newTheme = currentTheme.replace('light', 'dark'); + else newTheme = 'lara-dark-indigo'; //fallback + } + + props.onThemeChange(newTheme, !props.dark); + }; + useEffect(() => { if (context) { context.setRipple(ripple); @@ -125,8 +140,8 @@ export default function Layout(props) { {props.newsActive && } - - + + +
+
-
- {props.children} -
-
+ +
{props.children}
+
diff --git a/components/layout/menu.js b/components/layout/menu.js index 82811dac7a..5429529d2d 100644 --- a/components/layout/menu.js +++ b/components/layout/menu.js @@ -1,10 +1,8 @@ -import Link from 'next/link'; import { useRouter } from 'next/router'; import React, { memo, useEffect } from 'react'; -import { Badge } from '../lib/badge/Badge'; -import { StyleClass } from '../lib/styleclass/StyleClass'; import { classNames } from '../lib/utils/Utils'; import MenuData from './menu.json'; +import MenuItem from './menuitem'; const Menu = memo((props) => { const router = useRouter(); @@ -16,35 +14,6 @@ const Menu = memo((props) => { return rootItem; }); - const renderLink = (item) => { - const { name, to, href } = item; - const content = ( - <> - {item.icon && ( -
- -
- )} - {name} - {item.badge && } - - ); - - if (href) { - return ( - - {content} - - ); - } else { - return ( - - {content} - - ); - } - }; - const scrollToActiveItem = () => { const activeItem = document.querySelector('.router-link-active'); @@ -57,86 +26,16 @@ const Menu = memo((props) => { scrollToActiveItem(); }, []); - const renderChild = (menuitem, key) => { - if (menuitem.children) { - return ( -
  • - {menuitem.name} -
      - {menuitem.children.map((child, index) => { - const link = renderLink(child); - - return
    1. {link}
      2. ; - })} -
    -
    • - ); - } else { - const link = renderLink(menuitem); - - return
  • {link}
    • ; - } - }; - - const renderRootMenuItemChildren = (menuitem, parentIndex) => { - if (menuitem.children) { - return ( -
    -
      {menuitem.children.map((item, index) => renderChild(item, parentIndex + '_' + index))}
    -
    - ); - } - - return null; - }; - - const renderRootItemButton = (menuitem) => { - const btnRef = React.createRef(); - - return ( - - - - ); - }; - - const renderRootMenuItems = () => { - return ( - <> - {menu && - menu.map((menuitem, index) => { - const label = menuitem.children ? renderRootItemButton(menuitem, index) : renderLink(menuitem); - const children = renderRootMenuItemChildren(menuitem, index); - - return ( -
  • - {label} - {children} -
    • - ); - })} - - ); - }; - - const menuItems = renderRootMenuItems(); const sidebarClassName = classNames('layout-sidebar', { active: props.active }); return ( ); diff --git a/components/layout/menu.json b/components/layout/menu.json index 58e79604b2..80c0fe1c23 100644 --- a/components/layout/menu.json +++ b/components/layout/menu.json @@ -493,7 +493,6 @@ { "name": "Icons", "icon": "pi pi-eye", - "to": "/icons", "children": [ { "name": "Prime Icons", diff --git a/components/layout/menuitem.js b/components/layout/menuitem.js new file mode 100644 index 0000000000..13978f55b7 --- /dev/null +++ b/components/layout/menuitem.js @@ -0,0 +1,71 @@ +import React, { useRef } from 'react'; +import { Badge } from '../lib/badge/Badge'; +import Link from 'next/link'; +import { StyleClass } from '../lib/styleclass/StyleClass'; +import { classNames } from '../lib/utils/Utils'; +import { useRouter } from 'next/router'; + +function MenuItem(props) { + const router = useRouter(); + const { menuItem, root } = props; + + const btnRef = useRef(null); + + const isActiveRootmenuItem = (rootItem) => { + return rootItem.children && !rootItem.children.some((item) => item.to === router.pathname || (item.children && item.children.some((it) => it.to === router.pathname))); + }; + + return ( +
  • + {menuItem.children && root && ( + + + + )} + {menuItem?.href && ( + + + {menuItem?.icon && root && ( + + + + )} + {menuItem?.name} + {menuItem?.badge && } + + + )} + {menuItem?.to && ( + + + {menuItem?.icon && root && ( + + + + )} + {menuItem?.name} + {menuItem?.badge && } + + + )} + {!root && menuItem.children && {menuItem?.name}} + {menuItem?.children && ( +
    +
      + {menuItem.children.map((item, index) => ( + + ))} +
    +
    + )} +
    • + ); +} + +export default MenuItem; diff --git a/components/layout/topbar.js b/components/layout/topbar.js index 75c8f03e49..f605541659 100644 --- a/components/layout/topbar.js +++ b/components/layout/topbar.js @@ -2,6 +2,8 @@ import { DocSearch } from '@docsearch/react'; import { useEffect, useRef } from 'react'; import pkg from '../../package.json'; import { StyleClass } from '../lib/styleclass/StyleClass'; +import Link from 'next/link'; +import { classNames } from '../lib/utils/Utils'; export default function Topbar(props) { const versionsRef = useRef(null); @@ -96,22 +98,79 @@ export default function Topbar(props) { }; }, []); + const toggleDarkMode = () => { + props.darkModeSwitch(); + }; + return (
    - - +
      -
    • +
    • + +
    • @@ -121,7 +180,7 @@ export default function Topbar(props) { href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" - className="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary" + className="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary" > @@ -131,23 +190,34 @@ export default function Topbar(props) { href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer" - className="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary" + className="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary" >
    • -
      • + {props.showConfigurator && ( +
    • + +
      • + )}
    + {props.showMenuButton && ( +
  • + +
    • + )}
    diff --git a/pages/index.js b/pages/index.js index 3fdc389cd9..6ba95873fa 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,32 +3,37 @@ import { useEffect, useState } from 'react'; import { classNames } from '../components/lib/utils/Utils'; import NewsSection from '../components/news/newssection'; import BlockSection from './landing/blocksection'; -import ComponentSection from './landing/componentsection'; -import DesignerSection from './landing/designersection'; import FeaturesSection from './landing/featuressection'; import FooterSection from './landing/footersection'; -import HeaderSection from './landing/headersection'; import HeroSection from './landing/herosection'; import TemplateSection from './landing/templatesection'; import ThemeSection from './landing/themesection'; import UsersSection from './landing/userssection'; +import Topbar from '../components/layout/topbar'; export default function Home(props) { const [tableTheme, setTableTheme] = useState('lara-light-indigo'); - const rootClassName = classNames('landing', { 'landing-light': !props.dark, 'landing-dark': props.dark, 'landing-news-active': props.newsActive }); - - const toggleColorScheme = () => { - const darkMode = !props.dark; - const newTheme = darkMode ? 'lara-dark-indigo' : 'lara-light-indigo'; - - props.onThemeChange(newTheme, darkMode); - }; + const landingClass = classNames('landing', { 'layout-light': !props.dark, 'layout-dark': props.dark, 'layout-news-active': props.newsActive }); const changeTableTheme = (newTheme) => { props.onTableThemeChange(tableTheme, newTheme); setTableTheme(newTheme); }; + const onDarkModeToggle = () => { + let newTheme; + let currentTheme = props.theme; + + if (props.dark) { + newTheme = currentTheme.replace('dark', 'light'); + } else { + if (currentTheme.includes('light') && currentTheme !== 'fluent-light') newTheme = currentTheme.replace('light', 'dark'); + else newTheme = 'lara-dark-indigo'; //fallback + } + + props.onThemeChange(newTheme, !props.dark); + }; + useEffect(() => { const newTheme = props.dark ? tableTheme.replace('light', 'dark') : tableTheme.replace('dark', 'light'); @@ -36,7 +41,7 @@ export default function Home(props) { }, [props.dark]); // eslint-disable-line react-hooks/exhaustive-deps return ( -
    +
    PrimeReact - React UI Component Library @@ -54,18 +59,14 @@ export default function Home(props) { -
    - {props.newsActive && } - - -
    + {props.newsActive && } + + + - changeTableTheme(t)} dark={props.dark} /> - -
    ); diff --git a/pages/landing/blocksection.js b/pages/landing/blocksection.js index 0b508e1989..e7d4e70ded 100644 --- a/pages/landing/blocksection.js +++ b/pages/landing/blocksection.js @@ -1,23 +1,24 @@ import { useEffect, useState } from 'react'; +import { classNames } from '../../components/lib/utils/ClassNames'; const BlockSection = () => { - const [animationClass, setAnimationClass] = useState(''); + const [animation, setAnimation] = useState(false); useEffect(() => { - setAnimationClass('blocks-animation'); + setAnimation(true); }, []); // eslint-disable-line react-hooks/exhaustive-deps return (
    PrimeBlocks
    -

    370+ ready to copy-paste UI blocks to build spectacular applications in no time.

    +

    400+ ready to copy-paste UI blocks to build spectacular applications in no time.

    -
    +
    @@ -131,7 +132,7 @@ const BlockSection = () => {
    -
    +
    26 %
    @@ -141,12 +142,12 @@ const BlockSection = () => {
    -
    +
    62 %
    -
    +
    39 %
    @@ -176,18 +177,18 @@ const BlockSection = () => {
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    +
    +
    @@ -198,8 +199,8 @@ const BlockSection = () => {
    -
    -
    +
    +
    @@ -252,7 +253,7 @@ const BlockSection = () => {
    -
    +
    @@ -284,7 +285,7 @@ const BlockSection = () => {
    -
    +
    block logo @@ -306,16 +307,16 @@ const BlockSection = () => {
    -
    +
    -
    +
    -
    +
    @@ -324,7 +325,7 @@ const BlockSection = () => {
    -
    +
    @@ -333,7 +334,7 @@ const BlockSection = () => {
    -
    +
    @@ -372,7 +373,7 @@ const BlockSection = () => {
    -
    +
    diff --git a/pages/landing/featuressection.js b/pages/landing/featuressection.js index c292a2c13b..d5fb6debbc 100644 --- a/pages/landing/featuressection.js +++ b/pages/landing/featuressection.js @@ -3,61 +3,61 @@ const FeaturesSection = (props) => {
    Features

    PrimeReact is the most complete solution for your UI requirements.

    -
    +
    -
    - components icon -
    90+ UI Components
    -

    The ultimate set of UI Components to assist you with 90+ impressive React Components.

    +
    + components icon +
    80+ UI Components
    +

    The ultimate set of UI Components to assist you with 80+ impressive Vue Components.

    -
    - components icon -
    Community
    -

    Connect with the other open source community members, collaborate and have a voice in the project roadmap.

    +
    + components icon +
    Styled or Unstyled
    +

    Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.

    -
    - components icon -
    Productivity
    -

    Boost your productivity by achieving more in less time and accomplish amazing results.

    +
    + components icon +
    Community
    +

    Connect with the other open source community members, collaborate and have a voice in the project roadmap.

    -
    -
    - components icon +
    +
    + components icon
    Accessibility
    -

    Accessibility is a major concern of the Prime UI libraries and PrimeReact is no exception.

    +

    Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).

    -
    - components icon +
    + components icon
    Enterprise Support

    Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.

    -
    -
    - components icon +
    +
    + components icon
    Mobile
    -

    First class support for responsive design led by touch optimized elements.

    +

    First className support for responsive design led by touch optimized elements.

    -
    -
    - components icon -
    Themes
    -

    Built on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.

    +
    +
    + components icon +
    Blocks
    +

    400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.

    -
    - components icon +
    + components icon
    Typescript

    Top-notch support for Typescript with types and tooling assistance.

    diff --git a/pages/landing/footersection.js b/pages/landing/footersection.js index 32b88c510b..4713f74842 100644 --- a/pages/landing/footersection.js +++ b/pages/landing/footersection.js @@ -101,7 +101,36 @@ const FooterSection = (props) => {
    - primereact logo + + + + + + + + + + + + + + +
    diff --git a/pages/landing/headersection.js b/pages/landing/headersection.js index 04cf879a96..b813fe58ec 100644 --- a/pages/landing/headersection.js +++ b/pages/landing/headersection.js @@ -14,6 +14,7 @@ const HeaderSection = (props) => { const headerClassName = classNames('landing-header px-5 lg:px-8', { 'landing-header-active': menuActive }); const scrollListener = useRef(); + const containerRef = useRef(); const bindScrollListener = () => { scrollListener.current = () => { @@ -47,68 +48,194 @@ const HeaderSection = (props) => { } }); + // TO DO + const toggleDarkMode = () => {}; + + const onConfigButtonClick = () => {}; + + const onMenuButtonClick = () => {}; + + const versions = [ + { + name: `v${pkg.version.split('.')[0]}`, + version: pkg.version, + url: 'https://www.primereact.org' + }, + { + name: 'v8', + version: '8.7.0', + url: 'https://www.primefaces.org/primereact-v8' + }, + { + name: 'v7', + version: '7.1.0', + url: 'https://www.primefaces.org/primereact-v7' + }, + { + name: 'v6', + version: '6.6.0', + url: 'https://www.primefaces.org/primereact-v6' + }, + { + name: 'v5', + version: '5.0.2', + url: 'https://www.primefaces.org/primereact-v5' + }, + { + name: 'v4', + version: '4.2.2', + url: 'https://www.primefaces.org/primereact-v4' + } + ]; + const showConfigurator = false; + const showMenuButton = true; + return ( -
    -
    - - primereact logo - - -
    - - - - - - - - - - - - +
    +
    + +
      +
    • +
      +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + +
      • + {showConfigurator && ( +
    • + +
      • + )} +
    • + + +
      +
        + {versions.forEach((version) => { +
      • + + {version.name} + {version.version} + +
        • ; + })} +
      +
      +
      • + {showMenuButton && ( +
    • + +
      • + )} +
    -
    +
    ); }; diff --git a/pages/landing/herosection.js b/pages/landing/herosection.js index 7671a871c6..f7c7d46a2e 100644 --- a/pages/landing/herosection.js +++ b/pages/landing/herosection.js @@ -1,101 +1,216 @@ import Link from 'next/link'; import { useEffect, useState } from 'react'; -import GetStartedSection from './getstartedsection'; +import { InputNumber } from '../../components/lib/inputnumber/InputNumber'; +import { RadioButton } from '../../components/lib/radiobutton/RadioButton'; +import { Calendar } from '../../components/lib/calendar/Calendar'; +import { Chart } from '../../components/lib/chart/Chart'; +import { Chip } from '../../components/lib/chip/Chip'; +import { InputSwitch } from '../../components/lib/inputswitch/InputSwitch'; +import { SelectButton } from '../../components/lib/selectbutton/SelectButton'; +import { Slider } from '../../components/lib/slider/Slider'; +import { Button } from '../../components/lib/button/Button'; +import { TabMenu } from '../../components/lib/tabmenu/Tabmenu'; +import { Badge } from '../../components/lib/badge/Badge'; const HeroSection = () => { - const [animationClass, setAnimationClass] = useState(''); + const selectButtonOptions = [ + { name: 'Styled', value: 1 }, + { name: 'Unstyled', value: 2 } + ]; + + const items = [ + { label: 'Home', icon: 'pi pi-fw pi-home' }, + { label: 'Calendar', icon: 'pi pi-fw pi-calendar' } + ]; + + const [value1, setValue1] = useState(240); + const [value2, setValue2] = useState(240); + const [category, setCategory] = useState(''); + const [dateValue, setDateValue] = useState(null); + const [chartOptions, setChartOptions] = useState({}); + const [chartData, setChartData] = useState({}); + const [checked, setChecked] = useState(true); + const [selectButtonValue, setSelectButtonValue] = useState(1); + const [activeIndex, setActiveIndex] = useState(0); + const [rangeValues, setRangeValues] = useState([20, 80]); useEffect(() => { - setAnimationClass('hero-animation'); document.body.classList.remove('blocked-scroll'); }, []); // eslint-disable-line react-hooks/exhaustive-deps + useEffect(() => { + const documentStyle = getComputedStyle(document.documentElement); + const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); + const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + + const data = { + labels: ['Q1', 'Q2', 'Q3', 'Q4'], + datasets: [ + { + label: 'Annual Income', + data: [40, 59, 40, 50, 56], + fill: true, + borderColor: '#03C4E8', + tension: 0.4, + backgroundColor: 'rgba(151, 210, 222, .2)' + } + ] + }; + + const options = { + plugins: { + legend: { + display: false + } + }, + scales: { + x: { + ticks: { + color: textColorSecondary + }, + grid: { + color: surfaceBorder + } + }, + y: { + beginAtZero: true, + ticks: { + color: textColorSecondary + }, + min: 0, + max: 100, + grid: { + color: surfaceBorder + } + } + } + }; + + setChartData(data); + setChartOptions(options); + }, []); + return ( -
    -
    -
    -
    -
    (window.location.href = 'https://www.primefaces.org/store')}> -
    - primereact templates -
    - Templates - Spectacular Designs -
    -
    -
    -
    (window.location.href = 'https://designer.primereact.org')}> -
    - primereact templates -
    - Theme Designer - Create Your Own -
    -
    -
    +
    +
    +
    +

    + The Most Complete UI Suite for React.js +

    +

    + Elevate your web applications with PrimeReact's comprehensive suite of customizable, feature-rich UI components. With PrimeReact, turning your development vision into reality has never been easier. +

    + -
    -
    (window.location.href = 'https://github.com/primefaces/primereact')}> -
    - primereact core -
    - Open Source - 90+ UI Components +
    +
    +
    +
    +
    + Balance +
    + setValue1(e.value)} /> + setValue2(e.value)} />
    -
    -
    - -
    -
    - primereact main -
    - NEXT-GEN REACT UI + Category +
    +
    + setCategory('C')} /> + +
    +
    + setCategory('E')} /> +
    + Order Date +
    - -
    (window.location.href = 'https://primeflex.org')}> -
    - primereact icons -
    - CSS Utilities - PrimeFlex CSS -
    +
    +
    -
    -
    -
    -
    (window.location.href = 'https://blocks.primereact.org')}> -
    - primereact templates -
    - Prime Blocks - 400+ UI Blocks +
    +
    + + + setChecked(e.value)} className="ml-auto" /> +
    +
    + setSelectButtonValue(e.value)} options={selectButtonOptions} optionLabel="name" /> +
    +
    + setRangeValues(e.value)} range className="w-full" />
    - -
    -
    - primereact templates -
    - Icon Library - 200+ Icons + +
    +
    +
    + Watch +
    +
    +
    + Sneaker + Premium Quality
    + $990
    +
    - +
    + +
    +
    + setActiveIndex(e.index)} /> +
    +
    -
    -
    -
    -
    - -
    -
    -
    ); diff --git a/pages/landing/templatesection.js b/pages/landing/templatesection.js index 2a1f89f831..7b5395b099 100644 --- a/pages/landing/templatesection.js +++ b/pages/landing/templatesection.js @@ -1,129 +1,71 @@ import { useEffect, useState } from 'react'; +import { classNames } from '../../components/lib/utils/ClassNames'; const TemplateSection = (props) => { - const [animationClass, setAnimationClass] = useState(''); + const [animation, setAnimation] = useState(false); + + const isDark = props.dark; useEffect(() => { - setAnimationClass('templates-animation'); + setAnimation(true); }, []); // eslint-disable-line react-hooks/exhaustive-deps + const imageBg = (template) => { + const url = template === 'templates-text' ? 'png' : 'jpg'; + + return `url('https://primefaces.org/cdn/primevue/images/landing/templates/${template}-${isDark ? 'dark' : 'light'}.${url}')`; + }; + + const templateImg = () => { + return `https://primefaces.org/cdn/primereact/images/landing/templates/templates-text-new-${isDark ? 'dark' : 'light'}.png`; + }; + return (
    Templates

    Professionally designed highly customizable application templates to get started in style.

    -
    +
    -
    - - Diamond Preview + -
    -
    - +
    - template-text +
    -
    -
    - - Serenity Preview + -
    - + diff --git a/pages/landing/userssection.js b/pages/landing/userssection.js index be11786c1b..b839685a39 100644 --- a/pages/landing/userssection.js +++ b/pages/landing/userssection.js @@ -30,12 +30,12 @@ const UsersSection = (props) => { const users2 = usersImages.slice(6); return ( -
    +
    Who Uses

    PrimeTek libraries have reached over - 130 Million Downloads + 140 Million Downloads on npm! Join the PrimeLand community and experience the difference yourself.

    @@ -43,14 +43,14 @@ const UsersSection = (props) => {
    -
    +
    -
    +
    -
    +
    -
    +
    ); diff --git a/styles/layout/_code.scss b/styles/layout/_code.scss index fb8257fe8e..28663ba977 100644 --- a/styles/layout/_code.scss +++ b/styles/layout/_code.scss @@ -1,415 +1,143 @@ - code[class*="language-"], - pre[class*="language-"] { - color: black; - background: none; - font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,Liberation Mono,monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - } - - /* Code blocks */ - pre[class*="language-"] { - position: relative; - margin: .5em 0; - overflow: visible; - padding: 1px; - } - - pre[class*="language-"] > code { - position: relative; - border-left: 10px solid #358ccb; - box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf; - background-color: #fdfdfd; - background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); - background-size: 3em 3em; - background-origin: content-box; - background-attachment: local; - } - - code[class*="language-"] { - max-height: inherit; - height: inherit; - padding: 0 1em; - display: block; - overflow: auto; - } - - /* Margin bottom to accommodate shadow */ - :not(pre) > code[class*="language-"], - pre[class*="language-"] { - background-color: #fdfdfd; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin-bottom: 1em; - } - - /* Inline code */ - :not(pre) > code[class*="language-"] { - position: relative; - padding: .2em; - border-radius: 0.3em; - color: #c92c2c; - border: 1px solid rgba(0, 0, 0, 0.1); - display: inline; - white-space: normal; - } - - pre[class*="language-"]:before, - pre[class*="language-"]:after { - content: ''; - display: block; - position: absolute; - bottom: 0.75em; - left: 0.18em; - width: 40%; - height: 20%; - max-height: 13em; - box-shadow: 0px 13px 8px #979797; - -webkit-transform: rotate(-2deg); - -moz-transform: rotate(-2deg); - -ms-transform: rotate(-2deg); - -o-transform: rotate(-2deg); - transform: rotate(-2deg); - } - - pre[class*="language-"]:after { - right: 0.75em; - left: auto; - -webkit-transform: rotate(2deg); - -moz-transform: rotate(2deg); - -ms-transform: rotate(2deg); - -o-transform: rotate(2deg); - transform: rotate(2deg); - } - - .token.comment, - .token.block-comment, - .token.prolog, - .token.doctype, - .token.cdata { - color: #7D8B99; - } - - .token.punctuation { - color: #5F6364; - } - - .token.property, - .token.tag, - .token.boolean, - .token.number, - .token.function-name, - .token.constant, - .token.symbol, - .token.deleted { - color: #c92c2c; - } - - .token.selector, - .token.attr-name, - .token.string, - .token.char, - .token.function, - .token.builtin, - .token.inserted { - color: #2f9c0a; - } - - .token.operator, - .token.entity, - .token.url, - .token.variable { - color: #a67f59; - background: rgba(255, 255, 255, 0.5); - } - - .token.atrule, - .token.attr-value, - .token.keyword, - .token.class-name { - color: #1990b8; - } - - .token.regex, - .token.important { - color: #e90; - } - - .language-css .token.string, - .style .token.string { - color: #a67f59; - background: rgba(255, 255, 255, 0.5); - } - - .token.important { - font-weight: normal; - } - - .token.bold { - font-weight: bold; - } - .token.italic { - font-style: italic; - } - - .token.entity { - cursor: help; - } - - .token.namespace { - opacity: .7; - } - - @media screen and (max-width: 767px) { - pre[class*="language-"]:before, - pre[class*="language-"]:after { - bottom: 14px; - box-shadow: none; - } - - } - - /* Plugin styles: Line Numbers */ - pre[class*="language-"].line-numbers.line-numbers { - padding-left: 0; - } - - pre[class*="language-"].line-numbers.line-numbers code { - padding-left: 3.8em; - } - - pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows { - left: 0; - } - - /* Plugin styles: Line Highlight */ - pre[class*="language-"][data-line] { - padding-top: 0; - padding-bottom: 0; - padding-left: 0; - } - pre[data-line] code { - position: relative; - padding-left: 4em; - } - pre .line-highlight { - margin-top: 0; - } - - div.code-toolbar { - position: relative; - } - - div.code-toolbar > .toolbar { - position: absolute; - z-index: 10; - top: .3em; - right: .2em; - transition: opacity 0.3s ease-in-out; - opacity: 0; - } - - div.code-toolbar:hover > .toolbar { - opacity: 1; - } - - /* Separate line b/c rules are thrown out if selector is invalid. - IE11 and old Edge versions don't support :focus-within. */ - div.code-toolbar:focus-within > .toolbar { - opacity: 1; - } - - div.code-toolbar > .toolbar > .toolbar-item { - display: inline-block; - } - - div.code-toolbar > .toolbar > .toolbar-item > a { - cursor: pointer; - } - - div.code-toolbar > .toolbar > .toolbar-item > button { - background: none; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - padding: 0; - -webkit-user-select: none; /* for button */ - -moz-user-select: none; - -ms-user-select: none; - } - - div.code-toolbar > .toolbar > .toolbar-item > a, - div.code-toolbar > .toolbar > .toolbar-item > button, - div.code-toolbar > .toolbar > .toolbar-item > span { - color: #bbb; - font-size: .8em; - padding: 0 .5em; - background: #f5f2f0; - background: rgba(224, 224, 224, 0.2); - box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); - border-radius: .5em; - } - - div.code-toolbar > .toolbar > .toolbar-item > a:hover, - div.code-toolbar > .toolbar > .toolbar-item > a:focus, - div.code-toolbar > .toolbar > .toolbar-item > button:hover, - div.code-toolbar > .toolbar > .toolbar-item > button:focus, - div.code-toolbar > .toolbar > .toolbar-item > span:hover, - div.code-toolbar > .toolbar > .toolbar-item > span:focus { - color: inherit; - text-decoration: none; - } - - .layout-wrapper-dark { - pre[class*="language-"] { - code { - .token { - &.tag { - color: var(--text-color) !important; - } - &.keyword { - color: rgb(244,112,103) !important; - } - - &.property { - color: rgb(150,208,255) !important; - } - - &.attr-name, - &.attr-string { - color: rgb(108,182,255) !important; - } - - &.string { - color: var(--text-color) !important; - } - - &.attr-value { - color: var(--text-color) !important; - - .punctuation { - color: rgb(108,182,255) !important; - } - } - - &.punctuation { - color: var(--text-color) !important; - } - - &.operator, - &.string { - background: transparent; - } - - &.function { - color: rgb(220,189,251) !important; - } - - &.class-name { - color: rgb(141,219,140) !important; - } - - &.operator { - color: rgb(150,208,255) !important; - } - } - } - } - } +code[class*="language-"], +pre[class*="language-"] { + background: none; + font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,Liberation Mono,monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} - .layout-wrapper-light { - pre[class*="language-"] { - code { - .token { - &.tag { - color: rgb(10,48,105) !important; - } - &.keyword { - color: rgb(207,34,46) !important; - } - - &.property { - color: rgb(5,80,174) !important; - } - - &.attr-name, - &.attr-string { - color: rgb(5,80,174) !important; - } - - &.string { - color: rgb(10,48,105) !important; - } - - &.attr-value { - color: rgb(10,48,105) !important; - - .punctuation { - color: rgb(10,48,105) !important; - } - } - - &.punctuation { - color: rgb(5,80,174) !important; - } - - &.operator, - &.string { - background: transparent; - } - - &.function { - color: rgb(130,80,223) !important; - } - - &.class-name { - color: rgb(17,99,41) !important; - } - - &.operator { - color: rgb(5,80,174) !important; - } - } - } - } +div.code-toolbar > .toolbar { + display: none; } - + + pre[class*="language-"] { position: relative; - background: transparent !important; + background: transparent; + margin: 0; + padding: 0; + max-height: 40rem; + overflow: auto; + color-scheme: dark; &:before, &:after { display: none !important; } code { - border-left: 1rem solid transparent !important; - box-shadow: none !important; - background: var(--surface-card) !important; + border-left: 1rem solid transparent; + box-shadow: none; margin: 0; - color: var(--surface-900); font-size: 14px; border-radius: 10px; + color: #ffffff; + max-height: inherit; + height: inherit; + padding: 0 1rem; + display: block; + overflow: auto; + + .token.comment, + .token.block-comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: #bbf7d0; + } + + .token.punctuation { + color: #bfdbfe; + } + + .token.property, + .token.tag, + .token.boolean, + .token.number, + .token.function-name, + .token.constant, + .token.symbol, + .token.deleted { + color: #93c5fd; + } + + .token.selector, + .token.attr-name, + .token.string, + .token.char, + .token.function, + .token.builtin, + .token.inserted { + color: #eff6ff; + } + + .token.operator, + .token.entity, + .token.url, + .token.variable { + color: #ffffff; + } + + .token.atrule, + .token.attr-value, + .token.keyword, + .token.class-name { + color: #bbf7d0; + } + + .token.regex, + .token.important { + color: #fde68a; + } + + .language-css .token.string, + .style .token.string { + color: #fde68a; + } + + .token.important { + font-weight: normal; + } + + .token.bold { + font-weight: bold; + } + .token.italic { + font-style: italic; + } + + .token.entity { + cursor: help; + } } - } +} .copy-to-clipboard-button { display: none; +} + +pre[class*="language-"] { + code { + background: var(--demo-code-bg); + } +} + +.layout-light { + &[data-p-theme^="md"] { + pre[class*="language-"] { + code { + background: var(--surface-900); + } + } + } } \ No newline at end of file diff --git a/styles/layout/_config.scss b/styles/layout/_config.scss index c0b281bc58..87ed2e2442 100644 --- a/styles/layout/_config.scss +++ b/styles/layout/_config.scss @@ -1,15 +1,52 @@ .layout-config { + backdrop-filter: blur(20px); + background-color: var(--mobile-menu-bg); + + .p-selectbutton { + .p-button { + padding: 0.5rem 1rem; + + &:first-child { + border-top-left-radius: 30px; + border-bottom-left-radius: 30px; + } + + &:last-child { + border-top-right-radius: 30px; + border-bottom-right-radius: 30px; + } + } + } + + button { + &:focus-visible { + outline: 0 none; + border-color: var(--surface-500) !important; + } + } + .grid { > div { padding: 1rem; } - } - img { - transition: transform .2s; - &:hover { - transform: scale(1.1); + .p-inputswitch { + .p-inputswitch-slider { + border-radius: 30px; + + &:before { + border-radius: 30px; + } } } + + &.layout-light { + background: var(--surface-overlay); + } + + &.layout-dark { + background: var(rgba(0,0,0,.3)); + border: 0 none; + } } \ No newline at end of file diff --git a/styles/layout/_content.scss b/styles/layout/_content.scss index 7a5202c0db..d60687945a 100644 --- a/styles/layout/_content.scss +++ b/styles/layout/_content.scss @@ -1,12 +1,18 @@ .layout-content { - margin-left: 250px; - padding-top: 5rem; + padding: 6rem 4rem 0 4rem; + display: flex; - .layout-content-inner { - padding: 2rem 4rem; + .layout-content-slot { + flex: 1 1 auto; + width: 1%; + padding-top: .5rem; } +} - .card { - @include card; - } +.card { + background: var(--surface-card); + border: var(--card-border); + padding: 2rem; + border-radius: 10px; + margin-bottom: 1rem; } diff --git a/styles/layout/_core.scss b/styles/layout/_core.scss index e1d5a62946..ab819c5a2f 100644 --- a/styles/layout/_core.scss +++ b/styles/layout/_core.scss @@ -14,10 +14,19 @@ body { -moz-osx-font-smoothing: grayscale; } +.layout-wrapper { + background-color: var(--surface-ground); +} + a { text-decoration: none; } +::selection { + background-color: var(--highlight-bg); + color: var(--highlight-text-color); +} + h1, h2, h3, h4, h5, h6 { margin: 1.5rem 0 1rem 0; font-family: inherit; @@ -31,7 +40,7 @@ h1, h2, h3, h4, h5, h6 { } h1 { - font-size: 2.25rem; + font-size: 2rem; } h2 { @@ -55,7 +64,7 @@ h6 { } p { - line-height: 1.5; + line-height: 1.75; margin: 0 0 1rem 0; } @@ -84,12 +93,8 @@ input[type="number"] { border: none; cursor: pointer; user-select: none; -} -.px-link:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: var(--focus-ring); + @include focus-visible(); } .px-link:disabled { @@ -97,6 +102,6 @@ input[type="number"] { } button { - font-family: inherit; - font-feature-settings: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings); } \ No newline at end of file diff --git a/styles/layout/_doc.scss b/styles/layout/_doc.scss index 500d16fece..ef076f39aa 100644 --- a/styles/layout/_doc.scss +++ b/styles/layout/_doc.scss @@ -1,25 +1,34 @@ .doc-tabmenu { list-style: none; - margin: 0 17rem 0 0; - padding: 0 0 1px 0; + margin: 0; + padding: 0; display: flex; margin-bottom: 2rem; - border-bottom: 1px solid var(--surface-border); overflow: auto; + position: relative; - li { - margin-bottom: -1px; + &:after { + display: block; + position: absolute; + bottom: 0; + width: 100%; + border-bottom: 1px solid var(--surface-border); + content: ''; + } + li { + position: relative; + z-index: 1; + button { background-color: transparent; border: 0 none; display: block; - padding: 1rem 2rem; - min-width: 12rem; + padding: 0 2rem 1rem 2rem; text-align: center; color: var(--surface-700); - font-size: 1.125rem; - letter-spacing: 2px; + font-size: 1rem; + letter-spacing: 1px; cursor: pointer; margin: 0; transition: all 0.2s; @@ -35,12 +44,14 @@ &:focus { outline: 0 none; } + + @include focus-visible(); } &.doc-tabmenu-active { button { - color: var(--primary-color); border-bottom-color: var(--primary-color); + color: var(--primary-color); } } } @@ -82,9 +93,9 @@ opacity: 0.7; margin-left: 1rem; display: none; - transition: - opacity 0.3s, - colors 0.3s; + transition: all .2s; + border-radius: var(--border-radius); + @include focus-visible(); } &:hover { @@ -106,47 +117,39 @@ i { border-radius: 6px; padding: 2px 6px; - font-size: 0.875rem; + font-size: 1rem; font-weight: 600; font-style: normal; + background-color: var(--doc-highlight-text-bg); + color: var(--doc-highlight-text-color); } a { color: var(--primary-color); font-weight: 600; + transition: all .2s; + border-radius: var(--border-radius); + @include focus-visible(); &:hover { text-decoration: underline; } } } -} -.layout-wrapper-light { - .doc-section-description { - > p { - i { - background-color: var(--primary-100); - color: var(--primary-900); - } - } - } -} - -.layout-wrapper-dark { - .doc-section-description { - > p { - i { - background-color: var(--highlight-bg); - color: var(--highlight-text-color); - } - } + .notification { + line-height: 1.5; + padding: 1rem; + font-weight: 500; + border-radius: 10px; + background-color: var(--doc-highlight-text-bg); + color: var(--doc-highlight-text-color); } } .doc-section-nav { position: sticky; - top: 7rem; + top: 6rem; right: 0; width: 14rem; max-height: calc(100vh - 15rem); @@ -161,8 +164,8 @@ > .navbar-item { .navbar-item-content { border-left: 1px solid var(--surface-border); - padding-left: 0.25rem; - transition: all 0.2s; + padding-left: .25rem; + transition: all .2s; &:hover { border-left-color: var(--surface-500); @@ -177,11 +180,12 @@ .px-link { padding: 0.25rem 1rem 0.25rem 1rem; color: var(--surface-800); + font-weight: 400; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; - transition: all 0.2s; + transition: all .2s; } &:hover { @@ -215,53 +219,82 @@ } } -.doc-section-code-tooltip .p-tooltip-text { - padding: 0.5rem; - font-size: 11px; -} - -.doc-section-code { +.doc-section-code { + position: relative; + div { &::-webkit-scrollbar { width: 5px; } } - .p-button-label { - font-weight: normal; - font-size: 0.875rem; + &:not(:last-child) { + margin-bottom: 1rem; } - .doc-section-code-active { - .p-button-label { - font-weight: bold; + &:hover { + .doc-section-code-buttons { + display: flex; } } +} - pre { - margin: 0; - } +.doc-section-code-buttons { + position: absolute; + align-items: center; + justify-content: end; + z-index: 1; + top: .75rem; + right: .75rem; + gap: .5rem; + display: none; + background: rgba(255,255,255,.05); + border-radius: 10px; + padding: 2px; + backdrop-filter: blur(6px); + border: 1px solid rgba(255, 255, 255, .1); + + button { + outline: 0 none; + border-radius: 8px; + outline-offset: 0; + background-color: transparent; + transition: background-color .2s, box-shadow .2s; + border: 0 none; + color: var(--demo-code-button-color); + cursor: pointer; + + &:hover { + background-color: var(--demo-code-button-hover-bg); + color: var(--demo-code-button-hover-color); + } - &:not(:last-child) { - margin-bottom: 1rem; + &.code-active { + color: #bbf7d0; + } } } +.doc-section-code-tooltip .p-tooltip-text { + padding: 0.5rem; + font-size: 11px; +} + + + .doc-tablewrapper { overflow: auto; - @include card; } .doc-table { border-collapse: collapse; width: 100%; min-width: 960px; - background-color: var(--surface-card); margin-bottom: 1.5rem; th { border-bottom: 1px solid var(--surface-border); - padding: 0.75rem 1rem; + padding: .75rem 1rem; text-align: left; text-transform: capitalize; } @@ -272,7 +305,7 @@ } td { - padding: 0.75rem 1rem; + padding: .75rem 1rem; border-bottom: 1px solid var(--surface-border); white-space: pre-line; line-height: 1.5; @@ -280,31 +313,25 @@ &:first-child { color: var(--primary-color); - font-family: - ui-monospace, - SFMono-Regular, - "SF Mono", - Menlo, - Consolas, - Liberation Mono, - monospace; + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; + font-weight: 600; } .doc-option-type { - font-family: - ui-monospace, - SFMono-Regular, - "SF Mono", - Menlo, - Consolas, - Liberation Mono, - monospace; + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; color: var(--primary-500); font-weight: 500; - > a { - color: var(--primary-500); + .doc-option-type-options-container { + display: flex; + align-items: center; + } + + span.doc-option-type-options { + color: var(--primary-700); + } + &.doc-option-link { &:hover { text-decoration: underline; } @@ -313,18 +340,11 @@ .doc-option-name, > i:not(.pi) { - font-family: - ui-monospace, - SFMono-Regular, - "SF Mono", - Menlo, - Consolas, - Liberation Mono, - monospace; + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; position: relative; scroll-margin-top: 6.5rem; - background-color: var(--highlight-bg); - color: var(--highlight-text-color); + background-color: var(--doc-highlight-text-bg); + color: var(--doc-highlight-text-color); border-radius: 6px; padding: 2px 6px; font-weight: 600; @@ -338,9 +358,7 @@ color: var(--primary-color); opacity: 0.7; display: none; - transition: - opacity 0.3s, - colors 0.3s; + transition: opacity 0.3s, colors 0.3s; } } @@ -358,14 +376,7 @@ .doc-option-default, .doc-option-returnType { - font-family: - ui-monospace, - SFMono-Regular, - "SF Mono", - Menlo, - Consolas, - Liberation Mono, - monospace; + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; font-weight: 400; font-style: normal; display: flex; @@ -377,38 +388,17 @@ } .doc-option-parameter-name { - font-family: - ui-monospace, - SFMono-Regular, - "SF Mono", - Menlo, - Consolas, - Liberation Mono, - monospace; + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; color: var(--primary-700); } .doc-option-parameter-type { - font-family: - ui-monospace, - SFMono-Regular, - "SF Mono", - Menlo, - Consolas, - Liberation Mono, - monospace; + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; color: var(--primary-500); } .doc-option-params { - font-family: - ui-monospace, - SFMono-Regular, - "SF Mono", - Menlo, - Consolas, - Liberation Mono, - monospace; + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; } .doc-option-light { diff --git a/styles/layout/_docsearch.scss b/styles/layout/_docsearch.scss index 31615cc486..772aa1b9cc 100644 --- a/styles/layout/_docsearch.scss +++ b/styles/layout/_docsearch.scss @@ -1,11 +1,16 @@ .DocSearch-Button { border-radius: var(--border-radius); border: 1px solid var(--surface-border); - width: 14rem; + height: 2rem; + background-color: var(--surface-card); margin: 0; - transition: border-color .3s; - height: 3rem; - padding: 0 .75rem; + transition: all .3s; + padding: 0 .5rem; + @include focus-visible(); + + &:hover { + border-color: var(--primary-color); + } &:hover { border-color: var(--primary-color); @@ -13,21 +18,20 @@ } .DocSearch-Search-Icon { - width: 1.25rem; - height: 1.25rem; + width: 1rem; + height: 1rem; } .DocSearch-Button-Keys { - border-radius: var(--border-radius); overflow: hidden; min-width: auto; - height: 1.5rem; - background: var(--docsearch-key-gradient); + height: auto; + background: transparent; display: flex; align-items: center; justify-content: center; width: auto; - padding: .28rem .35rem; + padding: 0; gap: 2px; .DocSearch-Button-Key { @@ -39,22 +43,19 @@ border-radius: 0; height: auto; width: auto; + font-family: var(--font-family); &:first-child { - justify-content: end; - font-size: 0.8rem; - font-weight: 700; - line-height: 13.5px; - svg{ - height: 14.5px; - } + font-size: 0.75rem; + line-height: normal; } &:last-child { justify-content: start; align-items: center; - font-size: 0.8rem; + font-size: 0.75rem; position: relative; + &::before { content: "\e90d"; display: flex; @@ -122,6 +123,12 @@ color: var(--primary-color); } +.DocSearch-Button-Placeholder { + text-align: center; + display: inline-block; + font-size: .875rem; +} + :root { --docsearch-searchbox-focus-background: var(--surface-card); --docsearch-text-color: var(--text-color); @@ -138,4 +145,5 @@ --docsearch-hit-color: var(--text-color); --docsearch-highlight-color: var(--primary-color); --docsearch-hit-active-color: var(--primary-color-text); -} \ No newline at end of file +} + diff --git a/styles/layout/_footer.scss b/styles/layout/_footer.scss index 9443536d02..0eb285db1f 100644 --- a/styles/layout/_footer.scss +++ b/styles/layout/_footer.scss @@ -1,5 +1,5 @@ .layout-footer { - padding: 2rem 0; + padding: 2rem 4rem; margin-top: 4rem; display: flex; align-items: center; @@ -12,9 +12,14 @@ a { color: var(--primary-color); font-weight: 700; + transition: all .3s; + border-radius: var(--border-radius); + + @include focus-visible(); &:hover { text-decoration: underline; } + } } \ No newline at end of file diff --git a/styles/layout/_glow.scss b/styles/layout/_glow.scss new file mode 100644 index 0000000000..f2e2895b15 --- /dev/null +++ b/styles/layout/_glow.scss @@ -0,0 +1,7 @@ +.landing, .layout-wrapper { + background-image: var(--glow-image); + background-blend-mode: var(--glow-blend); + background-position: top center; + background-repeat: no-repeat; + background-size: auto 20rem; +} \ No newline at end of file diff --git a/styles/layout/_mixins.scss b/styles/layout/_mixins.scss index 6b1dc55796..2c088ffad1 100644 --- a/styles/layout/_mixins.scss +++ b/styles/layout/_mixins.scss @@ -1,6 +1,7 @@ -@mixin card { - background: var(--surface-card); - padding: 2rem; - border-radius: 10px; - margin-bottom: 1rem; +@mixin focus-visible($type:null) { + &:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: $type var(--focus-ring); + } } \ No newline at end of file diff --git a/styles/layout/_news.scss b/styles/layout/_news.scss index 50d746bc03..6814961875 100644 --- a/styles/layout/_news.scss +++ b/styles/layout/_news.scss @@ -38,6 +38,16 @@ white-space: nowrap; } + .layout-news-link, + .layout-news-link:visited, + .layout-news-link:active { + color:var(--primary-color-text); + font-weight:700; + } + .layout-news-link:hover { + text-decoration: underline; + } + .layout-news-close { line-height: 1.5; cursor: pointer; @@ -56,21 +66,18 @@ } } -.landing-news-active { - .landing-header { +.layout-news-active { + .layout-topbar { top: 2rem; } -} -.layout-news-active { .layout-sidebar, - .layout-topbar, - .layout-config { - top: 2rem; + .doc-section-nav { + top: 8rem; } .layout-content { - padding-top: 7rem; + padding-top: 8rem; } .doc-section-label, diff --git a/styles/layout/_responsive.scss b/styles/layout/_responsive.scss index 3357dc3b89..27719501d7 100644 --- a/styles/layout/_responsive.scss +++ b/styles/layout/_responsive.scss @@ -1,134 +1,166 @@ -@media screen and (min-width: 1729px) { - .layout-content-inner { - max-width: 1478px; +@media screen and (min-width: 1920px) { + .layout-content { + max-width: 1728px; margin: 0 auto; } - .layout-topbar-inner { - max-width: 1478px; + .layout-topbar-inner, + .layout-footer { + max-width: 1728px; margin: 0 auto; } + } -@media screen and (max-width: 991px) { - .layout-wrapper { - .layout-topbar { - left: 0; - width: 100%; - - .menu-button { - display: flex; - } +@media screen and (max-width: 1199px) { + .layout-topbar-inner { + padding-left: 2rem; + padding-right: 2rem; - .DocSearch-Button { - margin-right: 0; - margin-left: auto; - width: 2rem; - height: 2rem; - overflow: hidden; - padding: 0; - justify-content: center; - align-items: center; - - .DocSearch-Search-Icon { - width: 1rem; - height: 1rem; - } - - .DocSearch-Button-Placeholder, - .DocSearch-Button-Keys { - display: none; - } - } - } - - .layout-sidebar { - top: 0; - z-index: 1102; - height: 100%; - transform: translateX(-100%); - - &.active { - transform: translateX(0); - } + .menu-button { + display: block; } - - .layout-content { - margin-left: 0; + + .layout-topbar-logo-container { + width: auto; + margin-right: 0; } - - .layout-mask { - background-color: rgba(0, 0, 0, 0.1); - - &.layout-mask-active { - z-index: 1101; - width: 100%; - height: 100%; - position: fixed; - top: 0; - left: 0; - background-color: rgba(0, 0, 0, 0.4); - transition: background-color .5s; + + .DocSearch-Button { + width: 2rem; + height: 2rem; + overflow: hidden; + padding: 0; + justify-content: center; + align-items: center; + + .DocSearch-Search-Icon { + width: 1rem; + height: 1rem; + } + + .DocSearch-Button-Placeholder, + .DocSearch-Button-Keys { + display: none; } } + } - .doc-section-nav { - display: none; + .layout-sidebar { + top: 0; + left: 0; + position: fixed; + z-index: 1102; + height: 100%; + transform: translateX(-100%); + background-color: var(--mobile-menu-bg); + backdrop-filter: blur(20px); + width: 300px; + opacity: 0; + + nav { + padding: 1rem 1rem; } - .doc-tabmenu { - margin-right: 0; + &.active { + opacity: 1; + transform: translateX(0); + } + } + + .layout-news-active { + .layout-sidebar { + top: 0; } + } - .video-container { - position: relative; + .layout-mask { + background-color: rgba(0, 0, 0, 0.1); + + &.layout-mask-active { + z-index: 1101; width: 100%; - height: 0; - padding-bottom: 56.25%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.4); + transition: background-color .5s; + } + } - iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } + .doc-section-nav { + display: none; + } + + .video-container { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; + + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } } + .layout-content { + padding-left: 2rem; + padding-right: 2rem; + } + + .layout-footer { + padding-left: 2rem; + padding-right: 2rem; + } + .blocked-scroll { overflow: hidden; padding-right: var(--scrollbar-width); } } +@media (max-width: 768px) { + .DocSearch-Container { + position: fixed !important; + } +} + @media screen and (max-width: 575px) { - .layout-wrapper { - .layout-topbar-inner { - padding-left: 1rem; - padding-right: 1rem; - } + .layout-topbar-inner { + padding-left: 1rem; + padding-right: 1rem; - .layout-content { - .layout-content-inner { - padding-left: 1rem; - padding-right: 1rem; - } + .layout-topbar-logo { + display: none; } - .layout-footer { - padding-left: 1rem; - padding-right: 1rem; + .layout-topbar-icon { + display: inline-flex; } + } + + .layout-content { + padding-left: 1rem; + padding-right: 1rem; + } + + .layout-footer { + padding-left: 1rem; + padding-right: 1rem; + } - .doc-tabmenu { - li { - flex: 1 1 0; + .doc-tabmenu { + li { + flex: 1 1 0; - button { - width: 100%; - min-width: auto; - } + button { + width: 100%; + min-width: auto; } } } diff --git a/styles/layout/_sidebar.scss b/styles/layout/_sidebar.scss index 315f39f9ad..d512bb1757 100644 --- a/styles/layout/_sidebar.scss +++ b/styles/layout/_sidebar.scss @@ -1,15 +1,16 @@ .layout-sidebar { - position: fixed; + position: sticky; left: 0; - top: 0; - height: 100%; - background-color: var(--surface-overlay); - width: 250px; + top: 6rem; + height: calc(100vh - 9rem); user-select: none; - transition: transform .4s cubic-bezier(.05,.74,.2,.99); + transition: transform .4s cubic-bezier(.05,.74,.2,.99), opacity .3s; display: flex; flex-direction: column; - padding: 1rem 0; + padding: 0 0 0 0; + flex: 0 0 250px; + margin-right: 4rem; + overflow: auto; .logo { display: flex; @@ -17,10 +18,9 @@ } nav { - padding: .5rem 1rem 2rem 1rem; - margin-top: 2rem; + padding: 0 1rem 0 0; + margin: 0; flex-grow: 1; - overflow-y: auto; } .layout-menu { @@ -30,15 +30,17 @@ > li { margin-bottom: .25rem; + > button, > a { display: flex; width: 100%; align-items: center; - padding: .5rem; + padding: .5rem 0; color: var(--surface-900); font-weight: 600; transition: all .2s; + border-radius: var(--border-radius); .menu-icon { width: 2rem; @@ -65,7 +67,7 @@ &:hover { .menu-icon { i { - color: var(--surface-900); + color: var(--primary-color); } } @@ -83,11 +85,13 @@ } } } + + @include focus-visible(inset); } > div { ol { - margin: 0 0 0 1.5rem; + margin: 0 0 0 1rem; padding: .25rem 0; list-style: none; @@ -96,7 +100,7 @@ color: var(--surface-700); border-left: 1px solid var(--surface-border); transition: all .2s; - font-weight: 400; + font-weight: 450; display: flex; padding: .5rem .5rem .5rem 1rem; color: var(--surface-700); diff --git a/styles/layout/_topbar.scss b/styles/layout/_topbar.scss index 5c16bf4541..bbd53f8702 100644 --- a/styles/layout/_topbar.scss +++ b/styles/layout/_topbar.scss @@ -1,60 +1,58 @@ .layout-topbar { - padding: 0; - height: 5rem; position: fixed; top: 0; - left: 250px; - width: calc(100% - 250px); + left: 0; + width: calc(100% - var(--scrollbar-width, 0px)); z-index: 1100; - transition: background-color 1s; - - .layout-topbar-inner { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 4rem; - height: 100%; - width: calc(100% - var(--scrollbar-width, 0px)); - } + transition: background-color .5s, border-color .5s; + border-bottom: 1px solid transparent; &.layout-topbar-sticky { + border-bottom: 1px solid var(--surface-border); + background-color: var(--topbar-sticky-bg); backdrop-filter: blur(8px); } +} - .menu-button { - display: none; - color: var(--text-color); - width: 3rem; - height: 3rem; - background-color: var(--surface-card); - border: 1px solid var(--surface-border); - align-items: center; - justify-content: center; - transition: border-color .3s; - cursor: pointer; - - &:hover { - border-color: var(--primary-color); - } +.layout-topbar-inner { + height: 4rem; + padding: 0 4rem; + display: flex; + align-items: center; + justify-content: space-between; + + .layout-topbar-logo-container { + width: 250px; + margin-right: 4rem; + } + + .layout-topbar-logo, + .layout-topbar-icon { + border-radius: var(--border-radius); + @include focus-visible(); - i { - font-size: 1.5rem; + svg { + width: 120px; } } -} -.layout-wrapper-light { - .layout-topbar { - &.layout-topbar-sticky { - background-color: rgba(255,255,255,.7); + .layout-topbar-logo { + display: inline-flex; + + svg { + width: 120px; } } -} -.layout-wrapper-dark { - .layout-topbar { - &.layout-topbar-sticky { - background-color: rgba(0,0,0,.3); + .layout-topbar-icon { + display: none; + + svg { + width: 25px; } } + + .menu-button { + display: none; + } } \ No newline at end of file diff --git a/styles/layout/landing/_blocks.scss b/styles/layout/landing/_blocks.scss index a3f45554cf..69a76d68fb 100644 --- a/styles/layout/landing/_blocks.scss +++ b/styles/layout/landing/_blocks.scss @@ -18,8 +18,8 @@ opacity: 1; visibility: visible; transform: scale(1); - } - } + } + } } .prime-block { @@ -71,8 +71,8 @@ border: var(--home-blocks-main-border); border-radius: 13px; background: var(--home-blocks-main-bg); - } - } + } + } } .block-item { @@ -149,8 +149,8 @@ .bar{ background: var(--home-blocks-tablebar-bg); - } - } + } + } } .bar { @@ -180,8 +180,8 @@ height: 3px; border-radius: 6px; background: var(--home-blocks-bar-button-bg); - } - } + } + } } .circle { @@ -193,7 +193,7 @@ &.circle-small { width: 8px; height: 8px; - } + } &.circle-medium { width: 14px; @@ -216,7 +216,7 @@ @keyframes block-animation { to { - transform: translateY(-10px) scale(1.02); + transform: translateY(-10px) translateX(10px) scale(1.02); box-shadow: var(--home-blocks-animation-shadow); } } \ No newline at end of file diff --git a/styles/layout/landing/_components.scss b/styles/layout/landing/_components.scss deleted file mode 100644 index 26dc923bb1..0000000000 --- a/styles/layout/landing/_components.scss +++ /dev/null @@ -1,38 +0,0 @@ -.landing-components { - .components-main { - .components-strip-top { - background: var(--home-components-strip-bg); - transform: matrix(-1, 0, 0, 1, 0, 0); - } - - .components-strip-bottom { - background: var(--home-components-strip-bg); - } - - - } - - .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { - background: transparent; - } - - .box { - box-shadow: var(--home-card-shadow); - } - - .p-datepicker, .p-datepicker-header { - background: transparent; - border-color: transparent; - } - -} - - - -@media screen and (min-width: 1660px) { - .components-main-container { - width: 1504px !important; - margin-left: auto !important; - margin-right: auto !important; - } -} \ No newline at end of file diff --git a/styles/layout/landing/_designer.scss b/styles/layout/landing/_designer.scss deleted file mode 100644 index 873dcd7e7b..0000000000 --- a/styles/layout/landing/_designer.scss +++ /dev/null @@ -1,154 +0,0 @@ -.landing-designer { - .designer-demo { - --dd-primary:#03C4E8; - --dd-primary-darker:#029dba; - --dd-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - - .p-component { - font-family: var(--dd-font); - } - - .p-slider { - .p-slider-range { - background-color: var(--dd-primary); - } - - .p-slider-handle { - border-color: var(--dd-primary); - - &:hover { - background-color: var(--dd-primary); - border-color: var(--dd-primary); - } - } - } - - .p-inputtext { - &:enabled:hover { - border-color: var(--dd-primary); - } - - &:focus { - box-shadow: none; - border-color: var(--dd-primary); - } - } - - .p-checkbox { - &:not(.p-checkbox-disabled) .p-checkbox-box { - &:hover, &.p-focus { - border-color: var(--dd-primary); - } - - &.p-focus { - box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0); - } - } - - .p-checkbox-box { - &.p-highlight { - background-color: var(--dd-primary); - border-color: var(--dd-primary); - - &:hover { - background-color: var(--dd-primary); - border-color: var(--dd-primary); - } - } - } - } - - .p-button { - background-color: var(--dd-primary); - border-color: var(--dd-primary); - - &.p-button-outlined { - background-color: transparent; - - .p-button-icon, .p-button-label { - color: var(--dd-primary); - } - - &:enabled:hover, - &:enabled:active { - background-color: transparent; - } - } - - &:enabled:hover, - &:enabled:active { - background-color: var(--dd-primary-darker); - border-color: var(--dd-primary-darker); - } - - &:focus { - box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0); - } - } - - .p-listbox { - .p-listbox-list .p-listbox-item.p-highlight { - background-color: transparent; - box-shadow: inset 0 0 0 0.15rem var(--dd-primary); - color: var(--text-color); - } - } - - .p-inputtext, .p-button, .p-listbox-item, .p-slider { - transition: all .5s; - } - - .p-slider, .p-checkbox { - transition: transform .5s; - } - - &.demo-size-small { - .p-inputtext, .p-button { - padding: .5rem; - } - - .p-listbox-item { - padding: .5rem 1rem; - } - - .p-slider, .p-checkbox { - transform: scale(0.9); - } - } - - &.demo-size-large { - .p-inputtext, .p-button { - padding: 1rem; - } - - .p-listbox-item { - padding: 1rem 1.5rem; - } - - .p-slider, .p-checkbox { - transform: scale(1.1); - } - } - } - - .formgrid > .field { - padding: 1rem 2rem 1rem; - } - - .designer-editor { - backdrop-filter: blur(1rem); - box-shadow: var(--home-card-shadow); - } - - .designer-controls { - border-radius: 0 !important; - background: transparent; - } - - .designer-editor{ - max-width: 1250px !important; - margin-left: auto !important; - margin-right: auto !important; - } -} - diff --git a/styles/layout/landing/_features.scss b/styles/layout/landing/_features.scss index 37cb57ee48..219b064760 100644 --- a/styles/layout/landing/_features.scss +++ b/styles/layout/landing/_features.scss @@ -7,4 +7,4 @@ margin-left: auto !important; margin-right: auto !important; } -} +} \ No newline at end of file diff --git a/styles/layout/landing/_footer.scss b/styles/layout/landing/_footer.scss new file mode 100644 index 0000000000..3b97a5c680 --- /dev/null +++ b/styles/layout/landing/_footer.scss @@ -0,0 +1,5 @@ +.landing-footer { + a { + @include focus-visible(); + } +} \ No newline at end of file diff --git a/styles/layout/landing/_getstarted.scss b/styles/layout/landing/_getstarted.scss index e2ef2df8e8..f3d55c3468 100644 --- a/styles/layout/landing/_getstarted.scss +++ b/styles/layout/landing/_getstarted.scss @@ -8,5 +8,4 @@ color: var(--home-primary-text-color); } } -} - +} \ No newline at end of file diff --git a/styles/layout/landing/_header.scss b/styles/layout/landing/_header.scss deleted file mode 100644 index e3cc2d41f3..0000000000 --- a/styles/layout/landing/_header.scss +++ /dev/null @@ -1,107 +0,0 @@ -.landing-header { - background-color: transparent; - position: fixed; - top: 0; - left: 0; - width: 100%; - padding-top: 1rem; - padding-bottom: 1rem; - z-index: 100; - - .landing-header-container { - width: 100%; - max-width: 1250px !important; - margin-left: auto !important; - margin-right: auto !important; - display: flex; - align-items: center; - justify-content: space-between; - } - - .landing-header-logo { - height: 2.5rem; - } - - &.landing-header-sticky { - background-color: var(--home-header-bg); - backdrop-filter: blur(12px); - } - - ol { - a { - display: block; - padding: 0.5rem 1.5rem; - text-align: center; - transition: background-color 0.3s; - border-radius: 10px; - color: var(--home-menu-link-text-color); - white-space: nowrap; - - img { - display: none; - } - - &:hover { - background: var(--home-menu-link-hover-bg); - } - } - } - - .header-button { - width: 2.5rem; - height: 2.5rem; - } -} - -@media screen and (max-width: $landingBreakpointLG) { - .landing-header { - align-items: flex-start; - - nav { - display: none; - } - - &.landing-header-active { - background-color: var(--home-header-bg); - backdrop-filter: blur(12px); - height: 100vh; - - nav { - display: block; - position: fixed; - left: 100px; - top: 100px; - width: 100%; - padding: 4rem 2rem; - top: 5rem; - left: 0; - } - - .menu-button { - i:before { - content: "\e90b"; - } - } - } - - ol { - a { - border: 1px solid var(--home-border-color); - background-color: var(--home-herobox-bg); - margin-bottom: 1rem; - color: var(--home-linkbox-text-color); - cursor: pointer; - font-size: 1.5rem; - text-align: left; - display: flex; - align-items: center; - padding: 1.5rem; - - img { - display: block; - margin-right: 1.5rem; - } - } - } - } -} diff --git a/styles/layout/landing/_hero.scss b/styles/layout/landing/_hero.scss index c6f064b4c9..60a6db5fbc 100644 --- a/styles/layout/landing/_hero.scss +++ b/styles/layout/landing/_hero.scss @@ -1,200 +1,22 @@ .landing-hero { - flex: 1 1 auto; - - .hero-inner { - .hero-box { - position: relative; - z-index: 1; - - .name { - text-align: center; - margin-top: 20px; - opacity: 0; - transition: 1s; - transition-delay: 1.8s; - } - - img { - transform: scale(0); - opacity: 0; - transition: 0.5s; - transition-delay: 1.8s; - } - - b { - color: var(--home-primary-text-color); - display: block; - font-weight: 600; - font-size: 13px; - } - - span { - color: var(--home-secondary-text-color); - font-weight: 500; - font-size: 12px; - } - - &:before { - content: ''; - background: var(--home-herobox-bg); - border: 1px solid var(--home-border-color); - box-shadow: 0px 50px 100px var(--home-herobox-shadow); - border-radius: 9px; - z-index: -1; - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 0%; - opacity: 0; - transform: translate(-50%, -50%); - transition: height 1s 1.4s, opacity 1s 1.4s, border-color .3s; - } - - &:hover { - &:before { - border-color: var(--home-highlight-color); - } - } - } - - .hero-border-top { - opacity: 0; - border: 1px solid transparent; - width: 380px; - height: 0; - position: absolute; - top: 50%; - left: 50%; - z-index: -1; - transition: height 1.5s, opacity 1.5s; - transition-delay: 0.6s; - border-radius: 9px; - transform: translate(-50%, -50%); - } - - .hero-border-left { - border: 1px solid var(--home-border-color); - border-right: transparent; - width: 0%; - border-radius: 9px 0 0 9px; - height: 35%; - position: absolute; - top: 50%; - left: -3%; - z-index: -1; - opacity: 0; - transition: width 1s, opacity 1s, transform 1s; - transition-delay: 1s; - transform: translate(108px, -50%); - } - - .hero-border-right { - border: 1px solid var(--home-border-color); - border-left: transparent; - width: 0%; - border-radius: 0 9px 9px 0; - height: 35%; - position: absolute; - top: 50%; - right: -3%; - z-index: -1; - opacity: 0; - transition: width 1s, opacity 1s, transform 1s; - transition-delay: 1s; - transform: translate(-108px, -50%); - } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + background: transparent; } - .hero-bg { - transition-delay: 1.4s; - - .hero-strip-top { - transition: 1.6s; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - width: 114px; - height: 0%; - opacity: 0; - background: var(--home-herobox-strip-top-bg); - } - - .hero-strip-left { - transition: 1.6s; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 0%; - height: 114px; - opacity: 0; - background: var(--home-herobox-strip-bottom-bg); - } + .box { + box-shadow: var(--home-card-shadow); } - &.hero-animation { - .hero-bg { - .hero-strip-top { - opacity: 1; - height: 100%; - } - - .hero-strip-left { - width: 100%; - opacity: 1; - } - } - - .hero-inner { - .hero-box { - cursor: pointer; - - img { - opacity: 1; - transform: scale(1); - } - - &.logo { - &::before { - box-shadow: var(--home-herobox-logo-shadow); - } - } - - .name { - opacity: 1; - } - - &:before { - height: 100%; - opacity: 1; - } - } - - .hero-border-top { - height: 70%; - opacity: 1; - border-color: var(--home-border-color); - } - - .hero-border-left { - opacity: 1; - width: 19%; - transform: translate(0, -50%); - } - - .hero-border-right { - opacity: 1; - width: 19%; - transform: translate(0, -50%); - } - } + .p-datepicker, .p-datepicker-header { + background: transparent; + border-color: transparent; } } -@media screen and (max-width: $landingBreakpointLG) { +@media screen and (min-width: 1660px) { .landing-hero { - padding: 0 2rem; + width: 1504px !important; + margin-left: auto !important; + margin-right: auto !important; } } \ No newline at end of file diff --git a/styles/layout/landing/_landing.scss b/styles/layout/landing/_landing.scss index be90e10bdf..a02515e118 100644 --- a/styles/layout/landing/_landing.scss +++ b/styles/layout/landing/_landing.scss @@ -2,15 +2,13 @@ $landingBreakpointMD: 767px; $landingBreakpointLG: 991px; $landingBreakpointXL: 1199px; +@import '../_mixins'; @import './_main'; -@import './_light'; -@import './_dark'; -@import './_header'; @import './_hero'; +@import './_users'; @import './_getstarted'; -@import './_components'; @import './_themes'; @import './_blocks'; -@import './_designer'; @import './_templates'; @import './_features'; +@import './_footer'; diff --git a/styles/layout/landing/_main.scss b/styles/layout/landing/_main.scss index 918a6453f8..93f374c94b 100644 --- a/styles/layout/landing/_main.scss +++ b/styles/layout/landing/_main.scss @@ -1,14 +1,7 @@ .landing { - background: var(--home-bg); + background-color: var(--home-bg); scroll-behavior: smooth; - - .landing-intro { - background: var(--home-intro-bg); - display: flex; - flex-direction: column; - padding-top: 5rem; - min-height: 100vh; - } + padding-top: 4rem; .box { border: 1px solid var(--home-border-color); @@ -17,7 +10,7 @@ } .linkbox { - transition: background-color 0.3s; + transition: background-color .2s, border-color .2s; display: inline-flex; align-items: center; color: var(--home-linkbox-text-color); @@ -26,6 +19,8 @@ background-color: var(--home-linkbox-bg); border-radius: 10px; cursor: pointer; + + @include focus-visible(); &:hover { background: var(--home-linkbox-hover-bg); @@ -64,6 +59,10 @@ border-bottom: 0 none; overflow: hidden; } + + &.layout-news-active { + padding-top: 6rem; + } } .text-secondary { @@ -87,6 +86,7 @@ border-radius: var(--border-radius); display: inline-block; width: 14.45rem; + &::before { border-radius: var(--border-radius); animation: color-animation 2s linear infinite; @@ -133,48 +133,4 @@ 100% { transform: translateX(calc(-100% - 3rem)); } -} - -.landing-users { - .section-detail { - max-width: 1250px !important; - margin-left: auto !important; - margin-right: auto !important; - } - .users-container { - max-width: 1250px !important; - margin-left: auto !important; - margin-right: auto !important; - - .marquee-wrapper { - user-select: none; - gap: 3rem; - justify-content: center; - align-items: center; - flex-shrink: 0; - } - .marquee { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: space-around; - gap: 3rem; - min-width: 100%; - animation: scroll 30s linear infinite; - - > div { - max-width: clamp(10rem, 1rem + 28vmin, 20rem); - aspect-ratio: 1; - display: flex; - justify-content: center; - align-items: center; - height: 8rem; - } - - &.marquee-reverse { - animation-direction: reverse; - animation-delay: calc(30s / -2); - } - } - } -} +} \ No newline at end of file diff --git a/styles/layout/landing/_templates.scss b/styles/layout/landing/_templates.scss index 435da78a5f..b83757e2f1 100644 --- a/styles/layout/landing/_templates.scss +++ b/styles/layout/landing/_templates.scss @@ -25,7 +25,7 @@ &.block-1 { animation: animated-block-1 2s ease-in-out alternate infinite; } - + &.block-2 { animation: animated-block-2 2s 0.2s ease-in-out alternate infinite; } diff --git a/styles/layout/landing/_users.scss b/styles/layout/landing/_users.scss new file mode 100644 index 0000000000..5ebda5eafe --- /dev/null +++ b/styles/layout/landing/_users.scss @@ -0,0 +1,49 @@ +.landing-users { + .fade-right { + background: linear-gradient(to left, var(--home-bg), transparent); + } + .fade-left { + background: linear-gradient(to right, var(--home-bg), transparent); + } + .section-detail { + max-width: 1250px !important; + margin-left: auto !important; + margin-right: auto !important; + } + .users-container { + max-width: 1250px !important; + margin-left: auto !important; + margin-right: auto !important; + + .marquee-wrapper { + user-select: none; + gap: 3rem; + justify-content: center; + align-items: center; + flex-shrink: 0; + } + .marquee { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: space-around; + gap: 3rem; + min-width: 100%; + animation: scroll 30s linear infinite; + + > div { + max-width: clamp(10rem, 1rem + 28vmin, 20rem); + aspect-ratio: 1; + display: flex; + justify-content: center; + align-items: center; + height: 8rem; + } + + &.marquee-reverse{ + animation-direction: reverse; + animation-delay: calc(30s / -2); + } + } + } +} \ No newline at end of file diff --git a/styles/layout/layout.scss b/styles/layout/layout.scss index 165b05693c..1d790164d8 100644 --- a/styles/layout/layout.scss +++ b/styles/layout/layout.scss @@ -1,15 +1,17 @@ @charset 'UTF-8'; +@import './variables/_variables'; @import './_mixins'; @import './_core'; +@import './_glow'; @import './_topbar'; @import './_sidebar'; @import './_content'; @import './_news'; @import './_footer'; @import './_config'; -@import './_responsive'; @import './_code'; @import './_doc'; @import './_docsearch'; +@import './_responsive'; @import './landing/_landing'; diff --git a/styles/layout/variables/_variables.scss b/styles/layout/variables/_variables.scss new file mode 100644 index 0000000000..82efa8da7d --- /dev/null +++ b/styles/layout/variables/_variables.scss @@ -0,0 +1,4 @@ +@import './landing/_light'; +@import './landing/_dark'; +@import './main/_light'; +@import './main/_dark'; \ No newline at end of file diff --git a/styles/layout/landing/_dark.scss b/styles/layout/variables/landing/_dark.scss similarity index 99% rename from styles/layout/landing/_dark.scss rename to styles/layout/variables/landing/_dark.scss index ae1b89ea22..13ce6c2d3c 100644 --- a/styles/layout/landing/_dark.scss +++ b/styles/layout/variables/landing/_dark.scss @@ -1,4 +1,4 @@ -.landing-dark { +.landing.layout-dark { --home-highlight-color:#03C4E8; --home-highlight-darker-color:#029dba; --home-highlight-fore-color:#263238; diff --git a/styles/layout/landing/_light.scss b/styles/layout/variables/landing/_light.scss similarity index 99% rename from styles/layout/landing/_light.scss rename to styles/layout/variables/landing/_light.scss index eb4b26fdf5..515e0f8bdb 100644 --- a/styles/layout/landing/_light.scss +++ b/styles/layout/variables/landing/_light.scss @@ -1,4 +1,4 @@ -.landing-light { +.landing.layout-light { --home-highlight-color:#03C4E8; --home-highlight-darker-color:#029dba; --home-highlight-fore-color:#ffffff; diff --git a/styles/layout/variables/main/_dark.scss b/styles/layout/variables/main/_dark.scss new file mode 100644 index 0000000000..45fb4f58f3 --- /dev/null +++ b/styles/layout/variables/main/_dark.scss @@ -0,0 +1,15 @@ +.layout-dark { + --topbar-sticky-bg:rgba(0,0,0,.3); + --card-border: 0 none; + --card-bg: var(--surface-card); + --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--primary-color) 0%, #000000 100%); + --glow-blend: hard-light, color-dodge; + --topbar-border: var(--surface-border); + --mobile-menu-bg: rgba(0,0,0,.3); + --demo-code-bg: var(--surface-card); + --demo-code-button-color: var(--surface-500); + --demo-code-button-hover-bg: rgba(255,255,255,.1); + --demo-code-button-hover-color: var(--surface-700); + --doc-highlight-text-bg: var(--highlight-bg); + --doc-highlight-text-color: var(--highlight-text-color); +} \ No newline at end of file diff --git a/styles/layout/variables/main/_light.scss b/styles/layout/variables/main/_light.scss new file mode 100644 index 0000000000..a978140db0 --- /dev/null +++ b/styles/layout/variables/main/_light.scss @@ -0,0 +1,15 @@ +.layout-light { + --topbar-sticky-bg:rgba(255,255,255,.7); + --card-border: 1px solid var(--surface-border); + --card-bg: var(--surface-card); + --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center top, var(--primary-100) 0%, #ffffff 100%); + --glow-blend: hard-light, multiply; + --topbar-border: rgba(0,0,0,.05); + --mobile-menu-bg: var(--surface-overlay); + --demo-code-bg: var(--surface-700); + --demo-code-button-color: var(--surface-300); + --demo-code-button-hover-bg: rgba(255,255,255,.1); + --demo-code-button-hover-color: var(--surface-100); + --doc-highlight-text-bg: var(--primary-100); + --doc-highlight-text-color: var(--primary-900); +} \ No newline at end of file