yattho_view_components 0.0.1 → 0.1.1

data/app/components/yattho/alpha/layout.css

@@ -1,398 +1 @@
-/* Layout */
-
-.Layout {
-  display: grid;
-
-  --Layout-sidebar-width: 220px;
-  --Layout-gutter: 16px;
-}
-
-@media (max-width: calc(544px - 0.02px)) {
-
-.Layout {
-    grid-template-columns: 1fr !important;
-}
-
-.Layout {
-    grid-auto-flow: row;
-}
-    .Layout .Layout-sidebar,
-  .Layout .Layout-divider,
-  .Layout .Layout-main {
-    width: 100% !important;
-    grid-column: 1 !important;
-  }
-    .Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
-      grid-row: 1;
-    }
-
-    .Layout.Layout--sidebarPosition-flowRow-start .Layout-main {
-      grid-row: 2 / span 2;
-    }
-    .Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-      grid-row: 2 / span 2;
-    }
-
-    .Layout.Layout--sidebarPosition-flowRow-end .Layout-main {
-      grid-row: 1;
-    }
-    .Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
-      display: none;
-    }
-    .Layout.Layout--divided {
-    --Layout-gutter: 0;
-  }
-    .Layout.Layout--divided .Layout-divider {
-    height: 1px;
-    grid-row: 2;
-  }
-
-    .Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
-      display: none;
-    }
-
-    .Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
-      height: 8px;
-      margin-right: 0;
-      background: var(--color-canvas-inset);
-      border-color: var(--color-border-default);
-      border-style: solid;
-      border-width: var(--yattho-borderWidth-thin, 1px) 0;
-    }
-
-    .Layout.Layout--divided .Layout-main {
-      grid-row: 3 / span 1;
-    }
-      .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-        grid-row: 3 / span 1;
-      }
-
-      .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
-        grid-row: 1;
-      }
-  }
-
-@media (max-width: calc(768px - 0.02px)) {
-
-.Layout.Layout--flowRow-until-md {
-      grid-template-columns: 1fr !important;
-  }
-
-.Layout.Layout--flowRow-until-md {
-      grid-auto-flow: row;
-  }
-      .Layout.Layout--flowRow-until-md .Layout-sidebar,
-  .Layout.Layout--flowRow-until-md .Layout-divider,
-  .Layout.Layout--flowRow-until-md .Layout-main {
-    width: 100% !important;
-    grid-column: 1 !important;
-  }
-    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
-      grid-row: 1;
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main {
-      grid-row: 2 / span 2;
-    }
-    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-      grid-row: 2 / span 2;
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main {
-      grid-row: 1;
-    }
-    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
-      display: none;
-    }
-      .Layout.Layout--flowRow-until-md.Layout--divided {
-    --Layout-gutter: 0;
-  }
-    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider {
-    height: 1px;
-    grid-row: 2;
-  }
-
-    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
-      display: none;
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
-      height: 8px;
-      margin-right: 0;
-      background: var(--color-canvas-inset);
-      border-color: var(--color-border-default);
-      border-style: solid;
-      border-width: var(--yattho-borderWidth-thin, 1px) 0;
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-main {
-      grid-row: 3 / span 1;
-    }
-      .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-        grid-row: 3 / span 1;
-      }
-
-      .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
-        grid-row: 1;
-      }
-    }
-
-@media (max-width: calc(1012px - 0.02px)) {
-
-.Layout.Layout--flowRow-until-lg {
-      grid-template-columns: 1fr !important;
-  }
-
-.Layout.Layout--flowRow-until-lg {
-      grid-auto-flow: row;
-  }
-      .Layout.Layout--flowRow-until-lg .Layout-sidebar,
-  .Layout.Layout--flowRow-until-lg .Layout-divider,
-  .Layout.Layout--flowRow-until-lg .Layout-main {
-    width: 100% !important;
-    grid-column: 1 !important;
-  }
-    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
-      grid-row: 1;
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main {
-      grid-row: 2 / span 2;
-    }
-    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-      grid-row: 2 / span 2;
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main {
-      grid-row: 1;
-    }
-    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
-      display: none;
-    }
-      .Layout.Layout--flowRow-until-lg.Layout--divided {
-    --Layout-gutter: 0;
-  }
-    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider {
-    height: 1px;
-    grid-row: 2;
-  }
-
-    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
-      display: none;
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
-      height: 8px;
-      margin-right: 0;
-      background: var(--color-canvas-inset);
-      border-color: var(--color-border-default);
-      border-style: solid;
-      border-width: var(--yattho-borderWidth-thin, 1px) 0;
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main {
-      grid-row: 3 / span 1;
-    }
-      .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-        grid-row: 3 / span 1;
-      }
-
-      .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
-        grid-row: 1;
-      }
-    }
-
-.Layout {
-
-  /* Flow as column */
-
-  grid-auto-flow: column;
-  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */
-  grid-gap: var(--Layout-gutter);
-}
-
-.Layout .Layout-sidebar {
-    grid-column: 1;
-  }
-
-.Layout .Layout-divider {
-    display: none;
-  }
-
-.Layout .Layout-main {
-    grid-column: 2 / span 2;
-  }
-
-/* Gutter spacing */
-
-@media (min-width: 1012px) {
-
-.Layout {
-    --Layout-gutter: 24px;
-}
-  }
-
-.Layout.Layout--gutter-none {
-    /* stylelint-disable-next-line length-zero-no-unit */
-    --Layout-gutter: 0px; /* Neds px in value */
-  }
-
-.Layout.Layout--gutter-condensed {
-    --Layout-gutter: 16px;
-  }
-
-@media (min-width: 1012px) {
-
-.Layout.Layout--gutter-spacious {
-      --Layout-gutter: 32px;
-  }
-    }
-
-@media (min-width: 1280px) {
-
-.Layout.Layout--gutter-spacious {
-      --Layout-gutter: 40px;
-  }
-    }
-
-/* Sidebar width */
-
-@media (min-width: 544px) {
-
-.Layout {
-    --Layout-sidebar-width: 220px;
-}
-  }
-
-@media (min-width: 768px) {
-
-.Layout {
-    --Layout-sidebar-width: 256px;
-}
-  }
-
-@media (min-width: 1012px) {
-
-.Layout {
-    --Layout-sidebar-width: 296px;
-}
-  }
-
-@media (min-width: 768px) {
-
-.Layout.Layout--sidebar-narrow {
-      --Layout-sidebar-width: 240px;
-  }
-    }
-
-@media (min-width: 1012px) {
-
-.Layout.Layout--sidebar-narrow {
-      --Layout-sidebar-width: 256px;
-  }
-    }
-
-@media (min-width: 1012px) {
-
-.Layout.Layout--sidebar-wide {
-      --Layout-sidebar-width: 320px;
-  }
-    }
-
-@media (min-width: 1280px) {
-
-.Layout.Layout--sidebar-wide {
-      --Layout-sidebar-width: 336px;
-  }
-    }
-
-/* Sidebar position */
-
-.Layout.Layout--sidebarPosition-start .Layout-sidebar {
-      grid-column: 1;
-    }
-
-.Layout.Layout--sidebarPosition-start .Layout-main {
-      grid-column: 2 / span 2;
-    }
-
-.Layout.Layout--sidebarPosition-end {
-    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
-  }
-
-.Layout.Layout--sidebarPosition-end .Layout-main {
-      grid-column: 1;
-    }
-
-.Layout.Layout--sidebarPosition-end .Layout-sidebar {
-      grid-column: 2 / span 2;
-    }
-
-/* Sidebar divider */
-
-.Layout.Layout--divided .Layout-divider {
-      display: block;
-      grid-column: 2;
-      width: 1px;
-      margin-right: -1px;
-      background: var(--color-border-default);
-    }
-
-.Layout.Layout--divided .Layout-main {
-      grid-column: 3 / span 1;
-    }
-
-.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar {
-        grid-column: 3 / span 1;
-      }
-
-.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main {
-        grid-column: 1;
-      }
-
-.Layout-divider {
-  display: none;
-  width: 1px;
-}
-
-.Layout-sidebar {
-  width: var(--Layout-sidebar-width);
-}
-
-.Layout-main {
-  min-width: 0;
-
-  /* Centered main column
-  ** FIXME: right-aligned sidebar */
-}
-
-.Layout-main .Layout-main-centered-md,
-  .Layout-main .Layout-main-centered-lg,
-  .Layout-main .Layout-main-centered-xl {
-    margin-right: auto;
-    margin-left: auto;
-  }
-
-.Layout-main .Layout-main-centered-md > .container-md,
-    .Layout-main .Layout-main-centered-lg > .container-md,
-    .Layout-main .Layout-main-centered-xl > .container-md,
-    .Layout-main .Layout-main-centered-md > .container-lg,
-    .Layout-main .Layout-main-centered-lg > .container-lg,
-    .Layout-main .Layout-main-centered-xl > .container-lg,
-    .Layout-main .Layout-main-centered-md > .container-xl,
-    .Layout-main .Layout-main-centered-lg > .container-xl,
-    .Layout-main .Layout-main-centered-xl > .container-xl {
-      margin-left: 0;
-    }
-
-.Layout-main .Layout-main-centered-md {
-    max-width: calc(var(--yattho-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
-  }
-
-.Layout-main .Layout-main-centered-lg {
-    max-width: calc(var(--yattho-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
-  }
-
-.Layout-main .Layout-main-centered-xl {
-    max-width: calc(var(--yattho-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
-  }
+.Layout{--Layout-sidebar-width:220px;--Layout-gutter:16px;display:grid}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout .Layout-divider,.Layout .Layout-main,.Layout .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--yattho-borderWidth-thin,1px) 0;height:8px;margin-right:0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main,.Layout.Layout--flowRow-until-md .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--yattho-borderWidth-thin,1px) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main,.Layout.Layout--flowRow-until-lg .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--yattho-borderWidth-thin,1px) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-gap:var(--Layout-gutter);grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)))}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{background:var(--color-border-default);display:block;grid-column:2;margin-right:-1px;width:1px}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-xl{margin-left:auto;margin-right:auto}.Layout-main .Layout-main-centered-lg>.container-lg,.Layout-main .Layout-main-centered-lg>.container-md,.Layout-main .Layout-main-centered-lg>.container-xl,.Layout-main .Layout-main-centered-md>.container-lg,.Layout-main .Layout-main-centered-md>.container-md,.Layout-main .Layout-main-centered-md>.container-xl,.Layout-main .Layout-main-centered-xl>.container-lg,.Layout-main .Layout-main-centered-xl>.container-md,.Layout-main .Layout-main-centered-xl>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--yattho-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--yattho-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--yattho-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}

