···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+/*!
22+ * Primer-core
33+ * http://primer.github.io
44+ *
55+ * Released under MIT license. Copyright (c) 2019 GitHub Inc.
66+ */
77+88+// Primer master file
99+//
1010+// Imports all Primer files in their intended order for easy mass-inclusion.
1111+// Should you need specific files, you can easily use separate `@import`s.
1212+1313+// Global requirements
1414+@import "primer-support/index.scss";
1515+1616+// Core modules
1717+@import "primer-base/index.scss";
1818+@import "primer-box/index.scss";
1919+@import "primer-breadcrumb/index.scss";
2020+@import "primer-buttons/index.scss";
2121+@import "primer-table-object/index.scss";
2222+@import "primer-forms/index.scss";
2323+@import "primer-layout/index.scss";
2424+@import "primer-navigation/index.scss";
2525+@import "primer-pagination/index.scss";
2626+@import "primer-tooltips/index.scss";
2727+@import "primer-truncate/index.scss";
2828+2929+// Utilities always go last so that they can override components
3030+@import "primer-utilities/index.scss";
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
+89
node_modules/primer-pagination/README.md
···11+# Primer Pagination
22+33+[](https://www.npmjs.org/package/primer-pagination)
44+[](https://travis-ci.org/primer/primer)
55+66+> Pagination component for applying button styles to a connected set of links that go to related pages
77+88+This repository is a module of the full [primer][primer] repository.
99+1010+## Install
1111+1212+This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-pagination` with this command.
1313+1414+```
1515+$ npm install --save primer-pagination
1616+```
1717+1818+## Usage
1919+2020+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.
2121+2222+```scss
2323+@import "primer-pagination/index.scss";
2424+```
2525+2626+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._
2727+2828+## Build
2929+3030+For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
3131+3232+```
3333+$ npm run build
3434+```
3535+3636+## Documentation
3737+3838+<!-- %docs
3939+title: Pagination
4040+path: components/pagination
4141+status: New Release
4242+-->
4343+4444+Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
4545+4646+{:toc}
4747+4848+## Previous/next pagination
4949+5050+You can make a very simple pagination container with just the Previous and Next buttons. Add the class `disabled` to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.
5151+5252+```html
5353+<nav class="paginate-container" aria-label="Pagination">
5454+ <div class="pagination">
5555+ <span class="previous_page disabled">Previous</span>
5656+ <a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
5757+ </div>
5858+</nav>
5959+```
6060+6161+## Numbered pagination
6262+6363+For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages.
6464+6565+To do this, add anchor links to the `pagination` element. Previous and Next buttons should always be present. Add the class `disabled` to the Previous button if you're on the first page. Apply the class `current` to the current numbered page.
6666+6767+As always, make sure to include the appropriate `aria` attributes to make the element accessible.
6868+6969+- Add `aria-label="Pagination"` to the the `paginate-container` element.
7070+- Add `aria-current="true"` to the current page marker.
7171+- Add `aria-label="Page X"` to each anchor link.
7272+7373+```html
7474+<nav class="paginate-container" aria-label="Pagination">
7575+ <div class="pagination">
7676+ <span class="previous_page disabled">Previous</span>
7777+ <em class="current selected" aria-current="true">1</em>
7878+ <a href="#url" aria-label="Page 2">2</a>
7979+ <a href="#url" aria-label="Page 3">3</a>
8080+ <span class="gap">…</span>
8181+ <a href="#url" aria-label="Page 8">8</a>
8282+ <a href="#url" aria-label="Page 9">9</a>
8383+ <a href="#url" aria-label="Page 10">10</a>
8484+ <a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
8585+ </div>
8686+</nav>
8787+```
8888+8989+<!-- %enddocs -->
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+---
22+title: Breakpoints
33+path: support/breakpoints
44+status: Stable
55+---
66+77+{:toc}
88+99+Our breakpoints are based on screen widths where our content starts to break. Since most of GitHub is currently a fixed-width with we use pixel widths to make it easy for us to match page widths for responsive and non-responsive pages. **Our breakpoints may change as we move more of the product into responsive layouts.**
1010+1111+We use abbreviations for each breakpoint to keep the class names concise. This abbreviated syntax is used consistently across responsive styles. Responsive styles allow you to change the styles properties at each breakpoint. For example, when using column widths for grid layouts, you can change specify that the width is 12 columns wide at the small breakpoint, and 6 columns wide from the large breakpoint: `<div class="col-sm-12 col-lg-6">...</div>`
1212+1313+| Breakpoint | Syntax | Description |
1414+| --- | --- | --- |
1515+| Small | sm | min-width: 544px |
1616+| Medium | md | min-width: 768px |
1717+| Large | lg | min-width: 1012px |
1818+| Extra-large | xl | min-width: 1280px |
1919+2020+**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `16px` (`$spacer-3`). This is so that content doesn't touch the edges of the window when resized.
2121+2222+Responsive styles are available for [margin](/css/utilities/margin#responsive-margins), [padding](/css/utilities/padding#responsive-padding), [layout](/css/utilities/layout), [flexbox](/css/utilities/flexbox#responsive-flex-utilities), and the [grid](/css/objects/grid#responsive-grids) system.
2323+2424+## Breakpoint variables
2525+2626+The above values are defined as variables, and then put into a Sass map that generates the media query mixin.
2727+2828+```scss
2929+// breakpoints
3030+$width-xs: 0;
3131+$width-sm: 544px;
3232+$width-md: 768px;
3333+$width-lg: 1012px;
3434+$width-xl: 1280px;
3535+3636+$breakpoints: (
3737+ // Small screen / phone
3838+ sm: $width-sm,
3939+ // Medium screen / tablet
4040+ md: $width-md,
4141+ // Large screen / desktop (980 + (12 * 2)) <= container + gutters
4242+ lg: $width-lg,
4343+ // Extra large screen / wide desktop
4444+ xl: $width-xl
4545+) !default;
4646+```
4747+4848+## Media query mixins
4949+Use media query mixins when you want to change CSS properties at a particular breakpoint. The media query mixin works by passing in a breakpoint value, such as `breakpoint(md)`.
5050+5151+Media queries are scoped from each breakpoint and upwards. In the example below, the font size is `28px` until the viewport size meets the `lg` breakpoint, from there upwards—including through the `xl` breakpoint—the font size will be `32px`.
5252+5353+```scss
5454+.styles {
5555+ font-size: 28px;
5656+ @include breakpoint(md) { font-size: 32px; }
5757+}
5858+```
5959+6060+## Responsive variants
6161+The `$responsive-variants` variable is a mapping of breakpoints to classname variants, and should be used like so:
6262+6363+```scss
6464+@each $breakpoint, $variant in $responsive-variants {
6565+ @include breakpoint($breakpoint) {
6666+ // Note: the first iteration gets `$variant == ""`
6767+ .overflow#{$variant}-auto { overflow: auto; }
6868+ }
6969+}
7070+```
7171+7272+The resulting CSS would be:
7373+7474+```css
7575+.overflow-auto { overflow: auto; }
7676+@media (min-width: 544px) { .overflow-sm-auto { overflow: auto; } }
7777+@media (min-width: 768px) { .overflow-md-auto { overflow: auto; } }
7878+@media (min-width: 1012px) { .overflow-lg-auto { overflow: auto; } }
7979+@media (min-width: 1280px) { .overflow-xl-auto { overflow: auto; } }
8080+```
8181+8282+#### Caution!
8383+1. Don't precede the `#{$variation}` interpolation with a hyphen because the first value of `$variant` will be an empty string.
8484+1. For consistency, please put the `@include breakpoint($breakpoint)` call directly inside the `$responsive-variants` loop. This will help keep file sizes small by "batching" selectors in shared `@media` queries.
+41
node_modules/primer-support/docs/spacing.md
···11+---
22+title: Spacing
33+path: support/spacing
44+status: Stable
55+source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/variables/layout.scss
66+---
77+88+{:toc}
99+1010+## Spacing scale
1111+The spacing scale is a **base-8** scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for GitHub's UI. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of `8px`.
1212+1313+| Variable | Scale | Value |
1414+| --- | --- | --- |
1515+| $spacer-0 | 0 | 0 |
1616+| $spacer-1 | 1 | 4px |
1717+| $spacer-2 | 2 | 8px |
1818+| $spacer-3 | 3 | 16px |
1919+| $spacer-4 | 4 | 24px |
2020+| $spacer-5 | 5 | 32px |
2121+| $spacer-6 | 6 | 40px |
2222+2323+These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](/css/utilities/margin) and [padding](/css/utilities/padding) utilities.
2424+2525+See [primer-marketing-support](/css/support/marketing-variables) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/css/utilities/marketing-margin) and [padding](/css/utilities/marketing-padding).
2626+2727+## Em-based spacing
2828+Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values (and powers of 2 where possible) so that , in combination with typography and line-height, the total height lands on sensible numbers.
2929+3030+We aim for whole numbers, however, GitHub's body font-size is 14px which is difficult to work with, so we sometimes can't achieve a whole number. Less desirable values are highlighted in <span class="text-red">red</span> below.
3131+3232+| Variable | Fraction | Y Padding (em) | Total height at 14px | Total height at 16px |
3333+| --- | --- | --- | --- | --- |
3434+| $em-spacer-1 | 1/16 | .0625 | <span class="text-red">22.75</span> | 26 |
3535+| $em-spacer-2 | 1/8 | .125 | <span class="text-red">24.5</span> | 28 |
3636+| $em-spacer-3 | 1/4 | .25 | 28 | 32 |
3737+| $em-spacer-4 | 3/8 | .375 | <span class="text-red">31.5</span> | 36 |
3838+| $em-spacer-5 | 1/2 | .5 | 35 | 40 |
3939+| $em-spacer-6 | 3/4 | .75 | 42 | 48 |
4040+4141+The variables listed above are preferred for use within components and custom CSS. To calculate values with other font-sizes or em values, we suggest using [Formula](http://jxnblk.com/formula/).
+91
node_modules/primer-support/docs/typography.md
···11+---
22+title: Typography
33+path: support/typography
44+status: Stable
55+status_issue: https://github.com/github/design-systems/issues/329
66+source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/variables/typography.scss
77+---
88+99+{:toc}
1010+1111+## Type Scale
1212+1313+The typography scale is designed to work for GitHub's product UI and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible.
1414+1515+Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./breakpoints) to be larger on desktop.
1616+1717+| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
1818+| --- | --- | --- | --- | --- |
1919+| 00 | 40px | 48px | 60 | 72 |
2020+| 0 | 32px | 40px | 50 | 60 |
2121+| 1 | 26px | 32px | 40 | 48 |
2222+| 2 | 22px | 24px | 30 | 36 |
2323+| 3 | 18px | 20px | 25 | 30 |
2424+| 4 | 16px | 16px | 20 | 24 |
2525+| 5 | 14px | 14px | 17.5 | 21 |
2626+| 6 | 12px | 12px | 15 | 18 |
2727+2828+The typography scale is used to create [typography utilities](/css/utilities/typography).
2929+3030+## Typography variables
3131+3232+#### Font size variables
3333+```scss
3434+// Heading sizes - mobile
3535+// h4—h6 remain the same size on both mobile & desktop
3636+$h00-size-mobile: 40px;
3737+$h0-size-mobile: 32px;
3838+$h1-size-mobile: 26px;
3939+$h2-size-mobile: 22px;
4040+$h3-size-mobile: 18px;
4141+4242+// Heading sizes - desktop
4343+$h00-size: 48px;
4444+$h0-size: 40px;
4545+$h1-size: 32px;
4646+$h2-size: 24px;
4747+$h3-size: 20px;
4848+$h4-size: 16px;
4949+$h5-size: 14px;
5050+$h6-size: 12px;
5151+```
5252+5353+#### Font weight variables
5454+```scss
5555+$font-weight-bold: 600 !default;
5656+$font-weight-light: 300 !default;
5757+```
5858+5959+#### Line height variables
6060+```scss
6161+$lh-condensed-ultra: 1 !default;
6262+$lh-condensed: 1.25 !default;
6363+$lh-default: 1.5 !default;
6464+```
6565+6666+## Typography Mixins
6767+Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](/css/utilities/typography#heading-utilities). which requires no additional CSS.
6868+6969+Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:
7070+7171+```scss
7272+.styles {
7373+ @include h1;
7474+}
7575+```
7676+7777+Responsive heading mixins can be used to adjust the font-size between the `sm` and `lg` breakpoint. Only headings 1—3 are responsive. Heading 4—6 are small enough to remain the same between mobile and desktop. Responsive heading mixins include the font-size and font-weight as well as the media query. To use a responsive heading mixin, postfix the heading with `-responsive`:
7878+7979+```scss
8080+.styles {
8181+ @include h1-responsive;
8282+}
8383+```
8484+8585+Responsive type scale mixins are also available. Type scale mixins apply a font-size that gets slightly bigger at the `lg` breakpoint. They do not apply a font-weight. Like the responsive heading mixins, they are only available for size `f1` to `f3` and are postfixed with `-responsive` as in the example below:
8686+8787+```scss
8888+.style {
8989+ @include f1-responsive;
9090+}
9191+```
···11+// Responsive media queries
22+33+@mixin breakpoint($breakpoint) {
44+ @if $breakpoint == "" {
55+ @content;
66+ }
77+88+ @else {
99+ // Retrieves the value from the key
1010+ $value: map-get($breakpoints, $breakpoint);
1111+1212+ // If the key exists in the map
1313+ @if $value != null {
1414+ // Prints a media query based on the value
1515+ @media (min-width: $value) {
1616+ @content;
1717+ }
1818+ }
1919+2020+ // If the key doesn't exist in the map
2121+ @else {
2222+ @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
2323+ + "Please make sure it is defined in `$breakpoints` map.";
2424+ }
2525+ }
2626+}
2727+2828+// Retina media query
2929+3030+@mixin retina-media-query {
3131+ @media
3232+ only screen and (-webkit-min-device-pixel-ratio: 2),
3333+ only screen and (min--moz-device-pixel-ratio: 2),
3434+ only screen and (-moz-min-device-pixel-ratio: 2),
3535+ only screen and (-o-min-device-pixel-ratio: 2/1),
3636+ only screen and (min-device-pixel-ratio: 2),
3737+ only screen and (min-resolution: 192dpi),
3838+ only screen and (min-resolution: 2dppx) {
3939+ @content;
4040+ }
4141+}
4242+4343+// Clearfix
4444+//
4545+// Clears floats via mixin.
4646+4747+@mixin clearfix {
4848+ &::before {
4949+ display: table;
5050+ content: "";
5151+ }
5252+5353+ &::after {
5454+ display: table;
5555+ clear: both;
5656+ content: "";
5757+ }
5858+}
···11+// Text hiding for image based text replacement.
22+// Higher performance than -9999px because it only renders
33+// the size of the actual text, not a full 9999px box.
44+@mixin hide-text() {
55+ overflow: hidden;
66+ text-indent: 100%;
77+ white-space: nowrap;
88+}
99+1010+// Heading mixins for use within components
1111+// These match heading utilities in utilities/typography
1212+@mixin h1 {
1313+ font-size: $h1-size;
1414+ font-weight: $font-weight-bold;
1515+}
1616+1717+@mixin h2 {
1818+ font-size: $h2-size;
1919+ font-weight: $font-weight-bold;
2020+}
2121+2222+@mixin h3 {
2323+ font-size: $h3-size;
2424+ font-weight: $font-weight-bold;
2525+}
2626+2727+@mixin h4 {
2828+ font-size: $h4-size;
2929+ font-weight: $font-weight-bold;
3030+}
3131+3232+@mixin h5 {
3333+ font-size: $h5-size;
3434+ font-weight: $font-weight-bold;
3535+}
3636+3737+@mixin h6 {
3838+ font-size: $h6-size;
3939+ font-weight: $font-weight-bold;
4040+}
4141+4242+// Responsive heading mixins
4343+// There are no responsive mixins for h4—h6 because they are small
4444+// and don't need to be smaller on mobile.
4545+@mixin f1-responsive {
4646+ font-size: $h1-size-mobile;
4747+4848+ // 32px on desktop
4949+ @include breakpoint(md) { font-size: $h1-size; }
5050+5151+}
5252+5353+@mixin f2-responsive {
5454+ font-size: $h2-size-mobile;
5555+5656+ // 24px on desktop
5757+ @include breakpoint(md) { font-size: $h2-size; }
5858+}
5959+6060+@mixin f3-responsive {
6161+ font-size: $h3-size-mobile;
6262+6363+ // 20px on desktop
6464+ @include breakpoint(md) { font-size: $h3-size; }
6565+6666+}
6767+6868+// These use the mixins from above for responsive heading sizes.
6969+// The following mixins can be used where it's convenient or necessary to
7070+// couple the responsive font-size with the font-weight.
7171+@mixin h1-responsive {
7272+ @include f1-responsive;
7373+ font-weight: $font-weight-bold;
7474+}
7575+7676+@mixin h2-responsive {
7777+ @include f2-responsive;
7878+ font-weight: $font-weight-bold;
7979+}
8080+8181+@mixin h3-responsive {
8282+ @include f3-responsive;
8383+ font-weight: $font-weight-bold;
8484+}
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+// TableObject is a module for creating dynamically resizable elements that
22+// always sit on the same horizontal line (e.g., they never wrap). Using
33+// tables means it's cross browser friendly.
44+55+.TableObject {
66+ display: table;
77+}
88+99+// Place this on every "cell"
1010+.TableObject-item {
1111+ display: table-cell;
1212+ width: 1%;
1313+ white-space: nowrap;
1414+ vertical-align: middle;
1515+}
1616+1717+// Place this on the largest or most important "cell"
1818+.TableObject-item--primary {
1919+ width: 99%;
2020+}
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+.tooltipped{position:relative}.tooltipped::after{position:absolute;z-index:1000000;display:none;padding:.5em .75em;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";-webkit-font-smoothing:subpixel-antialiased;color:#fff;text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:#1b1f23;border-radius:3px;opacity:0}.tooltipped::before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:#1b1f23;pointer-events:none;content:"";border:6px solid transparent;opacity:0}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.tooltipped:hover::before,.tooltipped:hover::after,.tooltipped:active::before,.tooltipped:active::after,.tooltipped:focus::before,.tooltipped:focus::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:.4s}.tooltipped-no-delay:hover::before,.tooltipped-no-delay:hover::after,.tooltipped-no-delay:active::before,.tooltipped-no-delay:active::after,.tooltipped-no-delay:focus::before,.tooltipped-no-delay:focus::after{animation-delay:0s}.tooltipped-multiline:hover::after,.tooltipped-multiline:active::after,.tooltipped-multiline:focus::after{display:table-cell}.tooltipped-s::after,.tooltipped-se::after,.tooltipped-sw::after{top:100%;right:50%;margin-top:6px}.tooltipped-s::before,.tooltipped-se::before,.tooltipped-sw::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:#1b1f23}.tooltipped-se::after{right:auto;left:50%;margin-left:-16px}.tooltipped-sw::after{margin-right:-16px}.tooltipped-n::after,.tooltipped-ne::after,.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:6px}.tooltipped-n::before,.tooltipped-ne::before,.tooltipped-nw::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:#1b1f23}.tooltipped-ne::after{right:auto;left:50%;margin-left:-16px}.tooltipped-nw::after{margin-right:-16px}.tooltipped-s::after,.tooltipped-n::after{transform:translateX(50%)}.tooltipped-w::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%)}.tooltipped-w::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:#1b1f23}.tooltipped-e::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%)}.tooltipped-e::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:#1b1f23}.tooltipped-align-right-1::after,.tooltipped-align-right-2::after{right:0;margin-right:0}.tooltipped-align-right-1::before{right:10px}.tooltipped-align-right-2::before{right:15px}.tooltipped-align-left-1::after,.tooltipped-align-left-2::after{left:0;margin-left:0}.tooltipped-align-left-1::before{left:5px}.tooltipped-align-left-2::before{left:10px}.tooltipped-multiline::after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate}.tooltipped-multiline.tooltipped-s::after,.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%)}.tooltipped-multiline.tooltipped-w::after,.tooltipped-multiline.tooltipped-e::after{right:100%}@media screen and (min-width: 0\0){.tooltipped-multiline::after{width:250px}}.tooltipped-sticky::before,.tooltipped-sticky::after{display:inline-block}.tooltipped-sticky.tooltipped-multiline::after{display:table-cell}
+1
node_modules/primer-tooltips/build/data.json
···11+{"cssstats":{"size":3551,"gzipSize":1026,"humanizedSize":"3kB","humanizedGzipSize":"1kB","rules":{"total":33,"size":{"graph":[1,19,10,1,1,7,1,1,3,5,3,1,3,5,3,1,1,4,5,4,5,2,1,1,2,1,1,7,3,1,1,1,1],"max":19,"average":3.212121212121212},"selectorByRuleSizes":[{"selector":".tooltipped::after","declarations":19},{"selector":".tooltipped::before","declarations":10},{"selector":".tooltipped-multiline::after","declarations":7},{"selector":".tooltipped:hover::before,.tooltipped:hover::after,.tooltipped:active::before,.tooltipped:active::after,.tooltipped:focus::before,.tooltipped:focus::after","declarations":7},{"selector":".tooltipped-e::before","declarations":5},{"selector":".tooltipped-w::before","declarations":5},{"selector":".tooltipped-n::before,.tooltipped-ne::before,.tooltipped-nw::before","declarations":5},{"selector":".tooltipped-s::before,.tooltipped-se::before,.tooltipped-sw::before","declarations":5},{"selector":".tooltipped-e::after","declarations":4},{"selector":".tooltipped-w::after","declarations":4},{"selector":".tooltipped-multiline.tooltipped-s::after,.tooltipped-multiline.tooltipped-n::after","declarations":3},{"selector":".tooltipped-ne::after","declarations":3},{"selector":".tooltipped-n::after,.tooltipped-ne::after,.tooltipped-nw::after","declarations":3},{"selector":".tooltipped-se::after","declarations":3},{"selector":".tooltipped-s::after,.tooltipped-se::after,.tooltipped-sw::after","declarations":3},{"selector":".tooltipped-align-left-1::after,.tooltipped-align-left-2::after","declarations":2},{"selector":".tooltipped-align-right-1::after,.tooltipped-align-right-2::after","declarations":2},{"selector":".tooltipped-sticky.tooltipped-multiline::after","declarations":1},{"selector":".tooltipped-sticky::before,.tooltipped-sticky::after","declarations":1},{"selector":".tooltipped-multiline::after","declarations":1},{"selector":".tooltipped-multiline.tooltipped-w::after,.tooltipped-multiline.tooltipped-e::after","declarations":1},{"selector":".tooltipped-align-left-2::before","declarations":1},{"selector":".tooltipped-align-left-1::before","declarations":1},{"selector":".tooltipped-align-right-2::before","declarations":1},{"selector":".tooltipped-align-right-1::before","declarations":1},{"selector":".tooltipped-s::after,.tooltipped-n::after","declarations":1},{"selector":".tooltipped-nw::after","declarations":1},{"selector":".tooltipped-sw::after","declarations":1},{"selector":".tooltipped-multiline:hover::after,.tooltipped-multiline:active::after,.tooltipped-multiline:focus::after","declarations":1},{"selector":".tooltipped-no-delay:hover::before,.tooltipped-no-delay:hover::after,.tooltipped-no-delay:active::before,.tooltipped-no-delay:active::after,.tooltipped-no-delay:focus::before,.tooltipped-no-delay:focus::after","declarations":1},{"selector":"to","declarations":1},{"selector":"from","declarations":1},{"selector":".tooltipped","declarations":1}]},"selectors":{"total":59,"type":2,"class":57,"id":0,"pseudoClass":15,"pseudoElement":56,"values":[".tooltipped",".tooltipped::after",".tooltipped::before","from","to",".tooltipped:hover::before",".tooltipped:hover::after",".tooltipped:active::before",".tooltipped:active::after",".tooltipped:focus::before",".tooltipped:focus::after",".tooltipped-no-delay:hover::before",".tooltipped-no-delay:hover::after",".tooltipped-no-delay:active::before",".tooltipped-no-delay:active::after",".tooltipped-no-delay:focus::before",".tooltipped-no-delay:focus::after",".tooltipped-multiline:hover::after",".tooltipped-multiline:active::after",".tooltipped-multiline:focus::after",".tooltipped-s::after",".tooltipped-se::after",".tooltipped-sw::after",".tooltipped-s::before",".tooltipped-se::before",".tooltipped-sw::before",".tooltipped-se::after",".tooltipped-sw::after",".tooltipped-n::after",".tooltipped-ne::after",".tooltipped-nw::after",".tooltipped-n::before",".tooltipped-ne::before",".tooltipped-nw::before",".tooltipped-ne::after",".tooltipped-nw::after",".tooltipped-s::after",".tooltipped-n::after",".tooltipped-w::after",".tooltipped-w::before",".tooltipped-e::after",".tooltipped-e::before",".tooltipped-align-right-1::after",".tooltipped-align-right-2::after",".tooltipped-align-right-1::before",".tooltipped-align-right-2::before",".tooltipped-align-left-1::after",".tooltipped-align-left-2::after",".tooltipped-align-left-1::before",".tooltipped-align-left-2::before",".tooltipped-multiline::after",".tooltipped-multiline.tooltipped-s::after",".tooltipped-multiline.tooltipped-n::after",".tooltipped-multiline.tooltipped-w::after",".tooltipped-multiline.tooltipped-e::after",".tooltipped-multiline::after",".tooltipped-sticky::before",".tooltipped-sticky::after",".tooltipped-sticky.tooltipped-multiline::after"],"specificity":{"max":21,"average":14.033898305084746}},"declarations":{"total":106,"unique":80,"properties":{"position":["relative","absolute","absolute"],"z-index":["1000000","1000001"],"display":["none","none","inline-block","table-cell","inline-block","table-cell"],"padding":[".5em .75em"],"font":["normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\""],"-webkit-font-smoothing":["subpixel-antialiased"],"color":["#fff","#1b1f23"],"text-align":["center"],"text-decoration":["none","none"],"text-shadow":["none"],"text-transform":["none"],"letter-spacing":["normal"],"word-wrap":["break-word","break-word"],"white-space":["pre","pre-line"],"pointer-events":["none","none"],"content":["attr(aria-label)","\"\""],"background":["#1b1f23"],"border-radius":["3px"],"opacity":["0","0","0","1"],"width":["0","-webkit-max-content","-moz-max-content","max-content","250px"],"height":["0"],"border":["6px solid transparent"],"animation-name":["tooltip-appear"],"animation-duration":[".1s"],"animation-fill-mode":["forwards"],"animation-timing-function":["ease-in"],"animation-delay":[".4s","0s"],"top":["100%","auto","-7px","50%","50%"],"right":["50%","50%","auto","50%","50%","auto","100%","-7px","0","10px","15px","auto","100%"],"margin-top":["6px","-6px","-6px"],"bottom":["-7px","100%","auto","50%","50%","50%","50%"],"margin-right":["-6px","-16px","-6px","-16px","6px","0"],"border-bottom-color":["#1b1f23"],"left":["50%","50%","-7px","100%","0","5px","10px","50%"],"margin-left":["-16px","-16px","6px","0"],"margin-bottom":["6px"],"border-top-color":["#1b1f23"],"transform":["translateX(50%)","translateY(50%)","translateY(50%)","translateX(-50%)"],"border-left-color":["#1b1f23"],"border-right-color":["#1b1f23"],"max-width":["250px"],"border-collapse":["separate"]}},"mediaQueries":{"total":1,"unique":1,"values":["screen and (min-width: 0\\0)"],"contents":[{"value":"screen and (min-width: 0\\0)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".tooltipped-multiline::after","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":1,"values":[".tooltipped-multiline::after"],"specificity":{"max":11,"average":11}},"declarations":{"total":1,"unique":1,"properties":{"width":["250px"]}}}]}}}
+1
node_modules/primer-tooltips/build/index.js
···11+module.exports = {"cssstats":{"size":3551,"gzipSize":1026,"humanizedSize":"3kB","humanizedGzipSize":"1kB","rules":{"total":33,"size":{"graph":[1,19,10,1,1,7,1,1,3,5,3,1,3,5,3,1,1,4,5,4,5,2,1,1,2,1,1,7,3,1,1,1,1],"max":19,"average":3.212121212121212},"selectorByRuleSizes":[{"selector":".tooltipped::after","declarations":19},{"selector":".tooltipped::before","declarations":10},{"selector":".tooltipped-multiline::after","declarations":7},{"selector":".tooltipped:hover::before,.tooltipped:hover::after,.tooltipped:active::before,.tooltipped:active::after,.tooltipped:focus::before,.tooltipped:focus::after","declarations":7},{"selector":".tooltipped-e::before","declarations":5},{"selector":".tooltipped-w::before","declarations":5},{"selector":".tooltipped-n::before,.tooltipped-ne::before,.tooltipped-nw::before","declarations":5},{"selector":".tooltipped-s::before,.tooltipped-se::before,.tooltipped-sw::before","declarations":5},{"selector":".tooltipped-e::after","declarations":4},{"selector":".tooltipped-w::after","declarations":4},{"selector":".tooltipped-multiline.tooltipped-s::after,.tooltipped-multiline.tooltipped-n::after","declarations":3},{"selector":".tooltipped-ne::after","declarations":3},{"selector":".tooltipped-n::after,.tooltipped-ne::after,.tooltipped-nw::after","declarations":3},{"selector":".tooltipped-se::after","declarations":3},{"selector":".tooltipped-s::after,.tooltipped-se::after,.tooltipped-sw::after","declarations":3},{"selector":".tooltipped-align-left-1::after,.tooltipped-align-left-2::after","declarations":2},{"selector":".tooltipped-align-right-1::after,.tooltipped-align-right-2::after","declarations":2},{"selector":".tooltipped-sticky.tooltipped-multiline::after","declarations":1},{"selector":".tooltipped-sticky::before,.tooltipped-sticky::after","declarations":1},{"selector":".tooltipped-multiline::after","declarations":1},{"selector":".tooltipped-multiline.tooltipped-w::after,.tooltipped-multiline.tooltipped-e::after","declarations":1},{"selector":".tooltipped-align-left-2::before","declarations":1},{"selector":".tooltipped-align-left-1::before","declarations":1},{"selector":".tooltipped-align-right-2::before","declarations":1},{"selector":".tooltipped-align-right-1::before","declarations":1},{"selector":".tooltipped-s::after,.tooltipped-n::after","declarations":1},{"selector":".tooltipped-nw::after","declarations":1},{"selector":".tooltipped-sw::after","declarations":1},{"selector":".tooltipped-multiline:hover::after,.tooltipped-multiline:active::after,.tooltipped-multiline:focus::after","declarations":1},{"selector":".tooltipped-no-delay:hover::before,.tooltipped-no-delay:hover::after,.tooltipped-no-delay:active::before,.tooltipped-no-delay:active::after,.tooltipped-no-delay:focus::before,.tooltipped-no-delay:focus::after","declarations":1},{"selector":"to","declarations":1},{"selector":"from","declarations":1},{"selector":".tooltipped","declarations":1}]},"selectors":{"total":59,"type":2,"class":57,"id":0,"pseudoClass":15,"pseudoElement":56,"values":[".tooltipped",".tooltipped::after",".tooltipped::before","from","to",".tooltipped:hover::before",".tooltipped:hover::after",".tooltipped:active::before",".tooltipped:active::after",".tooltipped:focus::before",".tooltipped:focus::after",".tooltipped-no-delay:hover::before",".tooltipped-no-delay:hover::after",".tooltipped-no-delay:active::before",".tooltipped-no-delay:active::after",".tooltipped-no-delay:focus::before",".tooltipped-no-delay:focus::after",".tooltipped-multiline:hover::after",".tooltipped-multiline:active::after",".tooltipped-multiline:focus::after",".tooltipped-s::after",".tooltipped-se::after",".tooltipped-sw::after",".tooltipped-s::before",".tooltipped-se::before",".tooltipped-sw::before",".tooltipped-se::after",".tooltipped-sw::after",".tooltipped-n::after",".tooltipped-ne::after",".tooltipped-nw::after",".tooltipped-n::before",".tooltipped-ne::before",".tooltipped-nw::before",".tooltipped-ne::after",".tooltipped-nw::after",".tooltipped-s::after",".tooltipped-n::after",".tooltipped-w::after",".tooltipped-w::before",".tooltipped-e::after",".tooltipped-e::before",".tooltipped-align-right-1::after",".tooltipped-align-right-2::after",".tooltipped-align-right-1::before",".tooltipped-align-right-2::before",".tooltipped-align-left-1::after",".tooltipped-align-left-2::after",".tooltipped-align-left-1::before",".tooltipped-align-left-2::before",".tooltipped-multiline::after",".tooltipped-multiline.tooltipped-s::after",".tooltipped-multiline.tooltipped-n::after",".tooltipped-multiline.tooltipped-w::after",".tooltipped-multiline.tooltipped-e::after",".tooltipped-multiline::after",".tooltipped-sticky::before",".tooltipped-sticky::after",".tooltipped-sticky.tooltipped-multiline::after"],"specificity":{"max":21,"average":14.033898305084746}},"declarations":{"total":106,"unique":80,"properties":{"position":["relative","absolute","absolute"],"z-index":["1000000","1000001"],"display":["none","none","inline-block","table-cell","inline-block","table-cell"],"padding":[".5em .75em"],"font":["normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\""],"-webkit-font-smoothing":["subpixel-antialiased"],"color":["#fff","#1b1f23"],"text-align":["center"],"text-decoration":["none","none"],"text-shadow":["none"],"text-transform":["none"],"letter-spacing":["normal"],"word-wrap":["break-word","break-word"],"white-space":["pre","pre-line"],"pointer-events":["none","none"],"content":["attr(aria-label)","\"\""],"background":["#1b1f23"],"border-radius":["3px"],"opacity":["0","0","0","1"],"width":["0","-webkit-max-content","-moz-max-content","max-content","250px"],"height":["0"],"border":["6px solid transparent"],"animation-name":["tooltip-appear"],"animation-duration":[".1s"],"animation-fill-mode":["forwards"],"animation-timing-function":["ease-in"],"animation-delay":[".4s","0s"],"top":["100%","auto","-7px","50%","50%"],"right":["50%","50%","auto","50%","50%","auto","100%","-7px","0","10px","15px","auto","100%"],"margin-top":["6px","-6px","-6px"],"bottom":["-7px","100%","auto","50%","50%","50%","50%"],"margin-right":["-6px","-16px","-6px","-16px","6px","0"],"border-bottom-color":["#1b1f23"],"left":["50%","50%","-7px","100%","0","5px","10px","50%"],"margin-left":["-16px","-16px","6px","0"],"margin-bottom":["6px"],"border-top-color":["#1b1f23"],"transform":["translateX(50%)","translateY(50%)","translateY(50%)","translateX(-50%)"],"border-left-color":["#1b1f23"],"border-right-color":["#1b1f23"],"max-width":["250px"],"border-collapse":["separate"]}},"mediaQueries":{"total":1,"unique":1,"values":["screen and (min-width: 0\\0)"],"contents":[{"value":"screen and (min-width: 0\\0)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".tooltipped-multiline::after","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":1,"values":[".tooltipped-multiline::after"],"specificity":{"max":11,"average":11}},"declarations":{"total":1,"unique":1,"properties":{"width":["250px"]}}}]}}}
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+// Truncate
22+//
33+// css-truncate will shorten text with an ellipsis.
44+55+.css-truncate {
66+ // Truncate double target
77+ //
88+ // css-truncate will shorten text with an ellipsis. The maximum width
99+ // of the truncated text can be changed by overriding the max-width
1010+ // of the .css-truncate-target
1111+ &.css-truncate-target,
1212+ .css-truncate-target {
1313+ display: inline-block;
1414+ max-width: 125px;
1515+ overflow: hidden;
1616+ text-overflow: ellipsis;
1717+ white-space: nowrap;
1818+ vertical-align: top;
1919+ }
2020+2121+ &.expandable.zeroclipboard-is-hover .css-truncate-target,
2222+ &.expandable.zeroclipboard-is-hover.css-truncate-target,
2323+ &.expandable:hover .css-truncate-target,
2424+ &.expandable:hover.css-truncate-target {
2525+ max-width: 10000px !important;
2626+ }
2727+}
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+---
22+title: Animations
33+path: utilities/animations
44+example_layout: toggle
55+status: Stable
66+---
77+88+Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button.
99+1010+{:toc}
1111+1212+## Fade In
1313+1414+The `.anim-fade-in` class is used to fade in an element on the page. This will run once when the element is revealed.
1515+1616+```erb
1717+<span class="anim-fade-in"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span>
1818+```
1919+2020+## Fade Out
2121+2222+The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed.
2323+2424+```erb
2525+<span class="anim-fade-out"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span>
2626+```
2727+2828+## Fade Up
2929+3030+The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
3131+3232+```erb
3333+<div class="anim-fade-up"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</div>
3434+```
3535+3636+## Fade Down
3737+3838+The `.anim-fade-down` class is used to slide an element down hiding it. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
3939+4040+```erb
4141+<div class="anim-fade-down"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</div>
4242+```
4343+4444+## Scale In
4545+4646+The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly.
4747+4848+```erb
4949+<div class="anim-scale-in bg-gray-dark text-white p-2"><%= octicon("mark-github") %></div>
5050+```
5151+5252+## Grow X
5353+5454+The `.anim-grow-x` class will grow an element width from 0-:100: real quick.
5555+5656+```html
5757+<div class="anim-grow-x py-2 bg-green"></div>
5858+```
5959+6060+## Pulse
6161+6262+The `.anim-pulse` class will pulse an element infinitely.
6363+6464+```erb
6565+<%= octicon("mark-github", :class => "anim-pulse") %>
6666+```
6767+6868+## Hover animation
6969+7070+The `.hover-grow` class will increase the scale of the element upon hover.
7171+7272+```erb
7373+<div class="Box hover-grow m-3 p-4">
7474+ <%= octicon("mark-github", :height => 32) %>
7575+</div>
7676+```
+156
node_modules/primer-utilities/docs/borders.md
···11+---
22+title: Borders
33+path: utilities/borders
44+status: Stable
55+status_issue: https://github.com/github/design-systems/issues/72
66+---
77+88+Utilities for borders, border radius, and box shadows.
99+1010+{:toc}
1111+1212+## Default border
1313+1414+The default border utility applies a solid, 1px border, with a default gray color.
1515+1616+```html
1717+<div class="border">
1818+ .border
1919+</div>
2020+```
2121+2222+Borders can be applied to a specific edge or to the Y axis.
2323+2424+```html
2525+<div class="d-flex mb-3">
2626+ <div class="border-left col-3">
2727+ .border-left
2828+ </div>
2929+ <div class="border-top col-3">
3030+ .border-top
3131+ </div>
3232+ <div class="border-bottom col-3">
3333+ .border-bottom
3434+ </div>
3535+ <div class="border-right col-3">
3636+ .border-right
3737+ </div>
3838+</div>
3939+<div class="border-y">
4040+ .border-y
4141+</div>
4242+```
4343+4444+Remove borders from all sides or a single side with `.border-0`, `.border-top-0`, `.border-right-0`, `.border-bottom-0`, `.border-left-0`.
4545+4646+```html
4747+<div class="Box border-top-0">
4848+ .border-top-0
4949+</div>
5050+```
5151+5252+## Border colors
5353+5454+Override default border colors with blue, green, red, purple, yellow, and gray border color utilities.
5555+5656+```html
5757+<div class="border border-blue mb-2">
5858+ .border-blue
5959+</div>
6060+<div class="border border-blue-light mb-2">
6161+ .border-blue-light
6262+</div>
6363+<div class="border border-green mb-2">
6464+ .border-green
6565+</div>
6666+<div class="border border-green-light mb-2">
6767+ .border-green-light
6868+</div>
6969+<div class="border border-red mb-2">
7070+ .border-red
7171+</div>
7272+<div class="border border-red-light mb-2">
7373+ .border-red-light
7474+</div>
7575+<div class="border border-purple mb-2">
7676+ .border-purple
7777+</div>
7878+<div class="border border-yellow mb-2">
7979+ .border-yellow
8080+</div>
8181+<div class="border border-gray-light mb-2">
8282+ .border-gray-light
8383+</div>
8484+<div class="border border-gray-dark mb-2">
8585+ .border-gray-dark
8686+</div>
8787+```
8888+8989+### Borders with alpha transparency
9090+9191+Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
9292+9393+```html
9494+<div class="border border-black-fade bg-blue-light p-2 mb-2">
9595+ .border-black-fade .bg-blue-light
9696+</div>
9797+<div class="border border-black-fade bg-red-light p-2 mb-2">
9898+ .border-black-fade .bg-red-light
9999+</div>
100100+```
101101+102102+## Border style
103103+104104+Use `border-dashed` to give an element a dashed border.
105105+106106+```html
107107+<div class="border border-dashed p-2">
108108+ .border-dashed
109109+</div>
110110+```
111111+112112+## Rounded corners
113113+114114+Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
115115+116116+```html
117117+<div class="Box rounded-0 mb-2">
118118+ .rounded-0
119119+</div>
120120+<div class="border rounded-1 mb-2">
121121+ .rounded-1
122122+</div>
123123+<div class="border rounded-2 mb-2">
124124+ .rounded-2
125125+</div>
126126+<div class="border circle p-3" style="width: 100px; height: 100px;">
127127+ .circle
128128+</div>
129129+```
130130+131131+You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:
132132+133133+```html
134134+<div class="border rounded-top-1 mb-2">
135135+ .rounded-top-1
136136+</div>
137137+<div class="border rounded-right-1 mb-2">
138138+ .rounded-right-1
139139+</div>
140140+<div class="border rounded-bottom-1 mb-2">
141141+ .rounded-bottom-1
142142+</div>
143143+<div class="border rounded-left-1 mb-2">
144144+ .rounded-left-1
145145+</div>
146146+```
147147+148148+## Responsive borders
149149+150150+Top, right, bottom, and left border utilities are can be used responsively to add or remove borders to an element at different screensizes.
151151+152152+```html
153153+<div class="border-top border-sm-right border-md-bottom border-lg-top-0">
154154+ .border-top-0
155155+</div>
156156+```
+108
node_modules/primer-utilities/docs/box-shadow.md
···11+---
22+title: Box shadow
33+path: utilities/box-shadow
44+status: Stable
55+status_issue: https://github.com/github/design-systems/issues/269
66+---
77+88+Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).
99+1010+{:toc}
1111+1212+## Default
1313+1414+Default shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
1515+1616+```html
1717+<div class="box-shadow p-3">
1818+ .box-shadow
1919+</div>
2020+```
2121+2222+These types of shadows are typically applied to elements with borders, such as the [Box component](/css/components/box).
2323+2424+```html
2525+<div class="col-5">
2626+ <div class="Box box-shadow">
2727+ <div class="Box-row">
2828+ <h3 class="m-0">Organization</h3>
2929+ </div>
3030+ <div class="Box-row">
3131+ <p class="mb-0 alt-text-small text-gray">
3232+ 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.
3333+ </p>
3434+ </div>
3535+ <div class="Box-row">
3636+ <button type="button" name="Create an organization" class="btn btn-primary btn-block">Create an organization</button>
3737+ </div>
3838+ </div>
3939+</div>
4040+```
4141+4242+## Medium
4343+4444+Medium box shadows are more diffused and slightly larger than small box shadows.
4545+4646+```html
4747+<div class="box-shadow-medium p-3">
4848+ .box-shadow-medium
4949+</div>
5050+```
5151+5252+Medium box shadows are typically used on editorialized content that needs to appear elevated. Most of the time, the elements using this level of shadow will be clickable.
5353+5454+```erb
5555+<div class="col-6">
5656+ <a class="d-block box-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
5757+ <div class="bg-blue position-absolute top-0 left-0 py-1 width-full"></div>
5858+ <h3 class="text-gray-dark">Serverless architecture</h3>
5959+ <p class="alt-text-small text-gray">
6060+ Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks.
6161+ </p>
6262+ <ul class="position-absolute bottom-0 pb-3 text-small text-gray list-style-none ">
6363+ <li class="d-inline-block mr-1"><%= octicon "repo", :class => "mr-1" %>12 Repositories</li>
6464+ <li class="d-inline-block"><%= octicon "code", :class => "mr-1" %>5 Languages</li>
6565+ </ul>
6666+ </a>
6767+</div>
6868+```
6969+7070+## Large
7171+7272+Large box shadows are very diffused and used sparingly in the product UI.
7373+7474+```html
7575+<div class="box-shadow-large p-3">
7676+ .box-shadow-large
7777+</div>
7878+```
7979+8080+These shadows are used for marketing content, UI screenshots, and content that appears on top of other page elements.
8181+8282+```html
8383+<div class="box-shadow-large rounded-2 overflow-hidden">
8484+ <img src="https://github.com/nasa.png" class="img-responsive" alt="NASA is on GitHub">
8585+</div>
8686+```
8787+8888+## Extra Large
8989+9090+Extra large box shadows are even more diffused.
9191+9292+```html
9393+<div class="box-shadow-extra-large p-3">
9494+ .box-shadow-extra-large
9595+</div>
9696+```
9797+9898+These shadows are used for marketing content and content that appears on top of other page elements.
9999+100100+## Remove a box shadow
101101+102102+Additionally there is a `box-shadow-none` class that removes `box-shadow`:
103103+104104+```html
105105+<div class="box-shadow-large box-shadow-none p-3">
106106+ .box-shadow-none
107107+</div>
108108+```
+31
node_modules/primer-utilities/docs/details.md
···11+---
22+title: Details
33+path: utilities/details
44+status: Stable
55+---
66+77+Details classes are created to enhance the native behaviors of `<details>`.
88+99+{:toc}
1010+1111+## Fullscreen click area
1212+1313+Use `.details-overlay` to expand the click area of `<summary>` to cover the full screen, so user can click anywhere on a page to close `<details>`.
1414+1515+```html
1616+<details class="details-overlay">
1717+ <summary class="btn">More</summary>
1818+ <div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
1919+</details>
2020+```
2121+2222+## Darkened fullscreen click area
2323+2424+Use `.details-overlay-dark` darken the click area overlay. Useful for modals.
2525+2626+```html
2727+<details class="details-overlay details-overlay-dark">
2828+ <summary class="btn">More</summary>
2929+ <div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
3030+</details>
3131+```
+665
node_modules/primer-utilities/docs/flexbox.md
···11+---
22+title: Flexbox
33+path: utilities/flexbox
44+status: Stable
55+status_issue: https://github.com/github/design-systems/issues/157
66+---
77+88+Flex utilities can be used to apply `flexbox` behaviors to elements by using utility classes.
99+1010+{:toc}
1111+1212+## Required reading
1313+1414+Before using these utilities, **you should be familiar with CSS3 Flexible Box spec**. If you are not, check out MDN's guide:
1515+1616+:book: **[Using CSS Flexible Boxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)**
1717+1818+## Flex container
1919+2020+Use these classes to make an element lay out its content using the flexbox model. Each **direct** child of the flex container will become a flex item.
2121+2222+#### CSS
2323+2424+```css
2525+.d-flex { display: flex; }
2626+.d-inline-flex { display: inline-flex; }
2727+```
2828+2929+#### Classes
3030+3131+| Class | Description |
3232+| --- | --- |
3333+| `.d-flex` | The element behaves like a block and lays out its content using the flexbox model. |
3434+| `.d-inline-flex` | The element behaves like an inline element and lays out its content using the flexbox model. |
3535+3636+#### Example using `.d-flex`
3737+3838+```html
3939+<!-- flex container -->
4040+<div class="border d-flex">
4141+ <div class="p-5 border bg-gray-light">flex item 1</div>
4242+ <div class="p-5 border bg-gray-light">flex item 2</div>
4343+ <div class="p-5 border bg-gray-light">flex item 3</div>
4444+</div>
4545+```
4646+4747+#### Example using `.d-inline-flex`
4848+4949+```html
5050+<!-- inline-flex container -->
5151+<div class="border d-inline-flex">
5252+ <div class="p-5 border bg-gray-light">flex item 1</div>
5353+ <div class="p-5 border bg-gray-light">flex item 2</div>
5454+ <div class="p-5 border bg-gray-light">flex item 3</div>
5555+</div>
5656+```
5757+5858+## Flex direction
5959+6060+Use these classes to define the orientation of the main axis (`row` or `column`). By default, flex items will display in a row. Use `.flex-column` to change the direction of the main axis to vertical.
6161+6262+#### CSS
6363+6464+```css
6565+.flex-row { flex-direction: row; }
6666+.flex-row-reverse { flex-direction: row-reverse; }
6767+.flex-column { flex-direction: column; }
6868+```
6969+7070+#### Classes
7171+7272+| Class | Description |
7373+| --- | --- |
7474+| `.flex-row` | The main axis runs left to right (default). |
7575+| `.flex-row-reverse` | The main axis runs right to left. |
7676+| `.flex-column` | The main axis runs top to bottom. |
7777+7878+#### Example using `.flex-column`
7979+8080+```html
8181+<div class="border d-flex flex-column">
8282+ <div class="p-5 border bg-gray-light">Item 1</div>
8383+ <div class="p-5 border bg-gray-light">Item 2</div>
8484+ <div class="p-5 border bg-gray-light">Item 3</div>
8585+</div>
8686+```
8787+8888+#### Example using `.flex-row`
8989+9090+This example uses the responsive variant `.flex-md-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
9191+9292+```html
9393+<div class="border d-flex flex-column flex-md-row">
9494+ <div class="p-5 border bg-gray-light">Item 1</div>
9595+ <div class="p-5 border bg-gray-light">Item 2</div>
9696+ <div class="p-5 border bg-gray-light">Item 3</div>
9797+</div>
9898+```
9999+100100+#### Example using `.flex-row-reverse`
101101+102102+This example uses the responsive variant `.flex-md-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
103103+104104+```html
105105+<div class="border d-flex flex-column flex-md-row-reverse">
106106+ <div class="p-5 border bg-gray-light">Item 1</div>
107107+ <div class="p-5 border bg-gray-light">Item 2</div>
108108+ <div class="p-5 border bg-gray-light">Item 3</div>
109109+</div>
110110+```
111111+112112+## Flex wrap
113113+114114+You can choose whether flex items are forced into a single line or wrapped onto multiple lines.
115115+116116+#### CSS
117117+118118+```css
119119+.flex-wrap { flex-wrap: wrap; }
120120+.flex-nowrap { flex-wrap: nowrap; }
121121+```
122122+123123+#### Classes
124124+125125+| Class | Description |
126126+| --- | --- |
127127+| `.flex-wrap` | Flex items will break onto multiple lines (default) |
128128+| `.flex-nowrap` | Flex items are laid out in a single line, even if they overflow |
129129+130130+#### `flex-wrap` example
131131+132132+```html
133133+<div class="border d-flex flex-wrap">
134134+ <div class="p-5 px-6 border bg-gray-light">1</div>
135135+ <div class="p-5 px-6 border bg-gray-light">2</div>
136136+ <div class="p-5 px-6 border bg-gray-light">3</div>
137137+ <div class="p-5 px-6 border bg-gray-light">4</div>
138138+ <div class="p-5 px-6 border bg-gray-light">5</div>
139139+ <div class="p-5 px-6 border bg-gray-light">6</div>
140140+ <div class="p-5 px-6 border bg-gray-light">7</div>
141141+ <div class="p-5 px-6 border bg-gray-light">8</div>
142142+ <div class="p-5 px-6 border bg-gray-light">9</div>
143143+</div>
144144+```
145145+146146+#### `flex-nowrap` example
147147+148148+```html
149149+<div class="border d-flex flex-nowrap">
150150+ <div class="p-5 px-6 border bg-gray-light">1</div>
151151+ <div class="p-5 px-6 border bg-gray-light">2</div>
152152+ <div class="p-5 px-6 border bg-gray-light">3</div>
153153+ <div class="p-5 px-6 border bg-gray-light">4</div>
154154+ <div class="p-5 px-6 border bg-gray-light">5</div>
155155+ <div class="p-5 px-6 border bg-gray-light">6</div>
156156+ <div class="p-5 px-6 border bg-gray-light">7</div>
157157+ <div class="p-5 px-6 border bg-gray-light">8</div>
158158+ <div class="p-5 px-6 border bg-gray-light">9</div>
159159+</div>
160160+```
161161+162162+## Justify content
163163+164164+Use these classes to distribute space between and around flex items along the **main axis** of the container.
165165+166166+#### CSS
167167+168168+```CSS
169169+.flex-justify-start { justify-content: flex-start; }
170170+.flex-justify-end { justify-content: flex-end; }
171171+.flex-justify-center { justify-content: center; }
172172+.flex-justify-between { justify-content: space-between; }
173173+.flex-justify-around { justify-content: space-around; }
174174+```
175175+176176+#### Classes
177177+178178+| Class | Default behavior |
179179+| --- | --- |
180180+| `.flex-justify-start` | Justify all items to the left |
181181+| `.flex-justify-end` | Justify all items to the right |
182182+| `.flex-justify-center` | Justify items to the center of the container |
183183+| `.flex-justify-between` | Distribute items evenly. First item is on the start line, last item is on the end line. |
184184+| `.flex-justify-around` | Distribute items evenly with equal space around them |
185185+186186+#### flex-justify-start
187187+188188+Use `.flex-justify-start` to align items to the start line. By default this will be on the left side of the container. If you are using `.flex-column`, the end line will be at the top of the container.
189189+190190+```html
191191+<div class="border d-flex flex-justify-start">
192192+ <div class="p-5 border bg-gray-light">1</div>
193193+ <div class="p-5 border bg-gray-light">2</div>
194194+ <div class="p-5 border bg-gray-light">3</div>
195195+</div>
196196+```
197197+198198+#### flex-justify-end
199199+200200+Use `.flex-justify-end` to align items to the end line. By default this will be on the right side of the container. If you are using `.flex-column`, the end line will be at the bottom of the container.
201201+202202+```html
203203+<div class="border d-flex flex-justify-end">
204204+ <div class="p-5 border bg-gray-light">1</div>
205205+ <div class="p-5 border bg-gray-light">2</div>
206206+ <div class="p-5 border bg-gray-light">3</div>
207207+</div>
208208+```
209209+210210+#### flex-justify-center
211211+212212+Use `.flex-justify-center` to align items in the middle of the container.
213213+214214+```html
215215+<div class="border d-flex flex-justify-center">
216216+ <div class="p-5 border bg-gray-light">1</div>
217217+ <div class="p-5 border bg-gray-light">2</div>
218218+ <div class="p-5 border bg-gray-light">3</div>
219219+</div>
220220+```
221221+222222+#### flex-justify-between
223223+224224+Use `.flex-justify-between` to distribute items evenly in the container. The first items will be on the start line and the last item will be on the end line.
225225+226226+```html
227227+<div class="border d-flex flex-justify-between">
228228+ <div class="p-5 border bg-gray-light">1</div>
229229+ <div class="p-5 border bg-gray-light">2</div>
230230+ <div class="p-5 border bg-gray-light">3</div>
231231+</div>
232232+```
233233+234234+#### flex-justify-around
235235+236236+Use `.flex-justify-around` to distribute items evenly, with an equal amount of space around them. Visually the spaces won't look equal, since each item has the same unit of space around it. For example, the first item only has one unit of space between it and the start line, but it has two units of space between it and the next item.
237237+238238+```html
239239+<div class="border d-flex flex-justify-around">
240240+ <div class="p-5 border bg-gray-light">1</div>
241241+ <div class="p-5 border bg-gray-light">2</div>
242242+ <div class="p-5 border bg-gray-light">3</div>
243243+</div>
244244+```
245245+246246+## Align items
247247+248248+Use these classes to align items on the **cross axis**.
249249+250250+The cross axis runs perpendicular to the main axis. By default the main axis runs horizontally, so your items will align vertically on the cross axis. If you use [flex-column](#flex-direction) to make the main axis run vertically, your items will be aligned horizontally.
251251+252252+#### CSS
253253+254254+```css
255255+.flex-items-start { align-items: flex-start; }
256256+.flex-items-end { align-items: flex-end; }
257257+.flex-items-center { align-items: center; }
258258+.flex-items-baseline { align-items: baseline; }
259259+.flex-items-stretch { align-items: stretch; }
260260+```
261261+262262+#### Classes
263263+264264+| Class | Behavior |
265265+| --- | --- |
266266+| `.flex-items-start` | Align items to the start of the cross axis |
267267+| `.flex-items-end` | Align items to the end of the cross axis |
268268+| `.flex-items-center` | Align items to the center of the cross axis |
269269+| `.flex-items-baseline` | Align items along their baselines |
270270+| `.flex-items-stretch` | Stretch items from start of cross axis to end of cross axis |
271271+272272+#### flex-items-start
273273+274274+```html
275275+<div style="min-height: 150px;" class="border d-flex flex-items-start">
276276+ <div class="p-5 border bg-gray-light">1</div>
277277+ <div class="p-5 border bg-gray-light">2</div>
278278+ <div class="p-5 border bg-gray-light">3</div>
279279+ <div class="p-5 border bg-gray-light">4</div>
280280+</div>
281281+```
282282+283283+#### flex-items-end
284284+285285+```html
286286+<div style="min-height: 150px;" class="border d-flex flex-items-end">
287287+ <div class="p-5 border bg-gray-light">1</div>
288288+ <div class="p-5 border bg-gray-light">2</div>
289289+ <div class="p-5 border bg-gray-light">3</div>
290290+ <div class="p-5 border bg-gray-light">4</div>
291291+</div>
292292+```
293293+294294+#### flex-items-center
295295+296296+```html
297297+<div style="min-height: 150px;" class="border d-flex flex-items-center">
298298+ <div class="p-5 border bg-gray-light">1</div>
299299+ <div class="p-5 border bg-gray-light">2</div>
300300+ <div class="p-5 border bg-gray-light">3</div>
301301+ <div class="p-5 border bg-gray-light">4</div>
302302+</div>
303303+```
304304+305305+#### flex-items-baseline
306306+307307+With `.flex-items-baseline`, items will be aligned along their baselines even if they have different font sizes.
308308+309309+```html
310310+<div style="min-height: 150px;" class="border d-flex flex-items-baseline">
311311+ <div class="p-5 border bg-gray-light f1">1</div>
312312+ <div class="p-5 border bg-gray-light">2</div>
313313+ <div class="p-5 border bg-gray-light f3">3</div>
314314+ <div class="p-5 border bg-gray-light">4</div>
315315+</div>
316316+```
317317+318318+#### flex-items-stretch
319319+320320+```html
321321+<div style="min-height: 150px;" class="border d-flex flex-items-stretch">
322322+ <div class="p-5 border bg-gray-light">1</div>
323323+ <div class="p-5 border bg-gray-light">2</div>
324324+ <div class="p-5 border bg-gray-light">3</div>
325325+ <div class="p-5 border bg-gray-light">4</div>
326326+</div>
327327+```
328328+329329+## Align content
330330+331331+When the main axis wraps, this creates multiple main axis lines and adds extra space in the cross axis. Use these classes to align the lines of the main axis on the cross axis.
332332+333333+#### CSS
334334+335335+```css
336336+.flex-content-start { align-content: flex-start; }
337337+.flex-content-end { align-content: flex-end; }
338338+.flex-content-center { align-content: center; }
339339+.flex-content-between { align-content: space-between; }
340340+.flex-content-around { align-content: space-around; }
341341+.flex-content-stretch { align-content: stretch; }
342342+```
343343+344344+#### Classes
345345+346346+| Class | Description |
347347+| --- | --- |
348348+| `.flex-content-start` | Align content to the start of the cross axis |
349349+| `.flex-content-end` | Align content to the end of the cross axis |
350350+| `.flex-content-center` | Align content to the center of the cross axis |
351351+| `.flex-content-between` | Distribute content evenly. First line is on the start of the cross axis, last line is on the end of the cross axis. |
352352+| `.flex-content-around` | Stretch items from the start of the cross axis to the end of the cross axis. |
353353+| `.flex-content-stretch` | Lines stretch to occupy available space. |
354354+355355+#### flex-content-start
356356+357357+```html
358358+<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-start">
359359+ <div class="p-5 border bg-gray-light">1</div>
360360+ <div class="p-5 border bg-gray-light">2</div>
361361+ <div class="p-5 border bg-gray-light">3</div>
362362+ <div class="p-5 border bg-gray-light">4</div>
363363+ <div class="p-5 border bg-gray-light">5</div>
364364+ <div class="p-5 border bg-gray-light">6</div>
365365+ <div class="p-5 border bg-gray-light">7</div>
366366+ <div class="p-5 border bg-gray-light">8</div>
367367+ <div class="p-5 border bg-gray-light">9</div>
368368+ <div class="p-5 border bg-gray-light">10</div>
369369+ <div class="p-5 border bg-gray-light">11</div>
370370+ <div class="p-5 border bg-gray-light">12</div>
371371+</div>
372372+```
373373+374374+#### flex-content-end
375375+376376+```html
377377+<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-end">
378378+ <div class="p-5 border bg-gray-light">1</div>
379379+ <div class="p-5 border bg-gray-light">2</div>
380380+ <div class="p-5 border bg-gray-light">3</div>
381381+ <div class="p-5 border bg-gray-light">4</div>
382382+ <div class="p-5 border bg-gray-light">5</div>
383383+ <div class="p-5 border bg-gray-light">6</div>
384384+ <div class="p-5 border bg-gray-light">7</div>
385385+ <div class="p-5 border bg-gray-light">8</div>
386386+ <div class="p-5 border bg-gray-light">9</div>
387387+ <div class="p-5 border bg-gray-light">10</div>
388388+ <div class="p-5 border bg-gray-light">11</div>
389389+ <div class="p-5 border bg-gray-light">12</div>
390390+</div>
391391+```
392392+393393+#### flex-content-center
394394+395395+```html
396396+<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-center">
397397+ <div class="p-5 border bg-gray-light">1</div>
398398+ <div class="p-5 border bg-gray-light">2</div>
399399+ <div class="p-5 border bg-gray-light">3</div>
400400+ <div class="p-5 border bg-gray-light">4</div>
401401+ <div class="p-5 border bg-gray-light">5</div>
402402+ <div class="p-5 border bg-gray-light">6</div>
403403+ <div class="p-5 border bg-gray-light">7</div>
404404+ <div class="p-5 border bg-gray-light">8</div>
405405+ <div class="p-5 border bg-gray-light">9</div>
406406+ <div class="p-5 border bg-gray-light">10</div>
407407+ <div class="p-5 border bg-gray-light">11</div>
408408+ <div class="p-5 border bg-gray-light">12</div>
409409+</div>
410410+```
411411+412412+#### flex-content-between
413413+414414+```html
415415+<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-between">
416416+ <div class="p-5 border bg-gray-light">1</div>
417417+ <div class="p-5 border bg-gray-light">2</div>
418418+ <div class="p-5 border bg-gray-light">3</div>
419419+ <div class="p-5 border bg-gray-light">4</div>
420420+ <div class="p-5 border bg-gray-light">5</div>
421421+ <div class="p-5 border bg-gray-light">6</div>
422422+ <div class="p-5 border bg-gray-light">7</div>
423423+ <div class="p-5 border bg-gray-light">8</div>
424424+ <div class="p-5 border bg-gray-light">9</div>
425425+ <div class="p-5 border bg-gray-light">10</div>
426426+ <div class="p-5 border bg-gray-light">11</div>
427427+ <div class="p-5 border bg-gray-light">12</div>
428428+</div>
429429+```
430430+431431+#### flex-content-around
432432+433433+```html
434434+<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-around">
435435+ <div class="p-5 border bg-gray-light">1</div>
436436+ <div class="p-5 border bg-gray-light">2</div>
437437+ <div class="p-5 border bg-gray-light">3</div>
438438+ <div class="p-5 border bg-gray-light">4</div>
439439+ <div class="p-5 border bg-gray-light">5</div>
440440+ <div class="p-5 border bg-gray-light">6</div>
441441+ <div class="p-5 border bg-gray-light">7</div>
442442+ <div class="p-5 border bg-gray-light">8</div>
443443+ <div class="p-5 border bg-gray-light">9</div>
444444+ <div class="p-5 border bg-gray-light">10</div>
445445+ <div class="p-5 border bg-gray-light">11</div>
446446+ <div class="p-5 border bg-gray-light">12</div>
447447+</div>
448448+```
449449+450450+#### flex-content-stretch
451451+452452+```html
453453+<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-stretch">
454454+ <div class="p-5 border bg-gray-light">1</div>
455455+ <div class="p-5 border bg-gray-light">2</div>
456456+ <div class="p-5 border bg-gray-light">3</div>
457457+ <div class="p-5 border bg-gray-light">4</div>
458458+ <div class="p-5 border bg-gray-light">5</div>
459459+ <div class="p-5 border bg-gray-light">6</div>
460460+ <div class="p-5 border bg-gray-light">7</div>
461461+ <div class="p-5 border bg-gray-light">8</div>
462462+ <div class="p-5 border bg-gray-light">9</div>
463463+ <div class="p-5 border bg-gray-light">10</div>
464464+ <div class="p-5 border bg-gray-light">11</div>
465465+ <div class="p-5 border bg-gray-light">12</div>
466466+</div>
467467+```
468468+469469+## Flex
470470+471471+Use this class to specify the ability of a flex item to alter its dimensions to fill available space.
472472+473473+```CSS
474474+.flex-auto { flex: 1 1 auto; }
475475+```
476476+477477+| Class | Description |
478478+| --- | --- |
479479+| `.flex-auto` | Sets default values for `flex-grow` (1), `flex-shrink` (1) and `flex-basis` (auto) |
480480+481481+#### flex-auto
482482+483483+```html
484484+<div class="border d-flex">
485485+ <div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
486486+ <div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
487487+ <div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
488488+</div>
489489+```
490490+491491+## Align self
492492+493493+Use these classes to adjust the alignment of an individual flex item on the cross axis. This overrides any `align-items` property applied to the flex container.
494494+495495+#### CSS
496496+497497+```css
498498+.flex-self-auto { align-self: auto; }
499499+.flex-self-start { align-self: flex-start; }
500500+.flex-self-end { align-self: flex-end; }
501501+.flex-self-center { align-self: center; }
502502+.flex-self-baseline { align-self: baseline; }
503503+.flex-self-stretch { align-self: stretch; }
504504+```
505505+506506+#### Classes
507507+508508+| Class | Description |
509509+| --- | --- |
510510+| `.flex-self-auto` | Inherit alignment from parent |
511511+| `.flex-self-start` | Align to the start of the cross axis |
512512+| `.flex-self-end` | Align to the end of the cross axis |
513513+| `.flex-self-center` | Align to center of cross axis |
514514+| `.flex-self-baseline` | Align baseline to the start of the cross axis |
515515+| `.flex-self-stretch` | Stretch item from start of cross axis to end of cross axis. |
516516+517517+#### flex-self-auto
518518+519519+```html
520520+<div style="min-height: 150px;" class="border d-flex">
521521+ <div class="p-5 border bg-gray-light flex-self-auto">.flex-self-auto</div>
522522+ <div class="p-5 border bg-gray-light"> </div>
523523+ <div class="p-5 border bg-gray-light"> </div>
524524+</div>
525525+```
526526+527527+#### flex-self-start
528528+529529+```html
530530+<div style="min-height: 150px;" class="border d-flex">
531531+ <div class="p-5 border bg-gray-light flex-self-start">.flex-self-start</div>
532532+ <div class="p-5 border bg-gray-light"> </div>
533533+ <div class="p-5 border bg-gray-light"> </div>
534534+</div>
535535+```
536536+537537+#### flex-self-end
538538+539539+```html
540540+<div style="min-height: 150px;" class="border d-flex">
541541+ <div class="p-5 border bg-gray-light flex-self-end">.flex-self-end</div>
542542+ <div class="p-5 border bg-gray-light"> </div>
543543+ <div class="p-5 border bg-gray-light"> </div>
544544+</div>
545545+```
546546+547547+#### flex-self-center
548548+549549+```html
550550+<div style="min-height: 150px;" class="border d-flex">
551551+ <div class="p-5 border bg-gray-light flex-self-center">.flex-self-center</div>
552552+ <div class="p-5 border bg-gray-light"> </div>
553553+ <div class="p-5 border bg-gray-light"> </div>
554554+</div>
555555+```
556556+557557+#### flex-self-baseline
558558+559559+```html
560560+<div style="min-height: 150px;" class="border d-flex flex-items-end">
561561+ <div class="p-5 border bg-gray-light flex-self-baseline f4">.flex-self-baseline</div>
562562+ <div class="p-5 border bg-gray-light f1">item</div>
563563+ <div class="p-5 border bg-gray-light f00">item</div>
564564+</div>
565565+```
566566+567567+#### flex-self-stretch
568568+569569+```html
570570+<div style="min-height: 150px;" class="border d-flex flex-items-start">
571571+ <div class="p-5 border bg-gray-light flex-self-stretch">.flex-self-stretch</div>
572572+ <div class="p-5 border bg-gray-light"> </div>
573573+ <div class="p-5 border bg-gray-light"> </div>
574574+</div>
575575+```
576576+577577+## Responsive flex utilities
578578+579579+All flexbox utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formulas:
580580+581581+- `d-[breakpoint]-[property]` for `display`
582582+- `flex-[breakpoint]-[property]-[behavior]` for various flex properties
583583+- `flex-[breakpoint]-item-equal` for equal width and equal height flex items
584584+585585+Each responsive style is applied to the specified breakpoint and up.
586586+587587+#### Example classes
588588+589589+```css
590590+/* Example classes */
591591+592592+.d-sm-flex {}
593593+.d-md-inline-flex {}
594594+595595+.flex-lg-row {}
596596+.flex-xl-column {}
597597+598598+.flex-sm-wrap {}
599599+.flex-lg-nowrap {}
600600+601601+.flex-lg-self-start {}
602602+603603+.flex-md-item-equal {}
604604+```
605605+606606+#### Example usage
607607+608608+Mixing flex properties:
609609+610610+```html
611611+<div style="min-height: 150px;" class="border d-flex flex-items-start flex-md-items-center flex-justify-start flex-lg-justify-between">
612612+ <div class="p-5 border bg-gray-light flex-md-self-stretch">.flex-self-stretch</div>
613613+ <div class="p-5 border bg-gray-light"> </div>
614614+ <div class="p-5 border bg-gray-light"> </div>
615615+</div>
616616+```
617617+618618+Using the equal width, equal height utilities:
619619+620620+```html
621621+<div class="border d-flex">
622622+ <div class="flex-md-item-equal p-3 border bg-gray-light">Stuff and things</div>
623623+ <div class="flex-md-item-equal p-3 border bg-gray-light">More stuff<br> on multiple lines</div>
624624+ <div class="flex-md-item-equal p-3 border bg-gray-light">Hi mom</div>
625625+</div>
626626+```
627627+628628+## Example components
629629+630630+The flex utilities can be used to create a number of components. Here are some examples.
631631+632632+### Media object
633633+634634+You can use flex utilities to make a simple media object, like this:
635635+636636+```html
637637+<div class="border d-flex flex-items-center p-4">
638638+ <div class="p-5 border bg-gray-light">image</div>
639639+ <p class="pl-4 m-0"><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
640640+</div>
641641+```
642642+643643+### Responsive media object
644644+645645+Here is an example of a media object that is **vertically centered on large screens**, but converts to a stacked column layout on small screens.
646646+647647+```erb
648648+<div class="border p-3 d-flex flex-column flex-md-row flex-md-items-center">
649649+ <div class="pr-0 pr-md-3 mb-3 mb-md-0 d-flex flex-justify-center flex-md-justify-start">
650650+ <img style="max-width:100px; max-height:100px;" src="https://github.com/github.png" />
651651+ </div>
652652+ <div class="d-flex text-center text-md-left">
653653+ <p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
654654+ </div>
655655+ <div class="ml-md-3 d-flex flex-justify-center">
656656+ <%= octicon "mark-github", :height => '32' %>
657657+ </div>
658658+</div>
659659+```
660660+661661+## Flexbox bugs
662662+663663+This section lists flexbox bugs that affect browsers we currently support (**citation needed**).
664664+665665+**1. Minimum content sizing of flex items not honored:** Some browsers don't respect flex item size. Instead of respecting the minimum content size, items shrink below their minimum size which can create some undesirable results, such as overflowing text. The workaround is to apply `flex-shrink: 0;` to the items using `d-flex`. This can be applied with the `flex-shrink-0` utility. For more information read [philipwalton/flexbugs](https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored).
+324
node_modules/primer-utilities/docs/layout.md
···11+---
22+title: Layout
33+path: utilities/layout
44+status: Stable
55+---
66+77+Change the document layout with display, float, alignment, and other utilities.
88+99+{:toc}
1010+1111+## Display
1212+Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-inline-block`, `.d-table`, `.d-table-cell` utilities.
1313+1414+```html
1515+<div class="d-inline border">
1616+ .d-inline
1717+ <div class="d-inline-block border">
1818+ .d-inline-block
1919+ </div>
2020+ <span class="d-block border">.d-block</span>
2121+ <div class="d-table border">
2222+ <div class="d-table-cell border">
2323+ .d-table-cell
2424+ </div>
2525+ </div>
2626+ <div class="d-table-cell border">
2727+ .d-table-cell
2828+ </div>
2929+ <div class="d-none">
3030+ .d-none
3131+ </div>
3232+</div>
3333+```
3434+3535+### The HTML `hidden` attribute
3636+3737+As of [Primer v10.10.0](https://github.com/primer/primer/releases/v10.10.0), `primer-base` includes a rule that sets `display: none !important` for any element with the [`hidden` attribute][hidden]. You can safely use the `hidden` attribute with display utilities, but we suggest:
3838+3939+1. Use the `hidden` attribute (and corresponding JavaScript property) if you're going to programmatically show and hide content.
4040+1. Use `d-none` and/or its responsive variants (`d-sm-block`, `d-lg-none`) to conditionally show content at different screen sizes.
4141+4242+Rather than toggling the `d-none` class in JavaScript, you should toggle the `hidden` property on an element. This means that you won't have to restore any more specific display utility (`d-inline` or `d-flex`, for instance) just to work around the order in which they're listed in the stylesheet.
4343+4444+```js
4545+// Good:
4646+element.hidden = !visible
4747+4848+// Bad:
4949+element.classList.toggle('d-none', !visible)
5050+element.classList.toggle('d-inline', visible)
5151+```
5252+5353+### `display:table` wrapping issues
5454+5555+There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](/css/objects/grid#column-widths).
5656+5757+```html
5858+<div class="d-table table-fixed width-full">
5959+ <div class="d-table-cell border">
6060+ .d-table-cell
6161+ </div>
6262+ <div class="d-table-cell col-10 border">
6363+ d-table-cell .col-10
6464+ </div>
6565+</div>
6666+```
6767+6868+### Responsive display
6969+A selection of display utilities are able to be applied or changed per [breakpoint](/css/objects/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up.
7070+7171+In the following example, the `ul` element switches from `display: block` on mobile to `display: inline-block` at the `md` breakpoint, while the list items remain inline.
7272+7373+```html
7474+<h5 class="d-md-inline-block">.d-md-inline-block</h5>
7575+<ul class="d-md-inline-block border">
7676+ <li class="d-inline border">.d-inline</li>
7777+ <li class="d-inline border">.d-inline</li>
7878+</ul>
7979+```
8080+8181+### Responsive hide
8282+Hide utilities are able to be applied or changed per breakpoint using the following formula:<br /> `hide-[breakpoint]`, for example: `hide-sm`. Hide utilities act differently from other responsive styles and are applied to each **breakpoint-range only**.
8383+8484+| Shorthand | Range |
8585+| --- | --- |
8686+| -sm | 0—544px |
8787+| -md | 544px—768px |
8888+| -lg | 768px—1004px |
8989+| -xl | 1004px and above |
9090+9191+```html
9292+<div>
9393+ <h3>Potato update</h3>
9494+ <span class="hide-sm hide-md">Opened by <a href="#url">broccolini</a></span>
9595+ <span class="d-md-none">Updated</span> 3 hours ago
9696+</div>
9797+```
9898+9999+### Text direction
100100+`.direction-ltr` or `.direction-rtl` can be used to change the text direction. This is especially helpful when paired with `.d-table`, `.d-table-cell`, and `.v-align-middle` to create equal height, vertically centered, alternating content.
101101+102102+## Visibility
103103+Adjust the visibility of an element with `.v-hidden` and `.v-visible`.
104104+105105+## Overflow
106106+Adjust element overflow with `.overflow-hidden`, `.overflow-scroll`, and `.overflow-auto`. `.overflow-hidden` can also be used to create a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) or clear floats.
107107+108108+## Floats
109109+Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
110110+```html
111111+<div class="clearfix border border-gray">
112112+ <div class="float-left border border-gray">
113113+ .float-left
114114+ </div>
115115+ <div class="float-right border border-gray">
116116+ .float-right
117117+ </div>
118118+</div>
119119+```
120120+### Responsive floats
121121+Float utilities can be applied or changed per [breakpoint](/css/objects/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint.
122122+123123+Each responsive float utility is applied to the specified breakpoint and up, using the following formula: `float-[breakpoint]-[property]`. For example: `float-md-left`. Remember to use `.clearfix` to clear.
124124+125125+```html
126126+<div class="clearfix border border-gray">
127127+ <div class="float-md-left border border-gray">
128128+ .float-md-left
129129+ </div>
130130+ <div class="float-md-right border border-gray">
131131+ .float-md-right
132132+ </div>
133133+</div>
134134+```
135135+136136+## Alignment
137137+Adjust the alignment of an element with `.v-align-baseline`, `.v-align-top`, `.v-align-middle` or `.v-align-bottom`. The vertical-align property only applies to inline or table-cell boxes.
138138+139139+```html
140140+<div class="d-table border border-gray">
141141+ <div class="d-table-cell"><h1>Potatoes</h1></div>
142142+ <div class="d-table-cell v-align-baseline">.v-align-baseline</div>
143143+ <div class="d-table-cell v-align-top">.v-align-top</div>
144144+ <div class="d-table-cell v-align-middle">.v-align-middle</div>
145145+ <div class="d-table-cell v-align-bottom">.v-align-bottom</div>
146146+</div>
147147+```
148148+149149+Use `v-align-text-top` or `v-align-text-bottom` to adjust the alignment of an element with the top or bottom of the parent element's font.
150150+151151+```html
152152+<div class="border border-gray">
153153+ <h1 class="mr-1">Potatoes
154154+ <span class="f4 v-align-text-top mr-1">.v-align-text-top</span>
155155+ <span class="f4 v-align-text-bottom mr-1">.v-align-text-bottom</span>
156156+ </h1>
157157+</div>
158158+```
159159+160160+## Width and height
161161+162162+Use `.width-fit` to set max-width 100%.
163163+164164+```html
165165+<div class="one-fourth column">
166166+ <img class="width-fit bg-gray" src="https://github.com/github.png" alt="width fitted octocat" />
167167+</div>
168168+```
169169+170170+Use `.width-full` to set width to 100%.
171171+172172+```html
173173+<div class="d-table width-full">
174174+ <div class="d-table-cell">
175175+ <input class="form-control width-full" type="text" value="Full width form field" aria-label="Sample full width form field">
176176+ </div>
177177+</div>
178178+```
179179+180180+Use `.height-fit` to set max-height 100%.
181181+182182+```html
183183+<div class="one-fourth column" style="height: 100px; overflow: auto;">
184184+ <div class="p-3 height-fit border">
185185+ Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
186186+ </div>
187187+</div>
188188+```
189189+190190+Use `.height-full` to set height to 100%.
191191+192192+```erb
193193+<div class="d-table border border-gray">
194194+ <div class="d-table-cell height-full v-align-middle pl-3">
195195+ <%= octicon "three-bars" %>
196196+ </div>
197197+ <div class="p-3">
198198+ Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
199199+ </div>
200200+</div>
201201+```
202202+203203+## Position
204204+Position utilities can be used to alter the default document flow. **Be careful when using positioning, it's often unnecessary and commonly misused.**
205205+206206+Use `.position-relative` to create a new stacking context.
207207+208208+_Note how the other elements are displayed as if "Two" were in its normal position and taking up space._
209209+210210+```html
211211+<div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;">
212212+ One
213213+</div>
214214+<div class="d-inline-block float-left position-relative bg-blue text-white m-3" style="width:100px; height:100px; top:12px; left:12px;">
215215+ Two
216216+</div>
217217+<div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;">
218218+ Three
219219+</div>
220220+<div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;">
221221+ Four
222222+</div>
223223+```
224224+225225+Use `.position-absolute` to take elements out of the normal document flow.
226226+227227+```html
228228+<div class="position-relative" style="height:116px;">
229229+ <button type="button" class="btn mb-1">Button</button>
230230+ <div class="position-absolute border border-gray p-2">
231231+ <a href="#url" class="d-block p-1">Mashed potatoes</a>
232232+ <a href="#url" class="d-block p-1">Fries</a>
233233+ </div>
234234+</div>
235235+```
236236+237237+Use `.position-fixed` to position an element relative to the viewport. **Be careful when using fixed positioning. It is tricky to use and can lead to unwanted side effects.**
238238+239239+_Note: fixed positioning has been disabled here for demonstration only._
240240+241241+```html
242242+<div class="position-fixed bg-gray-light border-bottom border-gray p-3">
243243+ .position-fixed
244244+</div>
245245+```
246246+247247+Use `top-0`, `right-0`, `bottom-0`, and `left-0` with `position-absolute`, `position-fixed`, or `position-relative` to further specify an elements position.
248248+249249+```html
250250+<div style="height: 64px;">
251251+ <div class="border position-absolute top-0 left-0">
252252+ .top-0 .left-0
253253+ </div>
254254+ <div class="border position-absolute top-0 right-0">
255255+ .top-0 .right-0
256256+ </div>
257257+ <div class="border position-absolute bottom-0 right-0">
258258+ .bottom-0 .right-0
259259+ </div>
260260+ <div class="border position-absolute bottom-0 left-0">
261261+ .bottom-0 .left-0
262262+ </div>
263263+</div>
264264+```
265265+266266+To fill an entire width or height, use opposing directions.
267267+268268+_Note: fixed positioning has been disabled here for demonstration only._
269269+270270+```html
271271+<div class="position-fixed left-0 right-0 p-3 bg-gray-dark text-white">
272272+ .position-fixed .left-0 .right-0
273273+</div>
274274+```
275275+276276+### Screen reader only
277277+278278+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.**
279279+280280+```html
281281+<div class="js-details-container Details">
282282+ <button type="button" class="btn">Tab once from this button, and press enter</button>
283283+ <button type="button" class="sr-only js-details-target">
284284+ Screen reader only button
285285+ </button>
286286+ <div class="Details-content--hidden">
287287+ Button activated!
288288+ </div>
289289+</div>
290290+```
291291+292292+## The media object
293293+294294+Create a media object with utilities.
295295+296296+```html
297297+<div class="clearfix p-3 border">
298298+ <div class="float-left p-3 mr-3 bg-gray">
299299+ Image
300300+ </div>
301301+ <div class="overflow-hidden">
302302+ <p><b>Body</b> Bacon ipsum dolor amet shankle rump tenderloin pork chop meatball strip steak bresaola doner sirloin capicola biltong shank pig. Alcatra frankfurter ham hock, ribeye prosciutto hamburger kevin brisket chuck burgdoggen short loin.</p>
303303+ </div>
304304+</div>
305305+```
306306+Create a double-sided media object for a container with a flexible center.
307307+308308+```html
309309+<div class="clearfix p-3 border border-gray">
310310+ <div class="float-left p-3 mr-3 bg-gray">
311311+ Image
312312+ </div>
313313+ <div class="float-right p-3 ml-3 bg-gray">
314314+ Image
315315+ </div>
316316+ <div class="overflow-hidden">
317317+ <p><b>Body</b> Bacon ipsum dolor amet shankle rump tenderloin pork chop meatball strip steak bresaola doner sirloin capicola biltong shank pig. Alcatra frankfurter ham hock, ribeye prosciutto hamburger kevin brisket chuck burgdoggen short loin.</p>
318318+ </div>
319319+</div>
320320+```
321321+322322+You can also create a media object with [flexbox utilities](./flexbox#media-object) instead of floats which can be useful for changing the vertical alignment.
323323+324324+[hidden]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
+127
node_modules/primer-utilities/docs/margin.md
···11+---
22+title: Margin
33+path: utilities/margin
44+status: Stable
55+---
66+77+Margin utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
88+99+{:toc}
1010+1111+## Naming convention
1212+1313+Since margin utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
1414+1515+1616+| Shorthand | Description |
1717+| --- | --- |
1818+| m | margin |
1919+| t | top |
2020+| r | right |
2121+| b | bottom |
2222+| l | left |
2323+| x | horizontal, left & right |
2424+| y | vertical, top & bottom |
2525+| 0 | 0 |
2626+| 1 | 4px |
2727+| 2 | 8px |
2828+| 3 | 16px |
2929+| 4 | 24px |
3030+| 5 | 32px |
3131+| 6 | 40px |
3232+3333+_**Note:** The blue in the examples represents the element, and the orange represents the margin_
3434+3535+## Uniform margins
3636+3737+Use uniform spacing utilities to apply equal margin to all sides of an element. These utilities can change or override default margins, and can be used with a spacing scale from 0-6.
3838+3939+```html
4040+<div class="margin-orange d-inline-block">
4141+ <div class="d-inline-block block-blue m-0">.m-0</div>
4242+</div>
4343+<div class="margin-orange d-inline-block">
4444+ <div class="d-inline-block block-blue m-1">.m-1</div>
4545+</div>
4646+<div class="margin-orange d-inline-block">
4747+ <div class="d-inline-block block-blue m-2">.m-2</div>
4848+</div>
4949+<div class="margin-orange d-inline-block">
5050+ <div class="d-inline-block block-blue m-3">.m-3</div>
5151+</div>
5252+<div class="margin-orange d-inline-block">
5353+ <div class="d-inline-block block-blue m-4">.m-4</div>
5454+</div>
5555+<div class="margin-orange d-inline-block">
5656+ <div class="d-inline-block block-blue m-5">.m-5</div>
5757+</div>
5858+<div class="margin-orange d-inline-block">
5959+ <div class="d-inline-block block-blue m-6">.m-6</div>
6060+</div>
6161+```
6262+6363+## Directional margins
6464+6565+Use directional utilities to apply margin to an individual side, or the X and Y axis of an element. Directional utilities can change or override default margins, and can be used with a spacing scale of 0-6.
6666+6767+```html
6868+<div class="margin-orange d-inline-block">
6969+ <div class="d-inline-block block-blue mt-3">.mt-3</div>
7070+</div>
7171+<div class="margin-orange d-inline-block">
7272+ <div class="d-inline-block block-blue mr-3">.mr-3</div>
7373+</div>
7474+<div class="margin-orange d-inline-block">
7575+ <div class="d-inline-block block-blue mb-3">.mb-3</div>
7676+</div>
7777+<div class="margin-orange d-inline-block">
7878+ <div class="d-inline-block block-blue ml-3">.ml-3</div>
7979+</div>
8080+<div class="margin-orange d-inline-block">
8181+ <div class="d-inline-block block-blue my-3">.my-3</div>
8282+</div>
8383+<div class="margin-orange d-inline-block">
8484+ <div class="d-inline-block block-blue mx-3">.mx-3</div>
8585+</div>
8686+```
8787+8888+## Center elements
8989+9090+Use `mx-auto`to center block elements with a set width.
9191+9292+```html
9393+<div class="margin-orange">
9494+ <div class="block-blue mx-auto text-center" style="width: 5rem;">.mx-auto</div>
9595+</div>
9696+```
9797+9898+## Reset margins
9999+Reset margins built into typography elements or other components with `m-0`, `mt-0`, `mr-0`, `mb-0`, `ml-0`, `mx-0`, and `my-0`.
100100+101101+```html
102102+<p class="mb-0 block-blue">No bottom margin on this paragraph.</p>
103103+```
104104+105105+## Responsive margins
106106+107107+All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
108108+109109+```html
110110+<div class="d-inline-block margin-orange">
111111+ <div class="mx-sm-2 mx-lg-4 d-inline-block block-blue">
112112+ .mx-sm-2 .mx-lg-4
113113+ </div>
114114+</div>
115115+```
116116+117117+## Negative margins
118118+119119+You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
120120+121121+```html
122122+<div class="d-inline-block margin-orange p-3">
123123+ <div class="d-inline-block block-blue mt-n4 mr-lg-n4">
124124+ .mt-n4 .mr-lg-n6
125125+ </div>
126126+</div>
127127+```
+111
node_modules/primer-utilities/docs/padding.md
···11+---
22+title: Padding
33+path: utilities/padding
44+status: Stable
55+---
66+77+Padding utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
88+99+{:toc}
1010+1111+## Shorthand
1212+1313+Since padding utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
1414+1515+| Shorthand | Description |
1616+| --- | --- |
1717+| p | padding |
1818+| t | top |
1919+| r | right |
2020+| b | bottom |
2121+| l | left |
2222+| x | horizontal, left & right |
2323+| y | vertical, top & bottom |
2424+| 0 | 0 |
2525+| 1 | 4px |
2626+| 2 | 8px |
2727+| 3 | 16px |
2828+| 4 | 24px |
2929+| 5 | 32px |
3030+| 6 | 40px |
3131+3232+_**Note:** The blue in the examples below represents the element, and the green represents the padding._
3333+3434+## Uniform padding
3535+3636+Use uniform spacing utilities to apply equal padding to all sides of an element. These utilities can be used with a spacing scale from 0-6.
3737+3838+```html
3939+<div class="padding-green d-inline-block p-0">
4040+ <div class="d-inline-block block-blue">.p-0</div>
4141+</div>
4242+<div class="padding-green d-inline-block p-1">
4343+ <div class="d-inline-block block-blue">.p-1</div>
4444+</div>
4545+<div class="padding-green d-inline-block p-2">
4646+ <div class="d-inline-block block-blue">.p-2</div>
4747+</div>
4848+<div class="padding-green d-inline-block p-3">
4949+ <div class="d-inline-block block-blue">.p-3</div>
5050+</div>
5151+<div class="padding-green d-inline-block p-4">
5252+ <div class="d-inline-block block-blue">.p-4</div>
5353+</div>
5454+<div class="padding-green d-inline-block p-5">
5555+ <div class="d-inline-block block-blue">.p-5</div>
5656+</div>
5757+<div class="padding-green d-inline-block p-6">
5858+ <div class="d-inline-block block-blue">.p-6</div>
5959+</div>
6060+```
6161+6262+## Directional padding
6363+6464+Use directional utilities to apply padding to an individual side, or the X and Y axis of an element. Directional utilities can change or override default padding, and can be used with a spacing scale of 0-6.
6565+6666+```html
6767+<div class="padding-green d-inline-block pt-3">
6868+ <div class="d-inline-block block-blue">.pt-3</div>
6969+</div>
7070+<div class="padding-green d-inline-block pr-3">
7171+ <div class="d-inline-block block-blue">.pr-3</div>
7272+</div>
7373+<div class="padding-green d-inline-block pb-3">
7474+ <div class="d-inline-block block-blue">.pb-3</div>
7575+</div>
7676+<div class="padding-green d-inline-block pl-3">
7777+ <div class="d-inline-block block-blue">.pl-3</div>
7878+</div>
7979+<div class="padding-green d-inline-block py-3">
8080+ <div class="d-inline-block block-blue">.py-3</div>
8181+</div>
8282+<div class="padding-green d-inline-block px-3">
8383+ <div class="d-inline-block block-blue">.px-3</div>
8484+</div>
8585+```
8686+8787+## Responsive padding
8888+8989+All padding utilities can be adjusted per [breakpoint](/css/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
9090+9191+```html
9292+<div class="px-sm-2 px-lg-4 d-inline-block padding-green">
9393+ <div class="d-inline-block block-blue">
9494+ .px-sm-2 .px-lg-4
9595+ </div>
9696+</div>
9797+```
9898+9999+## Responsive container padding
100100+101101+`.p-responsive` is a padding class that adds padding on the left and right sides of an element. On small screens, it gives the element padding of `$spacer-3`, on mid-sized screens it gives the element padding of `$spacer-6`, and on large screens, it gives the element padding of `$spacer-3`.
102102+103103+It is intended to be used with [container styles](/css/objects/grid#containers)
104104+105105+```html
106106+<div class="container-lg p-responsive">
107107+ <div class="border">
108108+ .container-lg .p-responsive
109109+ </div>
110110+</div>
111111+```
+144
node_modules/primer-utilities/docs/typography.md
···11+---
22+title: Typography
33+path: utilities/typography
44+status: Stable
55+---
66+77+Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/css/support/typography#typography-variables) that you can use in components or custom CSS.
88+99+{:toc}
1010+1111+Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop.
1212+1313+| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
1414+| --- | --- | --- | --- | --- |
1515+| 00 | 40px | 48px | 60 | 72 |
1616+| 0 | 32px | 40px | 50 | 60 |
1717+| 1 | 26px | 32px | 40 | 48 |
1818+| 2 | 22px | 24px | 30 | 36 |
1919+| 3 | 18px | 20px | 25 | 30 |
2020+| 4 | 16px | 16px | 20 | 24 |
2121+| 5 | 14px | 14px | 17.5 | 21 |
2222+| 6 | 12px | 12px | 15 | 18 |
2323+2424+2525+## Heading utilities
2626+2727+Use `.h1` – `.h6` to change an elements font size and weight to match our heading styles.
2828+2929+```html
3030+<p class="h1">Pizza 1</p>
3131+<p class="h2">Pizza 2</p>
3232+<p class="h3">Pizza 3</p>
3333+<p class="h4">Pizza 4</p>
3434+<p class="h5">Pizza 5</p>
3535+<p class="h6">Pizza 6</p>
3636+```
3737+3838+These are particularly useful for changing the visual appearance while keeping the markup semantically correct. Be sure you keep the hierarchy appropriate for the page.
3939+4040+```html
4141+<h2 class="h1">Looks like a heading 1, semantically a heading 2</h2>
4242+```
4343+4444+## Type scale utilities
4545+4646+Use `.f1` – `.f6` to change an elements font size while keeping inline with our type scale.
4747+4848+```html
4949+<p class="f1">Focaccia</p>
5050+<p class="f2">Focaccia</p>
5151+<p class="f3">Focaccia</p>
5252+<p class="f4">Focaccia</p>
5353+<p class="f5">Focaccia</p>
5454+<p class="f6">Focaccia</p>
5555+```
5656+5757+Lighter font-weight utilities are available in a limited range. Lighter font-weights reduce the legibility of text, particularly at small font sizes, so the scale only goes down to `f3` at 20px. The larger sizes`f0` and `f00` allow for lighter and larger type that is in keeping with our marketing styles.
5858+5959+```html
6060+<h1 class="f00-light">Potato chips</h1>
6161+<h1 class="f0-light">Potato chips</h1>
6262+<h1 class="f1-light">Potato chips</h1>
6363+<h1 class="f2-light">Potato chips</h1>
6464+<h1 class="f3-light">Potato chips</h1>
6565+```
6666+6767+## Line height styles
6868+Change the line height density with these utilities.
6969+7070+```html
7171+<p class="lh-default">
7272+ Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
7373+</p>
7474+<p class="lh-condensed">
7575+ Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
7676+</p>
7777+<p class="lh-condensed-ultra">
7878+ Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
7979+</p>
8080+```
8181+8282+The `lh-0` utility class sets `line-height: 0 !important`, and can be used to remove vertical spacing from elements that inherit line-height but don't contain any text.
8383+8484+## Typographic styles
8585+Change the font weight, styles, and alignment with these utilities.
8686+8787+```html
8888+<p class="text-normal">Normal</p>
8989+<p class="text-italic">Italic</p>
9090+<p class="text-bold">Bold</p>
9191+<p class="text-uppercase">Uppercase</p>
9292+<p class="no-wrap">No wrap</p>
9393+<p class="ws-normal">Normal whitespace</p>
9494+<p class="wb-break-all">Line break long lines</p>
9595+<p class="text-underline">Text underline</p>
9696+<p class="no-underline">No underline</p>
9797+<p class="text-emphasized">Emphasized</p>
9898+<p class="text-small">Small</p>
9999+<p class="lead">Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
100100+<p class="text-mono">Monospace</p>
101101+<p class="user-select-none">User Select None</p>
102102+```
103103+104104+## Text alignment
105105+106106+ Use text alignment utilities to left align, center, or right align text.
107107+108108+```html
109109+<p class="text-left">Left align</p>
110110+<p class="text-center">Center</p>
111111+<p class="text-right">Right align</p>
112112+```
113113+## Responsive text alignment
114114+115115+Use the following formula to make a text alignment utility responsive: `.text-[breakpoint]-[alignment]`
116116+117117+```html
118118+<p class="text-left text-sm-center text-lg-right">Left in a small viewport, centered in mid-sized viewports, and right aligned in larger viewports</p>
119119+```
120120+121121+## List styles
122122+123123+Remove bullets from an unordered list or numbers from an ordered list by applying `.list-style-none` to the `<ul>`.
124124+125125+```html
126126+<ul class="list-style-none">
127127+ <li>First list item</li>
128128+ <li>Second list item</li>
129129+ <li>Third list item</li>
130130+</ul>
131131+```
132132+133133+## Text Shadows
134134+135135+Text shadows can be used to help readability and to add some depth on colored backgrounds.
136136+137137+```html
138138+<div class="bg-gray-dark p-5">
139139+ <h3 class="text-white text-shadow-dark">.text-shadow-dark helps white text stand out on dark or photographic backgrounds</h3>
140140+</div>
141141+<div class="bg-gray p-5">
142142+ <h3 class="text-shadow-light">.text-shadow-light creates an embossed effect for dark text</h3>
143143+</div>
144144+```
+14
node_modules/primer-utilities/index.scss
···11+@import "primer-support/index.scss";
22+// utilities
33+@import "./lib/animations.scss";
44+@import "./lib/borders.scss";
55+@import "./lib/box-shadow.scss";
66+@import "./lib/colors.scss";
77+@import "./lib/details.scss";
88+@import "./lib/flexbox.scss";
99+@import "./lib/layout.scss";
1010+@import "./lib/margin.scss";
1111+@import "./lib/padding.scss";
1212+@import "./lib/typography.scss";
1313+// Visibility and display should always come last in the imports so that they override other utilities with !important
1414+@import "./lib/visibility-display.scss";
···11+// Color utilities
22+// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
33+// stylelint-disable comment-empty-line-before
44+55+// background colors
66+/* Set the background to $bg-white */
77+.bg-white { background-color: $bg-white !important; }
88+/* Set the background to $bg-blue */
99+.bg-blue { background-color: $bg-blue !important; }
1010+/* Set the background to $bg-blue-light */
1111+.bg-blue-light { background-color: $bg-blue-light !important; }
1212+/* Set the background to $bg-gray-dark */
1313+.bg-gray-dark { background-color: $bg-gray-dark !important; }
1414+/* Set the background to $bg-gray */
1515+.bg-gray { background-color: $bg-gray !important; }
1616+/* Set the background to $bg-gray-light */
1717+.bg-gray-light { background-color: $bg-gray-light !important; }
1818+/* Set the background to $bg-green */
1919+.bg-green { background-color: $bg-green !important; }
2020+/* Set the background to $bg-green-light */
2121+.bg-green-light { background-color: $bg-green-light !important; }
2222+/* Set the background to $bg-red */
2323+.bg-red { background-color: $bg-red !important; }
2424+/* Set the background to $bg-red-light */
2525+.bg-red-light { background-color: $bg-red-light !important; }
2626+/* Set the background to $bg-yellow */
2727+.bg-yellow { background-color: $bg-yellow !important; }
2828+/* Set the background to $bg-yellow-light */
2929+.bg-yellow-light { background-color: $bg-yellow-light !important; }
3030+/* Set the background to $bg-purple */
3131+.bg-purple { background-color: $bg-purple !important; }
3232+/* Set the background to $bg-purple-light */
3333+.bg-purple-light { background-color: $bg-purple-light !important; }
3434+3535+.bg-shade-gradient {
3636+ background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important;
3737+ background-repeat: no-repeat !important;
3838+ background-size: 100% 200px !important;
3939+}
4040+4141+// text colors
4242+/* Set the text color to $text-blue */
4343+.text-blue { color: $text-blue !important; }
4444+/* Set the text color to $text-red */
4545+.text-red { color: $text-red !important; }
4646+/* Set the text color to $text-gray-light */
4747+.text-gray-light { color: $text-gray-light !important; }
4848+/* Set the text color to $text-gray */
4949+.text-gray { color: $text-gray !important; }
5050+/* Set the text color to $text-gray-dark */
5151+.text-gray-dark { color: $text-gray-dark !important; }
5252+/* Set the text color to $text-green */
5353+.text-green { color: $text-green !important; }
5454+/* Set the text color to $text-orange */
5555+.text-orange { color: $text-orange !important; }
5656+/* Set the text color to $text-orange-light */
5757+.text-orange-light { color: $text-orange-light !important; }
5858+/* Set the text color to $text-purple */
5959+.text-purple { color: $text-purple !important; }
6060+/* Set the text color to $text-white */
6161+.text-white { color: $text-white !important; }
6262+/* Set the text color to inherit */
6363+.text-inherit { color: inherit !important; }
6464+6565+// Text states
6666+// These can probably all be regular utilities
6767+.text-pending { color: $yellow-800 !important; }
6868+// Separate text and background colors in future to improve a11y
6969+.bg-pending { color: $yellow-700 !important; }
7070+7171+// Link colors
7272+// Sets the links color to $text-gray and $text-blue on hover
7373+.link-gray {
7474+ color: $text-gray !important;
7575+7676+ &:hover {
7777+ color: $text-blue !important;
7878+ }
7979+}
8080+8181+// Sets the links color to $text-gray-dark and $text-blue on hover
8282+.link-gray-dark {
8383+ color: $text-gray-dark !important;
8484+8585+ &:hover {
8686+ color: $text-blue !important;
8787+ }
8888+}
8989+9090+/* Set the link color to $text-blue on hover
9191+ Useful when you want only part of a link to turn blue on hover */
9292+.link-hover-blue {
9393+ &:hover {
9494+ color: $text-blue !important;
9595+ }
9696+}
9797+9898+/* Make a link $text-gray, then $text-blue on hover and removes the underline */
9999+.muted-link {
100100+ color: $text-gray !important;
101101+102102+ &:hover {
103103+ color: $text-blue !important;
104104+ text-decoration: none;
105105+ }
106106+}
···11+// Layout
22+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
33+// stylelint-disable comment-empty-line-before
44+55+/* Set position to static */
66+.position-static { position: static !important; }
77+/* Set position to relative */
88+.position-relative { position: relative !important; }
99+/* Set position to absolute */
1010+.position-absolute { position: absolute !important; }
1111+/* Set position to fixed */
1212+.position-fixed { position: fixed !important; }
1313+1414+/* Set top 0 */
1515+.top-0 { top: 0 !important; }
1616+/* Set right 0 */
1717+.right-0 { right: 0 !important; }
1818+/* Set bottom 0 */
1919+.bottom-0 { bottom: 0 !important; }
2020+/* Set left 0 */
2121+.left-0 { left: 0 !important; }
2222+2323+/* Vertical align middle */
2424+.v-align-middle { vertical-align: middle !important; }
2525+/* Vertical align top */
2626+.v-align-top { vertical-align: top !important; }
2727+/* Vertical align bottom */
2828+.v-align-bottom { vertical-align: bottom !important; }
2929+/* Vertical align to the top of the text */
3030+.v-align-text-top { vertical-align: text-top !important; }
3131+/* Vertical align to the bottom of the text */
3232+.v-align-text-bottom { vertical-align: text-bottom !important; }
3333+/* Vertical align to the parent's baseline */
3434+.v-align-baseline { vertical-align: baseline !important; }
3535+3636+// Overflow utilities
3737+// overflow-hidden can also be used to create a new
3838+// block formatting context or clear floats.
3939+/* Set the overflow hidden */
4040+.overflow-hidden { overflow: hidden !important; }
4141+/* Set the overflow scroll */
4242+.overflow-scroll { overflow: scroll !important; }
4343+/* Set the overflow auto */
4444+.overflow-auto { overflow: auto !important; }
4545+4646+// Clear floats
4747+/* Clear floats around the element */
4848+.clearfix {
4949+ @include clearfix;
5050+}
5151+5252+// Floats
5353+@each $breakpoint, $variant in $responsive-variants {
5454+ @include breakpoint($breakpoint) {
5555+ /* Float to the left */
5656+ .float#{$variant}-left { float: left !important; }
5757+ /* Float to the right */
5858+ .float#{$variant}-right { float: right !important; }
5959+ /* No float */
6060+ .float#{$variant}-none { float: none !important; }
6161+ }
6262+}
6363+6464+// Width and height utilities, helpful in combination
6565+// with display-table utilities and images
6666+/* Max width 100% */
6767+.width-fit { max-width: 100% !important; }
6868+/* Set the width to 100% */
6969+.width-full { width: 100% !important; }
7070+/* Max height 100% */
7171+.height-fit { max-height: 100% !important; }
7272+/* Set the height to 100% */
7373+.height-full { height: 100% !important; }
7474+7575+/* Remove min-width from element */
7676+.min-width-0 { min-width: 0 !important; }
7777+7878+@each $breakpoint, $variant in $responsive-variants {
7979+ @include breakpoint($breakpoint) {
8080+ /* Set the direction to rtl */
8181+ .direction#{$variant}-rtl { direction: rtl !important; }
8282+ /* Set the direction to ltr */
8383+ .direction#{$variant}-ltr { direction: ltr !important; }
8484+ }
8585+}
+53
node_modules/primer-utilities/lib/margin.scss
···11+// Margin spacer utilities
22+// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
33+44+// Loop through the breakpoint values
55+@each $breakpoint, $variant in $responsive-variants {
66+ @include breakpoint($breakpoint) {
77+ // Loop through the spacer values
88+ @for $i from 1 through length($spacers) {
99+ $size: nth($spacers, $i); // sm, md, lg, xl
1010+ $scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
1111+1212+ /* Set a $size margin to all sides at $breakpoint */
1313+ .m#{$variant}-#{$scale} { margin: $size !important; }
1414+ /* Set a $size margin on the top at $breakpoint */
1515+ .mt#{$variant}-#{$scale} { margin-top: $size !important; }
1616+ /* Set a $size margin on the right at $breakpoint */
1717+ .mr#{$variant}-#{$scale} { margin-right: $size !important; }
1818+ /* Set a $size margin on the bottom at $breakpoint */
1919+ .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
2020+ /* Set a $size margin on the left at $breakpoint */
2121+ .ml#{$variant}-#{$scale} { margin-left: $size !important; }
2222+2323+ @if ($size != 0) {
2424+ /* Set a negative $size margin on top at $breakpoint */
2525+ .mt#{$variant}-n#{$scale} { margin-top : -$size !important; }
2626+ /* Set a negative $size margin on the right at $breakpoint */
2727+ .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
2828+ /* Set a negative $size margin on the bottom at $breakpoint */
2929+ .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
3030+ /* Set a negative $size margin on the left at $breakpoint */
3131+ .ml#{$variant}-n#{$scale} { margin-left : -$size !important; }
3232+ }
3333+3434+ /* Set a $size margin on the left & right at $breakpoint */
3535+ .mx#{$variant}-#{$scale} {
3636+ margin-right: $size !important;
3737+ margin-left: $size !important;
3838+ }
3939+4040+ /* Set a $size margin on the top & bottom at $breakpoint */
4141+ .my#{$variant}-#{$scale} {
4242+ margin-top: $size !important;
4343+ margin-bottom: $size !important;
4444+ }
4545+ }
4646+4747+ /* responsive horizontal auto margins */
4848+ .mx#{$variant}-auto {
4949+ margin-right: auto !important;
5050+ margin-left: auto !important;
5151+ }
5252+ }
5353+}
+54
node_modules/primer-utilities/lib/padding.scss
···11+// Padding spacer utilities
22+// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
33+// stylelint-disable comment-empty-line-before
44+55+// Responsive padding spacer utilities
66+@each $breakpoint, $variant in $responsive-variants {
77+ @include breakpoint($breakpoint) {
88+ // Loop through the spacer values
99+ @for $i from 1 through length($spacers) {
1010+ $size: nth($spacers, $i); // xs, sm, md, lg, xl
1111+ $scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
1212+1313+ /* Set a $size padding to all sides at $breakpoint */
1414+ .p#{$variant}-#{$scale} { padding: $size !important; }
1515+ /* Set a $size padding to the top at $breakpoint */
1616+ .pt#{$variant}-#{$scale} { padding-top: $size !important; }
1717+ /* Set a $size padding to the right at $breakpoint */
1818+ .pr#{$variant}-#{$scale} { padding-right: $size !important; }
1919+ /* Set a $size padding to the bottom at $breakpoint */
2020+ .pb#{$variant}-#{$scale} { padding-bottom: $size !important; }
2121+ /* Set a $size padding to the left at $breakpoint */
2222+ .pl#{$variant}-#{$scale} { padding-left: $size !important; }
2323+2424+ /* Set a $size padding to the left & right at $breakpoint */
2525+ .px#{$variant}-#{$scale} {
2626+ padding-right: $size !important;
2727+ padding-left: $size !important;
2828+ }
2929+3030+ /* Set a $size padding to the top & bottom at $breakpoint */
3131+ .py#{$variant}-#{$scale} {
3232+ padding-top: $size !important;
3333+ padding-bottom: $size !important;
3434+ }
3535+ }
3636+ }
3737+}
3838+3939+// responsive padding for containers
4040+// stylelint-disable-next-line primer/selector-no-utility
4141+.p-responsive {
4242+ padding-right: $spacer-3 !important;
4343+ padding-left: $spacer-3 !important;
4444+4545+ @include breakpoint(sm) {
4646+ padding-right: $spacer-6 !important;
4747+ padding-left: $spacer-6 !important;
4848+ }
4949+5050+ @include breakpoint(lg) {
5151+ padding-right: $spacer-3 !important;
5252+ padding-left: $spacer-3 !important;
5353+ }
5454+}
+215
node_modules/primer-utilities/lib/typography.scss
···11+// stylelint-disable block-closing-brace-space-before, primer/selector-no-utility, selector-list-comma-newline-after
22+// stylelint-disable comment-empty-line-before
33+// Type scale variables found in primer-support/lib/variables.scss
44+// $h00-size-mobile: 40px;
55+// $h0-size-mobile: 32px;
66+// $h1-size-mobile: 26px;
77+// $h2-size-mobile: 22px;
88+// $h3-size-mobile: 18px;
99+// $h00-size: 48px;
1010+// $h0-size: 40px;
1111+// $h1-size: 32px;
1212+// $h2-size: 24px;
1313+// $h3-size: 20px;
1414+// $h4-size: 16px;
1515+// $h5-size: 14px;
1616+// $h6-size: 12px;
1717+1818+/* Set the font size to 26px */
1919+.h1 {
2020+ font-size: $h1-size-mobile !important;
2121+2222+ @include breakpoint(md) { font-size: $h1-size !important; }
2323+}
2424+2525+/* Set the font size to 22px */
2626+.h2 {
2727+ font-size: $h2-size-mobile !important;
2828+2929+ @include breakpoint(md) { font-size: $h2-size !important; }
3030+}
3131+3232+/* Set the font size to 18px */
3333+.h3 {
3434+ font-size: $h3-size-mobile !important;
3535+3636+ @include breakpoint(md) { font-size: $h3-size !important; }
3737+}
3838+3939+/* Set the font size to #{$h4-size} */
4040+.h4 {
4141+ font-size: $h4-size !important;
4242+}
4343+4444+/* Set the font size to #{$h5-size} */
4545+.h5 { font-size: $h5-size !important; }
4646+4747+// Does not include color property like typography base
4848+// styles, color should be applied with color utilities.
4949+/* Set the font size to #{$h6-size} */
5050+.h6 { font-size: $h6-size !important; }
5151+5252+// Heading utilities
5353+.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: $font-weight-bold !important; }
5454+5555+// Type utilities that match type sale
5656+/* Set the font size to 26px */
5757+.f1 {
5858+ font-size: $h1-size-mobile !important;
5959+6060+ @include breakpoint(md) { font-size: $h1-size !important; }
6161+}
6262+6363+/* Set the font size to 22px */
6464+.f2 {
6565+ font-size: $h2-size-mobile !important;
6666+6767+ @include breakpoint(md) { font-size: $h2-size !important; }
6868+}
6969+7070+/* Set the font size to 18px */
7171+.f3 {
7272+ font-size: $h3-size-mobile !important;
7373+7474+ @include breakpoint(md) { font-size: $h3-size !important; }
7575+}
7676+7777+/* Set the font size to #{$h4-size} */
7878+.f4 {
7979+ font-size: $h4-size !important;
8080+8181+ @include breakpoint(md) { font-size: $h4-size !important; }
8282+}
8383+8484+/* Set the font size to #{$h5-size} */
8585+.f5 { font-size: $h5-size !important; }
8686+/* Set the font size to #{$h6-size} */
8787+.f6 { font-size: $h6-size !important; }
8888+8989+// Type utils with light weight that match type scale
9090+/* Set the font size to 40px and weight to light */
9191+.f00-light {
9292+ font-size: $h00-size-mobile !important;
9393+ font-weight: $font-weight-light !important;
9494+9595+ @include breakpoint(md) { font-size: $h00-size !important; }
9696+}
9797+9898+/* Set the font size to 32px and weight to light */
9999+.f0-light {
100100+ font-size: $h0-size-mobile !important;
101101+ font-weight: $font-weight-light !important;
102102+103103+ @include breakpoint(md) { font-size: $h0-size !important; }
104104+}
105105+106106+/* Set the font size to 26px and weight to light */
107107+.f1-light {
108108+ font-size: $h1-size-mobile !important;
109109+ font-weight: $font-weight-light !important;
110110+111111+ @include breakpoint(md) { font-size: $h1-size !important; }
112112+}
113113+114114+/* Set the font size to 22px and weight to light */
115115+.f2-light {
116116+ font-size: $h2-size-mobile !important;
117117+ font-weight: $font-weight-light !important;
118118+119119+ @include breakpoint(md) { font-size: $h2-size !important; }
120120+}
121121+122122+// Same size and weight as .lead but without color property
123123+/* Set the font size to 18px and weight to light */
124124+.f3-light {
125125+ font-size: $h3-size-mobile !important;
126126+ font-weight: $font-weight-light !important;
127127+128128+ @include breakpoint(md) { font-size: $h3-size !important; }
129129+}
130130+131131+// Smallest text size
132132+/* Set the font size to ${#h6-size} */
133133+.text-small { font-size: $h6-size !important; } // 12px
134134+135135+/* Large leading paragraphs */
136136+.lead {
137137+ margin-bottom: 30px;
138138+ font-size: $h3-size;
139139+ font-weight: $font-weight-light;
140140+ color: $gray-600;
141141+}
142142+143143+// Line-height variations
144144+// Close to commonly used line-heights. Most line-heights
145145+// combined with type size equate to whole pixels.
146146+// Will be improved with future typography scale updates.
147147+/* Set the line height to ultra condensed */
148148+.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; }
149149+/* Set the line height to condensed */
150150+.lh-condensed { line-height: $lh-condensed !important; }
151151+/* Set the line height to default */
152152+.lh-default { line-height: $lh-default !important; }
153153+/* Set the line height to zero */
154154+.lh-0 { line-height: 0 !important; }
155155+156156+// Text alignments
157157+// Responsive text alignment
158158+@each $breakpoint, $variant in $responsive-variants {
159159+ @include breakpoint($breakpoint) {
160160+ /* Text align to the right */
161161+ .text#{$variant}-right { text-align: right !important; }
162162+ /* Text align to the left */
163163+ .text#{$variant}-left { text-align: left !important; }
164164+ /* Text align to the center */
165165+ .text#{$variant}-center { text-align: center !important; }
166166+ }
167167+}
168168+169169+// Text styles
170170+/* Set the font weight to normal */
171171+.text-normal { font-weight: $font-weight-normal !important; }
172172+/* Set the font weight to bold */
173173+.text-bold { font-weight: $font-weight-bold !important;}
174174+/* Set the font to italic */
175175+.text-italic { font-style: italic !important; }
176176+/* Make text uppercase */
177177+.text-uppercase { text-transform: uppercase !important; }
178178+/* Underline text */
179179+.text-underline { text-decoration: underline !important; }
180180+/* Don't underline text */
181181+.no-underline { text-decoration: none !important; }
182182+/* Don't wrap white space */
183183+.no-wrap { white-space: nowrap !important; }
184184+/* Normal white space */
185185+.ws-normal { white-space: normal !important; }
186186+/* Allow long lines with no spaces to line break */
187187+.wb-break-all { word-break: break-all !important; }
188188+189189+.text-emphasized {
190190+ font-weight: $font-weight-bold;
191191+ color: $text-gray-dark;
192192+}
193193+194194+// List styles
195195+.list-style-none { list-style: none !important; }
196196+197197+// Text Shadows
198198+/* Add a dark text shadow */
199199+.text-shadow-dark {
200200+ text-shadow: 0 1px 1px rgba($black, 0.25), 0 1px 25px rgba($black, 0.75);
201201+}
202202+/* Add a light text shadow */
203203+.text-shadow-light {
204204+ text-shadow: 0 1px 0 rgba($white, 0.5);
205205+}
206206+207207+/* Set to monospace font */
208208+.text-mono {
209209+ font-family: $mono-font;
210210+}
211211+212212+/* Disallow user from selecting text */
213213+.user-select-none {
214214+ user-select: none !important;
215215+}