import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-dOU5q7Ak.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,hr:`hr`,p:`p`,pre:`pre`,strong:`strong`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Custom Components/Less.js/Breakpoints`}),`
`,(0,c.jsx)(t.h1,{id:`lessjs-breakpoints`,children:`Less.js: Breakpoints`}),`
`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.strong,{children:`Note:`}),` Storybook renders this page inside of an `,(0,c.jsx)(t.code,{children:`iframe`}),`! The width taken into account by the media query is that of the `,(0,c.jsx)(t.code,{children:`iframe`}),` and not the full viewport window. Hide Storybook's navigation sidebar (or pop out this page) to preview the media query against the full browser width.`]}),`
`,(0,c.jsx)(t.hr,{}),`
`,(0,c.jsxs)(t.p,{children:[`Import the `,(0,c.jsx)(t.code,{children:`breakpoints.less`}),` file from the `,(0,c.jsx)(t.code,{children:`@preply/ds-web-core`}),` package and use the breakpoint name as a mixin:`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`@import '@preply/ds-web-core/dist/generated/breakpoints.less';

.container {
    display: flex;
    flex-direction: column;

    @media @medium-l {
        flex-direction: row;
    }
}
`})}),`
`,(0,c.jsxs)(t.p,{children:[`Alternatively you can use the `,(0,c.jsx)(t.code,{children:`@breakpoints`}),` variable to access the pixel values directly.`]}),`
`,(0,c.jsxs)(t.p,{children:[`We recommend using only `,(0,c.jsx)(t.code,{children:`min-width`}),` media queries in order to structure your code with a "mobile first" approach.`]}),`
`,(0,c.jsxs)(t.p,{children:[`Check out this `,(0,c.jsx)(t.a,{href:`https://medium.com/swlh/use-min-width-not-max-width-in-your-css-e6898fcf6a78`,rel:`nofollow`,children:`small article (3 min read)`}),` for a quick explanation why.`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`@import '@preply/ds-web-core/dist/generated/breakpoints.less';

.container {
    display: flex;
    flex-direction: column;

    @media (min-width: @breakpoints[medium-l]) {
        flex-direction: row;
    }
}
`})})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};