data/app/components/yattho/alpha/layout.css.json

@@ -1 +1 @@
-{"name":"alpha/layout","selectors":[".Layout",".Layout .Layout-sidebar","\n  .Layout .Layout-divider","\n  .Layout .Layout-main",".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--divided",".Layout.Layout--divided .Layout-divider",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--divided .Layout-main",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md",".Layout.Layout--flowRow-until-md .Layout-sidebar","\n  .Layout.Layout--flowRow-until-md .Layout-divider","\n  .Layout.Layout--flowRow-until-md .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg",".Layout.Layout--flowRow-until-lg .Layout-sidebar","\n  .Layout.Layout--flowRow-until-lg .Layout-divider","\n  .Layout.Layout--flowRow-until-lg .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout .Layout-divider",".Layout .Layout-main",".Layout.Layout--gutter-none",".Layout.Layout--gutter-condensed",".Layout.Layout--gutter-spacious",".Layout.Layout--sidebar-narrow",".Layout.Layout--sidebar-wide",".Layout.Layout--sidebarPosition-start .Layout-sidebar",".Layout.Layout--sidebarPosition-start .Layout-main",".Layout.Layout--sidebarPosition-end",".Layout.Layout--sidebarPosition-end .Layout-main",".Layout.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main",".Layout-divider",".Layout-sidebar",".Layout-main",".Layout-main .Layout-main-centered-md","\n  .Layout-main .Layout-main-centered-lg","\n  .Layout-main .Layout-main-centered-xl",".Layout-main .Layout-main-centered-md > .container-md","\n    .Layout-main .Layout-main-centered-lg > .container-md","\n    .Layout-main .Layout-main-centered-xl > .container-md","\n    .Layout-main .Layout-main-centered-md > .container-lg","\n    .Layout-main .Layout-main-centered-lg > .container-lg","\n    .Layout-main .Layout-main-centered-xl > .container-lg","\n    .Layout-main .Layout-main-centered-md > .container-xl","\n    .Layout-main .Layout-main-centered-lg > .container-xl","\n    .Layout-main .Layout-main-centered-xl > .container-xl",".Layout-main .Layout-main-centered-lg",".Layout-main .Layout-main-centered-xl"]}
+{"name":"alpha/layout","selectors":[".Layout",".Layout .Layout-divider",".Layout .Layout-main",".Layout .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--divided",".Layout.Layout--divided .Layout-divider",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--divided .Layout-main",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md",".Layout.Layout--flowRow-until-md .Layout-divider",".Layout.Layout--flowRow-until-md .Layout-main",".Layout.Layout--flowRow-until-md .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg",".Layout.Layout--flowRow-until-lg .Layout-divider",".Layout.Layout--flowRow-until-lg .Layout-main",".Layout.Layout--flowRow-until-lg .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--gutter-none",".Layout.Layout--gutter-condensed",".Layout.Layout--gutter-spacious",".Layout.Layout--sidebar-narrow",".Layout.Layout--sidebar-wide",".Layout.Layout--sidebarPosition-start .Layout-sidebar",".Layout.Layout--sidebarPosition-start .Layout-main",".Layout.Layout--sidebarPosition-end",".Layout.Layout--sidebarPosition-end .Layout-main",".Layout.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main",".Layout-divider",".Layout-sidebar",".Layout-main",".Layout-main .Layout-main-centered-lg",".Layout-main .Layout-main-centered-md",".Layout-main .Layout-main-centered-xl",".Layout-main .Layout-main-centered-lg>.container-lg",".Layout-main .Layout-main-centered-lg>.container-md",".Layout-main .Layout-main-centered-lg>.container-xl",".Layout-main .Layout-main-centered-md>.container-lg",".Layout-main .Layout-main-centered-md>.container-md",".Layout-main .Layout-main-centered-md>.container-xl",".Layout-main .Layout-main-centered-xl>.container-lg",".Layout-main .Layout-main-centered-xl>.container-md",".Layout-main .Layout-main-centered-xl>.container-xl"]}

