primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-29 14:14:26 +03:00
Code Issues Projects Releases Wiki Activity

Use min and max values in storybook breakpoints (#1736)

Browse Source
This commit is contained in:
Vinicius Depizzol 2021-11-02 13:52:31 -07:00 committed by GitHub
parent e754300989
commit 9fe621fbb7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
docs/.storybook/preview.js
View File

@ -4,33 +4,75 @@ import '../../src/base/index.scss'
import renderToHTML from '../src/stories/helpers/code-snippet-html-helper' import renderToHTML from '../src/stories/helpers/code-snippet-html-helper'
const customViewports = { const customViewports = {
widthSM: { minXS: {
name: 'width-sm', name: 'XS (min)',
styles: {
width: '375px',
height: '100%'
}
},
maxXS: {
name: 'XS (max)',
styles: {
width: '543px',
height: '100%'
}
},
minSM: {
name: 'SM (min)',
styles: { styles: {
width: '544px', width: '544px',
height: '100%' height: '100%'
} }
}, },
widthMD: { maxSM: {
name: 'width-md', name: 'SM (max)',
styles: {
width: '767px',
height: '100%'
}
},
minMD: {
name: 'MD (min)',
styles: { styles: {
width: '768px', width: '768px',
height: '100%' height: '100%'
} }
}, },
widthLG: { maxMD: {
name: 'width-lg', name: 'MD (max)',
styles: {
width: '1011px',
height: '100%'
}
},
minLG: {
name: 'LG (min)',
styles: { styles: {
width: '1012px', width: '1012px',
height: '100%' height: '100%'
} }
}, },
widthXL: { maxLG: {
name: 'width-xl', name: 'LG (max)',
styles: {
width: '1279px',
height: '100%'
}
},
minXL: {
name: 'XL (min)',
styles: { styles: {
width: '1280px', width: '1280px',
height: '100%' height: '100%'
} }
},
medXL: {
name: 'XL (med)',
styles: {
width: '1440px',
height: '100%'
}
} }
} }