mirror of
https://github.com/primer/css.git
synced 2024-12-02 16:13:02 +03:00
Merge pull request #498 from primer/release-11.0.0
Major release 11.0.0
This commit is contained in:
Shawn Allen
GitHub
commit
8e4946e692
@ -12,6 +12,7 @@ env:
|
||||
script:
|
||||
- npm test
|
||||
- script/check-versions
|
||||
- script/selector-diff-report
|
||||
|
||||
before_deploy:
|
||||
# this will short-circuit the publish step if it fails to interpolate $NPM_API_KEY
|
||||
|
||||
31
CHANGELOG.md
31
CHANGELOG.md
@ -1,3 +1,34 @@
|
||||
# 11.0.0
|
||||
|
||||
#### :boom: Breaking Change
|
||||
* [#438](https://github.com/primer/primer/pull/438) Remove `primer-page-sections` package. ([@sophshep](https://github.com/sophshep))
|
||||
* [#439](https://github.com/primer/primer/pull/439) Remove `primer-page-headers` package. ([@sophshep](https://github.com/sophshep))
|
||||
* [#440](https://github.com/primer/primer/pull/440) Remove `primer-tables` package. ([@sophshep](https://github.com/sophshep))
|
||||
* [#459](https://github.com/primer/primer/pull/459) Move responsive position utilities from marketing to core. ([@sophshep](https://github.com/sophshep))
|
||||
* [#656](https://github.com/primer/primer/pull/656) Remove colorizeTooltip mixin. ([@shawnbot](https://github.com/shawnbot))
|
||||
* [#657](https://github.com/primer/primer/pull/657) Remove `BtnGroup-form` class. ([@shawnbot](https://github.com/shawnbot))
|
||||
* [#658](https://github.com/primer/primer/pull/658) Remove `.avatar-stack` in favor of `.AvatarStack`. ([@shawnbot](https://github.com/shawnbot))
|
||||
|
||||
#### :rocket: Enhancement
|
||||
* [#583](https://github.com/primer/primer/pull/583) Updates to Marketing Typography. ([@sophshep](https://github.com/sophshep))
|
||||
* [#660](https://github.com/primer/primer/pull/660) Add `$marketing-font-path`. ([@shawnbot](https://github.com/shawnbot))
|
||||
* [#661](https://github.com/primer/primer/pull/661) Spacer variable refactor. ([@shawnbot](https://github.com/shawnbot))
|
||||
* [#663](https://github.com/primer/primer/pull/663) Add deprecation warning for column grid classes and add `container-sm` utility class. ([@jonrohan](https://github.com/jonrohan))
|
||||
|
||||
#### :bug: Bug Fix
|
||||
* [#654](https://github.com/primer/primer/pull/654) Fix typo ("Chroma") in `primer-base` comment. ([@Jiang-Xuan](https://github.com/Jiang-Xuan))
|
||||
* [#655](https://github.com/primer/primer/pull/655) Fix typo ("conditonally") in `docs/src/SideNav.js` comment. ([@0xflotus](https://github.com/0xflotus))
|
||||
|
||||
### :house: Internal
|
||||
* [#659](https://github.com/primer/primer/pull/659) Generate CSS selector diff report on Travis. ([@shawnbot](https://github.com/shawnbot))
|
||||
|
||||
#### Committers: 4
|
||||
- 0xflotus ([0xflotus](https://github.com/0xflotus))
|
||||
- Jiang-Xuan ([Jiang-Xuan](https://github.com/Jiang-Xuan))
|
||||
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
|
||||
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
|
||||
- Sophie Shepherd ([sophshep](https://github.com/sophshep))
|
||||
|
||||
# 10.10.5
|
||||
|
||||
#### :bug: Bug Fix
|
||||
|
||||
80
docs/package-lock.json
generated
80
docs/package-lock.json
generated
@ -8459,9 +8459,9 @@
|
||||
"integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA=="
|
||||
},
|
||||
"primer": {
|
||||
"version": "10.10.4",
|
||||
"resolved": "https://registry.npmjs.org/primer/-/primer-10.10.4.tgz",
|
||||
"integrity": "sha512-JslEj4o7n1kJMGPQvCkrZphBnTlJ+oXmDEB4zBc3fOgt0INWO8Y5vgsW2VutvoFbuiXbY0ydQfGPOcL5/J452Q==",
|
||||
"version": "10.10.5",
|
||||
"resolved": "https://registry.npmjs.org/primer/-/primer-10.10.5.tgz",
|
||||
"integrity": "sha512-iJjmOomFef/W+oBtwo4U+o2MwCL00z+4XM7ixRP5kJ3Fgc9QEhVW7IPv3DWhqRlbPrMhF68ytM+AFRcHHT8rEA==",
|
||||
"requires": {
|
||||
"primer-alerts": "1.5.13",
|
||||
"primer-avatars": "1.5.10",
|
||||
@ -8471,7 +8471,7 @@
|
||||
"primer-branch-name": "1.0.11",
|
||||
"primer-breadcrumb": "1.5.9",
|
||||
"primer-buttons": "2.6.4",
|
||||
"primer-core": "6.10.8",
|
||||
"primer-core": "6.10.9",
|
||||
"primer-forms": "2.1.8",
|
||||
"primer-labels": "1.5.13",
|
||||
"primer-layout": "1.6.2",
|
||||
@ -8494,9 +8494,29 @@
|
||||
"primer-tables": "1.5.3",
|
||||
"primer-tooltips": "1.5.11",
|
||||
"primer-truncate": "1.4.13",
|
||||
"primer-utilities": "4.14.3"
|
||||
"primer-utilities": "4.14.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-core": {
|
||||
"version": "6.10.9",
|
||||
"resolved": "https://registry.npmjs.org/primer-core/-/primer-core-6.10.9.tgz",
|
||||
"integrity": "sha512-OJmJzhjw4UXXU/IzH3JoJL6KGHfWep8G8t+EHNGIJVHBsrGQYylp5iEcsPuHLDQVpKbOtuj3Rqg3ef53ei2R5A==",
|
||||
"requires": {
|
||||
"primer-base": "1.9.2",
|
||||
"primer-box": "2.5.13",
|
||||
"primer-breadcrumb": "1.5.9",
|
||||
"primer-buttons": "2.6.4",
|
||||
"primer-forms": "2.1.8",
|
||||
"primer-layout": "1.6.2",
|
||||
"primer-navigation": "1.5.11",
|
||||
"primer-pagination": "1.0.7",
|
||||
"primer-support": "4.7.2",
|
||||
"primer-table-object": "1.4.13",
|
||||
"primer-tooltips": "1.5.11",
|
||||
"primer-truncate": "1.4.13",
|
||||
"primer-utilities": "4.14.4"
|
||||
}
|
||||
},
|
||||
"primer-markdown": {
|
||||
"version": "3.7.13",
|
||||
"resolved": "https://registry.npmjs.org/primer-markdown/-/primer-markdown-3.7.13.tgz",
|
||||
@ -8509,6 +8529,14 @@
|
||||
"version": "4.7.2",
|
||||
"resolved": "https://registry.npmjs.org/primer-support/-/primer-support-4.7.2.tgz",
|
||||
"integrity": "sha512-WbfjjITtGV6iXQeaVPL+AzHj1Jv9RHJRp7kIu5ebFXwolWmCqTBpA/8VmWmssyeTfv8zR7iuCoT0UoBF+uGHww=="
|
||||
},
|
||||
"primer-utilities": {
|
||||
"version": "4.14.4",
|
||||
"resolved": "https://registry.npmjs.org/primer-utilities/-/primer-utilities-4.14.4.tgz",
|
||||
"integrity": "sha512-EEZxsp/bjY4jkTqDeVJfWI/df55icDhFDGylX59VeiSVudIgUUe5G1VqtgGJIXgqnkiLf5u+iaOSayFvxqhTrg==",
|
||||
"requires": {
|
||||
"primer-support": "4.7.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -8637,33 +8665,6 @@
|
||||
"resolved": "https://registry.npmjs.org/primer-colors/-/primer-colors-1.0.1.tgz",
|
||||
"integrity": "sha512-bxo3OPoIO1F/C07RpKbLjPzuSsTkOMzo9Yl9OJFHGD7/UxA+JvNdZK0GbJzWtz5Y8H6KabbHadxwVWRp1xl08A=="
|
||||
},
|
||||
"primer-core": {
|
||||
"version": "6.10.8",
|
||||
"resolved": "https://registry.npmjs.org/primer-core/-/primer-core-6.10.8.tgz",
|
||||
"integrity": "sha512-yeAAWxb7Ro+PYk1MN2mqvSA4XoCaX/KjwfEgJc0l+6qmQA74KZR0tLf9t/zzSyJRgLwKthWbcwZzzjrffEph4A==",
|
||||
"requires": {
|
||||
"primer-base": "1.9.2",
|
||||
"primer-box": "2.5.13",
|
||||
"primer-breadcrumb": "1.5.9",
|
||||
"primer-buttons": "2.6.4",
|
||||
"primer-forms": "2.1.8",
|
||||
"primer-layout": "1.6.2",
|
||||
"primer-navigation": "1.5.11",
|
||||
"primer-pagination": "1.0.7",
|
||||
"primer-support": "4.7.2",
|
||||
"primer-table-object": "1.4.13",
|
||||
"primer-tooltips": "1.5.11",
|
||||
"primer-truncate": "1.4.13",
|
||||
"primer-utilities": "4.14.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": {
|
||||
"version": "4.7.2",
|
||||
"resolved": "https://registry.npmjs.org/primer-support/-/primer-support-4.7.2.tgz",
|
||||
"integrity": "sha512-WbfjjITtGV6iXQeaVPL+AzHj1Jv9RHJRp7kIu5ebFXwolWmCqTBpA/8VmWmssyeTfv8zR7iuCoT0UoBF+uGHww=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"primer-forms": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.8.tgz",
|
||||
@ -9001,21 +9002,6 @@
|
||||
"resolved": "https://registry.npmjs.org/primer-typography/-/primer-typography-1.0.1.tgz",
|
||||
"integrity": "sha512-9f1MNOMYOWemosmJIG8FToqZoL7YKQW3KHNsMS3DddTUzJefnVzeqmiiTBPc2ok0yE7fE2PgobG9iRY+itgdVg=="
|
||||
},
|
||||
"primer-utilities": {
|
||||
"version": "4.14.3",
|
||||
"resolved": "https://registry.npmjs.org/primer-utilities/-/primer-utilities-4.14.3.tgz",
|
||||
"integrity": "sha512-VZsoYjEOQrnrW2x09dgXSKvwLtuo/BwSCKIVW0KtHbq1p6/i3IoeKglNF+7oQH+uTE9F6iSOuNFRNoitcnWKJg==",
|
||||
"requires": {
|
||||
"primer-support": "4.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": {
|
||||
"version": "4.7.2",
|
||||
"resolved": "https://registry.npmjs.org/primer-support/-/primer-support-4.7.2.tgz",
|
||||
"integrity": "sha512-WbfjjITtGV6iXQeaVPL+AzHj1Jv9RHJRp7kIu5ebFXwolWmCqTBpA/8VmWmssyeTfv8zR7iuCoT0UoBF+uGHww=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"prism-github": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/prism-github/-/prism-github-1.1.0.tgz",
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
"next-compose-plugins": "2.1.1",
|
||||
"node-sass": "^4.10.0",
|
||||
"now": "^12.1.8",
|
||||
"primer": "10.10.5",
|
||||
"primer": "11.0.0",
|
||||
"primer-colors": "^1.0.1",
|
||||
"prism-github": "^1.1.0",
|
||||
"prop-types": "^15.6.2",
|
||||
|
||||
@ -17,10 +17,10 @@ export const Hero = () => (
|
||||
<Heading color="blue.4" fontSize={7} pb={3} m={0}>
|
||||
Primer CSS
|
||||
</Heading>
|
||||
<Text as="div" color="blue.2" fontSize={2} mb={4}>
|
||||
<Text is="div" color="blue.2" fontSize={2} mb={4}>
|
||||
v{version}
|
||||
</Text>
|
||||
<Box as={HeaderImage} mb={6} />
|
||||
<Box is={HeaderImage} mb={6} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@ -46,7 +46,7 @@ export default function CodeExample(props) {
|
||||
<ClipboardCopy value={source} />
|
||||
</Absolute>
|
||||
<Text
|
||||
as={LiveError}
|
||||
is={LiveError}
|
||||
fontFamily="mono"
|
||||
style={{
|
||||
overflow: 'auto',
|
||||
|
||||
@ -28,7 +28,7 @@ const Header = props => (
|
||||
<NavLink href="/css/getting-started" />
|
||||
<NavLink href="/css/principles" />
|
||||
<NavLink href="/css/tools" />
|
||||
<NavLink as={Link} href="https://github.com/primer/primer/releases">
|
||||
<NavLink is={Link} href="https://github.com/primer/primer/releases">
|
||||
Releases
|
||||
</NavLink>
|
||||
</HeaderText>
|
||||
|
||||
@ -4,7 +4,7 @@ import {Box} from '@primer/components'
|
||||
export default function Outline({outline, ...rest}) {
|
||||
if (outline && outline.length) {
|
||||
return (
|
||||
<Box as="details" mb={4}>
|
||||
<Box is="details" mb={4}>
|
||||
<summary>Table of contents</summary>
|
||||
<OutlineList items={outline} {...rest} />
|
||||
</Box>
|
||||
|
||||
@ -38,8 +38,8 @@ export default function PackageHeader(props) {
|
||||
|
||||
return (
|
||||
<Flex justifyContent="space-between" mb={4} {...rest}>
|
||||
<Text as="div" fontSize={1}>
|
||||
{status ? <StatusLabel status={status} as="a" href="/css/status-key" mr={2} /> : null}
|
||||
<Text is="div" fontSize={1}>
|
||||
{status ? <StatusLabel status={status} is="a" href="/css/status-key" mr={2} /> : null}
|
||||
{info}
|
||||
</Text>
|
||||
<Box>
|
||||
|
||||
@ -7,7 +7,7 @@ import {rootPage} from './utils'
|
||||
|
||||
export default function SideNav(props) {
|
||||
return (
|
||||
<Relative as="nav">
|
||||
<Relative is="nav">
|
||||
<Box id="sidenav" {...props}>
|
||||
<Flex flexDirection="column" alignItems="start">
|
||||
<Router>
|
||||
@ -111,7 +111,7 @@ const Router = withRouter(({router, children}) => {
|
||||
})
|
||||
|
||||
/**
|
||||
* <RouteMatch> is just a way to conditonally render content without a wrapper
|
||||
* <RouteMatch> is just a way to conditionally render content without a wrapper
|
||||
* element when contained directly in a <Router>:
|
||||
*
|
||||
* ```jsx
|
||||
|
||||
@ -42,7 +42,7 @@ export function ColorVariables(props) {
|
||||
<Flex flexWrap="wrap" {...props}>
|
||||
<FadeVariables id="black" hue="black" bg="black" color="white">
|
||||
<BorderBox border={0} borderRadius={0} borderTop={1} borderColor="gray.5" mt={1}>
|
||||
<Text as="div" fontSize={2} pt={3} mb={0}>
|
||||
<Text is="div" fontSize={2} pt={3} mb={0}>
|
||||
Black fades apply alpha transparency to the <Var>$black</Var> variable. The black color value has a slight
|
||||
blue hue to match our grays.
|
||||
</Text>
|
||||
@ -50,7 +50,7 @@ export function ColorVariables(props) {
|
||||
</FadeVariables>
|
||||
<FadeVariables id="white" hue="white" over={BLACK}>
|
||||
<BorderBox border={0} borderRadius={0} borderTop={1} mt={1}>
|
||||
<Text as="div" fontSize={2} pt={3} mb={0}>
|
||||
<Text is="div" fontSize={2} pt={3} mb={0}>
|
||||
White fades apply alpha transparency to the <Var>$white</Var> variable, below these are shown overlaid on
|
||||
a dark gray background.
|
||||
</Text>
|
||||
@ -64,14 +64,14 @@ export function ColorVariables(props) {
|
||||
export function ColorVariable({hue, ...rest}) {
|
||||
const values = colors[hue]
|
||||
return (
|
||||
<Flex.Item as={Box} pr={4} mb={6} className="col-6 markdown-no-margin" {...rest}>
|
||||
{/* <Heading as="div">{titleCase(hue)}</Heading> */}
|
||||
<Flex.Item is={Box} pr={4} mb={6} className="col-6 markdown-no-margin" {...rest}>
|
||||
{/* <Heading is="div">{titleCase(hue)}</Heading> */}
|
||||
<Box bg={`${hue}.5`} my={2} p={3} color="white">
|
||||
<Heading as="div" pb={3} fontSize={56} fontWeight="light">
|
||||
<Heading is="div" pb={3} fontSize={56} fontWeight="light">
|
||||
{titleCase(hue)}
|
||||
</Heading>
|
||||
<Flex justifyContent="space-between">
|
||||
<Flex.Item flex="1 1 auto" as={Var}>
|
||||
<Flex.Item flex="1 1 auto" is={Var}>
|
||||
${hue}-500
|
||||
</Flex.Item>
|
||||
<Text fontFamily="mono">{values[5]}</Text>
|
||||
@ -103,14 +103,14 @@ export function FadeVariables({hue, color, bg, over, children, ...rest}) {
|
||||
})
|
||||
const boxProps = {color, bg}
|
||||
return (
|
||||
<Flex.Item as={Box} pr={4} mb={6} width={1 / 2} className="markdown-no-margin" {...rest}>
|
||||
{/* <Heading as="div">{titleCase(hue)}</Heading> */}
|
||||
<Flex.Item is={Box} pr={4} mb={6} width={1 / 2} className="markdown-no-margin" {...rest}>
|
||||
{/* <Heading is="div">{titleCase(hue)}</Heading> */}
|
||||
<Box my={2} p={3} {...boxProps}>
|
||||
<Heading as="div" pb={3} fontSize={56} fontWeight="light">
|
||||
<Heading is="div" pb={3} fontSize={56} fontWeight="light">
|
||||
{titleCase(hue)}
|
||||
</Heading>
|
||||
<Flex justifyContent="space-between">
|
||||
<Flex.Item flex="1 1 auto" as={Var}>
|
||||
<Flex.Item flex="1 1 auto" is={Var}>
|
||||
${hue}
|
||||
</Flex.Item>
|
||||
<Text fontFamily="mono">
|
||||
@ -141,7 +141,7 @@ function Swatch(props) {
|
||||
const {name, value, textColor = overlayColor(value), ...rest} = props
|
||||
return (
|
||||
<Box bg={value} color={textColor} {...rest}>
|
||||
<Text as={Flex} fontSize={1} justifyContent="space-between">
|
||||
<Text is={Flex} fontSize={1} justifyContent="space-between">
|
||||
<Box p={3}>
|
||||
<Var>${name}</Var>
|
||||
</Box>
|
||||
@ -161,7 +161,7 @@ Swatch.propTypes = {
|
||||
|
||||
function Var(props) {
|
||||
// FIXME: fontStyle should be a prop, right?
|
||||
return <Text as="var" fontWeight="bold" fontFamily="mono" style={{fontStyle: 'normal'}} {...props} />
|
||||
return <Text is="var" fontWeight="bold" fontFamily="mono" style={{fontStyle: 'normal'}} {...props} />
|
||||
}
|
||||
|
||||
function overlayColor(bg) {
|
||||
|
||||
@ -10,7 +10,7 @@ import ColorImage from './ColorImage.svg'
|
||||
|
||||
export {default as HeaderImage} from './HeaderImage.svg'
|
||||
|
||||
const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" as="div" {...props} />
|
||||
const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" is="div" {...props} />
|
||||
const OverviewText = props => <Text fontSize={1} {...props} />
|
||||
|
||||
export function StylesOverview(props) {
|
||||
@ -34,7 +34,7 @@ export function StylesOverview(props) {
|
||||
return (
|
||||
<Flex {...props}>
|
||||
{styleTypes.map(({name, desc, image}) => (
|
||||
<Flex.Item as={Text} textAlign="center" mx={4} key={name}>
|
||||
<Flex.Item is={Text} textAlign="center" mx={4} key={name}>
|
||||
<Image src={image} height={90} mb={2} />
|
||||
<OverviewTitle>{name}</OverviewTitle>
|
||||
<OverviewText>{desc}</OverviewText>
|
||||
@ -103,9 +103,9 @@ function Image(props) {
|
||||
const {src, ...rest} = props
|
||||
switch (typeof src) {
|
||||
case 'string':
|
||||
return <Box as="img" width="100%" alt="" {...props} />
|
||||
return <Box is="img" width="100%" alt="" {...props} />
|
||||
case 'function':
|
||||
return <Box as={src} {...rest} />
|
||||
return <Box is={src} {...rest} />
|
||||
default:
|
||||
throw new Error(`Unrecognized Image.src type: "${typeof src}"`)
|
||||
}
|
||||
@ -127,7 +127,7 @@ export function PrimerPackageBox({data = {}, count, ...rest}) {
|
||||
</Link>
|
||||
</Flex>
|
||||
{count ? (
|
||||
<Text as="div" textAlign="center">
|
||||
<Text is="div" textAlign="center">
|
||||
This package includes all {count} Primer modules.
|
||||
</Text>
|
||||
) : null}
|
||||
@ -139,9 +139,9 @@ export function PrimerPackageBox({data = {}, count, ...rest}) {
|
||||
export function MetaPackageBox({children, data = {}, title, ...rest}) {
|
||||
const deps = data.dependencies || []
|
||||
return (
|
||||
<Flex.Item as={BorderBox} bg="white" maxWidth={220} {...rest}>
|
||||
<Flex.Item is={BorderBox} bg="white" maxWidth={220} {...rest}>
|
||||
<BorderBox bg="gray.1" border={0} borderBottom={1} borderRadius={0} px={3} py={2}>
|
||||
<Heading as="div" fontSize={2}>
|
||||
<Heading is="div" fontSize={2}>
|
||||
<Link href={packageSourceURL(data.name)} color="inherit">
|
||||
{title}
|
||||
</Link>{' '}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.5.13",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-alerts",
|
||||
"description": "Flash messages, or alerts, inform users of successful or pending actions.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -33,7 +33,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"alerts",
|
||||
|
||||
@ -1,52 +1,5 @@
|
||||
// Stacked avatars can be used to show who is participating in thread when
|
||||
// there is limited space available.
|
||||
//
|
||||
// No styleguide references
|
||||
@warn ".avatar-stack will be deprecated in version 11. Use .AvatarStack instead.";
|
||||
|
||||
.avatar-stack {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-sizing: content-box;
|
||||
margin-right: -15px;
|
||||
background-color: $bg-white;
|
||||
border-right: 1px solid $white;
|
||||
border-radius: 2px;
|
||||
transition: margin 0.1s ease-in-out;
|
||||
|
||||
&:only-child {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
z-index: 1;
|
||||
margin-right: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// When more than one avatar, margin-left will animate from -15 to 2, and reveal the stack
|
||||
&:hover .avatar {
|
||||
margin-right: 3px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Refactored, new avatar stack:
|
||||
|
||||
.AvatarStack {
|
||||
position: relative;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.5.10",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-avatars",
|
||||
"description": "Basic styles for user profile avatars.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -30,7 +30,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"avatars",
|
||||
|
||||
@ -1,117 +1,10 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
|
||||
|
||||
storiesOf('Avatars', module)
|
||||
.add('avatar', () => (
|
||||
<img className='avatar' alt='Uncle Cat' width='72' height='72' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
))
|
||||
.add('avatar-small', () => (
|
||||
<img className='avatar avatar-small' width='32' height='32' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
))
|
||||
.add('avatar-parent-child', () => (
|
||||
<div>
|
||||
<div className='avatar-parent-child float-left'>
|
||||
<img className='avatar'width='48' height='48' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar avatar-child' alt='Child cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('avatar-stack', () => (
|
||||
<div>
|
||||
<div className='avatar-stack'>
|
||||
<img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
</div>
|
||||
</div>
|
||||
const stories = storiesOf('Avatars', module)
|
||||
|
||||
))
|
||||
.add('AvatarStack', () => (
|
||||
<div>
|
||||
<div className='AvatarStack AvatarStack-three-plus mb-2'>
|
||||
<div className='AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1' aria-label='five avatars'>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<div className='avatar-more avatar'></div>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='AvatarStack AvatarStack-two mb-2'>
|
||||
<div className='AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1' aria-label='two avatars'>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='AvatarStack AvatarStack-three-plus AvatarStack--right mb-2'>
|
||||
<div className='AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1' aria-label='five avatars'>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<div className='avatar-more avatar'></div>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='AvatarStack AvatarStack-two AvatarStack--right mb-2'>
|
||||
<div className='AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1' aria-label='two avatars'>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('AvatarStack on blue background', () => (
|
||||
<div className='border bg-blue-light p-4'>
|
||||
<div className='AvatarStack flex-self-start'>
|
||||
<div className='AvatarStack-body' aria-label='chesterbr'>
|
||||
<a className='avatar' aria-describedby='hovercard-aria-description'>
|
||||
<img height='20' width='20' alt='@github' src='https://avatars0.githubusercontent.com/github?s=60&v=4' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='AvatarStack AvatarStack-two mt-2'>
|
||||
<div className='AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1' aria-label='two avatars'>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('CircleBadge--small', () => (
|
||||
<div>
|
||||
<a className='CircleBadge CircleBadge--small' href='#url' title='Travis CI'>
|
||||
<img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
.add('CircleBadge--medium', () => (
|
||||
<div>
|
||||
<a className='CircleBadge CircleBadge--medium' href='#url' title='Travis CI'>
|
||||
<img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
.add('CircleBadge--large', () => (
|
||||
<div>
|
||||
<a className='CircleBadge CircleBadge--large' href='#url' title='Travis CI'>
|
||||
<img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
.add('DashedConnection', () => (
|
||||
<div className='DashedConnection'>
|
||||
<ul className='d-flex list-style-none flex-justify-between' aria-label='A sample GitHub workflow'>
|
||||
<li className='CircleBadge CircleBadge--small' aria-label='GitHub'>
|
||||
<img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
|
||||
</li>
|
||||
<li className='CircleBadge CircleBadge--small' aria-label='Slack'>
|
||||
<img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
|
||||
</li>
|
||||
<li className='CircleBadge CircleBadge--small' aria-label='Travis CI'>
|
||||
<img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
))
|
||||
storiesFromMarkdown(require.context('.', true, /\.md$/))
|
||||
.forEach(({title, story}) => {
|
||||
stories.add(title, story)
|
||||
})
|
||||
|
||||
@ -64,7 +64,7 @@ th {
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
// Remove border radius added by Chroma macOS
|
||||
// Remove border radius added by Chrome macOS
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.9.2",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-base",
|
||||
"description": "CSS to reset the browsers default styles",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -34,7 +34,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.5.2",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-blankslate",
|
||||
"description": "Blankslates are for when there is a lack of content within a page or section.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -30,7 +30,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "2.5.13",
|
||||
"version": "3.0.0",
|
||||
"name": "primer-box",
|
||||
"description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -30,7 +30,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.11",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-branch-name",
|
||||
"description": "A nice, consistent way to display branch names.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -31,7 +31,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"github",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.5.9",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-breadcrumb",
|
||||
"description": "Breadcrumb navigation for pages with parents / grandparents.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -31,7 +31,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"breadcrumb",
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
//
|
||||
// A button group is a series of buttons laid out next to each other, all part
|
||||
// of one visual button, but separated by rules to be separate.
|
||||
@warn ".BtnGroup-form will be deprecated in version 11. Use .BtnGroup-parent instead.";
|
||||
|
||||
.BtnGroup {
|
||||
display: inline-block;
|
||||
@ -40,15 +39,13 @@
|
||||
border-right-width: $border-width;
|
||||
|
||||
+ .BtnGroup-item,
|
||||
+ .BtnGroup-parent .BtnGroup-item,
|
||||
+ .BtnGroup-form .BtnGroup-item {
|
||||
+ .BtnGroup-parent .BtnGroup-item {
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.BtnGroup-parent,
|
||||
.BtnGroup-form {
|
||||
.BtnGroup-parent {
|
||||
float: left;
|
||||
|
||||
&:first-child .BtnGroup-item {
|
||||
@ -76,8 +73,7 @@
|
||||
}
|
||||
|
||||
+ .BtnGroup-item,
|
||||
+ .BtnGroup-parent .BtnGroup-item,
|
||||
+ .BtnGroup-form .BtnGroup-item {
|
||||
+ .BtnGroup-parent .BtnGroup-item {
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
@ -85,8 +81,7 @@
|
||||
|
||||
// ensure that the focus ring sits above the adjacent buttons
|
||||
.BtnGroup-item,
|
||||
.BtnGroup-parent,
|
||||
.BtnGroup-form {
|
||||
.BtnGroup-parent {
|
||||
&:focus,
|
||||
&:active {
|
||||
z-index: 1;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "2.6.4",
|
||||
"version": "3.0.0",
|
||||
"name": "primer-buttons",
|
||||
"description": "A collection of buttons used for primary and secondary actions.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -30,7 +30,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "6.10.9",
|
||||
"version": "7.0.0",
|
||||
"name": "primer-core",
|
||||
"description": "Primer's core modules",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -29,18 +29,18 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-base": "1.9.2",
|
||||
"primer-box": "2.5.13",
|
||||
"primer-breadcrumb": "1.5.9",
|
||||
"primer-buttons": "2.6.4",
|
||||
"primer-forms": "2.1.8",
|
||||
"primer-layout": "1.6.2",
|
||||
"primer-navigation": "1.5.11",
|
||||
"primer-pagination": "1.0.7",
|
||||
"primer-support": "4.7.2",
|
||||
"primer-table-object": "1.4.13",
|
||||
"primer-tooltips": "1.5.11",
|
||||
"primer-truncate": "1.4.13",
|
||||
"primer-utilities": "4.14.4"
|
||||
"primer-base": "2.0.0",
|
||||
"primer-box": "3.0.0",
|
||||
"primer-breadcrumb": "2.0.0",
|
||||
"primer-buttons": "3.0.0",
|
||||
"primer-forms": "3.0.0",
|
||||
"primer-layout": "2.0.0",
|
||||
"primer-navigation": "2.0.0",
|
||||
"primer-pagination": "2.0.0",
|
||||
"primer-support": "5.0.0",
|
||||
"primer-table-object": "2.0.0",
|
||||
"primer-tooltips": "2.0.0",
|
||||
"primer-truncate": "2.0.0",
|
||||
"primer-utilities": "5.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,12 +5,8 @@
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: 34px;
|
||||
// IE9 hacks to reduce padding
|
||||
padding-right: $spacer-4;
|
||||
padding-right: $spacer-2 \9;
|
||||
background: $bg-white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
|
||||
// IE9 hacks to hide the background-image
|
||||
background-image: none \9;
|
||||
background-size: 8px 10px;
|
||||
appearance: none;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "2.1.8",
|
||||
"version": "3.0.0",
|
||||
"name": "primer-forms",
|
||||
"description": "Style individual form controls and utilize common layouts.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -30,7 +30,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.5.13",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-labels",
|
||||
"description": "Labels add metatdata or indicate status of items and navigational elements.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -30,7 +30,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -374,9 +374,13 @@ This is how that example would look at the `lg` breakpoint.
|
||||
```
|
||||
|
||||
## Containers
|
||||
Container widths match our breakpoints and are available at a `md`, `lg`, and `xl` size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container.
|
||||
Container widths match our breakpoints and are available at a `sm`, `md`, `lg`, and `xl` size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container.
|
||||
|
||||
```html title="Containers sized"
|
||||
<div class="container-sm border">
|
||||
.container-sm, max-width 544px
|
||||
</div>
|
||||
|
||||
<div class="container-md border">
|
||||
.container-md, max-width 768px
|
||||
</div>
|
||||
@ -389,5 +393,3 @@ Container widths match our breakpoints and are available at a `md`, `lg`, and `x
|
||||
.container-xl, max-width 1280px
|
||||
</div>
|
||||
```
|
||||
|
||||
**Note:** `.container` is being replaced with `.container-lg`. To match the current fixed page width use `.container-lg` with `px-3`. This gives the container padding on smaller screens which works better for responsive layouts.
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
// Create rows with `.columns` to clear the floated columns and outdent the
|
||||
// padding on `.column`s with negative margin for alignment.
|
||||
|
||||
@warn ".columns, .column, .one-third, .two-thirds, .one-fourth, .one-half, .three-fourths, .one-fifth, .four-fifths, .centered will be deprecated in 12.0.0 please migrate to grid.scss";
|
||||
|
||||
.columns {
|
||||
margin-right: -$grid-gutter;
|
||||
margin-left: -$grid-gutter;
|
||||
|
||||
@ -8,6 +8,14 @@
|
||||
}
|
||||
|
||||
// Handy container styles that match our breakpoints
|
||||
|
||||
// 544px
|
||||
.container-sm {
|
||||
max-width: $width-sm;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// 768px
|
||||
.container-md {
|
||||
max-width: $container-md;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.6.2",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-layout",
|
||||
"description": "Containers, rows, and columns for creating page layout.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -31,7 +31,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "3.7.13",
|
||||
"version": "4.0.0",
|
||||
"name": "primer-markdown",
|
||||
"description": "GitHub stylesheets for rendering markdown.",
|
||||
"homepage": "https://github.com/primer/primer-markdown",
|
||||
@ -30,7 +30,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"github",
|
||||
|
||||
@ -15,38 +15,31 @@ path: components/marketing-buttons
|
||||
status: New Release
|
||||
-->
|
||||
|
||||
Marketing buttons extend primer-core buttons with more color and fill styles.
|
||||
Marketing buttons come in different colors and sizes, and are also available in a blue outlined version.
|
||||
|
||||
## Colors and outlined
|
||||
|
||||
## Colors
|
||||
Marketing buttons can be solid blue, outlined blue, or solid green.
|
||||
|
||||
Marketing buttons are available in orange.
|
||||
The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis.
|
||||
|
||||
```html
|
||||
<button class="btn btn-orange" type="button">Button button</button>
|
||||
<button class="btn-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
|
||||
```
|
||||
|
||||
## Outline button colors
|
||||
## Sizes
|
||||
|
||||
The `btn-outline` has also been extended with orange, purple, and green.
|
||||
Available in two sizes, marketing buttons have a default size and a large size.
|
||||
|
||||
```html
|
||||
<button class="btn btn-outline-orange" type="button">Button button</button>
|
||||
<a class="btn btn-outline-purple" href="#url" role="button">Link button</a>
|
||||
<button class="btn btn-outline-green" type="button">Button button</button>
|
||||
```
|
||||
|
||||
## Transparent button
|
||||
|
||||
A button can also be transparent and displayed with a white border with `btn-transparent`.
|
||||
|
||||
```html
|
||||
<div class="bg-gray-dark p-4 mt-4">
|
||||
<button class="btn btn-transparent" type="button">
|
||||
Button button
|
||||
<span class="Counter">12</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
|
||||
<button class="btn-mktg btn-large-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
|
||||
```
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// support files
|
||||
@import "primer-support/index.scss";
|
||||
@import "primer-marketing-support/index.scss";
|
||||
@import "./lib/button.scss";
|
||||
|
||||
@ -1,24 +1,66 @@
|
||||
.btn-orange { @include btn-solid($white, lighten($orange-500, 7.5%), darken($orange-500, 7.5%)); }
|
||||
|
||||
.btn-outline-purple { @include btn-outline($purple); }
|
||||
.btn-outline-orange { @include btn-outline($orange); }
|
||||
.btn-outline-green { @include btn-outline($green); }
|
||||
|
||||
@mixin btn-transparent-active {
|
||||
color: $gray-800;
|
||||
background-color: $white;
|
||||
background-image: none;
|
||||
border-color: $white;
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
.btn-mktg {
|
||||
display: inline-block;
|
||||
padding: $spacer-3 $spacer-4;
|
||||
font-size: $h5-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $white;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border: $border-width $border-style $white-fade-50;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: $blue-450;
|
||||
border: 1px solid $blue-450;
|
||||
border-radius: $border-radius;
|
||||
transition: $transition-time / 2;
|
||||
appearance: none; // Corrects inability to style clickable `input` types in iOS.
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
@include btn-transparent-active;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: $blue-500;
|
||||
border-color: $blue-500;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
pointer-events: none; // Disable hover styles
|
||||
cursor: default;
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary-mktg {
|
||||
background-color: $green-450;
|
||||
border-color: $green-450;
|
||||
|
||||
&:hover {
|
||||
background-color: $green-500;
|
||||
border-color: $green-500;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2em rgba($green-500, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-large-mktg {
|
||||
padding: 20px $spacer-5;
|
||||
font-size: $h4-size;
|
||||
}
|
||||
|
||||
.btn-outline-mktg {
|
||||
color: $blue-450;
|
||||
background-color: $white;
|
||||
border-color: rgba($blue-450, 0.5);
|
||||
|
||||
&:hover {
|
||||
color: $blue-500;
|
||||
text-decoration: none;
|
||||
background-color: $white;
|
||||
border-color: rgba($blue-450, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.13",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-marketing-buttons",
|
||||
"description": "Buttons for marketing websites at GitHub",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -31,7 +31,8 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-marketing-support": "2.0.0",
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
|
||||
@ -1,21 +1,9 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
|
||||
|
||||
storiesOf('Marketing buttons', module)
|
||||
.add('Button colors', () => (
|
||||
<div className='p-4'>
|
||||
<button className="btn btn-orange mr-6" type="button">Button button</button>
|
||||
</div>
|
||||
))
|
||||
.add('Outline colors', () => (
|
||||
<div className='p-4'>
|
||||
<button className="btn btn-outline-orange mr-6" type="button">Button button</button>
|
||||
<a className="btn btn-outline-purple mr-6" href="#url" role="button">Link button</a>
|
||||
<button className="btn btn-outline-green mr-6" type="button">Button button</button>
|
||||
</div>
|
||||
))
|
||||
.add('Transparent button', () => (
|
||||
<div className="bg-gray-dark p-4 mt-4 mr-6">
|
||||
<button className="btn btn-transparent mr-6" type="button">Button button</button>
|
||||
</div>
|
||||
))
|
||||
const stories = storiesOf('Marketing buttons', module)
|
||||
|
||||
for (const {title, story} of storiesFromMarkdown(require.context('.', true, /\.md$/))) {
|
||||
stories.add(title, story)
|
||||
}
|
||||
|
||||
BIN
modules/primer-marketing-support/fonts/Inter-UI-Medium.woff
Normal file
BIN
modules/primer-marketing-support/fonts/Inter-UI-Medium.woff
Normal file
Binary file not shown.
BIN
modules/primer-marketing-support/fonts/Inter-UI-Regular.woff
Normal file
BIN
modules/primer-marketing-support/fonts/Inter-UI-Regular.woff
Normal file
Binary file not shown.
@ -1,14 +1,68 @@
|
||||
$marketing-font-path: "/primer-marketing-support/fonts/" !default;
|
||||
|
||||
// Type
|
||||
$alt-body-font: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
|
||||
$alt-mono-font: $mono-font;
|
||||
@font-face {
|
||||
font-family: InterUI;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-normal;
|
||||
src: local("InterUI"), local("InterUI-Regular"), url("#{$marketing-font-path}Inter-UI-Regular.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: InterUI;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-semibold;
|
||||
src: local("InterUI Medium"), local("InterUI-Medium"), url("#{$marketing-font-path}Inter-UI-Medium.woff") format("woff");
|
||||
}
|
||||
|
||||
$font-mktg: InterUI, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
// Builds upon primer-support/variables/typography.scss
|
||||
$h000-size: 64px !default;
|
||||
$h000-size-mobile: 48px !default;
|
||||
|
||||
// Colors
|
||||
$blue-450: mix($blue-500, $blue-400, 50%);
|
||||
$green-450: mix($green-500, $green-400, 50%);
|
||||
|
||||
// Animations
|
||||
$transition-time: 0.4s;
|
||||
|
||||
// Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12
|
||||
// i.e. After 40px, we have 48, 64, 80, 96, etc.
|
||||
$spacer-7: $spacer * 6; // 48px
|
||||
$spacer-8: $spacer * 8; // 64px
|
||||
$spacer-9: $spacer * 10; // 80px
|
||||
$spacer-10: $spacer * 12; // 96px
|
||||
$spacer-11: $spacer * 14; // 112px
|
||||
$spacer-12: $spacer * 16; // 128px
|
||||
$spacer-7: $spacer * 6 !default; // 48px
|
||||
$spacer-8: $spacer * 8 !default; // 64px
|
||||
$spacer-9: $spacer * 10 !default; // 80px
|
||||
$spacer-10: $spacer * 12 !default; // 96px
|
||||
$spacer-11: $spacer * 14 !default; // 112px
|
||||
$spacer-12: $spacer * 16 !default; // 128px
|
||||
|
||||
$marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
|
||||
$allSpacers: $spacer-1, $spacer-2, $spacer-3, $spacer-4, $spacer-5, $spacer-6, $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
|
||||
|
||||
$marketing-spacers: (
|
||||
7: $spacer-7,
|
||||
8: $spacer-8,
|
||||
9: $spacer-9,
|
||||
10: $spacer-10,
|
||||
11: $spacer-11,
|
||||
12: $spacer-12,
|
||||
) !default;
|
||||
|
||||
$marketing-all-spacers: map-merge(
|
||||
(
|
||||
1: $spacer-1,
|
||||
2: $spacer-2,
|
||||
3: $spacer-3,
|
||||
4: $spacer-4,
|
||||
5: $spacer-5,
|
||||
6: $spacer-6,
|
||||
),
|
||||
$marketing-spacers,
|
||||
) !default;
|
||||
|
||||
$marketing-position-variants: (
|
||||
"": "",
|
||||
md: "-md",
|
||||
lg: "-lg",
|
||||
) !default;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.5.6",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-marketing-support",
|
||||
"description": "Sass variables, mixins, and functions for use in our components.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -13,6 +13,7 @@
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"fonts",
|
||||
"lib"
|
||||
],
|
||||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-marketing-support",
|
||||
@ -35,5 +36,8 @@
|
||||
"functions",
|
||||
"variables",
|
||||
"scss"
|
||||
]
|
||||
],
|
||||
"dependencies": {
|
||||
"primer-support": "5.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,16 +20,19 @@ The typography for our marketing pages differs slightly from what is in Primer's
|
||||
|
||||
## Heading Utilities
|
||||
|
||||
Use `.alt-h1` – `.alt-h6` to change an element's font, size, and weight on marketing pages.
|
||||
Use `.h000-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.
|
||||
|
||||
```html title="Heading Utilities"
|
||||
|
||||
<p class="alt-h1">Pizza 1</p>
|
||||
<p class="alt-h2">Pizza 2</p>
|
||||
<p class="alt-h3">Pizza 3</p>
|
||||
<p class="alt-h4">Pizza 4</p>
|
||||
<p class="alt-h5">Pizza 5</p>
|
||||
<p class="alt-h6">Pizza 6</p>
|
||||
<p class="h000-mktg">Heading 000</p>
|
||||
<p class="h00-mktg">Heading 00</p>
|
||||
<p class="h0-mktg">Heading 0</p>
|
||||
<p class="h1-mktg">Heading 1</p>
|
||||
<p class="h2-mktg">Heading 2</p>
|
||||
<p class="h3-mktg">Heading 3</p>
|
||||
<p class="h4-mktg">Heading 4</p>
|
||||
<p class="h5-mktg">Heading 5</p>
|
||||
<p class="h6-mktg">Heading 6</p>
|
||||
|
||||
```
|
||||
|
||||
@ -39,13 +42,7 @@ These utilities are meant to be used in addition to Primer's core utilities.
|
||||
|
||||
```html title="Typographic Utilities"
|
||||
|
||||
<p class="alt-lead text-gray">I'm a lead paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
|
||||
|
||||
<p class="text-gray">I'm a regular paragraph, except I'm gray. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
|
||||
|
||||
<p class="text-gray alt-text-small">And I'm a tiny lil' baby paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
|
||||
|
||||
<p class="alt-mono-font text-gray">Occasionally we want to use a mono font, there is a utility class for that.</p>
|
||||
<p class="lead-mktg text-gray">I'm a lead paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
|
||||
|
||||
<p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>
|
||||
|
||||
|
||||
@ -1,101 +1,79 @@
|
||||
// Marketing font utility class
|
||||
|
||||
.alt-mono-font {
|
||||
font-family: $alt-mono-font;
|
||||
}
|
||||
|
||||
//
|
||||
// Headings
|
||||
|
||||
.alt-h0,
|
||||
.alt-h1,
|
||||
.alt-h2,
|
||||
.alt-h3,
|
||||
.alt-h4,
|
||||
.alt-h5,
|
||||
.alt-h6,
|
||||
.alt-lead {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: $alt-body-font;
|
||||
}
|
||||
|
||||
@mixin alt-h0 {
|
||||
font-size: $h00-size;
|
||||
font-weight: $font-weight-light;
|
||||
@include breakpoint(md) { font-size: 54px; }
|
||||
@include breakpoint(lg) { font-size: 72px; }
|
||||
}
|
||||
|
||||
.alt-h0 {
|
||||
@include alt-h0;
|
||||
}
|
||||
|
||||
@mixin alt-h1 {
|
||||
font-size: 36px;
|
||||
font-weight: $font-weight-light;
|
||||
@include breakpoint(md) { font-size: $h00-size; }
|
||||
@include breakpoint(lg) { font-size: 54px; }
|
||||
}
|
||||
|
||||
.alt-h1 {
|
||||
@include alt-h1;
|
||||
}
|
||||
|
||||
@mixin alt-h2 {
|
||||
font-size: 28px;
|
||||
font-weight: $font-weight-light;
|
||||
@include breakpoint(md) { font-size: 34px; }
|
||||
@include breakpoint(lg) { font-size: 38px; }
|
||||
}
|
||||
|
||||
.alt-h2 {
|
||||
@include alt-h2;
|
||||
}
|
||||
|
||||
@mixin alt-h3 {
|
||||
font-size: 18px;
|
||||
font-weight: $font-weight-normal;
|
||||
@include breakpoint(md) { font-size: $h3-size; }
|
||||
@include breakpoint(lg) { font-size: 22px; }
|
||||
}
|
||||
|
||||
.alt-h3 {
|
||||
@include alt-h3;
|
||||
}
|
||||
|
||||
.alt-h4 {
|
||||
font-size: $h4-size;
|
||||
.h00-mktg,
|
||||
.h0-mktg,
|
||||
.h1-mktg,
|
||||
.h2-mktg,
|
||||
.h3-mktg,
|
||||
.h4-mktg,
|
||||
.h5-mktg,
|
||||
.h6-mktg,
|
||||
.lead-mktg {
|
||||
font-family: $font-mktg;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.alt-h5 {
|
||||
font-size: $h5-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
@mixin h000-mktg {
|
||||
font-size: $h000-size-mobile !important;
|
||||
@include breakpoint(md) { font-size: $h000-size !important; }
|
||||
}
|
||||
|
||||
.alt-h6 {
|
||||
font-size: $h6-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
.h000-mktg { @include h000-mktg; }
|
||||
|
||||
@mixin h00-mktg {
|
||||
font-size: $h00-size-mobile !important;
|
||||
@include breakpoint(md) { font-size: $h00-size !important; }
|
||||
}
|
||||
|
||||
.h00-mktg { @include h00-mktg; }
|
||||
|
||||
@mixin h0-mktg {
|
||||
font-size: $h0-size-mobile !important;
|
||||
@include breakpoint(md) { font-size: $h0-size !important; }
|
||||
}
|
||||
|
||||
.h0-mktg { @include h0-mktg; }
|
||||
|
||||
@mixin h1-mktg {
|
||||
font-size: $h1-size-mobile !important;
|
||||
@include breakpoint(md) { font-size: $h1-size !important; }
|
||||
}
|
||||
|
||||
.h1-mktg { @include h1-mktg; }
|
||||
|
||||
@mixin h2-mktg {
|
||||
font-size: $h2-size-mobile !important;
|
||||
@include breakpoint(md) { font-size: $h2-size !important; }
|
||||
}
|
||||
|
||||
.h2-mktg { @include h2-mktg; }
|
||||
|
||||
@mixin h3-mktg {
|
||||
font-size: $h3-size-mobile !important;
|
||||
@include breakpoint(md) { font-size: $h3-size !important; }
|
||||
}
|
||||
|
||||
.h3-mktg { @include h3-mktg; }
|
||||
|
||||
.h4-mktg {
|
||||
font-size: $h4-size !important;
|
||||
}
|
||||
|
||||
.h5-mktg {
|
||||
font-size: $h5-size !important;
|
||||
}
|
||||
|
||||
.h6-mktg {
|
||||
font-size: $h6-size !important;
|
||||
}
|
||||
|
||||
// Big opening paragraphs
|
||||
@mixin alt-lead {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 21px;
|
||||
font-weight: $font-weight-light;
|
||||
@include breakpoint(md) { font-size: $h2-size; }
|
||||
@include breakpoint(lg) { font-size: 26px; }
|
||||
@mixin lead-mktg {
|
||||
font-size: $h3-size;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
.alt-lead {
|
||||
@include alt-lead;
|
||||
}
|
||||
|
||||
// For small text
|
||||
|
||||
.alt-text-small {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.lead-mktg { @include lead-mktg; }
|
||||
|
||||
// Pullquote
|
||||
|
||||
@ -104,7 +82,7 @@
|
||||
padding-bottom: 0;
|
||||
padding-left: $spacer;
|
||||
margin-bottom: $spacer-4;
|
||||
font-family: $alt-mono-font;
|
||||
font-family: $mono-font;
|
||||
font-size: $h4-size;
|
||||
line-height: 1.4;
|
||||
color: $text-gray;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.4.13",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-marketing-type",
|
||||
"description": "Typography for marketing websites at GitHub",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -31,8 +31,8 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-support": "1.5.6",
|
||||
"primer-support": "4.7.2"
|
||||
"primer-marketing-support": "2.0.0",
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
|
||||
@ -9,27 +9,18 @@ Marketing layout utilities build on top of [primer-core utilities](/css/utilitie
|
||||
|
||||
{:toc}
|
||||
|
||||
## Responsive position
|
||||
## Position elements with spacing utilities
|
||||
|
||||
Use responsive position utilities to adjust the position of an element at different breakpoints.
|
||||
Position elements from all four element edges (`top`, `right`, `bottom`, and `left`) using any spacing utility from the global spacing scale and the marketing spacing scale (from `$spacer-1` to `$spacer-12`), including negative and 0 values.
|
||||
|
||||
Use these with `.position-absolute` to position decorative assets and shapes on marketing sites.
|
||||
|
||||
In an effort to reduce the size of our CSS, responsive breakpoints are only supported for `md` and `lg` breakpoints. **There is no support for `sm` and `xl` breakpoints.**
|
||||
|
||||
```html
|
||||
<div class="position-relative p-6 bg-gray">
|
||||
<div class="d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2">
|
||||
.position-md-absolute
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="float-left border m-3" style="width:100px; height:100px;">
|
||||
default
|
||||
</div>
|
||||
<div class="float-left position-lg-relative border m-3" style="width:100px; height:100px; top:12px; left:12px;">
|
||||
.position-lg-relative
|
||||
</div>
|
||||
<div class="float-left border m-3" style="width:100px; height:100px;">
|
||||
default
|
||||
</div>
|
||||
<div class="float-left border m-3" style="width:100px; height:100px;">
|
||||
default
|
||||
<div class="border bg-white position-absolute top-2">.top-2</div>
|
||||
<div class="border bg-white position-absolute position-lg-static right-md-4">.right-md-4</div>
|
||||
<div class="border bg-white position-lg-absolute left-lg-1">.left-lg-1</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -6,25 +6,34 @@ status: Stable
|
||||
status_issue: https://github.com/github/design-systems/issues/378
|
||||
---
|
||||
|
||||
Marketing padding utilities extend [core margin utilities](/css/utilities/margin) across the y-axis only. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
|
||||
Marketing padding utilities extend [core margin utilities](/css/utilities/margin) across the x and y axis. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
|
||||
|
||||
## Y-axis padding utilities
|
||||
## Padding utilities
|
||||
|
||||
Use marketing padding utilities to apply padding to top, bottom, or both y-axis of an element. These utilities can change or override default padding, and can be used with a spacing scale of 7-12.
|
||||
Use marketing padding utilities to apply padding to top, right, bottom, left, x-axis, or y axis of an element. These utilities can change or override default padding, and can be used with a spacing scale of 7-12.
|
||||
|
||||
```html
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue pt-7">.pt-7</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue pr-7">.pr-7</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue pb-7">.pb-7</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue pl-7">.pl-7</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue px-7">.px-7</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue py-7">.py-7</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Responsive y-axis padding utilities
|
||||
## Responsive padding utilities
|
||||
|
||||
All marketing padding utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
// Layout utilities
|
||||
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
|
||||
|
||||
@warn "Responsive position utilities will be moved from primer-marketing-utilities to primer-utilities in primer v11.0.0.";
|
||||
|
||||
// Responsive position utilities
|
||||
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
// Responsive utilities to position content
|
||||
// No utilities for sm and xl breakpoints
|
||||
@each $breakpoint, $variant in $marketing-position-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
/* Set position to relative */
|
||||
.position-#{$breakpoint}-relative { position: relative !important; }
|
||||
/* Set position to absolute */
|
||||
.position-#{$breakpoint}-absolute { position: absolute !important; }
|
||||
/* Set position to fixed */
|
||||
.position-#{$breakpoint}-fixed { position: fixed !important; }
|
||||
@each $scale, $size in $marketing-all-spacers {
|
||||
.top#{$variant}-#{$scale} { top: $size !important; }
|
||||
.right#{$variant}-#{$scale} { right: $size !important; }
|
||||
.bottom#{$variant}-#{$scale} { bottom: $size !important; }
|
||||
.left#{$variant}-#{$scale} { left: $size !important; }
|
||||
|
||||
.top#{$variant}-n#{$scale} { top: -$size !important; }
|
||||
.right#{$variant}-n#{$scale} { right: -$size !important; }
|
||||
.bottom#{$variant}-n#{$scale} { bottom: -$size !important; }
|
||||
.left#{$variant}-n#{$scale} { left: -$size !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,40 +1,17 @@
|
||||
// Margin spacer utilities for marketing
|
||||
// Utilities only added for y-direction margin (i.e. top & bottom)
|
||||
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
|
||||
@for $i from 1 through length($marketingSpacers) {
|
||||
$size: #{nth($marketingSpacers, $i)};
|
||||
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
|
||||
|
||||
/* Set a #{$size} margin on the top */
|
||||
.mt-#{$scale} { margin-top : #{$size} !important; }
|
||||
/* Set a #{$size} margin on the bottom */
|
||||
.mb-#{$scale} { margin-bottom: #{$size} !important; }
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
@each $scale, $size in $marketing-spacers {
|
||||
|
||||
/* Set a #{$size} margin on the top & bottom */
|
||||
.my-#{$scale} {
|
||||
margin-top : #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
.mt#{$variant}-#{$scale} { margin-top: $size !important; }
|
||||
.mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
|
||||
|
||||
// Loop through the breakpoint values
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
|
||||
// Loop through the spacer values
|
||||
@for $i from 1 through length($marketingSpacers) {
|
||||
@include breakpoint($breakpoint) {
|
||||
$size: #{nth($marketingSpacers, $i)}; // sm, md, lg, xl
|
||||
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
|
||||
|
||||
/* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
|
||||
.mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
|
||||
/* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
|
||||
.mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
|
||||
|
||||
/* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
|
||||
.my-#{$breakpoint}-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
.my#{$variant}-#{$scale} {
|
||||
margin-top: $size !important;
|
||||
margin-bottom: $size !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,40 +1,15 @@
|
||||
// Padding spacer utilities for marketing
|
||||
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
|
||||
// stylelint-disable comment-empty-line-before
|
||||
@for $i from 1 through length($marketingSpacers) {
|
||||
$size: #{nth($marketingSpacers, $i)};
|
||||
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
|
||||
|
||||
/* Set a #{$size} padding to the top */
|
||||
.pt-#{$scale} { padding-top : #{$size} !important; }
|
||||
/* Set a #{$size} padding to the bottom */
|
||||
.pb-#{$scale} { padding-bottom: #{$size} !important; }
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
@each $scale, $size in $marketing-spacers {
|
||||
|
||||
/* Set a #{$size} padding to the top & bottom */
|
||||
.py-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
.pt#{$variant}-#{$scale} { padding-top: #{$size} !important; }
|
||||
.pb#{$variant}-#{$scale} { padding-bottom: #{$size} !important; }
|
||||
|
||||
// Responsive padding spacer utilities
|
||||
|
||||
// Loop through the breakpoint values
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
|
||||
// Loop through the spacer values
|
||||
@for $i from 1 through length($marketingSpacers) {
|
||||
@include breakpoint($breakpoint) {
|
||||
$size: #{nth($marketingSpacers, $i)}; // xs, sm, md, lg, xl
|
||||
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
|
||||
|
||||
/* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */
|
||||
.pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
|
||||
/* Set a #{$size} padding to the bottom at the #{$breakpoint} breakpoint */
|
||||
.pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
|
||||
|
||||
/* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
|
||||
.py-#{$breakpoint}-#{$scale} {
|
||||
.py#{$variant}-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.3",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-marketing-utilities",
|
||||
"description": "Marketing specific immutable, atomic CSS classes",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -35,8 +35,8 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-support": "1.5.6",
|
||||
"primer-support": "4.7.2"
|
||||
"primer-marketing-support": "2.0.0",
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -71,3 +71,10 @@ storiesOf('Marketing utilities', module)
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Position with spacing utils', () => (
|
||||
<div className='position-relative p-6 bg-gray'>
|
||||
<div className='position-absolute top-2 top-md-0 top-lg-8 border bg-white p-2'>
|
||||
.position-absolute
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
|
||||
@ -17,7 +17,4 @@
|
||||
// marketing specific css modules
|
||||
@import "primer-marketing-type/index.scss";
|
||||
@import "primer-marketing-buttons/index.scss";
|
||||
@import "primer-page-headers/index.scss";
|
||||
@import "primer-page-sections/index.scss";
|
||||
@import "primer-tables/index.scss";
|
||||
@import "primer-marketing-utilities/index.scss";
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "6.3.3",
|
||||
"version": "7.0.0",
|
||||
"name": "primer-marketing",
|
||||
"description": "Primer marketing packages",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -29,13 +29,10 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-buttons": "1.0.13",
|
||||
"primer-marketing-support": "1.5.6",
|
||||
"primer-marketing-type": "1.4.13",
|
||||
"primer-marketing-utilities": "1.7.3",
|
||||
"primer-page-headers": "1.5.3",
|
||||
"primer-page-sections": "1.5.3",
|
||||
"primer-support": "4.7.2",
|
||||
"primer-tables": "1.5.3"
|
||||
"primer-marketing-buttons": "2.0.0",
|
||||
"primer-marketing-support": "2.0.0",
|
||||
"primer-marketing-type": "2.0.0",
|
||||
"primer-marketing-utilities": "2.0.0",
|
||||
"primer-support": "5.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.5.11",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-navigation",
|
||||
"description": "Singular purpose and flexible navigation elements.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -30,7 +30,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
*.yml
|
||||
.github
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 GitHub Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,58 +0,0 @@
|
||||
# Primer Marketing CSS Page Headers
|
||||
|
||||
[](https://www.npmjs.org/package/primer-page-headers)
|
||||
[](https://travis-ci.org/primer/primer)
|
||||
|
||||
> Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
|
||||
## Documentation
|
||||
|
||||
<!-- %docs
|
||||
title: Page headers
|
||||
status: Deprecated
|
||||
-->
|
||||
|
||||
**This component will be removed, and the `primer-page-headers` npm package deprecated, in Primer version 11.**
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-page-headers` with this command.
|
||||
|
||||
```
|
||||
$ npm install --save primer-page-headers
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
|
||||
```scss
|
||||
@import "primer-page-headers/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css`
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/primer
|
||||
[primer-support]: https://github.com/primer/primer-support
|
||||
[support]: https://github.com/primer/primer-support
|
||||
[docs]: http://primer.github.io/
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
@ -1,6 +0,0 @@
|
||||
@warn "The entire primer-page-headers package will be removed in primer v11.0.0.";
|
||||
|
||||
// support files
|
||||
@import "primer-support/index.scss";
|
||||
@import "primer-marketing-support/index.scss";
|
||||
@import "./lib/headers.scss";
|
||||
@ -1,68 +0,0 @@
|
||||
.jumbotron {
|
||||
position: relative;
|
||||
padding-top: $spacer-6;
|
||||
padding-bottom: $spacer-6;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding-top: $spacer-6 * 1.5;
|
||||
padding-bottom: $spacer-6 * 1.5;
|
||||
}
|
||||
|
||||
@include breakpoint(xl) {
|
||||
padding-top: $spacer-6 * 3;
|
||||
padding-bottom: $spacer-6 * 3;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-supertron {
|
||||
@include breakpoint(lg) {
|
||||
height: 45vw;
|
||||
min-height: 590px;
|
||||
max-height: 55vh;
|
||||
padding-top: $spacer-6 + $spacer-6;
|
||||
padding-bottom: $spacer-6 + $spacer-6;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-minitron {
|
||||
padding-top: $spacer-4;
|
||||
padding-bottom: $spacer-4;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding-top: $spacer-5;
|
||||
padding-bottom: $spacer-5;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-shadow {
|
||||
// Shadow
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
content: " ";
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
|
||||
background-repeat: repeat-x;
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-photo {
|
||||
position: relative;
|
||||
background-color: $gray-dark;
|
||||
background-size: cover;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
{
|
||||
"version": "1.5.3",
|
||||
"name": "primer-page-headers",
|
||||
"description": "Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "build/build.css",
|
||||
"sass": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"primer": {
|
||||
"category": "marketing",
|
||||
"module_type": "components"
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"lib",
|
||||
"build"
|
||||
],
|
||||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-page-headers",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint",
|
||||
"prepublishOnly": "../../script/notify pending",
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-support": "1.5.6",
|
||||
"primer-support": "4.7.2"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
"flash",
|
||||
"github",
|
||||
"hero",
|
||||
"jumbotron",
|
||||
"primer",
|
||||
"design-system",
|
||||
"style"
|
||||
]
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
*.yml
|
||||
.github
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 GitHub Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,57 +0,0 @@
|
||||
# Primer Page Sections
|
||||
|
||||
[](https://www.npmjs.org/package/primer-page-sections)
|
||||
[](https://travis-ci.org/primer/primer)
|
||||
|
||||
> Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
|
||||
## Documentation
|
||||
|
||||
<!-- %docs
|
||||
title: Page sections
|
||||
status: Deprecated
|
||||
-->
|
||||
|
||||
**This component will be removed, and the `primer-page-sections` npm package deprecated, in Primer version 11.**
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
## Install
|
||||
|
||||
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-page-sections` with this command.
|
||||
|
||||
```
|
||||
$ npm install --save primer-page-sections
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
|
||||
```scss
|
||||
@import "primer-page-sections/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css`
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/primer
|
||||
[primer-support]: https://github.com/primer/primer-support
|
||||
[support]: https://github.com/primer/primer-support
|
||||
[docs]: http://primer.github.io/
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
@ -1,6 +0,0 @@
|
||||
@warn "The entire primer-page-sections package will be removed in primer v11.0.0.";
|
||||
|
||||
// support files
|
||||
@import "primer-support/index.scss";
|
||||
@import "primer-marketing-support/index.scss";
|
||||
@import "./lib/page-section.scss";
|
||||
@ -1,18 +0,0 @@
|
||||
// Styles for page sections
|
||||
.page-section {
|
||||
padding: $spacer-5 0;
|
||||
margin-top: 0;
|
||||
|
||||
@include breakpoint(md) {
|
||||
padding: $spacer-6 + $spacer-3 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Adds a little extra headroom for sections linked to via in-page anchor links
|
||||
.page-section-jumplink:target {
|
||||
padding-top: ($spacer-6 * 2) + $spacer-5;
|
||||
|
||||
@include breakpoint(md) {
|
||||
padding-top: $spacer-6 * 2;
|
||||
}
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
{
|
||||
"version": "1.5.3",
|
||||
"name": "primer-page-sections",
|
||||
"description": "Styles to create distinct sections of marketing pages at GitHub.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "build/build.css",
|
||||
"sass": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"primer": {
|
||||
"category": "marketing",
|
||||
"module_type": "components"
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"lib",
|
||||
"build"
|
||||
],
|
||||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-page-sections",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint",
|
||||
"prepublishOnly": "../../script/notify pending",
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-support": "1.5.6",
|
||||
"primer-support": "4.7.2"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
"github",
|
||||
"page sections",
|
||||
"primer",
|
||||
"design-system",
|
||||
"sections",
|
||||
"style"
|
||||
]
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.7",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-pagination",
|
||||
"description": "Pagination component for applying button styles to a connected set of links that go to related pages",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -26,7 +26,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"github",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.1.8",
|
||||
"version": "1.0.0",
|
||||
"name": "primer-popover",
|
||||
"description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -26,7 +26,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"github",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "5.8.3",
|
||||
"version": "6.0.0",
|
||||
"name": "primer-product",
|
||||
"description": "Primer's product modules",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -29,15 +29,15 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-alerts": "1.5.13",
|
||||
"primer-avatars": "1.5.10",
|
||||
"primer-blankslate": "1.5.2",
|
||||
"primer-branch-name": "1.0.11",
|
||||
"primer-labels": "1.5.13",
|
||||
"primer-markdown": "3.7.13",
|
||||
"primer-popover": "0.1.8",
|
||||
"primer-progress": "0.1.3",
|
||||
"primer-subhead": "1.0.11",
|
||||
"primer-support": "4.7.2"
|
||||
"primer-alerts": "2.0.0",
|
||||
"primer-avatars": "2.0.0",
|
||||
"primer-blankslate": "2.0.0",
|
||||
"primer-branch-name": "2.0.0",
|
||||
"primer-labels": "2.0.0",
|
||||
"primer-markdown": "4.0.0",
|
||||
"primer-popover": "1.0.0",
|
||||
"primer-progress": "1.0.0",
|
||||
"primer-subhead": "2.0.0",
|
||||
"primer-support": "5.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.1.3",
|
||||
"version": "1.0.0",
|
||||
"name": "primer-progress",
|
||||
"description": "Use Progress components to visualize task completion",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -31,7 +31,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"github",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.11",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-subhead",
|
||||
"description": "The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -26,7 +26,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"github",
|
||||
|
||||
@ -11,24 +11,38 @@
|
||||
// 5 => 32px
|
||||
// 6 => 40px
|
||||
$spacer: 8px !default;
|
||||
|
||||
// Our spacing scale
|
||||
$spacer-0: 0 !default; // 0
|
||||
$spacer-1: round($spacer / 2) !default; // 4px
|
||||
$spacer-2: $spacer !default; // 8px
|
||||
$spacer-3: $spacer * 2 !default; // 16px
|
||||
$spacer-4: $spacer * 3 !default; // 24px
|
||||
$spacer-5: $spacer * 4 !default; // 32px
|
||||
$spacer-6: $spacer * 5 !default; // 40px
|
||||
|
||||
// The list of spacer values
|
||||
$spacers: (
|
||||
0,
|
||||
round($spacer / 2),
|
||||
$spacer,
|
||||
$spacer * 2,
|
||||
$spacer * 3,
|
||||
$spacer * 4,
|
||||
$spacer * 5
|
||||
$spacer-0,
|
||||
$spacer-1,
|
||||
$spacer-2,
|
||||
$spacer-3,
|
||||
$spacer-4,
|
||||
$spacer-5,
|
||||
$spacer-6,
|
||||
) !default;
|
||||
|
||||
// Aliases for easy use
|
||||
$spacer-0: nth($spacers, 1) !default; // 0
|
||||
$spacer-1: nth($spacers, 2) !default; // 4px
|
||||
$spacer-2: nth($spacers, 3) !default; // 8px
|
||||
$spacer-3: nth($spacers, 4) !default; // 16px
|
||||
$spacer-4: nth($spacers, 5) !default; // 24px
|
||||
$spacer-5: nth($spacers, 6) !default; // 32px
|
||||
$spacer-6: nth($spacers, 7) !default; // 40px
|
||||
// And the map of spacers, for easier looping:
|
||||
// @each $scale, $length in $spacer-map { ... }
|
||||
$spacer-map: (
|
||||
0: $spacer-0,
|
||||
1: $spacer-1,
|
||||
2: $spacer-2,
|
||||
3: $spacer-3,
|
||||
4: $spacer-4,
|
||||
5: $spacer-5,
|
||||
6: $spacer-6,
|
||||
) !default;
|
||||
|
||||
// Em spacer variables
|
||||
$em-spacer-1: 0.0625em !default; // 1/16
|
||||
@ -43,30 +57,53 @@ $container-width: 980px !default;
|
||||
$grid-gutter: 10px !default;
|
||||
|
||||
// Breakpoint widths
|
||||
$width-xs: 0;
|
||||
$width-sm: 544px;
|
||||
$width-md: 768px;
|
||||
$width-lg: 1012px;
|
||||
$width-xl: 1280px;
|
||||
$width-xs: 0 !default;
|
||||
// Small screen / phone
|
||||
$width-sm: 544px !default;
|
||||
// Medium screen / tablet
|
||||
$width-md: 768px !default;
|
||||
// Large screen / desktop (980 + (16 * 2)) <= container + gutters
|
||||
$width-lg: 1012px !default;
|
||||
// Extra large screen / wide desktop
|
||||
$width-xl: 1280px !default;
|
||||
|
||||
// Responsive container widths
|
||||
$container-sm: $width-sm !default;
|
||||
$container-md: $width-md !default;
|
||||
$container-lg: $width-lg !default;
|
||||
$container-xl: $width-xl !default;
|
||||
|
||||
// Breakpoints
|
||||
// Breakpoints in the form (name: length)
|
||||
$breakpoints: (
|
||||
// Small screen / phone
|
||||
sm: $width-sm,
|
||||
// Medium screen / tablet
|
||||
md: $width-md,
|
||||
// Large screen / desktop (980 + (16 * 2)) <= container + gutters
|
||||
lg: $width-lg,
|
||||
// Extra large screen / wide desktop
|
||||
xl: $width-xl
|
||||
) !default;
|
||||
|
||||
$responsive-variants: ("": "");
|
||||
@each $key in map-keys($breakpoints) {
|
||||
$responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
|
||||
}
|
||||
// This map in the form (breakpoint: variant) is used to iterate over
|
||||
// breakpoints and create both responsive and non-responsive classes in one
|
||||
// loop:
|
||||
//
|
||||
// ```scss
|
||||
// @each $breakpoint, $variant of $responsive-variants {
|
||||
// @include breakpoint($breakpoint) {
|
||||
// .foo#{$variant}-bar { foo: bar !important; }
|
||||
// }
|
||||
// }
|
||||
// ```
|
||||
$responsive-variants: (
|
||||
"": "",
|
||||
sm: "-sm",
|
||||
md: "-md",
|
||||
lg: "-lg",
|
||||
xl: "-xl",
|
||||
) !default;
|
||||
|
||||
// responive utility position values
|
||||
$responsive-positions: (
|
||||
static,
|
||||
relative,
|
||||
absolute,
|
||||
fixed
|
||||
) !default;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "4.7.2",
|
||||
"version": "5.0.0",
|
||||
"name": "primer-support",
|
||||
"description": "Sass variables, mixins, and functions for use in our components.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.4.13",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-table-object",
|
||||
"description": "A module for creating dynamically resizable elements that always sit on the same horizontal line.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -31,7 +31,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
*.yml
|
||||
.github
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 GitHub Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,57 +0,0 @@
|
||||
# Primer Marketing CSS Tables
|
||||
|
||||
[](https://www.npmjs.org/package/primer-tables)
|
||||
[](https://travis-ci.org/primer/primer)
|
||||
|
||||
> Styles to display tabular data for marketing websites at GitHub.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
|
||||
## Documentation
|
||||
|
||||
<!-- %docs
|
||||
title: Tables
|
||||
status: Deprecated
|
||||
-->
|
||||
|
||||
**This component will be removed, and the `primer-tables` npm package deprecated, in Primer version 11.**
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
## Install
|
||||
|
||||
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-tables` with this command.
|
||||
|
||||
```
|
||||
$ npm install --save primer-tables
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
|
||||
```scss
|
||||
@import "primer-tables/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css`
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/primer
|
||||
[primer-support]: https://github.com/primer/primer-support
|
||||
[support]: https://github.com/primer/primer-support
|
||||
[docs]: http://primer.github.io/
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
@ -1,6 +0,0 @@
|
||||
@warn "The entire primer-tables package will be removed in primer v11.0.0.";
|
||||
|
||||
// support files
|
||||
@import "primer-support/index.scss";
|
||||
@import "primer-marketing-support/index.scss";
|
||||
@import "./lib/tables.scss";
|
||||
@ -1,39 +0,0 @@
|
||||
// stylelint-disable selector-max-type, selector-max-compound-selectors
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
margin-top: $spacer-3;
|
||||
border-collapse: collapse;
|
||||
border: $border;
|
||||
box-shadow: 0 1px 1px rgba($black, 0.05);
|
||||
|
||||
th {
|
||||
font-weight: $font-weight-normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: $spacer-3;
|
||||
border-right: $border;
|
||||
border-bottom: $border;
|
||||
}
|
||||
|
||||
tbody {
|
||||
th {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border-bottom-color: $border-gray;
|
||||
}
|
||||
|
||||
tr:last-child {
|
||||
th,
|
||||
td {
|
||||
border-bottom: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
{
|
||||
"version": "1.5.3",
|
||||
"name": "primer-tables",
|
||||
"description": "Styles to display tabular data for marketing websites at GitHub.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "build/build.css",
|
||||
"sass": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"primer": {
|
||||
"category": "marketing",
|
||||
"module_type": "components"
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"lib",
|
||||
"build"
|
||||
],
|
||||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-tables",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint",
|
||||
"prepublishOnly": "../../script/notify pending",
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-support": "1.5.6",
|
||||
"primer-support": "4.7.2"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
"github",
|
||||
"primer",
|
||||
"design-system",
|
||||
"style",
|
||||
"tables"
|
||||
]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
|
||||
|
||||
const stories = storiesOf('Tables', module)
|
||||
|
||||
storiesFromMarkdown(require.context('.', true, /\.md$/))
|
||||
.forEach(({title, story}) => {
|
||||
stories.add(title, story)
|
||||
})
|
||||
@ -277,38 +277,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alert tooltips
|
||||
//
|
||||
// Colors for different alert states.
|
||||
@mixin colorizeTooltip($text-color, $background-color) {
|
||||
&::after {
|
||||
color: $text-color;
|
||||
background: $background-color;
|
||||
}
|
||||
|
||||
&.tooltipped-s,
|
||||
&.tooltipped-se,
|
||||
&.tooltipped-sw {
|
||||
&::before {
|
||||
border-bottom-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltipped-n,
|
||||
&.tooltipped-ne,
|
||||
&.tooltipped-nw {
|
||||
&::before {
|
||||
border-top-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltipped-e::before {
|
||||
border-right-color: $background-color;
|
||||
}
|
||||
|
||||
&.tooltipped-w::before {
|
||||
border-left-color: $background-color;
|
||||
}
|
||||
}
|
||||
@warn "the colorizeTooltip mixin will be deprecated in version 11.";
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.5.11",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-tooltips",
|
||||
"description": "Add tooltips built entirely in CSS to nearly any element.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -31,7 +31,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.4.13",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-truncate",
|
||||
"description": "Shorten text with an ellipsis.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -31,7 +31,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -28,7 +28,7 @@ These types of shadows are typically applied to elements with borders, such as t
|
||||
<h3 class="m-0">Organization</h3>
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
<p class="mb-0 alt-text-small text-gray">
|
||||
<p class="mb-0 text-gray">
|
||||
Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled church-key thundercats. Brooklyn bicycle rights tousled, marfa actually.
|
||||
</p>
|
||||
</div>
|
||||
@ -56,7 +56,7 @@ Medium box shadows are typically used on editorialized content that needs to app
|
||||
<a class="d-block box-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
|
||||
<div class="bg-blue position-absolute top-0 left-0 py-1 width-full"></div>
|
||||
<h3 class="text-gray-dark">Serverless architecture</h3>
|
||||
<p class="alt-text-small text-gray">
|
||||
<p class="text-gray">
|
||||
Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks.
|
||||
</p>
|
||||
<ul class="position-absolute bottom-0 pb-3 text-small text-gray list-style-none ">
|
||||
|
||||
@ -273,6 +273,18 @@ _Note: fixed positioning has been disabled here for demonstration only._
|
||||
</div>
|
||||
```
|
||||
|
||||
### Responsive position
|
||||
|
||||
Position utilities can be applied or changed per breakpoint in responsive layouts. Each responsive position utility is applied to the specified breakpoint and up, using the following formula: `position-[breakpoint]-[property]`. For example: `position-md-absolute`.
|
||||
|
||||
```html
|
||||
<div style="height: 64px;">
|
||||
<div class="border position-md-absolute top-0 right-0">
|
||||
.position-md-absolute .top-0 .right-0
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Screen reader only
|
||||
|
||||
Use `.sr-only` to position an element outside of the viewport for screen reader access only. **Even though the element can't be seen, make sure it still has a sensible tab order.**
|
||||
|
||||
@ -2,14 +2,16 @@
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||
// stylelint-disable comment-empty-line-before
|
||||
|
||||
/* Set position to static */
|
||||
.position-static { position: static !important; }
|
||||
/* Set position to relative */
|
||||
.position-relative { position: relative !important; }
|
||||
/* Set position to absolute */
|
||||
.position-absolute { position: absolute !important; }
|
||||
/* Set position to fixed */
|
||||
.position-fixed { position: fixed !important; }
|
||||
// Loop through the breakpoint values
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
@each $position in $responsive-positions {
|
||||
.position#{$variant}-#{$position} {
|
||||
position: $position !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Set top 0 */
|
||||
.top-0 { top: 0 !important; }
|
||||
|
||||
@ -5,10 +5,7 @@
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
// Loop through the spacer values
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: nth($spacers, $i); // sm, md, lg, xl
|
||||
$scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
|
||||
|
||||
@each $scale, $size in $spacer-map {
|
||||
/* Set a $size margin to all sides at $breakpoint */
|
||||
.m#{$variant}-#{$scale} { margin: $size !important; }
|
||||
/* Set a $size margin on the top at $breakpoint */
|
||||
|
||||
@ -6,10 +6,7 @@
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
// Loop through the spacer values
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: nth($spacers, $i); // xs, sm, md, lg, xl
|
||||
$scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
|
||||
|
||||
@each $scale, $size in $spacer-map {
|
||||
/* Set a $size padding to all sides at $breakpoint */
|
||||
.p#{$variant}-#{$scale} { padding: $size !important; }
|
||||
/* Set a $size padding to the top at $breakpoint */
|
||||
|
||||
@ -206,7 +206,7 @@
|
||||
|
||||
/* Set to monospace font */
|
||||
.text-mono {
|
||||
font-family: $mono-font;
|
||||
font-family: $mono-font !important;
|
||||
}
|
||||
|
||||
/* Disallow user from selecting text */
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "4.14.4",
|
||||
"version": "5.0.0",
|
||||
"name": "primer-utilities",
|
||||
"description": "Immutable, atomic CSS classes to rapidly build product",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -31,7 +31,7 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.7.2"
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "10.10.5",
|
||||
"version": "11.0.0",
|
||||
"name": "primer",
|
||||
"description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -30,38 +30,35 @@
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-alerts": "1.5.13",
|
||||
"primer-avatars": "1.5.10",
|
||||
"primer-base": "1.9.2",
|
||||
"primer-blankslate": "1.5.2",
|
||||
"primer-box": "2.5.13",
|
||||
"primer-branch-name": "1.0.11",
|
||||
"primer-breadcrumb": "1.5.9",
|
||||
"primer-buttons": "2.6.4",
|
||||
"primer-core": "6.10.9",
|
||||
"primer-forms": "2.1.8",
|
||||
"primer-labels": "1.5.13",
|
||||
"primer-layout": "1.6.2",
|
||||
"primer-markdown": "3.7.13",
|
||||
"primer-marketing": "6.3.3",
|
||||
"primer-marketing-buttons": "1.0.13",
|
||||
"primer-marketing-support": "1.5.6",
|
||||
"primer-marketing-type": "1.4.13",
|
||||
"primer-marketing-utilities": "1.7.3",
|
||||
"primer-navigation": "1.5.11",
|
||||
"primer-page-headers": "1.5.3",
|
||||
"primer-page-sections": "1.5.3",
|
||||
"primer-pagination": "1.0.7",
|
||||
"primer-popover": "0.1.8",
|
||||
"primer-product": "5.8.3",
|
||||
"primer-progress": "0.1.3",
|
||||
"primer-subhead": "1.0.11",
|
||||
"primer-support": "4.7.2",
|
||||
"primer-table-object": "1.4.13",
|
||||
"primer-tables": "1.5.3",
|
||||
"primer-tooltips": "1.5.11",
|
||||
"primer-truncate": "1.4.13",
|
||||
"primer-utilities": "4.14.4"
|
||||
"primer-alerts": "2.0.0",
|
||||
"primer-avatars": "2.0.0",
|
||||
"primer-base": "2.0.0",
|
||||
"primer-blankslate": "2.0.0",
|
||||
"primer-box": "3.0.0",
|
||||
"primer-branch-name": "2.0.0",
|
||||
"primer-breadcrumb": "2.0.0",
|
||||
"primer-buttons": "3.0.0",
|
||||
"primer-core": "7.0.0",
|
||||
"primer-forms": "3.0.0",
|
||||
"primer-labels": "2.0.0",
|
||||
"primer-layout": "2.0.0",
|
||||
"primer-markdown": "4.0.0",
|
||||
"primer-marketing": "7.0.0",
|
||||
"primer-marketing-buttons": "2.0.0",
|
||||
"primer-marketing-support": "2.0.0",
|
||||
"primer-marketing-type": "2.0.0",
|
||||
"primer-marketing-utilities": "2.0.0",
|
||||
"primer-navigation": "2.0.0",
|
||||
"primer-pagination": "2.0.0",
|
||||
"primer-popover": "1.0.0",
|
||||
"primer-product": "6.0.0",
|
||||
"primer-progress": "1.0.0",
|
||||
"primer-subhead": "2.0.0",
|
||||
"primer-support": "5.0.0",
|
||||
"primer-table-object": "2.0.0",
|
||||
"primer-tooltips": "2.0.0",
|
||||
"primer-truncate": "2.0.0",
|
||||
"primer-utilities": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
510
package-lock.json
generated
510
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -24,7 +24,7 @@ else
|
||||
fi
|
||||
|
||||
now_args="--token=$NOW_TOKEN"
|
||||
npx commit-status pending docs "deploying v$version docs..."
|
||||
npx commit-status pending docs "deploying docs for primer@$version"
|
||||
|
||||
echo "deploying..."
|
||||
now "$now_args" | tee now-url.txt
|
||||
|
||||
@ -22,8 +22,8 @@ version=$(jq -r .version package.json)
|
||||
name=$(jq -r .name package.json)
|
||||
|
||||
# the commit status context
|
||||
context="npm publish $name"
|
||||
context="$name@$version"
|
||||
message="https://unpkg.com/$name@$version/"
|
||||
|
||||
echo "📡 Transmitting publish status for $context $name@$version..."
|
||||
commit-status "$_status" "$context" "$name@$version" "$message"
|
||||
echo "📡 Transmitting publish status for $context..."
|
||||
commit-status "$_status" "$context" "publish" "$message"
|
||||
|
||||
28
script/selector-diff-report
Executable file
28
script/selector-diff-report
Executable file
@ -0,0 +1,28 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
module=${1:-primer}
|
||||
version=${2:-latest}
|
||||
|
||||
function log() {
|
||||
echo "$@" 1>&2
|
||||
}
|
||||
|
||||
log "Pulling the latest ${module}/build/data.json ..."
|
||||
curl -sL "https://unpkg.com/${module}@${version}/build/data.json" > before.json
|
||||
|
||||
log "Building ${module}/build/data.json locally..."
|
||||
pushd modules/${module} > /dev/null
|
||||
npm run build
|
||||
popd > /dev/null
|
||||
cp modules/${module}/build/data.json after.json
|
||||
|
||||
function list_selectors() {
|
||||
jq -r .cssstats.selectors.values[] $1 | sort
|
||||
}
|
||||
|
||||
list_selectors before.json > before.txt
|
||||
list_selectors after.json > after.txt
|
||||
|
||||
diff before.txt after.txt && log "(no diff!)"
|
||||
rm {before,after}.{json,txt}
|
||||
@ -17,7 +17,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"colorette": "1.0.7",
|
||||
"primer-support": "4.7.2",
|
||||
"primer-support": "5.0.0",
|
||||
"yeoman-generator": "^1.1.1"
|
||||
},
|
||||
"keywords": [
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.11",
|
||||
"version": "2.0.0",
|
||||
"name": "primer-module-build",
|
||||
"description": "Scripts to build primer SCSS modules into CSS and stats",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -46,7 +46,7 @@
|
||||
"postcss": "^5.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"primer-utilities": "4.14.4",
|
||||
"primer-utilities": "5.0.0",
|
||||
"tempy": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -824,8 +824,24 @@
|
||||
".pl-xl-6",
|
||||
".position-absolute",
|
||||
".position-fixed",
|
||||
".position-lg-absolute",
|
||||
".position-lg-fixed",
|
||||
".position-lg-relative",
|
||||
".position-lg-static",
|
||||
".position-md-absolute",
|
||||
".position-md-fixed",
|
||||
".position-md-relative",
|
||||
".position-md-static",
|
||||
".position-relative",
|
||||
".position-sm-absolute",
|
||||
".position-sm-fixed",
|
||||
".position-sm-relative",
|
||||
".position-sm-static",
|
||||
".position-static",
|
||||
".position-xl-absolute",
|
||||
".position-xl-fixed",
|
||||
".position-xl-relative",
|
||||
".position-xl-static",
|
||||
".pr-0",
|
||||
".pr-1",
|
||||
".pr-2",
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user