@primer/css 0.0.0-1f16d51 → 0.0.0-2021101014711

package/layout/grid.scss

@@ -1,32 +1,32 @@
 // GRID
 
 // Columns
-.col-1 { width: (1 / 12 * 100%); }
-.col-2 { width: (2 / 12 * 100%); }
-.col-3 { width: (3 / 12 * 100%); }
-.col-4 { width: (4 / 12 * 100%); }
-.col-5 { width: (5 / 12 * 100%); }
-.col-6 { width: (6 / 12 * 100%); }
-.col-7 { width: (7 / 12 * 100%); }
-.col-8 { width: (8 / 12 * 100%); }
-.col-9 { width: (9 / 12 * 100%); }
-.col-10 { width: (10 / 12 * 100%); }
-.col-11 { width: (11 / 12 * 100%); }
+.col-1 { width: (1 * 0.0833333333 * 100%); }
+.col-2 { width: (2 * 0.0833333333 * 100%); }
+.col-3 { width: (3 * 0.0833333333 * 100%); }
+.col-4 { width: (4 * 0.0833333333 * 100%); }
+.col-5 { width: (5 * 0.0833333333 * 100%); }
+.col-6 { width: (6 * 0.0833333333 * 100%); }
+.col-7 { width: (7 * 0.0833333333 * 100%); }
+.col-8 { width: (8 * 0.0833333333 * 100%); }
+.col-9 { width: (9 * 0.0833333333 * 100%); }
+.col-10 { width: (10 * 0.0833333333 * 100%); }
+.col-11 { width: (11 * 0.0833333333 * 100%); }
 .col-12 { width: 100%; }
 
 @each $breakpoint in map-keys($breakpoints) {
   @include breakpoint($breakpoint) {
-    .col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); }
-    .col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); }
-    .col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); }
-    .col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); }
-    .col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); }
-    .col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); }
-    .col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); }
-    .col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); }
-    .col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); }
-    .col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); }
-    .col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); }
+    .col-#{$breakpoint}-1 { width: ( 1 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-2 { width: ( 2 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-3 { width: ( 3 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-4 { width: ( 4 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-5 { width: ( 5 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-6 { width: ( 6 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-7 { width: ( 7 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-8 { width: ( 8 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-9 { width: ( 9 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-10 { width: ( 10 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-11 { width: ( 11 * 0.0833333333 * 100%); }
     .col-#{$breakpoint}-12 { width: 100%; }
   }
 }
@@ -37,7 +37,7 @@
   margin-right: -$gutter-width;
   margin-left: -$gutter-width;
 
