Sha256: f5f7775421706f909938c3becddb8331a07b7947447d01eedb6bd61d2c794404
Contents?: true
Size: 1.56 KB
Versions: 10
Compression:
Stored size: 1.56 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-radius: $border-radius;
overflow: hidden;
max-height: var(--max-height);
box-shadow:
rgb(0 0 0 / 25%) 0 1px 2px,
rgb(0 0 0 / 31%) 0 0 5px;
.kpop-title-bar {
grid-area: title-bar;
display: grid;
grid-template-areas: "close title empty";
grid-template-columns: 3.5rem auto 3.5rem;
border-bottom: 1px solid $keyline-color;
min-height: 3.5rem;
align-items: center;
}
.kpop-header {
grid-area: header;
}
.kpop-content {
grid-area: content;
display: flex;
flex-direction: column;
overflow: auto;
}
.kpop-footer {
grid-area: footer;
border-top: 1px solid $keyline-color;
padding: $default-padding;
}
.kpop-title {
grid-area: title;
font-weight: bold;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 3.5rem;
}
.kpop-close {
grid-area: close;
text-align: center;
background: none;
border: none;
display: block;
font-size: 2rem;
font-weight: 300;
text-decoration: none;
line-height: 3.5rem;
}
.button-set {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
&.iframe {
.kpop-content {
overflow: unset;
}
iframe {
height: var(--max-height);
width: var(--max-width);
flex-grow: 1;
overflow: scroll;
}
}
}
Version data entries
10 entries across 10 versions & 1 rubygems