Sha256: 62cb92afa404bc4a54cf7815ad2e5274cac6450ca17ca05988178d354fcd16ae
Contents?: true
Size: 1.43 KB
Versions: 4
Compression:
Stored size: 1.43 KB
Contents
@use "variables" as *;
.kpop-modal {
display: grid;
grid-template-areas:
"title-bar"
"header"
"content"
"footer";
grid-template-rows: auto auto 1fr auto;
background-color: white;
border: 1px solid black;
border-radius: $border-radius;
}
.kpop-title-bar {
grid-area: title-bar;
display: flex;
background: $title-background-color;
color: $title-text-color;
.kpop-title {
padding: $default-padding;
flex-grow: 1;
}
.kpop-close {
background: none;
border: none;
color: $title-text-color;
cursor: pointer;
display: block;
font-size: 2rem;
font-weight: bold;
padding: 0 0.75rem;
text-decoration: none;
}
}
.kpop-header {
grid-area: header;
}
.kpop-content {
grid-area: content;
display: flex;
flex-direction: column;
overflow: auto;
}
.kpop-footer {
grid-area: footer;
background: white;
border-top: 1px solid black;
padding: $default-padding;
}
.kpop-buttons {
display: flex;
gap: 0.5rem;
justify-content: space-between;
}
.kpop-modal.iframe {
.kpop-content {
overflow: unset;
}
iframe {
height: $max-height;
width: $max-width;
flex-grow: 1;
overflow: scroll;
}
}
@include mobile {
.kpop-modal {
border-radius: 0;
border: none;
}
.kpop-modal.iframe {
iframe {
width: 100%;
height: 100%;
}
}
.kpop-buttons {
flex-direction: column-reverse;
text-align: center;
}
}
Version data entries
4 entries across 4 versions & 1 rubygems