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: var(--max-height);
    width: var(--max-width);
    flex-grow: 1;
    overflow: scroll;
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
katalyst-kpop-3.0.0.beta.6	app/assets/stylesheets/katalyst/kpop/_modal.scss
katalyst-kpop-3.0.0.beta.5	app/assets/stylesheets/katalyst/kpop/_modal.scss