From 4553d5551a154fe35916e8860cf781ba4b90cf41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Wed, 15 May 2019 01:43:53 +0900 Subject: [PATCH] feat(bump): add support for area transition for AreaBump --- packages/bump/package.json | 1 - packages/bump/src/Bump.js | 248 ---- packages/bump/src/Line.js | 59 - packages/bump/src/LineLabels.js | 137 -- packages/bump/src/LineTooltip.js | 24 - packages/bump/src/Point.js | 0 packages/bump/src/Points.js | 30 - packages/bump/src/ResponsiveBump.js | 19 - packages/bump/src/area-bump/AnimatedArea.js | 69 + packages/bump/src/area-bump/Area.js | 65 +- packages/bump/src/area-bump/AreaBump.js | 30 +- packages/bump/src/area-bump/AreasLabels.js | 9 +- packages/bump/src/area-bump/StaticArea.js | 54 + packages/bump/src/area-bump/compute.js | 22 +- packages/bump/src/area-bump/hooks.js | 111 +- packages/bump/src/area-bump/props.js | 13 +- packages/bump/src/bump/Line.js | 2 +- packages/bump/src/bump/Points.js | 4 +- packages/bump/src/bump/hooks.js | 62 +- packages/bump/src/compute.js | 0 packages/bump/src/hooks.js | 87 -- packages/bump/src/index.js | 6 +- packages/bump/src/props.js | 116 -- website/src/components/icons/BumpIcon.js | 22 +- .../src/data/components/area-bump/props.js | 80 +- website/src/pages/area-bump/index.js | 1 + website/src/styles/icons.css | 1313 +++++++++-------- 27 files changed, 1023 insertions(+), 1561 deletions(-) delete mode 100644 packages/bump/src/Bump.js delete mode 100644 packages/bump/src/Line.js delete mode 100644 packages/bump/src/LineLabels.js delete mode 100644 packages/bump/src/LineTooltip.js delete mode 100644 packages/bump/src/Point.js delete mode 100644 packages/bump/src/Points.js delete mode 100644 packages/bump/src/ResponsiveBump.js create mode 100644 packages/bump/src/area-bump/AnimatedArea.js create mode 100644 packages/bump/src/area-bump/StaticArea.js delete mode 100644 packages/bump/src/compute.js delete mode 100644 packages/bump/src/hooks.js delete mode 100644 packages/bump/src/props.js diff --git a/packages/bump/package.json b/packages/bump/package.json index 0ee01dd1f..0ac60c169 100644 --- a/packages/bump/package.json +++ b/packages/bump/package.json @@ -28,7 +28,6 @@ "@nivo/core": "0.57.0", "@nivo/legends": "0.57.0", "@nivo/tooltip": "0.57.0", - "d3-chord": "^1.0.6", "d3-shape": "^1.3.5", "lodash": "^4.17.11", "react-motion": "^0.5.2" diff --git a/packages/bump/src/Bump.js b/packages/bump/src/Bump.js deleted file mode 100644 index f33bbf17f..000000000 --- a/packages/bump/src/Bump.js +++ /dev/null @@ -1,248 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ -import React, { memo, useMemo, useState, Fragment } from 'react' -import { withContainer, useDimensions, SvgWrapper } from '@nivo/core' -import { useOrdinalColorScale } from '@nivo/colors' -import { Grid, Axes } from '@nivo/axes' -import { useScales, useLineGenerator, useLineWidth, useSerieOpacity, usePointSize } from './hooks' -import { BumpPropTypes, BumpDefaultProps } from './props' -import Line from './Line' -import LineLabels from './LineLabels' -import Points from './Points' - -const Bump = props => { - const { - data, - - xOuterPadding, - yOuterPadding, - - width, - height, - margin: partialMargin, - - layers, - - lineInterpolation, - lineCurvaturePadding, - lineWidth, - lineOpacity, - activeLineWidth, - activeLineOpacity, - inactiveLineWidth, - inactiveLineOpacity, - - startLabel, - startLabelPadding, - startLabelTextColor, - endLabel, - endLabelPadding, - endLabelTextColor, - - pointSize, - activePointSize, - inactivePointSize, - pointColor, - - axisTop, - axisRight, - axisBottom, - axisLeft, - enableGridX, - enableGridY, - - colors, - } = props - - const [currentSerie, setCurrentSerie] = useState(null) - - const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions( - width, - height, - partialMargin - ) - - const { xScale, yScale } = useScales({ - width: innerWidth, - height: innerHeight, - data, - xOuterPadding, - yOuterPadding, - }) - const linePadding = xScale.step() * lineCurvaturePadding - - const getColor = useOrdinalColorScale(colors, 'id') - - const { series, points } = useMemo(() => { - const allPoints = [] - const series = data.map(rawSerie => { - const serie = { - ...rawSerie, - color: getColor(rawSerie), - points: [], - linePoints: [], - } - rawSerie.data.forEach((datum, i) => { - const point = { - ...datum, - id: `${datum.x}.${datum.y}`, - x: xScale(datum.x), - y: yScale(datum.y), - serie, - } - allPoints.push(point) - serie.points.push(point) - if (i === 0) { - serie.linePoints.push([0, point.y]) - serie.linePoints.push([point.x, point.y]) - serie.linePoints.push([point.x + linePadding, point.y]) - } else if (i === rawSerie.data.length - 1) { - serie.linePoints.push([point.x - linePadding, point.y]) - serie.linePoints.push([point.x, point.y]) - serie.linePoints.push([innerWidth, point.y]) - } else { - serie.linePoints.push([point.x - linePadding, point.y]) - serie.linePoints.push([point.x, point.y]) - serie.linePoints.push([point.x + linePadding, point.y]) - } - }) - - return serie - }) - - return { series, points: allPoints } - }, [data, xScale, yScale, linePadding, getColor]) - - const lineGenerator = useLineGenerator() - const getLineWidth = useLineWidth({ - lineWidth, - activeLineWidth, - inactiveLineWidth, - current: currentSerie, - }) - const getSerieOpacity = useSerieOpacity({ - opacity: lineOpacity, - activeOpacity: activeLineOpacity, - inactiveOpacity: inactiveLineOpacity, - current: currentSerie, - }) - const getPointSize = usePointSize({ - size: pointSize, - activeSize: activePointSize, - inactiveSize: inactivePointSize, - current: currentSerie, - }) - - const layerById = { - grid: ( - - ), - axes: ( - - ), - labels: [], - lines: ( - - {series.map(serie => ( - - ))} - - ), - points: null, - } - - if (startLabel !== false) { - layerById.labels.push( - - ) - } - if (endLabel !== false) { - layerById.labels.push( - - ) - } - - layerById.points = ( - - ) - - return ( - - {layers.map((layer, i) => { - if (typeof layer === 'function') { - return ( - - {layer({ - innerWidth, - innerHeight, - xScale, - yScale, - })} - - ) - } - - return layerById[layer] - })} - - ) -} - -Bump.propTypes = BumpPropTypes -Bump.defaultProps = BumpDefaultProps - -export default memo(withContainer(Bump)) diff --git a/packages/bump/src/Line.js b/packages/bump/src/Line.js deleted file mode 100644 index 435fadc03..000000000 --- a/packages/bump/src/Line.js +++ /dev/null @@ -1,59 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ -import React, { memo, useCallback, useMemo } from 'react' -import { useTooltip } from '@nivo/tooltip' -import LineTooltip from './LineTooltip' - -const Line = ({ serie, setCurrentSerie, lineGenerator, yScale, getLineWidth, getOpacity }) => { - const { showTooltipFromEvent, hideTooltip } = useTooltip() - const onMouseEnter = useCallback( - event => { - showTooltipFromEvent(, event) - setCurrentSerie(serie.id) - }, - [serie, showTooltipFromEvent, setCurrentSerie] - ) - const onMouseMove = useCallback( - event => { - showTooltipFromEvent(, event) - }, - [serie, showTooltipFromEvent] - ) - const onMouseLeave = useCallback(() => { - hideTooltip() - setCurrentSerie(null) - }, [hideTooltip, setCurrentSerie]) - const path = useMemo(() => lineGenerator(serie.linePoints), [serie.linePoints]) - - return ( - <> - - - - ) -} - -export default memo(Line) diff --git a/packages/bump/src/LineLabels.js b/packages/bump/src/LineLabels.js deleted file mode 100644 index a82026fa2..000000000 --- a/packages/bump/src/LineLabels.js +++ /dev/null @@ -1,137 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ -import React, { Fragment, memo, useCallback, useMemo } from 'react' -import PropTypes from 'prop-types' -import { useTheme } from '@nivo/core' -import { useInheritedColor } from '@nivo/colors' -import { useTooltip } from '@nivo/tooltip' -import LineTooltip from './LineTooltip' - -const LineLabels = ({ - series, - yScale, - position, - margin, - padding, - color, - setCurrentSerie, - getOpacity, -}) => { - const theme = useTheme() - const getColor = useInheritedColor(color, theme) - - const labels = useMemo(() => { - if (position === 'start') { - return series.map(serie => { - const point = serie.linePoints[0] - - return { - id: serie.id, - x: point[0] - padding, - y: point[1], - width: margin.left, - height: yScale.step(), - color: getColor(serie), - serie, - } - }) - } else { - return series.map(serie => { - const point = serie.linePoints[serie.linePoints.length - 1] - - return { - id: serie.id, - x: point[0] + padding, - y: point[1], - width: margin.right, - height: yScale.step(), - color: getColor(serie), - serie, - } - }) - } - }, [series, position, getColor]) - - const { showTooltipFromEvent, hideTooltip } = useTooltip() - const onMouseEnter = useCallback( - (serie, event) => { - showTooltipFromEvent(, event) - setCurrentSerie(serie.id) - }, - [showTooltipFromEvent, setCurrentSerie] - ) - const onMouseMove = useCallback( - (serie, event) => { - showTooltipFromEvent(, event) - }, - [showTooltipFromEvent] - ) - const onMouseLeave = useCallback(() => { - hideTooltip() - setCurrentSerie(null) - }, [hideTooltip, setCurrentSerie]) - - return labels.map(label => { - return ( - - - {label.id} - - onMouseEnter(label.serie, event)} - onMouseMove={event => onMouseMove(label.serie, event)} - onMouseLeave={onMouseLeave} - /> - - ) - }) -} - -LineLabels.propTypes = { - series: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string.isRequired, - data: PropTypes.arrayOf( - PropTypes.shape({ - x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - }) - ).isRequired, - }) - ).isRequired, - yScale: PropTypes.func.isRequired, - position: PropTypes.oneOf(['start', 'end']).isRequired, - padding: PropTypes.number.isRequired, - margin: PropTypes.shape({ - top: PropTypes.number.isRequired, - right: PropTypes.number.isRequired, - bottom: PropTypes.number.isRequired, - left: PropTypes.number.isRequired, - }).isRequired, - currentSerie: PropTypes.string, - setCurrentSerie: PropTypes.func.isRequired, -} - -export default memo(LineLabels) diff --git a/packages/bump/src/LineTooltip.js b/packages/bump/src/LineTooltip.js deleted file mode 100644 index 8f4581dc4..000000000 --- a/packages/bump/src/LineTooltip.js +++ /dev/null @@ -1,24 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ -import React, { memo } from 'react' -import PropTypes from 'prop-types' -import { BasicTooltip } from '@nivo/tooltip' - -const LineTooltip = ({ serie }) => { - return -} - -LineTooltip.propTypes = { - serie: PropTypes.shape({ - id: PropTypes.string.isRequired, - color: PropTypes.string.isRequired, - }), -} - -export default memo(LineTooltip) diff --git a/packages/bump/src/Point.js b/packages/bump/src/Point.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/bump/src/Points.js b/packages/bump/src/Points.js deleted file mode 100644 index 6b28f5e42..000000000 --- a/packages/bump/src/Points.js +++ /dev/null @@ -1,30 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ -import React, { memo } from 'react' -import { useTheme } from '@nivo/core' -import { useInheritedColor } from '@nivo/colors' - -const Points = ({ points, color, getSize }) => { - const theme = useTheme() - const getColor = useInheritedColor(color, theme) - - return points.map(point => { - return ( - - ) - }) -} - -export default memo(Points) diff --git a/packages/bump/src/ResponsiveBump.js b/packages/bump/src/ResponsiveBump.js deleted file mode 100644 index 36bcc6f2b..000000000 --- a/packages/bump/src/ResponsiveBump.js +++ /dev/null @@ -1,19 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ -import React from 'react' -import { ResponsiveWrapper } from '@nivo/core' -import Bump from './Bump' - -const ResponsiveBump = props => ( - - {({ width, height }) => } - -) - -export default ResponsiveBump diff --git a/packages/bump/src/area-bump/AnimatedArea.js b/packages/bump/src/area-bump/AnimatedArea.js new file mode 100644 index 000000000..16710843b --- /dev/null +++ b/packages/bump/src/area-bump/AnimatedArea.js @@ -0,0 +1,69 @@ +/* + * This file is part of the nivo project. + * + * Copyright 2016-present, Raphaël Benitte. + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +import React, { memo } from 'react' +import PropTypes from 'prop-types' +import { blendModePropType, SmartMotion, useMotionConfig } from '@nivo/core' + +const AnimatedArea = ({ + serie, + areaGenerator, + blendMode, + onMouseEnter, + onMouseMove, + onMouseLeave, +}) => { + const { springConfig } = useMotionConfig() + + return ( + ({ + d: spring(areaGenerator(serie.areaPoints), springConfig), + fill: spring(serie.color, springConfig), + fillOpacity: spring(serie.style.fillOpacity, springConfig), + stroke: spring(serie.style.borderColor, springConfig), + strokeOpacity: spring(serie.style.borderOpacity, springConfig), + })} + > + {interpolated => ( + + )} + + ) +} + +AnimatedArea.propTypes = { + serie: PropTypes.shape({ + id: PropTypes.string.isRequired, + color: PropTypes.string.isRequired, + style: PropTypes.shape({ + fillOpacity: PropTypes.number.isRequired, + borderWidth: PropTypes.number.isRequired, + borderColor: PropTypes.string.isRequired, + borderOpacity: PropTypes.number.isRequired, + }).isRequired, + }).isRequired, + areaGenerator: PropTypes.func.isRequired, + blendMode: blendModePropType.isRequired, + onMouseEnter: PropTypes.func, + onMouseMove: PropTypes.func, + onMouseLeave: PropTypes.func, +} + +export default memo(AnimatedArea) diff --git a/packages/bump/src/area-bump/Area.js b/packages/bump/src/area-bump/Area.js index 41d318502..6cafebe4f 100644 --- a/packages/bump/src/area-bump/Area.js +++ b/packages/bump/src/area-bump/Area.js @@ -7,26 +7,25 @@ * file that was distributed with this source code. */ import React, { memo, useCallback } from 'react' +import PropTypes from 'prop-types' +import { useMotionConfig, blendModePropType } from '@nivo/core' import { useTooltip } from '@nivo/tooltip' import AreaTooltip from './AreaTooltip' +import AnimatedArea from './AnimatedArea' +import StaticArea from './StaticArea' -const Area = ({ - serie, - areaGenerator, - blendMode, - setCurrentSerie -}) => { +const Area = ({ serie, areaGenerator, blendMode, isInteractive, setCurrentSerie }) => { const { showTooltipFromEvent, hideTooltip } = useTooltip() const onMouseEnter = useCallback( event => { - showTooltipFromEvent(, event) + showTooltipFromEvent(, event) setCurrentSerie(serie.id) }, [serie, showTooltipFromEvent, setCurrentSerie] ) const onMouseMove = useCallback( event => { - showTooltipFromEvent(, event) + showTooltipFromEvent(, event) }, [serie, showTooltipFromEvent] ) @@ -35,26 +34,46 @@ const Area = ({ setCurrentSerie(null) }, [hideTooltip, setCurrentSerie]) - return ( - <> - - + ) + } + + return ( + ) } Area.propTypes = { - + serie: PropTypes.shape({ + id: PropTypes.string.isRequired, + color: PropTypes.string.isRequired, + style: PropTypes.shape({ + fillOpacity: PropTypes.number.isRequired, + borderWidth: PropTypes.number.isRequired, + borderOpacity: PropTypes.number.isRequired, + }).isRequired, + }).isRequired, + areaGenerator: PropTypes.func.isRequired, + blendMode: blendModePropType.isRequired, + isInteractive: PropTypes.bool.isRequired, + setCurrentSerie: PropTypes.func.isRequired, } export default memo(Area) diff --git a/packages/bump/src/area-bump/AreaBump.js b/packages/bump/src/area-bump/AreaBump.js index 1d962ec39..b9d48152c 100644 --- a/packages/bump/src/area-bump/AreaBump.js +++ b/packages/bump/src/area-bump/AreaBump.js @@ -28,7 +28,7 @@ const AreaBump = props => { interpolation, spacing, xPadding, - + colors, blendMode, fillOpacity, @@ -37,10 +37,11 @@ const AreaBump = props => { borderWidth, activeBorderWidth, inactiveBorderWidth, + borderColor, borderOpacity, activeBorderOpacity, inactiveBorderOpacity, - + startLabel, startLabelPadding, startLabelTextColor, @@ -63,13 +64,7 @@ const AreaBump = props => { partialMargin ) - const { - series, - xScale, - heightScale, - areaGenerator, - getColor, - } = useAreaBump({ + const { series, xScale, areaGenerator } = useAreaBump({ data, width: innerWidth, height: innerHeight, @@ -84,21 +79,17 @@ const AreaBump = props => { borderWidth, activeBorderWidth, inactiveBorderWidth, + borderColor, borderOpacity, activeBorderOpacity, inactiveBorderOpacity, isInteractive, - current: currentSerie + current: currentSerie, }) const layerById = { grid: enableGridX && ( - + ), axes: ( { areaGenerator={areaGenerator} serie={serie} blendMode={blendMode} + isInteractive={isInteractive} setCurrentSerie={setCurrentSerie} /> ))} @@ -160,8 +152,14 @@ const AreaBump = props => { return ( {layer({ + ...props, innerWidth, innerHeight, + outerWidth, + outerHeight, + series, + xScale, + areaGenerator, })} ) diff --git a/packages/bump/src/area-bump/AreasLabels.js b/packages/bump/src/area-bump/AreasLabels.js index da5fcee46..c557d65c2 100644 --- a/packages/bump/src/area-bump/AreasLabels.js +++ b/packages/bump/src/area-bump/AreasLabels.js @@ -13,14 +13,7 @@ import { useInheritedColor } from '@nivo/colors' import { useTooltip } from '@nivo/tooltip' import AreaTooltip from './AreaTooltip' -const AreasLabels = ({ - series, - position, - margin, - padding, - color, - setCurrentSerie, -}) => { +const AreasLabels = ({ series, position, margin, padding, color, setCurrentSerie }) => { const theme = useTheme() const getColor = useInheritedColor(color, theme) diff --git a/packages/bump/src/area-bump/StaticArea.js b/packages/bump/src/area-bump/StaticArea.js new file mode 100644 index 000000000..b0753f50a --- /dev/null +++ b/packages/bump/src/area-bump/StaticArea.js @@ -0,0 +1,54 @@ +/* + * This file is part of the nivo project. + * + * Copyright 2016-present, Raphaël Benitte. + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +import React, { memo } from 'react' +import PropTypes from 'prop-types' +import { blendModePropType } from '@nivo/core' + +const StaticArea = ({ + serie, + areaGenerator, + blendMode, + onMouseEnter, + onMouseMove, + onMouseLeave, +}) => { + return ( + + ) +} + +StaticArea.propTypes = { + serie: PropTypes.shape({ + id: PropTypes.string.isRequired, + color: PropTypes.string.isRequired, + style: PropTypes.shape({ + fillOpacity: PropTypes.number.isRequired, + borderWidth: PropTypes.number.isRequired, + borderOpacity: PropTypes.number.isRequired, + }).isRequired, + }).isRequired, + areaGenerator: PropTypes.func.isRequired, + blendMode: blendModePropType.isRequired, + onMouseEnter: PropTypes.func, + onMouseMove: PropTypes.func, + onMouseLeave: PropTypes.func, +} + +export default memo(StaticArea) diff --git a/packages/bump/src/area-bump/compute.js b/packages/bump/src/area-bump/compute.js index 433c103ec..40fb02cfd 100644 --- a/packages/bump/src/area-bump/compute.js +++ b/packages/bump/src/area-bump/compute.js @@ -9,14 +9,7 @@ import sortBy from 'lodash/sortBy' import { scalePoint, scaleLinear } from 'd3-scale' -export const computeSeries = ({ - data, - width, - height, - align, - spacing, - xPadding, -}) => { +export const computeSeries = ({ data, width, height, align, spacing, xPadding }) => { const slices = new Map() let maxSum = null @@ -28,7 +21,7 @@ export const computeSeries = ({ slices.set(datum.x, { id: datum.x, total: 0, - values: new Map() + values: new Map(), }) } @@ -39,7 +32,7 @@ export const computeSeries = ({ slice.values.set(serie.id, { serieId: serie.id, - value: datum.y + value: datum.y, }) if (total === null || total > maxSum) { @@ -77,11 +70,12 @@ export const computeSeries = ({ const sliceValue = slice.values.get(value.serieId) sliceValue.position = position sliceValue.height = heightScale(value.value) - sliceValue.beforeHeight = heightScale(beforeValue) + offset + spacing * (previousValues.length + .5) + sliceValue.beforeHeight = + heightScale(beforeValue) + offset + spacing * (previousValues.length + 0.5) }) }) - const areaPointPadding = xScale.step() * Math.min(xPadding * .5, .5) + const areaPointPadding = xScale.step() * Math.min(xPadding * 0.5, 0.5) const series = data.map(serie => { const serieCopy = { ...serie } @@ -101,7 +95,7 @@ export const computeSeries = ({ x, y, height, - data: { ...datum } + data: { ...datum }, }) if (i > 0) { serieCopy.areaPoints.push({ x: x - areaPointPadding, y0, y1 }) @@ -111,7 +105,7 @@ export const computeSeries = ({ serieCopy.areaPoints.push({ x: x + areaPointPadding, y0, y1 }) } }) - + return serieCopy }) diff --git a/packages/bump/src/area-bump/hooks.js b/packages/bump/src/area-bump/hooks.js index 90cd397ca..e64a8b84e 100644 --- a/packages/bump/src/area-bump/hooks.js +++ b/packages/bump/src/area-bump/hooks.js @@ -8,29 +8,30 @@ */ import { useMemo } from 'react' import { area as d3Area, curveBasis, curveLinear } from 'd3-shape' -import { useOrdinalColorScale } from '@nivo/colors' +import { useTheme } from '@nivo/core' +import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors' import { computeSeries } from './compute' -export const useAreaBumpSeries = ({ - data, - width, - height, - align, - spacing, - xPadding -}) => useMemo( - () => computeSeries({ data, width, height, align, spacing, xPadding }), - [data, width, height, align, spacing, xPadding] -) - -export const useAreaGenerator = interpolation => useMemo( - () => d3Area() - .x(d => d.x) - .y0(d => d.y0) - .y1(d => d.y1) - .curve(interpolation === 'smooth' ? curveBasis : curveLinear), - [interpolation] -) +export const useAreaBumpSeries = ({ data, width, height, align, spacing, xPadding }) => + useMemo(() => computeSeries({ data, width, height, align, spacing, xPadding }), [ + data, + width, + height, + align, + spacing, + xPadding, + ]) + +export const useAreaGenerator = interpolation => + useMemo( + () => + d3Area() + .x(d => d.x) + .y0(d => d.y0) + .y1(d => d.y1) + .curve(interpolation === 'smooth' ? curveBasis : curveLinear), + [interpolation] + ) export const useSerieDerivedProp = instruction => useMemo(() => { @@ -45,11 +46,12 @@ export const useSerieStyle = ({ borderWidth, activeBorderWidth, inactiveBorderWidth, + borderColor, borderOpacity, activeBorderOpacity, inactiveBorderOpacity, isInteractive, - current + current, }) => { const getFillOpacity = useSerieDerivedProp(fillOpacity) const getActiveFillOpacity = useSerieDerivedProp(activeFillOpacity) @@ -59,6 +61,9 @@ export const useSerieStyle = ({ const getActiveBorderWidth = useSerieDerivedProp(activeBorderWidth) const getInactiveBorderWidth = useSerieDerivedProp(inactiveBorderWidth) + const theme = useTheme() + const getBorderColor = useInheritedColor(borderColor, theme) + const getBorderOpacity = useSerieDerivedProp(borderOpacity) const getActiveBorderOpacity = useSerieDerivedProp(activeBorderOpacity) const getInactiveBorderOpacity = useSerieDerivedProp(inactiveBorderOpacity) @@ -67,45 +72,39 @@ export const useSerieStyle = ({ () => serie => ({ fillOpacity: getFillOpacity(serie), borderWidth: getBorderWidth(serie), - borderOpacity: getBorderOpacity(serie) + borderColor: getBorderColor(serie), + borderOpacity: getBorderOpacity(serie), }), - [getFillOpacity, getBorderWidth, getBorderOpacity] + [getFillOpacity, getBorderWidth, getBorderColor, getBorderOpacity] ) const getActiveStyle = useMemo( () => serie => ({ fillOpacity: getActiveFillOpacity(serie), borderWidth: getActiveBorderWidth(serie), - borderOpacity: getActiveBorderOpacity(serie) + borderColor: getBorderColor(serie), + borderOpacity: getActiveBorderOpacity(serie), }), - [getActiveFillOpacity, getActiveBorderWidth, getActiveBorderOpacity] + [getActiveFillOpacity, getActiveBorderWidth, getBorderColor, getActiveBorderOpacity] ) const getInactiveStyle = useMemo( () => serie => ({ fillOpacity: getInactiveFillOpacity(serie), borderWidth: getInactiveBorderWidth(serie), - borderOpacity: getInactiveBorderOpacity(serie) + borderColor: getBorderColor(serie), + borderOpacity: getInactiveBorderOpacity(serie), }), - [getInactiveFillOpacity, getInactiveBorderWidth, getInactiveBorderOpacity] + [getInactiveFillOpacity, getInactiveBorderWidth, getBorderColor, getInactiveBorderOpacity] ) - return useMemo( - () => { - if (!isInteractive) return getNormalStyle - - return serie => { - if (current === null) return getNormalStyle(serie) - if (serie.id === current) return getActiveStyle(serie) - return getInactiveStyle(serie) - } - }, - [ - getNormalStyle, - getActiveStyle, - getInactiveStyle, - isInteractive, - current - ] - ) + return useMemo(() => { + if (!isInteractive) return getNormalStyle + + return serie => { + if (current === null) return getNormalStyle(serie) + if (serie.id === current) return getActiveStyle(serie) + return getInactiveStyle(serie) + } + }, [getNormalStyle, getActiveStyle, getInactiveStyle, isInteractive, current]) } export const useAreaBump = ({ @@ -123,11 +122,12 @@ export const useAreaBump = ({ borderWidth, activeBorderWidth, inactiveBorderWidth, + borderColor, borderOpacity, activeBorderOpacity, inactiveBorderOpacity, isInteractive, - current + current, }) => { const { series: rawSeries, xScale, heightScale } = useAreaBumpSeries({ data, @@ -148,19 +148,22 @@ export const useAreaBump = ({ borderWidth, activeBorderWidth, inactiveBorderWidth, + borderColor, borderOpacity, activeBorderOpacity, inactiveBorderOpacity, isInteractive, - current + current, }) const series = useMemo( - () => rawSeries.map(serie => ({ - ...serie, - color: getColor(serie), - style: getSerieStyle(serie) - })), + () => + rawSeries.map(serie => { + serie.color = getColor(serie) + serie.style = getSerieStyle(serie) + + return serie + }), [rawSeries, getColor, getSerieStyle] ) @@ -170,4 +173,4 @@ export const useAreaBump = ({ heightScale, areaGenerator, } -} \ No newline at end of file +} diff --git a/packages/bump/src/area-bump/props.js b/packages/bump/src/area-bump/props.js index bf6923305..49524d53f 100644 --- a/packages/bump/src/area-bump/props.js +++ b/packages/bump/src/area-bump/props.js @@ -8,7 +8,7 @@ */ import PropTypes from 'prop-types' import { motionPropTypes, blendModePropType } from '@nivo/core' -import { ordinalColorsPropType } from '@nivo/colors' +import { ordinalColorsPropType, inheritedColorPropType } from '@nivo/colors' import { axisPropType } from '@nivo/axes' const commonPropTypes = { @@ -27,10 +27,7 @@ const commonPropTypes = { align: PropTypes.oneOf(['start', 'middle', 'end']).isRequired, layers: PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.oneOf(['grid', 'axes', 'labels', 'areas']), - PropTypes.func, - ]) + PropTypes.oneOfType([PropTypes.oneOf(['grid', 'axes', 'labels', 'areas']), PropTypes.func]) ).isRequired, interpolation: PropTypes.oneOf(['linear', 'smooth']).isRequired, @@ -45,6 +42,7 @@ const commonPropTypes = { borderWidth: PropTypes.number.isRequired, activeBorderWidth: PropTypes.number.isRequired, inactiveBorderWidth: PropTypes.number.isRequired, + borderColor: inheritedColorPropType.isRequired, borderOpacity: PropTypes.number.isRequired, activeBorderOpacity: PropTypes.number.isRequired, inactiveBorderOpacity: PropTypes.number.isRequired, @@ -79,12 +77,13 @@ const commonDefaultProps = { colors: { scheme: 'nivo' }, blendMode: 'normal', - fillOpacity: .8, + fillOpacity: 0.8, activeFillOpacity: 1, - inactiveFillOpacity: .15, + inactiveFillOpacity: 0.15, borderWidth: 1, activeBorderWidth: 1, inactiveBorderWidth: 0, + borderColor: { from: 'color', modifiers: [['darker', 0.4]] }, borderOpacity: 1, activeBorderOpacity: 1, inactiveBorderOpacity: 0, diff --git a/packages/bump/src/bump/Line.js b/packages/bump/src/bump/Line.js index 94786a48d..c19835914 100644 --- a/packages/bump/src/bump/Line.js +++ b/packages/bump/src/bump/Line.js @@ -45,7 +45,7 @@ const Line = ({ serie, lineGenerator, yScale, getStyle, setCurrentSerie }) => { strokeLinecap="round" strokeOpacity={opacity} style={{ - pointerEvents: 'none' + pointerEvents: 'none', }} /> { return ( { const getLineWidth = useSerieDerivedProp(lineWidth) const getActiveLineWidth = useSerieDerivedProp(activeLineWidth) @@ -77,7 +77,7 @@ export const useSerieStyle = ({ const getNormalStyle = useMemo( () => serie => ({ lineWidth: getLineWidth(serie), - opacity: getOpacity(serie) + opacity: getOpacity(serie), }), [getLineWidth, getOpacity] ) @@ -96,24 +96,15 @@ export const useSerieStyle = ({ [getInactiveLineWidth, getInactiveOpacity] ) - return useMemo( - () => { - if (!isInteractive) return getNormalStyle - - return serie => { - if (current === null) return getNormalStyle(serie) - if (serie.id === current) return getActiveStyle(serie) - return getInactiveStyle(serie) - } - }, - [ - getNormalStyle, - getActiveStyle, - getInactiveStyle, - isInteractive, - current - ] - ) + return useMemo(() => { + if (!isInteractive) return getNormalStyle + + return serie => { + if (current === null) return getNormalStyle(serie) + if (serie.id === current) return getActiveStyle(serie) + return getInactiveStyle(serie) + } + }, [getNormalStyle, getActiveStyle, getInactiveStyle, isInteractive, current]) } export const usePointStyle = ({ @@ -131,13 +122,13 @@ export const usePointStyle = ({ const getInactiveSize = useSerieDerivedProp(inactiveSize) const getBorderWidth = useSerieDerivedProp(borderWidth) - const getActiveBorderWidth= useSerieDerivedProp(activeBorderWidth) + const getActiveBorderWidth = useSerieDerivedProp(activeBorderWidth) const getInactiveBorderWidth = useSerieDerivedProp(inactiveBorderWidth) const getNormalStyle = useMemo( () => point => ({ size: getSize(point.serie), - borderWidth: getBorderWidth(point.serie) + borderWidth: getBorderWidth(point.serie), }), [getSize, getBorderWidth] ) @@ -156,24 +147,15 @@ export const usePointStyle = ({ [getInactiveSize, getInactiveBorderWidth] ) - return useMemo( - () => { - if (!isInteractive) return getNormalStyle - - return point => { - if (currentSerie === null) return getNormalStyle(point) - if (point.serie.id === currentSerie) return getActiveStyle(point) - return getInactiveStyle(point) - } - }, - [ - getNormalStyle, - getActiveStyle, - getInactiveStyle, - isInteractive, - currentSerie - ] - ) + return useMemo(() => { + if (!isInteractive) return getNormalStyle + + return point => { + if (currentSerie === null) return getNormalStyle(point) + if (point.serie.id === currentSerie) return getActiveStyle(point) + return getInactiveStyle(point) + } + }, [getNormalStyle, getActiveStyle, getInactiveStyle, isInteractive, currentSerie]) } export const usePointSize = ({ size, activeSize, inactiveSize, current }) => { diff --git a/packages/bump/src/compute.js b/packages/bump/src/compute.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/bump/src/hooks.js b/packages/bump/src/hooks.js deleted file mode 100644 index 8e1256170..000000000 --- a/packages/bump/src/hooks.js +++ /dev/null @@ -1,87 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ -import { useMemo } from 'react' -import { scalePoint } from 'd3-scale' -import { line as d3Line, curveBasis } from 'd3-shape' - -export const useScales = ({ width, height, data, xOuterPadding, yOuterPadding }) => - useMemo(() => { - let xValues = new Set() - data.forEach(serie => { - serie.data.forEach(datum => { - if (!xValues.has(datum.x)) { - xValues.add(datum.x) - } - }) - }) - - return { - xScale: scalePoint() - .domain(Array.from(xValues)) - .range([0, width]) - .padding(xOuterPadding), - yScale: scalePoint() - .domain(data.map((serie, i) => i + 1)) - .range([0, height]) - .padding(yOuterPadding), - } - }, [width, height, data, xOuterPadding, yOuterPadding]) - -export const useLineGenerator = () => useMemo(() => d3Line().curve(curveBasis), []) - -export const useSerieDerivedProp = instruction => - useMemo(() => { - if (typeof instruction === 'function') return instruction - return () => instruction - }, [instruction]) - -export const useLineWidth = ({ lineWidth, activeLineWidth, inactiveLineWidth, current }) => { - const getLineWidth = useSerieDerivedProp(lineWidth) - const getActiveLineWidth = useSerieDerivedProp(activeLineWidth) - const getInactiveLineWidth = useSerieDerivedProp(inactiveLineWidth) - - return useMemo( - () => serie => { - if (current === null) return getLineWidth(serie) - if (serie.id === current) return getActiveLineWidth(serie) - return getInactiveLineWidth(serie) - }, - [getLineWidth, getActiveLineWidth, getInactiveLineWidth, current] - ) -} - -export const useSerieOpacity = ({ opacity, activeOpacity, inactiveOpacity, current }) => { - const getOpacity = useSerieDerivedProp(opacity) - const getActiveOpacity = useSerieDerivedProp(activeOpacity) - const getInactiveOpacity = useSerieDerivedProp(inactiveOpacity) - - return useMemo( - () => serie => { - if (current === null) return getOpacity(serie) - if (serie.id === current) return getActiveOpacity(serie) - return getInactiveOpacity(serie) - }, - [getOpacity, getActiveOpacity, getInactiveOpacity, current] - ) -} - -export const usePointSize = ({ size, activeSize, inactiveSize, current }) => { - const getSize = useSerieDerivedProp(size) - const getActiveSize = useSerieDerivedProp(activeSize) - const getInactiveSize = useSerieDerivedProp(inactiveSize) - - return useMemo( - () => point => { - if (current === null) return getSize(point.serie) - if (point.serie.id === current) return getActiveSize(point.serie) - return getInactiveSize(point.serie) - }, - [getSize, getActiveSize, getInactiveSize, current] - ) -} diff --git a/packages/bump/src/index.js b/packages/bump/src/index.js index afddc2e49..3d421f270 100644 --- a/packages/bump/src/index.js +++ b/packages/bump/src/index.js @@ -6,7 +6,5 @@ * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ -export { default as Bump } from './Bump' -export { default as ResponsiveBump } from './ResponsiveBump' -export * from './props' -export * from './hooks' +export * from './bump' +export * from './area-bump' diff --git a/packages/bump/src/props.js b/packages/bump/src/props.js deleted file mode 100644 index 185e71dbc..000000000 --- a/packages/bump/src/props.js +++ /dev/null @@ -1,116 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ -import PropTypes from 'prop-types' -import { motionPropTypes } from '@nivo/core' -import { ordinalColorsPropType } from '@nivo/colors' -import { axisPropType } from '@nivo/axes' - -const commonPropTypes = { - data: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string.isRequired, - data: PropTypes.arrayOf( - PropTypes.shape({ - x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - }) - ).isRequired, - }) - ).isRequired, - - xOuterPadding: PropTypes.number.isRequired, - yOuterPadding: PropTypes.number.isRequired, - - layers: PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.oneOf(['grid', 'axes', 'labels', 'lines', 'points']), - PropTypes.func, - ]) - ).isRequired, - - lineInterpolation: PropTypes.oneOf(['linear', 'smooth']).isRequired, - lineCurvaturePadding: PropTypes.number.isRequired, - lineWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, - lineOpacity: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, - activeLineWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, - activeLineOpacity: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, - inactiveLineWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, - inactiveLineOpacity: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, - - startLabel: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.string, PropTypes.func]) - .isRequired, - startLabelPadding: PropTypes.number.isRequired, - endLabel: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.string, PropTypes.func]) - .isRequired, - endLabelPadding: PropTypes.number.isRequired, - - pointSize: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, - activePointSize: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, - inactivePointSize: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, - pointColor: PropTypes.any.isRequired, - - enableGridX: PropTypes.bool.isRequired, - enableGridY: PropTypes.bool.isRequired, - axisTop: axisPropType, - axisRight: axisPropType, - axisBottom: axisPropType, - axisLeft: axisPropType, - - colors: ordinalColorsPropType.isRequired, - - isInteractive: PropTypes.bool.isRequired, -} - -export const BumpPropTypes = { - ...commonPropTypes, - ...motionPropTypes, -} - -const commonDefaultProps = { - xOuterPadding: 0.5, - yOuterPadding: 0.5, - - layers: ['grid', 'axes', 'labels', 'lines', 'points'], - - lineInterpolation: 'smooth', - lineCurvaturePadding: 0.25, - lineWidth: 2, - lineOpacity: 1, - activeLineWidth: 4, - activeLineOpacity: 1, - inactiveLineWidth: 1, - inactiveLineOpacity: 0.3, - - startLabel: false, - startLabelPadding: 16, - startLabelTextColor: { from: 'color' }, - endLabel: 'id', - endLabelPadding: 16, - endLabelTextColor: { from: 'color' }, - - pointSize: 6, - pointColor: { from: 'serie.color' }, - - enableGridX: true, - enableGridY: true, - axisTop: {}, - axisBottom: {}, - axisLeft: {}, - - colors: { scheme: 'nivo' }, - - isInteractive: true, -} - -export const BumpDefaultProps = { - ...commonDefaultProps, - animate: true, - motionStiffness: 90, - motionDamping: 15, -} diff --git a/website/src/components/icons/BumpIcon.js b/website/src/components/icons/BumpIcon.js index 2ede53878..faa8ad453 100644 --- a/website/src/components/icons/BumpIcon.js +++ b/website/src/components/icons/BumpIcon.js @@ -32,8 +32,8 @@ const chartProps = { { x: 2, y: 2, - } - ] + }, + ], }, { id: 'B', @@ -49,8 +49,8 @@ const chartProps = { { x: 2, y: 3, - } - ] + }, + ], }, { id: 'C', @@ -66,8 +66,8 @@ const chartProps = { { x: 2, y: 1, - } - ] + }, + ], }, ], margin: { @@ -77,7 +77,7 @@ const chartProps = { left: 5, }, xOuterPadding: 0, - yOuterPadding: .6, + yOuterPadding: 0.6, lineWidth: 5, pointSize: 10, endLabel: false, @@ -112,10 +112,10 @@ const BumpIconItem = ({ type }) => ( grid: { line: { strokeWidth: 2, - strokeOpacity: .5, - stroke: colors[type].colors[1] - } - } + strokeOpacity: 0.5, + stroke: colors[type].colors[1], + }, + }, }} /> diff --git a/website/src/data/components/area-bump/props.js b/website/src/data/components/area-bump/props.js index 541ae11ee..09dd95211 100644 --- a/website/src/data/components/area-bump/props.js +++ b/website/src/data/components/area-bump/props.js @@ -101,10 +101,7 @@ const props = [ defaultValue: defaults.interpolation, controlType: 'radio', controlOptions: { - choices: [ - { label: 'smooth', value: 'smooth' }, - { label: 'linear', value: 'linear' }, - ], + choices: [{ label: 'smooth', value: 'smooth' }, { label: 'linear', value: 'linear' }], }, }, { @@ -155,7 +152,7 @@ const props = [ { key: 'fillOpacity', group: 'Style', - type: 'number', + type: 'number | (serie: Serie) => number', help: 'Area fill opacity.', defaultValue: defaults.fillOpacity, controlType: 'opacity', @@ -163,7 +160,7 @@ const props = [ { key: 'activeFillOpacity', group: 'Style', - type: 'number', + type: 'number | (serie: Serie) => number', help: 'Area fill opacity for active series.', defaultValue: defaults.activeFillOpacity, controlType: 'opacity', @@ -171,11 +168,71 @@ const props = [ { key: 'inactiveFillOpacity', group: 'Style', - type: 'number', + type: 'number | (serie: Serie) => number', help: 'Area fill opacity for inactive series.', defaultValue: defaults.inactiveFillOpacity, controlType: 'opacity', }, + { + key: 'borderWidth', + group: 'Style', + type: 'number | (serie: Serie) => number', + help: 'Area border width.', + defaultValue: defaults.borderWidth, + controlType: 'lineWidth', + }, + { + key: 'activeBorderWidth', + group: 'Style', + type: 'number | (serie: Serie) => number', + help: 'Area border width for active series.', + defaultValue: defaults.activeBorderWidth, + controlType: 'lineWidth', + }, + { + key: 'inactiveBorderWidth', + group: 'Style', + type: 'number | (serie: Serie) => number', + help: 'Area border width for inactive series.', + defaultValue: defaults.inactiveBorderWidth, + controlType: 'lineWidth', + }, + { + key: 'borderColor', + help: 'Method to compute area border color.', + type: 'string | object | Function', + required: false, + defaultValue: defaults.borderColor, + controlType: 'inheritedColor', + group: 'Style', + controlOptions: { + withCustomColor: true, + }, + }, + { + key: 'borderOpacity', + group: 'Style', + type: 'number | (serie: Serie) => number', + help: 'Area border opacity.', + defaultValue: defaults.borderOpacity, + controlType: 'opacity', + }, + { + key: 'activeBorderOpacity', + group: 'Style', + type: 'number | (serie: Serie) => number', + help: 'Area border opacity for active series.', + defaultValue: defaults.activeBorderOpacity, + controlType: 'opacity', + }, + { + key: 'inactiveBorderOpacity', + group: 'Style', + type: 'number | (serie: Serie) => number', + help: 'Area border opacity for inactive series.', + defaultValue: defaults.inactiveBorderOpacity, + controlType: 'opacity', + }, { key: 'startLabel', group: 'Labels', @@ -234,6 +291,15 @@ const props = [ withCustomColor: true, }, }, + { + key: 'enableGridX', + group: 'Grid & Axes', + help: 'Enable/disable x grid.', + type: 'boolean', + required: false, + defaultValue: defaults.enableGridX, + controlType: 'switch', + }, { key: 'isInteractive', help: 'Enable/disable interactivity.', diff --git a/website/src/pages/area-bump/index.js b/website/src/pages/area-bump/index.js index 95b848115..9856d814d 100644 --- a/website/src/pages/area-bump/index.js +++ b/website/src/pages/area-bump/index.js @@ -51,6 +51,7 @@ const initialProperties = { borderWidth: AreaBumpDefaultProps.borderWidth, activeBorderWidth: AreaBumpDefaultProps.activeBorderWidth, inactiveBorderWidth: AreaBumpDefaultProps.inactiveBorderWidth, + borderColor: AreaBumpDefaultProps.borderColor, borderOpacity: AreaBumpDefaultProps.borderOpacity, activeBorderOpacity: AreaBumpDefaultProps.activeBorderOpacity, inactiveBorderOpacity: AreaBumpDefaultProps.inactiveBorderOpacity, diff --git a/website/src/styles/icons.css b/website/src/styles/icons.css index 6ee90859d..d7129ff82 100644 --- a/website/src/styles/icons.css +++ b/website/src/styles/icons.css @@ -1,5 +1,5 @@ /* glue: 0.13 hash: c3ab469375 */ - .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, @@ -104,642 +104,646 @@ .sprite-icons-bar-light-colored, .sprite-icons-bar-dark-neutral, .sprite-icons-bar-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-swarmplot-light-neutral { - background-position: -244px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-swarmplot-light-colored { - background-position: -244px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-swarmplot-dark-neutral { - background-position: -244px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-swarmplot-dark-colored { - background-position: -244px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-red { - background-position: -4px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-light-neutral { - background-position: -64px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-light-colored { - background-position: -124px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-grey { - background-position: -184px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-dark-neutral { - background-position: -244px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-sunburst-dark-colored { - background-position: -304px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-stream-light-neutral { - background-position: -304px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-stream-light-colored { - background-position: -304px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-stream-dark-neutral { - background-position: -304px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-stream-dark-colored { - background-position: -304px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-scatterplot-light-neutral { - background-position: -4px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-scatterplot-light-colored { - background-position: -64px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-scatterplot-dark-neutral { - background-position: -124px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-scatterplot-dark-colored { - background-position: -184px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-red { - background-position: -244px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-light-neutral { - background-position: -304px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-light-colored { - background-position: -364px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-grey { - background-position: -364px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-dark-neutral { - background-position: -364px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-sankey-dark-colored { - background-position: -364px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-radar-light-neutral { - background-position: -364px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-radar-light-colored { - background-position: -364px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-radar-dark-neutral { - background-position: -4px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-radar-dark-colored { - background-position: -64px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-pie-light-neutral { - background-position: -124px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-pie-light-colored { - background-position: -184px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-pie-dark-neutral { - background-position: -244px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-pie-dark-colored { - background-position: -304px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-parallel-coordinates-light-neutral { - background-position: -364px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-parallel-coordinates-light-colored { - background-position: -424px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-parallel-coordinates-dark-neutral { - background-position: -424px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-parallel-coordinates-dark-colored { - background-position: -424px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-nivo-icon { - background-position: -424px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-network-light-neutral { - background-position: -424px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-network-light-colored { - background-position: -424px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-network-dark-neutral { - background-position: -424px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-network-dark-colored { - background-position: -4px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-line-light-neutral { - background-position: -64px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-line-light-colored { - background-position: -124px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-line-dark-neutral { - background-position: -184px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-line-dark-colored { - background-position: -244px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-heatmap-light-neutral { - background-position: -304px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-heatmap-light-colored { - background-position: -364px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-heatmap-dark-neutral { - background-position: -424px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-heatmap-dark-colored { - background-position: -484px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-geomap-light-neutral { - background-position: -484px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-geomap-light-colored { - background-position: -484px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-geomap-dark-neutral { - background-position: -484px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-geomap-dark-colored { - background-position: -484px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-data-light-neutral { - background-position: -484px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-data-light-colored { - background-position: -484px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-data-dark-neutral { - background-position: -484px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-data-dark-colored { - background-position: -4px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-code-light-neutral { - background-position: -64px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-code-light-colored { - background-position: -124px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-code-dark-neutral { - background-position: -184px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-code-dark-colored { - background-position: -244px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-circle-packing-light-neutral { - background-position: -304px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-circle-packing-light-colored { - background-position: -364px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-circle-packing-dark-neutral { - background-position: -424px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-circle-packing-dark-colored { - background-position: -484px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-choropleth-light-neutral { - background-position: -544px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-choropleth-light-colored { - background-position: -544px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-choropleth-dark-neutral { - background-position: -544px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-choropleth-dark-colored { - background-position: -544px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-chord-light-neutral { - background-position: -544px -244px; - width: 52px; - height: 52px; - } - - .sprite-icons-chord-light-colored { - background-position: -544px -304px; - width: 52px; - height: 52px; - } - - .sprite-icons-chord-dark-neutral { - background-position: -544px -364px; - width: 52px; - height: 52px; - } - - .sprite-icons-chord-dark-colored { - background-position: -544px -424px; - width: 52px; - height: 52px; - } - - .sprite-icons-calendar-light-neutral { - background-position: -544px -484px; - width: 52px; - height: 52px; - } - - .sprite-icons-calendar-light-colored { - background-position: -4px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-calendar-dark-neutral { - background-position: -64px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-calendar-dark-colored { - background-position: -124px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-bump-light-neutral { - background-position: -184px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-bump-light-colored { - background-position: -244px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-bump-dark-neutral { - background-position: -304px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-bump-dark-colored { - background-position: -364px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-bullet-light-neutral { - background-position: -424px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-bullet-light-colored { - background-position: -484px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-bullet-dark-neutral { - background-position: -544px -544px; - width: 52px; - height: 52px; - } - - .sprite-icons-bullet-dark-colored { - background-position: -604px -4px; - width: 52px; - height: 52px; - } - - .sprite-icons-bar-light-neutral { - background-position: -604px -64px; - width: 52px; - height: 52px; - } - - .sprite-icons-bar-light-colored { - background-position: -604px -124px; - width: 52px; - height: 52px; - } - - .sprite-icons-bar-dark-neutral { - background-position: -604px -184px; - width: 52px; - height: 52px; - } - - .sprite-icons-bar-dark-colored { - background-position: -604px -244px; - 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-swarmplot-light-neutral { + background-position: -244px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-swarmplot-light-colored { + background-position: -244px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-swarmplot-dark-neutral { + background-position: -244px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-swarmplot-dark-colored { + background-position: -244px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-red { + background-position: -4px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-light-neutral { + background-position: -64px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-light-colored { + background-position: -124px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-grey { + background-position: -184px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-dark-neutral { + background-position: -244px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-sunburst-dark-colored { + background-position: -304px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-stream-light-neutral { + background-position: -304px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-stream-light-colored { + background-position: -304px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-stream-dark-neutral { + background-position: -304px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-stream-dark-colored { + background-position: -304px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-scatterplot-light-neutral { + background-position: -4px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-scatterplot-light-colored { + background-position: -64px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-scatterplot-dark-neutral { + background-position: -124px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-scatterplot-dark-colored { + background-position: -184px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-red { + background-position: -244px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-light-neutral { + background-position: -304px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-light-colored { + background-position: -364px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-grey { + background-position: -364px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-dark-neutral { + background-position: -364px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-sankey-dark-colored { + background-position: -364px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-radar-light-neutral { + background-position: -364px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-radar-light-colored { + background-position: -364px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-radar-dark-neutral { + background-position: -4px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-radar-dark-colored { + background-position: -64px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-pie-light-neutral { + background-position: -124px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-pie-light-colored { + background-position: -184px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-pie-dark-neutral { + background-position: -244px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-pie-dark-colored { + background-position: -304px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-parallel-coordinates-light-neutral { + background-position: -364px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-parallel-coordinates-light-colored { + background-position: -424px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-parallel-coordinates-dark-neutral { + background-position: -424px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-parallel-coordinates-dark-colored { + background-position: -424px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-nivo-icon { + background-position: -424px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-network-light-neutral { + background-position: -424px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-network-light-colored { + background-position: -424px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-network-dark-neutral { + background-position: -424px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-network-dark-colored { + background-position: -4px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-line-light-neutral { + background-position: -64px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-line-light-colored { + background-position: -124px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-line-dark-neutral { + background-position: -184px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-line-dark-colored { + background-position: -244px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-heatmap-light-neutral { + background-position: -304px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-heatmap-light-colored { + background-position: -364px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-heatmap-dark-neutral { + background-position: -424px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-heatmap-dark-colored { + background-position: -484px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-geomap-light-neutral { + background-position: -484px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-geomap-light-colored { + background-position: -484px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-geomap-dark-neutral { + background-position: -484px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-geomap-dark-colored { + background-position: -484px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-data-light-neutral { + background-position: -484px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-data-light-colored { + background-position: -484px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-data-dark-neutral { + background-position: -484px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-data-dark-colored { + background-position: -4px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-code-light-neutral { + background-position: -64px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-code-light-colored { + background-position: -124px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-code-dark-neutral { + background-position: -184px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-code-dark-colored { + background-position: -244px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-circle-packing-light-neutral { + background-position: -304px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-circle-packing-light-colored { + background-position: -364px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-circle-packing-dark-neutral { + background-position: -424px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-circle-packing-dark-colored { + background-position: -484px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-choropleth-light-neutral { + background-position: -544px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-choropleth-light-colored { + background-position: -544px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-choropleth-dark-neutral { + background-position: -544px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-choropleth-dark-colored { + background-position: -544px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-chord-light-neutral { + background-position: -544px -244px; + width: 52px; + height: 52px; +} + +.sprite-icons-chord-light-colored { + background-position: -544px -304px; + width: 52px; + height: 52px; +} + +.sprite-icons-chord-dark-neutral { + background-position: -544px -364px; + width: 52px; + height: 52px; +} + +.sprite-icons-chord-dark-colored { + background-position: -544px -424px; + width: 52px; + height: 52px; +} + +.sprite-icons-calendar-light-neutral { + background-position: -544px -484px; + width: 52px; + height: 52px; +} + +.sprite-icons-calendar-light-colored { + background-position: -4px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-calendar-dark-neutral { + background-position: -64px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-calendar-dark-colored { + background-position: -124px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-bump-light-neutral { + background-position: -184px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-bump-light-colored { + background-position: -244px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-bump-dark-neutral { + background-position: -304px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-bump-dark-colored { + background-position: -364px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-bullet-light-neutral { + background-position: -424px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-bullet-light-colored { + background-position: -484px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-bullet-dark-neutral { + background-position: -544px -544px; + width: 52px; + height: 52px; +} + +.sprite-icons-bullet-dark-colored { + background-position: -604px -4px; + width: 52px; + height: 52px; +} + +.sprite-icons-bar-light-neutral { + background-position: -604px -64px; + width: 52px; + height: 52px; +} + +.sprite-icons-bar-light-colored { + background-position: -604px -124px; + width: 52px; + height: 52px; +} + +.sprite-icons-bar-dark-neutral { + background-position: -604px -184px; + width: 52px; + height: 52px; +} + +.sprite-icons-bar-dark-colored { + background-position: -604px -244px; + 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, @@ -844,15 +848,19 @@ .sprite-icons-bar-light-colored, .sprite-icons-bar-dark-neutral, .sprite-icons-bar-dark-colored { - background-image: url('../assets/icons.png'); - -webkit-background-size: 660px 600px; - -moz-background-size: 660px 600px; - background-size: 660px 600px; - } - } - - @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: 660px 600px; + -moz-background-size: 660px 600px; + background-size: 660px 600px; + } +} + +@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, @@ -957,10 +965,9 @@ .sprite-icons-bar-light-colored, .sprite-icons-bar-dark-neutral, .sprite-icons-bar-dark-colored { - background-image: url('../assets/icons@2x.png'); - -webkit-background-size: 660px 600px; - -moz-background-size: 660px 600px; - background-size: 660px 600px; - } - } - \ No newline at end of file + background-image: url('../assets/icons@2x.png'); + -webkit-background-size: 660px 600px; + -moz-background-size: 660px 600px; + background-size: 660px 600px; + } +}