data/app/components/yattho/alpha/layout.css.map

@@ -1 +1 @@
-{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"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","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--color-canvas-inset);\n      border-color: var(--color-border-default);\n      border-style: solid;\n      border-width: var(--yattho-borderWidth-thin, 1px) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  grid-gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --Layout-gutter: 0px; /* Neds px in value */\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      margin-right: -1px;\n      background: var(--color-border-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--yattho-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--yattho-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--yattho-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}"]}
+{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QAGE,4BAA6B,CAC7B,oBAAqB,CAHrB,YAkJF,CA7IE,wCANF,QA7EE,kBAAmB,CACnB,mCA+NF,CA7NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,uEACE,YACF,CAEA,wEAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,iDAAmD,CALnD,UAAW,CACX,cAKF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,iDAAmD,CALnD,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,iDAAmD,CALnD,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QA0BE,6BAA8B,CAF9B,qBAAsB,CACtB,sGA0HF,CAvHE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAwGJ,CAvGE,CAEA,4BAEE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAlEF,QAmEI,4BAgFJ,CA/EE,CAEA,yBAtEF,QAuEI,4BA4EJ,CA3EE,CAEA,0BA1EF,QA2EI,4BAwEJ,CAvEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCAKE,sCAAuC,CAJvC,aAAc,CACd,aAAc,CAEd,iBAAkB,CADlB,SAGF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,kHAIE,gBAAiB,CADjB,iBAQF,CALE,odAGE,aACF,CAGF,sCACE,2GACF,CAEA,sCACE,2GACF,CAEA,sCACE,4GACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--color-canvas-inset);\n      border-color: var(--color-border-default);\n      border-style: solid;\n      border-width: var(--yattho-borderWidth-thin, 1px) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  grid-gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --Layout-gutter: 0px; /* Neds px in value */\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      margin-right: -1px;\n      background: var(--color-border-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--yattho-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--yattho-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--yattho-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}"]}

