html, body {
height: 100%;
margin: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
height: 100%;
overflow: hidden; /* prevent the outer page from scrolling */
}
.aw-page {
height: 100vh;
display: flex;
flex-direction: column;
min-height: 0; /* critical: allows children to shrink */
}
.aw-page > * {
margin-top: 0;
margin-bottom: 0;
}
.aw-footer {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.aw-topbar {
flex: 0 0 auto;
background: #f1f1f1;
}
.aw-content {
position: relative; /* required for Scrollspy */
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
padding: 0 1rem 1rem 1rem;
}
.aw-sidebar-inner {
height: 100%;
overflow-y: auto;
padding: .75rem;
}
/* Prevent slight overflow when Drupal admin toolbar adds displace offsets */
.aw-page {
height: calc(100vh - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px));
}
.aw-main {
flex: 1 1 auto;
min-height: 0; /* critical: allows inner scroll container */
}
.aw-main > .row {
height: 100%;
min-height: 0;
}
.aw-sidebar,
.aw-content,
.aw-sidebar-second {
height: 100%;
min-height: 0;
}
.aw-sidebar-inner,
.aw-sidebar-second-inner {
height: 100%;
overflow-y: auto;
min-height: 0;
}
.aw-content > :last-child {
margin-bottom: 0;
}
/* NAVIGATION */
/* LEFT */
.block--calavera-navigation .nav {
flex-direction: column;
}
/* SECTIONS */
/* SECTION HEADINGS */
/* SECTION DESCRIPTIONS */
.webform-section-wrapper .description {
margin-bottom: 1rem;
}
/* FORM */
/* COMPOSITE DROPDOWN */
fieldset.webform-composite-hidden-title {
margin-top:0;
}
.form-control {
margin-bottom:1rem;
max-width: 480px;
}
textarea {
width:100%;
max-width:600px !important;
}
.form-label {
margin-bottom:.15rem;
}
.js-webform-multiple-add input {
margin-top: 1rem;
margin-bottom: 1rem;
}
#edit-contact-items fieldset legend {
display:none;
}
#edit-primary-address--wrapper {
margin-top:1rem;
}
/* DETAILS */
/* Scope to your content pane so other admin/details aren't affected */
.aw-content details {
border: 1px solid var(--bs-border-color);
border-radius: .5rem;
background: var(--bs-body-bg);
overflow: hidden;
/* Grid trick: row 1 is summary, row 2 is content wrapper */
display: grid;
grid-template-rows: auto 0fr;
transition: grid-template-rows 220ms cubic-bezier(.4, 0, .2, 1);
}
.aw-content details[open] {
grid-template-rows: auto 1fr;
}
/* Summary styling */
.aw-content details > summary {
list-style: none;
cursor: pointer;
padding: .65rem .85rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
}
.aw-content details > summary::-webkit-details-marker {
display: none;
}
/* IMPORTANT: Webform wraps details content in .details-wrapper */
.aw-content details > .details-wrapper {
overflow: hidden; /* required for smooth collapse */
min-height: 0; /* required for grid row to shrink */
padding: .75rem .85rem;
}
/* Optional: chevron animation (requires Bootstrap Icons loaded OR replace with a unicode character) */
.aw-content details > summary::after {
content: "▾";
transition: transform 180ms cubic-bezier(.4, 0, .2, 1);
}
.aw-content details[open] > summary::after {
transform: rotate(180deg);
}
/* Scope to your main app content so admin aren't affected */
.aw-content details.form-wrapper.details {
border: 1px solid var(--bs-border-color);
border-radius: .5rem;
background: var(--bs-body-bg);
overflow: hidden;
}
.aw-content details.form-wrapper.details > summary {
list-style: none;
cursor: pointer;
padding: .65rem .85rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
}
.aw-content details.form-wrapper.details > summary::-webkit-details-marker {
display: none;
}
.aw-content details.form-wrapper.details > .details-wrapper {
overflow: hidden;
max-height: none; /* let browser handle instantly */
}
/* ACCORDION */
/* Ensure accordion is inset from scroll container
so top borders are never clipped */
.aw-content #awAccordion {
padding-top: 0;
padding-bottom: 1rem;
}
/* Add breathing room between accordion items */
.aw-content #awAccordion .accordion-item {
margin-bottom: 0.75rem;
border-radius: 0.375rem;
overflow: visible; /* ensures rounded corners behave */
}
/* Make sure the top border is always visible */
.aw-content #awAccordion .accordion-item:first-child {
margin-top: 0.25rem;
}
/* Optional: slightly soften the accordion header separation */
.aw-content #awAccordion .accordion-button {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
/* Optional: give content a bit more air */
.aw-content #awAccordion .accordion-body {
padding-top: 1rem;
padding-bottom: 1.25rem;
}
/* Sticky Webform section titles inside the .aw-content scroll container */
.aw-content .webform-section-title {
position: sticky;
top: 0;
z-index: 30;
background: var(--bs-body-bg);
padding: 0.75rem 0 0.5rem 0;
/* Optional: subtle separation line */
border-bottom: 1px solid var(--bs-border-color);
}
/* Sticky accordion header for the open item only */
.aw-content #awAccordion .accordion-item .accordion-header {
position: relative; /* provides a stacking context */
}
.aw-content #awAccordion .accordion-item .accordion-collapse.show {
/* When open, allow header to stick within the item */
position: relative;
}
/* Bootstrap adds .show to the open collapse panel */
.aw-content #awAccordion .accordion-item:has(.accordion-collapse.show) .accordion-button {
position: sticky;
top: 3.7rem; /* sits below the sticky section title; adjust if needed */
z-index: 15;
background: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color);
}
/* Sticky accordion header (only for the currently-open item) */
.aw-content #awAccordion .accordion-item.is-open .accordion-header {
position: sticky;
top: 3.7rem; /* adjust after verifying */
z-index: 15;
background: var(--bs-body-bg);
}
/* Ensure the button doesn't look clipped when it sticks */
.aw-content #awAccordion .accordion-item.is-open .accordion-button {
border-bottom: 1px solid var(--bs-border-color);
}
.aw-content #awAccordion .accordion-item,
.aw-content #awAccordion .accordion-button,
.aw-content #awAccordion .accordion-collapse {
border-radius: 0;
}
/* ------------------------------------------------------------
* Accordion header shading (subtle, app-like)
* ------------------------------------------------------------ */
/* Base header appearance */
.aw-content #awAccordion .accordion-button {
background-color: #f8f9fa; /* very light gray */
color: var(--bs-body-color);
font-weight: 500;
}
/* Hover (only when not disabled) */
.aw-content #awAccordion .accordion-button:not(.collapsed):hover,
.aw-content #awAccordion .accordion-button.collapsed:hover {
background-color: #eef1f4;
}
/* Open accordion header */
.aw-content #awAccordion .accordion-item.is-open .accordion-button {
background-color: #eef1f4;
}
/* Remove Bootstrap's default focus shadow */
.aw-content #awAccordion .accordion-button:focus {
box-shadow: none;
}
/* Visual separation between accordion items */
.aw-content #awAccordion .accordion-item + .accordion-item, .aw-content #awAccordion .accordion-item {
border-top: 1px solid var(--bs-border-color);
}
/* Ensure sticky headers paint cleanly */
.aw-content #awAccordion .accordion-item.is-open .accordion-button {
background-clip: padding-box;
}
/* ------------------------------------------------------------
* Open (is-open) accordion header: slightly darker + subtle blue tint
* ------------------------------------------------------------ */
/* ------------------------------------------------------------
* Persistently shaded header for expanded accordion item
* ------------------------------------------------------------ */
/* Expanded (open) accordion header */
.aw-content #awAccordion
.accordion-item.is-open
.accordion-button:not(.collapsed) {
background-color: #e7f1ff; /* subtle blue tint */
color: var(--bs-body-color);
/* Echo scrollspy active state */
box-shadow: inset 3px 0 0 rgba(13, 110, 253, 0.35);
}
/* Hover on expanded header (slightly stronger, optional) */
.aw-content #awAccordion
.accordion-item.is-open
.accordion-button:not(.collapsed):hover {
background-color: #dbeaff;
}