@codegouvfr/react-dsfr
Version:
French State Design System React integration library
122 lines (107 loc) • 3.28 kB
CSS
/*!
* DSFR v1.12.1 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
*/
@charset "UTF-8";
@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) {
/**
* Correctif de la largeur de la légende d'un fieldset
*/
.fr-pagination [href] {
text-decoration: none;
}
.fr-pagination ul {
list-style-type: none;
}
.fr-pagination ol {
list-style-type: none;
}
.fr-pagination ul,
.fr-pagination ol {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.fr-pagination .fr-pagination__link--first::before,
.fr-pagination .fr-pagination__link--first::after {
background-color: transparent;
background-size: 100%;
background-repeat: no-repeat;
background-image: url("../../icons/system/fr--arrow-left-s-first-line.svg");
width: 1.5rem;
height: 1.5rem;
}
.fr-pagination .fr-pagination__link--prev::before,
.fr-pagination .fr-pagination__link--prev::after {
background-color: transparent;
background-size: 100%;
background-repeat: no-repeat;
background-image: url("../../icons/system/arrow-left-s-line.svg");
width: 1.5rem;
height: 1.5rem;
}
.fr-pagination .fr-pagination__link--next::before,
.fr-pagination .fr-pagination__link--next::after {
background-color: transparent;
background-size: 100%;
background-repeat: no-repeat;
background-image: url("../../icons/system/arrow-right-s-line.svg");
width: 1.5rem;
height: 1.5rem;
}
.fr-pagination .fr-pagination__link--last::before,
.fr-pagination .fr-pagination__link--last::after {
background-color: transparent;
background-size: 100%;
background-repeat: no-repeat;
background-image: url("../../icons/system/fr--arrow-right-s-last-line.svg");
width: 1.5rem;
height: 1.5rem;
}
.fr-pagination {
color: #161616;
}
.fr-pagination__link[aria-current]:not([aria-current=false]) {
background-color: #000091;
color: #f5f5fe;
}
.fr-pagination__link[aria-current]:not([aria-current=false]):hover {
background-color: #1212ff;
}
.fr-pagination__link[aria-current]:not([aria-current=false]):active {
background-color: #2323ff;
}
.fr-pagination__link:not([aria-current]):disabled,
a.fr-pagination__link:not([aria-current]):not([href]),
a.fr-pagination__link[aria-current=false]:not([href]),
.fr-pagination__link[aria-current=false]:disabled {
color: #929292;
}
}
@media screen and (min-width: 0\0) and (min-resolution: 72dpi) and (min-width: 0\0) and (min-resolution: 72dpi) {
.fr-pagination__link {
background-color: transparent;
}
.fr-pagination__link:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.fr-pagination__link:active {
background-color: rgba(0, 0, 0, 0.1);
}
}
@media screen and (forced-colors: active) and (min-width: 0\0) and (min-resolution: 72dpi), screen and (prefers-contrast: more) and (min-width: 0\0) and (min-resolution: 72dpi) {
.fr-pagination__link[aria-current]:not([aria-current=false]) {
border: 1px solid #000091;
}
}