data/app/components/yattho/alpha/menu.css

@@ -1,117 +1 @@
-/* menu */
-
-/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
-
-.menu {
-  margin-bottom: var(--yattho-stack-gap-normal, 16px);
-  list-style: none;
-  background-color: var(--color-canvas-default);
-  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--yattho-borderRadius-medium, 6px);
-}
-
-.menu-item {
-  position: relative;
-  display: block;
-  padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);
-  color: var(--color-fg-default);
-  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);
-}
-
-.menu-item:first-child {
-    border-top: 0;
-    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);
-    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);
-  }
-
-.menu-item:first-child::before {
-      border-top-left-radius: var(--yattho-borderRadius-medium, 6px);
-    }
-
-.menu-item:last-child {
-    border-bottom: 0;
-    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);
-  }
-
-.menu-item:last-child::before {
-      border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);
-    }
-
-.menu-item:hover {
-    text-decoration: none;
-    background-color: var(--color-neutral-subtle);
-  }
-
-.menu-item:active {
-    background-color: var(--color-canvas-subtle);
-  }
-
-.menu-item.selected,
-  .menu-item[aria-selected='true'],
-  .menu-item[aria-current]:not([aria-current='false']) {
-    cursor: default;
-    background-color: var(--color-menu-bg-active);
-  }
-
-.menu-item.selected::before, .menu-item[aria-selected='true']::before, .menu-item[aria-current]:not([aria-current='false'])::before {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: 2px;
-      content: '';
-      background-color: var(--color-yattho-border-active);
-    }
-
-.menu-item .octicon {
-    width: 16px;
-    margin-right: var(--yattho-control-medium-gap, 8px);
-    color: var(--color-fg-muted);
-    text-align: center;
-  }
-
-.menu-item .Counter {
-    float: right;
-    margin-left: var(--yattho-control-small-gap, 4px);
-  }
-
-.menu-item .menu-warning {
-    float: right;
-    color: var(--color-attention-fg);
-  }
-
-.menu-item .avatar {
-    float: left;
-    margin-right: var(--yattho-control-small-gap, 4px);
-  }
-
-.menu-item.alert .Counter {
-      color: var(--color-danger-fg);
-    }
-
-.menu-heading {
-  display: block;
-  padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: inherit;
-  font-weight: var(--base-text-weight-semibold, 600);
-  color: var(--color-fg-default);
-  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);
-}
-
-.menu-heading:hover {
-    text-decoration: none;
-  }
-
-.menu-heading:first-child {
-    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);
-    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);
-  }
-
-.menu-heading:last-child {
-    border-bottom: 0;
-    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);
-  }
+.menu{background-color:var(--color-canvas-default);border:var(--yattho-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--yattho-borderRadius-medium,6px);list-style:none;margin-bottom:var(--yattho-stack-gap-normal,16px)}.menu-item{border-bottom:var(--yattho-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;padding:var(--yattho-control-medium-paddingInline-condensed,8px) var(--yattho-control-medium-paddingInline-spacious,16px);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--yattho-borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--yattho-borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--yattho-borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--yattho-borderRadius-medium,6px)}.menu-item:hover{background-color:var(--color-neutral-subtle);text-decoration:none}.menu-item:active{background-color:var(--color-canvas-subtle)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--color-menu-bg-active);cursor:default}.menu-item.selected:before,.menu-item[aria-current]:not([aria-current=false]):before,.menu-item[aria-selected=true]:before{background-color:var(--color-yattho-border-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--color-fg-muted);margin-right:var(--yattho-control-medium-gap,8px);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--yattho-control-small-gap,4px)}.menu-item .menu-warning{color:var(--color-attention-fg);float:right}.menu-item .avatar{float:left;margin-right:var(--yattho-control-small-gap,4px)}.menu-item.alert .Counter{color:var(--color-danger-fg)}.menu-heading{border-bottom:var(--yattho-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--yattho-control-medium-paddingInline-condensed,8px) var(--yattho-control-medium-paddingInline-spacious,16px)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--yattho-borderRadius-medium,6px);border-top-right-radius:var(--yattho-borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--yattho-borderRadius-medium,6px);border-bottom-right-radius:var(--yattho-borderRadius-medium,6px)}