-  > [class*="col-"] {
+  > [class*='col-'] {
     padding-right: $gutter-width !important;
     padding-left: $gutter-width !important;
   }

package/layout/index.scss

@@ -1,4 +1,8 @@
-@import "../support/index.scss";
-@import "./container.scss";
-@import "./grid.scss";
-@import "./grid-offset.scss";
+@import '../support/index.scss';
+@import './mixins.scss';
+
+@import './container.scss';
+@import './grid.scss';
+@import './grid-offset.scss';
+@import './layout.scss';
+@import './layout-beta.scss';

package/layout/layout-beta.scss

@@ -0,0 +1,391 @@
+// Component className
+
+$Layout: "LayoutBeta";
+$Layout-divider-color: red; // var(--color-border-default)
+
+// Property modifier names
+
+$Layout-prop-wrapper-sizing:      "wrapper-sizing";        // size?
+
+$Layout-prop-outer-spacing:       "outer-spacing";         // outer-m?
+$Layout-prop-inner-spacing:       "inner-spacing";         // inner-p?
+$Layout-prop-column-gap:          "column-gap";
+$Layout-prop-row-gap:             "row-gap";
+
+$Layout-prop-pane-divider:        "pane-divider";
+$Layout-prop-header-divider:      "header-divider";
+$Layout-prop-footer-divider:      "footer-divider";
+
+$Layout-prop-pane-position:       "pane-position";         // pane-pos?
+$Layout-prop-pane-width:          "pane-width";            // pane-w?
+$Layout-prop-pane-is-sticky:      "pane-is-sticky";        // pane-sticky?
+$Layout-prop-content-width:       "content-width";         // content-w?
+
+$Layout-prop-flow-horizontal:     "flow-horizontal";       // flow-h?
+$Layout-prop-responsive-behavior: "responsive-behavior";   // r?
+$Layout-prop-responsive-at:       "responsive-at";         // r-at?
+
+$Layout-prop-has-header:          "has-header";
+$Layout-prop-has-footer:          "has-footer";
+
+
+.#{$Layout} {
+  --Layout-pane-width: #{map-get($sidebar-width, 'sm')};
+  --Layout-content-width: 100%;
+
+  --Layout-template-columns: 1fr var(--Layout-pane-width);
+  --Layout-template-rows: min-content;
+  --Layout-template-areas: "content pane";
+
+  --Layout-column-gap: #{$spacer-3};
+  --Layout-row-gap: #{$spacer-3};
+
+  --Layout-outer-spacing-x: 0; // wrapper margin x
+  --Layout-outer-spacing-y: 0; // wrapper margin y
+
+  --Layout-inner-spacing-min: 0; // default region padding
+  --Layout-inner-spacing-max: 0; // relaxed content horizontal padding
+
+  // `flow-horizontal` determines whether `Layout` can render desktop-friendly
+  // two-column layouts. It should appear by default for compatibility
+  // with desktop browsers that have JavaScript disabled.
+
+  // Use `responsive-behaviorAt` to determine in which breakpoint `Layout` will
+  // stop flowing horizontally. In these cases `flow-horizontal` class will be
+  // removed.
+
+  // The reason this is not a media query is because it's still not possible to
+  // use CSS variables to determine the breakpoint dinamically. (And the other
+  // option would be to duplicate too much code.)
+
+  &.#{$Layout}--#{$Layout-prop-flow-horizontal} {
+
+    margin: var(--Layout-outer-spacing-x);
+    
+    > .#{$Layout}-regions {
+      display: grid;
+      column-gap: var(--Layout-column-gap);
+      row-gap: var(--Layout-row-gap);
+      grid-template-columns: var(--Layout-template-columns);
+      grid-template-rows: var(--Layout-template-rows);
+      grid-template-areas: var(--Layout-template-areas);
+    }
+
+    // pane-position
+
+    &.#{$Layout}--#{$Layout-prop-pane-position}-start {
+      --Layout-template-columns: var(--Layout-pane-width) 1fr;
+      --Layout-template-areas: "pane content";
+
+      &.#{$Layout}--#{$Layout-prop-has-header} {
+        --Layout-template-areas: "header header"
+                                 "pane content";
+      }
+
+      &.#{$Layout}--#{$Layout-prop-has-footer} {
+        --Layout-template-areas: "pane content"
+                                 "footer footer";
+      }
+
+      &.#{$Layout}--#{$Layout-prop-has-header}.#{$Layout}--#{$Layout-prop-has-footer} {
+        --Layout-template-areas: "header header"
+                                 "pane content"
+                                 "footer footer";
+      }
+    }
+
+    &.#{$Layout}--#{$Layout-prop-pane-position}-end {
+      --Layout-template-columns: 1fr var(--Layout-pane-width);
+      --Layout-template-areas: "content pane";
+
+      &.#{$Layout}--#{$Layout-prop-has-header} {
+        --Layout-template-areas: "header header"
+                                 "content pane";
+      }
+
+      &.#{$Layout}--#{$Layout-prop-has-footer} {
+        --Layout-template-areas: "content pane"
+                                 "footer footer";
+      }
+
+      &.#{$Layout}--#{$Layout-prop-has-header}.#{$Layout}--#{$Layout-prop-has-footer} {
+        --Layout-template-areas: "header header"
+                                 "content pane"
+                                 "footer footer";
+      }
+    }
+
+    // Template rows heights
+
+    &.#{$Layout}--#{$Layout-prop-has-header} {
+      --Layout-template-rows: min-content 1fr;
+    }
+
+    &.#{$Layout}--#{$Layout-prop-has-footer} {
+      --Layout-template-rows: 1fr min-content;
+    }
+
+    &.#{$Layout}--#{$Layout-prop-has-header}.#{$Layout}--#{$Layout-prop-has-footer} {
+      --Layout-template-rows: min-content 1fr min-content;
+    }
+
+    // Outer spacing
+
+    &.#{$Layout}--#{$Layout-prop-outer-spacing}-normal {
+      --Layout-outer-spacing-x: #{$spacer-3}; // 16px
+      --Layout-outer-spacing-y: #{$spacer-3}; // 16px
+
+      @include breakpoint(lg) {
+        --Layout-outer-spacing-x: #{$spacer-4}; // 24px
+        --Layout-outer-spacing-y: #{$spacer-4}; // 24px
+      }
+    }
+
+    &.#{$Layout}--#{$Layout-prop-outer-spacing}-condensed {
+      --Layout-outer-spacing-x: #{$spacer-3}; // 16px
+      --Layout-outer-spacing-y: #{$spacer-3}; // 16px
+    }
+
+    // Inner spacing
+
+    &.#{$Layout}--#{$Layout-prop-inner-spacing}-normal {
+      --Layout-inner-spacing-min: #{$spacer-3}; // 16px
+      --Layout-inner-spacing-max: #{$spacer-3}; // 16px
+
+      @include breakpoint(lg) {
+        --Layout-inner-spacing-max: #{$spacer-4}; // 24px
+      }
+    }
+
+    &.#{$Layout}--#{$Layout-prop-inner-spacing}-condensed {
+      --Layout-inner-spacing-min: #{$spacer-3}; // 16px
+      --Layout-inner-spacing-max: #{$spacer-3}; // 16px
+    }
+
+    // Pane divider
+
+    &.#{$Layout}--#{$Layout-prop-pane-divider} {
+      &.#{$Layout}--#{$Layout-prop-pane-position}-start {
+        .#{$Layout}-pane {
+          border-right: 1px solid $Layout-divider-color;
+        }
+
+        &:not(.#{$Layout}--#{$Layout-prop-column-gap}-none) {
+          .#{$Layout}-pane {
+            margin-right: calc(var(--Layout-column-gap) * -1);
+            padding-right: calc(var(--Layout-column-gap) - 1px);
+          }
+          .#{$Layout}-content {
+            margin-left: var(--Layout-column-gap);
+          }
+        }
+      }
+
+      &.#{$Layout}--#{$Layout-prop-pane-position}-end {
+        .#{$Layout}-pane {
+          border-left: 1px solid $Layout-divider-color;
+        }
+
+        &:not(.#{$Layout}--#{$Layout-prop-column-gap}-none) {
+          .#{$Layout}-pane {
+            margin-left: calc(var(--Layout-column-gap) * -1);
+            padding-left: calc(var(--Layout-column-gap) - 1px);
+          }
+          .#{$Layout}-content {
+            margin-right: var(--Layout-column-gap);
+          }
+        }
+      }
+    }
+
+    // Header divider
+
+    &.#{$Layout}--#{$Layout-prop-header-divider} {
+      .#{$Layout}-header {
+        border-bottom: 1px solid $Layout-divider-color;
+      }
+    }
+
+    // Footer divider
+
+    &.#{$Layout}--#{$Layout-prop-footer-divider} {
+      .#{$Layout}-footer {
+        border-top: 1px solid $Layout-divider-color;
+      }
+    }
+
+    // Column gap
+
+    &.#{$Layout}--#{$Layout-prop-column-gap}-normal {
+      --Layout-column-gap: #{$spacer-3}; // 16px
+
+      @include breakpoint(lg) {
+        --Layout-column-gap: #{$spacer-4}; // 24px
+      }
+    }
+
+    &.#{$Layout}--#{$Layout-prop-column-gap}-condensed {
+      --Layout-column-gap: #{$spacer-3}; // 16px
+    }
+
+    &.#{$Layout}--#{$Layout-prop-column-gap}-none {
+      // A `px` unit is needed in here to define it as a length type
+      // See https://stackoverflow.com/a/32518348
+      --Layout-column-gap: 0px;
+    }
+
+    // Row gap
+
+    &.#{$Layout}--#{$Layout-prop-row-gap}-normal {
+      --Layout-row-gap: #{$spacer-3}; // 16px
+
+      @include breakpoint(lg) {
+        --Layout-row-gap: #{$spacer-4}; // 24px
+      }
+    }
+
+    &.#{$Layout}--#{$Layout-prop-row-gap}-none {
+      // A `px` unit is needed in here to define it as a length type
+      // See https://stackoverflow.com/a/32518348
+      --Layout-row-gap: 0px;
+    }
+
+    &.#{$Layout}--#{$Layout-prop-row-gap}-condensed {
+      --Layout-row-gap: #{$spacer-3}; // 16px
+    }
+
+    // Content width
+
+    [class^="#{$Layout}-content-centered-"] {
+      margin-left: auto;
+      margin-right: auto;
+      background: palevioletred;
+      max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
+
+      > [class^="container-"] {
+        margin-left: 0;
+        background: blue;
+      }
+    }
+
+    &.#{$Layout}--#{$Layout-prop-pane-divider} {
+      [class^="#{$Layout}-content-centered-"] {
+        max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + (var(--Layout-column-gap) * 2));
+      }
+    }
+
+    .#{$Layout}-content-centered-sm {
+      --Layout-content-width: #{$container-sm};
+    }
+
+    .#{$Layout}-content-centered-md {
+      --Layout-content-width: #{$container-md};
+    }
+
+    .#{$Layout}-content-centered-lg {
+      --Layout-content-width: #{$container-lg};
+    }
+
+    .#{$Layout}-content-centered-xl {
+      --Layout-content-width: #{$container-xl};
+    }
+
+    // Sticky pane
+    // FIXME - this is currently broken if footer is present
+
+    &.#{$Layout}--#{$Layout-prop-pane-is-sticky} {
+      .#{$Layout}-pane {
+        position: sticky;
+        max-height: 100vh;
+        overflow: auto;
+      }
+    }
+
+  }
+
+  // pane-width
+
+  @each $breakpoint in map-keys($sidebar-width) {
+    @include breakpoint($breakpoint) {
+      --Layout-pane-width: #{map-get($sidebar-width, $breakpoint)};
+    }
+  }
+
+  &.#{$Layout}--#{$Layout-prop-pane-width}-narrow {
+    @each $breakpoint in map-keys($sidebar-narrow-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-pane-width: #{map-get($sidebar-narrow-width, $breakpoint)};
+      }
+    }
+  }
+
+  &.#{$Layout}--#{$Layout-prop-pane-width}-wide {
+    @each $breakpoint in map-keys($sidebar-wide-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-pane-width: #{map-get($sidebar-wide-width, $breakpoint)};
+      }
+    }
+  }
+
+  // responsive-behavior
+
+  &.#{$Layout}--#{$Layout-prop-responsive-behavior}-flowVertical:not(.#{$Layout}--#{$Layout-prop-flow-horizontal}) {
+    > .#{$Layout}-regions {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-areas: var(--Layout-template-areas);
+    }
+  }
+
+  /*
+  &.#{$Layout}--#{$Layout-prop-responsive-behavior}-flowVertical:not(.#{$Layout}--#{$Layout-prop-flow-horizontal}) {
+    // flow vertically on mobile
+
+    > .#{$Layout}-regions {
+      row-gap: var(--Layout-row-gap);
+    }
+
+    .#{$Layout}-header, .#{$Layout}-content, .#{$Layout}-pane, .#{$Layout}-footer {
+      margin-bottom: var(--Layout-row-gap);
+    }
+  }
+
+  &.#{$Layout}--#{$Layout-prop-responsive-behavior}-splitAsPages:not(.#{$Layout}--#{$Layout-prop-flow-horizontal}) {
+    // split as pages on mobile
+    //background: yellow;
+  }
+  */
+
+  // Regions
+
+  .#{$Layout}-header, .#{$Layout}-content, .#{$Layout}-pane, .#{$Layout}-footer {
+    padding: var(--Layout-inner-spacing-min);
+  }
+
+  .#{$Layout}-header {
+    grid-area: header;
+    background: lightpink;
+  }
+
+  .#{$Layout}-content {
+    padding-left: var(--Layout-inner-spacing-max);
+    padding-right: var(--Layout-inner-spacing-max);
+    grid-area: content;
+    background: rgb(255, 197, 253);
+  }
+
+  .#{$Layout}-pane {
+    grid-area: pane;
+    background: rgb(215, 255, 233);
+  }
+
+  .#{$Layout}-footer {
+    grid-area: footer;
+    background: lightyellow;
+  }
+
+}
+
+// content-width
+// FIXME
+// content-centered

