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

Merge pull request #727 from primer/colored-directional-borders

Browse Source 
Allow changing color on directional borders
This commit is contained in:
Shawn Allen 2019-03-14 13:19:47 -07:00 committed by GitHub
commit f3622f154d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pages/css/utilities/borders.md
View File

@ -115,36 +115,36 @@ Use `.border-white-fade-xx` to add a white border with various levels of alpha t
```html
<div class="bg-gray-dark text-white p-3 mb-3">
<div class="border border-white-fade-15 p-2 mb-2">
<div class="border-bottom border-white-fade-15 p-2 mb-2">
.border-white-fade-15
</div>
<div class="border border-white-fade-30 p-2 mb-2">
<div class="border-bottom border-white-fade-30 p-2 mb-2">
.border-white-fade-30
</div>
<div class="border border-white-fade-50 p-2 mb-2">
<div class="border-bottom border-white-fade-50 p-2 mb-2">
.border-white-fade-50
</div>
<div class="border border-white-fade-70 p-2 mb-2">
<div class="border-bottom border-white-fade-70 p-2 mb-2">
.border-white-fade-70
</div>
<div class="border border-white-fade-85 p-2 mb-2">
<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">
<div class="border border-white-fade-15 p-2 mb-2">
<div class="border-bottom border-white-fade-15 p-2 mb-2">
.border-white-fade-15
</div>
<div class="border border-white-fade-30 p-2 mb-2">
<div class="border-bottom border-white-fade-30 p-2 mb-2">
.border-white-fade-30
</div>
<div class="border border-white-fade-50 p-2 mb-2">
<div class="border-bottom border-white-fade-50 p-2 mb-2">
.border-white-fade-50
</div>
<div class="border border-white-fade-70 p-2 mb-2">
<div class="border-bottom border-white-fade-70 p-2 mb-2">
.border-white-fade-70
</div>
<div class="border border-white-fade-85 p-2 mb-2">
<div class="border-bottom border-white-fade-85 p-2 mb-2">
.border-white-fade-85
</div>
</div>

66
src/utilities/borders.scss
View File

@ -16,39 +16,6 @@
.border-dashed { border-style: dashed !important; }
/* Use with .border to turn the border blue */
.border-blue { border-color: $border-blue !important; }
/* Use with .border to turn the border blue-light */
.border-blue-light { border-color: $border-blue-light !important; }
/* Use with .border to turn the border green */
.border-green { border-color: $border-green !important; }
/* Use with .border to turn the border green light */
.border-green-light { border-color: $border-green-light !important; }
/* Use with .border to turn the border red */
.border-red { border-color: $border-red !important; }
/* Use with .border to turn the border red-light */
.border-red-light { border-color: $border-red-light !important; }
/* Use with .border to turn the border purple */
.border-purple { border-color: $border-purple !important; }
/* Use with .border to turn the border yellow */
.border-yellow { border-color: $border-yellow !important; }
/* Use with .border to turn the border gray-light */
.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 */
.border-white-fade { border-color: $border-white-fade !important; }
/* Use with .border to turn the border white w/varying 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; }
$edges: (
top: (top-left, top-right),
right: (top-right, bottom-right),
@ -109,3 +76,36 @@ $edges: (
/* Add a 50% border-radius to make something into a circle */
.circle { border-radius: 50% !important; }
/* Use with .border to turn the border blue */
.border-blue { border-color: $border-blue !important; }
/* Use with .border to turn the border blue-light */
.border-blue-light { border-color: $border-blue-light !important; }
/* Use with .border to turn the border green */
.border-green { border-color: $border-green !important; }
/* Use with .border to turn the border green light */
.border-green-light { border-color: $border-green-light !important; }
/* Use with .border to turn the border red */
.border-red { border-color: $border-red !important; }
/* Use with .border to turn the border red-light */
.border-red-light { border-color: $border-red-light !important; }
/* Use with .border to turn the border purple */
.border-purple { border-color: $border-purple !important; }
/* Use with .border to turn the border yellow */
.border-yellow { border-color: $border-yellow !important; }
/* Use with .border to turn the border gray-light */
.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 */
.border-white-fade { border-color: $border-white-fade !important; }
/* Use with .border to turn the border white w/varying 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; }