@oslokommune/punkt-css
Version:
CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo
1 lines • 4.21 kB
CSS
pkt-linkcard,.pkt-linkcard{display:block}.pkt-linkcard{display:grid;grid-template-columns:min-content auto;grid-template-rows:auto auto;column-gap:8px;row-gap:4px;align-items:center;padding:1rem;text-decoration:none;width:100%;height:100%;transition:background-color .2s linear}@media screen and (min-width: 80rem){.pkt-linkcard{padding:1.5rem}}.pkt-linkcard:hover{text-decoration:none}.pkt-linkcard:hover .pkt-linkcard__title{text-decoration:underline;text-decoration-thickness:.12rem;text-underline-offset:.15em}.pkt-linkcard:hover .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%)}.pkt-linkcard__title{grid-column:2;letter-spacing:-0.2px;font-weight:500;font-size:1.25rem;line-height:2rem}.pkt-linkcard__title>p{margin:0}@media screen and (min-width: 35.938rem){.pkt-linkcard__title{letter-spacing:-0.2px;font-weight:500;font-size:1.5rem;line-height:2.25rem}}.pkt-linkcard__title.pkt-link--external{display:inline-flex}.pkt-linkcard__title.pkt-link--external::after{height:2.25rem;width:1.5rem;background-size:1.5rem 1.5rem;background-position:center;margin-left:.5rem;flex:0 0 auto;align-self:flex-start}.pkt-linkcard>.pkt-icon.pkt-link__icon,.pkt-linkcard pkt-icon.pkt-link__icon{margin-right:0}.pkt-linkcard__text{grid-column:2}.pkt-linkcard__text p:first-of-type{margin-top:0}.pkt-linkcard__text p:last-of-type{margin-bottom:0}.pkt-linkcard--beige{background-color:var(--pkt-color-surface-default-light-beige) ;color:var(--pkt-color-text-body-dark) }.pkt-linkcard--beige:hover,.pkt-linkcard--beige:focus,.pkt-linkcard--beige:focus-visible,.pkt-linkcard--beige:active{color:var(--pkt-color-brand-warm-blue-1000) }.pkt-linkcard--blue{background-color:var(--pkt-color-surface-subtle-pale-blue) ;color:var(--pkt-color-text-body-dark) }.pkt-linkcard--blue:hover{background-color:var(--pkt-color-surface-default-light-blue) }.pkt-linkcard--blue:hover,.pkt-linkcard--blue:focus,.pkt-linkcard--blue:focus-visible,.pkt-linkcard--blue:active{color:var(--pkt-color-brand-warm-blue-1000) }.pkt-linkcard--grey,.pkt-linkcard--gray{background-color:var(--pkt-color-surface-default-gray) ;color:var(--pkt-color-text-body-dark) }.pkt-linkcard--grey:hover,.pkt-linkcard--gray:hover{background-color:var(--pkt-color-surface-strong-gray) }.pkt-linkcard--grey:hover,.pkt-linkcard--grey:focus,.pkt-linkcard--grey:focus-visible,.pkt-linkcard--grey:active,.pkt-linkcard--gray:hover,.pkt-linkcard--gray:focus,.pkt-linkcard--gray:focus-visible,.pkt-linkcard--gray:active{color:var(--pkt-color-brand-warm-blue-1000) }.pkt-linkcard--green{background-color:var(--pkt-color-surface-default-faded-green) ;color:var(--pkt-color-text-body-dark) }.pkt-linkcard--green:hover{background-color:var(--pkt-color-surface-strong-light-green) }.pkt-linkcard--green:hover,.pkt-linkcard--green:focus,.pkt-linkcard--green:focus-visible,.pkt-linkcard--green:active{color:var(--pkt-color-brand-warm-blue-1000) }.pkt-linkcard--grey-outline,.pkt-linkcard--gray-outline{border:4px solid var(--pkt-color-border-subtle) }.pkt-linkcard--beige-outline{border:4px solid var(--pkt-color-border-light-beige) }[data-mode=dark] .pkt-linkcard .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2190%) hue-rotate(285deg) brightness(109%) contrast(100%)}[data-mode=dark] .pkt-linkcard:hover .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(6664%) hue-rotate(169deg) brightness(103%) contrast(107%)}[data-mode=dark] .pkt-linkcard--beige .pkt-link--external::after,.pkt-linkcard--blue .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) }[data-mode=dark] .pkt-linkcard--beige .pkt-link--external:hover::after,.pkt-linkcard--blue .pkt-link--external:hover::after{filter:brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) }