From 181d2a9885e28bd00a78d7a2a2009f1037b2307c Mon Sep 17 00:00:00 2001 From: plouc Date: Fri, 28 Apr 2023 18:20:55 +0900 Subject: [PATCH] feat(website): add missing BoxPlot properties documentation --- website/src/@types/file_types.d.ts | 9 + website/src/components/icons/BoxPlotIcon.tsx | 2 +- .../src/data/components/boxplot/generator.ts | 15 + website/src/data/components/boxplot/mapper.ts | 14 + website/src/data/components/boxplot/props.ts | 262 ++- website/src/pages/boxplot/index.tsx | 114 +- website/src/styles/icons.css | 1601 +++++++++-------- 7 files changed, 1103 insertions(+), 914 deletions(-) create mode 100644 website/src/data/components/boxplot/generator.ts create mode 100644 website/src/data/components/boxplot/mapper.ts diff --git a/website/src/@types/file_types.d.ts b/website/src/@types/file_types.d.ts index 96576d8f1..47049a68f 100644 --- a/website/src/@types/file_types.d.ts +++ b/website/src/@types/file_types.d.ts @@ -24,6 +24,15 @@ declare module '*bar/meta.yml' { export default meta } +declare module '*boxplot/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + BoxPlot: ChartMeta + } + + export default meta +} + declare module '*bullet/meta.yml' { const meta: { flavors: ChartMetaFlavors diff --git a/website/src/components/icons/BoxPlotIcon.tsx b/website/src/components/icons/BoxPlotIcon.tsx index fdf9c3b93..eed95828e 100644 --- a/website/src/components/icons/BoxPlotIcon.tsx +++ b/website/src/components/icons/BoxPlotIcon.tsx @@ -58,7 +58,7 @@ const chartProps: BoxPlotSvgProps = { ], medianWidth: 2, whiskerWidth: 3, - whiskerEndSize: .6, + whiskerEndSize: 0.6, borderRadius: 2, isInteractive: false, animate: false, diff --git a/website/src/data/components/boxplot/generator.ts b/website/src/data/components/boxplot/generator.ts new file mode 100644 index 000000000..3c9e72191 --- /dev/null +++ b/website/src/data/components/boxplot/generator.ts @@ -0,0 +1,15 @@ +import { generateBoxPlotData } from '@nivo/generators' + +export const generateLightDataSet = () => + generateBoxPlotData([ + { group: 'Alpha', subgroup: 'A', mu: 5, sd: 1, n: 20 }, + { group: 'Alpha', subgroup: 'B', mu: 6, sd: 1, n: 20 }, + { group: 'Beta', subgroup: 'A', mu: 8, sd: 1.4, n: 20 }, + { group: 'Beta', subgroup: 'B', mu: 7.5, sd: 1.4, n: 20 }, + { group: 'Gamma', subgroup: 'A', mu: 5, sd: 1, n: 20 }, + { group: 'Gamma', subgroup: 'B', mu: 7.2, sd: 1.8, n: 20 }, + { group: 'Delta', subgroup: 'A', mu: 5, sd: 1, n: 20 }, + { group: 'Delta', subgroup: 'B', mu: 6, sd: 1, n: 20 }, + { group: 'Epsilon', subgroup: 'A', mu: 5, sd: 1.4, n: 20 }, + { group: 'Epsilon', subgroup: 'B', mu: 6, sd: 3, n: 20 }, + ]) diff --git a/website/src/data/components/boxplot/mapper.ts b/website/src/data/components/boxplot/mapper.ts new file mode 100644 index 000000000..744c870cd --- /dev/null +++ b/website/src/data/components/boxplot/mapper.ts @@ -0,0 +1,14 @@ +import { settingsMapper, mapAxis, mapFormat } from '../../../lib/settings' + +export default settingsMapper( + { + valueFormat: mapFormat, + axisTop: mapAxis('top'), + axisRight: mapAxis('right'), + axisBottom: mapAxis('bottom'), + axisLeft: mapAxis('left'), + }, + { + exclude: ['enable axisTop', 'enable axisRight', 'enable axisBottom', 'enable axisLeft'], + } +) diff --git a/website/src/data/components/boxplot/props.ts b/website/src/data/components/boxplot/props.ts index aa8ca1c2e..9f102c85b 100644 --- a/website/src/data/components/boxplot/props.ts +++ b/website/src/data/components/boxplot/props.ts @@ -20,21 +20,90 @@ const allFlavors: Flavor[] = ['svg'] const props: ChartProperty[] = [ { - key: 'layout', + key: 'value', group: 'Base', - help: `Chart layout.`, - type: `'horizontal' | 'vertical'`, flavors: allFlavors, + help: 'Value accessor.', + description: ` + Define how to access the value of each datum, + by default, nivo will look for the \`value\` property. + `, + type: 'string | (datum: RawDatum): number', required: false, - defaultValue: svgDefaultProps.layout, + defaultValue: svgDefaultProps.value, + }, + { + key: 'minValue', + group: 'Base', + help: 'Minimum value.', + description: ` + Minimum value, if 'auto', + will use min value from the provided data. + `, + required: false, + flavors: allFlavors, + defaultValue: svgDefaultProps.minValue, + type: `number | 'auto'`, control: { - type: 'radio', - choices: [ - { label: 'horizontal', value: 'horizontal' }, - { label: 'vertical', value: 'vertical' }, - ], + type: 'switchableRange', + disabledValue: 'auto', + defaultValue: 0, + min: -10, + max: 10, }, }, + { + key: 'maxValue', + group: 'Base', + help: 'Maximum value.', + description: ` + Maximum value, if 'auto', + will use max value from the provided data. + `, + required: false, + flavors: allFlavors, + defaultValue: svgDefaultProps.maxValue, + type: `number | 'auto'`, + control: { + type: 'switchableRange', + disabledValue: 'auto', + defaultValue: 10, + min: 0, + max: 20, + }, + }, + { + key: 'groupBy', + help: 'How to group box plots belonging to the same series', + type: 'string | function', + flavors: allFlavors, + defaultValue: svgDefaultProps.groupBy, + group: 'Base', + }, + { + key: 'groups', + help: 'Specify the groups available, if omitted, it will be inferred from the provided data.', + type: 'string[]', + flavors: allFlavors, + defaultValue: svgDefaultProps.groups, + group: 'Base', + }, + { + key: 'subGroupBy', + help: 'Used for sub-grouping.', + type: 'string | function', + flavors: allFlavors, + defaultValue: svgDefaultProps.subGroupBy, + group: 'Base', + }, + { + key: 'subGroups', + help: 'Specify the sub-groups available, if omitted, it will be inferred from the provided data.', + type: 'string[]', + flavors: allFlavors, + defaultValue: svgDefaultProps.subGroups, + group: 'Base', + }, { key: 'quantiles', group: 'Base', @@ -93,32 +162,24 @@ const props: ChartProperty[] = [ }, }, { - key: 'groupBy', - help: 'How to group box plots belonging to the same series', - type: 'string | function', - flavors: allFlavors, - defaultValue: svgDefaultProps.groupBy, - group: 'Base', - }, - { - key: 'groups', - help: 'How to group box plots belonging to the same series', - type: 'string[]', - flavors: allFlavors, - defaultValue: svgDefaultProps.groups, + key: 'layout', group: 'Base', - }, - { - key: 'subGroupBy', - help: 'How to group box plots belonging to the same series', - type: 'string | function', + help: `Chart layout.`, + type: `'horizontal' | 'vertical'`, flavors: allFlavors, - defaultValue: svgDefaultProps.subGroupBy, - group: 'Base', + required: false, + defaultValue: svgDefaultProps.layout, + control: { + type: 'radio', + choices: [ + { label: 'horizontal', value: 'horizontal' }, + { label: 'vertical', value: 'vertical' }, + ], + }, }, { key: 'padding', - help: 'Padding between each bar (ratio).', + help: 'Padding between each group or boxplot when there is a single group (ratio).', type: 'number', required: false, flavors: allFlavors, @@ -133,7 +194,7 @@ const props: ChartProperty[] = [ }, { key: 'innerPadding', - help: 'Padding between grouped/stacked bars.', + help: 'Padding between grouped boxplots.', type: 'number', required: false, flavors: allFlavors, @@ -152,6 +213,32 @@ const props: ChartProperty[] = [ flavors: allFlavors, defaultValue: svgDefaultProps.colors, }), + { + key: 'colorBy', + group: 'Style', + help: `How to assign individual colors, also impacts legends.`, + type: `'group' | 'subGroup'`, + flavors: allFlavors, + required: false, + defaultValue: svgDefaultProps.colorBy, + control: { + type: 'radio', + choices: [ + { label: 'group', value: 'group' }, + { label: 'subGroup', value: 'subGroup' }, + ], + }, + }, + { + key: 'opacity', + help: 'Opacity.', + required: false, + defaultValue: svgDefaultProps.opacity, + type: 'number', + flavors: allFlavors, + control: { type: 'opacity' }, + group: 'Style', + }, { key: 'borderRadius', help: 'Interquartile Range box border radius.', @@ -191,6 +278,27 @@ const props: ChartProperty[] = [ group: 'Style', control: { type: 'inheritedColor' }, }, + { + key: 'medianWidth', + help: 'Median line width.', + type: 'number', + flavors: allFlavors, + required: false, + defaultValue: svgDefaultProps.medianWidth, + group: 'Style', + control: { type: 'lineWidth' }, + }, + { + key: 'medianColor', + help: 'Method to compute the median color.', + description: `[see dedicated documentation](self:/guides/colors).`, + type: 'string | object | Function', + flavors: allFlavors, + required: false, + defaultValue: svgDefaultProps.medianColor, + group: 'Style', + control: { type: 'inheritedColor' }, + }, { key: 'whiskerWidth', help: 'Whisker line width.', @@ -235,13 +343,70 @@ const props: ChartProperty[] = [ values: true, }), ...axes({ flavors: allFlavors }), + { + key: 'layers', + group: 'Customization', + help: 'Defines the order of layers and add custom layers.', + description: ` + You can also use this to insert extra layers + in the chart, the extra layer should be a valid React component, + and will be passed to [\`createElement\`](https://react.dev/reference/react/createElement). + + It will receive the chart's context & computed data + and must return a valid SVG element. + `, + flavors: allFlavors, + required: false, + type: 'Array', + defaultValue: svgDefaultProps.layers, + }, + { + key: 'boxPlotComponent', + group: 'Customization', + help: 'Override the default box plot component.', + required: false, + type: 'React.FC>', + }, isInteractive({ flavors: ['svg'], defaultValue: svgDefaultProps.isInteractive, }), + { + key: 'activeOpacity', + help: 'Opacity when active.', + required: false, + defaultValue: svgDefaultProps.activeOpacity, + type: 'number', + flavors: allFlavors, + control: { type: 'opacity' }, + group: 'Interactivity', + }, + { + key: 'inactiveOpacity', + help: 'Opacity when inactive.', + required: false, + defaultValue: svgDefaultProps.inactiveOpacity, + type: 'number', + flavors: allFlavors, + control: { type: 'opacity' }, + group: 'Interactivity', + }, + { + key: 'tooltip', + flavors: allFlavors, + group: 'Interactivity', + type: 'Function', + required: false, + help: 'Tooltip custom component', + description: ` + A function allowing complete tooltip customisation, + it must return a valid HTML element and will receive + the boxplot summary. + `, + }, { key: 'legends', - flavors: ['svg', 'canvas'], + flavors: allFlavors, type: 'object[]', help: `Optional chart's legends.`, group: 'Legends', @@ -274,6 +439,39 @@ const props: ChartProperty[] = [ }, ...motionProperties(['svg'], svgDefaultProps, 'react-spring'), ...commonAccessibilityProps(['svg']), + { + key: 'isFocusable', + flavors: ['svg'], + required: false, + group: 'Accessibility', + help: 'Make the root SVG element and each boxplot item focusable, for keyboard navigation.', + type: 'boolean', + control: { type: 'switch' }, + }, + { + key: 'boxPlotAriaLabel', + flavors: ['svg'], + required: false, + group: 'Accessibility', + help: '[aria-label](https://www.w3.org/TR/wai-aria/#aria-label) for boxplot items.', + type: '(data) => string', + }, + { + key: 'boxPlotAriaLabelledBy', + flavors: ['svg'], + required: false, + group: 'Accessibility', + help: '[aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) for boxplot items.', + type: '(data) => string', + }, + { + key: 'boxPlotAriaDescribedBy', + flavors: ['svg'], + required: false, + group: 'Accessibility', + help: '[aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) for boxplot items.', + type: '(data) => string', + }, ] export const groups = groupProperties(props) diff --git a/website/src/pages/boxplot/index.tsx b/website/src/pages/boxplot/index.tsx index 46824297f..fdcf9e15d 100644 --- a/website/src/pages/boxplot/index.tsx +++ b/website/src/pages/boxplot/index.tsx @@ -1,33 +1,23 @@ import React from 'react' -import { generateBoxPlotData } from '@nivo/generators' import { ResponsiveBoxPlot, svgDefaultProps } from '@nivo/boxplot' import { ComponentTemplate } from '../../components/components/ComponentTemplate' import meta from '../../data/components/boxplot/meta.yml' -import mapper from '../../data/components/chord/mapper' +import mapper from '../../data/components/boxplot/mapper' +import { generateLightDataSet } from '../../data/components/boxplot/generator' import { groups } from '../../data/components/boxplot/props' import { graphql, useStaticQuery } from 'gatsby' -const generateData = () => generateBoxPlotData([ - { group: 'Alpha', subgroup: 'A', mu: 5, sd: 1, n: 20 }, - { group: 'Alpha', subgroup: 'B', mu: 6, sd: 1, n: 20 }, - { group: 'Beta', subgroup: 'A', mu: 8, sd: 1.4, n: 20 }, - { group: 'Beta', subgroup: 'B', mu: 7.5, sd: 1.4, n: 20 }, - { group: 'Gamma', subgroup: 'A', mu: 5, sd: 1, n: 20 }, - { group: 'Gamma', subgroup: 'B', mu: 7.2, sd: 1.8, n: 20 }, - { group: 'Delta', subgroup: 'A', mu: 5, sd: 1, n: 20 }, - { group: 'Delta', subgroup: 'B', mu: 6, sd: 1, n: 20 }, - { group: 'Epsilon', subgroup: 'A', mu: 5, sd: 1.4, n: 20 }, - { group: 'Epsilon', subgroup: 'B', mu: 6, sd: 1.8, n: 20 }, -]) - const initialProperties = { margin: { top: 60, - right: 60, - bottom: 90, + right: 140, + bottom: 60, left: 60, }, + value: svgDefaultProps.value, + minValue: 0, + maxValue: 10, groupBy: 'group', subGroupBy: 'subgroup', quantiles: svgDefaultProps.quantiles, @@ -35,14 +25,12 @@ const initialProperties = { padding: 0.12, innerPadding: 6, - minValue: 0, - maxValue: 10, valueFormat: '.2f', enableGridX: true, enableGridY: true, axisTop: { - enable: false, + enable: true, tickSize: 5, tickPadding: 5, tickRotation: 0, @@ -50,7 +38,7 @@ const initialProperties = { legendOffset: 36, }, axisRight: { - enable: false, + enable: true, tickSize: 5, tickPadding: 5, tickRotation: 0, @@ -62,7 +50,7 @@ const initialProperties = { tickSize: 5, tickPadding: 5, tickRotation: 0, - legend: 'country', + legend: 'group', legendPosition: 'middle', legendOffset: 32, }, @@ -71,23 +59,16 @@ const initialProperties = { tickSize: 5, tickPadding: 5, tickRotation: 0, - legend: 'food', + legend: 'value', legendPosition: 'middle', legendOffset: -40, }, - enableLabel: true, - label: 'id', - labelOffset: 12, - labelRotation: -90, - labelTextColor: { - from: 'color', - modifiers: [['darker', 1]], - }, - colors: { scheme: 'nivo' }, + colorBy: svgDefaultProps.colorBy, + opacity: svgDefaultProps.opacity, borderRadius: 2, - borderWidth: svgDefaultProps.borderWidth, + borderWidth: 2, borderColor: { from: 'color', modifiers: [['darker', 0.3]], @@ -95,34 +76,38 @@ const initialProperties = { medianWidth: 2, medianColor: { from: 'color', - modifiers: [['darker', 0.8]], + modifiers: [['darker', 0.3]], }, whiskerWidth: svgDefaultProps.whiskerWidth, whiskerEndSize: 0.6, whiskerColor: { from: 'color', - modifiers: [['darker', 0]], + modifiers: [['darker', 0.3]], }, isInteractive: true, + activeOpacity: svgDefaultProps.activeOpacity, + inactiveOpacity: svgDefaultProps.inactiveOpacity, animate: true, motionConfig: 'stiff', + isFocusable: svgDefaultProps.isFocusable, + legends: [ { - anchor: 'bottom', - direction: 'row', + anchor: 'right', + direction: 'column', justify: false, - translateX: 0, - translateY: 70, - itemWidth: 80, - itemHeight: 14, - itemsSpacing: 0, + translateX: 100, + translateY: 0, + itemWidth: 60, + itemHeight: 20, + itemsSpacing: 3, itemTextColor: '#999', itemDirection: 'left-to-right', - symbolSize: 12, - symbolShape: 'circle', + symbolSize: 20, + symbolShape: 'square', onClick: d => { alert(JSON.stringify(d, null, ' ')) }, @@ -164,11 +149,7 @@ const BoxPlot = () => { initialProperties={initialProperties} defaultProperties={svgDefaultProps} propertiesMapper={mapper} - codePropertiesMapper={(properties, data) => ({ - keys: data.keys, - ...properties, - })} - generateData={generateData} + generateData={generateLightDataSet} getTabData={data => data} image={image} > @@ -178,41 +159,6 @@ const BoxPlot = () => { data={data} {...properties} theme={theme} - // groupBy={} - // groups={} - // value={} - // maxValue={} - // minValue={} - // opacity={} - // activeOpacity={} - // inactiveOpacity={} - // valueScale={} - // indexScale={} - // enableGridX={} - // enableGridY={} - // medianColor={} - // medianWidth={} - // whiskerColor={} - // tooltip={} - // tooltipLabel={} - // colorBy={} - // colors={} - // theme={} - // annotations={} - // legends={} - // data={} - // height={} - // width={} - // animate={} - // motionConfig={} - // axisBottom={} - // axisLeft={} - // axisRight={} - // axisTop={} - // boxPlotComponent={} - // markers={} - // layers={} - // role={} onClick={boxPlot => { logAction({ type: 'click', diff --git a/website/src/styles/icons.css b/website/src/styles/icons.css index 50ed8c9dc..91ed46303 100644 --- a/website/src/styles/icons.css +++ b/website/src/styles/icons.css @@ -1,5 +1,5 @@ /* glue: 0.13 hash: 78b58a59dc */ - .sprite-icons-waffle-light-neutral, +.sprite-icons-waffle-light-neutral, .sprite-icons-waffle-light-colored, .sprite-icons-waffle-dark-neutral, .sprite-icons-waffle-dark-colored, @@ -128,786 +128,790 @@ .sprite-icons-area-bump-light-colored, .sprite-icons-area-bump-dark-neutral, .sprite-icons-area-bump-dark-colored { - background-image: url('../assets/icons.png'); - background-repeat: no-repeat; - } - - .sprite-icons-waffle-light-neutral { - background-position: -4px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-waffle-light-colored { - background-position: -64px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-waffle-dark-neutral { - background-position: -4px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-waffle-dark-colored { - background-position: -64px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-voronoi-red { - background-position: -124px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-voronoi-light-neutral { - background-position: -124px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-voronoi-light-colored { - background-position: -4px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-voronoi-grey { - background-position: -64px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-voronoi-dark-neutral { - background-position: -124px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-voronoi-dark-colored { - background-position: -184px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-treemap-red { - background-position: -184px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-treemap-light-neutral { - background-position: -184px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-treemap-light-colored { - background-position: -4px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-treemap-grey { - background-position: -64px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-treemap-dark-neutral { - background-position: -124px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-treemap-dark-colored { - background-position: -184px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-time-range-light-neutral { - background-position: -244px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-time-range-light-colored { - background-position: -244px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-time-range-dark-neutral { - background-position: -244px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-time-range-dark-colored { - background-position: -244px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-swarmplot-light-neutral { - background-position: -4px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-swarmplot-light-colored { - background-position: -64px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-swarmplot-dark-neutral { - background-position: -124px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-swarmplot-dark-colored { - background-position: -184px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-red { - background-position: -244px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-light-neutral { - background-position: -304px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-light-colored { - background-position: -304px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-grey { - background-position: -304px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-dark-neutral { - background-position: -304px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-dark-colored { - background-position: -304px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-stream-light-neutral { - background-position: -4px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-stream-light-colored { - background-position: -64px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-stream-dark-neutral { - background-position: -124px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-stream-dark-colored { - background-position: -184px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-scatterplot-light-neutral { - background-position: -244px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-scatterplot-light-colored { - background-position: -304px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-scatterplot-dark-neutral { - background-position: -364px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-scatterplot-dark-colored { - background-position: -364px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-red { - background-position: -364px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-light-neutral { - background-position: -364px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-light-colored { - background-position: -364px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-grey { - background-position: -364px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-dark-neutral { - background-position: -4px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-dark-colored { - background-position: -64px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-radial-bar-light-neutral { - background-position: -124px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-radial-bar-light-colored { - background-position: -184px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-radial-bar-dark-neutral { - background-position: -244px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-radial-bar-dark-colored { - background-position: -304px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-radar-light-neutral { - background-position: -364px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-radar-light-colored { - background-position: -424px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-radar-dark-neutral { - background-position: -424px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-radar-dark-colored { - background-position: -424px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-pie-light-neutral { - background-position: -424px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-pie-light-colored { - background-position: -424px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-pie-dark-neutral { - background-position: -424px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-pie-dark-colored { - background-position: -424px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-parallel-coordinates-light-neutral { - background-position: -4px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-parallel-coordinates-light-colored { - background-position: -64px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-parallel-coordinates-dark-neutral { - background-position: -124px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-parallel-coordinates-dark-colored { - background-position: -184px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-nivo-icon { - background-position: -244px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-network-light-neutral { - background-position: -304px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-network-light-colored { - background-position: -364px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-network-dark-neutral { - background-position: -424px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-network-dark-colored { - background-position: -484px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-marimekko-light-neutral { - background-position: -484px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-marimekko-light-colored { - background-position: -484px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-marimekko-dark-neutral { - background-position: -484px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-marimekko-dark-colored { - background-position: -484px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-line-light-neutral { - background-position: -484px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-line-light-colored { - background-position: -484px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-line-dark-neutral { - background-position: -484px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-line-dark-colored { - background-position: -4px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-heatmap-light-neutral { - background-position: -64px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-heatmap-light-colored { - background-position: -124px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-heatmap-dark-neutral { - background-position: -184px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-heatmap-dark-colored { - background-position: -244px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-geomap-light-neutral { - background-position: -304px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-geomap-light-colored { - background-position: -364px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-geomap-dark-neutral { - background-position: -424px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-geomap-dark-colored { - background-position: -484px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-funnel-light-neutral { - background-position: -544px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-funnel-light-colored { - background-position: -544px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-funnel-dark-neutral { - background-position: -544px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-funnel-dark-colored { - background-position: -544px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-data-light-neutral { - background-position: -544px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-data-light-colored { - background-position: -544px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-data-dark-neutral { - background-position: -544px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-data-dark-colored { - background-position: -544px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-code-light-neutral { - background-position: -544px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-code-light-colored { - background-position: -4px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-code-dark-neutral { - background-position: -64px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-code-dark-colored { - background-position: -124px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-circle-packing-light-neutral { - background-position: -184px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-circle-packing-light-colored { - background-position: -244px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-circle-packing-dark-neutral { - background-position: -304px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-circle-packing-dark-colored { - background-position: -364px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-choropleth-light-neutral { - background-position: -424px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-choropleth-light-colored { - background-position: -484px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-choropleth-dark-neutral { - background-position: -544px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-choropleth-dark-colored { - background-position: -604px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-chord-light-neutral { - background-position: -604px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-chord-light-colored { - background-position: -604px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-chord-dark-neutral { - background-position: -604px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-chord-dark-colored { - background-position: -604px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-calendar-light-neutral { - background-position: -604px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-calendar-light-colored { - background-position: -604px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-calendar-dark-neutral { - background-position: -604px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-calendar-dark-colored { - background-position: -604px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-bump-light-neutral { - background-position: -604px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-bump-light-colored { - background-position: -4px -604px; - width: 52px; - height: 52px; - } - - .sprite-icons-bump-dark-neutral { - background-position: -64px -604px; - width: 52px; - height: 52px; - } - - .sprite-icons-bump-dark-colored { - background-position: -124px -604px; - width: 52px; - height: 52px; - } - - .sprite-icons-bullet-light-neutral { - background-position: -184px -604px; - width: 52px; - height: 52px; - } - - .sprite-icons-bullet-light-colored { - background-position: -244px -604px; - width: 52px; - height: 52px; - } - - .sprite-icons-bullet-dark-neutral { - background-position: -304px -604px; - width: 52px; - height: 52px; - } - - .sprite-icons-bullet-dark-colored { - background-position: -364px -604px; - width: 52px; - height: 52px; - } - - .sprite-icons-boxplot-light-neutral { - background-position: -424px -604px; - width: 52px; - height: 52px; - } - - .sprite-icons-boxplot-light-colored { - background-position: -484px -604px; - width: 52px; - height: 52px; - } - - .sprite-icons-boxplot-dark-neutral { - background-position: -544px -604px; - width: 52px; - height: 52px; - } - - .sprite-icons-boxplot-dark-colored { - background-position: -604px -604px; - width: 52px; - height: 52px; - } - - .sprite-icons-bar-light-neutral { - background-position: -664px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-bar-light-colored { - background-position: -664px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-bar-dark-neutral { - background-position: -664px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-bar-dark-colored { - background-position: -664px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-area-bump-light-neutral { - background-position: -664px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-area-bump-light-colored { - background-position: -664px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-area-bump-dark-neutral { - background-position: -664px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-area-bump-dark-colored { - background-position: -664px -424px; - width: 52px; - height: 52px; - } - - @media screen and (-webkit-min-device-pixel-ratio: 1.0), screen and (min--moz-device-pixel-ratio: 1.0), screen and (-o-min-device-pixel-ratio: 100/100), screen and (min-device-pixel-ratio: 1.0), screen and (min-resolution: 1.0dppx) { - .sprite-icons-waffle-light-neutral, + background-image: url('../assets/icons.png'); + background-repeat: no-repeat; +} + +.sprite-icons-waffle-light-neutral { + background-position: -4px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-waffle-light-colored { + background-position: -64px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-waffle-dark-neutral { + background-position: -4px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-waffle-dark-colored { + background-position: -64px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-voronoi-red { + background-position: -124px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-voronoi-light-neutral { + background-position: -124px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-voronoi-light-colored { + background-position: -4px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-voronoi-grey { + background-position: -64px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-voronoi-dark-neutral { + background-position: -124px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-voronoi-dark-colored { + background-position: -184px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-treemap-red { + background-position: -184px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-treemap-light-neutral { + background-position: -184px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-treemap-light-colored { + background-position: -4px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-treemap-grey { + background-position: -64px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-treemap-dark-neutral { + background-position: -124px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-treemap-dark-colored { + background-position: -184px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-time-range-light-neutral { + background-position: -244px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-time-range-light-colored { + background-position: -244px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-time-range-dark-neutral { + background-position: -244px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-time-range-dark-colored { + background-position: -244px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-swarmplot-light-neutral { + background-position: -4px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-swarmplot-light-colored { + background-position: -64px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-swarmplot-dark-neutral { + background-position: -124px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-swarmplot-dark-colored { + background-position: -184px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-red { + background-position: -244px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-light-neutral { + background-position: -304px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-light-colored { + background-position: -304px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-grey { + background-position: -304px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-dark-neutral { + background-position: -304px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-dark-colored { + background-position: -304px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-stream-light-neutral { + background-position: -4px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-stream-light-colored { + background-position: -64px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-stream-dark-neutral { + background-position: -124px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-stream-dark-colored { + background-position: -184px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-scatterplot-light-neutral { + background-position: -244px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-scatterplot-light-colored { + background-position: -304px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-scatterplot-dark-neutral { + background-position: -364px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-scatterplot-dark-colored { + background-position: -364px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-red { + background-position: -364px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-light-neutral { + background-position: -364px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-light-colored { + background-position: -364px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-grey { + background-position: -364px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-dark-neutral { + background-position: -4px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-dark-colored { + background-position: -64px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-radial-bar-light-neutral { + background-position: -124px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-radial-bar-light-colored { + background-position: -184px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-radial-bar-dark-neutral { + background-position: -244px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-radial-bar-dark-colored { + background-position: -304px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-radar-light-neutral { + background-position: -364px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-radar-light-colored { + background-position: -424px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-radar-dark-neutral { + background-position: -424px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-radar-dark-colored { + background-position: -424px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-pie-light-neutral { + background-position: -424px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-pie-light-colored { + background-position: -424px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-pie-dark-neutral { + background-position: -424px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-pie-dark-colored { + background-position: -424px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-parallel-coordinates-light-neutral { + background-position: -4px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-parallel-coordinates-light-colored { + background-position: -64px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-parallel-coordinates-dark-neutral { + background-position: -124px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-parallel-coordinates-dark-colored { + background-position: -184px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-nivo-icon { + background-position: -244px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-network-light-neutral { + background-position: -304px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-network-light-colored { + background-position: -364px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-network-dark-neutral { + background-position: -424px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-network-dark-colored { + background-position: -484px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-marimekko-light-neutral { + background-position: -484px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-marimekko-light-colored { + background-position: -484px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-marimekko-dark-neutral { + background-position: -484px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-marimekko-dark-colored { + background-position: -484px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-line-light-neutral { + background-position: -484px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-line-light-colored { + background-position: -484px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-line-dark-neutral { + background-position: -484px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-line-dark-colored { + background-position: -4px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-heatmap-light-neutral { + background-position: -64px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-heatmap-light-colored { + background-position: -124px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-heatmap-dark-neutral { + background-position: -184px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-heatmap-dark-colored { + background-position: -244px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-geomap-light-neutral { + background-position: -304px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-geomap-light-colored { + background-position: -364px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-geomap-dark-neutral { + background-position: -424px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-geomap-dark-colored { + background-position: -484px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-funnel-light-neutral { + background-position: -544px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-funnel-light-colored { + background-position: -544px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-funnel-dark-neutral { + background-position: -544px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-funnel-dark-colored { + background-position: -544px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-data-light-neutral { + background-position: -544px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-data-light-colored { + background-position: -544px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-data-dark-neutral { + background-position: -544px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-data-dark-colored { + background-position: -544px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-code-light-neutral { + background-position: -544px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-code-light-colored { + background-position: -4px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-code-dark-neutral { + background-position: -64px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-code-dark-colored { + background-position: -124px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-circle-packing-light-neutral { + background-position: -184px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-circle-packing-light-colored { + background-position: -244px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-circle-packing-dark-neutral { + background-position: -304px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-circle-packing-dark-colored { + background-position: -364px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-choropleth-light-neutral { + background-position: -424px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-choropleth-light-colored { + background-position: -484px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-choropleth-dark-neutral { + background-position: -544px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-choropleth-dark-colored { + background-position: -604px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-chord-light-neutral { + background-position: -604px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-chord-light-colored { + background-position: -604px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-chord-dark-neutral { + background-position: -604px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-chord-dark-colored { + background-position: -604px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-calendar-light-neutral { + background-position: -604px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-calendar-light-colored { + background-position: -604px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-calendar-dark-neutral { + background-position: -604px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-calendar-dark-colored { + background-position: -604px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-bump-light-neutral { + background-position: -604px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-bump-light-colored { + background-position: -4px -604px; + width: 52px; + height: 52px; +} + +.sprite-icons-bump-dark-neutral { + background-position: -64px -604px; + width: 52px; + height: 52px; +} + +.sprite-icons-bump-dark-colored { + background-position: -124px -604px; + width: 52px; + height: 52px; +} + +.sprite-icons-bullet-light-neutral { + background-position: -184px -604px; + width: 52px; + height: 52px; +} + +.sprite-icons-bullet-light-colored { + background-position: -244px -604px; + width: 52px; + height: 52px; +} + +.sprite-icons-bullet-dark-neutral { + background-position: -304px -604px; + width: 52px; + height: 52px; +} + +.sprite-icons-bullet-dark-colored { + background-position: -364px -604px; + width: 52px; + height: 52px; +} + +.sprite-icons-boxplot-light-neutral { + background-position: -424px -604px; + width: 52px; + height: 52px; +} + +.sprite-icons-boxplot-light-colored { + background-position: -484px -604px; + width: 52px; + height: 52px; +} + +.sprite-icons-boxplot-dark-neutral { + background-position: -544px -604px; + width: 52px; + height: 52px; +} + +.sprite-icons-boxplot-dark-colored { + background-position: -604px -604px; + width: 52px; + height: 52px; +} + +.sprite-icons-bar-light-neutral { + background-position: -664px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-bar-light-colored { + background-position: -664px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-bar-dark-neutral { + background-position: -664px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-bar-dark-colored { + background-position: -664px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-area-bump-light-neutral { + background-position: -664px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-area-bump-light-colored { + background-position: -664px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-area-bump-dark-neutral { + background-position: -664px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-area-bump-dark-colored { + background-position: -664px -424px; + width: 52px; + height: 52px; +} + +@media screen and (-webkit-min-device-pixel-ratio: 1), + screen and (min--moz-device-pixel-ratio: 1), + screen and (-o-min-device-pixel-ratio: 100/100), + screen and (min-device-pixel-ratio: 1), + screen and (min-resolution: 1dppx) { + .sprite-icons-waffle-light-neutral, .sprite-icons-waffle-light-colored, .sprite-icons-waffle-dark-neutral, .sprite-icons-waffle-dark-colored, @@ -1036,15 +1040,19 @@ .sprite-icons-area-bump-light-colored, .sprite-icons-area-bump-dark-neutral, .sprite-icons-area-bump-dark-colored { - background-image: url('../assets/icons.png'); - -webkit-background-size: 720px 660px; - -moz-background-size: 720px 660px; - background-size: 720px 660px; - } - } - - @media screen and (-webkit-min-device-pixel-ratio: 2.0), screen and (min--moz-device-pixel-ratio: 2.0), screen and (-o-min-device-pixel-ratio: 200/100), screen and (min-device-pixel-ratio: 2.0), screen and (min-resolution: 2.0dppx) { - .sprite-icons-waffle-light-neutral, + background-image: url('../assets/icons.png'); + -webkit-background-size: 720px 660px; + -moz-background-size: 720px 660px; + background-size: 720px 660px; + } +} + +@media screen and (-webkit-min-device-pixel-ratio: 2), + screen and (min--moz-device-pixel-ratio: 2), + screen and (-o-min-device-pixel-ratio: 200/100), + screen and (min-device-pixel-ratio: 2), + screen and (min-resolution: 2dppx) { + .sprite-icons-waffle-light-neutral, .sprite-icons-waffle-light-colored, .sprite-icons-waffle-dark-neutral, .sprite-icons-waffle-dark-colored, @@ -1173,10 +1181,9 @@ .sprite-icons-area-bump-light-colored, .sprite-icons-area-bump-dark-neutral, .sprite-icons-area-bump-dark-colored { - background-image: url('../assets/icons@2x.png'); - -webkit-background-size: 720px 660px; - -moz-background-size: 720px 660px; - background-size: 720px 660px; - } - } - \ No newline at end of file + background-image: url('../assets/icons@2x.png'); + -webkit-background-size: 720px 660px; + -moz-background-size: 720px 660px; + background-size: 720px 660px; + } +}