diff --git a/src/cxs.js b/src/cxs.js index 46dc0f54f..991d729a0 100644 --- a/src/cxs.js +++ b/src/cxs.js @@ -1,6 +1,6 @@ // @flow import cxs from 'cxs/monolithic' -cxs.prefix('xnr_') +cxs.prefix('gym_') export default cxs diff --git a/src/defaults.js b/src/defaults.js index db899c693..886233277 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -5,24 +5,40 @@ export default { columns: 12, // number of columns used in the layout displayAliases: { // aliases used for the different display breakpoints: - small: { - // - "small" alias used when width is less than 600px - maxWidth: '599px', - }, - medium: { - // - "medium" alias used when width is between 600px and 900px - minWidth: '600px', - maxWidth: '899px', - }, - large: { - // - "large" alias used when width is equal or greater than 900px - minWidth: '900px', - }, + small: [ + { + // - "small" alias used when width is less than 600px + maxWidth: '599px', + }, + { + maxDeviceWidth: '599px', + }, + ], + medium: [ + { + // - "medium" alias used when width is between 600px and 900px + minWidth: '600px', + maxWidth: '899px', + }, + { + minDeviceWidth: '600px', + maxDeviceWidth: '899px', + }, + ], + large: [ + { + // - "large" alias used when width is equal or greater than 900px + minWidth: '900px', + }, + { + minDeviceWidth: '900px', + }, + ], }, fallbackDisplayKey: 'default', // key to use when a display alias is omitted or non matching gutter: 3, // value (in base units) that separates columns horizontally maxPageWidth: 153, // maximum page width (in base units) 153 * base (8px) = 1224px - minPageWidth: 50, // minimum page width (in base units) 50 * base (8px) = 400px + minPageWidth: 40, // minimum page width (in base units) 40 * base (8px) = 320px = iPhone5 screen width pageMargin: { // page margins (in base units) for each display breakpoint small: 1, diff --git a/src/dev/dev.styles.js b/src/dev/dev.styles.js index a5e0de4f5..9ac932c43 100644 --- a/src/dev/dev.styles.js +++ b/src/dev/dev.styles.js @@ -31,12 +31,12 @@ function aliasMarginQuery(query, padding) { } return { leftMargin: { - [`@media screen and ${query}`]: { + [query]: { width: `${padding}px`, }, }, rightMargin: { - [`@media screen and ${query}`]: { + [query]: { width: `${padding}px`, }, }, diff --git a/src/errors/errors.js b/src/errors/errors.js index aa9c27dad..46b6f287d 100644 --- a/src/errors/errors.js +++ b/src/errors/errors.js @@ -13,11 +13,6 @@ const addError = process.env.NODE_ENV === 'production' ? addProdError : addDevError const errors = {} -addError( - errors, - 'INVALIDMEDIAKEY', - `Specified query is invalid. Only the following keys are allowed: "minWidth", "maxWidth", "minHeight", "maxHeight", "aspectRatio" and "orientation".` -) addError( errors, 'INVALIDSPACING', diff --git a/src/root/root.styles.js b/src/root/root.styles.js index a70a9db97..929143cd5 100644 --- a/src/root/root.styles.js +++ b/src/root/root.styles.js @@ -24,10 +24,10 @@ function addRootPadding(query, padding) { function addChildPadding(query, padding) { return { root: { - [`@media screen and ${query}`]: smallRoot, + [query]: smallRoot, }, child: { - [`@media screen and ${query}`]: { + [query]: { flexShrink: 0, width: `calc(100% + ${padding}px)`, }, diff --git a/src/types.js b/src/types.js index 2acb2b621..5e3874d0e 100644 --- a/src/types.js +++ b/src/types.js @@ -40,18 +40,12 @@ export type SpacingAliases = { +[spacingAlias: string]: number, } -type ResolutionKeys = - | 'minWidth' - | 'maxWidth' - | 'minHeight' - | 'maxHeight' - | 'aspectRatio' - | 'orientation' +type DisplayProperties = { + +[resolutionKey: string]: string, +} export type DisplayAliases = { - +[displayAlias: string]: { - +[ResolutionKeys]: string, - }, + +[displayAlias: string]: DisplayProperties | Array, } export type ConfigProviderContext = { diff --git a/src/utils/index.js b/src/utils/index.js index dc206b0b6..4f5e1d31c 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -19,6 +19,10 @@ export const splitPattern = /(?:(?:\s+)?,(?:\s+)?|\s+)/ export const noop: Noop = () => null export const times = (n: number) => new Array(n).fill(undefined).map((val, index) => index) +export const kebabCase = (str: string) => + str + .replace(/^[A-Z]/, match => match.toLowerCase()) + .replace(/[A-Z]/g, match => `-${match.toLowerCase()}`) export function validateSpacingProps(props: SpacingProps) { if (process.env.NODE_ENV === 'production') { diff --git a/src/utils/utils.spec.js b/src/utils/utils.spec.js index bed9724ca..51ca42df3 100644 --- a/src/utils/utils.spec.js +++ b/src/utils/utils.spec.js @@ -6,6 +6,7 @@ import { getCSS, getValue, getValues, + kebabCase, parseSpacing, replaceSpacingAliases, toCXS, @@ -353,3 +354,27 @@ describe('accumulateOver', () => { }) }) }) + +describe('kebabCase', () => { + it('should work with empty strings', () => { + expect(kebabCase('')).toEqual('') + }) + + it('should not modify strings without upper case characters', () => { + const sample = 'this-is-a-test1#' + + expect(kebabCase(sample)).toEqual(sample) + }) + + it('should lower case upper case letters and add a preceding dash', () => { + const sample = 'thisWillHaveDashes' + + expect(kebabCase(sample)).toEqual('this-will-have-dashes') + }) + + it('should not add an additional dash if the first letter is capitalize', () => { + const sample = 'Lowercase' + + expect(kebabCase(sample)).toEqual('lowercase') + }) +}) diff --git a/src/withResolution/withResolution.logic.js b/src/withResolution/withResolution.logic.js index 9dc6d98ef..575adb6f8 100644 --- a/src/withResolution/withResolution.logic.js +++ b/src/withResolution/withResolution.logic.js @@ -1,8 +1,6 @@ // @flow import type { DisplayValues, DisplayAliases } from '../types' -import { splitPattern } from '../utils' -import log from '../log' -import errors from '../errors' +import { splitPattern, kebabCase } from '../utils' import defaults from '../defaults' export type ShouldShow = { [string]: boolean } @@ -59,31 +57,25 @@ export function getSingleResolutionProps({ return propsCopy } -const queriesMap = { - minWidth: 'min-width', - maxWidth: 'max-width', - minHeight: 'min-height', - maxHeight: 'max-height', - aspectRatio: 'aspect-ratio', - orientation: 'orientation', -} - export function getMediaQuery( range: string, - displayAliases: DisplayAliases + displayAliases: DisplayAliases, + prefix: string = '@media ' ): string { - const response = [] - Object.keys(displayAliases[range]).forEach(key => { - if (key in queriesMap) { - const value = displayAliases[range][key] - - response.push(`(${queriesMap[key]}: ${value})`) - } else { - log.error(errors.INVALIDMEDIAKEY, `"${key}" used`) - } - }) - - return response.join(' and ') + const displayPropertiesArray = + displayAliases[range] instanceof Array + ? displayAliases[range] + : [displayAliases[range]] + const response = displayPropertiesArray + .map( + displayProperties => + `${prefix}${Object.keys(displayProperties) + .map(key => `(${kebabCase(key)}: ${displayProperties[key]})`) + .join(' and ')}` + ) + .join(', ') + + return response } export function getMediaQueries( @@ -94,7 +86,7 @@ export function getMediaQueries( return showArray .filter(range => range in displayAliases) - .map(range => [range, getMediaQuery(range, displayAliases)]) + .map(range => [range, getMediaQuery(range, displayAliases, '')]) .reduce((acc, [range, query]) => { if (query) { return { diff --git a/src/withResolution/withResolution.logic.spec.js b/src/withResolution/withResolution.logic.spec.js index 18ccd7c71..3350003d3 100644 --- a/src/withResolution/withResolution.logic.spec.js +++ b/src/withResolution/withResolution.logic.spec.js @@ -1,5 +1,6 @@ import { getMediaQueries, + getMediaQuery, getSingleResolutionProps, checkShouldShow, } from './withResolution.logic' @@ -16,6 +17,17 @@ describe('getMediaQueries', () => { expect(out).toEqual({ test: '(min-width: 1px) and (max-width: 2px)' }) }) + it('should return the same output when using array syntax', () => { + const test = { + minWidth: '1px', + maxWidth: '2px', + } + const out1 = getMediaQueries('test', { test }) + const out2 = getMediaQueries('test', { test: [test] }) + + expect(out1).toEqual(out2) + }) + it('should return a max value only when no min value is provided', () => { const out = getMediaQueries('test', { test: { @@ -26,6 +38,21 @@ describe('getMediaQueries', () => { expect(out).toEqual({ test: '(max-width: 2px)' }) }) + it('should concatenate multiple queries with commas', () => { + const out = getMediaQueries('test', { + test: [ + { + maxWidth: '2px', + }, + { + minWidth: '1px', + }, + ], + }) + + expect(out).toEqual({ test: '(max-width: 2px), (min-width: 1px)' }) + }) + it('should return a min value only when no max value is provided', () => { const out = getMediaQueries('test', { test: { @@ -36,14 +63,52 @@ describe('getMediaQueries', () => { expect(out).toEqual({ test: '(min-width: 1px)' }) }) - it('should return an empty string if an invalid value is passed', () => { + it('should kebab case keys', () => { const out = getMediaQueries('test2', { - test: { + test2: { + MaxAspectRatio: '1/2', + }, + }) + + expect(out).toEqual({ test2: '(max-aspect-ratio: 1/2)' }) + }) + + it('should include invalid keys', () => { + const out = getMediaQueries('test2', { + test2: { invalidValue: 'meow', }, }) - expect(out).toEqual({}) + expect(out).toEqual({ test2: '(invalid-value: meow)' }) + }) +}) + +describe('getMediaQuery', () => { + let sampleDisplayAliases + + beforeEach(() => { + sampleDisplayAliases = { + test: [{ something: '3px' }, { somethingElse: '4px' }], + } + }) + + it('should include the prefix on every response', () => { + const out = getMediaQuery('test', sampleDisplayAliases, 'prefix ') + + expect(out).toBe('prefix (something: 3px), prefix (something-else: 4px)') + }) + + it('should default to "@media " prefix', () => { + const out = getMediaQuery('test', sampleDisplayAliases) + + expect(out).toBe('@media (something: 3px), @media (something-else: 4px)') + }) + + it('should remove prefix when "" is set', () => { + const out = getMediaQuery('test', sampleDisplayAliases, '') + + expect(out).toBe('(something: 3px), (something-else: 4px)') }) }) diff --git a/storybook/stories/configProvider/columns.js b/storybook/stories/configProvider/columns.js index 4f69917c1..85f4ff017 100644 --- a/storybook/stories/configProvider/columns.js +++ b/storybook/stories/configProvider/columns.js @@ -5,7 +5,7 @@ import { number } from '@storybook/addon-knobs' import { ConfigProvider, Grid } from 'gymnast' import { colors } from '../../shared' -export default function() { +export default () => { const columns = number('Columns', 10, { range: true, min: 1, max: 24 }) const items = number('Items', 20, { range: true, min: 1, max: 48 }) diff --git a/storybook/stories/configProvider/displayAliases.js b/storybook/stories/configProvider/displayAliases.js new file mode 100644 index 000000000..29ee815a0 --- /dev/null +++ b/storybook/stories/configProvider/displayAliases.js @@ -0,0 +1,38 @@ +// @flow +import * as React from 'react' +import { ConfigProvider, Grid } from 'gymnast' +import { colors } from '../../shared' + +export default () => { + const displayAliases = { + test: { + minWidth: '351px', + maxWidth: '600px', + }, + test2: [ + { + maxWidth: '350px', + }, + { + minWidth: '601px', + }, + ], + } + + return ( + + + + + I am only visible between 150-600px + + + + + I am visible all other times! + + + + + ) +} diff --git a/storybook/stories/configProvider/displayAliases.md b/storybook/stories/configProvider/displayAliases.md new file mode 100644 index 000000000..89eb19714 --- /dev/null +++ b/storybook/stories/configProvider/displayAliases.md @@ -0,0 +1,38 @@ +`displayAliases` is an object that contains all aliases for media queries. Each one of them can either be an object or an array of objects with a format that could look like: + +```js +{ + tiny: { + minWidth: '30px' + } +} +``` + +This is equivalent to + +```js +{ + tiny: [{ + minWidth: '30px' + }] +} +``` + +A more complex example could look like: + +```js +{ + small: [{ + maxWidth: '320px' + }, { + orientation: 'portrait' + }], + medium: [{ + minWidth: '321px' + }, { + orientation: 'landscape' + }] +} +``` + +When placing properties within the same object, they will both be required. E.g. `{ maxWidth: '320px', orientation: 'portrait' }` applies when both, the device is oriented as portrait _and_ the page width is `320px` or less. When they are placed as different array elements, they apply when either is true. E.g. in the example above, `small` size applies with the device is oriented as portrait _or_ the page width is `320px` or less. diff --git a/storybook/stories/configProvider/gutter.js b/storybook/stories/configProvider/gutter.js index 78d615669..338c8f1c4 100644 --- a/storybook/stories/configProvider/gutter.js +++ b/storybook/stories/configProvider/gutter.js @@ -5,7 +5,7 @@ import { number } from '@storybook/addon-knobs' import { ConfigProvider, Grid, Col } from 'gymnast' import { colors } from '../../shared' -export default function() { +export default () => { const gutter = number('Gutter', 2, { range: true, min: 1, max: 24 }) const verticalGutter = number('Vertical Gutter', 2, { range: true, diff --git a/storybook/stories/configProvider/pageWidth.js b/storybook/stories/configProvider/pageWidth.js index 3ae8e47b5..26b43ea0b 100644 --- a/storybook/stories/configProvider/pageWidth.js +++ b/storybook/stories/configProvider/pageWidth.js @@ -4,7 +4,7 @@ import { number } from '@storybook/addon-knobs' import { ConfigProvider, Col, Root, Layout } from 'gymnast' import { colors } from '../../shared' -export default function() { +export default () => { const max = number('Max Page Width', 100, { range: true, min: 50, max: 200 }) const min = number('Min Page Width', 5, { range: true, min: 0, max: 50 }) const pageMargin = number('Page Margin', 6, { range: true, min: 0, max: 10 }) diff --git a/storybook/stories/configProvider/spacingAliases.js b/storybook/stories/configProvider/spacingAliases.js index 2208aa9f7..b0915f657 100644 --- a/storybook/stories/configProvider/spacingAliases.js +++ b/storybook/stories/configProvider/spacingAliases.js @@ -4,7 +4,7 @@ import { number } from '@storybook/addon-knobs' import { ConfigProvider, Grid } from 'gymnast' import { colors } from '../../shared' -export default function() { +export default () => { const base = number('base', 24, { range: true, min: 8, max: 24, step: 8 }) const spacingAliases = { XS: 0.5, diff --git a/test/__snapshots__/storyshots.spec.js.snap b/test/__snapshots__/storyshots.spec.js.snap index f7b3536a3..991eb671c 100644 --- a/test/__snapshots__/storyshots.spec.js.snap +++ b/test/__snapshots__/storyshots.spec.js.snap @@ -22,7 +22,7 @@ exports[`Storyshots Components.Card Base 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -44,16 +44,16 @@ exports[`Storyshots Components.Card Base 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -82,7 +82,7 @@ exports[`Storyshots Components.Card Base 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -848,7 +848,7 @@ exports[`Storyshots Components.Card Composite 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -870,16 +870,16 @@ exports[`Storyshots Components.Card Composite 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -908,7 +908,7 @@ exports[`Storyshots Components.Card Composite 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -2382,7 +2382,7 @@ exports[`Storyshots Components.Card Filter 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -2404,16 +2404,16 @@ exports[`Storyshots Components.Card Filter 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -2442,7 +2442,7 @@ exports[`Storyshots Components.Card Filter 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -3364,7 +3364,7 @@ exports[`Storyshots Components.Card Profile 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -3386,16 +3386,16 @@ exports[`Storyshots Components.Card Profile 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -3424,7 +3424,7 @@ exports[`Storyshots Components.Card Profile 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -4067,7 +4067,7 @@ exports[`Storyshots Components.Header App 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -4094,16 +4094,16 @@ exports[`Storyshots Components.Header App 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -4137,7 +4137,7 @@ exports[`Storyshots Components.Header App 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -4515,7 +4515,7 @@ exports[`Storyshots Components.Header Basic 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -4537,16 +4537,16 @@ exports[`Storyshots Components.Header Basic 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -4575,7 +4575,7 @@ exports[`Storyshots Components.Header Basic 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -5359,7 +5359,7 @@ exports[`Storyshots Components.Pagination Pagination 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -5381,16 +5381,16 @@ exports[`Storyshots Components.Pagination Pagination 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -5419,7 +5419,7 @@ exports[`Storyshots Components.Pagination Pagination 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -6568,7 +6568,7 @@ exports[`Storyshots Components.Search Nav 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -6599,16 +6599,16 @@ exports[`Storyshots Components.Search Nav 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -6637,7 +6637,7 @@ exports[`Storyshots Components.Search Nav 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -9598,7 +9598,7 @@ exports[`Storyshots Config Provider Page Width 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -9620,16 +9620,16 @@ exports[`Storyshots Config Provider Page Width 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -9658,7 +9658,7 @@ exports[`Storyshots Config Provider Page Width 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -9948,7 +9948,7 @@ exports[`Storyshots Examples Cards 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -9979,7 +9979,7 @@ exports[`Storyshots Examples Cards 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -10003,7 +10003,7 @@ exports[`Storyshots Examples Cards 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -10030,16 +10030,16 @@ exports[`Storyshots Examples Cards 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -10068,7 +10068,7 @@ exports[`Storyshots Examples Cards 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -10123,7 +10123,7 @@ exports[`Storyshots Examples Cards 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -10151,16 +10151,16 @@ exports[`Storyshots Examples Cards 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -10189,7 +10189,7 @@ exports[`Storyshots Examples Cards 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -10596,7 +10596,7 @@ exports[`Storyshots Examples Cards 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -10620,7 +10620,7 @@ exports[`Storyshots Examples Cards 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -10642,16 +10642,16 @@ exports[`Storyshots Examples Cards 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -10680,7 +10680,7 @@ exports[`Storyshots Examples Cards 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -11429,7 +11429,7 @@ exports[`Storyshots Examples Cards 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -11456,16 +11456,16 @@ exports[`Storyshots Examples Cards 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -11494,7 +11494,7 @@ exports[`Storyshots Examples Cards 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -11560,7 +11560,7 @@ exports[`Storyshots Examples Holy Grail 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -11591,7 +11591,7 @@ exports[`Storyshots Examples Holy Grail 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -11618,16 +11618,16 @@ exports[`Storyshots Examples Holy Grail 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -11656,7 +11656,7 @@ exports[`Storyshots Examples Holy Grail 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -11711,7 +11711,7 @@ exports[`Storyshots Examples Holy Grail 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -11733,16 +11733,16 @@ exports[`Storyshots Examples Holy Grail 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -11771,7 +11771,7 @@ exports[`Storyshots Examples Holy Grail 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -11986,7 +11986,7 @@ exports[`Storyshots Examples Holy Grail 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -12013,16 +12013,16 @@ exports[`Storyshots Examples Holy Grail 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -12051,7 +12051,7 @@ exports[`Storyshots Examples Holy Grail 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -12116,7 +12116,7 @@ exports[`Storyshots Examples Report 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -12147,7 +12147,7 @@ exports[`Storyshots Examples Report 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -12171,7 +12171,7 @@ exports[`Storyshots Examples Report 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -12198,16 +12198,16 @@ exports[`Storyshots Examples Report 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -12236,7 +12236,7 @@ exports[`Storyshots Examples Report 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -12291,7 +12291,7 @@ exports[`Storyshots Examples Report 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -12318,16 +12318,16 @@ exports[`Storyshots Examples Report 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -12356,7 +12356,7 @@ exports[`Storyshots Examples Report 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -12678,7 +12678,7 @@ exports[`Storyshots Examples Report 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -12702,7 +12702,7 @@ exports[`Storyshots Examples Report 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -12729,16 +12729,16 @@ exports[`Storyshots Examples Report 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -12767,7 +12767,7 @@ exports[`Storyshots Examples Report 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -13808,7 +13808,7 @@ exports[`Storyshots Examples Report 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -13835,16 +13835,16 @@ exports[`Storyshots Examples Report 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -13873,7 +13873,7 @@ exports[`Storyshots Examples Report 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -13939,7 +13939,7 @@ exports[`Storyshots Examples Search 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -13970,7 +13970,7 @@ exports[`Storyshots Examples Search 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -13997,16 +13997,16 @@ exports[`Storyshots Examples Search 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -14040,7 +14040,7 @@ exports[`Storyshots Examples Search 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -14409,7 +14409,7 @@ exports[`Storyshots Examples Search 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -14437,7 +14437,7 @@ exports[`Storyshots Examples Search 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -14468,16 +14468,16 @@ exports[`Storyshots Examples Search 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -14506,7 +14506,7 @@ exports[`Storyshots Examples Search 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -14812,7 +14812,7 @@ exports[`Storyshots Examples Search 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -14839,16 +14839,16 @@ exports[`Storyshots Examples Search 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -14877,7 +14877,7 @@ exports[`Storyshots Examples Search 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -17041,7 +17041,7 @@ exports[`Storyshots Examples Search 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -17068,16 +17068,16 @@ exports[`Storyshots Examples Search 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -17106,7 +17106,7 @@ exports[`Storyshots Examples Search 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -17172,7 +17172,7 @@ exports[`Storyshots Examples Two Sections 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -17203,7 +17203,7 @@ exports[`Storyshots Examples Two Sections 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -17230,16 +17230,16 @@ exports[`Storyshots Examples Two Sections 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -17268,7 +17268,7 @@ exports[`Storyshots Examples Two Sections 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -17323,7 +17323,7 @@ exports[`Storyshots Examples Two Sections 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -17347,7 +17347,7 @@ exports[`Storyshots Examples Two Sections 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -17374,16 +17374,16 @@ exports[`Storyshots Examples Two Sections 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -17412,7 +17412,7 @@ exports[`Storyshots Examples Two Sections 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -17527,7 +17527,7 @@ exports[`Storyshots Examples Two Sections 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -17549,16 +17549,16 @@ exports[`Storyshots Examples Two Sections 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -17587,7 +17587,7 @@ exports[`Storyshots Examples Two Sections 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -17694,7 +17694,7 @@ exports[`Storyshots Examples Two Sections 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -17721,16 +17721,16 @@ exports[`Storyshots Examples Two Sections 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -17759,7 +17759,7 @@ exports[`Storyshots Examples Two Sections 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -17825,7 +17825,7 @@ exports[`Storyshots Grid Align 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -17847,16 +17847,16 @@ exports[`Storyshots Grid Align 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -17885,7 +17885,7 @@ exports[`Storyshots Grid Align 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -18612,7 +18612,7 @@ exports[`Storyshots Grid Autoflow 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -18634,16 +18634,16 @@ exports[`Storyshots Grid Autoflow 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -18672,7 +18672,7 @@ exports[`Storyshots Grid Autoflow 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -19357,7 +19357,7 @@ exports[`Storyshots Grid Fit 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -19379,16 +19379,16 @@ exports[`Storyshots Grid Fit 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -19417,7 +19417,7 @@ exports[`Storyshots Grid Fit 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -19592,7 +19592,7 @@ exports[`Storyshots Grid Format 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -19614,16 +19614,16 @@ exports[`Storyshots Grid Format 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -19652,7 +19652,7 @@ exports[`Storyshots Grid Format 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -21009,7 +21009,7 @@ exports[`Storyshots Grid Fraction 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -21031,16 +21031,16 @@ exports[`Storyshots Grid Fraction 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -21069,7 +21069,7 @@ exports[`Storyshots Grid Fraction 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -24118,7 +24118,7 @@ exports[`Storyshots Grid Justify 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -24140,16 +24140,16 @@ exports[`Storyshots Grid Justify 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -24178,7 +24178,7 @@ exports[`Storyshots Grid Justify 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -24636,7 +24636,7 @@ exports[`Storyshots Grid Margin 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -24658,16 +24658,16 @@ exports[`Storyshots Grid Margin 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -24696,7 +24696,7 @@ exports[`Storyshots Grid Margin 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -25821,7 +25821,7 @@ exports[`Storyshots Grid Nested 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -25843,16 +25843,16 @@ exports[`Storyshots Grid Nested 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -25881,7 +25881,7 @@ exports[`Storyshots Grid Nested 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -26548,7 +26548,7 @@ exports[`Storyshots Grid Offset 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -26570,16 +26570,16 @@ exports[`Storyshots Grid Offset 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -26608,7 +26608,7 @@ exports[`Storyshots Grid Offset 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -27752,7 +27752,7 @@ exports[`Storyshots Grid Padding 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -27774,16 +27774,16 @@ exports[`Storyshots Grid Padding 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -27812,7 +27812,7 @@ exports[`Storyshots Grid Padding 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -29091,7 +29091,7 @@ exports[`Storyshots Grid Sizing 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -29113,16 +29113,16 @@ exports[`Storyshots Grid Sizing 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -29151,7 +29151,7 @@ exports[`Storyshots Grid Sizing 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -31133,7 +31133,7 @@ exports[`Storyshots Grid Stretch 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -31155,16 +31155,16 @@ exports[`Storyshots Grid Stretch 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -31197,7 +31197,7 @@ exports[`Storyshots Grid Stretch 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -31571,7 +31571,7 @@ exports[`Storyshots Layout Auto 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -31600,7 +31600,7 @@ exports[`Storyshots Layout Auto 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -31627,16 +31627,16 @@ exports[`Storyshots Layout Auto 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -31665,7 +31665,7 @@ exports[`Storyshots Layout Auto 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -31752,7 +31752,7 @@ exports[`Storyshots Layout Default 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -31781,7 +31781,7 @@ exports[`Storyshots Layout Default 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -31803,16 +31803,16 @@ exports[`Storyshots Layout Default 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -31841,7 +31841,7 @@ exports[`Storyshots Layout Default 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -31921,7 +31921,7 @@ exports[`Storyshots Layout Default 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -31943,16 +31943,16 @@ exports[`Storyshots Layout Default 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -31981,7 +31981,7 @@ exports[`Storyshots Layout Default 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -32061,7 +32061,7 @@ exports[`Storyshots Layout Default 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -32083,16 +32083,16 @@ exports[`Storyshots Layout Default 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -32121,7 +32121,7 @@ exports[`Storyshots Layout Default 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -32201,7 +32201,7 @@ exports[`Storyshots Layout Default 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -32223,16 +32223,16 @@ exports[`Storyshots Layout Default 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -32261,7 +32261,7 @@ exports[`Storyshots Layout Default 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -32351,7 +32351,7 @@ exports[`Storyshots Layout Fixed 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -32382,7 +32382,7 @@ exports[`Storyshots Layout Fixed 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -32409,16 +32409,16 @@ exports[`Storyshots Layout Fixed 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -32447,7 +32447,7 @@ exports[`Storyshots Layout Fixed 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -32511,16 +32511,16 @@ exports[`Storyshots Layout Margin 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -32549,7 +32549,7 @@ exports[`Storyshots Layout Margin 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -32574,7 +32574,7 @@ exports[`Storyshots Layout Margin 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -32638,7 +32638,7 @@ exports[`Storyshots Layout Padding 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -32660,16 +32660,16 @@ exports[`Storyshots Layout Padding 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -32698,7 +32698,7 @@ exports[`Storyshots Layout Padding 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -32748,7 +32748,7 @@ exports[`Storyshots Layout Padding 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -32837,7 +32837,7 @@ exports[`Storyshots Layout Padding 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -32930,7 +32930,7 @@ exports[`Storyshots Layout Padding 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -33023,7 +33023,7 @@ exports[`Storyshots Layout Padding 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -33099,7 +33099,7 @@ exports[`Storyshots Layout Parent 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -33126,16 +33126,16 @@ exports[`Storyshots Layout Parent 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -33164,7 +33164,7 @@ exports[`Storyshots Layout Parent 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -33251,7 +33251,7 @@ exports[`Storyshots Layout Stack 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -33275,7 +33275,7 @@ exports[`Storyshots Layout Stack 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -33297,16 +33297,16 @@ exports[`Storyshots Layout Stack 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -33335,7 +33335,7 @@ exports[`Storyshots Layout Stack 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } @@ -33397,7 +33397,7 @@ exports[`Storyshots Layout Stack 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 400px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -33419,16 +33419,16 @@ exports[`Storyshots Layout Stack 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { overflow: hidden; paddingLeft: 0; paddingRight: 0 }; - @media screen and (min-width: 600px) and (max-width: 899px): { + @media screen and @media (min-width: 600px) and (max-width: 899px); @media (min-device-width: 600px) and (max-device-width: 899px): { paddingLeft: 36px; paddingRight: 36px }; - @media screen and (min-width: 900px): { + @media screen and @media (min-width: 900px); @media (min-device-width: 900px): { paddingLeft: 36px; paddingRight: 36px } @@ -33462,7 +33462,7 @@ exports[`Storyshots Layout Stack 1`] = ` }}) cxs({ - @media screen and (max-width: 599px): { + @media (max-width: 599px); @media (max-device-width: 599px): { flexShrink: 0; width: calc(100% + 8px) } diff --git a/test/e2e/__snapshots__/gymnast.spec.js.snap b/test/e2e/__snapshots__/gymnast.spec.js.snap index 6830358cd..a4919a9c6 100644 --- a/test/e2e/__snapshots__/gymnast.spec.js.snap +++ b/test/e2e/__snapshots__/gymnast.spec.js.snap @@ -15,21 +15,37 @@ Object { "base": 8, "columns": 12, "displayAliases": Object { - "large": Object { - "minWidth": "900px", - }, - "medium": Object { - "maxWidth": "899px", - "minWidth": "600px", - }, - "small": Object { - "maxWidth": "599px", - }, + "large": Array [ + Object { + "minWidth": "900px", + }, + Object { + "minDeviceWidth": "900px", + }, + ], + "medium": Array [ + Object { + "maxWidth": "899px", + "minWidth": "600px", + }, + Object { + "maxDeviceWidth": "899px", + "minDeviceWidth": "600px", + }, + ], + "small": Array [ + Object { + "maxWidth": "599px", + }, + Object { + "maxDeviceWidth": "599px", + }, + ], }, "fallbackDisplayKey": "default", "gutter": 3, "maxPageWidth": 153, - "minPageWidth": 50, + "minPageWidth": 40, "pageMargin": Object { "large": 6, "medium": 6,