@primer/css 20.8.0-rc.fe3706b6 → 20.8.0

package/truncate/truncate.scss

@@ -1,61 +1,2 @@
-// Truncate
-//
-// css-truncate will shorten text with an ellipsis.
-
-.css-truncate {
-
-  // css-truncate-auto will shorten text with an ellipsis when overflowing
-  &.css-truncate-overflow,
-  .css-truncate-overflow,
-  &.css-truncate-target,
-  .css-truncate-target {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  // css-truncate-target will shorten text with an ellipsis and a max width
-  &.css-truncate-target,
-  .css-truncate-target {
-    display: inline-block;
-    max-width: 125px;
-    vertical-align: top;
-  }
-
-  &.expandable.zeroclipboard-is-hover .css-truncate-target,
-  &.expandable.zeroclipboard-is-hover.css-truncate-target,
-  &.expandable:hover .css-truncate-target,
-  &.expandable:hover.css-truncate-target {
-    max-width: 10000px !important;
-  }
-}
-
-.Truncate {
-  display: inline-flex;
-  min-width: 0;
-  max-width: 100%;
-
-  > .Truncate-text {
-    min-width: 1ch;
-    max-width: fit-content;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    + .Truncate-text {
-      margin-left: $spacer-1;
-    }
-
-    &.Truncate-text--primary {
-      flex-basis: 200%;
-    }
-
-    &.Truncate-text--expandable:hover,
-    &.Truncate-text--expandable:focus,
-    &.Truncate-text--expandable:active {
-      max-width: 100% !important;
-      flex-shrink: 0;
-      cursor: pointer;
-    }
-  }
-}
+@import '@primer/view-components/app/components/primer/truncate';
+@import '@primer/view-components/app/components/primer/beta/truncate';

package/layout/mixins.scss

@@ -1,105 +0,0 @@
-// Layout alpha mixins
-
-@mixin flow-as-row {
-  grid-auto-flow: row;
-  grid-template-columns: 1fr !important;
-
-  .Layout-sidebar,
-  .Layout-divider,
-  .Layout-main {
-    width: 100% !important;
-    grid-column: 1 !important;
-  }
-
-  &.Layout--sidebarPosition-flowRow-start {
-    .Layout-sidebar {
-      grid-row: 1;
-    }
-
-    .Layout-main {
-      grid-row: 2 / span 2;
-    }
-  }
-
-  &.Layout--sidebarPosition-flowRow-end {
-    .Layout-sidebar {
-      grid-row: 2 / span 2;
-    }
-
-    .Layout-main {
-      grid-row: 1;
-    }
-  }
-
-  &.Layout--sidebarPosition-flowRow-none {
-    .Layout-sidebar {
-      display: none;
-    }
-  }
-
-  &.Layout--divided {
-    @include flow-as-row-divider;
-
-    .Layout-main {
-      grid-row: 3 / span 1;
-    }
-
-    &.Layout--sidebarPosition-flowRow-end {
-      .Layout-sidebar {
-        grid-row: 3 / span 1;
-      }
-
-      .Layout-main {
-        grid-row: 1;
-      }
-    }
-  }
-}
-
-@mixin flow-as-row-divider {
-  --Layout-gutter: 0;
-
-  .Layout-divider {
-    height: 1px;
-    grid-row: 2;
-
-    &.Layout-divider--flowRow-hidden {
-      display: none;
-    }
-
-    &.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: $border-width 0;
-    }
-  }
-}
-
-// Layout beta mixins
-
-// responsive region dividers
-
-@mixin Layout-line-divider {
-  position: absolute;
-  left: calc(var(--Layout-outer-spacing-x) * -1);
-  display: block;
-  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
-  height: 1px;
-  content: '';
-  background-color: $Layout-divider-color;
-}
-
-@mixin Layout-filled-divider {
-  position: absolute;
-  bottom: calc(#{$spacer-2} * -1); // -8px
-  left: calc(var(--Layout-outer-spacing-x) * -1);
-  display: block;
-  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
-  height: #{$spacer-2}; // 8px
-  content: '';
-  background-color: var(--color-canvas-inset);
-  box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
-}