primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-28 22:01:43 +03:00
Code Issues Projects Releases Wiki Activity

incorporate @broccolini's feedback

Browse Source
This commit is contained in:
Sophie Shepherd 2017-11-06 09:49:16 -06:00
parent 70790018fa
commit c2f69846a8
5 changed files with 5 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
modules/primer-marketing-utilities/docs/borders.md
View File

@ -1,7 +1,6 @@
---
title: Borders
status: New release
status_issue: https://github.com/github/design-systems/issues/325
---
The following border utilities are meant to used in addition to those within primer-core.
@ -22,7 +21,7 @@ Top, right, bottom, and left border utilities are can be used responsively to ad
### White border with alpha transparency
In addition to `.border-black-fade` which is in primer-core, primer-marketing includes `.border-white-fade`. This adds a rgba white border with an alpha transparency of `0.15`. This is useful when you want a border that is a lighter shade of the background color.
Use `.border-white-fade` to add a white border with an alpha transparency of 0.15. This is useful when you want a border that is a lighter shade of the background color. Additional border colors are available in [primer-core border utilities](/borders/#border-colors).
```html
<div class="bg-gray-dark text-white p-3 mb-2">

5
modules/primer-marketing-utilities/docs/layout.md
View File

@ -1,16 +1,15 @@
---
title: Layout
status: New release
status_issue: https://github.com/github/design-systems/issues/325
---
The following layout utilities are meant to used in addition to those within primer-core.
Marketing layout utilities build on top of [primer-core utilities](/layout/#position), adding the option of responsive positioning.
{:toc}
## Responsive position
These position utilities behave the same way as the positioning utilities in primer-core, however they include responsive states so that they can be used at specific viewport widths.
Use responsive position utilities to adjust the position of an element at different breakpoints.
```html
<div class="position-relative p-6 bg-gray">

4
modules/primer-marketing-utilities/lib/borders.scss
View File

@ -17,6 +17,4 @@
}
/* Use with .border to turn the border rgba white 0.15 */
.border-white-fade {
border-color: $white-fade-15 !important;
}
.border-white-fade { border-color: $white-fade-15 !important; }

2
modules/primer-utilities/docs/borders.md
View File

@ -109,7 +109,7 @@ Use `border-dashed` to give an element a dashed border.
## Rounded corners
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.
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.
```html
<div class="Box rounded-0 mb-2">

1
modules/primer-utilities/lib/animations.scss
View File

@ -174,7 +174,6 @@
}
/* Increase scale of an element on hover */
.hover-grow {
transition: transform 0.3s;