-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Importing more styles from Primer View Components (#2326)
* Importing labels css from pvc * Fixing blankslate change so we're not deleting a file * Importing truncate * Adding breadcrumb styles * Adding toggle_switch * Adding subhead * Adding timeline_item * Adding popover * Adding dropdown * Adding flash * Adding avatar and avatar stack * Adding autocomplete * Adding border box * Adding navigation styles * Updating version to canary * Fixing popover import * Adding progress bar * Adding to docs * Update version * Fix lock file * reset lock * Rebuild lockfile * Fixing imports
- Loading branch information
Showing
26 changed files
with
105 additions
and
2,319 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,155 +1 @@ | ||
| // stylelint-disable selector-max-type, no-duplicate-selectors | ||
|
|
||
| // Default flash | ||
| .flash:not(.Banner) { | ||
| position: relative; | ||
| // stylelint-disable-next-line primer/spacing | ||
| padding: 20px $spacer-3; | ||
| border-style: $border-style; | ||
| border-width: $border-width; | ||
| border-radius: $border-radius; | ||
|
|
||
| p:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .octicon { | ||
| // stylelint-disable-next-line primer/spacing | ||
| margin-right: 12px; | ||
| } | ||
| } | ||
|
|
||
| // Contain the flash messages | ||
| .flash-messages { | ||
| margin-bottom: $spacer-4; | ||
| } | ||
|
|
||
| // Close button | ||
| .flash-close:not(.Banner-close) { | ||
| float: right; | ||
| padding: $spacer-3; | ||
| margin: -$spacer-3; | ||
| text-align: center; | ||
| cursor: pointer; | ||
|
|
||
| // Undo `<button>` styles | ||
| background: none; | ||
| border: 0; | ||
| appearance: none; | ||
|
|
||
| &:hover { | ||
| opacity: 0.7; | ||
| } | ||
|
|
||
| &:active { | ||
| opacity: 0.5; | ||
| } | ||
|
|
||
| .octicon { | ||
| margin-right: 0; | ||
| } | ||
| } | ||
|
|
||
| // Action button | ||
| .flash-action:not(.Banner-actions) { | ||
| float: right; | ||
| // stylelint-disable-next-line primer/spacing | ||
| margin-top: -3px; | ||
| margin-left: $spacer-4; | ||
| background-clip: padding-box; | ||
|
|
||
| &.btn .octicon { | ||
| margin-right: $spacer-1; | ||
| color: var(--color-fg-muted); | ||
| } | ||
|
|
||
| &.btn-primary { | ||
| background-clip: border-box; | ||
|
|
||
| .octicon { | ||
| color: inherit; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // | ||
| // Color variations | ||
| // | ||
|
|
||
| .flash:not(.Banner) { | ||
| color: var(--color-fg-default); | ||
| background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle)); | ||
| border-color: var(--color-accent-muted); | ||
|
|
||
| .octicon { | ||
| color: var(--color-accent-fg); | ||
| } | ||
| } | ||
|
|
||
| .flash-warn:not(.Banner) { | ||
| color: var(--color-fg-default); | ||
| background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle)); | ||
| border-color: var(--color-attention-muted); | ||
|
|
||
| .octicon { | ||
| color: var(--color-attention-fg); | ||
| } | ||
| } | ||
|
|
||
| .flash-error:not(.Banner) { | ||
| color: var(--color-fg-default); | ||
| background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle)); | ||
| border-color: var(--color-danger-muted); | ||
|
|
||
| .octicon { | ||
| color: var(--color-danger-fg); | ||
| } | ||
| } | ||
|
|
||
| .flash-success:not(.Banner) { | ||
| color: var(--color-fg-default); | ||
| background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle)); | ||
| border-color: var(--color-success-muted); | ||
|
|
||
| .octicon { | ||
| color: var(--color-success-fg); | ||
| } | ||
| } | ||
|
|
||
| // | ||
| // Layout variations | ||
| // | ||
|
|
||
| .flash-full:not(.Banner) { | ||
| // stylelint-disable-next-line primer/spacing | ||
| margin-top: -1px; | ||
| border-width: $border-width 0; | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| // A banner rendered at the top of the page. | ||
| .flash-banner { | ||
| position: fixed; | ||
| top: 0; | ||
| z-index: 90; | ||
| width: 100%; | ||
| border-top: 0; | ||
| border-right: 0; | ||
| border-left: 0; | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| // Makes sure the background is opaque to cover any content underneath | ||
| .flash-full, | ||
| .flash-banner { | ||
| background-color: var(--color-canvas-default); | ||
| } | ||
|
|
||
| // FIXME deprecate this | ||
| .warning { | ||
| padding: $em-spacer-5; | ||
| // stylelint-disable-next-line primer/spacing | ||
| margin-bottom: 0.8em; | ||
| font-weight: $font-weight-bold; | ||
| background-color: var(--color-attention-subtle); | ||
| } | ||
| @import '@primer/view-components/app/components/primer/beta/flash'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,118 +1 @@ | ||
| // This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796 | ||
| // AutoComplete relies on FormControl, Overlay and ActionList CSS | ||
|
|
||
| // Stacked label (default) | ||
| .autocomplete-label-stacked { | ||
| display: block; | ||
| margin-bottom: $spacer-2 * 0.75; | ||
| } | ||
|
|
||
| // Inline label (non-default) | ||
| .autocomplete-label-inline { | ||
| display: inline; | ||
| margin-right: $spacer-2 * 0.75; | ||
| } | ||
|
|
||
| // Switch to stacked at smaller viewport | ||
| @media (max-width: $width-sm) { | ||
| .autocomplete-label-inline { | ||
| display: block; | ||
| margin-bottom: $spacer-2 * 0.75; | ||
| } | ||
| } | ||
|
|
||
| // Wrapper for the input and result elements to ensure alignment | ||
| .autocomplete-body { | ||
| position: relative; | ||
| display: inline; | ||
| } | ||
|
|
||
| // Wrapper and conditional styles for when an icon is added | ||
| .autocomplete-embedded-icon-wrap { | ||
| display: inline-flex; | ||
| padding: $spacer-1 $spacer-2; | ||
| align-items: center; | ||
|
|
||
| &:focus-within { | ||
| border-color: var(--color-accent-fg); | ||
|
|
||
| @include focusBoxShadowInset; | ||
| } | ||
|
|
||
| .form-control { | ||
| padding: 0; | ||
| margin-left: $spacer-2; | ||
| // stylelint-disable-next-line | ||
| border: none; | ||
| box-shadow: none; | ||
|
|
||
| &:focus { | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| &:focus-visible { | ||
| box-shadow: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // A pop up list of items used to show autocompleted results | ||
| .autocomplete-results { | ||
| position: absolute; | ||
| left: 0; | ||
| z-index: 99; | ||
| width: max-content; | ||
| min-width: 100%; | ||
| max-height: 20em; | ||
| overflow-y: auto; | ||
| // stylelint-disable-next-line primer/typography | ||
| font-size: 13px; | ||
| list-style: none; | ||
| background: var(--color-canvas-overlay); | ||
| border: $border-width $border-style var(--color-border-default); | ||
| border-radius: $border-radius; | ||
| box-shadow: var(--color-shadow-medium); | ||
| } | ||
|
|
||
| // One of the items that appears within an autocomplete group | ||
| // Bold black text on white background | ||
|
|
||
| .autocomplete-item { | ||
| display: block; | ||
| width: 100%; | ||
| padding: $spacer-1 $spacer-2; | ||
| overflow: hidden; | ||
| font-weight: $font-weight-bold; | ||
| color: var(--color-fg-default); | ||
| text-align: left; | ||
| text-decoration: none; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| cursor: pointer; | ||
| background-color: var(--color-canvas-overlay); | ||
| border: 0; | ||
|
|
||
| &:hover { | ||
| color: var(--color-fg-on-emphasis); | ||
| text-decoration: none; | ||
| background-color: var(--color-accent-emphasis); | ||
|
|
||
| // Inherit color on all child elements to ensure enough contrast | ||
| * { | ||
| color: inherit !important; | ||
| } | ||
| } | ||
|
|
||
| &.selected, | ||
| &[aria-selected='true'], | ||
| &.navigation-focus { | ||
| color: var(--color-fg-on-emphasis); | ||
| text-decoration: none; | ||
| background-color: var(--color-accent-emphasis); | ||
|
|
||
| // Inherit color on all child elements to ensure enough contrast | ||
| * { | ||
| color: inherit !important; | ||
| } | ||
| } | ||
| } | ||
| @import '@primer/view-components/app/components/primer/alpha/auto_complete'; |
Oops, something went wrong.