@mixtint/primer-view-components 0.91.1 → 0.91.3

package/app/assets/styles/primer_view_components.css

@@ -1,6 +1,7 @@
 /* CSS component styles here */
 
 /* alpha */
+
 /* stylelint-disable selector-max-compound-selectors */
 /* stylelint-disable selector-max-specificity */
 /* stylelint-disable max-nesting-depth */
@@ -631,6 +632,7 @@ nav-list {
 .ActionList-sectionDivider--filled:first-child {
     margin-block-start: 0;
   }
+
 /* autocomplete */
 
 /* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796
@@ -744,6 +746,7 @@ nav-list {
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
   }
+
 /* Banner alert */
 
 .Banner {
@@ -889,6 +892,7 @@ nav-list {
       border-radius: 0;
     }
   }
+
 .btn-mktg {
   position: relative;
   z-index: 1;
@@ -919,6 +923,7 @@ nav-list {
   transition: box-shadow 0.2s, outline 0.2s ease;
   appearance: none !important;
 }
+
 .btn-mktg::before {
     position: absolute;
     top: 0;
@@ -935,16 +940,20 @@ nav-list {
     transition: opacity 0.2s;
     background-blend-mode: normal;
   }
+
 .btn-mktg:hover {
     -webkit-text-decoration: none;
     text-decoration: none;
     /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: var(--color-mktg-btn-shadow-hover) !important;
   }
+
 :is(.btn-mktg:hover,.btn-mktg:focus,.btn-mktg:focus-visible,.btn-mktg.focus)::before {
       opacity: 1;
     }
+
 /* fallback :focus state */
+
 .btn-mktg:focus {
     outline: 2px solid var(--focus-outlineColor);
     outline-offset: 2px;
@@ -952,19 +961,24 @@ nav-list {
 
     /* remove fallback :focus if :focus-visible is supported */
   }
+
 .btn-mktg:focus:not(:focus-visible) {
       outline: solid 1px transparent;
       box-shadow: none;
     }
+
 /* default focus state */
+
 .btn-mktg:focus-visible {
     outline: 2px solid var(--focus-outlineColor);
     outline-offset: 2px;
     box-shadow: none;
   }
+
 .btn-mktg:active::before {
       opacity: 0.5 !important;
     }
+
 .btn-mktg.disabled,.btn-mktg[disabled] {
     pointer-events: none;
     cursor: default;
@@ -1062,6 +1076,7 @@ nav-list {
   /* stylelint-disable-next-line primer/typography */
   font-size: 1.25rem;
 }
+
 /* stylelint-disable selector-max-specificity */
 /* stylelint-disable selector-max-compound-selectors */
 /* stylelint-disable max-nesting-depth */
@@ -1516,6 +1531,7 @@ dialog.Overlay:not([open]) {
     transform: translateX(100%);
   }
 }
+
 /* dropdown */
 
 .dropdown {
@@ -1802,6 +1818,7 @@ dialog.Overlay:not([open]) {
     /* stylelint-disable-next-line primer/spacing */
     left: calc(var(--base-size-8) + var(--borderWidth-thin));
   }
+
 /* Layout */
 
 /* stylelint-disable nesting-selector-no-missing-scoping-root -- inside @define-mixin the & resolves at the @mixin include site, so there is a scoping root */
@@ -2096,6 +2113,34 @@ dialog.Overlay:not([open]) {
   }
     }
 
+@media (min-width: 1012px) {
+
+.Layout.Layout--sidebar-xwide {
+      --Layout-sidebar-width: 408px;
+  }
+    }
+
+@media (min-width: 1280px) {
+
+.Layout.Layout--sidebar-xwide {
+      --Layout-sidebar-width: 440px;
+  }
+    }
+
+@media (min-width: 1012px) {
+
+.Layout.Layout--sidebar-xxwide {
+      --Layout-sidebar-width: 512px;
+  }
+    }
+
+@media (min-width: 1280px) {
+
+.Layout.Layout--sidebar-xxwide {
+      --Layout-sidebar-width: 544px;
+  }
+    }
+
 /* Sidebar position */
 
 .Layout.Layout--sidebarPosition-start .Layout-sidebar {
@@ -2178,6 +2223,7 @@ dialog.Overlay:not([open]) {
 .Layout-main .Layout-main-centered-xl {
     max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
+
 /* menu */
 
 /* A menu on the side of a page, defaults to left side. e.g. github.com/about */
@@ -2296,6 +2342,7 @@ dialog.Overlay:not([open]) {
     border-bottom-right-radius: var(--borderRadius-medium);
     border-bottom-left-radius: var(--borderRadius-medium);
   }
+
 /* SegmentedControl */
 
 .SegmentedControl {
@@ -2463,6 +2510,7 @@ dialog.Overlay:not([open]) {
   display: flex;
   justify-content: center;
 }
+
 .Stack {
   display: flex;
   flex-flow: column;
@@ -2472,76 +2520,100 @@ dialog.Overlay:not([open]) {
 
   /* non-responsive values */
 }
+
 .Stack[data-padding='none'],.Stack[data-padding-narrow='none'] {
     padding: 0;
   }
+
 .Stack[data-padding='condensed'],.Stack[data-padding-narrow='condensed'] {
     /* stylelint-disable-next-line primer/spacing */
     padding: var(--stack-padding-condensed, 8px);
   }
+
 .Stack[data-padding='normal'],.Stack[data-padding-narrow='normal'] {
     /* stylelint-disable-next-line primer/spacing */
     padding: var(--stack-padding-normal, 16px);
   }
+
 .Stack[data-padding='spacious'],.Stack[data-padding-narrow='spacious'] {
     /* stylelint-disable-next-line primer/spacing */
     padding: var(--stack-padding-spacious, 24px);
   }
+
 .Stack[data-direction='horizontal'],.Stack[data-direction-narrow='horizontal'] {
     flex-flow: row;
   }
+
 .Stack[data-direction='vertical'],.Stack[data-direction-narrow='vertical'] {
     flex-flow: column;
   }
+
 .Stack[data-gap='none'],.Stack[data-gap-narrow='none'] {
     --stack-gap: var(--stack-gap-none, 0);
   }
+
 .Stack[data-gap='condensed'],.Stack[data-gap-narrow='condensed'] {
     --stack-gap: var(--stack-gap-condensed, 0.5rem);
   }
+
 .Stack[data-gap='normal'],.Stack[data-gap-narrow='normal'] {
     --stack-gap: var(--stack-gap-normal, 1rem);
   }
+
 .Stack[data-gap='spacious'],.Stack[data-gap-narrow='spacious'] {
     --stack-gap: var(--stack-gap-spacious, 1.5rem);
   }
+
 .Stack[data-align='start'],.Stack[data-align-narrow='start'] {
     align-items: flex-start;
   }
+
 .Stack[data-align='center'],.Stack[data-align-narrow='center'] {
     align-items: center;
   }
+
 .Stack[data-align='end'],.Stack[data-align-narrow='end'] {
     align-items: flex-end;
   }
+
 .Stack[data-align='baseline'],.Stack[data-align-narrow='baseline'] {
     align-items: baseline;
   }
+
 .Stack[data-justify='start'],.Stack[data-justify-narrow='start'] {
     justify-content: flex-start;
   }
+
 .Stack[data-justify='center'],.Stack[data-justify-narrow='center'] {
     justify-content: center;
   }
+
 .Stack[data-justify='end'],.Stack[data-justify-narrow='end'] {
     justify-content: flex-end;
   }
+
 .Stack[data-justify='space-between'],.Stack[data-justify-narrow='space-between'] {
     justify-content: space-between;
   }
+
 .Stack[data-justify='space-evenly'],.Stack[data-justify-narrow='space-evenly'] {
     justify-content: space-evenly;
   }
+
 .Stack[data-wrap='wrap'],.Stack[data-wrap-narrow='wrap'] {
     flex-wrap: wrap;
   }
+
 .Stack[data-wrap='nowrap'],.Stack[data-wrap-narrow='nowrap'] {
     flex-wrap: nowrap;
   }
+
 .Stack[data-wrap='reverse'],.Stack[data-wrap-narrow='reverse'] {
     flex-wrap: wrap-reverse;
   }
+
 /* @custom-media --veiwportRange-regular */
+
 @media (min-width: 48rem) {
     .Stack[data-padding-regular='none'] {
       padding: 0;
@@ -2634,7 +2706,9 @@ dialog.Overlay:not([open]) {
       flex-wrap: wrap-reverse;
     }
   }
+
 /* @custom-media --viewportRange-wide */
+
 @media (min-width: 87.5rem) {
     .Stack[data-padding-wide='none'] {
       padding: 0;
@@ -2727,14 +2801,18 @@ dialog.Overlay:not([open]) {
       flex-wrap: wrap-reverse;
     }
   }
+
 .StackItem {
   flex: 0 1 auto;
   min-inline-size: 0;
 }
+
 .StackItem[data-grow='true'],.StackItem[data-grow-narrow='true'] {
     flex-grow: 1;
   }
+
 /* @custom-media --veiwportRange-regular */
+
 @media (min-width: 48rem) {
     .StackItem[data-grow-regular='true'] {
       flex-grow: 1;
@@ -2744,7 +2822,9 @@ dialog.Overlay:not([open]) {
       flex-grow: 0;
     }
   }
+
 /* @custom-media --viewportRange-wide */
+
 @media (min-width: 87.5rem) {
     .StackItem[data-grow-wide='true'] {
       flex-grow: 1;
@@ -2754,6 +2834,7 @@ dialog.Overlay:not([open]) {
       flex-grow: 0;
     }
   }
+
 /* tabnav */
 
 /* Outer wrapper */
@@ -2865,6 +2946,7 @@ a.tabnav-extra:hover {
 .tabnav-btn {
   margin-left: var(--controlStack-medium-gap-condensed);
 }
+
 /* stylelint-disable selector-max-type */
 /* stylelint-disable max-nesting-depth */
 /* stylelint-disable selector-max-specificity */
@@ -3795,6 +3877,7 @@ a.tabnav-extra:hover {
     clip-path: inset(var(--base-size-16) 0 0 0);
   }
 }
+
 /* ToggleSwitch */
 
 /* Catalyst in dotcom applies a display: block to all web component elements. This
@@ -3991,7 +4074,13 @@ a.tabnav-extra:hover {
 
 .ToggleSwitch-statusIcon {
   display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
   width: var(--base-size-16);
+  height: var(--base-size-16);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 0;
   /* stylelint-disable-next-line primer/spacing */
   margin-top: 0.063rem;
 }
@@ -4026,6 +4115,7 @@ a.tabnav-extra:hover {
 .ToggleSwitch--statusAtEnd .ToggleSwitch-status {
     text-align: left;
   }
+
 /* UnderlineNav */
 
 .UnderlineNav {
@@ -4173,6 +4263,7 @@ a.tabnav-extra:hover {
   display: flex;
   justify-content: space-between;
 }
+
 @keyframes shimmer {
   from {
     mask-position: 200%;
@@ -4209,6 +4300,7 @@ a.tabnav-extra:hover {
     outline-offset: -1px;
 }
   }
+
 /* stylelint-disable selector-max-type -- Copied from primer/react */
 
 .TreeViewRootUlStyles {
@@ -4515,7 +4607,7 @@ a.tabnav-extra:hover {
 
     /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap
     across more lines. */
-    align-self: baseline;
+    align-self: flex-start;
     height: var(--custom-line-height, 1.3rem);
     color: var(--fgColor-muted);
     align-items: center;
@@ -4633,6 +4725,7 @@ a.tabnav-extra:hover {
 }
 
 /* beta */
+
 /* avatar */
 
 .avatar {
@@ -4709,6 +4802,7 @@ a.tabnav-extra:hover {
   width: var(--base-size-64);
   height: var(--base-size-64);
 }
+
 /* stylelint-disable selector-max-specificity */
 /* The selector-max-specificity rule is disabled here because the nested selectors
  in AvatarStack require high specificity to properly override default styles and 
@@ -4866,6 +4960,7 @@ a.tabnav-extra:hover {
     /* stylelint-disable-next-line primer/spacing */
     margin-left: -11px;
   }
+
 /* stylelint-disable primer/spacing */
 /* stylelint-disable primer/typography */
 
@@ -5265,11 +5360,13 @@ select-panel dialog::backdrop {
     outline: solid 1px transparent;
   }
 }
+
 .breadcrumb-item {
   display: inline-block;
   list-style: none;
   max-width: 100%;
 }
+
 .breadcrumb-item::after {
     display: inline-block;
     height: 0.8em;
@@ -5763,6 +5860,7 @@ select-panel dialog::backdrop {
   color: var(--fgColor-muted);
   background-color: var(--bgColor-neutral-muted);
 }
+
 /* stylelint-disable primer/spacing */
 
 /* flash */
@@ -6006,6 +6104,7 @@ select-panel dialog::backdrop {
   color: var(--fgColor-sponsors);
   border-color: var(--borderColor-sponsors-emphasis);
 }
+
 /* Links */
 
 .Link {
@@ -6083,6 +6182,7 @@ select-panel dialog::backdrop {
   gap: var(--base-size-4);
   text-decoration: inherit;
 }
+
 /* stylelint-disable primer/spacing */
 
 /* Popover */
@@ -6351,6 +6451,7 @@ select-panel dialog::backdrop {
     display: none;
   }
 }
+
 /* Progress */
 
 .Progress {
@@ -6389,6 +6490,7 @@ select-panel dialog::backdrop {
     forced-color-adjust: none;
   }
 }
+
 /* State */
 
 /* Default 32px */
@@ -6447,6 +6549,7 @@ select-panel dialog::backdrop {
 .State--small .octicon {
     width: 1em; /* Ensures different icons don't change State indicator width */
   }
+
 /* Subhead */
 
 .Subhead {
@@ -6534,6 +6637,7 @@ select-panel dialog::backdrop {
     }
 
 /* to be renamed */
+
 /* TimelineItem */
 
 .TimelineItem {
@@ -6636,6 +6740,7 @@ select-panel dialog::backdrop {
     background-color: var(--bgColor-default);
     border: 0;
   }
+
 /* CSS truncate */
 
 /* css-truncate will shorten text with an ellipsis. */
@@ -6659,6 +6764,7 @@ select-panel dialog::backdrop {
 .css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target,.css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target,.css-truncate.expandable:hover .css-truncate-target,.css-truncate.expandable.css-truncate-target:hover {
     max-width: 10000px !important;
   }
+
 /* CSS for ActionBar  */
 .ActionBar {
   position: relative;
@@ -6716,6 +6822,7 @@ select-panel dialog::backdrop {
 }
 
 /* OP specifics */
+
 /* stylelint-disable selector-max-type, selector-max-specificity */
 /* Type selectors are required for the avatar-fallback custom element wrapper.
    Specificity overrides are needed to properly style nested avatar stacking. */
@@ -6755,6 +6862,7 @@ select-panel dialog::backdrop {
       display: contents;
       opacity: 1;
     }
+
 /* OP PageHeader */
 
 .PageHeader {
@@ -6896,6 +7004,7 @@ select-panel dialog::backdrop {
     cursor: move;
     color: var(--fgColor-muted);
 }
+
 /* CSS for BorderGrid  */
 
 .BorderGrid {
@@ -6933,27 +7042,35 @@ select-panel dialog::backdrop {
     display: table-cell;
     border: var(--borderWidth-thin) solid var(--borderColor-muted)
 }
+
 .InputGroup.InputGroup-input-width--auto {
         width: auto;
     }
+
 .InputGroup.InputGroup-input-width--xsmall {
         max-width: min(144px, 100vw - 2rem);
     }
+
 .InputGroup.InputGroup-input-width--small {
         max-width: min(256px, 100vw - 2rem);
     }
+
 .InputGroup.InputGroup-input-width--medium {
         max-width: min(320px, 100vw - 2rem);
     }
+
 .InputGroup.InputGroup-input-width--large {
         max-width: min(480px, 100vw - 2rem);
     }
+
 .InputGroup.InputGroup-input-width--xlarge {
         max-width: min(680px, 100vw - 2rem);
     }
+
 .InputGroup.InputGroup-input-width--xxlarge {
         max-width: min(960px, 100vw - 2rem);
     }
+
 .InlineMessage {
   display: grid;
   /* stylelint-disable-next-line primer/typography */
@@ -6966,23 +7083,29 @@ select-panel dialog::backdrop {
   grid-template-columns: auto 1fr;
   align-items: start;
 }
+
 .InlineMessage[data-size='small'] {
     --inline-message-fontSize: var(--text-body-size-small);
     --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
   }
+
 .InlineMessage[data-size='medium'] {
     --inline-message-fontSize: var(--text-body-size-medium);
     --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);
   }
+
 .InlineMessage[data-variant='warning'] {
     --inline-message-fgColor: var(--fgColor-attention);
   }
+
 .InlineMessage[data-variant='critical'] {
     --inline-message-fgColor: var(--fgColor-danger);
   }
+
 .InlineMessage[data-variant='success'] {
     --inline-message-fgColor: var(--fgColor-success);
   }
+
 .InlineMessage[data-variant='unavailable'] {
     --inline-message-fgColor: var(--fgColor-muted);
   }
@@ -6990,6 +7113,7 @@ select-panel dialog::backdrop {
 .InlineMessageIcon {
   min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));
 }
+
 /* CSS for SubHeader  */
 
 .SubHeader {
@@ -7078,6 +7202,7 @@ select-panel dialog::backdrop {
         margin-top: var(--base-size-16);
     }
 }
+
 /* CSS for OpenProject::SidePanel::Section  */
 
 .SidePanel-sectionHeader {
@@ -7105,6 +7230,7 @@ select-panel dialog::backdrop {
 :is(.SidePanel-sectionContent,.SidePanel-sectionDescription):not(:last-child) {
     margin-bottom: var(--base-size-16);
   }
+
 /* CSS for BorderBox::CollapsibleHeader  */
 
 /* stylelint-disable selector-nested-pattern -- component nests descendant class selectors (and `.X > &`) inside container queries, not &-prefixed selectors */
@@ -7190,11 +7316,13 @@ select-panel dialog::backdrop {
   -webkit-user-select: text;
           user-select: text;
 }
+
 /* CSS for CollapsibleSection  */
 
 .CollapsibleSection--triggerArea {
     cursor: pointer;
 }
+
 /* stylelint-disable selector-max-type -- pagination arrows are styled via `.Page[rel] > svg`; the svg icon can only be targeted by its type selector */
 
 .Page {
@@ -7285,6 +7413,7 @@ select-panel dialog::backdrop {
     display: none;
   }
 }
+
 /* CSS for FilterableTreeView */
 
 /* Scroll layout