@randstad-design/orbit-multitheme
Version:
multitheme Front-end code based on Randstad Human Forward components
78 lines (76 loc) • 3.27 kB
CSS
.notice-in-page {
border: 1px solid;
border-radius: 4px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 20px; }
@media (min-width: 941px) {
.notice-in-page {
max-width: 490px; } }
.notice-in-page .icon {
margin-right: 15px;
min-width: 20px;
padding-top: 2px; }
.notice-in-page__body-copy {
font-size: 16px;
letter-spacing: 0;
line-height: 25px; }
.notice-in-page__body-copy {
color: var(--color-brand-secondary); }
.notice-in-page__body-copy a,
.notice-in-page__body-copy a:hover,
.notice-in-page__body-copy a:focus {
color: var(--color-brand-secondary); }
.notice-in-page--negative {
background: var(--color-ui-negative-5);
border-color: var(--color-ui-negative); }
.notice-in-page--negative .icon {
color: var(--color-ui-negative); }
.notice-in-page--positive {
background: var(--color-ui-positive-5);
border-color: var(--color-ui-positive); }
.notice-in-page--positive .icon {
color: var(--color-ui-positive); }
.notice-in-page--informative {
background: var(--color-brand-primary-tint-7);
border-color: var(--color-brand-primary); }
.notice-in-page--informative .icon {
color: var(--color-brand-primary); }
.notice-in-page--warning {
background: var(--color-ui-warning-10);
border-color: var(--color-ui-warning); }
.notice-in-page--warning .icon {
color: var(--color-ui-warning); }
.notice-in-page--subtle {
border-color: var(--color-gray-20); }
.bg-variant-brand-primary .notice-in-page--subtle {
border-color: var(--color-white-alpha-30); }
.bg-variant-brand-primary .notice-in-page--subtle .notice-in-page__body-copy {
color: var(--color-white); }
.bg-variant-brand-secondary .notice-in-page--subtle {
border-color: var(--color-white-alpha-30); }
.bg-variant-brand-secondary .notice-in-page--subtle .notice-in-page__body-copy {
color: var(--color-white); }
.bg-variant-brand-tertiary .notice-in-page--subtle {
border-color: var(--color-gray-20); }
.bg-variant-brand-tertiary .notice-in-page--subtle .notice-in-page__body-copy {
color: var(--color-brand-secondary); }
.bg-variant-white .notice-in-page--subtle {
border-color: var(--color-gray-20); }
.bg-variant-white .notice-in-page--subtle .notice-in-page__body-copy {
color: var(--color-brand-secondary); }
.bg-variant-brand-quaternary .notice-in-page--subtle {
border-color: var(--color-brand-secondary-alpha-30); }
.bg-variant-brand-quaternary .notice-in-page--subtle .notice-in-page__body-copy {
color: var(--color-brand-secondary); }
.bg-variant-brand-quinary .notice-in-page--subtle {
border-color: var(--color-brand-secondary-alpha-30); }
.bg-variant-brand-quinary .notice-in-page--subtle .notice-in-page__body-copy {
color: var(--color-brand-secondary-shade-180); }
.bg-variant-brand-senary .notice-in-page--subtle {
border-color: var(--color-brand-secondary-alpha-30); }
.bg-variant-brand-senary .notice-in-page--subtle .notice-in-page__body-copy {
color: var(--color-brand-secondary); }
/*# sourceMappingURL=in-page.css.map */