Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

feat: update border utility examples and enhance card styling for improved layout

Browse Source
This commit is contained in:
codecalm
2025-04-19 13:11:11 +02:00
parent 88b9e87c6e
commit 9ebd9f1d24
4 changed files with 36 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
docs/content/ui/utilities/borders.md
View File

@@ -20,42 +20,42 @@ Borders can be applied to specific sides of an element using utility classes. Th
{% capture html -%}
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border"
>
1
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-top"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-top"
>
2
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-end"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-end"
>
3
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-bottom"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-bottom"
>
4
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-start"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-start"
>
5
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-x"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-x"
>
6
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-y"
>
7
</div>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html centered hide-code %}
## Border size
@@ -70,22 +70,22 @@ Border size utilities allow you to control the thickness of borders, providing f
{% capture html -%}
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-0"
>
1
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border"
>
2
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-wide"
>
3
</div>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html centered hide-code %}
## Remove border
@@ -102,37 +102,37 @@ If you want to selectively remove borders from specific sides of an element, you
{% capture html -%}
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-top-0"
>
1
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-end-0"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-end-0"
>
2
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-bottom-0"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-bottom-0"
>
3
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-start-0"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-start-0"
>
4
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-x-0"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-x-0"
>
5
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-y-0"
>
6
</div>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html centered hide-code %}
## Border color
@@ -152,47 +152,47 @@ Customizing the border color helps to enhance the visual appeal and consistency
{% capture html -%}
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-primary"
>
1
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-secondary"
>
2
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-success"
>
3
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-warning"
>
4
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-danger"
>
5
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-info"
>
6
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-dark"
>
7
</div>
<div
class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light"
class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-light"
>
8
</div>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html centered hide-code %}
## Border radius
@@ -239,7 +239,7 @@ Adding border radius gives elements smooth, rounded edges, which can make design
6
</div>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html centered hide-code %}
## Border opacity
@@ -250,7 +250,7 @@ You can adjust the opacity of borders to create subtle visual effects or to blen
<div class="border border-success border-opacity-50">This is 50% opacity success border</div>
```
```html example
{% capture html -%}
<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">
This is 75% opacity success border
@@ -262,4 +262,5 @@ You can adjust the opacity of borders to create subtle visual effects or to blen
This is 25% opacity success border
</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
```
{%- endcapture %}
{% include "docs/example.html" html=html hide-code %}