@papillonbits/components 1.0.0 → 1.2.0

package/build/primer/Form/form-validation.scss

@@ -1,370 +0,0 @@
-// Needs refactoring
-// stylelint-disable no-descending-specificity
-// stylelint-disable selector-no-qualifying-type, selector-max-type
-dl.form-group > dd, // TODO: Deprecate
-.form-group > .form-group-body {
-  .form-control {
-    &.is-autocheck-loading,
-    &.is-autocheck-successful,
-    &.is-autocheck-errored {
-      // stylelint-disable-next-line primer/spacing
-      padding-right: 30px; // Leave some space for our validation icons
-    }
-
-    &.is-autocheck-loading {
-      // background-image: url('/images/spinners/octocat-spinner-16px.gif');
-    }
-
-    &.is-autocheck-successful {
-      // background-image: url('/images/modules/ajax/success.png');
-    }
-
-    &.is-autocheck-errored {
-      // background-image: url('/images/modules/ajax/error.png');
-    }
-  }
-}
-
-// Retinization of form validation icons that aren't octicons yet
-@include retina-media-query {
-  dl.form-group > dd, // TODO: Deprecate
-  .form-group > .form-group-body {
-    .form-control {
-      &.is-autocheck-loading,
-      &.is-autocheck-successful,
-      &.is-autocheck-errored {
-        background-size: 16px 16px;
-      }
-
-      &.is-autocheck-loading {
-        // background-image: url('/images/spinners/octocat-spinner-32.gif');
-      }
-
-      &.is-autocheck-successful {
-        // background-image: url('/images/modules/ajax/success@2x.png');
-      }
-
-      &.is-autocheck-errored {
-        // background-image: url('/images/modules/ajax/error@2x.png');
-      }
-    }
-  }
-}
-
-// Inline verification
-// This overrides primer's inline form stuff
-.status-indicator {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  // stylelint-disable-next-line primer/spacing
-  margin-left: 5px;
-
-  .octicon {
-    display: none;
-  }
-}
-
-.status-indicator-success {
-  // Override primer
-  &::before {
-    content: '';
-  }
-
-  .octicon-check {
-    display: inline-block;
-    color: var(--color-success-fg);
-    fill: var(--color-success-fg);
-  }
-
-  .octicon-x {
-    display: none;
-  }
-}
-
-.status-indicator-failed {
-  // Override primer
-  &::before {
-    content: '';
-  }
-
-  .octicon-check {
-    display: none;
-  }
-
-  .octicon-x {
-    display: inline-block;
-    color: var(--color-danger-fg);
-    fill: var(--color-danger-fg);
-  }
-}
-
-.status-indicator-loading {
-  width: 16px;
-  // background-image: url('/images/spinners/octocat-spinner-32-EAF2F5.gif');
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  background-size: 16px;
-}
-
-.inline-form {
-  display: inline-block;
-
-  .btn-plain {
-    background-color: transparent;
-    border: 0;
-  }
-}
-
-// Drag and drop
-//
-// Previously part of `_forms.scss` in Primer. Needs accounting for.
-
-.drag-and-drop {
-  // stylelint-disable-next-line primer/spacing
-  padding: 7px 10px;
-  margin: 0;
-  // stylelint-disable-next-line primer/typography
-  font-size: 13px;
-  // stylelint-disable-next-line primer/typography
-  line-height: 16px;
-  color: var(--color-fg-muted);
-  background-color: var(--color-canvas-subtle);
-  border: $border-width $border-style var(--color-border-default);
-  border-top: 0;
-  border-bottom-right-radius: $border-radius;
-  border-bottom-left-radius: $border-radius;
-
-  .default,
-  .loading,
-  .error {
-    display: none;
-  }
-
-  .error {
-    color: var(--color-danger-fg);
-  }
-
-  // Spinner
-  img {
-    vertical-align: top;
-  }
-}
-
-.is-default .drag-and-drop .default {
-  display: inline-block;
-}
-
-.is-uploading .drag-and-drop .loading {
-  display: inline-block;
-}
-
-.is-bad-file .drag-and-drop .bad-file {
-  display: inline-block;
-}
-
-.is-duplicate-filename .drag-and-drop .duplicate-filename {
-  display: inline-block;
-}
-
-.is-too-big .drag-and-drop .too-big {
-  display: inline-block;
-}
-
-.is-hidden-file .drag-and-drop .hidden-file {
-  display: inline-block;
-}
-
-.is-empty .drag-and-drop .empty {
-  display: inline-block;
-}
-
-.is-bad-permissions .drag-and-drop .bad-permissions {
-  display: inline-block;
-}
-
-.is-repository-required .drag-and-drop .repository-required {
-  display: inline-block;
-}
-
-.drag-and-drop-error-info {
-  font-weight: $font-weight-normal;
-  color: var(--color-fg-muted);
-
-  a {
-    color: var(--color-accent-fg);
-  }
-}
-
-.is-failed .drag-and-drop .failed-request {
-  display: inline-block;
-}
-
-.manual-file-chooser {
-  position: absolute;
-  width: 240px;
-  // stylelint-disable-next-line primer/spacing
-  padding: 5px;
-  // stylelint-disable-next-line primer/spacing
-  margin-left: -80px;
-  cursor: pointer;
-  opacity: 0.0001;
-}
-
-.manual-file-chooser:hover + .manual-file-chooser-text {
-  text-decoration: underline;
-}
-
-.btn {
-  // align manual-file-chooser inside a button
-  .manual-file-chooser {
-    top: 0;
-    padding: 0;
-    // stylelint-disable-next-line primer/typography
-    line-height: 34px;
-  }
-}
-
-// Focused Textarea styles
-.upload-enabled {
-  textarea {
-    display: block;
-    // stylelint-disable-next-line primer/borders
-    border-bottom: $border-width dashed var(--color-border-default);
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  &.focused {
-    border-color: var(--color-accent-fg);
-    border-radius: $border-radius;
-    outline: none;
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 2px var(--color-accent-fg);
-
-    .form-control {
-      border-color: transparent;
-      border-bottom-color: var(--color-accent-fg);
-      box-shadow: none;
-    }
-
-    .drag-and-drop {
-      border-color: transparent;
-    }
-  }
-}
-
-// Dropping a file on top
-.dragover textarea,
-.dragover .drag-and-drop {
-  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: rgba(#c9ff00, 1) 0 0 3px;
-}
-
-.write-content {
-  position: relative;
-}
-
-// Form style with a write and a preview tab
-.previewable-comment-form {
-  position: relative;
-
-  .tabnav {
-    position: relative;
-    padding: $spacer-2 $spacer-2 0;
-  }
-
-  .comment {
-    border: $border-width $border-style var(--color-border-default);
-  }
-
-  .comment-form-error {
-    margin-bottom: $spacer-2;
-  }
-
-  .write-content,
-  .preview-content {
-    display: none;
-    margin: 0 $spacer-2 $spacer-2;
-  }
-
-  &.write-selected .write-content,
-  &.preview-selected .preview-content {
-    display: block;
-  }
-
-  textarea {
-    display: block;
-    width: 100%;
-    min-height: 100px;
-    max-height: 500px;
-    padding: $spacer-2;
-    resize: vertical;
-  }
-}
-
-// Used in our boxed-group-less form styles. Give the submit button enough space
-// to breathe without the need for the extra hr.
-.form-action-spacious {
-  // stylelint-disable-next-line primer/spacing
-  margin-top: 10px;
-}
-
-// A two column form, with a .main and a .sidebar column
-//
-// Override some `.timeline-comment-wrapper` defaults.
-// The `div` is needed to be more specific than the other class.
-div.composer {
-  margin-top: 0;
-  border: 0;
-}
-
-// Override the previewable comment form defaults
-.composer .comment-form-textarea {
-  height: 200px;
-  min-height: 200px;
-}
-
-.composer .tabnav {
-  // stylelint-disable-next-line primer/spacing
-  margin: 0 0 10px;
-}
-
-// Misc CSS
-//
-// Previously part of `_forms.scss` in Primer. Needs accounting for.
-
-h2.account {
-  // stylelint-disable-next-line primer/spacing
-  margin: 15px 0 0;
-  // stylelint-disable-next-line primer/typography
-  font-size: 18px;
-  font-weight: $font-weight-normal;
-  color: var(--color-fg-muted);
-}
-
-p.explain {
-  position: relative;
-  font-size: $font-size-small;
-  color: var(--color-fg-muted);
-
-  strong {
-    color: var(--color-fg-default);
-  }
-
-  .octicon {
-    // stylelint-disable-next-line primer/spacing
-    margin-right: 5px;
-    color: var(--color-fg-muted);
-  }
-
-  .minibutton {
-    top: -4px;
-    float: right;
-  }
-}
-
-// fix for chrome bug, see https://github.com/github/github/issues/53931
-.form-group label {
-  position: static;
-}

package/build/primer/Label/diffstat.scss

@@ -1,37 +0,0 @@
-// diffstat
-//
-// Green/red blocks showing additions and deletions
-
-.diffstat {
-  font-size: $h6-size;
-  font-weight: $font-weight-bold;
-  color: var(--color-fg-muted);
-  white-space: nowrap;
-  cursor: default;
-}
-
-.diffstat-block-deleted,
-.diffstat-block-added,
-.diffstat-block-neutral {
-  display: inline-block;
-  width: $spacer-2;
-  height: $spacer-2;
-  // stylelint-disable-next-line primer/spacing
-  margin-left: 1px;
-  outline-offset: -1px; // Support Firefox custom colors
-}
-
-.diffstat-block-deleted {
-  background-color: var(--color-danger-emphasis);
-  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
-}
-
-.diffstat-block-added {
-  background-color: var(--color-diffstat-addition-bg);
-  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
-}
-
-.diffstat-block-neutral {
-  background-color: var(--color-neutral-muted);
-  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
-}

package/build/primer/Layout/mixins.scss

@@ -1,108 +0,0 @@
-// stylelint-disable custom-property-pattern
-// 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;
-}