diff options
| author | Mark Otto <[email protected]> | 2017-06-25 18:39:00 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-06-25 18:39:14 -0700 |
| commit | 9bfbee3503d7d76d03ccc85f02a64547b2d31054 (patch) | |
| tree | 70fa1cf6492a9a2797617d99537a79a4fd50fdaf | |
| parent | f8d61218ca8a3e0f5073eac8b7babb8095e66547 (diff) | |
| download | bootstrap-9bfbee3503d7d76d03ccc85f02a64547b2d31054.tar.xz bootstrap-9bfbee3503d7d76d03ccc85f02a64547b2d31054.zip | |
add border color utilities
| -rw-r--r-- | assets/scss/_component-examples.scss | 6 | ||||
| -rw-r--r-- | docs/4.0/utilities/borders.md | 12 | ||||
| -rw-r--r-- | scss/utilities/_borders.scss | 7 |
3 files changed, 22 insertions, 3 deletions
diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss index f85daf759..7bd495fc2 100644 --- a/assets/scss/_component-examples.scss +++ b/assets/scss/_component-examples.scss @@ -363,10 +363,10 @@ } .bd-example-border-utils { - [class^="border-"] { + [class^="border"] { display: inline-block; - width: 6rem; - height: 6rem; + width: 5rem; + height: 5rem; margin: .25rem; background-color: #f5f5f5; border: 1px solid; diff --git a/docs/4.0/utilities/borders.md b/docs/4.0/utilities/borders.md index 8bf3f4674..3b1ee4338 100644 --- a/docs/4.0/utilities/borders.md +++ b/docs/4.0/utilities/borders.md @@ -13,6 +13,7 @@ Add classes to an element to remove all borders or some borders. <div class="bd-example-border-utils"> {% example html %} +<span class="border"></span> <span class="border-0"></span> <span class="border-top-0"></span> <span class="border-right-0"></span> @@ -21,6 +22,17 @@ Add classes to an element to remove all borders or some borders. {% endexample %} </div> +## Border color + +Change the border color using utilities built on our theme colors. + +<div class="bd-example-border-utils"> +{% example html %} +{% for color in site.data.theme-colors %} +<span class="border border-{{ color.name }}"></span>{% endfor %} +{% endexample %} +</div> + ## Border-radius Add classes to an element to easily round its corners. diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index 4cb0a6c3b..05480582c 100644 --- a/scss/utilities/_borders.scss +++ b/scss/utilities/_borders.scss @@ -2,12 +2,19 @@ // Border // +.border { border: 1px solid $gray-200 !important; } .border-0 { border: 0 !important; } .border-top-0 { border-top: 0 !important; } .border-right-0 { border-right: 0 !important; } .border-bottom-0 { border-bottom: 0 !important; } .border-left-0 { border-left: 0 !important; } +@each $color, $value in $theme-colors { + .border-#{$color} { + border-color: $value !important; + } +} + // // Border-radius // |