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 %}

4
shared/includes/docs/docs-card.html
View File

@@ -1,4 +1,4 @@
<div class="col-6">
<div class="col-md-6">
<a href="{{ include.href }}" class="card">
<div class="card-body">
<div class="row">
@@ -9,7 +9,7 @@
{%- endif -%}
<div class="col">
<h3>{{ include.title }}</h3>
<p class="text-secondary m-0">{{ include.description }}</p>
<p class="text-secondary m-0 fs-4 lh-base">{{ include.description }}</p>
</div>
</div>
</div>

2
shared/includes/docs/menu.html
View File

@@ -3,7 +3,7 @@
<nav class="space-y" id="menu">
{% for level1 in menu %}
<div>
<div class="subheader">
<div class="subheader mb-2">
{{ level1.data.title }}
</div>
{% if level1.children %}

2
shared/includes/docs/navbar.html
View File

@@ -1,4 +1,4 @@
<div class="navbar navbar-expand-md sticky-top">
<div class="navbar navbar-expand-md navbar-fixed">
<div class="container">
<div class="row flex-fill align-items-center">
<div class="col">