data/app/components/yattho/alpha/menu.css.json

@@ -1 +1 @@
-{"name":"alpha/menu","selectors":[".menu",".menu-item",".menu-item:first-child",".menu-item:first-child::before",".menu-item:last-child",".menu-item:last-child::before",".menu-item:hover",".menu-item:active",".menu-item.selected","\n  .menu-item[aria-selected='true']","\n  .menu-item[aria-current]:not([aria-current='false'])",".menu-item.selected::before"," .menu-item[aria-selected='true']::before"," .menu-item[aria-current]:not([aria-current='false'])::before",".menu-item .octicon",".menu-item .Counter",".menu-item .menu-warning",".menu-item .avatar",".menu-item.alert .Counter",".menu-heading",".menu-heading:hover",".menu-heading:first-child",".menu-heading:last-child"]}
+{"name":"alpha/menu","selectors":[".menu",".menu-item",".menu-item:first-child",".menu-item:first-child:before",".menu-item:last-child",".menu-item:last-child:before",".menu-item:hover",".menu-item:active",".menu-item.selected",".menu-item[aria-current]:not([aria-current=false])",".menu-item[aria-selected=true]",".menu-item.selected:before",".menu-item[aria-current]:not([aria-current=false]):before",".menu-item[aria-selected=true]:before",".menu-item .octicon",".menu-item .Counter",".menu-item .menu-warning",".menu-item .avatar",".menu-item.alert .Counter",".menu-heading",".menu-heading:hover",".menu-heading:first-child",".menu-heading:last-child"]}

