@primer/css 20.4.3-rc.fcd5af82 → 20.4.4-rc.af367295
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -1
- package/RELEASING.md +1 -1
- package/core/index.scss +0 -1
- package/dist/core.css +1 -1
- package/dist/core.css.map +1 -1
- package/dist/forms.css +1 -1
- package/dist/forms.css.map +1 -1
- package/dist/meta.json +55 -66
- package/dist/primer.css +2 -2
- package/dist/primer.css.map +1 -1
- package/dist/product.css +1 -1
- package/dist/product.css.map +1 -1
- package/dist/select-menu.css +1 -1
- package/dist/select-menu.css.map +1 -1
- package/dist/stats/core.json +1 -1
- package/dist/stats/forms.json +1 -1
- package/dist/stats/primer.json +1 -1
- package/dist/stats/product.json +1 -1
- package/dist/stats/select-menu.json +1 -1
- package/forms/FormControl.scss +9 -0
- package/package.json +1 -1
- package/select-menu/select-menu.scss +0 -1
- package/dist/segmented-control.css +0 -2
- package/dist/segmented-control.css.map +0 -1
- package/dist/segmented-control.js +0 -1
- package/dist/stats/segmented-control.json +0 -1
- package/segmented-control/README.md +0 -25
- package/segmented-control/index.scss +0 -3
- package/segmented-control/segmented-control.scss +0 -167
|
@@ -1 +1 @@
|
|
|
1
|
-
{"size":6192,"gzipSize":1464,"humanizedSize":"6KB","humanizedGzipSize":"1KB","rules":{"total":54,"size":{"graph":[10,6,8,1,13,2,2,9,5,1,3,1,6,2,3,1,2,1,9,11,2,1,3,3,6,1,1,9,6,5,2,4,3,7,1,2,6,1,3,3,1,1,2,3,2,1,1,1,1,1,1,2,1,1],"max":13,"average":3.4074074074074074},"selectorByRuleSizes":[{"selector":".SelectMenu-modal","declarations":13},{"selector":".SelectMenu-item","declarations":11},{"selector":".SelectMenu","declarations":10},{"selector":".SelectMenu-tab","declarations":9},{"selector":".SelectMenu-list","declarations":9},{"selector":".SelectMenu-modal","declarations":9},{"selector":".SelectMenu::before","declarations":8},{"selector":".SelectMenu-divider","declarations":7},{"selector":".SelectMenu-footer","declarations":6},{"selector":".SelectMenu-tab","declarations":6},{"selector":".SelectMenu-tabs","declarations":6},{"selector":".SelectMenu-closeButton","declarations":6},{"selector":".SelectMenu","declarations":6},{"selector":".SelectMenu-tab[aria-selected=true]","declarations":5},{"selector":".SelectMenu-header","declarations":5},{"selector":".SelectMenu-message","declarations":4},{"selector":".SelectMenu-item[aria-checked=true] .SelectMenu-icon--check","declarations":3},{"selector":".SelectMenu--hasFilter .SelectMenu-modal","declarations":3},{"selector":".SelectMenu--hasFilter .SelectMenu-modal","declarations":3},{"selector":".SelectMenu-blankslate,.SelectMenu-loading","declarations":3},{"selector":".SelectMenu-icon--check","declarations":3},{"selector":".SelectMenu-icon","declarations":3},{"selector":".SelectMenu-filter","declarations":3},{"selector":".SelectMenu-title","declarations":3},{"selector":".SelectMenu-tab:not([aria-selected=true]):active","declarations":2},{"selector":".SelectMenu-item:disabled,.SelectMenu-item[aria-disabled=true]","declarations":2},{"selector":".SelectMenu-item[aria-checked=true]","declarations":2},{"selector":".SelectMenu-list--borderless .SelectMenu-divider:empty","declarations":2},{"selector":".SelectMenu-tab[aria-selected=true]","declarations":2},{"selector":".SelectMenu-item","declarations":2},{"selector":".SelectMenu-input","declarations":2},{"selector":".SelectMenu-closeButton","declarations":2},{"selector":"0%","declarations":2},{"selector":"0%","declarations":2},{"selector":".SelectMenu-item","declarations":1},{"selector":".SelectMenu-item:focus,.SelectMenu-item:active","declarations":1},{"selector":".SelectMenu-tab:hover","declarations":1},{"selector":"body:not(.intent-mouse) .SelectMenu-tab:focus","declarations":1},{"selector":".SelectMenu-item:active","declarations":1},{"selector":"body:not(.intent-mouse) .SelectMenu-item:focus,.SelectMenu-item:hover","declarations":1},{"selector":".SelectMenu-closeButton:active","declarations":1},{"selector":"body:not(.intent-mouse) .SelectMenu-closeButton:focus,.SelectMenu-closeButton:hover","declarations":1},{"selector":".SelectMenu-item:hover","declarations":1},{"selector":".SelectMenu-closeButton:focus,.SelectMenu-tab:focus,.SelectMenu-item:focus","declarations":1},{"selector":".SelectMenu-footer","declarations":1},{"selector":".SelectMenu-list--borderless .SelectMenu-divider","declarations":1},{"selector":".SelectMenu-tabs","declarations":1},{"selector":".SelectMenu-tabs::-webkit-scrollbar","declarations":1},{"selector":".SelectMenu-list--borderless .SelectMenu-item","declarations":1},{"selector":".SelectMenu-input","declarations":1},{"selector":".SelectMenu-filter","declarations":1},{"selector":".SelectMenu-title","declarations":1},{"selector":".SelectMenu-header","declarations":1},{"selector":".SelectMenu::before","declarations":1}]},"selectors":{"total":59,"type":3,"class":59,"id":0,"pseudoClass":17,"pseudoElement":2,"values":[".SelectMenu",".SelectMenu",".SelectMenu::before",".SelectMenu::before",".SelectMenu-modal",".SelectMenu-modal",".SelectMenu-header",".SelectMenu-header",".SelectMenu-title",".SelectMenu-title",".SelectMenu-closeButton",".SelectMenu-closeButton",".SelectMenu-filter",".SelectMenu-filter",".SelectMenu-input",".SelectMenu-input",".SelectMenu-list",".SelectMenu-item",".SelectMenu-item",".SelectMenu-list--borderless .SelectMenu-item",".SelectMenu-icon",".SelectMenu-icon--check",".SelectMenu-tabs",".SelectMenu-tabs::-webkit-scrollbar",".SelectMenu-tabs",".SelectMenu-tab",".SelectMenu-tab",".SelectMenu-tab[aria-selected=true]",".SelectMenu-tab[aria-selected=true]",".SelectMenu-message",".SelectMenu-blankslate",".SelectMenu-loading",".SelectMenu-divider",".SelectMenu-list--borderless .SelectMenu-divider",".SelectMenu-list--borderless .SelectMenu-divider:empty",".SelectMenu-footer",".SelectMenu-footer",".SelectMenu--hasFilter .SelectMenu-modal",".SelectMenu--hasFilter .SelectMenu-modal",".SelectMenu-closeButton:focus",".SelectMenu-tab:focus",".SelectMenu-item:focus",".SelectMenu-item:hover",".SelectMenu-item[aria-checked=true]",".SelectMenu-item[aria-checked=true] .SelectMenu-icon--check",".SelectMenu-item:disabled",".SelectMenu-item[aria-disabled=true]","body:not(.intent-mouse) .SelectMenu-closeButton:focus",".SelectMenu-closeButton:hover",".SelectMenu-closeButton:active","body:not(.intent-mouse) .SelectMenu-item:focus",".SelectMenu-item:hover",".SelectMenu-item:active","body:not(.intent-mouse) .SelectMenu-tab:focus",".SelectMenu-tab:hover",".SelectMenu-tab:not([aria-selected=true]):active",".SelectMenu-item:focus",".SelectMenu-item:active",".SelectMenu-item"],"specificity":{"max":31,"average":15.525423728813559}},"declarations":{"total":184,"unique":111,"uniqueToTotalRatio":0.6032608695652174,"properties":{"position":["fixed","absolute","absolute","relative","relative"],"top":["0","auto","0"],"right":["0","auto","0"],"bottom":["0","auto","0"],"left":["0","auto","0"],"z-index":["99","99","1","0"],"display":["flex","none","flex","flex","block","flex","flex","none"],"padding":["16px","0","16px","7px 7px 7px 16px","16px","8px","16px","8px","0","16px","8px 8px 0 8px","8px 16px","4px 16px","7px 16px","24px 16px","4px 16px","0","8px 16px","7px 16px"],"pointer-events":["none","none","auto","none"],"flex-direction":["column","column"],"content":["\"\""],"background-color":["var(--color-primer-canvas-backdrop)","var(--color-canvas-overlay)","transparent","var(--color-canvas-overlay)","var(--color-canvas-overlay)","transparent","var(--color-canvas-overlay)","var(--color-canvas-overlay)","var(--color-canvas-overlay)","var(--color-canvas-subtle)","var(--color-neutral-subtle)","var(--color-canvas-subtle)","var(--color-select-menu-tap-focus-bg)","var(--color-canvas-subtle)","var(--color-canvas-subtle)"],"max-height":["66%","480px","none","480px"],"margin":["auto 0","8px 0 16px 0","-16px","-8px -7px","0","0","0"],"overflow":["hidden","hidden"],"border":["1px solid var(--color-select-menu-backdrop-border)","0","0","0","1px solid transparent"],"border-radius":["12px","6px"],"box-shadow":["var(--color-shadow-large)","var(--color-shadow-large)","inset 0 -1px 0 var(--color-border-muted)","inset 0 -1px 0 var(--color-border-muted)","0 0 0 1px var(--color-border-muted)","none"],"animation":["SelectMenu-modal-animation .12s cubic-bezier(0, 0.1, 0.1, 1) backwards"],"opacity":["0","0"],"transform":["scale(0.9)","translateY(-16px)","scale(0)","scale(1)"],"width":["300px","100%","100%","16px"],"height":["auto","80%","auto"],"font-size":["12px","14px","inherit","14px","12px","12px","12px"],"border-color":["var(--color-border-default)","var(--color-border-muted)"],"animation-name":["SelectMenu-modal-animation--sm"],"flex":["none","1","auto","1","none"],"align-items":["center","center"],"border-bottom":["1px solid var(--color-border-muted)","1px solid var(--color-border-muted)","1px solid var(--color-border-muted)","0","1px solid var(--color-border-muted)","1px solid var(--color-border-muted)"],"font-weight":["600","500","500","500"],"line-height":["1"],"color":["var(--color-fg-muted)","var(--color-fg-default)","var(--color-fg-muted)","var(--color-fg-default)","var(--color-fg-muted)","var(--color-fg-muted)","var(--color-fg-default)","var(--color-primer-fg-disabled)","var(--color-fg-default)","var(--color-fg-muted)","var(--color-fg-default)","var(--color-fg-default)"],"margin-bottom":["-1px"],"overflow-x":["hidden","auto"],"overflow-y":["auto","hidden"],"-webkit-overflow-scrolling":["touch","touch"],"text-align":["left","center","center","center","center"],"cursor":["pointer","default"],"padding-top":["7px"],"padding-bottom":["7px"],"margin-right":["8px"],"flex-shrink":["0","0"],"visibility":["hidden","visible"],"transition":["transform .12s cubic-bezier(0.5, 0.1, 1, 0.5),visibility 0s .12s linear","transform .12s cubic-bezier(0, 0, 0.2, 1),visibility 0s linear"],"border-bottom-width":["0"],"border-top-left-radius":["6px"],"border-top-right-radius":["6px"],"border-top":["1px solid var(--color-border-muted)","0","1px solid var(--color-border-muted)"],"margin-top":["0","8px"],"outline":["0"],"text-decoration":["none"],"-webkit-tap-highlight-color":["var(--color-select-menu-tap-highlight)"]}},"mediaQueries":{"total":16,"unique":3,"values":["(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(hover: hover)","(hover: none)"],"contents":[{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[6],"max":6,"average":6},"selectorByRuleSizes":[{"selector":".SelectMenu","declarations":6}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu"],"specificity":{"max":10,"average":10}},"declarations":{"total":6,"unique":6,"uniqueToTotalRatio":1,"properties":{"position":["absolute"],"top":["auto"],"right":["auto"],"bottom":["auto"],"left":["auto"],"padding":["0"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu::before","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":1,"values":[".SelectMenu::before"],"specificity":{"max":11,"average":11}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"display":["none"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[9],"max":9,"average":9},"selectorByRuleSizes":[{"selector":".SelectMenu-modal","declarations":9}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-modal"],"specificity":{"max":10,"average":10}},"declarations":{"total":9,"unique":9,"uniqueToTotalRatio":1,"properties":{"width":["300px"],"height":["auto"],"max-height":["480px"],"margin":["8px 0 16px 0"],"font-size":["12px"],"border-color":["var(--color-border-default)"],"border-radius":["6px"],"box-shadow":["var(--color-shadow-large)"],"animation-name":["SelectMenu-modal-animation--sm"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-header","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-header"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"padding":["7px 7px 7px 16px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-title","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-title"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"font-size":["inherit"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[2],"max":2,"average":2},"selectorByRuleSizes":[{"selector":".SelectMenu-closeButton","declarations":2}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-closeButton"],"specificity":{"max":10,"average":10}},"declarations":{"total":2,"unique":2,"uniqueToTotalRatio":1,"properties":{"padding":["8px"],"margin":["-8px -7px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-filter","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-filter"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"padding":["8px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-input","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-input"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"font-size":["14px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[2],"max":2,"average":2},"selectorByRuleSizes":[{"selector":".SelectMenu-item","declarations":2}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-item"],"specificity":{"max":10,"average":10}},"declarations":{"total":2,"unique":2,"uniqueToTotalRatio":1,"properties":{"padding-top":["7px"],"padding-bottom":["7px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-tabs","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-tabs"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"padding":["8px 8px 0 8px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[6],"max":6,"average":6},"selectorByRuleSizes":[{"selector":".SelectMenu-tab","declarations":6}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-tab"],"specificity":{"max":10,"average":10}},"declarations":{"total":6,"unique":6,"uniqueToTotalRatio":1,"properties":{"flex":["none"],"padding":["4px 16px"],"border":["1px solid transparent"],"border-bottom-width":["0"],"border-top-left-radius":["6px"],"border-top-right-radius":["6px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[2],"max":2,"average":2},"selectorByRuleSizes":[{"selector":".SelectMenu-tab[aria-selected=true]","declarations":2}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-tab[aria-selected=true]"],"specificity":{"max":20,"average":20}},"declarations":{"total":2,"unique":2,"uniqueToTotalRatio":1,"properties":{"border-color":["var(--color-border-muted)"],"box-shadow":["none"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-footer","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-footer"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"padding":["7px 16px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[3],"max":3,"average":3},"selectorByRuleSizes":[{"selector":".SelectMenu--hasFilter .SelectMenu-modal","declarations":3}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu--hasFilter .SelectMenu-modal"],"specificity":{"max":20,"average":20}},"declarations":{"total":3,"unique":3,"uniqueToTotalRatio":1,"properties":{"height":["auto"],"max-height":["480px"],"margin-top":["8px"]}}},{"value":"(hover: hover)","rules":{"total":7,"size":{"graph":[1,1,1,1,1,1,2],"max":2,"average":1.1428571428571428},"selectorByRuleSizes":[{"selector":",.SelectMenu-tab:not([aria-selected=true]):active","declarations":2},{"selector":",.SelectMenu-tab:hover","declarations":1},{"selector":",body:not(.intent-mouse) .SelectMenu-tab:focus","declarations":1},{"selector":",.SelectMenu-item:active","declarations":1},{"selector":",body:not(.intent-mouse) .SelectMenu-item:focus,.SelectMenu-item:hover","declarations":1},{"selector":",.SelectMenu-closeButton:active","declarations":1},{"selector":"body:not(.intent-mouse) .SelectMenu-closeButton:focus,.SelectMenu-closeButton:hover","declarations":1}]},"selectors":{"total":9,"type":3,"class":9,"id":0,"pseudoClass":9,"pseudoElement":0,"values":["body:not(.intent-mouse) .SelectMenu-closeButton:focus",".SelectMenu-closeButton:hover",".SelectMenu-closeButton:active","body:not(.intent-mouse) .SelectMenu-item:focus",".SelectMenu-item:hover",".SelectMenu-item:active","body:not(.intent-mouse) .SelectMenu-tab:focus",".SelectMenu-tab:hover",".SelectMenu-tab:not([aria-selected=true]):active"],"specificity":{"max":31,"average":24.77777777777778}},"declarations":{"total":8,"unique":5,"uniqueToTotalRatio":0.625,"properties":{"color":["var(--color-fg-default)","var(--color-fg-muted)","var(--color-fg-default)","var(--color-fg-default)"],"background-color":["var(--color-neutral-subtle)","var(--color-canvas-subtle)","var(--color-select-menu-tap-focus-bg)","var(--color-canvas-subtle)"]}}},{"value":"(hover: none)","rules":{"total":2,"size":{"graph":[1,1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":",.SelectMenu-item","declarations":1},{"selector":".SelectMenu-item:focus,.SelectMenu-item:active","declarations":1}]},"selectors":{"total":3,"type":0,"class":3,"id":0,"pseudoClass":2,"pseudoElement":0,"values":[".SelectMenu-item:focus",".SelectMenu-item:active",".SelectMenu-item"],"specificity":{"max":20,"average":16.666666666666668}},"declarations":{"total":2,"unique":2,"uniqueToTotalRatio":1,"properties":{"background-color":["var(--color-canvas-subtle)"],"-webkit-tap-highlight-color":["var(--color-select-menu-tap-highlight)"]}}}]}}
|
|
1
|
+
{"size":6162,"gzipSize":1460,"humanizedSize":"6KB","humanizedGzipSize":"1KB","rules":{"total":54,"size":{"graph":[10,6,8,1,13,2,2,9,5,1,3,1,6,2,3,1,2,1,9,11,2,1,3,3,6,1,1,9,6,5,2,4,3,7,1,2,6,1,3,3,1,1,2,3,2,1,1,1,1,1,1,2,1,1],"max":13,"average":3.4074074074074074},"selectorByRuleSizes":[{"selector":".SelectMenu-modal","declarations":13},{"selector":".SelectMenu-item","declarations":11},{"selector":".SelectMenu","declarations":10},{"selector":".SelectMenu-tab","declarations":9},{"selector":".SelectMenu-list","declarations":9},{"selector":".SelectMenu-modal","declarations":9},{"selector":".SelectMenu::before","declarations":8},{"selector":".SelectMenu-divider","declarations":7},{"selector":".SelectMenu-footer","declarations":6},{"selector":".SelectMenu-tab","declarations":6},{"selector":".SelectMenu-tabs","declarations":6},{"selector":".SelectMenu-closeButton","declarations":6},{"selector":".SelectMenu","declarations":6},{"selector":".SelectMenu-tab[aria-selected=true]","declarations":5},{"selector":".SelectMenu-header","declarations":5},{"selector":".SelectMenu-message","declarations":4},{"selector":".SelectMenu-item[aria-checked=true] .SelectMenu-icon--check","declarations":3},{"selector":".SelectMenu--hasFilter .SelectMenu-modal","declarations":3},{"selector":".SelectMenu--hasFilter .SelectMenu-modal","declarations":3},{"selector":".SelectMenu-blankslate,.SelectMenu-loading","declarations":3},{"selector":".SelectMenu-icon--check","declarations":3},{"selector":".SelectMenu-icon","declarations":3},{"selector":".SelectMenu-filter","declarations":3},{"selector":".SelectMenu-title","declarations":3},{"selector":".SelectMenu-tab:not([aria-selected=true]):active","declarations":2},{"selector":".SelectMenu-item:disabled,.SelectMenu-item[aria-disabled=true]","declarations":2},{"selector":".SelectMenu-item[aria-checked=true]","declarations":2},{"selector":".SelectMenu-list--borderless .SelectMenu-divider:empty","declarations":2},{"selector":".SelectMenu-tab[aria-selected=true]","declarations":2},{"selector":".SelectMenu-item","declarations":2},{"selector":".SelectMenu-input","declarations":2},{"selector":".SelectMenu-closeButton","declarations":2},{"selector":"0%","declarations":2},{"selector":"0%","declarations":2},{"selector":".SelectMenu-item","declarations":1},{"selector":".SelectMenu-item:focus,.SelectMenu-item:active","declarations":1},{"selector":".SelectMenu-tab:hover","declarations":1},{"selector":"body:not(.intent-mouse) .SelectMenu-tab:focus","declarations":1},{"selector":".SelectMenu-item:active","declarations":1},{"selector":"body:not(.intent-mouse) .SelectMenu-item:focus,.SelectMenu-item:hover","declarations":1},{"selector":".SelectMenu-closeButton:active","declarations":1},{"selector":"body:not(.intent-mouse) .SelectMenu-closeButton:focus,.SelectMenu-closeButton:hover","declarations":1},{"selector":".SelectMenu-item:hover","declarations":1},{"selector":".SelectMenu-tab:focus,.SelectMenu-item:focus","declarations":1},{"selector":".SelectMenu-footer","declarations":1},{"selector":".SelectMenu-list--borderless .SelectMenu-divider","declarations":1},{"selector":".SelectMenu-tabs","declarations":1},{"selector":".SelectMenu-tabs::-webkit-scrollbar","declarations":1},{"selector":".SelectMenu-list--borderless .SelectMenu-item","declarations":1},{"selector":".SelectMenu-input","declarations":1},{"selector":".SelectMenu-filter","declarations":1},{"selector":".SelectMenu-title","declarations":1},{"selector":".SelectMenu-header","declarations":1},{"selector":".SelectMenu::before","declarations":1}]},"selectors":{"total":58,"type":3,"class":58,"id":0,"pseudoClass":16,"pseudoElement":2,"values":[".SelectMenu",".SelectMenu",".SelectMenu::before",".SelectMenu::before",".SelectMenu-modal",".SelectMenu-modal",".SelectMenu-header",".SelectMenu-header",".SelectMenu-title",".SelectMenu-title",".SelectMenu-closeButton",".SelectMenu-closeButton",".SelectMenu-filter",".SelectMenu-filter",".SelectMenu-input",".SelectMenu-input",".SelectMenu-list",".SelectMenu-item",".SelectMenu-item",".SelectMenu-list--borderless .SelectMenu-item",".SelectMenu-icon",".SelectMenu-icon--check",".SelectMenu-tabs",".SelectMenu-tabs::-webkit-scrollbar",".SelectMenu-tabs",".SelectMenu-tab",".SelectMenu-tab",".SelectMenu-tab[aria-selected=true]",".SelectMenu-tab[aria-selected=true]",".SelectMenu-message",".SelectMenu-blankslate",".SelectMenu-loading",".SelectMenu-divider",".SelectMenu-list--borderless .SelectMenu-divider",".SelectMenu-list--borderless .SelectMenu-divider:empty",".SelectMenu-footer",".SelectMenu-footer",".SelectMenu--hasFilter .SelectMenu-modal",".SelectMenu--hasFilter .SelectMenu-modal",".SelectMenu-tab:focus",".SelectMenu-item:focus",".SelectMenu-item:hover",".SelectMenu-item[aria-checked=true]",".SelectMenu-item[aria-checked=true] .SelectMenu-icon--check",".SelectMenu-item:disabled",".SelectMenu-item[aria-disabled=true]","body:not(.intent-mouse) .SelectMenu-closeButton:focus",".SelectMenu-closeButton:hover",".SelectMenu-closeButton:active","body:not(.intent-mouse) .SelectMenu-item:focus",".SelectMenu-item:hover",".SelectMenu-item:active","body:not(.intent-mouse) .SelectMenu-tab:focus",".SelectMenu-tab:hover",".SelectMenu-tab:not([aria-selected=true]):active",".SelectMenu-item:focus",".SelectMenu-item:active",".SelectMenu-item"],"specificity":{"max":31,"average":15.448275862068966}},"declarations":{"total":184,"unique":111,"uniqueToTotalRatio":0.6032608695652174,"properties":{"position":["fixed","absolute","absolute","relative","relative"],"top":["0","auto","0"],"right":["0","auto","0"],"bottom":["0","auto","0"],"left":["0","auto","0"],"z-index":["99","99","1","0"],"display":["flex","none","flex","flex","block","flex","flex","none"],"padding":["16px","0","16px","7px 7px 7px 16px","16px","8px","16px","8px","0","16px","8px 8px 0 8px","8px 16px","4px 16px","7px 16px","24px 16px","4px 16px","0","8px 16px","7px 16px"],"pointer-events":["none","none","auto","none"],"flex-direction":["column","column"],"content":["\"\""],"background-color":["var(--color-primer-canvas-backdrop)","var(--color-canvas-overlay)","transparent","var(--color-canvas-overlay)","var(--color-canvas-overlay)","transparent","var(--color-canvas-overlay)","var(--color-canvas-overlay)","var(--color-canvas-overlay)","var(--color-canvas-subtle)","var(--color-neutral-subtle)","var(--color-canvas-subtle)","var(--color-select-menu-tap-focus-bg)","var(--color-canvas-subtle)","var(--color-canvas-subtle)"],"max-height":["66%","480px","none","480px"],"margin":["auto 0","8px 0 16px 0","-16px","-8px -7px","0","0","0"],"overflow":["hidden","hidden"],"border":["1px solid var(--color-select-menu-backdrop-border)","0","0","0","1px solid transparent"],"border-radius":["12px","6px"],"box-shadow":["var(--color-shadow-large)","var(--color-shadow-large)","inset 0 -1px 0 var(--color-border-muted)","inset 0 -1px 0 var(--color-border-muted)","0 0 0 1px var(--color-border-muted)","none"],"animation":["SelectMenu-modal-animation .12s cubic-bezier(0, 0.1, 0.1, 1) backwards"],"opacity":["0","0"],"transform":["scale(0.9)","translateY(-16px)","scale(0)","scale(1)"],"width":["300px","100%","100%","16px"],"height":["auto","80%","auto"],"font-size":["12px","14px","inherit","14px","12px","12px","12px"],"border-color":["var(--color-border-default)","var(--color-border-muted)"],"animation-name":["SelectMenu-modal-animation--sm"],"flex":["none","1","auto","1","none"],"align-items":["center","center"],"border-bottom":["1px solid var(--color-border-muted)","1px solid var(--color-border-muted)","1px solid var(--color-border-muted)","0","1px solid var(--color-border-muted)","1px solid var(--color-border-muted)"],"font-weight":["600","500","500","500"],"line-height":["1"],"color":["var(--color-fg-muted)","var(--color-fg-default)","var(--color-fg-muted)","var(--color-fg-default)","var(--color-fg-muted)","var(--color-fg-muted)","var(--color-fg-default)","var(--color-primer-fg-disabled)","var(--color-fg-default)","var(--color-fg-muted)","var(--color-fg-default)","var(--color-fg-default)"],"margin-bottom":["-1px"],"overflow-x":["hidden","auto"],"overflow-y":["auto","hidden"],"-webkit-overflow-scrolling":["touch","touch"],"text-align":["left","center","center","center","center"],"cursor":["pointer","default"],"padding-top":["7px"],"padding-bottom":["7px"],"margin-right":["8px"],"flex-shrink":["0","0"],"visibility":["hidden","visible"],"transition":["transform .12s cubic-bezier(0.5, 0.1, 1, 0.5),visibility 0s .12s linear","transform .12s cubic-bezier(0, 0, 0.2, 1),visibility 0s linear"],"border-bottom-width":["0"],"border-top-left-radius":["6px"],"border-top-right-radius":["6px"],"border-top":["1px solid var(--color-border-muted)","0","1px solid var(--color-border-muted)"],"margin-top":["0","8px"],"outline":["0"],"text-decoration":["none"],"-webkit-tap-highlight-color":["var(--color-select-menu-tap-highlight)"]}},"mediaQueries":{"total":16,"unique":3,"values":["(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(min-width: 544px)","(hover: hover)","(hover: none)"],"contents":[{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[6],"max":6,"average":6},"selectorByRuleSizes":[{"selector":".SelectMenu","declarations":6}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu"],"specificity":{"max":10,"average":10}},"declarations":{"total":6,"unique":6,"uniqueToTotalRatio":1,"properties":{"position":["absolute"],"top":["auto"],"right":["auto"],"bottom":["auto"],"left":["auto"],"padding":["0"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu::before","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":1,"values":[".SelectMenu::before"],"specificity":{"max":11,"average":11}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"display":["none"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[9],"max":9,"average":9},"selectorByRuleSizes":[{"selector":".SelectMenu-modal","declarations":9}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-modal"],"specificity":{"max":10,"average":10}},"declarations":{"total":9,"unique":9,"uniqueToTotalRatio":1,"properties":{"width":["300px"],"height":["auto"],"max-height":["480px"],"margin":["8px 0 16px 0"],"font-size":["12px"],"border-color":["var(--color-border-default)"],"border-radius":["6px"],"box-shadow":["var(--color-shadow-large)"],"animation-name":["SelectMenu-modal-animation--sm"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-header","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-header"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"padding":["7px 7px 7px 16px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-title","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-title"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"font-size":["inherit"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[2],"max":2,"average":2},"selectorByRuleSizes":[{"selector":".SelectMenu-closeButton","declarations":2}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-closeButton"],"specificity":{"max":10,"average":10}},"declarations":{"total":2,"unique":2,"uniqueToTotalRatio":1,"properties":{"padding":["8px"],"margin":["-8px -7px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-filter","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-filter"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"padding":["8px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-input","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-input"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"font-size":["14px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[2],"max":2,"average":2},"selectorByRuleSizes":[{"selector":".SelectMenu-item","declarations":2}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-item"],"specificity":{"max":10,"average":10}},"declarations":{"total":2,"unique":2,"uniqueToTotalRatio":1,"properties":{"padding-top":["7px"],"padding-bottom":["7px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-tabs","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-tabs"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"padding":["8px 8px 0 8px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[6],"max":6,"average":6},"selectorByRuleSizes":[{"selector":".SelectMenu-tab","declarations":6}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-tab"],"specificity":{"max":10,"average":10}},"declarations":{"total":6,"unique":6,"uniqueToTotalRatio":1,"properties":{"flex":["none"],"padding":["4px 16px"],"border":["1px solid transparent"],"border-bottom-width":["0"],"border-top-left-radius":["6px"],"border-top-right-radius":["6px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[2],"max":2,"average":2},"selectorByRuleSizes":[{"selector":".SelectMenu-tab[aria-selected=true]","declarations":2}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-tab[aria-selected=true]"],"specificity":{"max":20,"average":20}},"declarations":{"total":2,"unique":2,"uniqueToTotalRatio":1,"properties":{"border-color":["var(--color-border-muted)"],"box-shadow":["none"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".SelectMenu-footer","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu-footer"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"padding":["7px 16px"]}}},{"value":"(min-width: 544px)","rules":{"total":1,"size":{"graph":[3],"max":3,"average":3},"selectorByRuleSizes":[{"selector":".SelectMenu--hasFilter .SelectMenu-modal","declarations":3}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SelectMenu--hasFilter .SelectMenu-modal"],"specificity":{"max":20,"average":20}},"declarations":{"total":3,"unique":3,"uniqueToTotalRatio":1,"properties":{"height":["auto"],"max-height":["480px"],"margin-top":["8px"]}}},{"value":"(hover: hover)","rules":{"total":7,"size":{"graph":[1,1,1,1,1,1,2],"max":2,"average":1.1428571428571428},"selectorByRuleSizes":[{"selector":",.SelectMenu-tab:not([aria-selected=true]):active","declarations":2},{"selector":",.SelectMenu-tab:hover","declarations":1},{"selector":",body:not(.intent-mouse) .SelectMenu-tab:focus","declarations":1},{"selector":",.SelectMenu-item:active","declarations":1},{"selector":",body:not(.intent-mouse) .SelectMenu-item:focus,.SelectMenu-item:hover","declarations":1},{"selector":",.SelectMenu-closeButton:active","declarations":1},{"selector":"body:not(.intent-mouse) .SelectMenu-closeButton:focus,.SelectMenu-closeButton:hover","declarations":1}]},"selectors":{"total":9,"type":3,"class":9,"id":0,"pseudoClass":9,"pseudoElement":0,"values":["body:not(.intent-mouse) .SelectMenu-closeButton:focus",".SelectMenu-closeButton:hover",".SelectMenu-closeButton:active","body:not(.intent-mouse) .SelectMenu-item:focus",".SelectMenu-item:hover",".SelectMenu-item:active","body:not(.intent-mouse) .SelectMenu-tab:focus",".SelectMenu-tab:hover",".SelectMenu-tab:not([aria-selected=true]):active"],"specificity":{"max":31,"average":24.77777777777778}},"declarations":{"total":8,"unique":5,"uniqueToTotalRatio":0.625,"properties":{"color":["var(--color-fg-default)","var(--color-fg-muted)","var(--color-fg-default)","var(--color-fg-default)"],"background-color":["var(--color-neutral-subtle)","var(--color-canvas-subtle)","var(--color-select-menu-tap-focus-bg)","var(--color-canvas-subtle)"]}}},{"value":"(hover: none)","rules":{"total":2,"size":{"graph":[1,1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":",.SelectMenu-item","declarations":1},{"selector":".SelectMenu-item:focus,.SelectMenu-item:active","declarations":1}]},"selectors":{"total":3,"type":0,"class":3,"id":0,"pseudoClass":2,"pseudoElement":0,"values":[".SelectMenu-item:focus",".SelectMenu-item:active",".SelectMenu-item"],"specificity":{"max":20,"average":16.666666666666668}},"declarations":{"total":2,"unique":2,"uniqueToTotalRatio":1,"properties":{"background-color":["var(--color-canvas-subtle)"],"-webkit-tap-highlight-color":["var(--color-select-menu-tap-highlight)"]}}}]}}
|
package/forms/FormControl.scss
CHANGED
|
@@ -133,6 +133,10 @@
|
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
+
&[readonly] {
|
|
137
|
+
background-color: var(--color-input-disabled-bg);
|
|
138
|
+
}
|
|
139
|
+
|
|
136
140
|
::placeholder {
|
|
137
141
|
color: var(--color-fg-subtle);
|
|
138
142
|
opacity: 1;
|
|
@@ -161,6 +165,11 @@
|
|
|
161
165
|
|
|
162
166
|
&.FormControl-inset {
|
|
163
167
|
background-color: var(--color-canvas-inset);
|
|
168
|
+
|
|
169
|
+
&:focus-visible,
|
|
170
|
+
&:focus {
|
|
171
|
+
background-color: var(--color-canvas-default);
|
|
172
|
+
}
|
|
164
173
|
}
|
|
165
174
|
|
|
166
175
|
&.FormControl-monospace {
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.SegmentedControl{display:inline-flex;list-style:none;background-color:var(--color-segmented-control-bg);border-radius:var(--primer-borderRadius-medium, 6px);box-shadow:var(--primer-borderInset-thin, inset 0 0 0 1px) var(--color-border-default)}.SegmentedControl li{position:relative;display:inline-flex}.SegmentedControl-button{position:relative;display:inline-flex;height:var(--primer-control-medium-size, 32px);padding:calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));font-size:var(--primer-text-body-size-medium, 14px);color:var(--color-fg-default);background-color:transparent;border:var(--primer-borderWidth-thin, 1px) solid transparent;border-radius:var(--primer-borderRadius-medium, 6px)}.SegmentedControl-button[aria-current=false]:hover .SegmentedControl-content{background-color:var(--color-segmented-control-button-hover-bg);transition-duration:var(--primer-duration-fast, 80ms)}.SegmentedControl-button[aria-current=false]:active .SegmentedControl-content{background-color:var(--color-segmented-control-button-active-bg);transition-duration:0}.SegmentedControl-button[aria-current=true]{font-weight:var(--base-text-weight-semibold, 600);background-color:var(--color-btn-bg);border-color:var(--color-segmented-control-button-selected-border)}.SegmentedControl-button+.SegmentedControl-button::before{position:absolute;inset:var(--primer-borderWidth-thin, 1px) 0 0 calc(var(--primer-borderWidth-thin, 1px)*-1);height:var(--primer-text-body-size-large, 16px);margin-top:var(--primer-control-medium-paddingBlock, 6px);content:"";border-left:var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);transition:border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1)}.SegmentedControl-button[aria-current=true]::before,.SegmentedControl-button[aria-current=true]+.SegmentedControl-button::before{border-color:transparent}.SegmentedControl-content{display:flex;align-items:center;justify-content:center;gap:var(--primer-control-medium-gap, 8px);height:100%;padding:0 var(--primer-control-medium-paddingInline-condensed, 8px);border-radius:var(--primer-borderRadius-medium, 6px);transition:background-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1)}.SegmentedControl-leadingVisual{color:var(--color-fg-muted)}.SegmentedControl-text{white-space:nowrap}.SegmentedControl-text[data-content]::before{display:block;height:0;font-weight:var(--base-text-weight-semibold, 600);visibility:hidden;content:attr(data-content)}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-button,.SegmentedControl--fullWidth li{flex:1;justify-content:center}.SegmentedControl-button--iconOnly{width:var(--primer-control-medium-size, 32px)}.SegmentedControl-button--iconOnly .SegmentedControl-content{padding:0;flex:1}@media(max-width: 768px){.SegmentedControl-button--iconOnly-whenNarrow{width:var(--primer-control-medium-size, 32px)}.SegmentedControl-button--iconOnly-whenNarrow .SegmentedControl-content{padding:0;flex:1}.SegmentedControl-button--iconOnly-whenNarrow .SegmentedControl-text{display:none}}@media(pointer: coarse){.SegmentedControl-button{min-width:var(--primer-control-minTarget-coarse, 44px)}.SegmentedControl-button::after{position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:var(--primer-control-minTarget-coarse, 44px);content:"";transform:translateX(-50%) translateY(-50%)}.SegmentedControl-button--iconOnly,.SegmentedControl-button--iconOnly-whenNarrow{min-width:unset}}
|
|
2
|
-
/*# sourceMappingURL=segmented-control.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["file:///home/runner/work/css/css/src/segmented-control/index.scss%23sass"],"names":[],"mappings":"AAojBA,kBAAA,mBAAA,CAAA,eAAA,CAAA,kDAAA,CAAA,oDAAA,CAAA,sFAAA,CAAA,qBAAA,iBAAA,CAAA,mBAAA,CAAA,yBAAA,iBAAA,CAAA,mBAAA,CAAA,8CAAA,CAAA,6GAAA,CAAA,mDAAA,CAAA,6BAAA,CAAA,4BAAA,CAAA,4DAAA,CAAA,oDAAA,CAAA,6EAAA,+DAAA,CAAA,qDAAA,CAAA,8EAAA,gEAAA,CAAA,qBAAA,CAAA,4CAAA,iDAAA,CAAA,oCAAA,CAAA,kEAAA,CAAA,0DAAA,iBAAA,CAAA,0FAAA,CAAA,+CAAA,CAAA,yDAAA,CAAA,UAAA,CAAA,iFAAA,CAAA,2FAAA,CAAA,iIAAA,wBAAA,CAAA,0BAAA,YAAA,CAAA,kBAAA,CAAA,sBAAA,CAAA,yCAAA,CAAA,WAAA,CAAA,mEAAA,CAAA,oDAAA,CAAA,+FAAA,CAAA,gCAAA,2BAAA,CAAA,uBAAA,kBAAA,CAAA,6CAAA,aAAA,CAAA,QAAA,CAAA,iDAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,6BAAA,YAAA,CAAA,sFAAA,MAAA,CAAA,sBAAA,CAAA,mCAAA,6CAAA,CAAA,6DAAA,SAAA,CAAA,MAAA,CAAA,yBAAA,8CAAA,6CAAA,CAAA,wEAAA,SAAA,CAAA,MAAA,CAAA,qEAAA,YAAA,CAAA,CAAA,wBAAA,yBAAA,sDAAA,CAAA,gCAAA,iBAAA,CAAA,OAAA,CAAA,QAAA,CAAA,UAAA,CAAA,WAAA,CAAA,uDAAA,CAAA,UAAA,CAAA,2CAAA,CAAA,iFAAA,eAAA,CAAA","file":"segmented-control.css"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {cssstats: require('./stats/segmented-control.json')}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"size":2646,"gzipSize":782,"humanizedSize":"3KB","humanizedGzipSize":"782B","rules":{"total":22,"size":{"graph":[5,2,9,2,2,3,7,1,8,1,1,5,1,2,1,2,1,2,1,1,8,1],"max":9,"average":3},"selectorByRuleSizes":[{"selector":".SegmentedControl-button","declarations":9},{"selector":".SegmentedControl-button::after","declarations":8},{"selector":".SegmentedControl-content","declarations":8},{"selector":".SegmentedControl-button+.SegmentedControl-button::before","declarations":7},{"selector":".SegmentedControl-text[data-content]::before","declarations":5},{"selector":".SegmentedControl","declarations":5},{"selector":".SegmentedControl-button[aria-current=true]","declarations":3},{"selector":".SegmentedControl-button--iconOnly-whenNarrow .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl-button--iconOnly .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl--fullWidth .SegmentedControl-button,.SegmentedControl--fullWidth li","declarations":2},{"selector":".SegmentedControl-button[aria-current=false]:active .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl-button[aria-current=false]:hover .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl li","declarations":2},{"selector":".SegmentedControl-button--iconOnly,.SegmentedControl-button--iconOnly-whenNarrow","declarations":1},{"selector":".SegmentedControl-button","declarations":1},{"selector":".SegmentedControl-button--iconOnly-whenNarrow .SegmentedControl-text","declarations":1},{"selector":".SegmentedControl-button--iconOnly-whenNarrow","declarations":1},{"selector":".SegmentedControl-button--iconOnly","declarations":1},{"selector":".SegmentedControl--fullWidth","declarations":1},{"selector":".SegmentedControl-text","declarations":1},{"selector":".SegmentedControl-leadingVisual","declarations":1},{"selector":".SegmentedControl-button[aria-current=true]::before,.SegmentedControl-button[aria-current=true]+.SegmentedControl-button::before","declarations":1}]},"selectors":{"total":25,"type":2,"class":25,"id":0,"pseudoClass":2,"pseudoElement":5,"values":[".SegmentedControl",".SegmentedControl li",".SegmentedControl-button",".SegmentedControl-button[aria-current=false]:hover .SegmentedControl-content",".SegmentedControl-button[aria-current=false]:active .SegmentedControl-content",".SegmentedControl-button[aria-current=true]",".SegmentedControl-button+.SegmentedControl-button::before",".SegmentedControl-button[aria-current=true]::before",".SegmentedControl-button[aria-current=true]+.SegmentedControl-button::before",".SegmentedControl-content",".SegmentedControl-leadingVisual",".SegmentedControl-text",".SegmentedControl-text[data-content]::before",".SegmentedControl--fullWidth",".SegmentedControl--fullWidth .SegmentedControl-button",".SegmentedControl--fullWidth li",".SegmentedControl-button--iconOnly",".SegmentedControl-button--iconOnly .SegmentedControl-content",".SegmentedControl-button--iconOnly-whenNarrow",".SegmentedControl-button--iconOnly-whenNarrow .SegmentedControl-content",".SegmentedControl-button--iconOnly-whenNarrow .SegmentedControl-text",".SegmentedControl-button",".SegmentedControl-button::after",".SegmentedControl-button--iconOnly",".SegmentedControl-button--iconOnly-whenNarrow"],"specificity":{"max":40,"average":16.68}},"declarations":{"total":66,"unique":51,"uniqueToTotalRatio":0.7727272727272727,"properties":{"display":["inline-flex","inline-flex","inline-flex","flex","block","flex","none"],"list-style":["none"],"background-color":["var(--color-segmented-control-bg)","transparent","var(--color-segmented-control-button-hover-bg)","var(--color-segmented-control-button-active-bg)","var(--color-btn-bg)"],"border-radius":["6px","6px","6px"],"box-shadow":["inset 0 0 0 1px var(--color-border-default)"],"position":["relative","relative","absolute","absolute"],"height":["32px","16px","100%","0","100%"],"padding":["calc(4px - 1px)","0 8px","0","0"],"font-size":["14px"],"color":["var(--color-fg-default)","var(--color-fg-muted)"],"border":["1px solid transparent"],"transition-duration":["80ms","0"],"font-weight":["600","600"],"border-color":["var(--color-segmented-control-button-selected-border)","transparent"],"inset":["1px 0 0 calc(1px*-1)"],"margin-top":["6px"],"content":["\"\"","attr(data-content)","\"\""],"border-left":["1px solid var(--color-border-default)"],"transition":["border-color 160ms cubic-bezier(0.3, 0.1, 0.5, 1)","background-color 160ms cubic-bezier(0.3, 0.1, 0.5, 1)"],"align-items":["center"],"justify-content":["center","center"],"gap":["8px"],"white-space":["nowrap"],"visibility":["hidden"],"flex":["1","1","1"],"width":["32px","32px","100%"],"min-width":["44px","unset"],"top":["50%"],"left":["50%"],"min-height":["44px"],"transform":["translateX(-50%) translateY(-50%)"]}},"mediaQueries":{"total":2,"unique":2,"values":["(max-width: 768px)","(pointer: coarse)"],"contents":[{"value":"(max-width: 768px)","rules":{"total":3,"size":{"graph":[1,2,1],"max":2,"average":1.3333333333333333},"selectorByRuleSizes":[{"selector":",.SegmentedControl-button--iconOnly-whenNarrow .SegmentedControl-content","declarations":2},{"selector":",.SegmentedControl-button--iconOnly-whenNarrow .SegmentedControl-text","declarations":1},{"selector":".SegmentedControl-button--iconOnly-whenNarrow","declarations":1}]},"selectors":{"total":3,"type":0,"class":3,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SegmentedControl-button--iconOnly-whenNarrow",".SegmentedControl-button--iconOnly-whenNarrow .SegmentedControl-content",".SegmentedControl-button--iconOnly-whenNarrow .SegmentedControl-text"],"specificity":{"max":20,"average":16.666666666666668}},"declarations":{"total":4,"unique":4,"uniqueToTotalRatio":1,"properties":{"width":["32px"],"padding":["0"],"flex":["1"],"display":["none"]}}},{"value":"(pointer: coarse)","rules":{"total":3,"size":{"graph":[1,8,1],"max":8,"average":3.3333333333333335},"selectorByRuleSizes":[{"selector":",.SegmentedControl-button::after","declarations":8},{"selector":",.SegmentedControl-button--iconOnly,.SegmentedControl-button--iconOnly-whenNarrow","declarations":1},{"selector":".SegmentedControl-button","declarations":1}]},"selectors":{"total":4,"type":0,"class":4,"id":0,"pseudoClass":0,"pseudoElement":1,"values":[".SegmentedControl-button",".SegmentedControl-button::after",".SegmentedControl-button--iconOnly",".SegmentedControl-button--iconOnly-whenNarrow"],"specificity":{"max":11,"average":10.25}},"declarations":{"total":10,"unique":10,"uniqueToTotalRatio":1,"properties":{"min-width":["44px","unset"],"position":["absolute"],"top":["50%"],"left":["50%"],"width":["100%"],"height":["100%"],"min-height":["44px"],"content":["\"\""],"transform":["translateX(-50%) translateY(-50%)"]}}}]}}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
bundle: "segmented-control"
|
|
3
|
-
generated: true
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# Primer CSS: `segmented-control` bundle
|
|
7
|
-
|
|
8
|
-
## Usage
|
|
9
|
-
|
|
10
|
-
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
|
11
|
-
|
|
12
|
-
```scss
|
|
13
|
-
@import "@primer/css/segmented-control/index.scss";
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
## Build
|
|
17
|
-
|
|
18
|
-
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/segmented-control.css`.
|
|
19
|
-
|
|
20
|
-
## License
|
|
21
|
-
|
|
22
|
-
[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
[scss]: https://sass-lang.com/documentation/syntax#scss
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
// SegmentedControl
|
|
2
|
-
// stylelint-disable selector-max-type
|
|
3
|
-
|
|
4
|
-
.SegmentedControl {
|
|
5
|
-
display: inline-flex;
|
|
6
|
-
list-style: none;
|
|
7
|
-
background-color: var(--color-segmented-control-bg);
|
|
8
|
-
// stylelint-disable-next-line primer/borders
|
|
9
|
-
border-radius: var(--primer-borderRadius-medium, $border-radius);
|
|
10
|
-
// stylelint-disable-next-line primer/box-shadow
|
|
11
|
-
box-shadow: var(--primer-borderInset-thin, inset 0 0 0 $border-width) var(--color-border-default);
|
|
12
|
-
|
|
13
|
-
li {
|
|
14
|
-
position: relative;
|
|
15
|
-
display: inline-flex;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
// Button -----------------------------------------
|
|
20
|
-
|
|
21
|
-
.SegmentedControl-button {
|
|
22
|
-
position: relative;
|
|
23
|
-
display: inline-flex;
|
|
24
|
-
height: var(--primer-control-medium-size, 32px);
|
|
25
|
-
// stylelint-disable-next-line primer/spacing
|
|
26
|
-
padding: calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));
|
|
27
|
-
// stylelint-disable-next-line primer/typography
|
|
28
|
-
font-size: var(--primer-text-body-size-medium, $body-font-size);
|
|
29
|
-
color: var(--color-fg-default);
|
|
30
|
-
background-color: transparent;
|
|
31
|
-
// stylelint-disable-next-line primer/borders
|
|
32
|
-
border: var(--primer-borderWidth-thin, $border-width) $border-style transparent;
|
|
33
|
-
// stylelint-disable-next-line primer/borders
|
|
34
|
-
border-radius: var(--primer-borderRadius-medium, $border-radius);
|
|
35
|
-
|
|
36
|
-
&[aria-current='false']:hover .SegmentedControl-content {
|
|
37
|
-
background-color: var(--color-segmented-control-button-hover-bg);
|
|
38
|
-
transition-duration: var(--primer-duration-fast, 80ms);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
&[aria-current='false']:active .SegmentedControl-content {
|
|
42
|
-
background-color: var(--color-segmented-control-button-active-bg);
|
|
43
|
-
transition-duration: 0;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
// Selected
|
|
47
|
-
|
|
48
|
-
&[aria-current='true'] {
|
|
49
|
-
// stylelint-disable-next-line primer/typography
|
|
50
|
-
font-weight: var(--base-text-weight-semibold, $font-weight-bold);
|
|
51
|
-
background-color: var(--color-btn-bg);
|
|
52
|
-
border-color: var(--color-segmented-control-button-selected-border);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
// Divider
|
|
56
|
-
|
|
57
|
-
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
|
|
58
|
-
& + .SegmentedControl-button::before {
|
|
59
|
-
position: absolute;
|
|
60
|
-
inset: var(--primer-borderWidth-thin, 1px) 0 0 calc(var(--primer-borderWidth-thin, 1px) * -1);
|
|
61
|
-
height: var(--primer-text-body-size-large, 16px);
|
|
62
|
-
// stylelint-disable-next-line primer/spacing
|
|
63
|
-
margin-top: var(--primer-control-medium-paddingBlock, 6px);
|
|
64
|
-
content: '';
|
|
65
|
-
// stylelint-disable-next-line primer/borders
|
|
66
|
-
border-left: var(--primer-borderWidth-thin, $border-width) $border-style var(--color-border-default);
|
|
67
|
-
transition: border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
&[aria-current='true']::before,
|
|
71
|
-
&[aria-current='true'] + .SegmentedControl-button::before {
|
|
72
|
-
border-color: transparent;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
// Content -----------------------------------------
|
|
77
|
-
|
|
78
|
-
.SegmentedControl-content {
|
|
79
|
-
display: flex;
|
|
80
|
-
align-items: center;
|
|
81
|
-
justify-content: center;
|
|
82
|
-
gap: var(--primer-control-medium-gap, $spacer-2);
|
|
83
|
-
height: 100%;
|
|
84
|
-
// stylelint-disable-next-line primer/spacing
|
|
85
|
-
padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);
|
|
86
|
-
// stylelint-disable-next-line primer/borders
|
|
87
|
-
border-radius: var(--primer-borderRadius-medium, $border-radius);
|
|
88
|
-
transition: background-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// Leading visual -----------------------------------------
|
|
92
|
-
|
|
93
|
-
.SegmentedControl-leadingVisual {
|
|
94
|
-
color: var(--color-fg-muted);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
// Text -----------------------------------------
|
|
98
|
-
|
|
99
|
-
.SegmentedControl-text {
|
|
100
|
-
white-space: nowrap;
|
|
101
|
-
|
|
102
|
-
// renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected
|
|
103
|
-
&[data-content]::before {
|
|
104
|
-
display: block;
|
|
105
|
-
height: 0;
|
|
106
|
-
// stylelint-disable-next-line primer/typography
|
|
107
|
-
font-weight: var(--base-text-weight-semibold, $font-weight-bold);
|
|
108
|
-
visibility: hidden;
|
|
109
|
-
content: attr(data-content);
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
// Variants -----------------------------------------
|
|
114
|
-
|
|
115
|
-
// fullWidth
|
|
116
|
-
.SegmentedControl--fullWidth {
|
|
117
|
-
display: flex;
|
|
118
|
-
|
|
119
|
-
.SegmentedControl-button,
|
|
120
|
-
li {
|
|
121
|
-
flex: 1;
|
|
122
|
-
justify-content: center;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
// Icon only
|
|
127
|
-
.SegmentedControl-button--iconOnly {
|
|
128
|
-
width: var(--primer-control-medium-size, 32px);
|
|
129
|
-
|
|
130
|
-
.SegmentedControl-content {
|
|
131
|
-
padding: 0;
|
|
132
|
-
flex: 1;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
// Icon only when narrow
|
|
137
|
-
@media (max-width: $width-md) {
|
|
138
|
-
.SegmentedControl-button--iconOnly-whenNarrow {
|
|
139
|
-
width: var(--primer-control-medium-size, 32px);
|
|
140
|
-
|
|
141
|
-
.SegmentedControl-content {
|
|
142
|
-
padding: 0;
|
|
143
|
-
flex: 1;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.SegmentedControl-text {
|
|
147
|
-
display: none;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
// Increase touch target
|
|
153
|
-
@media (pointer: coarse) {
|
|
154
|
-
.SegmentedControl-button {
|
|
155
|
-
min-width: var(--primer-control-minTarget-coarse, 44px);
|
|
156
|
-
|
|
157
|
-
&::after {
|
|
158
|
-
@include minTouchTarget($min-height: var(--primer-control-minTarget-coarse, 44px));
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
// reset for icon-only buttons
|
|
163
|
-
.SegmentedControl-button--iconOnly,
|
|
164
|
-
.SegmentedControl-button--iconOnly-whenNarrow {
|
|
165
|
-
min-width: unset;
|
|
166
|
-
}
|
|
167
|
-
}
|