vuestic-ui/dist/es/VaLayout.css

Vue 3 UI Framework

:root,
:host {
  --va-layout-overlay-color: rgba(0, 0, 0, 0.5);
  --va-layout-scroll-padding: 1rem;
}
.va-layout {
  display: grid;
  grid-template-columns: var(--va-horizontal-template);
  grid-template-rows: var(--va-vertical-template);
  grid-template-areas: var(--va-template-area);
  gap: 0;
  position: relative;
  z-index: 0;
  max-width: 100%;
  max-height: 100%;
}
.va-layout__area {
  scrollbar-color: var(--va-background-element) transparent;
  scrollbar-width: thin;
  transition: scrollbar-color 0.3s ease-in-out;
}
.va-layout__area::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.va-layout__area::-webkit-scrollbar-track {
  box-shadow: none;
  border-radius: 10px;
}
.va-layout__area::-webkit-scrollbar-thumb {
  background: var(--va-background-element);
  opacity: 0.3;
  border-radius: 2px;
  -webkit-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.va-layout__area--content {
  grid-area: content;
  z-index: 0;
  min-width: 0;
  min-height: 0;
}
.va-layout__area--content [id] {
  scroll-margin-top: calc(var(--va-paddings-top-px) + var(--va-layout-scroll-padding));
  scroll-margin-bottom: calc(var(--va-paddings-bottom-px) + var(--va-layout-scroll-padding));
  scroll-margin-left: calc(var(--va-paddings-left-px) + var(--va-layout-scroll-padding));
  scroll-margin-right: calc(var(--va-paddings-right-px) + var(--va-layout-scroll-padding));
}