@primer/css 0.0.0-202110127549 → 0.0.0-2021101303439

package/layout/layout-beta.scss

@@ -1,389 +0,0 @@
-// 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: 1fr;
-  --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;
-      max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
-
-      > [class^="container-"] {
-        margin-left: 0;
-      }
-    }
-
-    &.#{$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/marketing/support/mixins.scss

@@ -1,66 +0,0 @@
-@mixin btn-solid-mktg($color, $bg, $bg2, $bg3, $bg4) {
-  color: $color;
-  background-color: $bg2;
-  background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
-
-  &::before {
-    background-image: linear-gradient(-180deg, $bg3 0%, $bg4 100%);
-  }
-
-  &:hover,
-  &.hover,
-  &:active,
-  &.selected,
-  &[aria-selected=true],
-  [open] > & {
-    background-color: $bg2;
-    background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
-  }
-
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2em rgba($bg2, 0.4);
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    pointer-events: none;
-    cursor: default;
-    opacity: 0.5;
-  }
-}
-
-@mixin btn-outline-mktg($color, $color2, $border, $borderHover, $borderFocus, $borderFocusInset) {
-  color: $color;
-  background: none;
-  box-shadow: 0 0 0 1px $border inset;
-
-  &::before {
-    display: none;
-  }
-
-  &:hover,
-  &.hover,
-  &:active,
-  &.selected,
-  &[aria-selected=true],
-  [open] > & {
-    color: $color2;
-    background: none;
-    box-shadow: 0 0 0 2px $borderHover inset;
-  }
-
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: 0 0 0 2px $borderFocus inset, 0 0 0 4px $borderFocusInset;
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    opacity: 0.5;
-  }
-}