primer_view_components 0.1.6 → 0.1.8
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +22 -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 +3 -3
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list/divider.rb +1 -1
- data/app/components/primer/alpha/action_list/form_wrapper.html.erb +10 -0
- data/app/components/primer/alpha/action_list/form_wrapper.rb +61 -0
- data/app/components/primer/alpha/action_list/heading.html.erb +2 -2
- data/app/components/primer/alpha/action_list/heading.rb +9 -5
- data/app/components/primer/alpha/action_list/item.html.erb +41 -36
- data/app/components/primer/alpha/action_list/item.rb +16 -2
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +1 -0
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.html.erb +6 -0
- data/app/components/primer/alpha/action_list.pcss +42 -37
- data/app/components/primer/alpha/action_list.rb +31 -11
- data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +7 -1
- data/app/components/primer/alpha/action_menu/action_menu_element.js +55 -3
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +70 -2
- data/app/components/primer/alpha/action_menu/list.rb +9 -11
- data/app/components/primer/alpha/action_menu.rb +50 -12
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.pcss +2 -2
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +7 -7
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +33 -32
- data/app/components/primer/alpha/dialog.rb +4 -0
- data/app/components/primer/alpha/dropdown.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/dropdown.pcss +12 -11
- data/app/components/primer/alpha/layout.css +1 -1
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/layout.pcss +4 -4
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/menu.pcss +20 -20
- data/app/components/primer/alpha/nav_list/divider.rb +14 -0
- data/app/components/primer/alpha/nav_list/group.html.erb +7 -0
- data/app/components/primer/alpha/nav_list/group.rb +24 -11
- data/app/components/primer/alpha/nav_list/item.rb +4 -0
- data/app/components/primer/alpha/nav_list.d.ts +0 -1
- data/app/components/primer/alpha/nav_list.html.erb +9 -4
- data/app/components/primer/alpha/nav_list.js +3 -4
- data/app/components/primer/alpha/nav_list.rb +87 -10
- data/app/components/primer/alpha/nav_list.ts +3 -2
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +2 -2
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +34 -43
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.pcss +12 -12
- data/app/components/primer/alpha/text_field.css +3 -3
- data/app/components/primer/alpha/text_field.css.json +11 -11
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +76 -90
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.pcss +9 -9
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.pcss +7 -7
- data/app/components/primer/beta/auto_complete/item.html.erb +9 -9
- data/app/components/primer/beta/auto_complete/item.rb +17 -13
- data/app/components/primer/beta/auto_complete.rb +1 -1
- data/app/components/primer/beta/avatar.css +1 -1
- data/app/components/primer/beta/avatar.css.map +1 -1
- data/app/components/primer/beta/avatar.pcss +2 -2
- data/app/components/primer/beta/avatar_stack.css +1 -1
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.pcss +5 -5
- data/app/components/primer/beta/blankslate.css +1 -1
- data/app/components/primer/beta/blankslate.css.map +1 -1
- data/app/components/primer/beta/blankslate.pcss +13 -13
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.json +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/border_box.pcss +41 -39
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +2 -0
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +34 -25
- data/app/components/primer/beta/counter.css +1 -1
- data/app/components/primer/beta/counter.css.map +1 -1
- data/app/components/primer/beta/counter.pcss +3 -3
- data/app/components/primer/beta/flash.css +1 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/flash.pcss +10 -11
- data/app/components/primer/beta/label.css +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/label.pcss +2 -2
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/popover.pcss +4 -4
- data/app/components/primer/beta/state.css +1 -1
- data/app/components/primer/beta/state.css.map +1 -1
- data/app/components/primer/beta/state.pcss +5 -5
- data/app/components/primer/beta/subhead.css +1 -1
- data/app/components/primer/beta/subhead.css.map +1 -1
- data/app/components/primer/beta/subhead.pcss +4 -4
- data/app/components/primer/beta/timeline_item.css +1 -1
- data/app/components/primer/beta/timeline_item.css.map +1 -1
- data/app/components/primer/beta/timeline_item.pcss +13 -13
- data/app/components/primer/beta/truncate.css +1 -1
- data/app/components/primer/beta/truncate.css.map +1 -1
- data/app/components/primer/beta/truncate.pcss +1 -1
- data/app/components/primer/component.rb +3 -96
- data/app/lib/primer/attributes_helper.rb +105 -0
- data/lib/postcss_mixins/activeIndicatorLine.pcss +1 -1
- data/lib/primer/forms/text_field.rb +6 -0
- data/lib/primer/view_components/linters/disallow_component_css_counter.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/yard/component_manifest.rb +1 -0
- data/previews/primer/alpha/action_menu_preview/multiple_select_form.html.erb +13 -0
- data/previews/primer/alpha/action_menu_preview/single_select_form.html.erb +13 -0
- data/previews/primer/alpha/action_menu_preview/submitting_forms.html.erb +15 -0
- data/previews/primer/alpha/action_menu_preview.rb +46 -2
- data/previews/primer/alpha/nav_list_preview/trailing_action.html.erb +10 -10
- data/previews/primer/alpha/nav_list_preview.rb +37 -16
- data/previews/primer/beta/button_preview/trailing_counter.html.erb +11 -0
- data/previews/primer/beta/button_preview.rb +15 -0
- data/previews/primer/box_preview.rb +28 -0
- data/static/arguments.json +59 -14
- data/static/audited_at.json +2 -0
- data/static/classes.json +3 -0
- data/static/constants.json +21 -1
- data/static/info_arch.json +238 -36
- data/static/previews.json +58 -0
- data/static/statuses.json +2 -0
- metadata +12 -2
@@ -1 +1 @@
|
|
1
|
-
.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--
|
1
|
+
.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker,4px) var(--borderWidth-thicker,4px) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--color-canvas-overlay);border:var(--borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--borderRadius-medium,6px);box-shadow:var(--color-shadow-large);left:0;list-style:none;margin-top:2px;padding-bottom:var(--control-small-paddingBlock,4px);padding-top:var(--control-small-paddingBlock,4px);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--color-border-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--color-canvas-overlay)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock,4px) var(--control-medium-paddingInline-spacious,16px);text-overflow:inherit}.dropdown-item{color:var(--color-fg-default);display:block;overflow:hidden;padding:var(--control-small-paddingBlock,4px) var(--control-medium-paddingInline-condensed,8px) var(--control-small-paddingBlock,4px) var(--control-medium-paddingInline-spacious,16px);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-],.dropdown-item:hover>.Label{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin,1px) solid var(--color-border-default);display:block;height:0;margin:var(--stack-gap-condensed,8px) 0}.dropdown-header{color:var(--color-fg-muted);font-size:var(--text-body-size-small,12px);padding:var(--control-small-paddingBlock,4px) var(--control-medium-paddingInline-spacious,16px)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:8px;margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--color-border-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--color-canvas-overlay);left:auto;right:-14px;top:11px}.dropdown-menu-e{left:100%;margin-left:8px;margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--color-border-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--color-canvas-overlay);left:-14px;top:11px}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:3px;top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--color-border-default);bottom:-8px;left:9px}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--color-canvas-overlay);bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:9px;top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:9px;top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,
|
1
|
+
{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,4EAA+E,CAF/E,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,4CAA6C,CAE7C,oEAAsE,CACtE,4CAA8C,CAC9C,oCAAqC,CAXrC,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,oDAAsD,CADtD,iDAAmD,CALnD,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAAgD,CAAhD,mDACF,CAGA,qBAEE,sBAAgD,CAAhD,mDACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,+FAAkG,CAElG,qBACF,CAIF,eAKE,6BAA8B,CAJ9B,aAAc,CAGd,eAAgB,CAFhB,uLAC2F,CAG3F,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAMA,oEACE,uBAEF,CAHA,4BAEE,yBACF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,wEAA0E,CAH1E,aAAc,CACd,QAAS,CACT,uCAEF,CAEA,iBAGE,2BAA4B,CAD5B,0CAA4C,CAD5C,+FAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,6CAA8C,CAF9C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,6CAA8C,CAF9C,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,8CAA+C,CAF/C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,8CAA+C,CAF/C,UAAW,CADX,QAIF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,iBAAkB,CAHlB,QA4BF,CAvBE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,gDAAiD,CAFjD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,gDAAiD,CAFjD,WAAY,CACZ,SAKF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAaF,CAXE,wBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAcF,CAXE,yBAGE,SAAU,CADV,SAAU,CADV,SAGF,CAEA,wBAGE,SAAU,CADV,UAAW,CADX,SAGF,CAIA,yBAEE,QAAS,CADT,SAEF,CAEA,wBAEE,SAAU,CADV,SAEF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n position: relative;\n}\n\n.dropdown-caret {\n display: inline-block;\n width: 0;\n height: 0;\n vertical-align: middle;\n content: '';\n border-style: solid;\n border-width: var(--borderWidth-thicker, 4px) var(--borderWidth-thicker, 4px) 0;\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 100;\n width: 160px;\n padding-top: var(--control-small-paddingBlock, 4px);\n padding-bottom: var(--control-small-paddingBlock, 4px);\n margin-top: 2px;\n list-style: none;\n background-color: var(--color-canvas-overlay);\n background-clip: padding-box;\n border: var(--borderWidth-thin, 1px) solid var(--color-border-default);\n border-radius: var(--borderRadius-medium, 6px);\n box-shadow: var(--color-shadow-large);\n\n &::before,\n &::after {\n position: absolute;\n display: inline-block;\n content: '';\n }\n\n /* caret border */\n &::before {\n border: 8px solid transparent;\n border-bottom-color: var(--color-border-default);\n }\n\n /* caret background (should match dropdown background) */\n &::after {\n border: 7px solid transparent;\n border-bottom-color: var(--color-canvas-overlay);\n }\n\n & > ul {\n list-style: none;\n }\n}\n\n.dropdown-menu-no-overflow {\n width: auto;\n\n & .dropdown-item {\n padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);\n overflow: visible;\n text-overflow: inherit;\n }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n display: block;\n padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-condensed, 8px)\n var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);\n overflow: hidden;\n color: var(--color-fg-default);\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n color: var(--color-fg-on-emphasis);\n text-decoration: none;\n background-color: var(--color-accent-emphasis);\n\n & > .octicon {\n color: inherit;\n opacity: 1;\n }\n\n & [class*='color-fg-'] {\n color: inherit !important;\n }\n\n & > .Label {\n color: inherit !important;\n border-color: currentcolor;\n }\n }\n\n &.btn-link {\n width: 100%;\n text-align: left;\n }\n}\n\n.dropdown-signout {\n width: 100%;\n text-align: left;\n background: none;\n border: 0;\n}\n\n.dropdown-divider {\n display: block;\n height: 0;\n margin: var(--stack-gap-condensed, 8px) 0;\n border-top: var(--borderWidth-thin, 1px) solid var(--color-border-default);\n}\n\n.dropdown-header {\n padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);\n font-size: var(--text-body-size-small, 12px);\n color: var(--color-fg-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n top: 0;\n right: 100%;\n left: auto;\n width: auto;\n margin-top: 0;\n margin-right: 8px;\n\n &::before {\n top: 10px;\n right: -16px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--color-border-default);\n }\n\n &::after {\n top: 11px;\n right: -14px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--color-canvas-overlay);\n }\n}\n\n.dropdown-menu-e {\n top: 0;\n left: 100%;\n width: auto;\n margin-top: 0;\n margin-left: 8px;\n\n &::before {\n top: 10px;\n left: -16px;\n border-color: transparent;\n border-right-color: var(--color-border-default);\n }\n\n &::after {\n top: 11px;\n left: -14px;\n border-color: transparent;\n border-right-color: var(--color-canvas-overlay);\n }\n}\n\n.dropdown-menu-ne {\n top: auto;\n bottom: 100%;\n left: 0;\n margin-bottom: 3px;\n\n &::before,\n &::after {\n top: auto;\n right: auto;\n }\n\n &::before {\n bottom: -8px;\n left: 9px;\n border-top: 8px solid var(--color-border-default);\n border-right: 8px solid transparent;\n border-bottom: 0;\n border-left: 8px solid transparent;\n }\n\n &::after {\n bottom: -7px;\n left: 10px;\n border-top: 7px solid var(--color-canvas-overlay);\n border-right: 7px solid transparent;\n border-bottom: 0;\n border-left: 7px solid transparent;\n }\n}\n\n.dropdown-menu-s {\n right: 50%;\n left: auto;\n transform: translateX(50%);\n\n &::before {\n top: -16px;\n right: 50%;\n transform: translateX(50%);\n }\n\n &::after {\n top: -14px;\n right: 50%;\n transform: translateX(50%);\n }\n}\n\n.dropdown-menu-sw {\n right: 0;\n left: auto;\n\n &::before {\n top: -16px;\n right: 9px;\n left: auto;\n }\n\n &::after {\n top: -14px;\n right: 10px;\n left: auto;\n }\n}\n\n.dropdown-menu-se {\n &::before {\n top: -16px;\n left: 9px;\n }\n\n &::after {\n top: -14px;\n left: 10px;\n }\n}\n"]}
|
@@ -11,7 +11,7 @@
|
|
11
11
|
vertical-align: middle;
|
12
12
|
content: '';
|
13
13
|
border-style: solid;
|
14
|
-
border-width: var(--
|
14
|
+
border-width: var(--borderWidth-thicker, 4px) var(--borderWidth-thicker, 4px) 0;
|
15
15
|
border-right-color: transparent;
|
16
16
|
border-bottom-color: transparent;
|
17
17
|
border-left-color: transparent;
|
@@ -26,14 +26,14 @@
|
|
26
26
|
left: 0;
|
27
27
|
z-index: 100;
|
28
28
|
width: 160px;
|
29
|
-
padding-top: var(--
|
30
|
-
padding-bottom: var(--
|
29
|
+
padding-top: var(--control-small-paddingBlock, 4px);
|
30
|
+
padding-bottom: var(--control-small-paddingBlock, 4px);
|
31
31
|
margin-top: 2px;
|
32
32
|
list-style: none;
|
33
33
|
background-color: var(--color-canvas-overlay);
|
34
34
|
background-clip: padding-box;
|
35
|
-
border: var(--
|
36
|
-
border-radius: var(--
|
35
|
+
border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
|
36
|
+
border-radius: var(--borderRadius-medium, 6px);
|
37
37
|
box-shadow: var(--color-shadow-large);
|
38
38
|
|
39
39
|
&::before,
|
@@ -64,7 +64,7 @@
|
|
64
64
|
width: auto;
|
65
65
|
|
66
66
|
& .dropdown-item {
|
67
|
-
padding: var(--
|
67
|
+
padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);
|
68
68
|
overflow: visible;
|
69
69
|
text-overflow: inherit;
|
70
70
|
}
|
@@ -73,7 +73,8 @@
|
|
73
73
|
/* Dropdown items (can be links or buttons) */
|
74
74
|
.dropdown-item {
|
75
75
|
display: block;
|
76
|
-
padding: var(--
|
76
|
+
padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-condensed, 8px)
|
77
|
+
var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);
|
77
78
|
overflow: hidden;
|
78
79
|
color: var(--color-fg-default);
|
79
80
|
text-overflow: ellipsis;
|
@@ -115,13 +116,13 @@
|
|
115
116
|
.dropdown-divider {
|
116
117
|
display: block;
|
117
118
|
height: 0;
|
118
|
-
margin: var(--
|
119
|
-
border-top: var(--
|
119
|
+
margin: var(--stack-gap-condensed, 8px) 0;
|
120
|
+
border-top: var(--borderWidth-thin, 1px) solid var(--color-border-default);
|
120
121
|
}
|
121
122
|
|
122
123
|
.dropdown-header {
|
123
|
-
padding: var(--
|
124
|
-
font-size: var(--
|
124
|
+
padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);
|
125
|
+
font-size: var(--text-body-size-small, 12px);
|
125
126
|
color: var(--color-fg-muted);
|
126
127
|
}
|
127
128
|
|
@@ -1 +1 @@
|
|
1
|
-
.Layout{--Layout-sidebar-width:220px;--Layout-gutter:16px;display:grid}@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.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--
|
1
|
+
.Layout{--Layout-sidebar-width:220px;--Layout-gutter:16px;display:grid}@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.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--borderWidth-thin,1px) 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.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--borderWidth-thin,1px) 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.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--borderWidth-thin,1px) 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-gap:var(--Layout-gutter);grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - 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(--color-border-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}.Layout-main .Layout-main-centered-lg>.container-lg,.Layout-main .Layout-main-centered-lg>.container-md,.Layout-main .Layout-main-centered-lg>.container-xl,.Layout-main .Layout-main-centered-md>.container-lg,.Layout-main .Layout-main-centered-md>.container-md,.Layout-main .Layout-main-centered-md>.container-xl,.Layout-main .Layout-main-centered-xl>.container-lg,.Layout-main .Layout-main-centered-xl>.container-md,.Layout-main .Layout-main-centered-xl>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QAGE,4BAA6B,CAC7B,oBAAqB,CAHrB,YAkJF,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,uEACE,YACF,CAEA,wEAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,
|
1
|
+
{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QAGE,4BAA6B,CAC7B,oBAAqB,CAHrB,YAkJF,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,uEACE,YACF,CAEA,wEAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,0CAA4C,CAL5C,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,gGACE,YACF,CAEA,iGAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,0CAA4C,CAL5C,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,gGACE,YACF,CAEA,iGAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,0CAA4C,CAL5C,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QA0BE,6BAA8B,CAF9B,qBAAsB,CACtB,sGA0HF,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,sCAAuC,CAJvC,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,odAGE,aACF,CAGF,sCACE,oGACF,CAEA,sCACE,oGACF,CAEA,sCACE,qGACF","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(--color-canvas-inset);\n border-color: var(--color-border-default);\n border-style: solid;\n border-width: var(--borderWidth-thin, 1px) 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(--color-border-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, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-lg {\n max-width: calc(var(--breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-xl {\n max-width: calc(var(--breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n}\n"]}
|
@@ -73,7 +73,7 @@
|
|
73
73
|
background: var(--color-canvas-inset);
|
74
74
|
border-color: var(--color-border-default);
|
75
75
|
border-style: solid;
|
76
|
-
border-width: var(--
|
76
|
+
border-width: var(--borderWidth-thin, 1px) 0;
|
77
77
|
}
|
78
78
|
}
|
79
79
|
}
|
@@ -255,14 +255,14 @@
|
|
255
255
|
}
|
256
256
|
|
257
257
|
& .Layout-main-centered-md {
|
258
|
-
max-width: calc(var(--
|
258
|
+
max-width: calc(var(--breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
|
259
259
|
}
|
260
260
|
|
261
261
|
& .Layout-main-centered-lg {
|
262
|
-
max-width: calc(var(--
|
262
|
+
max-width: calc(var(--breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
|
263
263
|
}
|
264
264
|
|
265
265
|
& .Layout-main-centered-xl {
|
266
|
-
max-width: calc(var(--
|
266
|
+
max-width: calc(var(--breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
|
267
267
|
}
|
268
268
|
}
|
@@ -1 +1 @@
|
|
1
|
-
.menu{background-color:var(--color-canvas-default);border:var(--
|
1
|
+
.menu{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--borderRadius-medium,6px);list-style:none;margin-bottom:var(--stack-gap-normal,16px)}.menu-item{border-bottom:var(--borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;padding:var(--control-medium-paddingInline-condensed,8px) var(--control-medium-paddingInline-spacious,16px);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--borderRadius-medium,6px)}.menu-item:hover{background-color:var(--color-neutral-subtle);text-decoration:none}.menu-item:active{background-color:var(--color-canvas-subtle)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--color-menu-bg-active);cursor:default}.menu-item.selected:before,.menu-item[aria-current]:not([aria-current=false]):before,.menu-item[aria-selected=true]:before{background-color:var(--color-primer-border-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--color-fg-muted);margin-right:var(--control-medium-gap,8px);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--control-small-gap,4px)}.menu-item .menu-warning{color:var(--color-attention-fg);float:right}.menu-item .avatar{float:left;margin-right:var(--control-small-gap,4px)}.menu-item.alert .Counter{color:var(--color-danger-fg)}.menu-heading{border-bottom:var(--borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--control-medium-paddingInline-condensed,8px) var(--control-medium-paddingInline-spacious,16px)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,
|
1
|
+
{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,oEAAsE,CACtE,4CAA8C,CAH9C,eAAgB,CADhB,0CAKF,CAEA,WAKE,yEAA2E,CAD3E,6BAA8B,CAF9B,aAAc,CACd,2GAA8G,CAF9G,iBA+EF,CAzEE,uBACE,YAAa,CAEb,sDAKF,CAHE,qDAHA,qDAKA,CAGF,sBACE,eAAgB,CAChB,yDAMF,CAHE,mDAFA,wDAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,2HAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,0CAA4C,CAE5C,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,wCACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,yCACF,CAGE,0BACE,4BACF,CAIJ,cAQE,yEAA2E,CAD3E,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAAkD,CAFlD,eAAgB,CADhB,YAAa,CADb,2GAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,qDAAuD,CACvD,sDACF,CAEA,yBACE,eAAgB,CAEhB,wDAA0D,CAD1D,yDAEF","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, 16px);\n list-style: none;\n background-color: var(--color-canvas-default);\n border: var(--borderWidth-thin, 1px) solid var(--color-border-default);\n border-radius: var(--borderRadius-medium, 6px);\n}\n\n.menu-item {\n position: relative;\n display: block;\n padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);\n color: var(--color-fg-default);\n border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);\n\n &:first-child {\n border-top: 0;\n border-top-left-radius: var(--borderRadius-medium, 6px);\n border-top-right-radius: var(--borderRadius-medium, 6px);\n\n &::before {\n border-top-left-radius: var(--borderRadius-medium, 6px);\n }\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--borderRadius-medium, 6px);\n border-bottom-left-radius: var(--borderRadius-medium, 6px);\n\n &::before {\n border-bottom-left-radius: var(--borderRadius-medium, 6px);\n }\n }\n\n &:hover {\n text-decoration: none;\n background-color: var(--color-neutral-subtle);\n }\n\n &:active {\n background-color: var(--color-canvas-subtle);\n }\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n cursor: default;\n background-color: var(--color-menu-bg-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(--color-primer-border-active);\n }\n }\n\n & .octicon {\n width: 16px;\n margin-right: var(--control-medium-gap, 8px);\n color: var(--color-fg-muted);\n text-align: center;\n }\n\n & .Counter {\n float: right;\n margin-left: var(--control-small-gap, 4px);\n }\n\n & .menu-warning {\n float: right;\n color: var(--color-attention-fg);\n }\n\n & .avatar {\n float: left;\n margin-right: var(--control-small-gap, 4px);\n }\n\n &.alert {\n & .Counter {\n color: var(--color-danger-fg);\n }\n }\n}\n\n.menu-heading {\n display: block;\n padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);\n margin-top: 0;\n margin-bottom: 0;\n font-size: inherit;\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-default);\n border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);\n\n &:hover {\n text-decoration: none;\n }\n\n &:first-child {\n border-top-left-radius: var(--borderRadius-medium, 6px);\n border-top-right-radius: var(--borderRadius-medium, 6px);\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--borderRadius-medium, 6px);\n border-bottom-left-radius: var(--borderRadius-medium, 6px);\n }\n}\n"]}
|
@@ -3,37 +3,37 @@
|
|
3
3
|
/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
|
4
4
|
|
5
5
|
.menu {
|
6
|
-
margin-bottom: var(--
|
6
|
+
margin-bottom: var(--stack-gap-normal, 16px);
|
7
7
|
list-style: none;
|
8
8
|
background-color: var(--color-canvas-default);
|
9
|
-
border: var(--
|
10
|
-
border-radius: var(--
|
9
|
+
border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
|
10
|
+
border-radius: var(--borderRadius-medium, 6px);
|
11
11
|
}
|
12
12
|
|
13
13
|
.menu-item {
|
14
14
|
position: relative;
|
15
15
|
display: block;
|
16
|
-
padding: var(--
|
16
|
+
padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);
|
17
17
|
color: var(--color-fg-default);
|
18
|
-
border-bottom: var(--
|
18
|
+
border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
|
19
19
|
|
20
20
|
&:first-child {
|
21
21
|
border-top: 0;
|
22
|
-
border-top-left-radius: var(--
|
23
|
-
border-top-right-radius: var(--
|
22
|
+
border-top-left-radius: var(--borderRadius-medium, 6px);
|
23
|
+
border-top-right-radius: var(--borderRadius-medium, 6px);
|
24
24
|
|
25
25
|
&::before {
|
26
|
-
border-top-left-radius: var(--
|
26
|
+
border-top-left-radius: var(--borderRadius-medium, 6px);
|
27
27
|
}
|
28
28
|
}
|
29
29
|
|
30
30
|
&:last-child {
|
31
31
|
border-bottom: 0;
|
32
|
-
border-bottom-right-radius: var(--
|
33
|
-
border-bottom-left-radius: var(--
|
32
|
+
border-bottom-right-radius: var(--borderRadius-medium, 6px);
|
33
|
+
border-bottom-left-radius: var(--borderRadius-medium, 6px);
|
34
34
|
|
35
35
|
&::before {
|
36
|
-
border-bottom-left-radius: var(--
|
36
|
+
border-bottom-left-radius: var(--borderRadius-medium, 6px);
|
37
37
|
}
|
38
38
|
}
|
39
39
|
|
@@ -65,14 +65,14 @@
|
|
65
65
|
|
66
66
|
& .octicon {
|
67
67
|
width: 16px;
|
68
|
-
margin-right: var(--
|
68
|
+
margin-right: var(--control-medium-gap, 8px);
|
69
69
|
color: var(--color-fg-muted);
|
70
70
|
text-align: center;
|
71
71
|
}
|
72
72
|
|
73
73
|
& .Counter {
|
74
74
|
float: right;
|
75
|
-
margin-left: var(--
|
75
|
+
margin-left: var(--control-small-gap, 4px);
|
76
76
|
}
|
77
77
|
|
78
78
|
& .menu-warning {
|
@@ -82,7 +82,7 @@
|
|
82
82
|
|
83
83
|
& .avatar {
|
84
84
|
float: left;
|
85
|
-
margin-right: var(--
|
85
|
+
margin-right: var(--control-small-gap, 4px);
|
86
86
|
}
|
87
87
|
|
88
88
|
&.alert {
|
@@ -94,26 +94,26 @@
|
|
94
94
|
|
95
95
|
.menu-heading {
|
96
96
|
display: block;
|
97
|
-
padding: var(--
|
97
|
+
padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);
|
98
98
|
margin-top: 0;
|
99
99
|
margin-bottom: 0;
|
100
100
|
font-size: inherit;
|
101
101
|
font-weight: var(--base-text-weight-semibold, 600);
|
102
102
|
color: var(--color-fg-default);
|
103
|
-
border-bottom: var(--
|
103
|
+
border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
|
104
104
|
|
105
105
|
&:hover {
|
106
106
|
text-decoration: none;
|
107
107
|
}
|
108
108
|
|
109
109
|
&:first-child {
|
110
|
-
border-top-left-radius: var(--
|
111
|
-
border-top-right-radius: var(--
|
110
|
+
border-top-left-radius: var(--borderRadius-medium, 6px);
|
111
|
+
border-top-right-radius: var(--borderRadius-medium, 6px);
|
112
112
|
}
|
113
113
|
|
114
114
|
&:last-child {
|
115
115
|
border-bottom: 0;
|
116
|
-
border-bottom-right-radius: var(--
|
117
|
-
border-bottom-left-radius: var(--
|
116
|
+
border-bottom-right-radius: var(--borderRadius-medium, 6px);
|
117
|
+
border-bottom-left-radius: var(--borderRadius-medium, 6px);
|
118
118
|
}
|
119
119
|
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module Alpha
|
5
|
+
class NavList
|
6
|
+
# Separator with optional text rendered above groups or between individual items.
|
7
|
+
class Divider < Primer::Alpha::ActionList::Divider
|
8
|
+
def kind
|
9
|
+
:divider
|
10
|
+
end
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
@@ -20,19 +20,30 @@ module Primer
|
|
20
20
|
@item_classes,
|
21
21
|
system_arguments[:classes]
|
22
22
|
)
|
23
|
-
system_arguments[:
|
23
|
+
system_arguments[:tag] = :div
|
24
|
+
system_arguments[:id] ||= self.class.generate_id(base_name: "item")
|
24
25
|
system_arguments[:hidden] = true
|
25
26
|
system_arguments[:href] = "#"
|
26
27
|
system_arguments[:data] ||= {}
|
27
28
|
system_arguments[:data][:target] = "nav-list.showMoreItem"
|
28
29
|
system_arguments[:data][:action] = "click:nav-list#showMore"
|
29
|
-
system_arguments[:data][:
|
30
|
-
system_arguments[:data][:
|
30
|
+
system_arguments[:data][:current_page] = "1"
|
31
|
+
system_arguments[:data][:total_pages] = pages.to_s
|
31
32
|
system_arguments[:label_arguments] = {
|
32
33
|
**system_arguments[:label_arguments] || {},
|
33
34
|
color: :accent
|
34
35
|
}
|
35
36
|
|
37
|
+
system_arguments[:content_arguments] = {
|
38
|
+
**system_arguments[:content_arguments] || {},
|
39
|
+
tag: :button
|
40
|
+
}
|
41
|
+
|
42
|
+
system_arguments[:content_arguments][:data] = merge_data(
|
43
|
+
system_arguments[:content_arguments],
|
44
|
+
data: { list_id: id }
|
45
|
+
)
|
46
|
+
|
36
47
|
component_klass.new(list: self, src: src, **system_arguments)
|
37
48
|
}
|
38
49
|
|
@@ -46,7 +57,6 @@ module Primer
|
|
46
57
|
def initialize(selected_item_id: nil, **system_arguments)
|
47
58
|
@system_arguments = system_arguments
|
48
59
|
@selected_item_id = selected_item_id
|
49
|
-
@system_arguments[:"data-target"] = "nav-list.list"
|
50
60
|
|
51
61
|
super(**@system_arguments)
|
52
62
|
end
|
@@ -58,13 +68,6 @@ module Primer
|
|
58
68
|
end
|
59
69
|
# :nocov:
|
60
70
|
|
61
|
-
# The items contained within this group.
|
62
|
-
#
|
63
|
-
# @return [Array<Primer::Alpha::ActionList::Item>]
|
64
|
-
def items
|
65
|
-
[*super, show_more_item].tap(&:compact!)
|
66
|
-
end
|
67
|
-
|
68
71
|
# @!parse
|
69
72
|
# # Items.
|
70
73
|
# #
|
@@ -79,6 +82,16 @@ module Primer
|
|
79
82
|
list: self
|
80
83
|
)
|
81
84
|
end
|
85
|
+
|
86
|
+
def kind
|
87
|
+
:group
|
88
|
+
end
|
89
|
+
|
90
|
+
def before_render
|
91
|
+
super
|
92
|
+
|
93
|
+
raise ArgumentError, "NavList groups are required to have headings" unless heading?
|
94
|
+
end
|
82
95
|
end
|
83
96
|
end
|
84
97
|
end
|
@@ -1,10 +1,15 @@
|
|
1
1
|
<%= render(Primer::BaseComponent.new(tag: :nav, **@system_arguments)) do %>
|
2
|
+
<%= heading %>
|
2
3
|
<nav-list>
|
3
|
-
|
4
|
-
<%
|
5
|
-
|
4
|
+
<%= render(Primer::ConditionalWrapper.new(condition: render_outer_list?, tag: :ul, classes: "ActionListWrap")) do %>
|
5
|
+
<% items.each_with_index do |item, index| %>
|
6
|
+
<% if index > 0 && render_divider_between?(item, items[index - 1]) %>
|
7
|
+
<%= render(Primer::Alpha::ActionList::Divider.new) %>
|
8
|
+
<% end %>
|
9
|
+
<%= render(Primer::ConditionalWrapper.new(condition: render_outer_list? && group?(item), tag: :li)) do %>
|
10
|
+
<%= item %>
|
11
|
+
<% end %>
|
6
12
|
<% end %>
|
7
|
-
<%= group %>
|
8
13
|
<% end %>
|
9
14
|
</nav-list>
|
10
15
|
<% end %>
|
@@ -153,7 +153,9 @@ let NavListElement = class NavListElement extends HTMLElement {
|
|
153
153
|
}
|
154
154
|
const fragment = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_parseHTML).call(this, document, html);
|
155
155
|
(_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list.focusMarkers');
|
156
|
-
|
156
|
+
const listId = e.target.closest('button').getAttribute('data-list-id');
|
157
|
+
const list = document.getElementById(listId);
|
158
|
+
list.append(fragment);
|
157
159
|
(_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
|
158
160
|
this.showMoreDisabled = false;
|
159
161
|
}
|
@@ -225,9 +227,6 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
|
|
225
227
|
return null;
|
226
228
|
}
|
227
229
|
};
|
228
|
-
__decorate([
|
229
|
-
target
|
230
|
-
], NavListElement.prototype, "list", void 0);
|
231
230
|
__decorate([
|
232
231
|
targets
|
233
232
|
], NavListElement.prototype, "items", void 0);
|