UNPKG

@codegouvfr/react-dsfr

Version:

French State Design System React integration library

897 lines (693 loc) 24.5 kB
/*! * DSFR v1.13.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ .fr-table { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--green-tilleul-verveine { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--green-tilleul-verveine.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--green-bourgeon { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--green-bourgeon.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--green-emeraude { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--green-emeraude.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--green-menthe { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--green-menthe.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--green-archipel { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--green-archipel.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--blue-ecume { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--blue-ecume.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--blue-cumulus { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--blue-cumulus.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--purple-glycine { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--purple-glycine.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--pink-macaron { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--pink-macaron.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--pink-tuile { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--pink-tuile.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--yellow-tournesol { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--yellow-tournesol.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--yellow-moutarde { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--yellow-moutarde.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--orange-terre-battue { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--orange-terre-battue.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--brown-cafe-creme { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--brown-cafe-creme.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--brown-caramel { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--brown-caramel.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--brown-opera { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--brown-opera.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--beige-gris-galet { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--beige-gris-galet.fr-table--bordered > table tbody tr:last-child { background-image: none; } .fr-table--bordered > table tbody tr { /* Style bordered, enleve le style even/odd */ } @media (min-width: 36em) { /*! media sm */ } @media (min-width: 48em) { /*! media md */ } @media (min-width: 62em) { /*! media lg */ } @media (min-width: 78em) { /*! media xl */ } @media screen and (min-width: 0\0) and (min-resolution: 72dpi) { .fr-table__header .fr-segmented { flex: 1; } .fr-table__header .fr-table__detail { flex: 2; } .fr-table__content table { background-image: none; } .fr-table__content table thead tr th, .fr-table__content table thead tr th:last-child { background-image: none; } .fr-table__content table thead tr th[role=columnheader] { background-size: 1px 100%; background-repeat: no-repeat; background-position: 100% 0; } .fr-table__content table tbody tr { background-image: none; } .fr-table__content table tbody tr[aria-selected=true]::after { content: none; } .fr-table__content table tbody tr[aria-selected=true] th, .fr-table__content table tbody tr[aria-selected=true] td { border-top: 2px solid #000091; border-bottom: 2px solid #000091; } .fr-table__content table tbody tr[aria-selected=true] th:first-child, .fr-table__content table tbody tr[aria-selected=true] td:first-child { border-left: 2px solid #000091; } .fr-table__content table tbody tr[aria-selected=true] th:last-child, .fr-table__content table tbody tr[aria-selected=true] td:last-child { border-right: 2px solid #000091; } .fr-table[data-fr-js-table=true] .fr-table__wrapper::after { content: none; } .fr-table[data-fr-js-table=true].fr-table--caption-bottom caption { position: relative; margin-bottom: 1rem; } .fr-table[data-fr-js-table=true] caption { position: relative; margin-bottom: 1rem; } .fr-table--bordered table th:last-child, .fr-table--bordered table td:last-child { border-right: none; } .fr-table__wrapper::after { background-image: linear-gradient(0deg, #929292, #929292), linear-gradient(0deg, #929292, #929292), linear-gradient(0deg, #929292, #929292), linear-gradient(0deg, #929292, #929292); } .fr-table__content table caption { color: #161616; } .fr-table__content table thead th { background-color: #f6f6f6; background-image: linear-gradient(0deg, #3a3a3a, #3a3a3a), linear-gradient(0deg, #929292, #929292); } .fr-table__content table thead th[role=columnheader] { background-image: linear-gradient(0deg, #3a3a3a, #3a3a3a), linear-gradient(0deg, #3a3a3a, #3a3a3a); } .fr-table__content table tbody tr::after { background-image: linear-gradient(0deg, #000091, #000091), linear-gradient(0deg, #000091, #000091), linear-gradient(0deg, #000091, #000091), linear-gradient(0deg, #000091, #000091); } .fr-table__content table tbody td { background-image: linear-gradient(0deg, #929292, #929292), linear-gradient(0deg, #929292, #929292); background-color: #fff; } .fr-table__content table tbody th { background-color: #f6f6f6; background-image: linear-gradient(0deg, #929292, #929292), linear-gradient(0deg, #3a3a3a, #3a3a3a); } .fr-table__detail { color: #666; } .fr-table > table caption { color: #161616; } .fr-table > table thead::after, .fr-table > table tbody::after { background-image: linear-gradient(0deg, #929292, #929292), linear-gradient(0deg, #929292, #929292), linear-gradient(0deg, #929292, #929292); } .fr-table > table thead { background-image: linear-gradient(0deg, #3a3a3a, #3a3a3a); background-color: #f6f6f6; color: #161616; background-image: none; } .fr-table > table tbody { background-color: #fff; } .fr-table > table tbody tr:nth-child(even) { background-color: #f6f6f6; } .fr-table--green-tilleul-verveine > table::after { background-image: linear-gradient(0deg, #b7a73f, #b7a73f), linear-gradient(0deg, #b7a73f, #b7a73f), linear-gradient(0deg, #b7a73f, #b7a73f), linear-gradient(0deg, #b7a73f, #b7a73f); } .fr-table--green-tilleul-verveine > table thead { background-image: linear-gradient(0deg, #66673d, #66673d); background-color: #fceeac; background-image: none; } .fr-table--green-tilleul-verveine > table tbody { background-color: #fef7da; } .fr-table--green-tilleul-verveine > table tbody tr:nth-child(even) { background-color: #fceeac; } .fr-table--green-tilleul-verveine.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #b7a73f, #b7a73f); background-image: none; } .fr-table--green-bourgeon > table::after { background-image: linear-gradient(0deg, #68a532, #68a532), linear-gradient(0deg, #68a532, #68a532), linear-gradient(0deg, #68a532, #68a532), linear-gradient(0deg, #68a532, #68a532); } .fr-table--green-bourgeon > table thead { background-image: linear-gradient(0deg, #447049, #447049); background-color: #c9fcac; background-image: none; } .fr-table--green-bourgeon > table tbody { background-color: #e6feda; } .fr-table--green-bourgeon > table tbody tr:nth-child(even) { background-color: #c9fcac; } .fr-table--green-bourgeon.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #68a532, #68a532); background-image: none; } .fr-table--green-emeraude > table::after { background-image: linear-gradient(0deg, #00a95f, #00a95f), linear-gradient(0deg, #00a95f, #00a95f), linear-gradient(0deg, #00a95f, #00a95f), linear-gradient(0deg, #00a95f, #00a95f); } .fr-table--green-emeraude > table thead { background-image: linear-gradient(0deg, #297254, #297254); background-color: #c3fad5; background-image: none; } .fr-table--green-emeraude > table tbody { background-color: #e3fdeb; } .fr-table--green-emeraude > table tbody tr:nth-child(even) { background-color: #c3fad5; } .fr-table--green-emeraude.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #00a95f, #00a95f); background-image: none; } .fr-table--green-menthe > table::after { background-image: linear-gradient(0deg, #009081, #009081), linear-gradient(0deg, #009081, #009081), linear-gradient(0deg, #009081, #009081), linear-gradient(0deg, #009081, #009081); } .fr-table--green-menthe > table thead { background-image: linear-gradient(0deg, #37635f, #37635f); background-color: #bafaee; background-image: none; } .fr-table--green-menthe > table tbody { background-color: #dffdf7; } .fr-table--green-menthe > table tbody tr:nth-child(even) { background-color: #bafaee; } .fr-table--green-menthe.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #009081, #009081); background-image: none; } .fr-table--green-archipel > table::after { background-image: linear-gradient(0deg, #009099, #009099), linear-gradient(0deg, #009099, #009099), linear-gradient(0deg, #009099, #009099), linear-gradient(0deg, #009099, #009099); } .fr-table--green-archipel > table thead { background-image: linear-gradient(0deg, #006a6f, #006a6f); background-color: #c7f6fc; background-image: none; } .fr-table--green-archipel > table tbody { background-color: #e5fbfd; } .fr-table--green-archipel > table tbody tr:nth-child(even) { background-color: #c7f6fc; } .fr-table--green-archipel.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #009099, #009099); background-image: none; } .fr-table--blue-ecume > table::after { background-image: linear-gradient(0deg, #465f9d, #465f9d), linear-gradient(0deg, #465f9d, #465f9d), linear-gradient(0deg, #465f9d, #465f9d), linear-gradient(0deg, #465f9d, #465f9d); } .fr-table--blue-ecume > table thead { background-image: linear-gradient(0deg, #2f4077, #2f4077); background-color: #e9edfe; background-image: none; } .fr-table--blue-ecume > table tbody { background-color: #f4f6fe; } .fr-table--blue-ecume > table tbody tr:nth-child(even) { background-color: #e9edfe; } .fr-table--blue-ecume.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #465f9d, #465f9d); background-image: none; } .fr-table--blue-cumulus > table::after { background-image: linear-gradient(0deg, #417dc4, #417dc4), linear-gradient(0deg, #417dc4, #417dc4), linear-gradient(0deg, #417dc4, #417dc4), linear-gradient(0deg, #417dc4, #417dc4); } .fr-table--blue-cumulus > table thead { background-image: linear-gradient(0deg, #3558a2, #3558a2); background-color: #e6eefe; background-image: none; } .fr-table--blue-cumulus > table tbody { background-color: #f3f6fe; } .fr-table--blue-cumulus > table tbody tr:nth-child(even) { background-color: #e6eefe; } .fr-table--blue-cumulus.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #417dc4, #417dc4); background-image: none; } .fr-table--purple-glycine > table::after { background-image: linear-gradient(0deg, #a558a0, #a558a0), linear-gradient(0deg, #a558a0, #a558a0), linear-gradient(0deg, #a558a0, #a558a0), linear-gradient(0deg, #a558a0, #a558a0); } .fr-table--purple-glycine > table thead { background-image: linear-gradient(0deg, #6e445a, #6e445a); background-color: #fee7fc; background-image: none; } .fr-table--purple-glycine > table tbody { background-color: #fef3fd; } .fr-table--purple-glycine > table tbody tr:nth-child(even) { background-color: #fee7fc; } .fr-table--purple-glycine.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #a558a0, #a558a0); background-image: none; } .fr-table--pink-macaron > table::after { background-image: linear-gradient(0deg, #e18b76, #e18b76), linear-gradient(0deg, #e18b76, #e18b76), linear-gradient(0deg, #e18b76, #e18b76), linear-gradient(0deg, #e18b76, #e18b76); } .fr-table--pink-macaron > table thead { background-image: linear-gradient(0deg, #8d533e, #8d533e); background-color: #fee9e6; background-image: none; } .fr-table--pink-macaron > table tbody { background-color: #fef4f2; } .fr-table--pink-macaron > table tbody tr:nth-child(even) { background-color: #fee9e6; } .fr-table--pink-macaron.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #e18b76, #e18b76); background-image: none; } .fr-table--pink-tuile > table::after { background-image: linear-gradient(0deg, #ce614a, #ce614a), linear-gradient(0deg, #ce614a, #ce614a), linear-gradient(0deg, #ce614a, #ce614a), linear-gradient(0deg, #ce614a, #ce614a); } .fr-table--pink-tuile > table thead { background-image: linear-gradient(0deg, #a94645, #a94645); background-color: #fee9e7; background-image: none; } .fr-table--pink-tuile > table tbody { background-color: #fef4f3; } .fr-table--pink-tuile > table tbody tr:nth-child(even) { background-color: #fee9e7; } .fr-table--pink-tuile.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #ce614a, #ce614a); background-image: none; } .fr-table--yellow-tournesol > table::after { background-image: linear-gradient(0deg, #c8aa39, #c8aa39), linear-gradient(0deg, #c8aa39, #c8aa39), linear-gradient(0deg, #c8aa39, #c8aa39), linear-gradient(0deg, #c8aa39, #c8aa39); } .fr-table--yellow-tournesol > table thead { background-image: linear-gradient(0deg, #716043, #716043); background-color: #feecc2; background-image: none; } .fr-table--yellow-tournesol > table tbody { background-color: #fef6e3; } .fr-table--yellow-tournesol > table tbody tr:nth-child(even) { background-color: #feecc2; } .fr-table--yellow-tournesol.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #c8aa39, #c8aa39); background-image: none; } .fr-table--yellow-moutarde > table::after { background-image: linear-gradient(0deg, #c3992a, #c3992a), linear-gradient(0deg, #c3992a, #c3992a), linear-gradient(0deg, #c3992a, #c3992a), linear-gradient(0deg, #c3992a, #c3992a); } .fr-table--yellow-moutarde > table thead { background-image: linear-gradient(0deg, #695240, #695240); background-color: #feebd0; background-image: none; } .fr-table--yellow-moutarde > table tbody { background-color: #fef5e8; } .fr-table--yellow-moutarde > table tbody tr:nth-child(even) { background-color: #feebd0; } .fr-table--yellow-moutarde.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #c3992a, #c3992a); background-image: none; } .fr-table--orange-terre-battue > table::after { background-image: linear-gradient(0deg, #e4794a, #e4794a), linear-gradient(0deg, #e4794a, #e4794a), linear-gradient(0deg, #e4794a, #e4794a), linear-gradient(0deg, #e4794a, #e4794a); } .fr-table--orange-terre-battue > table thead { background-image: linear-gradient(0deg, #755348, #755348); background-color: #fee9e5; background-image: none; } .fr-table--orange-terre-battue > table tbody { background-color: #fef4f2; } .fr-table--orange-terre-battue > table tbody tr:nth-child(even) { background-color: #fee9e5; } .fr-table--orange-terre-battue.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #e4794a, #e4794a); background-image: none; } .fr-table--brown-cafe-creme > table::after { background-image: linear-gradient(0deg, #d1b781, #d1b781), linear-gradient(0deg, #d1b781, #d1b781), linear-gradient(0deg, #d1b781, #d1b781), linear-gradient(0deg, #d1b781, #d1b781); } .fr-table--brown-cafe-creme > table thead { background-image: linear-gradient(0deg, #685c48, #685c48); background-color: #f7ecdb; background-image: none; } .fr-table--brown-cafe-creme > table tbody { background-color: #fbf6ed; } .fr-table--brown-cafe-creme > table tbody tr:nth-child(even) { background-color: #f7ecdb; } .fr-table--brown-cafe-creme.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #d1b781, #d1b781); background-image: none; } .fr-table--brown-caramel > table::after { background-image: linear-gradient(0deg, #c08c65, #c08c65), linear-gradient(0deg, #c08c65, #c08c65), linear-gradient(0deg, #c08c65, #c08c65), linear-gradient(0deg, #c08c65, #c08c65); } .fr-table--brown-caramel > table thead { background-image: linear-gradient(0deg, #845d48, #845d48); background-color: #f7ebe5; background-image: none; } .fr-table--brown-caramel > table tbody { background-color: #fbf5f2; } .fr-table--brown-caramel > table tbody tr:nth-child(even) { background-color: #f7ebe5; } .fr-table--brown-caramel.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #c08c65, #c08c65); background-image: none; } .fr-table--brown-opera > table::after { background-image: linear-gradient(0deg, #bd987a, #bd987a), linear-gradient(0deg, #bd987a, #bd987a), linear-gradient(0deg, #bd987a, #bd987a), linear-gradient(0deg, #bd987a, #bd987a); } .fr-table--brown-opera > table thead { background-image: linear-gradient(0deg, #745b47, #745b47); background-color: #f7ece4; background-image: none; } .fr-table--brown-opera > table tbody { background-color: #fbf5f2; } .fr-table--brown-opera > table tbody tr:nth-child(even) { background-color: #f7ece4; } .fr-table--brown-opera.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #bd987a, #bd987a); background-image: none; } .fr-table--beige-gris-galet > table::after { background-image: linear-gradient(0deg, #aea397, #aea397), linear-gradient(0deg, #aea397, #aea397), linear-gradient(0deg, #aea397, #aea397), linear-gradient(0deg, #aea397, #aea397); } .fr-table--beige-gris-galet > table thead { background-image: linear-gradient(0deg, #6a6156, #6a6156); background-color: #f3ede5; background-image: none; } .fr-table--beige-gris-galet > table tbody { background-color: #f9f6f2; } .fr-table--beige-gris-galet > table tbody tr:nth-child(even) { background-color: #f3ede5; } .fr-table--beige-gris-galet.fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #aea397, #aea397); background-image: none; } .fr-table--bordered > table tbody tr { background-image: linear-gradient(0deg, #ddd, #ddd); } .fr-table--bordered > table tbody tr:nth-child(even) { background-color: transparent; } .fr-table--bordered > table tbody tr:nth-child(even):hover { background-color: rgba(0, 0, 0, 0.05); } .fr-table--bordered > table tbody tr:nth-child(even):active { background-color: rgba(0, 0, 0, 0.1); } .fr-table::before { content: none; } .fr-table > table thead::after { background-image: none; } .fr-table > table tbody::after { background-image: none; } .fr-table > table tbody tr { background-image: none; } .fr-table--green-tilleul-verveine > table { background-image: none; } .fr-table--green-tilleul-verveine > table tbody tr { background-image: none; } .fr-table--green-bourgeon > table { background-image: none; } .fr-table--green-bourgeon > table tbody tr { background-image: none; } .fr-table--green-emeraude > table { background-image: none; } .fr-table--green-emeraude > table tbody tr { background-image: none; } .fr-table--green-menthe > table { background-image: none; } .fr-table--green-menthe > table tbody tr { background-image: none; } .fr-table--green-archipel > table { background-image: none; } .fr-table--green-archipel > table tbody tr { background-image: none; } .fr-table--blue-ecume > table { background-image: none; } .fr-table--blue-ecume > table tbody tr { background-image: none; } .fr-table--blue-cumulus > table { background-image: none; } .fr-table--blue-cumulus > table tbody tr { background-image: none; } .fr-table--purple-glycine > table { background-image: none; } .fr-table--purple-glycine > table tbody tr { background-image: none; } .fr-table--pink-macaron > table { background-image: none; } .fr-table--pink-macaron > table tbody tr { background-image: none; } .fr-table--pink-tuile > table { background-image: none; } .fr-table--pink-tuile > table tbody tr { background-image: none; } .fr-table--yellow-tournesol > table { background-image: none; } .fr-table--yellow-tournesol > table tbody tr { background-image: none; } .fr-table--yellow-moutarde > table { background-image: none; } .fr-table--yellow-moutarde > table tbody tr { background-image: none; } .fr-table--orange-terre-battue > table { background-image: none; } .fr-table--orange-terre-battue > table tbody tr { background-image: none; } .fr-table--brown-cafe-creme > table { background-image: none; } .fr-table--brown-cafe-creme > table tbody tr { background-image: none; } .fr-table--brown-caramel > table { background-image: none; } .fr-table--brown-caramel > table tbody tr { background-image: none; } .fr-table--brown-opera > table { background-image: none; } .fr-table--brown-opera > table tbody tr { background-image: none; } .fr-table--beige-gris-galet > table { background-image: none; } .fr-table--beige-gris-galet > table tbody tr { background-image: none; } } @media screen and (min-width: 0\0) and (min-resolution: 72dpi) and (min-width: 0\0) and (min-resolution: 72dpi) { .fr-table__content table { border-left: 1px solid #929292; border-right: 1px solid #929292; } .fr-table__content table thead tr:first-child th { border-top: 1px solid #929292; } .fr-table__content table thead tr:last-child th { border-bottom: 1px solid #3a3a3a; } .fr-table--bordered table th, .fr-table--bordered table td { border-right: 1px solid #929292; } .fr-table > table thead tr:first-child th { border-top: 1px solid #929292; } .fr-table > table thead tr:last-child th { border-bottom: 1px solid #3a3a3a; } .fr-table > table tbody tr:last-child th, .fr-table > table tbody tr:last-child td { border-bottom: 1px solid #929292; } .fr-table > table th:first-child, .fr-table > table td:first-child { border-left: 1px solid #929292; } .fr-table > table th:last-child, .fr-table > table td:last-child { border-right: 1px solid #929292; } .fr-table--bordered > table th, .fr-table--bordered > table td { border-bottom: 1px solid #929292; } }