package/layout/layout.scss

@@ -0,0 +1,185 @@
+// Layout component
+
+.Layout {
+  display: grid;
+  --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
+  --Layout-gutter: 16px;
+
+  @media (max-width: calc(#{$width-sm} - 1px)) {
+    @include flow-as-row;
+  }
+
+  &.Layout--flowRow-until-md {
+    @media (max-width: calc(#{$width-md} - 1px)) {
+      @include flow-as-row;
+    }
+  }
+
+  &.Layout--flowRow-until-lg {
+    @media (max-width: calc(#{$width-lg} - 1px)) {
+      @include flow-as-row;
+    }
+  }
+
+  // Flow as column
+
+  grid-auto-flow: column;
+  grid-template-columns: auto 0 1fr; // sidebar column, separator, main column
+  // stylelint-disable-next-line primer/no-undefined-vars
+  grid-gap: var(--Layout-gutter);
+
+  .Layout-sidebar {
+    grid-column: 1;
+  }
+
+  .Layout-divider {
+    display: none;
+  }
+
+  .Layout-main {
+    grid-column: 2 / span 2;
+  }
+
+  // Gutter spacing
+
+  @include breakpoint(lg) {
+    --Layout-gutter: 24px;
+  }
+
+  &.Layout--gutter-none {
+    --Layout-gutter: 0;
+  }
+
+  &.Layout--gutter-condensed {
+    --Layout-gutter: 16px;
+  }
+
+  &.Layout--gutter-spacious {
+    @include breakpoint(lg) {
+      --Layout-gutter: 32px;
+    }
+
+    @include breakpoint(xl) {
+      --Layout-gutter: 40px;
+    }
+  }
+
+  // Sidebar width
+
+  @each $breakpoint in map-keys($sidebar-width) {
+    @include breakpoint($breakpoint) {
+      --Layout-sidebar-width: #{map-get($sidebar-width, $breakpoint)};
+    }
+  }
+
+  &.Layout--sidebar-narrow {
+    @each $breakpoint in map-keys($sidebar-narrow-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-sidebar-width: #{map-get($sidebar-narrow-width, $breakpoint)};
+      }
+    }
+  }
+
+  &.Layout--sidebar-wide {
+    @each $breakpoint in map-keys($sidebar-wide-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-sidebar-width: #{map-get($sidebar-wide-width, $breakpoint)};
+      }
+    }
+  }
+
+  // Sidebar position
+
+  &.Layout--sidebarPosition-start {
+    .Layout-sidebar {
+      grid-column: 1;
+    }
+
+    .Layout-main {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-end {
+    grid-template-columns: 1fr 0 auto;
+
+    .Layout-main {
+      grid-column: 1;
+    }
+
+    .Layout-sidebar {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  // Sidebar divider
+
+  &.Layout--divided {
+    .Layout-divider {
+      display: block;
+      grid-column: 2;
+      width: 1px;
+      // stylelint-disable-next-line primer/spacing
+      margin-right: -1px;
+      background: var(--color-border-default);
+    }
+
+    .Layout-main {
+      grid-column: 3 / span 1;
+    }
+
+    &.Layout--sidebarPosition-end {
+      .Layout-sidebar {
+        grid-column: 3 / span 1;
+      }
+
+      .Layout-main {
+        grid-column: 1;
+      }
+    }
+  }
+}
+
+.Layout-divider {
+  display: none;
+  width: 1px;
+}
+
+.Layout-sidebar {
+  // stylelint-disable-next-line primer/no-undefined-vars
+  width: var(--Layout-sidebar-width);
+}
+
+.Layout-main {
+  min-width: 0;
+
+  // Centered main column
+  // FIXME: right-aligned sidebar
+  .Layout-main-centered-md,
+  .Layout-main-centered-lg,
+  .Layout-main-centered-xl {
+    margin-right: auto;
+    margin-left: auto;
+
+    > .container-md,
+    > .container-lg,
+    > .container-xl {
+      margin-left: 0;
+    }
+  }
+
+  .Layout-main-centered-md {
+    // stylelint-disable-next-line primer/no-undefined-vars
+    max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  .Layout-main-centered-lg {
+    // stylelint-disable-next-line primer/no-undefined-vars
+    max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  .Layout-main-centered-xl {
+    // stylelint-disable-next-line primer/no-undefined-vars
+    max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+}