@oslokommune/punkt-css
Version:
CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo
1 lines • 2.44 kB
CSS
.pkt-alert{--pkt-color-alert-bc: var(--pkt-color-border-blue);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);--pkt-color-alert-txt: var(--pkt-color-text-body-dark);--pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);--pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000)}.pkt-alert--error{--pkt-color-alert-bc: var(--pkt-color-border-red);--pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red)}.pkt-alert--success{--pkt-color-alert-bc: var(--pkt-color-border-green);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-green)}.pkt-alert--warning{--pkt-color-alert-bc: var(--pkt-color-border-yellow);--pkt-color-alert-bg: var(--pkt-color-surface-default-yellow)}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}pkt-alert{display:block}.pkt-alert__grid{display:grid;grid-template-columns:min-content auto min-content;grid-row-gap:1rem;grid-column-gap:1.5rem;justify-items:left;align-items:center}.pkt-alert__noTitle .pkt-alert__text{grid-row:1/2;grid-column:2/3}@media(max-width: 768px){.pkt-alert__noTitle .pkt-alert__text{grid-row:2/3;grid-column:1/-1}}.pkt-alert{border-left:.25rem solid var(--pkt-color-alert-bc);background-color:var(--pkt-color-alert-bg);color:var(--pkt-color-alert-txt);padding:1rem 1.5rem;display:block}.pkt-alert__title{grid-column:2/3;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem}.pkt-alert__text{grid-column:1/-1;grid-row:2/3;overflow-wrap:break-word;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-alert__text p{margin-bottom:1rem}.pkt-alert__text p:first-of-type{margin-top:0}.pkt-alert__text p:last-of-type{margin-bottom:0}.pkt-alert__date{grid-column:1/-1;grid-row:3/4;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-alert__icon{--fg-color: var(--pkt-color-alert-icon-fg);height:2rem;width:2rem;grid-area:icon;grid-row:1/2;grid-column:1/2}.pkt-alert__close{grid-column:3/4;grid-row:1/2}.pkt-alert__close svg{--fg-color: var(--pkt-color-alert-close-fg)}.pkt-alert--compact{padding:.75rem 1rem}.pkt-alert--compact .pkt-alert__grid{gap:.5rem}.pkt-alert--compact .pkt-alert__icon{width:1.375rem;height:1.375rem}.pkt-alert--compact .pkt-alert__title{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-alert--compact .pkt-alert__text{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}