openproject-primer_view_components 0.42.0 → 0.43.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +27 -0
- data/app/assets/javascripts/app/components/primer/shared_events.d.ts +2 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +33 -50
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_menu/action_menu_element.js +20 -7
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +20 -7
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.json +3 -5
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.json +5 -5
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/button_marketing.css +1 -1
- data/app/components/primer/alpha/button_marketing.css.json +1 -4
- data/app/components/primer/alpha/button_marketing.css.map +1 -1
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.json +7 -7
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/layout.css +1 -1
- data/app/components/primer/alpha/layout.css.json +9 -15
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.json +1 -3
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +5 -5
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/select_panel.rb +3 -3
- data/app/components/primer/alpha/select_panel_element.js +25 -15
- data/app/components/primer/alpha/select_panel_element.ts +26 -16
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.json +1 -3
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.json +37 -78
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.json +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.rb +2 -1
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.json +2 -4
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.css +1 -1
- data/app/components/primer/beta/avatar_stack.css.json +8 -8
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.json +4 -4
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/breadcrumbs.css +1 -1
- data/app/components/primer/beta/breadcrumbs.css.json +1 -2
- data/app/components/primer/beta/breadcrumbs.css.map +1 -1
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +6 -8
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button_group.css +1 -1
- data/app/components/primer/beta/button_group.css.json +3 -3
- data/app/components/primer/beta/button_group.css.map +1 -1
- data/app/components/primer/beta/label.css +1 -1
- data/app/components/primer/beta/label.css.json +1 -2
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/link.css +1 -1
- data/app/components/primer/beta/link.css.json +1 -3
- data/app/components/primer/beta/link.css.map +1 -1
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.json +16 -22
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/spinner.html.erb +1 -1
- data/app/components/primer/beta/truncate.css +1 -1
- data/app/components/primer/beta/truncate.css.json +5 -5
- data/app/components/primer/beta/truncate.css.map +1 -1
- data/app/components/primer/open_project/side_panel/section.css +1 -1
- data/app/components/primer/open_project/side_panel/section.css.json +1 -2
- data/app/components/primer/open_project/side_panel/section.css.map +1 -1
- data/app/components/primer/open_project/sub_header.css +1 -1
- data/app/components/primer/open_project/sub_header.css.json +1 -0
- data/app/components/primer/open_project/sub_header.css.map +1 -1
- data/app/components/primer/open_project/sub_header.pcss +3 -2
- data/app/components/primer/open_project/sub_header_element.js +2 -2
- data/app/components/primer/open_project/sub_header_element.ts +2 -2
- data/app/components/primer/shared_events.d.ts +2 -0
- data/app/components/primer/shared_events.ts +2 -0
- data/lib/primer/forms/primer_text_field.js +3 -0
- data/lib/primer/forms/primer_text_field.ts +4 -0
- data/lib/primer/view_components/version.rb +2 -2
- data/previews/primer/alpha/select_panel_preview/no_values.html.erb +19 -0
- data/previews/primer/alpha/select_panel_preview/playground.html.erb +1 -1
- data/previews/primer/alpha/select_panel_preview/remote_fetch.html.erb +4 -1
- data/previews/primer/alpha/select_panel_preview/single_select.html.erb +4 -4
- data/previews/primer/alpha/select_panel_preview.rb +14 -9
- data/static/arguments.json +1 -1
- data/static/classes.json +42 -21
- data/static/info_arch.json +15 -2
- data/static/previews.json +13 -0
- metadata +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
body.has-modal{overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;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--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 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)}.Overlay:modal{position:fixed}@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{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--stack-gap-condensed)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-title-size-medium)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);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(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);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)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{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%)}}
|
|
1
|
+
body.has-modal{overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;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--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 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)}.Overlay:modal{position:fixed}@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{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);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(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);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)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{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%)}}
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
".Overlay-header",
|
|
37
37
|
".Overlay-header.Overlay-header--divided",
|
|
38
38
|
".Overlay-header.Overlay-header--divided+.Overlay-body",
|
|
39
|
-
".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap",
|
|
40
|
-
".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title",
|
|
41
|
-
".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description",
|
|
39
|
+
":is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap",
|
|
40
|
+
":is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title",
|
|
41
|
+
":is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description",
|
|
42
42
|
".Overlay-header .Overlay-headerContentWrap",
|
|
43
|
-
".Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap",
|
|
44
|
-
".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap",
|
|
45
|
-
".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title",
|
|
46
|
-
".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description",
|
|
43
|
+
":is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap",
|
|
44
|
+
":is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap",
|
|
45
|
+
":is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title",
|
|
46
|
+
":is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description",
|
|
47
47
|
".Overlay-headerFilter",
|
|
48
48
|
".Overlay-body",
|
|
49
49
|
".Overlay-body.Overlay-body--paddingCondensed",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n/* TODO: One day this can be :has(:modal), when it is better supported */\nbody.has-modal {\n overflow: hidden !important;\n padding-right: var(--dialog-scrollgutter) !important;\n}\n\ndialog.Overlay:not([open]) {\n display: none;\n}\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/* This is for @oddbird/popover-polyfill;\n * A FOUC occurs in browsers which do not support :popover-open.\n * We can try to hide the popover if :popover-open is not supported.\n */\n@supports not selector(:popover-open) {\n [popover]:not(.\\:popover-open) {\n display: none;\n }\n}\n\n.Overlay {\n display: flex;\n inset: 0;\n position: static;\n margin: auto;\n padding: 0;\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(--overlay-bgColor);\n color: var(--fgColor-default);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\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 &.Overlay--placement-left, &.Overlay--placement-right {\n height: 100%;\n max-height: unset;\n position: fixed;\n }\n\n &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\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 &.Overlay--placement-left {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInRight;\n }\n\n &.Overlay--placement-right {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\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\n.Overlay:modal {\n position: fixed;\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 color: var(--fgColor-default);\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n & + .Overlay-body {\n padding-top: var(--stack-padding-normal);\n }\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--stack-gap-condensed);\n\n & .Overlay-title {\n font-size: var(--text-title-size-medium);\n }\n\n & .Overlay-description {\n font-size: var(--text-body-size-medium);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--stack-gap-condensed);\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--stack-gap-condensed);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n var(--stack-gap-condensed);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--control-small-gap);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n }\n }\n }\n}\n\n.Overlay-headerFilter {\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--stack-padding-normal);\n padding-top: 0;\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--text-body-size-medium);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--stack-padding-condensed);\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(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--stack-padding-normal);\n box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--stack-gap-condensed);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32);\n height: var(--base-size-32);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\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(--button-default-bgColor-hover);\n border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--borderWidth-thin) solid transparent;\n }\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/* full width */\n.Overlay--full {\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/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n height: 100%;\n max-height: 100vh;\n position: fixed;\n }\n\n .Overlay.Overlay--placement-left-whenNarrow {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-right-whenNarrow {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-bottom-whenNarrow {\n width: 100%;\n max-width: 100vw;\n inset: auto 0 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideUp;\n }\n\n .Overlay--full-whenNarrow {\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@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"]}
|
|
1
|
+
{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n/* TODO: One day this can be :has(:modal), when it is better supported */\nbody.has-modal {\n overflow: hidden !important;\n padding-right: var(--dialog-scrollgutter) !important;\n}\n\ndialog.Overlay:not([open]) {\n display: none;\n}\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/* This is for @oddbird/popover-polyfill;\n * A FOUC occurs in browsers which do not support :popover-open.\n * We can try to hide the popover if :popover-open is not supported.\n */\n@supports not selector(:popover-open) {\n [popover]:not(.\\:popover-open) {\n display: none;\n }\n}\n\n.Overlay {\n display: flex;\n inset: 0;\n position: static;\n margin: auto;\n padding: 0;\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(--overlay-bgColor);\n color: var(--fgColor-default);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\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 &.Overlay--placement-left, &.Overlay--placement-right {\n height: 100%;\n max-height: unset;\n position: fixed;\n }\n\n &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\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 &.Overlay--placement-left {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInRight;\n }\n\n &.Overlay--placement-right {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\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\n.Overlay:modal {\n position: fixed;\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 color: var(--fgColor-default);\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n & + .Overlay-body {\n padding-top: var(--stack-padding-normal);\n }\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--stack-gap-condensed);\n\n & .Overlay-title {\n font-size: var(--text-title-size-medium);\n }\n\n & .Overlay-description {\n font-size: var(--text-body-size-medium);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--stack-gap-condensed);\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--stack-gap-condensed);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n var(--stack-gap-condensed);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--control-small-gap);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n }\n }\n }\n}\n\n.Overlay-headerFilter {\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--stack-padding-normal);\n padding-top: 0;\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--text-body-size-medium);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--stack-padding-condensed);\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(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--stack-padding-normal);\n box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--stack-gap-condensed);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32);\n height: var(--base-size-32);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\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(--button-default-bgColor-hover);\n border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--borderWidth-thin) solid transparent;\n }\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/* full width */\n.Overlay--full {\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/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n height: 100%;\n max-height: 100vh;\n position: fixed;\n }\n\n .Overlay.Overlay--placement-left-whenNarrow {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-right-whenNarrow {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-bottom-whenNarrow {\n width: 100%;\n max-width: 100vw;\n inset: auto 0 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideUp;\n }\n\n .Overlay--full-whenNarrow {\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@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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Layout{display:grid;--Layout-sidebar-width:220px;--Layout-gutter:16px
|
|
1
|
+
.Layout{display:grid;--Layout-sidebar-width:220px;--Layout-gutter:16px}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout .Layout-divider,.Layout .Layout-main,.Layout .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout-divider--flowRow-hidden:is(.Layout.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--divided .Layout-divider){background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0;height:8px;margin-right:0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main,.Layout.Layout--flowRow-until-md .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main,.Layout.Layout--flowRow-until-lg .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));grid-gap:var(--Layout-gutter)}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{background:var(--borderColor-default);display:block;grid-column:2;margin-right:-1px;width:1px}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-xl{margin-left:auto;margin-right:auto}:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-lg,:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-md,:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter))}
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
|
|
13
13
|
".Layout.Layout--divided",
|
|
14
14
|
".Layout.Layout--divided .Layout-divider",
|
|
15
|
-
".Layout.Layout--divided .Layout-divider
|
|
16
|
-
".Layout.Layout--divided .Layout-divider
|
|
15
|
+
".Layout-divider--flowRow-hidden:is(.Layout.Layout--divided .Layout-divider)",
|
|
16
|
+
".Layout-divider--flowRow-shallow:is(.Layout.Layout--divided .Layout-divider)",
|
|
17
17
|
".Layout.Layout--divided .Layout-main",
|
|
18
18
|
".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
|
|
19
19
|
".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
|
|
29
29
|
".Layout.Layout--flowRow-until-md.Layout--divided",
|
|
30
30
|
".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",
|
|
31
|
-
".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider
|
|
32
|
-
".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider
|
|
31
|
+
".Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider)",
|
|
32
|
+
".Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider)",
|
|
33
33
|
".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",
|
|
34
34
|
".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
|
|
35
35
|
".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
|
|
45
45
|
".Layout.Layout--flowRow-until-lg.Layout--divided",
|
|
46
46
|
".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",
|
|
47
|
-
".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider
|
|
48
|
-
".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider
|
|
47
|
+
".Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider)",
|
|
48
|
+
".Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider)",
|
|
49
49
|
".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",
|
|
50
50
|
".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
|
|
51
51
|
".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
|
|
@@ -67,14 +67,8 @@
|
|
|
67
67
|
".Layout-main .Layout-main-centered-lg",
|
|
68
68
|
".Layout-main .Layout-main-centered-md",
|
|
69
69
|
".Layout-main .Layout-main-centered-xl",
|
|
70
|
-
".Layout-main .Layout-main-centered-lg>.container-lg",
|
|
71
|
-
".Layout-main .Layout-main-centered-lg>.container-md",
|
|
72
|
-
".Layout-main .Layout-main-centered-lg>.container-xl"
|
|
73
|
-
".Layout-main .Layout-main-centered-md>.container-lg",
|
|
74
|
-
".Layout-main .Layout-main-centered-md>.container-md",
|
|
75
|
-
".Layout-main .Layout-main-centered-md>.container-xl",
|
|
76
|
-
".Layout-main .Layout-main-centered-xl>.container-lg",
|
|
77
|
-
".Layout-main .Layout-main-centered-xl>.container-md",
|
|
78
|
-
".Layout-main .Layout-main-centered-xl>.container-xl"
|
|
70
|
+
":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-lg",
|
|
71
|
+
":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-md",
|
|
72
|
+
":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-xl"
|
|
79
73
|
]
|
|
80
74
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QACE,YAAa,CAEb,4BAA6B,CAC7B,
|
|
1
|
+
{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QACE,YAAa,CAEb,4BAA6B,CAC7B,oBA+IF,CA7IE,wCANF,QA7EE,kBAAmB,CACnB,mCA+NF,CA7NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,4EACE,YACF,CAEA,6EAGE,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,qGACE,YACF,CAEA,sGAGE,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,qGACE,YACF,CAEA,sGAGE,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QAwBE,qBAAsB,CACtB,sGAAwG,CACxG,6BAyHF,CAvHE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAwGJ,CAvGE,CAEA,4BAEE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAlEF,QAmEI,4BAgFJ,CA/EE,CAEA,yBAtEF,QAuEI,4BA4EJ,CA3EE,CAEA,0BA1EF,QA2EI,4BAwEJ,CAvEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCAKE,qCAAsC,CAJtC,aAAc,CACd,aAAc,CAEd,iBAAkB,CADlB,SAGF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,kHAIE,gBAAiB,CADjB,iBAQF,CALE,+YAGE,aACF,CAGF,sCACE,6FACF,CAEA,sCACE,4FACF,CAEA,sCACE,6FACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n grid-auto-flow: row;\n grid-template-columns: 1fr !important;\n\n & .Layout-sidebar,\n & .Layout-divider,\n & .Layout-main {\n width: 100% !important;\n grid-column: 1 !important;\n }\n\n &.Layout--sidebarPosition-flowRow-start {\n & .Layout-sidebar {\n grid-row: 1;\n }\n\n & .Layout-main {\n grid-row: 2 / span 2;\n }\n }\n\n &.Layout--sidebarPosition-flowRow-end {\n & .Layout-sidebar {\n grid-row: 2 / span 2;\n }\n\n & .Layout-main {\n grid-row: 1;\n }\n }\n\n &.Layout--sidebarPosition-flowRow-none {\n & .Layout-sidebar {\n display: none;\n }\n }\n\n &.Layout--divided {\n @mixin flow-as-row-divider;\n\n & .Layout-main {\n grid-row: 3 / span 1;\n }\n\n &.Layout--sidebarPosition-flowRow-end {\n & .Layout-sidebar {\n grid-row: 3 / span 1;\n }\n\n & .Layout-main {\n grid-row: 1;\n }\n }\n }\n}\n\n@define-mixin flow-as-row-divider {\n --Layout-gutter: 0;\n\n & .Layout-divider {\n height: 1px;\n grid-row: 2;\n\n &.Layout-divider--flowRow-hidden {\n display: none;\n }\n\n &.Layout-divider--flowRow-shallow {\n height: 8px;\n margin-right: 0;\n background: var(--bgColor-inset);\n border-color: var(--borderColor-default);\n border-style: solid;\n border-width: var(--borderWidth-thin) 0;\n }\n }\n}\n\n.Layout {\n display: grid;\n\n --Layout-sidebar-width: 220px;\n --Layout-gutter: 16px;\n\n @media (max-width: calc(544px - 0.02px)) {\n @mixin flow-as-row;\n }\n\n &.Layout--flowRow-until-md {\n @media (max-width: calc(768px - 0.02px)) {\n @mixin flow-as-row;\n }\n }\n\n &.Layout--flowRow-until-lg {\n @media (max-width: calc(1012px - 0.02px)) {\n @mixin flow-as-row;\n }\n }\n\n /* Flow as column */\n\n grid-auto-flow: column;\n grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n grid-gap: var(--Layout-gutter);\n\n & .Layout-sidebar {\n grid-column: 1;\n }\n\n & .Layout-divider {\n display: none;\n }\n\n & .Layout-main {\n grid-column: 2 / span 2;\n }\n\n /* Gutter spacing */\n\n @media (min-width: 1012px) {\n --Layout-gutter: 24px;\n }\n\n &.Layout--gutter-none {\n /* stylelint-disable-next-line length-zero-no-unit */\n --Layout-gutter: 0px; /* Neds px in value */\n }\n\n &.Layout--gutter-condensed {\n --Layout-gutter: 16px;\n }\n\n &.Layout--gutter-spacious {\n @media (min-width: 1012px) {\n --Layout-gutter: 32px;\n }\n\n @media (min-width: 1280px) {\n --Layout-gutter: 40px;\n }\n }\n\n /* Sidebar width */\n @media (min-width: 544px) {\n --Layout-sidebar-width: 220px;\n }\n\n @media (min-width: 768px) {\n --Layout-sidebar-width: 256px;\n }\n\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 296px;\n }\n\n &.Layout--sidebar-narrow {\n @media (min-width: 768px) {\n --Layout-sidebar-width: 240px;\n }\n\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 256px;\n }\n }\n\n &.Layout--sidebar-wide {\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 320px;\n }\n\n @media (min-width: 1280px) {\n --Layout-sidebar-width: 336px;\n }\n }\n\n /* Sidebar position */\n\n &.Layout--sidebarPosition-start {\n & .Layout-sidebar {\n grid-column: 1;\n }\n\n & .Layout-main {\n grid-column: 2 / span 2;\n }\n }\n\n &.Layout--sidebarPosition-end {\n grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n & .Layout-main {\n grid-column: 1;\n }\n\n & .Layout-sidebar {\n grid-column: 2 / span 2;\n }\n }\n\n /* Sidebar divider */\n\n &.Layout--divided {\n & .Layout-divider {\n display: block;\n grid-column: 2;\n width: 1px;\n margin-right: -1px;\n background: var(--borderColor-default);\n }\n\n & .Layout-main {\n grid-column: 3 / span 1;\n }\n\n &.Layout--sidebarPosition-end {\n & .Layout-sidebar {\n grid-column: 3 / span 1;\n }\n\n & .Layout-main {\n grid-column: 1;\n }\n }\n }\n}\n\n.Layout-divider {\n display: none;\n width: 1px;\n}\n\n.Layout-sidebar {\n width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n min-width: 0;\n\n /* Centered main column\n ** FIXME: right-aligned sidebar */\n & .Layout-main-centered-md,\n & .Layout-main-centered-lg,\n & .Layout-main-centered-xl {\n margin-right: auto;\n margin-left: auto;\n\n & > .container-md,\n & > .container-lg,\n & > .container-xl {\n margin-left: 0;\n }\n }\n\n & .Layout-main-centered-md {\n max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-lg {\n max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-xl {\n max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.menu{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);list-style:none;margin-bottom:var(--stack-gap-normal)}.menu-item{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);color:var(--fgColor-default);display:block;padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--borderRadius-medium)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--borderRadius-medium)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--borderRadius-medium)}.menu-item:hover{background-color:var(--bgColor-neutral-muted);-webkit-text-decoration:none;text-decoration:none}.menu-item:active{background-color:var(--bgColor-muted)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--menu-bgColor-active);cursor:default}.menu-item.selected
|
|
1
|
+
.menu{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);list-style:none;margin-bottom:var(--stack-gap-normal)}.menu-item{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);color:var(--fgColor-default);display:block;padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--borderRadius-medium)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--borderRadius-medium)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--borderRadius-medium)}.menu-item:hover{background-color:var(--bgColor-neutral-muted);-webkit-text-decoration:none;text-decoration:none}.menu-item:active{background-color:var(--bgColor-muted)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--menu-bgColor-active);cursor:default}:is(.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false])):before{background-color:var(--underlineNav-borderColor-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--fgColor-muted);margin-right:var(--control-medium-gap);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--control-small-gap)}.menu-item .menu-warning{color:var(--fgColor-attention);float:right}.menu-item .avatar{float:left;margin-right:var(--control-small-gap)}.menu-item.alert .Counter{color:var(--fgColor-danger)}.menu-heading{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);color:var(--fgColor-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold);margin-bottom:0;margin-top:0;padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious)}.menu-heading:hover{-webkit-text-decoration:none;text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--borderRadius-medium);border-bottom-right-radius:var(--borderRadius-medium)}
|
|
@@ -12,9 +12,7 @@
|
|
|
12
12
|
".menu-item.selected",
|
|
13
13
|
".menu-item[aria-current]:not([aria-current=false])",
|
|
14
14
|
".menu-item[aria-selected=true]",
|
|
15
|
-
".menu-item.selected:before",
|
|
16
|
-
".menu-item[aria-current]:not([aria-current=false]):before",
|
|
17
|
-
".menu-item[aria-selected=true]:before",
|
|
15
|
+
":is(.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false])):before",
|
|
18
16
|
".menu-item .octicon",
|
|
19
17
|
".menu-item .Counter",
|
|
20
18
|
".menu-item .menu-warning",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAHzC,eAAgB,CADhB,qCAKF,CAEA,WAKE,sEAAuE,CADvE,4BAA6B,CAF7B,aAAc,CACd,kGAAmG,CAFnG,iBA+EF,CAzEE,uBACE,YAAa,CAEb,kDAKF,CAHE,qDAHA,iDAKA,CAGF,sBACE,eAAgB,CAChB,qDAMF,CAHE,mDAFA,oDAIA,CAGF,iBAEE,6CAA8C,CAD9C,4BAAqB,CAArB,oBAEF,CAEA,kBACE,qCACF,CAEA,sGAIE,2CAA4C,CAD5C,cAYF,CATE,
|
|
1
|
+
{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAHzC,eAAgB,CADhB,qCAKF,CAEA,WAKE,sEAAuE,CADvE,4BAA6B,CAF7B,aAAc,CACd,kGAAmG,CAFnG,iBA+EF,CAzEE,uBACE,YAAa,CAEb,kDAKF,CAHE,qDAHA,iDAKA,CAGF,sBACE,eAAgB,CAChB,qDAMF,CAHE,mDAFA,oDAIA,CAGF,iBAEE,6CAA8C,CAD9C,4BAAqB,CAArB,oBAEF,CAEA,kBACE,qCACF,CAEA,sGAIE,2CAA4C,CAD5C,cAYF,CATE,kHAOE,uDAAwD,CAJxD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,0BAA2B,CAD3B,sCAAuC,CAEvC,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,oCACF,CAEA,yBAEE,8BAA+B,CAD/B,WAEF,CAEA,mBACE,UAAW,CACX,qCACF,CAGE,0BACE,2BACF,CAIJ,cAQE,sEAAuE,CADvE,4BAA6B,CAN7B,aAAc,CAId,iBAAkB,CAClB,4CAA6C,CAF7C,eAAgB,CADhB,YAAa,CADb,kGAsBF,CAdE,oBACE,4BAAqB,CAArB,oBACF,CAEA,0BACE,iDAAkD,CAClD,kDACF,CAEA,yBACE,eAAgB,CAEhB,oDAAqD,CADrD,qDAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n margin-bottom: var(--stack-gap-normal);\n list-style: none;\n background-color: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n}\n\n.menu-item {\n position: relative;\n display: block;\n padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n color: var(--fgColor-default);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n &:first-child {\n border-top: 0;\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n\n &::before {\n border-top-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n\n &::before {\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:hover {\n text-decoration: none;\n background-color: var(--bgColor-neutral-muted);\n }\n\n &:active {\n background-color: var(--bgColor-muted);\n }\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n cursor: default;\n background-color: var(--menu-bgColor-active);\n\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 2px;\n content: '';\n background-color: var(--underlineNav-borderColor-active);\n }\n }\n\n & .octicon {\n width: 16px;\n margin-right: var(--control-medium-gap);\n color: var(--fgColor-muted);\n text-align: center;\n }\n\n & .Counter {\n float: right;\n margin-left: var(--control-small-gap);\n }\n\n & .menu-warning {\n float: right;\n color: var(--fgColor-attention);\n }\n\n & .avatar {\n float: left;\n margin-right: var(--control-small-gap);\n }\n\n &.alert {\n & .Counter {\n color: var(--fgColor-danger);\n }\n }\n}\n\n.menu-heading {\n display: block;\n padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n margin-top: 0;\n margin-bottom: 0;\n font-size: inherit;\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-default);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n &:hover {\n text-decoration: none;\n }\n\n &:first-child {\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-color:var(--controlTrack-borderColor-rest,#0000);border-radius:var(--borderRadius-medium);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size)}.SegmentedControl-item{border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);display:inline-flex;height:var(--control-medium-size);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin) solid var(--borderColor-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock);margin-top:var(--control-medium-paddingBlock);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal);height:100%;min-width:-moz-fit-content;min-width:fit-content;padding-inline:calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest)}.SegmentedControl-item .Button-content{align-self:stretch;flex:1 1 auto}.SegmentedControl-item .Button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
|
|
1
|
+
.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-color:var(--controlTrack-borderColor-rest,#0000);border-radius:var(--borderRadius-medium);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size)}:is(.SegmentedControl--small .SegmentedControl-item) .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size)}.SegmentedControl-item{border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);display:inline-flex;height:var(--control-medium-size);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}:is(.SegmentedControl-item .Button--invisible):hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}:is(.SegmentedControl-item .Button--invisible):active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold)}:is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin) solid var(--borderColor-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock);margin-top:var(--control-medium-paddingBlock);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal);height:100%;min-width:-moz-fit-content;min-width:fit-content;padding-inline:calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));width:100%}:is(.SegmentedControl-item .Button):focus-visible{border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest)}.SegmentedControl-item .Button-content{align-self:stretch;flex:1 1 auto}.SegmentedControl-item .Button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
|
|
@@ -6,22 +6,22 @@
|
|
|
6
6
|
".SegmentedControl--iconOnly .Button--iconOnly.Button--small",
|
|
7
7
|
".SegmentedControl--small",
|
|
8
8
|
".SegmentedControl--small .SegmentedControl-item",
|
|
9
|
-
".SegmentedControl--small .SegmentedControl-item .Button",
|
|
9
|
+
":is(.SegmentedControl--small .SegmentedControl-item) .Button",
|
|
10
10
|
".SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item",
|
|
11
11
|
".SegmentedControl--medium .SegmentedControl-item",
|
|
12
12
|
".SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item",
|
|
13
13
|
".SegmentedControl-item",
|
|
14
|
-
".SegmentedControl-item .Button--invisible:hover:not(:disabled)",
|
|
15
|
-
".SegmentedControl-item .Button--invisible:active:not(:disabled)",
|
|
14
|
+
":is(.SegmentedControl-item .Button--invisible):hover:not(:disabled)",
|
|
15
|
+
":is(.SegmentedControl-item .Button--invisible):active:not(:disabled)",
|
|
16
16
|
".SegmentedControl-item.SegmentedControl-item--selected",
|
|
17
17
|
".SegmentedControl-item.SegmentedControl-item--selected .Button",
|
|
18
|
-
".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",
|
|
18
|
+
":is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover",
|
|
19
19
|
".SegmentedControl-item.SegmentedControl-item--selected:before",
|
|
20
20
|
".SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before",
|
|
21
21
|
".SegmentedControl-item .Button-label[data-content]:before",
|
|
22
22
|
".SegmentedControl-item:not(:first-child):before",
|
|
23
23
|
".SegmentedControl-item .Button",
|
|
24
|
-
".SegmentedControl-item .Button:focus-visible",
|
|
24
|
+
":is(.SegmentedControl-item .Button):focus-visible",
|
|
25
25
|
".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",
|
|
26
26
|
".SegmentedControl-item .Button-content",
|
|
27
27
|
".SegmentedControl-item .Button-label",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,iEAAkE,CAClE,uBAAwB,CAIxB,mFAAqF,CACrF,uDAA+D,CAC/D,wCAAyC,CAJzC,mBAAoB,CACpB,eAIF,CAGE,yHAGE,0BAA4B,CAD5B,UAEF,CAKF,yBACE,kEAeF,CAbE,gDACE,gCAKF,CAHE,
|
|
1
|
+
{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,iEAAkE,CAClE,uBAAwB,CAIxB,mFAAqF,CACrF,uDAA+D,CAC/D,wCAAyC,CAJzC,mBAAoB,CACpB,eAIF,CAGE,yHAGE,0BAA4B,CAD5B,UAEF,CAKF,yBACE,kEAeF,CAbE,gDACE,gCAKF,CAHE,6DACE,sGACF,CAIA,2EACE,+BACF,CAKF,iDACE,iCACF,CAGE,4EACE,gCACF,CAMJ,uBAIE,0CAAiD,CACjD,wCAAyC,CAHzC,mBAAoB,CAIpB,iCAAkC,CAHlC,sBAAuB,CAIvB,4CAA6C,CAN7C,iBA6FF,CAnFI,oEACE,iGACF,CAEA,qEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,4CAKF,CAHE,0EACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,4CAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,oEAAqE,CADrE,UAAW,CAHX,gBAAiB,CAEjB,gDAAiD,CADjD,6CAA8C,CAF9C,iBAMF,CAIF,+BAGE,QAAS,CAET,uFAA0F,CAD1F,0CAA2C,CAH3C,WAAY,CAMZ,0BAAsB,CAAtB,qBAAsB,CADtB,sGAAuG,CAJvG,UAWF,CAJE,kDAEE,uFAA0F,CAD1F,mFAEF,CAGF,oFACE,wCACF,CAEA,uCAEE,kBAAmB,CADnB,aAEF,CAGA,qCAEE,eAAgB,CAChB,sBAAuB,CAFvB,kBAGF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n --segmentedControl-item-padding: var(--control-small-paddingBlock);\n --overlay-offset: 0.5rem;\n\n display: inline-flex;\n list-style: none;\n background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n border-color: var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n & .Button--iconOnly.Button--small,\n & .Button--iconOnly.Button--medium {\n width: 100%;\n padding-inline: 0 !important;\n }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n & .SegmentedControl-item {\n height: var(--control-small-size);\n\n & .Button {\n padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n }\n }\n\n &.SegmentedControl--iconOnly {\n & .SegmentedControl-item {\n width: var(--control-small-size);\n }\n }\n}\n\n.SegmentedControl--medium {\n & .SegmentedControl-item {\n height: var(--control-medium-size);\n }\n\n &.SegmentedControl--iconOnly {\n & .SegmentedControl-item {\n width: var(--control-medium-size);\n }\n }\n}\n\n/* item */\n\n.SegmentedControl-item {\n position: relative;\n display: inline-flex;\n justify-content: center;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n height: var(--control-medium-size);\n padding: var(--segmentedControl-item-padding);\n\n /* button color overrides */\n & .Button--invisible {\n &:hover:not(:disabled) {\n background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n }\n\n &:active:not(:disabled) {\n background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n }\n }\n\n /* Selected ---------------------------------------- */\n &.SegmentedControl-item--selected {\n background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n & .Button {\n font-weight: var(--base-text-weight-semibold);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &::before {\n border-color: transparent !important;\n }\n\n & + .SegmentedControl-item::before {\n border-color: transparent;\n }\n }\n\n /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n & .Button-label[data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* Separator lines */\n &:not(:first-child) {\n &::before {\n position: absolute;\n inset: 0 0 0 -1px;\n margin-top: var(--control-medium-paddingBlock);\n margin-bottom: var(--control-medium-paddingBlock);\n content: '';\n border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n }\n }\n\n /* Button ----------------------------------------- */\n & .Button {\n height: 100%;\n width: 100%;\n border: 0;\n font-weight: var(--base-text-weight-normal);\n border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n min-width: fit-content;\n\n &:focus-visible {\n outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n }\n }\n\n & .Button--invisible.Button--invisible-noVisuals .Button-label {\n color: var(--button-default-fgColor-rest);\n }\n\n & .Button-content {\n flex: 1 1 auto;\n align-self: stretch;\n }\n\n /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */\n & .Button-label {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n display: flex;\n\n & .SegmentedControl-item {\n flex: 1;\n justify-content: center;\n }\n}\n"]}
|
|
@@ -159,7 +159,7 @@ module Primer
|
|
|
159
159
|
#
|
|
160
160
|
# ```erb
|
|
161
161
|
# <% builder = ActionView::Helpers::FormBuilder.new(
|
|
162
|
-
# "address", # the name of the model, used to wrap input names, eg 'address[
|
|
162
|
+
# "address", # the name of the model, used to wrap input names, eg 'address[country]'
|
|
163
163
|
# nil, # object (eg. the Address instance, which we can omit)
|
|
164
164
|
# self, # template
|
|
165
165
|
# {} # options
|
|
@@ -168,7 +168,7 @@ module Primer
|
|
|
168
168
|
# form_arguments: { builder: builder, name: "country" }
|
|
169
169
|
# )) do |list| %>
|
|
170
170
|
# <% countries.each do |country| %>
|
|
171
|
-
# <% menu.with_item(label: country.name, data: { value: country.code }) %>
|
|
171
|
+
# <% menu.with_item(label: country.name, content_arguments: { data: { value: country.code } }) %>
|
|
172
172
|
# <% end %>
|
|
173
173
|
# <% end %>
|
|
174
174
|
# ```
|
|
@@ -326,7 +326,7 @@ module Primer
|
|
|
326
326
|
# @param title [String] The title that appears at the top of the panel.
|
|
327
327
|
# @param id [String] The unique ID of the panel.
|
|
328
328
|
# @param size [Symbol] The size of the panel. <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>
|
|
329
|
-
# @param select_variant [Symbol] <%= one_of(Primer::Alpha::
|
|
329
|
+
# @param select_variant [Symbol] <%= one_of(Primer::Alpha::SelectPanel::SELECT_VARIANT_OPTIONS) %>
|
|
330
330
|
# @param fetch_strategy [Symbol] <%= one_of(Primer::Alpha::SelectPanel::FETCH_STRATEGIES) %>
|
|
331
331
|
# @param no_results_label [String] The label to display when no results are found.
|
|
332
332
|
# @param preload [Boolean] Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened.
|
|
@@ -537,6 +537,7 @@ _SelectPanelElement_handleIncludeFragmentEvent = function _SelectPanelElement_ha
|
|
|
537
537
|
break;
|
|
538
538
|
}
|
|
539
539
|
case 'loadend': {
|
|
540
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_filterInputTextFieldElement_get).hideLeadingSpinner();
|
|
540
541
|
this.dispatchEvent(new CustomEvent('loadend'));
|
|
541
542
|
break;
|
|
542
543
|
}
|
|
@@ -691,10 +692,10 @@ _SelectPanelElement_updateItemVisibility = function _SelectPanelElement_updateIt
|
|
|
691
692
|
}
|
|
692
693
|
}
|
|
693
694
|
else if (value && !__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value) && this.isItemChecked(item)) {
|
|
694
|
-
__classPrivateFieldSet(this, _SelectPanelElement_hasLoadedData, true, "f");
|
|
695
695
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_addSelectedItem).call(this, item);
|
|
696
696
|
}
|
|
697
697
|
}
|
|
698
|
+
__classPrivateFieldSet(this, _SelectPanelElement_hasLoadedData, true, "f");
|
|
698
699
|
if (!this.noResults)
|
|
699
700
|
return;
|
|
700
701
|
if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_inErrorState).call(this)) {
|
|
@@ -823,28 +824,33 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
|
|
|
823
824
|
// interfere with events fired by menu items whose behavior is specified outside the library.
|
|
824
825
|
if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single')
|
|
825
826
|
return;
|
|
826
|
-
const
|
|
827
|
+
const currentlyChecked = this.isItemChecked(item);
|
|
828
|
+
const checked = !currentlyChecked;
|
|
827
829
|
const activationSuccess = this.dispatchEvent(new CustomEvent('beforeItemActivated', {
|
|
828
830
|
bubbles: true,
|
|
829
|
-
detail: { item, checked },
|
|
830
831
|
cancelable: true,
|
|
832
|
+
detail: {
|
|
833
|
+
item,
|
|
834
|
+
checked,
|
|
835
|
+
value: __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item)?.getAttribute('data-value'),
|
|
836
|
+
},
|
|
831
837
|
}));
|
|
832
838
|
if (!activationSuccess)
|
|
833
839
|
return;
|
|
834
840
|
const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
|
|
835
841
|
if (this.selectVariant === 'single') {
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
842
|
+
// disallow unchecking checked item in single-select mode
|
|
843
|
+
if (!currentlyChecked) {
|
|
844
|
+
for (const el of this.items) {
|
|
845
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, el)?.setAttribute(this.ariaSelectionType, 'false');
|
|
846
|
+
}
|
|
847
|
+
__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").clear();
|
|
848
|
+
if (checked) {
|
|
849
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_addSelectedItem).call(this, item);
|
|
850
|
+
itemContent?.setAttribute(this.ariaSelectionType, 'true');
|
|
851
|
+
}
|
|
852
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setDynamicLabel).call(this);
|
|
846
853
|
}
|
|
847
|
-
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setDynamicLabel).call(this);
|
|
848
854
|
}
|
|
849
855
|
else {
|
|
850
856
|
// multi-select mode allows unchecking a checked item
|
|
@@ -860,7 +866,11 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
|
|
|
860
866
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateTabIndices).call(this);
|
|
861
867
|
this.dispatchEvent(new CustomEvent('itemActivated', {
|
|
862
868
|
bubbles: true,
|
|
863
|
-
detail: {
|
|
869
|
+
detail: {
|
|
870
|
+
item,
|
|
871
|
+
checked,
|
|
872
|
+
value: __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item)?.getAttribute('data-value'),
|
|
873
|
+
},
|
|
864
874
|
}));
|
|
865
875
|
};
|
|
866
876
|
_SelectPanelElement_setDynamicLabel = function _SelectPanelElement_setDynamicLabel() {
|
|
@@ -547,6 +547,7 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
547
547
|
}
|
|
548
548
|
|
|
549
549
|
case 'loadend': {
|
|
550
|
+
this.#filterInputTextFieldElement.hideLeadingSpinner()
|
|
550
551
|
this.dispatchEvent(new CustomEvent('loadend'))
|
|
551
552
|
break
|
|
552
553
|
}
|
|
@@ -712,11 +713,12 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
712
713
|
itemContent.setAttribute(this.ariaSelectionType, 'false')
|
|
713
714
|
}
|
|
714
715
|
} else if (value && !this.#selectedItems.has(value) && this.isItemChecked(item)) {
|
|
715
|
-
this.#hasLoadedData = true
|
|
716
716
|
this.#addSelectedItem(item)
|
|
717
717
|
}
|
|
718
718
|
}
|
|
719
719
|
|
|
720
|
+
this.#hasLoadedData = true
|
|
721
|
+
|
|
720
722
|
if (!this.noResults) return
|
|
721
723
|
|
|
722
724
|
if (this.#inErrorState()) {
|
|
@@ -859,13 +861,18 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
859
861
|
// interfere with events fired by menu items whose behavior is specified outside the library.
|
|
860
862
|
if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single') return
|
|
861
863
|
|
|
862
|
-
const
|
|
864
|
+
const currentlyChecked = this.isItemChecked(item)
|
|
865
|
+
const checked = !currentlyChecked
|
|
863
866
|
|
|
864
867
|
const activationSuccess = this.dispatchEvent(
|
|
865
868
|
new CustomEvent('beforeItemActivated', {
|
|
866
869
|
bubbles: true,
|
|
867
|
-
detail: {item, checked},
|
|
868
870
|
cancelable: true,
|
|
871
|
+
detail: {
|
|
872
|
+
item,
|
|
873
|
+
checked,
|
|
874
|
+
value: this.#getItemContent(item)?.getAttribute('data-value'),
|
|
875
|
+
},
|
|
869
876
|
}),
|
|
870
877
|
)
|
|
871
878
|
|
|
@@ -874,22 +881,21 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
874
881
|
const itemContent = this.#getItemContent(item)
|
|
875
882
|
|
|
876
883
|
if (this.selectVariant === 'single') {
|
|
877
|
-
|
|
878
|
-
|
|
884
|
+
// disallow unchecking checked item in single-select mode
|
|
885
|
+
if (!currentlyChecked) {
|
|
886
|
+
for (const el of this.items) {
|
|
887
|
+
this.#getItemContent(el)?.setAttribute(this.ariaSelectionType, 'false')
|
|
888
|
+
}
|
|
879
889
|
|
|
880
|
-
|
|
881
|
-
this.#getItemContent(element)?.setAttribute(this.ariaSelectionType, 'false')
|
|
882
|
-
}
|
|
890
|
+
this.#selectedItems.clear()
|
|
883
891
|
|
|
884
|
-
|
|
892
|
+
if (checked) {
|
|
893
|
+
this.#addSelectedItem(item)
|
|
894
|
+
itemContent?.setAttribute(this.ariaSelectionType, 'true')
|
|
895
|
+
}
|
|
885
896
|
|
|
886
|
-
|
|
887
|
-
if (checked) {
|
|
888
|
-
this.#addSelectedItem(item)
|
|
889
|
-
itemContent?.setAttribute(this.ariaSelectionType, 'true')
|
|
897
|
+
this.#setDynamicLabel()
|
|
890
898
|
}
|
|
891
|
-
|
|
892
|
-
this.#setDynamicLabel()
|
|
893
899
|
} else {
|
|
894
900
|
// multi-select mode allows unchecking a checked item
|
|
895
901
|
itemContent?.setAttribute(this.ariaSelectionType, `${checked}`)
|
|
@@ -907,7 +913,11 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
907
913
|
this.dispatchEvent(
|
|
908
914
|
new CustomEvent('itemActivated', {
|
|
909
915
|
bubbles: true,
|
|
910
|
-
detail: {
|
|
916
|
+
detail: {
|
|
917
|
+
item,
|
|
918
|
+
checked,
|
|
919
|
+
value: this.#getItemContent(item)?.getAttribute('data-value'),
|
|
920
|
+
},
|
|
911
921
|
}),
|
|
912
922
|
)
|
|
913
923
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}.tabnav-tab.selected
|
|
1
|
+
.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}
|
|
@@ -7,9 +7,7 @@
|
|
|
7
7
|
".tabnav-tab.selected",
|
|
8
8
|
".tabnav-tab[aria-current]:not([aria-current=false])",
|
|
9
9
|
".tabnav-tab[aria-selected=true]",
|
|
10
|
-
".tabnav-tab.selected .octicon",
|
|
11
|
-
".tabnav-tab[aria-current]:not([aria-current=false]) .octicon",
|
|
12
|
-
".tabnav-tab[aria-selected=true] .octicon",
|
|
10
|
+
":is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon",
|
|
13
11
|
".tabnav-tab:hover",
|
|
14
12
|
".tabnav-tab:focus",
|
|
15
13
|
".tabnav-tab:focus-visible",
|