data/app/components/yattho/alpha/menu.css.map

@@ -1 +1 @@
-{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAAA,SAAS;;AAET,+EAA+E;;AAE/E;EACE,mDAAmD;EACnD,gBAAgB;EAChB,6CAA6C;EAC7C,6EAA6E;EAC7E,qDAAqD;AACvD;;AAEA;EACE,kBAAkB;EAClB,cAAc;EACd,4HAA4H;EAC5H,8BAA8B;EAC9B,kFAAkF;AA2EpF;;AAzEE;IACE,aAAa;IACb,8DAA8D;IAC9D,+DAA+D;EAKjE;;AAHE;MACE,8DAA8D;IAChE;;AAGF;IACE,gBAAgB;IAChB,kEAAkE;IAClE,iEAAiE;EAKnE;;AAHE;MACE,iEAAiE;IACnE;;AAGF;IACE,qBAAqB;IACrB,6CAA6C;EAC/C;;AAEA;IACE,4CAA4C;EAC9C;;AAEA;;;IAGE,eAAe;IACf,6CAA6C;EAW/C;;AATE;MACE,kBAAkB;MAClB,MAAM;MACN,SAAS;MACT,OAAO;MACP,UAAU;MACV,WAAW;MACX,mDAAmD;IACrD;;AAGF;IACE,WAAW;IACX,mDAAmD;IACnD,4BAA4B;IAC5B,kBAAkB;EACpB;;AAEA;IACE,YAAY;IACZ,iDAAiD;EACnD;;AAEA;IACE,YAAY;IACZ,gCAAgC;EAClC;;AAEA;IACE,WAAW;IACX,kDAAkD;EACpD;;AAGE;MACE,6BAA6B;IAC/B;;AAIJ;EACE,cAAc;EACd,4HAA4H;EAC5H,aAAa;EACb,gBAAgB;EAChB,kBAAkB;EAClB,kDAAkD;EAClD,8BAA8B;EAC9B,kFAAkF;AAgBpF;;AAdE;IACE,qBAAqB;EACvB;;AAEA;IACE,8DAA8D;IAC9D,+DAA+D;EACjE;;AAEA;IACE,gBAAgB;IAChB,kEAAkE;IAClE,iEAAiE;EACnE","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--yattho-stack-gap-normal, 16px);\n  list-style: none;\n  background-color: var(--color-canvas-default);\n  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n  color: var(--color-fg-default);\n  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);\n\n    &::before {\n      border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n\n    &::before {\n      border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--color-neutral-subtle);\n  }\n\n  &:active {\n    background-color: var(--color-canvas-subtle);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--color-menu-bg-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      background-color: var(--color-yattho-border-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--yattho-control-medium-gap, 8px);\n    color: var(--color-fg-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--yattho-control-small-gap, 4px);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--color-attention-fg);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--yattho-control-small-gap, 4px);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--color-danger-fg);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-fg-default);\n  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n}"]}
+{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,eAAgB,CADhB,iDAKF,CAEA,WAKE,gFAAkF,CADlF,6BAA8B,CAF9B,aAAc,CACd,yHAA4H,CAF5H,iBA+EF,CAzEE,uBACE,YAAa,CAEb,6DAKF,CAHE,qDAHA,4DAKA,CAGF,sBACE,eAAgB,CAChB,gEAMF,CAHE,mDAFA,+DAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,2HAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,iDAAmD,CAEnD,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,+CACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,gDACF,CAGE,0BACE,4BACF,CAIJ,cAQE,gFAAkF,CADlF,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAAkD,CAFlD,eAAgB,CADhB,YAAa,CADb,yHAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,4DAA8D,CAC9D,6DACF,CAEA,yBACE,eAAgB,CAEhB,+DAAiE,CADjE,gEAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--yattho-stack-gap-normal, 16px);\n  list-style: none;\n  background-color: var(--color-canvas-default);\n  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n  color: var(--color-fg-default);\n  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);\n\n    &::before {\n      border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n\n    &::before {\n      border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--color-neutral-subtle);\n  }\n\n  &:active {\n    background-color: var(--color-canvas-subtle);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--color-menu-bg-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      background-color: var(--color-yattho-border-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--yattho-control-medium-gap, 8px);\n    color: var(--color-fg-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--yattho-control-small-gap, 4px);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--color-attention-fg);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--yattho-control-small-gap, 4px);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--color-danger-fg);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-fg-default);\n  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n}"]}

data/app/components/yattho/alpha/modal_dialog.js

@@ -86,6 +86,7 @@ export class ModalDialogElement extends HTMLElement {
                 return;
             this.setAttribute('open', '');
             (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
+            document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
             document.body.style.overflow = 'hidden';
             if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
                 __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
@@ -98,6 +99,7 @@ export class ModalDialogElement extends HTMLElement {
                 return;
             this.removeAttribute('open');
             (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
+            document.body.style.paddingRight = '0';
             document.body.style.overflow = 'initial';
             __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
             // if #openButton is a child of a menu, we need to focus a suitable child of the menu