@oslokommune/punkt-css
Version:
CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo
73 lines (71 loc) • 1.54 kB
CSS
.pkt-preview {
position: relative;
}
.pkt-preview .pkt-tabs {
--pkt-tabs-bg: var(--pkt-color-surface-default-gray);
}
.pkt-preview__mode {
position: absolute;
top: 1rem;
right: 1rem;
}
.pkt-preview__component {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 10rem;
padding: 3rem 1rem;
margin: 1rem 0 0;
border: 0.25rem solid var(--pkt-color-surface-default-gray);
background-color: var(--pkt-color-background-default);
transition: background-color 0.2s linear;
}
.pkt-preview__component--fullwidth > div {
width: 100%;
}
.pkt-preview__opts {
padding: 1rem;
background-color: var(--pkt-color-surface-default-gray);
}
.pkt-preview__opts > .pkt-cell {
position: relative;
}
.pkt-preview__opts > .pkt-cell > .pkt-tag {
display: block;
position: absolute;
top: 0;
right: 0;
padding: 0 0.25rem 0;
}
.pkt-preview__code {
position: relative;
margin-bottom: 1rem;
font-size: 0.8rem;
}
.pkt-preview__code > pre {
margin-top: 0 ;
background-color: var(--pkt-color-surface-default-gray) ;
}
.pkt-preview__copy {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
gap: 0.5rem;
align-items: center;
}
.pkt-preview__specs {
background-color: var(--pkt-color-surface-default-gray);
}
.pkt-preview__specs pre {
margin-top: 0 ;
}
.pkt-preview__specs h2 {
padding: 1rem;
}
.astro-code.github-light {
background-color: var(--pkt-color-surface-default-gray) ;
}
.preview-content {
display: contents;
}