@codegouvfr/react-dsfr/dsfr/component/notice/notice.min.css

French State Design System React integration library

/*!
 * DSFR v1.12.1 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
 */.fr-notice{--title-spacing:0;--text-spacing:0;background-color:var(--background-contrast-grey);color:var(--text-title-grey);padding-bottom:1rem;padding-top:1rem;position:relative}.fr-notice__body{padding:0 2.25rem 0 0;position:relative}.fr-notice__title{font-weight:700;margin-right:.25rem;position:relative}.fr-notice__title:before{--icon-size:1.5rem;background-color:currentColor;display:inline-block;flex:0 0 auto;height:var(--icon-size);margin-right:.5rem;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:calc((.75em - var(--icon-size))*.5);width:var(--icon-size)}.fr-notice__desc{margin-right:.25rem}.fr-notice__desc,.fr-notice__title{display:block}.fr-notice__desc,.fr-notice__link,.fr-notice__title{font-size:.875rem;line-height:1.5rem}.fr-notice--no-icon .fr-notice__title:before{display:none}.fr-notice .fr-btn--close{color:inherit;font-size:.875rem;line-height:1.5rem;max-height:2rem;max-width:2rem;min-height:2rem;overflow:hidden;padding:.25rem .5rem;position:absolute;right:0;top:-.25rem;white-space:nowrap}.fr-notice .fr-btn--close:before{--icon-size:1rem;background-color:currentColor;content:"";display:inline-block;flex:0 0 auto;height:var(--icon-size);margin-left:0;margin-right:.5rem;-webkit-mask-image:url(../../icons/system/close-line.svg);mask-image:url(../../icons/system/close-line.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:calc((.75em - var(--icon-size))*.5);width:var(--icon-size)}.fr-notice--alert .fr-notice__title:before,.fr-notice--attack .fr-notice__title:before,.fr-notice--cyberattack .fr-notice__title:before,.fr-notice--info .fr-notice__title:before,.fr-notice--kidnapping .fr-notice__title:before,.fr-notice--warning .fr-notice__title:before,.fr-notice--weather-orange .fr-notice__title:before,.fr-notice--weather-purple .fr-notice__title:before,.fr-notice--weather-red .fr-notice__title:before,.fr-notice--witness .fr-notice__title:before{content:""}.fr-notice--info .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{-webkit-mask-image:url(../../icons/system/fr--info-fill.svg);mask-image:url(../../icons/system/fr--info-fill.svg)}.fr-notice--alert .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before,.fr-notice--warning .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{-webkit-mask-image:url(../../icons/system/fr--warning-fill.svg);mask-image:url(../../icons/system/fr--warning-fill.svg)}.fr-notice--alert .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{-webkit-mask-image:url(../../icons/system/error-warning-fill.svg);mask-image:url(../../icons/system/error-warning-fill.svg)}.fr-notice--weather-orange .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{-webkit-mask-image:url(../../icons/weather/heavy-showers-fill.svg);mask-image:url(../../icons/weather/heavy-showers-fill.svg)}.fr-notice--weather-red .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{-webkit-mask-image:url(../../icons/weather/tornado-fill.svg);mask-image:url(../../icons/weather/tornado-fill.svg)}.fr-notice--weather-purple .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{-webkit-mask-image:url(../../icons/weather/typhoon-fill.svg);mask-image:url(../../icons/weather/typhoon-fill.svg)}.fr-notice--attack,.fr-notice--cyberattack,.fr-notice--kidnapping,.fr-notice--witness{background-position:0 0;background-repeat:no-repeat;background-size:100% .375rem;padding-top:1.375rem}.fr-notice--attack .fr-notice__title,.fr-notice--cyberattack .fr-notice__title,.fr-notice--kidnapping .fr-notice__title,.fr-notice--witness .fr-notice__title{text-transform:uppercase}.fr-notice--cyberattack .fr-notice__title:before,.fr-notice--witness .fr-notice__title:before{-webkit-mask-image:url(../../icons/system/fr--warning-fill.svg);mask-image:url(../../icons/system/fr--warning-fill.svg)}.fr-notice--kidnapping .fr-notice__title:before{-webkit-mask-image:url(../../icons/system/fr--alert-warning-fill.svg);mask-image:url(../../icons/system/fr--alert-warning-fill.svg)}.fr-notice--attack .fr-notice__title:before{-webkit-mask-image:url(../../icons/system/fr--alert-warning-2-fill.svg);mask-image:url(../../icons/system/fr--alert-warning-2-fill.svg)}.fr-notice--info{--idle:transparent;--hover:var(--background-contrast-info-hover);--active:var(--background-contrast-info-active);background-color:var(--background-contrast-info);color:var(--text-default-info)}.fr-notice--warning,.fr-notice--weather-orange{--idle:transparent;--hover:var(--background-contrast-warning-hover);--active:var(--background-contrast-warning-active);background-color:var(--background-contrast-warning);color:var(--text-default-warning)}.fr-notice--alert{--idle:transparent;--hover:var(--background-contrast-error-hover);--active:var(--background-contrast-error-active);background-color:var(--background-contrast-error);color:var(--text-default-error)}.fr-notice--weather-red{--idle:transparent;--hover:var(--background-flat-error-hover);--active:var(--background-flat-error-active);background-color:var(--background-flat-error);color:var(--text-inverted-grey)}.fr-notice--weather-red .fr-btn--close{--idle:transparent;--hover:var(--background-action-high-error-hover);--active:var(--background-action-high-error-active);background-color:var(--background-action-high-error)}.fr-notice--weather-purple{--idle:transparent;--hover:var(--background-flat-purple-glycine-hover);--active:var(--background-flat-purple-glycine-active);background-color:var(--background-flat-purple-glycine);color:var(--text-inverted-grey)}.fr-notice--weather-purple .fr-btn--close{--idle:transparent;--hover:var(--background-action-high-purple-glycine-hover);--active:var(--background-action-high-purple-glycine-active);background-color:var(--background-action-high-purple-glycine)}.fr-notice--witness{--idle:transparent;--hover:var(--background-flat-grey-hover);--active:var(--background-flat-grey-active);background-color:var(--background-flat-grey);background-image:linear-gradient(0deg,var(--border-plain-error),var(--border-plain-error));color:var(--text-inverted-grey)}.fr-notice--witness .fr-btn--close{--idle:transparent;--hover:var(--background-action-high-grey-hover);--active:var(--background-action-high-grey-active);background-color:var(--background-action-high-grey)}.fr-notice--attack,.fr-notice--kidnapping{--idle:transparent;--hover:var(--background-flat-error-hover);--active:var(--background-flat-error-active);background-color:var(--background-flat-error);background-image:linear-gradient(0deg,var(--border-plain-grey),var(--border-plain-grey));color:var(--text-inverted-grey)}.fr-notice--attack .fr-btn--close,.fr-notice--kidnapping .fr-btn--close{--idle:transparent;--hover:var(--background-action-high-error-hover);--active:var(--background-action-high-error-active);background-color:var(--background-action-high-error)}.fr-notice--cyberattack{--idle:transparent;--hover:var(--background-flat-grey-hover);--active:var(--background-flat-grey-active);background-color:var(--background-flat-grey);background-image:linear-gradient(0deg,var(--border-plain-info),var(--border-plain-info));color:var(--text-inverted-grey)}.fr-notice--cyberattack .fr-btn--close{--idle:transparent;--hover:var(--background-action-high-grey-hover);--active:var(--background-action-high-grey-active);background-color:var(--background-action-high-grey)}@media (min-width:36em){
  /*! media sm */.fr-notice__desc,.fr-notice__title{display:inline}
  /*! media sm */}@media (min-width:48em){
  /*! media md */.fr-notice__body{padding:0 3rem 0 0}.fr-notice__desc,.fr-notice__link,.fr-notice__title{font-size:1rem;line-height:1.5rem}
  /*! media md */}@media (min-width:62em){
  /*! media lg */
  /*! media lg */}@media (min-width:78em){
  /*! media xl */
  /*! media xl */}@media (-ms-high-contrast:active),(forced-colors:active){.fr-notice{outline:1px solid}.fr-notice__title:before{background-color:canvastext;forced-color-adjust:none}.fr-notice .fr-btn--close:before{background-color:buttontext;forced-color-adjust:none}.fr-notice--weather-purple,.fr-notice--weather-red{color:highlight}.fr-notice--attack .fr-notice__title:before,.fr-notice--cyberattack .fr-notice__title:before,.fr-notice--kidnapping .fr-notice__title:before,.fr-notice--weather-purple .fr-notice__title:before,.fr-notice--weather-red .fr-notice__title:before,.fr-notice--witness .fr-notice__title:before{background-color:highlight;forced-color-adjust:none}.fr-notice--attack,.fr-notice--cyberattack,.fr-notice--kidnapping,.fr-notice--witness{color:highlight}}@media screen and (min-width:0\0) and (min-resolution:72dpi){.fr-notice p,.fr-notice__title{margin:0}.fr-notice__title:before{color:transparent;vertical-align:-6px}.fr-notice--info .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{background-image:url(../../icons/system/fr--info-fill.svg);height:1.5rem;width:1.5rem}.fr-notice--alert .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before,.fr-notice--cyberattack .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before,.fr-notice--warning .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before,.fr-notice--witness .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{background-image:url(../../icons/system/fr--warning-fill.svg);height:1.5rem;width:1.5rem}.fr-notice--weather-orange .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{background-image:url(../../icons/weather/heavy-showers-fill.svg);height:1.5rem;width:1.5rem}.fr-notice--weather-red .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{background-image:url(../../icons/weather/tornado-fill.svg);height:1.5rem;width:1.5rem}.fr-notice--weather-purple .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{background-image:url(../../icons/weather/typhoon-fill.svg);height:1.5rem;width:1.5rem}.fr-notice--kidnapping .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{background-image:url(../../icons/system/fr--alert-warning-fill.svg);height:1.5rem;width:1.5rem}.fr-notice--attack .fr-notice__title:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]):before{background-image:url(../../icons/system/fr--alert-warning-2-fill.svg);height:1.5rem;width:1.5rem}.fr-notice .fr-btn--close:after,.fr-notice .fr-btn--close:before{background-color:transparent;background-image:url(../../icons/system/close-line.svg);background-repeat:no-repeat;background-size:100%;height:1rem;width:1rem}.fr-notice{background-color:#eee;color:#161616}.fr-notice--info{background-color:#e8edff;color:#0063cb}.fr-notice--warning,.fr-notice--weather-orange{background-color:#ffe9e6;color:#b34000}.fr-notice--alert{background-color:#ffe9e9;color:#ce0500}.fr-notice--weather-red{color:#fff}.fr-notice--weather-red,.fr-notice--weather-red .fr-btn--close{background-color:#ce0500}.fr-notice--weather-purple{background-color:#6e445a;color:#fff}.fr-notice--weather-purple .fr-btn--close{background-color:#6e445a}.fr-notice--witness{background-image:linear-gradient(0deg,#ce0500,#ce0500);color:#fff}.fr-notice--witness,.fr-notice--witness .fr-btn--close{background-color:#3a3a3a}.fr-notice--attack,.fr-notice--kidnapping{background-color:#ce0500;background-image:linear-gradient(0deg,#3a3a3a,#3a3a3a);color:#fff}.fr-notice--attack .fr-btn--close,.fr-notice--kidnapping .fr-btn--close{background-color:#ce0500}.fr-notice--cyberattack{background-image:linear-gradient(0deg,#0063cb,#0063cb);color:#fff}.fr-notice--cyberattack,.fr-notice--cyberattack .fr-btn--close{background-color:#3a3a3a}}@media print{.fr-notice{background-color:#eee;color:#161616}.fr-notice--info{background-color:#e8edff;color:#0063cb}.fr-notice--warning,.fr-notice--weather-orange{background-color:#ffe9e6;color:#b34000}.fr-notice--alert{background-color:#ffe9e9;color:#ce0500}.fr-notice--weather-red{color:#fff}.fr-notice--weather-red,.fr-notice--weather-red .fr-btn--close{background-color:#ce0500}.fr-notice--weather-purple{background-color:#6e445a;color:#fff}.fr-notice--weather-purple .fr-btn--close{background-color:#6e445a}.fr-notice--witness{background-image:linear-gradient(0deg,#ce0500,#ce0500);color:#fff}.fr-notice--witness,.fr-notice--witness .fr-btn--close{background-color:#3a3a3a}.fr-notice--attack,.fr-notice--kidnapping{background-color:#ce0500;background-image:linear-gradient(0deg,#3a3a3a,#3a3a3a);color:#fff}.fr-notice--attack .fr-btn--close,.fr-notice--kidnapping .fr-btn--close{background-color:#ce0500}.fr-notice--cyberattack{background-image:linear-gradient(0deg,#0063cb,#0063cb);color:#fff}.fr-notice--cyberattack,.fr-notice--cyberattack .fr-btn--close{background-color:#3a3a3a}}