diff --git a/src/[locale]/components/[libId]/[componentId].tsx b/src/[locale]/components/[libId]/[componentId].tsx index 4158487cc510..39f383adc074 100644 --- a/src/[locale]/components/[libId]/[componentId].tsx +++ b/src/[locale]/components/[libId]/[componentId].tsx @@ -1,3 +1,4 @@ +import {BREAKPOINTS, useWindowBreakpoint} from '@gravity-ui/page-constructor'; import {GetStaticPaths, GetStaticPathsResult, GetStaticProps} from 'next'; import React from 'react'; import {Section} from 'src/components/NavigationLayout/types'; @@ -81,6 +82,9 @@ export const ComponentPage = ({ const lib = libs.find((item) => item.id === libId); const component = lib?.components.find((item) => item.id === componentId); + const windowBreakpoint = useWindowBreakpoint(); + const isMobile = windowBreakpoint < BREAKPOINTS.lg; + if (!lib || !component) { return null; } @@ -107,7 +111,7 @@ export const ComponentPage = ({ }, []); return ( - <Layout title={`${lib.title} – ${component.title}`}> + <Layout title={`${lib.title} – ${component.title}`} hideFooter noScroll={!isMobile}> <ComponentsLayout libId={libId} componentId={componentId} sections={sections}> <Component libId={libId} diff --git a/src/[locale]/design/[sectionId]/[articleId].tsx b/src/[locale]/design/[sectionId]/[articleId].tsx index 4aeb57700aa9..2fcef93543fe 100644 --- a/src/[locale]/design/[sectionId]/[articleId].tsx +++ b/src/[locale]/design/[sectionId]/[articleId].tsx @@ -1,3 +1,4 @@ +import {BREAKPOINTS, useWindowBreakpoint} from '@gravity-ui/page-constructor'; import {GetStaticPaths, GetStaticPathsResult, GetStaticProps} from 'next'; import React from 'react'; import {Section} from 'src/components/NavigationLayout/types'; @@ -52,6 +53,9 @@ export const ArticlePage = ({sectionId, articleId}: {sectionId: string; articleI const section = designSections.find((item) => item.id === sectionId); const article = section?.articles.find((item) => item.id === articleId); + const windowBreakpoint = useWindowBreakpoint(); + const isMobile = windowBreakpoint < BREAKPOINTS.lg; + if (!section || !article) { return null; } @@ -72,7 +76,7 @@ export const ArticlePage = ({sectionId, articleId}: {sectionId: string; articleI }, []); return ( - <Layout title={`${section.title} – ${article.title}`}> + <Layout title={`${section.title} – ${article.title}`} hideFooter noScroll={!isMobile}> <DesignLayout sections={sections} sectionId={sectionId} articleId={articleId}> <DesignArticle article={article} sectionId={sectionId} sections={sections} /> </DesignLayout> diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 7d0feebabec4..acab8b3de9a9 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,4 +1,4 @@ -import {Col, Grid, Row} from '@gravity-ui/page-constructor'; +import {Col, Grid, GridProps, Row} from '@gravity-ui/page-constructor'; import {Icon} from 'landing-uikit'; import React from 'react'; @@ -11,8 +11,11 @@ import './Footer.scss'; const b = block('footer'); -export const Footer: React.FC = () => ( - <Grid> +export const Footer: React.FC<Pick<GridProps, 'className' | 'containerClass'>> = ({ + className, + containerClass, +}) => ( + <Grid className={className} containerClass={containerClass}> <Row> <Col sizes={{sm: 12}}> <footer className={b()}> diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss index d57993f808f5..0e2a496919e3 100644 --- a/src/components/Layout/Layout.scss +++ b/src/components/Layout/Layout.scss @@ -27,5 +27,9 @@ $block: '.#{variables.$ns}layout'; position: relative; flex: 1; z-index: 1; + + &_no-scroll { + overflow: hidden; + } } } diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 520f2c27a56a..5c93a4c85112 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -27,6 +27,8 @@ export type LayoutProps = { isPageConstrucor?: boolean; isRtl?: boolean; showOnlyContent?: boolean; + hideFooter?: boolean; + noScroll?: boolean; meta?: MetaProps; }; @@ -36,6 +38,8 @@ export const Layout: React.FC<LayoutProps> = ({ isPageConstrucor = false, isRtl = false, showOnlyContent = false, + hideFooter = false, + noScroll = false, meta = {}, }) => { const {i18n} = useTranslation(); @@ -73,8 +77,8 @@ export const Layout: React.FC<LayoutProps> = ({ </div> )} <div className={b('wrapper')} id={CONTENT_WRAPPER_ID}> - <div className={b('content')}>{children}</div> - {!showOnlyContent && <Footer />} + <div className={b('content', {'no-scroll': noScroll})}>{children}</div> + {!showOnlyContent && !hideFooter && <Footer />} </div> </div> ); diff --git a/src/components/LibraryVersion/LibraryVersion.scss b/src/components/LibraryVersion/LibraryVersion.scss index cf30ae378638..2cd3fbaf8142 100644 --- a/src/components/LibraryVersion/LibraryVersion.scss +++ b/src/components/LibraryVersion/LibraryVersion.scss @@ -4,6 +4,7 @@ $block: '.#{variables.$ns}library-version'; #{$block} { + display: flex; padding: 2px 8px; font-size: 13px; font-weight: 400; diff --git a/src/components/LibraryVersion/LibraryVersion.tsx b/src/components/LibraryVersion/LibraryVersion.tsx index 295c34d9d113..c31b3b06f238 100644 --- a/src/components/LibraryVersion/LibraryVersion.tsx +++ b/src/components/LibraryVersion/LibraryVersion.tsx @@ -18,9 +18,11 @@ const LibraryVersion: FC<Props> = ({id}) => { } return ( - <Card className={b()} theme="warning" view="outlined"> - <Text color="warning">{libraryVersion}</Text> - </Card> + <> + <Card className={b()} theme="warning" view="outlined"> + <Text color="warning">{libraryVersion}</Text> + </Card> + </> ); }; diff --git a/src/components/NavigationLayout/Navigation/Navigation.scss b/src/components/NavigationLayout/Navigation/Navigation.scss index 3fdc14c7fec4..98c13dd1acbc 100644 --- a/src/components/NavigationLayout/Navigation/Navigation.scss +++ b/src/components/NavigationLayout/Navigation/Navigation.scss @@ -1,9 +1,18 @@ -@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables; +@use '../../../mixins.scss' as baseMixins; @use '../../../variables.scss'; $block: '.#{variables.$ns}navigation-layout-navigation'; #{$block} { + &__search-input { + position: sticky; + top: 0; + z-index: 1; + padding-top: 20px; + padding-bottom: 8px; + background: var(--g-color-base-modal); + } + &__empty { margin-top: 16px; font-size: 18px; @@ -11,4 +20,12 @@ $block: '.#{variables.$ns}navigation-layout-navigation'; font-weight: 600; text-align: center; } + + @include baseMixins.window-breakpoint('lg') { + &__search-input { + position: static; + padding: 0; + background: none; + } + } } diff --git a/src/components/NavigationLayout/Navigation/Navigation.tsx b/src/components/NavigationLayout/Navigation/Navigation.tsx index 90763409eabe..92b4265e1de5 100644 --- a/src/components/NavigationLayout/Navigation/Navigation.tsx +++ b/src/components/NavigationLayout/Navigation/Navigation.tsx @@ -1,3 +1,4 @@ +import {BREAKPOINTS, useWindowBreakpoint} from '@gravity-ui/page-constructor'; import {TextInput} from 'landing-uikit'; import React from 'react'; @@ -37,6 +38,9 @@ export const Navigation = React.memo<NavigationProps>( }, {}); }); + const windowBreakpoint = useWindowBreakpoint(); + const isMobile = windowBreakpoint < BREAKPOINTS.lg; + const [filteredSections, setFilteredSections] = React.useState(sections); React.useEffect(() => { setFilteredSections(sections); @@ -84,14 +88,15 @@ export const Navigation = React.memo<NavigationProps>( return ( <div className={b()}> - <TextInput - value={filterString} - onUpdate={filterStringUpdateHandle} - size="xl" - placeholder={searchPlaceholder} - hasClear - /> - + <div className={b('search-input')}> + <TextInput + value={filterString} + onUpdate={filterStringUpdateHandle} + size={isMobile ? 'xl' : 'l'} + placeholder={searchPlaceholder} + hasClear + /> + </div> <div className={b('items')}> {filteredSections.length > 0 ? ( filteredSections.map((section) => { diff --git a/src/components/NavigationLayout/NavigationLayout.scss b/src/components/NavigationLayout/NavigationLayout.scss index 5059068f2ac8..2c593b3a85a0 100644 --- a/src/components/NavigationLayout/NavigationLayout.scss +++ b/src/components/NavigationLayout/NavigationLayout.scss @@ -1,23 +1,15 @@ -@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables; +@use '../../mixins.scss' as baseMixins; @use '../../variables.scss'; $block: '.#{variables.$ns}navigation-layout'; #{$block} { - margin: 24px 0 0; - - @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) { - margin: 0; - - & &__layout-grid { - .container-fluid { - padding: 0; - .col { - padding: 0; - } - } - } - } + display: flex; + margin-left: auto; + padding-left: 48px; + max-width: calc(1232px + (100vw - 1232px) / 2); + height: 100%; + box-sizing: content-box; &__mobile-navigation-control { display: none; @@ -29,14 +21,6 @@ $block: '.#{variables.$ns}navigation-layout'; font-size: 15px; line-height: 20px; cursor: pointer; - - @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) { - display: flex; - } - - @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) { - margin: 12px 20px; - } } &__mobile-navigation-control-label { @@ -61,10 +45,6 @@ $block: '.#{variables.$ns}navigation-layout'; &__mobile-navigation-header { display: none; padding: 20px 0; - - @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) { - display: flex; - } } &__mobile-navigation-header-title { @@ -83,10 +63,69 @@ $block: '.#{variables.$ns}navigation-layout'; cursor: pointer; } + &__navigation-wrap { + flex-basis: 24%; + max-width: 296px; + max-height: 100%; + padding: 0 21px 48px 16px; + background: var(--g-color-base-modal); + overflow: auto; + } + &__navigation { display: block; + } - @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) { + &__content-wrap { + flex-grow: 1; + overflow: auto; + } + + &__content { + display: flex; + flex-direction: column; + justify-content: space-between; + max-width: 904px; + min-height: calc(100% - 40px); + margin-right: auto; + padding-top: 40px; + padding-right: 48px; + padding-left: 32px; + box-sizing: content-box; + } + + & &__footer { + padding: 0; + + & .col { + padding: 0; + } + } + + @include baseMixins.window-breakpoint('lg') { + flex-direction: column; + max-width: none; + height: auto; + min-height: 100%; + padding: 24px 40px 0; + box-sizing: border-box; + + &__mobile-navigation-control { + display: flex; + } + + &__mobile-navigation-header { + display: flex; + } + + &__navigation-wrap { + flex-basis: auto; + max-width: initial; + padding: 0 8px; + background: none; + } + + &__navigation { display: none; &_mobile-open { @@ -102,13 +141,46 @@ $block: '.#{variables.$ns}navigation-layout'; background: #160d1b; } } + + &__content-wrap { + display: flex; + flex-direction: column; + padding: 0 8px; + overflow: visible; + } + + &__content { + flex-grow: 1; + max-width: none; + height: 100%; + min-height: initial; + margin: 0; + padding: 0; + } } - &__content { - padding-left: 16px; + @include baseMixins.window-breakpoint('sm') { + padding: 0; + + &__navigation-wrap { + padding: 0; + } + + &__content-wrap { + padding: 0; + } + + &__mobile-navigation-control { + margin: 12px 20px; + } + + & &__footer { + box-sizing: border-box; + padding: 0 16px; - @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) { - padding-left: 0; + & .col { + padding: 0 8px; + } } } } diff --git a/src/components/NavigationLayout/NavigationLayout.tsx b/src/components/NavigationLayout/NavigationLayout.tsx index 4bb1eac96530..8cb536158af4 100644 --- a/src/components/NavigationLayout/NavigationLayout.tsx +++ b/src/components/NavigationLayout/NavigationLayout.tsx @@ -1,4 +1,3 @@ -import {Col, Grid, Row} from '@gravity-ui/page-constructor'; import {Icon} from 'landing-uikit'; import {useTranslation} from 'next-i18next'; import React from 'react'; @@ -7,6 +6,7 @@ import arrowIcon from '../../assets/icons/arrow.svg'; import menuCloseIcon from '../../assets/icons/menu-close.svg'; import {CONTENT_WRAPPER_ID} from '../../constants'; import {block} from '../../utils'; +import {Footer} from '../Footer/Footer'; import LibraryVersion from '../LibraryVersion/LibraryVersion'; import {Navigation} from './Navigation/Navigation'; @@ -59,66 +59,63 @@ export const NavigationLayout: React.FC<NavigationLayoutProps> = ({ return ( <div className={b()}> - <Grid className={b('layout-grid')}> - <Row> - <Col sizes={{all: 12, lg: 3}}> + <div className={b('navigation-wrap')}> + <div + tabIndex={0} + role="button" + className={b('mobile-navigation-control')} + onClick={() => { + setIsOpenMobileNavigation(true); + }} + > + <div className={b('mobile-navigation-control-label')}> + <span className={b('mobile-navigation-control-section')}> + {section.title} + </span> + <LibraryVersion id={section.id} /> + {subSection ? ( + <span className={b('mobile-navigation-control-sub-section')}> + {' '} + • {subSection.title} + </span> + ) : null} + </div> + <div className={b('mobile-navigation-control-arrow')}> + <Icon data={arrowIcon} width={10} height={6} /> + </div> + </div> + <div className={b('navigation', {'mobile-open': isOpenMobileNavigation})}> + <div className={b('mobile-navigation-header')}> + <div className={b('mobile-navigation-header-title')}>{mobileTitle}</div> <div tabIndex={0} role="button" - className={b('mobile-navigation-control')} + className={b('mobile-navigation-header-close')} onClick={() => { - setIsOpenMobileNavigation(true); + setIsOpenMobileNavigation(false); }} > - <div className={b('mobile-navigation-control-label')}> - <span className={b('mobile-navigation-control-section')}> - {section.title} - </span> - <LibraryVersion id={section.id} /> - {subSection ? ( - <span className={b('mobile-navigation-control-sub-section')}> - {' '} - • {subSection.title} - </span> - ) : null} - </div> - <div className={b('mobile-navigation-control-arrow')}> - <Icon data={arrowIcon} width={10} height={6} /> - </div> + <Icon data={menuCloseIcon} width={16} /> </div> - <div className={b('navigation', {'mobile-open': isOpenMobileNavigation})}> - <div className={b('mobile-navigation-header')}> - <div className={b('mobile-navigation-header-title')}> - {mobileTitle} - </div> - <div - tabIndex={0} - role="button" - className={b('mobile-navigation-header-close')} - onClick={() => { - setIsOpenMobileNavigation(false); - }} - > - <Icon data={menuCloseIcon} width={16} /> - </div> - </div> - <Navigation - sections={sections} - sectionId={sectionId} - subSectionId={subSectionId} - searchPlaceholder={searchPlaceholder} - emptySearchPlaceholder={ - emptySearchPlaceholder ?? t('emptySearchPlaceholder') - } - onClickOnLink={clickOnLinkHandler} - /> - </div> - </Col> - <Col sizes={{all: 12, lg: 9}}> - <div className={b('content')}>{children}</div> - </Col> - </Row> - </Grid> + </div> + <Navigation + sections={sections} + sectionId={sectionId} + subSectionId={subSectionId} + searchPlaceholder={searchPlaceholder} + emptySearchPlaceholder={ + emptySearchPlaceholder ?? t('emptySearchPlaceholder') + } + onClickOnLink={clickOnLinkHandler} + /> + </div> + </div> + <div className={b('content-wrap')}> + <div className={b('content')}> + {children} + <Footer containerClass={b('footer')} /> + </div> + </div> </div> ); }; diff --git a/src/components/NavigationLayout/SectionBlock/SectionBlock.scss b/src/components/NavigationLayout/SectionBlock/SectionBlock.scss index 7a9dfa31bf1f..728f9bfc9ac2 100644 --- a/src/components/NavigationLayout/SectionBlock/SectionBlock.scss +++ b/src/components/NavigationLayout/SectionBlock/SectionBlock.scss @@ -1,16 +1,16 @@ -@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables; +@use '../../../mixins.scss' as baseMixins; @use '../../../variables.scss'; $block: '.#{variables.$ns}navigation-layout-section-block'; #{$block} { - background: #251b25; border-radius: 12px; &__header { + position: sticky; + top: 64px; display: flex; - padding: 16px 20px; - margin-top: 16px; + padding: 14px 0 13px; font-size: 17px; line-height: 24px; font-weight: 600; @@ -18,6 +18,10 @@ $block: '.#{variables.$ns}navigation-layout-section-block'; text-decoration: none; cursor: pointer; align-items: center; + background: var(--g-color-base-modal); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + box-sizing: content-box; + &_active { background: rgba(255, 190, 92, 0.1); color: #ffbe5c; @@ -48,7 +52,6 @@ $block: '.#{variables.$ns}navigation-layout-section-block'; overflow: hidden; max-height: 0; opacity: 0; - border-top: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease-in-out; &_open { @@ -61,7 +64,6 @@ $block: '.#{variables.$ns}navigation-layout-section-block'; display: flex; align-items: center; padding: 12px 20px; - margin-top: 4px; border-radius: 12px; font-size: 15px; line-height: 20px; @@ -69,10 +71,6 @@ $block: '.#{variables.$ns}navigation-layout-section-block'; text-decoration: none; transition: background-color 0.2s ease-in-out; - &:first-child { - margin-top: 8px; - } - &:hover { background: var(--g-color-base-generic-hover); } @@ -106,4 +104,30 @@ $block: '.#{variables.$ns}navigation-layout-section-block'; align-items: center; margin-left: 8px; } + + @include baseMixins.window-breakpoint('lg') { + background: var(--g-color-base-modal); + + &__header { + position: static; + top: initial; + padding: 16px 20px; + margin-top: 16px; + background: none; + border: none; + box-sizing: inherit; + } + + &__sub-sections { + border-top: 1px solid rgba(255, 255, 255, 0.1); + } + + &__sub-section { + margin-top: 4px; + + &:first-child { + margin-top: 8px; + } + } + } } diff --git a/src/components/NavigationLayout/SectionBlock/SectionBlock.tsx b/src/components/NavigationLayout/SectionBlock/SectionBlock.tsx index 52034656e22f..3d490502683b 100644 --- a/src/components/NavigationLayout/SectionBlock/SectionBlock.tsx +++ b/src/components/NavigationLayout/SectionBlock/SectionBlock.tsx @@ -6,7 +6,7 @@ import arrowIcon from '../../../assets/icons/arrow.svg'; import soonLabelIcon from '../../../assets/icons/soon-label.svg'; import {block} from '../../../utils'; import {Link} from '../../Link'; -import {Section} from '../types'; +import {Section, SubSection} from '../types'; import './SectionBlock.scss'; @@ -29,10 +29,12 @@ export const SectionBlock: React.FC<SectionBlockProps> = ({ curSubSectionId, onClickOnLink, }) => { - let content: React.ReactNode = null; + const renderUrlSection = () => { + if (!data.url) { + return null; + } - if (data.url && (!data.subSections || data.subSections?.length === 0)) { - content = ( + return ( <Link href={data.url} className={b('header', { @@ -42,82 +44,94 @@ export const SectionBlock: React.FC<SectionBlockProps> = ({ <div className={b('title')}>{data.title}</div> </Link> ); - } else { - content = ( - <React.Fragment> + }; + + const renderHeader = () => { + return ( + <div + className={b('header', {open: isOpen})} + onClick={() => { + setIsOpen(!isOpen); + }} + > + <div className={b('title')}>{data.title}</div> + <div className={b('library-version')}> + <LibraryVersion id={data.id} /> + </div> <div - className={b('header')} - onClick={() => { - setIsOpen(!isOpen); - }} + className={b('arrow', { + open: isOpen, + })} > - <div className={b('title')}>{data.title}</div> - <div className={b('library-version')}> - <LibraryVersion id={data.id} /> - </div> + <Icon data={arrowIcon} width={10} height={6} /> + </div> + </div> + ); + }; + + const renderSubSection = (subSection: SubSection) => { + if (subSection.isComingSoon === true) { + return ( + <div key={subSection.id}> <div - className={b('arrow', { - open: isOpen, + className={b('sub-section', { + active: curSectionId === data.id && curSubSectionId === subSection.id, + disabled: subSection.isComingSoon === true, })} > - <Icon data={arrowIcon} width={10} height={6} /> + <span className={b('sub-section-text')}>{subSection.title}</span> + <span className={b('sub-section-icon')}> + <Icon data={soonLabelIcon} width={34} height={14} /> + </span> </div> </div> - <div className={b('sub-sections', {open: isOpen})}> - {data.url ? ( - <Link - key="__overview" - href={data.url} - className={b('sub-section', { - active: curSectionId === data.id && curSubSectionId === undefined, - })} - onClick={onClickOnLink} - > - Overview - </Link> - ) : null} + ); + } - {data.subSections?.map((subSection) => { - if (subSection.isComingSoon === true) { - return ( - <div key={subSection.id}> - <div - className={b('sub-section', { - active: - curSectionId === data.id && - curSubSectionId === subSection.id, - disabled: subSection.isComingSoon === true, - })} - > - <span className={b('sub-section-text')}> - {subSection.title} - </span> - <span className={b('sub-section-icon')}> - <Icon data={soonLabelIcon} width={34} height={14} /> - </span> - </div> - </div> - ); - } + return ( + <Link + key={subSection.id} + href={subSection.url} + className={b('sub-section', { + active: curSectionId === data.id && curSubSectionId === subSection.id, + })} + onClick={onClickOnLink} + > + <span className={b('sub-section-text')}>{subSection.title}</span> + </Link> + ); + }; - return ( - <Link - key={subSection.id} - href={subSection.url} - className={b('sub-section', { - active: - curSectionId === data.id && - curSubSectionId === subSection.id, - })} - onClick={onClickOnLink} - > - <span className={b('sub-section-text')}>{subSection.title}</span> - </Link> - ); - })} - </div> - </React.Fragment> + const renderSubSectionsContainer = () => { + return ( + <div className={b('sub-sections', {open: isOpen})}> + {data.url ? ( + <Link + key="__overview" + href={data.url} + className={b('sub-section', { + active: curSectionId === data.id && curSubSectionId === undefined, + })} + onClick={onClickOnLink} + > + Overview + </Link> + ) : null} + {data.subSections?.map(renderSubSection)} + </div> ); - } - return <div className={b()}>{content}</div>; + }; + + return ( + <div className={b()}> + {data.url && !data.subSections?.length ? ( + renderUrlSection() + ) : ( + <> + {renderHeader()} + {renderSubSectionsContainer()} + </> + )} + </div> + ); }; diff --git a/src/mixins.scss b/src/mixins.scss index 19792a630147..5fe6156f576d 100644 --- a/src/mixins.scss +++ b/src/mixins.scss @@ -1,3 +1,5 @@ +@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables; + @function opaque-color($desired-color, $background-color: #fff) { $r1: red($background-color); $g1: green($background-color); @@ -32,3 +34,23 @@ --g-color-private-brand-#{$alpha * 1000}-solid: #{$solid-color}; } } + +@mixin window-breakpoint($breakpoint, $mode: 'l') { + @if $mode == 'ge' { + @media (min-width: map-get(pcVariables.$gridBreakpoints, $breakpoint)) { + @content; + } + } @else if $mode == 'g' { + @media (min-width: map-get(pcVariables.$gridBreakpoints, $breakpoint) + 1) { + @content; + } + } @else if $mode == 'le' { + @media (max-width: map-get(pcVariables.$gridBreakpoints, $breakpoint)) { + @content; + } + } @else { + @media (max-width: map-get(pcVariables.$gridBreakpoints, $breakpoint) - 1) { + @content; + } + } +}