primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-01 04:21:12 +03:00
Code Issues Projects Releases Wiki Activity

Add border-white-fade scale to marketing

Browse Source
This commit is contained in:
simurai 2019-03-12 16:53:42 +09:00
parent 6f6c0971f1
commit 0c54c88f81
3 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
pages/css/utilities/marketing-borders.md
View File

@ -2,12 +2,12 @@
title: Marketing Borders
sort_title: Borders Marketing
path: utilities/marketing-borders
status: Stable
status: New release
source: 'https://github.com/primer/css/blob/master/src/marketing/utilities/borders.scss'
bundle: marketing-utilities
---
The following border utilities are meant to used in addition to those within primer-core.
The following border utilities are meant to be used in addition to those within primer-core.
{:toc}
@ -15,17 +15,41 @@ The following border utilities are meant to used in addition to those within pri
### White border with alpha transparency
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](/css/utilities/borders#border-colors).
Use `.border-white-fade-xx` to add a white border with various levels of alpha transparency. 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](/css/utilities/borders#border-colors).
```html
<div class="bg-gray-dark text-white p-3 mb-2">
<span class="border border-white-fade p-2">
.border-white-fade .bg-gray-dark
</span>
<div class="bg-gray-dark text-white p-3 mb-3">
<div class="border-bottom border-white-fade-15 p-2 mb-2">
.border-white-fade-15
</div>
<div class="border-bottom border-white-fade-30 p-2 mb-2">
.border-white-fade-30
</div>
<div class="border-bottom border-white-fade-50 p-2 mb-2">
.border-white-fade-50
</div>
<div class="border-bottom border-white-fade-70 p-2 mb-2">
.border-white-fade-70
</div>
<div class="border-bottom border-white-fade-85 p-2 mb-2">
.border-white-fade-85
</div>
</div>
<div class="bg-blue text-white p-3">
<span class="border border-white-fade p-2">
.border-white-fade .bg-blue
</span>
<div class="border-bottom border-white-fade-15 p-2 mb-2">
.border-white-fade-15
</div>
<div class="border-bottom border-white-fade-30 p-2 mb-2">
.border-white-fade-30
</div>
<div class="border-bottom border-white-fade-50 p-2 mb-2">
.border-white-fade-50
</div>
<div class="border-bottom border-white-fade-70 p-2 mb-2">
.border-white-fade-70
</div>
<div class="border-bottom border-white-fade-85 p-2 mb-2">
.border-white-fade-85
</div>
</div>
```

7
src/marketing/utilities/borders.scss
View File

@ -2,3 +2,10 @@
// XXX If you're looking for responsive border utilities, they've moved to
// ../../utilities/borders.scss
/* Use with .border to turn the border white with transparency */
.border-white-fade-15 { border-color: $white-fade-15 !important; }
.border-white-fade-30 { border-color: $white-fade-30 !important; }
.border-white-fade-50 { border-color: $white-fade-50 !important; }
.border-white-fade-70 { border-color: $white-fade-70 !important; }
.border-white-fade-85 { border-color: $white-fade-85 !important; }

1
src/utilities/borders.scss
View File

@ -36,6 +36,7 @@
.border-gray-light { border-color: $border-gray-light !important; }
/* Use with .border to turn the border gray-dark */
.border-gray-dark { border-color: $border-gray-dark !important; }
/* Use with .border to turn the border rgba black 0.15 */
.border-black-fade { border-color: $border-black-fade !important; }
/* Use with .border to turn the border rgba white 0.15 */