From fa425fa9d456c98f03c04cb6a672d927d8695f1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CJohn?= Date: Wed, 22 Apr 2020 21:22:24 -0400 Subject: [PATCH] fixes #500 | add responsive paging --- package.json | 18 +- src/DataTable/DataTable.js | 22 +- src/DataTable/Pagination.js | 31 +- .../__snapshots__/DataTable.test.js.snap | 4692 +++++++++-------- .../__snapshots__/Pagination.test.js.snap | 18 +- src/DataTable/media.js | 16 +- src/DataTable/styles.js | 2 +- src/DataTable/themes.js | 4 +- .../useDidUpdateEffect.js | 0 src/hooks/useWindowSize.js | 31 + .../DataTable/Basic/ThemeCustom.stories.js | 2 +- yarn.lock | 692 +-- 12 files changed, 2919 insertions(+), 2609 deletions(-) rename src/{DataTable => hooks}/useDidUpdateEffect.js (100%) create mode 100644 src/hooks/useWindowSize.js diff --git a/package.json b/package.json index 274eba38..07699288 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-data-table-component", - "version": "6.7.1", + "version": "6.8.0", "description": "A declarative react based data table", "main": "dist/index.cjs.js", "module": "dist/index.es.js", @@ -56,7 +56,7 @@ "@babel/core": "^7.9.0", "@babel/preset-env": "^7.9.5", "@babel/preset-react": "^7.9.4", - "@material-ui/core": "^4.9.10", + "@material-ui/core": "^4.9.11", "@material-ui/icons": "^4.9.1", "@storybook/addon-actions": "^5.3.18", "@storybook/addon-console": "^1.2.1", @@ -65,12 +65,12 @@ "@storybook/addon-options": "^5.3.18", "@storybook/addon-storysource": "^5.3.18", "@storybook/react": "^5.3.18", - "@testing-library/react": "^10.0.2", - "@typescript-eslint/eslint-plugin": "^2.27.0", - "@typescript-eslint/parser": "^2.27.0", + "@testing-library/react": "^10.0.3", + "@typescript-eslint/eslint-plugin": "^2.29.0", + "@typescript-eslint/parser": "^2.29.0", "axios": "^0.19.2", "babel-eslint": "^10.1.0", - "babel-jest": "^25.3.0", + "babel-jest": "^25.4.0", "babel-loader": "^8.1.0", "babel-plugin-module-resolver": "^4.0.0", "babel-plugin-styled-components": "^1.10.7", @@ -86,7 +86,7 @@ "eslint-plugin-react": "^7.19.0", "eslint-plugin-react-hooks": "^3.0.0", "faker": "^4.1.0", - "jest": "^25.3.0", + "jest": "^25.4.0", "jest-styled-components": "^7.0.2", "lodash-es": "^4.17.15", "memoize-one": "^5.1.1", @@ -94,7 +94,7 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "rimraf": "^3.0.2", - "rollup": "^2.6.1", + "rollup": "^2.7.2", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-copy": "^3.3.0", @@ -103,7 +103,7 @@ "rollup-plugin-uglify": "^6.0.4", "rollup-plugin-visualizer": "^4.0.4", "styled-components": "^5.0.1", - "stylelint": "^13.3.2", + "stylelint": "^13.3.3", "stylelint-config-standard": "^20.0.0", "stylelint-config-styled-components": "^0.1.1", "stylelint-processor-styled-components": "^1.10.0", diff --git a/src/DataTable/DataTable.js b/src/DataTable/DataTable.js index 0f4d8013..5d201cbf 100644 --- a/src/DataTable/DataTable.js +++ b/src/DataTable/DataTable.js @@ -18,7 +18,7 @@ import TableColExpander from './TableColExpander'; import { CellBase } from './Cell'; import NoData from './NoDataWrapper'; import NativePagination from './Pagination'; -import useDidUpdateEffect from './useDidUpdateEffect'; +import useDidUpdateEffect from '../hooks/useDidUpdateEffect'; import { propTypes, defaultProps } from './propTypes'; import { isEmpty, sort, decorateColumns, getSortDirection, getNumberOfPages, recalculatePage, isRowSelected } from './util'; import { createStyles } from './styles'; @@ -390,17 +390,17 @@ const DataTable = memo(({ )} - - {enabledPagination && ( - - )} + + {enabledPagination && ( + + )} diff --git a/src/DataTable/Pagination.js b/src/DataTable/Pagination.js index 9f55320b..c4a26617 100644 --- a/src/DataTable/Pagination.js +++ b/src/DataTable/Pagination.js @@ -4,6 +4,8 @@ import styled from 'styled-components'; import { useTableContext } from './DataTableContext'; import Select from './Select'; import { getNumberOfPages, detectRTL } from './util'; +import useWindowSize from '../hooks/useWindowSize'; +import { media, SMALL } from './media'; const defaultComponentOptions = { rowsPerPageText: 'Rows per page:', @@ -36,8 +38,13 @@ const Button = styled.button` const PageList = styled.div` display: flex; + align-items: center; border-radius: 4px; white-space: nowrap; + ${media.sm` + width: 100%; + justify-content: space-around; + `}; `; const Span = styled.span` @@ -70,6 +77,8 @@ const Pagination = ({ paginationIconPrevious, paginationComponentOptions, } = useTableContext(); + const windowSize = useWindowSize(); + const shouldShow = windowSize.width > SMALL; const isRTL = detectRTL(direction); const numPages = getNumberOfPages(rowCount, rowsPerPage); const lastIndex = currentPage * rowsPerPage; @@ -109,19 +118,25 @@ const Pagination = ({ ); } + const select = ( + + ); + return ( - {!options.noRowsPerPage && ( + {!options.noRowsPerPage && shouldShow && ( <> {options.rowsPerPageText} - + {select} )} - - {range} - + {shouldShow && ( + + {range} + + )} + - - - - - - + + + + + `; @@ -5563,9 +5577,9 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -5582,6 +5596,10 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -5608,6 +5626,16 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -5687,156 +5715,156 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
- `; @@ -6289,9 +6317,9 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -6308,6 +6336,10 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -6334,6 +6366,16 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -6413,156 +6455,156 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
- `; @@ -7015,9 +7057,9 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -7034,6 +7076,10 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -7060,6 +7106,16 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -7139,156 +7195,156 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
- `; @@ -7741,9 +7797,9 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -7760,6 +7816,10 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -7786,6 +7846,16 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -7865,156 +7935,156 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
- `; @@ -8484,9 +8554,9 @@ exports[`DataTable::Pagination should navigate to page 1 if the table is sorted } .c23:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c23:hover:not(:disabled) { @@ -8503,6 +8573,10 @@ exports[`DataTable::Pagination should navigate to page 1 if the table is sorted display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -8529,6 +8603,16 @@ exports[`DataTable::Pagination should navigate to page 1 if the table is sorted margin: 0 4px; } +@media screen and (max-width:599px) { + .c22 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -8614,156 +8698,156 @@ exports[`DataTable::Pagination should navigate to page 1 if the table is sorted
- `; @@ -9216,9 +9300,9 @@ exports[`DataTable::Pagination should recalculate pagination position if there i } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -9235,6 +9319,10 @@ exports[`DataTable::Pagination should recalculate pagination position if there i display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -9261,6 +9349,16 @@ exports[`DataTable::Pagination should recalculate pagination position if there i margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -9340,158 +9438,158 @@ exports[`DataTable::Pagination should recalculate pagination position if there i
- `; @@ -9944,9 +10042,9 @@ exports[`DataTable::Pagination should render correctly if pagination is enabled } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -9963,6 +10061,10 @@ exports[`DataTable::Pagination should render correctly if pagination is enabled display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -9989,6 +10091,16 @@ exports[`DataTable::Pagination should render correctly if pagination is enabled margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -10086,173 +10198,173 @@ exports[`DataTable::Pagination should render correctly if pagination is enabled
- `; @@ -10705,9 +10817,9 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -10724,6 +10836,10 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -10750,6 +10866,16 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -10847,173 +10973,173 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
- `; @@ -11466,9 +11592,9 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -11485,6 +11611,10 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -11511,6 +11641,16 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -11608,178 +11748,178 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
- `; @@ -12232,9 +12372,9 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -12251,6 +12391,10 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -12277,6 +12421,16 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -12374,178 +12528,178 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
- `; @@ -12943,9 +13097,9 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen } .c19:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c19:hover:not(:disabled) { @@ -12962,6 +13116,10 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -12977,6 +13135,16 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen margin: 0 24px; } +@media screen and (max-width:599px) { + .c18 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -13074,120 +13242,120 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
- `; @@ -13640,9 +13808,9 @@ exports[`DataTable::Pagination should render correctly when paginationResetDefau } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -13659,6 +13827,10 @@ exports[`DataTable::Pagination should render correctly when paginationResetDefau display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -13685,6 +13857,16 @@ exports[`DataTable::Pagination should render correctly when paginationResetDefau margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -13764,156 +13946,156 @@ exports[`DataTable::Pagination should render correctly when paginationResetDefau
- `; @@ -26519,9 +26701,9 @@ exports[`DataTable::direction should render correctly when direction is auto 1`] } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -26538,6 +26720,10 @@ exports[`DataTable::direction should render correctly when direction is auto 1`] display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -26564,6 +26750,16 @@ exports[`DataTable::direction should render correctly when direction is auto 1`] margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
@@ -26661,173 +26857,173 @@ exports[`DataTable::direction should render correctly when direction is auto 1`]
- `; @@ -27280,9 +27476,9 @@ exports[`DataTable::direction should render correctly when direction is ltr 1`] } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -27299,6 +27495,10 @@ exports[`DataTable::direction should render correctly when direction is ltr 1`] display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -27325,6 +27525,16 @@ exports[`DataTable::direction should render correctly when direction is ltr 1`] margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
- `; @@ -28045,9 +28255,9 @@ exports[`DataTable::direction should render correctly when direction is rtl 1`] } .c22:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c22:hover:not(:disabled) { @@ -28064,6 +28274,10 @@ exports[`DataTable::direction should render correctly when direction is rtl 1`] display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -28090,6 +28304,16 @@ exports[`DataTable::direction should render correctly when direction is rtl 1`] margin: 0 4px; } +@media screen and (max-width:599px) { + .c21 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +
- `; @@ -29018,7 +29242,7 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true } .c17:disabled { - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); } .c17:hover:not(:disabled) { @@ -29630,7 +29854,7 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true } .c17:disabled { - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); } .c17:hover:not(:disabled) { @@ -30242,7 +30466,7 @@ exports[`DataTable::expandableRows should not expand a row if the expander row i } .c17:disabled { - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); } .c17:hover:not(:disabled) { @@ -31854,7 +32078,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRowExp } .c17:disabled { - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); } .c17:hover:not(:disabled) { @@ -32462,7 +32686,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i } .c17:disabled { - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); } .c17:hover:not(:disabled) { @@ -33053,7 +33277,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i } .c17:disabled { - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); } .c17:hover:not(:disabled) { @@ -51131,7 +51355,7 @@ exports[`should render correctly when conditionalRowStyles is used with an expan } .c17:disabled { - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); } .c17:hover:not(:disabled) { diff --git a/src/DataTable/__tests__/__snapshots__/Pagination.test.js.snap b/src/DataTable/__tests__/__snapshots__/Pagination.test.js.snap index 3c33d2ed..024115f2 100644 --- a/src/DataTable/__tests__/__snapshots__/Pagination.test.js.snap +++ b/src/DataTable/__tests__/__snapshots__/Pagination.test.js.snap @@ -107,9 +107,9 @@ exports[`should render correctly with default props 1`] = ` } .c6:disabled { - opacity: 0.4; cursor: unset; - color: rgba(0,0,0,0.12); + color: rgba(0,0,0,.18); + fill: rgba(0,0,0,.18); } .c6:hover:not(:disabled) { @@ -126,6 +126,10 @@ exports[`should render correctly with default props 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; white-space: nowrap; } @@ -152,6 +156,16 @@ exports[`should render correctly with default props 1`] = ` margin: 0 4px; } +@media screen and (max-width:599px) { + .c5 { + width: 100%; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + } +} +