@primer/css 0.0.0-20220329001647 → 0.0.0-20220329051130

package/layout/page-header.scss

@@ -1,227 +0,0 @@
-.PageHeader {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas:
-    'contextBar'
-    'titleBar'
-    'description'
-    'navigation';
-  
-  // Context bar
-
-  .PageHeader-contextBar {
-    display: flex;
-    column-gap: 16px;
-    align-items: center;
-
-    .PageHeader-parentLink {
-      flex: 1 1 auto;
-    }
-
-    .PageHeader-actions {
-      flex: 0 0 auto;
-    }
-  }
-
-  // Title bar
-
-  .PageHeader-titleBar {
-    display: flex;
-    column-gap: 16px;
-
-    .PageHeader-titleWrap {
-      flex: 1 1 auto;
-    }
-
-    .PageHeader-actions {
-      flex: 0 0 auto;
-    }
-  }
-  
-  //////////////
-
-  .PageHeader-parentLink {
-
-    a {
-      display: inline-grid;
-      grid-template-columns: min-content auto;
-      gap: var(--gh-gutter-small);
-      gap: 4px; // fixme
-      align-items: center;
-      color: var(--color-fg-muted);
-      font-size: var(--gh-text-caption-size);
-      line-height: var(--gh-text-caption-lineHeight);
-      padding: 4px 8px;
-      margin: -4px -8px;
-      border-radius: 6px;
-
-      &:hover {
-        color: var(--color-fg-default);
-        text-decoration: none;
-        background: #ececec; //fixme
-      }
-    }
-
-    .PageHeader-parentLink-label {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-
-  // Title wrap
-  
-  .PageHeader-titleWrap {
-
-    // Title variants
-
-    &.PageHeader-titleWrap--large {
-      // Replace with Primer primitives design tokens: `title-large` 
-      font: 400 2rem/calc(40 / 32) $body-font;
-
-      .PageHeader-backButton a {
-        // Replace with Primer primitives `title-large` lineBoxHeight
-        height: 2.5rem;
-      }
-
-      .PageHeader-leadingVisual {
-        // Replace with Primer primitives `title-large` lineBoxHeight
-        max-height: 2.5rem;
-      }
-    }
-    &.PageHeader-titleWrap--medium {
-      // Replace with Primer primitives design tokens: `title-medium` 
-      font: 600 1.25rem/calc(32 / 20) $body-font;
-    }
-    &.PageHeader-titleWrap--subtitle {
-      // Replace with Primer primitives design tokens: `subtitle` 
-      font: 400 1.25rem/calc(32 / 20) $body-font;
-    }
-
-    // Reponsive title variants
-
-    // Replace with viewport range variables: `narrow`
-    @media (max-width: 768px) {
-      &.PageHeader-titleWrap--medium-whenNarrow {
-        // Replace with Primer primitives design tokens: `title-medium` 
-        font: 600 1.25rem/calc(32 / 20) $body-font;
-      }
-
-      &.PageHeader-titleWrap--subtitle-whenNarrow {
-        // Replace with Primer primitives design tokens: `title-medium` 
-        font: 400 1.25rem/calc(32 / 20) $body-font;
-      }
-    }
-
-    &.PageHeader-titleWrap--hasLeadingVisual {
-      background: pink;
-    }
-
-    &.PageHeader-titleWrap--hasBackButton {
-      //background: yellow;
-      //margin-left: -8px;
-      grid-template-columns: min-content auto;
-    }
-
-    &.PageHeader-titleWrap--hasInteractiveTitle {
-      background: orange;
-    }
-
-    h1, h2, h3 {
-      font-size: inherit;
-      line-height: inherit;
-      font-weight: inherit;
-      //outline: 1px solid red;
-    }
-
-    .PageHeader-title {
-      display: inline-grid;
-      grid-auto-flow: column;
-      grid-template-columns: auto;
-      gap: 8px;
-    }
-
-    .PageHeader-leadingVisual {
-      display: grid;
-      align-items: center;
-      // Replace with Primer primitives design token: `title-lineBoxHeight`
-      max-height: 2rem;
-    }
-
-    .PageHeader-title--interactive {
-      position: relative;
-      align-items: center;
-      color: inherit;
-      padding: 0 8px;
-      margin: 0 -8px;
-      border-radius: 6px;
-
-      &:hover {
-        // Replace with Primer primitives generic control hover bg
-        background-color: var(--color-action-list-item-default-hover-bg);
-        text-decoration: none;
-      }
-
-      @media (pointer: coarse) {
-        // Replace with minTouchTarget mixin
-        &:after {
-          content: "";
-          position: absolute;
-          // Replace with Primer primitives `gh-minTouchTarget`
-          min-height: 44px;
-          margin-top: -22px;
-          inset: 50% 0 0 0;
-        }
-      }
-
-      > span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-
-  }
-
-  // Back button
-
-  .PageHeader-backButton {
-    a {
-      display: grid;
-      width: 16px;
-      height: var(--gh-text-title-medium-lineBoxHeight);
-      //background: red;
-      align-items: center;
-      border-radius: 6px;
-      color: inherit;
-      position: relative;
-
-      &:hover {
-        background: orange;
-      }
-
-      @media (pointer: coarse) {
-        &:after {
-          position: absolute;
-          content: "";
-          inset: 0;
-          background: red;
-        }
-      }
-    }
-  }
-
-  // Description slot
-
-  .PageHeader-description {
-    margin-top: 8px;
-    overflow: auto;
-  }
-
-  // Navigation slot
-
-  .PageHeader-navigation {
-    margin-top: 16px;
-    overflow: auto;
-  }
-}