primer_view_components 0.0.111 → 0.0.113

data/app/components/primer/alpha/button_marketing.pcss

@@ -0,0 +1,175 @@
+.btn-mktg {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 0.9rem 1.5rem 1.1rem;
+
+  /* stylelint-disable-next-line primer/typography */
+  font-size: 1rem;
+  font-weight: var(--base-text-weight-semibold, 600);
+  line-height: 1;
+  color: var(--color-canvas-default);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),
+    var(--color-mktg-btn-bg) !important;
+  border: 0;
+
+  /* stylelint-disable-next-line primer/borders */
+  border-radius: 0.375rem;
+  transition: box-shadow 0.2s, outline 0.2s ease;
+  appearance: none !important;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    content: '';
+
+    /* stylelint-disable-next-line primer/colors */
+    background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.2s;
+    background-blend-mode: normal;
+  }
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: var(--color-mktg-btn-shadow-hover) !important;
+  }
+
+  &:hover,
+  &:focus,
+  &:focus-visible,
+  &.focus {
+    &::before {
+      opacity: 1;
+    }
+  }
+
+  /* fallback :focus state */
+  &:focus {
+    @mixin focusOutline 2px, var(--color-accent-fg);
+
+    /* remove fallback :focus if :focus-visible is supported */
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  /* default focus state */
+  &:focus-visible {
+    @mixin focusOutline 2px, var(--color-accent-fg) ;
+  }
+
+  &:active {
+    &::before {
+      opacity: 0.5 !important;
+    }
+  }
+
+  &.disabled,
+  &[disabled] {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.5;
+  }
+}
+
+.btn-muted-mktg {
+  color: var(--color-fg-default) !important;
+  background: none !important;
+  box-shadow: var(--color-mktg-btn-shadow-outline);
+
+  &::before {
+    display: none;
+  }
+
+  &:hover {
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+
+  &:active {
+
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
+  }
+
+  &:disabled {
+
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
+  }
+}
+
+.btn-subtle-mktg {
+  color: var(--color-fg-default) !important;
+  background: none !important;
+  box-shadow: none !important;
+
+  &::before {
+    background: none !important;
+  }
+
+  &:hover {
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+}
+
+.btn-signup-mktg {
+
+  /* stylelint-disable-next-line primer/colors */
+  color: #fff;
+
+  /* stylelint-disable-next-line primer/colors */
+  background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;
+
+  &::before {
+
+    /* stylelint-disable-next-line primer/colors */
+    background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;
+  }
+
+  /* fallback :focus state */
+  &:focus {
+    @mixin focusOutline 2px, var(--color-accent-fg) ;
+
+    /* remove fallback :focus if :focus-visible is supported */
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  /* default focus state */
+  &:focus-visible {
+    @mixin focusOutline 2px, var(--color-accent-fg) ;
+  }
+}
+
+/* Size modifiers */
+
+.btn-small-mktg {
+
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 0.625rem 1rem 0.8125rem;
+}
+
+.btn-large-mktg {
+
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 16px 30px 20px !important;
+
+  /* stylelint-disable-next-line primer/typography */
+  font-size: 1.25rem;
+}

data/app/components/primer/alpha/dialog/body.rb

@@ -6,6 +6,9 @@ module Primer
       # A `Dialog::Body` is a compositional component, used to render the
       # Body of a dialog. See <%= link_to_component(Primer::Alpha::Dialog) %>.
       class Body < Primer::Component
+        status :alpha
+        audited_at "2022-10-10"
+
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(**system_arguments)
           @system_arguments = deny_tag_argument(**system_arguments)

data/app/components/primer/alpha/dialog/footer.rb

@@ -6,6 +6,9 @@ module Primer
       # A `Dialog::Footer` is a compositional component, used to render the
       # Footer of a dialog. See <%= link_to_component(Primer::Alpha::Dialog) %>.
       class Footer < Primer::Component
+        status :alpha
+        audited_at "2022-10-10"
+
         # @param show_divider [Boolean] Show a divider between the footer and body.
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(

data/app/components/primer/alpha/dialog/header.rb

@@ -6,6 +6,9 @@ module Primer
       # A `Dialog::Header` is a compositional component, used to render the
       # Header of a dialog. See <%= link_to_component(Primer::Alpha::Dialog) %>.
       class Header < Primer::Component
+        status :alpha
+        audited_at "2022-10-10"
+
         # @param title [String] Describes the content of the dialog.
         # @param subtitle [String] Provides dditional context for the dialog, also setting the `aria-describedby` attribute.
         # @param show_divider [Boolean] Show a divider between the header and body.

data/app/components/primer/alpha/dialog.css

@@ -0,0 +1 @@
+.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--color-canvas-overlay);border-radius:var(--primer-borderRadius-large,12px);box-shadow:var(--color-overlay-shadow);display:flex;flex-direction:column;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--primer-borderWidth-thin, 1px)*-1) var(--color-border-default);padding-bottom:var(--primer-stack-padding-condensed,8px)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-title-size-medium,20px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--primer-text-body-size-medium,14px)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--primer-stack-gap-condensed,8px);padding:var(--primer-stack-gap-condensed,8px) var(--primer-stack-gap-condensed,8px) 0 var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--primer-control-small-gap,4px);padding:calc(var(--primer-stack-gap-condensed, 8px)*.75) 0 calc(var(--primer-stack-gap-condensed, 8px)*.75) var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--primer-text-body-size-medium,14px);overflow-y:auto;padding:var(--primer-stack-padding-normal,16px);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--primer-stack-padding-condensed,8px);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--primer-borderWidth-thin,1px) var(--color-border-default);padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--primer-stack-gap-condensed,8px);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,32px);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32,32px)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--color-btn-hover-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-btn-hover-bg)}.Overlay-closeButton.close-button{border:var(--primer-borderWidth-thin,1px) solid #0000}.Overlay-backdrop--center{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--anchor .Overlay{width:auto}.Overlay-backdrop--side{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side,.Overlay-backdrop--side.Overlay-backdrop--placement-left{align-items:center;justify-content:left}.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-right{align-items:center;justify-content:right}.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom{align-items:end;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-top{align-items:start;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay-backdrop--center-whenNarrow{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor-whenNarrow{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--anchor-whenNarrow .Overlay{width:auto}.Overlay-backdrop--side-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side-whenNarrow,.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow{align-items:center;justify-content:left}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow{align-items:center;justify-content:right}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow{align-items:end;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow{align-items:start;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full-whenNarrow .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}

data/app/components/primer/alpha/dialog.css.json

@@ -0,0 +1 @@
+{"name":"alpha/dialog","selectors":[".Overlay--hidden",".Overlay--visibilityHidden",".Overlay",".Overlay.Overlay--size-auto",".Overlay.Overlay--size-full",".Overlay.Overlay--size-xsmall",".Overlay.Overlay--size-small",".Overlay.Overlay--size-small-portrait",".Overlay.Overlay--size-medium",".Overlay.Overlay--size-medium-portrait",".Overlay.Overlay--size-large",".Overlay.Overlay--size-xlarge",".Overlay.Overlay--height-auto",".Overlay.Overlay--height-xsmall",".Overlay.Overlay--height-small",".Overlay.Overlay--height-medium",".Overlay.Overlay--height-large",".Overlay.Overlay--height-xlarge",".Overlay.Overlay--width-auto",".Overlay.Overlay--width-small",".Overlay.Overlay--width-medium",".Overlay.Overlay--width-large",".Overlay.Overlay--width-xlarge",".Overlay.Overlay--width-xxlarge",".Overlay.Overlay--motion-scaleFade","0%","to",".Overlay-form",".Overlay-header",".Overlay-header.Overlay-header--divided",".Overlay-header.Overlay-header--divided+.Overlay-body",".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap",".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title",".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description",".Overlay-header .Overlay-headerContentWrap",".Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap",".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap",".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title",".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description",".Overlay-body",".Overlay-body.Overlay-body--paddingCondensed",".Overlay-body.Overlay-body--paddingNone",".Overlay-footer",".Overlay-footer.Overlay-footer--divided",".Overlay-footer.Overlay-footer--alignStart",".Overlay-footer.Overlay-footer--alignCenter",".Overlay-footer.Overlay-footer--alignEnd",".Overlay-closeButton",".Overlay-closeButton:focus",".Overlay-closeButton:hover",".Overlay-closeButton.close-button",".Overlay-backdrop--center",".Overlay-backdrop--anchor",".Overlay-backdrop--anchor .Overlay",".Overlay-backdrop--side",".Overlay-backdrop--side.Overlay-backdrop--placement-left",".Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay",".Overlay-backdrop--side.Overlay-backdrop--placement-right",".Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay",".Overlay-backdrop--side.Overlay-backdrop--placement-bottom",".Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay",".Overlay-backdrop--side.Overlay-backdrop--placement-top",".Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay",".Overlay-backdrop--full",".Overlay-backdrop--full .Overlay",".Overlay-backdrop--center-whenNarrow",".Overlay-backdrop--anchor-whenNarrow",".Overlay-backdrop--anchor-whenNarrow .Overlay",".Overlay-backdrop--side-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow",".Overlay-backdrop--full-whenNarrow",".Overlay-backdrop--full-whenNarrow .Overlay"]}

data/app/components/primer/alpha/dialog.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n.Overlay--hidden {\n  display: none !important;\n}\n\n.Overlay--visibilityHidden {\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.Overlay {\n  display: flex;\n  width: min(var(--overlay-width), 100vw - 2rem);\n  min-width: 192px;\n  max-height: min(calc(100vh - 2rem), var(--overlay-height));\n  white-space: normal;\n  flex-direction: column;\n  background-color: var(--color-canvas-overlay);\n  border-radius: var(--primer-borderRadius-large, 12px);\n  box-shadow: var(--color-overlay-shadow);\n  opacity: 1;\n\n  &.Overlay--size-auto {\n    min-width: 192px;\n    max-width: calc(100vw - 2rem);\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-full {\n    width: 100vw;\n    height: 100vh;\n  }\n\n  &.Overlay--size-xsmall {\n    --overlay-width: 192px;\n\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-small {\n    --overlay-height: 256px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-small-portrait {\n    --overlay-height: 432px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-medium {\n    --overlay-height: 320px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-medium-portrait {\n    --overlay-height: 600px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-large {\n    --overlay-height: 432px;\n    --overlay-width: 640px;\n  }\n\n  &.Overlay--size-xlarge {\n    --overlay-height: 600px;\n    --overlay-width: 960px;\n  }\n\n  &.Overlay--height-auto {\n    height: auto;\n  }\n\n  /* start deprecate in favor of Alpha::Dialog */\n  &.Overlay--height-xsmall {\n    height: min(192px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-small {\n    height: min(256px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-medium {\n    height: min(320px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-large {\n    height: min(432px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-xlarge {\n    height: min(600px, 100vh - 2rem);\n  }\n\n  &.Overlay--width-auto {\n    width: auto;\n  }\n\n  &.Overlay--width-small {\n    width: min(256px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-medium {\n    width: min(320px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-large {\n    width: min(480px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xlarge {\n    width: min(640px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xxlarge {\n    width: min(960px, 100vw - 2rem);\n  }\n\n  /* end deprecate */\n\n  &.Overlay--motion-scaleFade {\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n    }\n  }\n}\n\n@keyframes Overlay--motion-scaleFade {\n  0% {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n  display: flex;\n  overflow: auto;\n  flex-direction: column;\n  flex-grow: 1;\n}\n\n.Overlay-header {\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n\n  &.Overlay-header--divided {\n    padding-bottom: var(--primer-stack-padding-condensed, 8px);\n    box-shadow: inset 0 calc(var(--primer-borderWidth-thin, 1px) * -1) var(--color-border-default);\n\n    & + .Overlay-body {\n      padding-top: var(--primer-stack-padding-normal, 16px);\n    }\n  }\n\n  &.Overlay-header--large {\n    & .Overlay-headerContentWrap {\n      & .Overlay-titleWrap {\n        gap: var(--primer-stack-gap-condensed, 8px);\n\n        & .Overlay-title {\n          font-size: var(--primer-text-title-size-medium, 20px);\n        }\n\n        & .Overlay-description {\n          font-size: var(--primer-text-body-size-medium, 14px);\n        }\n      }\n    }\n  }\n\n  & .Overlay-headerContentWrap {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--primer-stack-gap-condensed, 8px);\n    padding: var(--primer-stack-gap-condensed, 8px) var(--primer-stack-gap-condensed, 8px) 0 var(--primer-stack-gap-condensed, 8px);\n\n    & .Overlay-actionWrap {\n      display: flex;\n      flex-direction: row;\n      gap: var(--primer-stack-gap-condensed, 8px);\n    }\n\n    & .Overlay-titleWrap {\n      display: flex;\n      padding: calc(var(--primer-stack-gap-condensed, 8px) * 0.75) 0 calc(var(--primer-stack-gap-condensed, 8px) * 0.75) var(--primer-stack-gap-condensed, 8px);\n      flex-direction: column;\n      flex-grow: 1;\n      gap: var(--primer-control-small-gap, 4px);\n\n      & .Overlay-title {\n        margin: 0;\n        font-size: var(--primer-text-body-size-medium, 14px);\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n\n      & .Overlay-description {\n        margin: 0;\n        font-size: var(--primer-text-body-size-small, 12px);\n        font-weight: var(--base-text-weight-normal, 400);\n        color: var(--color-fg-muted);\n      }\n    }\n  }\n}\n\n/* generic body content slot */\n.Overlay-body {\n  padding: var(--primer-stack-padding-normal, 16px);\n  padding-top: 0;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  font-size: var(--primer-text-body-size-medium, 14px);\n  flex-grow: 1;\n\n  &.Overlay-body--paddingCondensed {\n    padding: var(--primer-stack-padding-condensed, 8px);\n    padding-top: 0;\n  }\n\n  &.Overlay-body--paddingNone {\n    padding: 0;\n  }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n  z-index: 1;\n  display: flex;\n  padding: 0 var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px);\n  flex-direction: row;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n\n  &.Overlay-footer--divided {\n    padding-top: var(--primer-stack-padding-normal, 16px);\n    box-shadow: inset 0 var(--primer-borderWidth-thin, 1px) var(--color-border-default);\n  }\n\n  &.Overlay-footer--alignStart {\n    justify-content: flex-start;\n    gap: var(--primer-stack-gap-condensed, 8px);\n  }\n\n  &.Overlay-footer--alignCenter {\n    justify-content: center;\n    gap: var(--primer-stack-gap-condensed, 8px);\n  }\n\n  &.Overlay-footer--alignEnd {\n    justify-content: flex-end;\n    gap: var(--primer-stack-gap-condensed, 8px);\n  }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n  position: relative;\n  display: grid;\n  width: var(--base-size-32, 32px);\n  height: var(--base-size-32, 32px);\n  padding: 0;\n  color: var(--color-fg-muted);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--primer-borderWidth-thin, 1px) solid transparent;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n  transition-property: color, background-color, border-color;\n  place-content: center;\n  align-self: flex-start;\n  flex-shrink: 0;\n\n  &:hover,\n  &:focus {\n    background-color: var(--color-btn-hover-bg);\n    border: var(--primer-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);\n  }\n\n  /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */\n  &.close-button {\n    border: var(--primer-borderWidth-thin, 1px) solid transparent;\n  }\n}\n\n@define-mixin Overlay-backdrop {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 999;\n  display: flex;\n  background-color: var(--color-neutral-muted);\n}\n\n@define-mixin Overlay-backdrop--transparent {\n  position: absolute;\n  z-index: 999;\n  background-color: transparent;\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* center */\n@define-mixin Overlay-backdrop--center {\n  @mixin Overlay-backdrop;\n\n  align-items: center;\n  justify-content: center;\n}\n\n/* anchor */\n@define-mixin Overlay-backdrop--anchor {\n  @mixin Overlay-backdrop--transparent;\n\n  & .Overlay {\n    width: auto;\n  }\n}\n\n/* anchor side(s) */\n@define-mixin Overlay-backdrop--side $responsiveVariant {\n  @mixin Overlay-backdrop;\n\n  /* default left */\n  align-items: center;\n  justify-content: left;\n\n  &.Overlay-backdrop--placement-left$(responsiveVariant) {\n    align-items: center;\n    justify-content: left;\n\n    & > .Overlay$(responsiveVariant) {\n      height: 100vh;\n      max-height: unset;\n      border-radius: var(--primer-borderRadius-large, 12px);\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-right$(responsiveVariant) {\n    align-items: center;\n    justify-content: right;\n\n    & > .Overlay$(responsiveVariant) {\n      height: 100vh;\n      max-height: unset;\n      border-radius: var(--primer-borderRadius-large, 12px);\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-bottom$(responsiveVariant) {\n    align-items: end;\n    justify-content: center;\n\n    & > .Overlay$(responsiveVariant) {\n      width: 100vw;\n      height: auto;\n      max-height: calc(100vh - 2rem);\n      border-radius: var(--primer-borderRadius-large, 12px);\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-top$(responsiveVariant) {\n    align-items: start;\n    justify-content: center;\n\n    & > .Overlay$(responsiveVariant) {\n      border-radius: var(--primer-borderRadius-large, 12px);\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;\n      }\n    }\n  }\n}\n\n/* full width */\n@define-mixin Overlay-backdrop--full {\n  @mixin Overlay-backdrop;\n\n  & .Overlay {\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    border-radius: unset !important;\n    flex-grow: 1;\n  }\n}\n\n/* Overlay variant classnames */\n.Overlay-backdrop--center {\n  @mixin Overlay-backdrop--center;\n}\n\n.Overlay-backdrop--anchor {\n  @mixin Overlay-backdrop--anchor;\n}\n\n.Overlay-backdrop--side {\n  @mixin Overlay-backdrop--side;\n}\n\n.Overlay-backdrop--full {\n  @mixin Overlay-backdrop--full;\n}\n\n/* responsive variants */\n\n/* --primer-viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n  .Overlay-backdrop--center-whenNarrow {\n    @mixin Overlay-backdrop--center;\n  }\n\n  .Overlay-backdrop--anchor-whenNarrow {\n    @mixin Overlay-backdrop--anchor;\n  }\n\n  .Overlay-backdrop--side-whenNarrow {\n    @mixin Overlay-backdrop--side -whenNarrow;\n  }\n\n  .Overlay-backdrop--full-whenNarrow {\n    @mixin Overlay-backdrop--full;\n  }\n}\n\n@keyframes Overlay--motion-slideDown {\n  from {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideUp {\n  from {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInRight {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n  from {\n    transform: translateX(100%);\n  }\n}\n"]}