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 -%} {% capture html -%}
<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"
> >
1 1
</div> </div>
<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 2
</div> </div>
<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 3
</div> </div>
<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 4
</div> </div>
<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 5
</div> </div>
<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 6
</div> </div>
<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 7
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html centered hide-code %}
## Border size ## Border size
@@ -70,22 +70,22 @@ Border size utilities allow you to control the thickness of borders, providing f
{% capture html -%} {% capture html -%}
<div <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 1
</div> </div>
<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 2
</div> </div>
<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 3
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html centered hide-code %}
## Remove border ## Remove border
@@ -102,37 +102,37 @@ If you want to selectively remove borders from specific sides of an element, you
{% capture html -%} {% capture html -%}
<div <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 1
</div> </div>
<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 2
</div> </div>
<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 3
</div> </div>
<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 4
</div> </div>
<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 5
</div> </div>
<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 6
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html centered hide-code %}
## Border color ## Border color
@@ -152,47 +152,47 @@ Customizing the border color helps to enhance the visual appeal and consistency
{% capture html -%} {% capture html -%}
<div <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 1
</div> </div>
<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 2
</div> </div>
<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 3
</div> </div>
<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 4
</div> </div>
<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 5
</div> </div>
<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 6
</div> </div>
<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 7
</div> </div>
<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 8
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html centered hide-code %}
## Border radius ## Border radius
@@ -239,7 +239,7 @@ Adding border radius gives elements smooth, rounded edges, which can make design
6 6
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html centered hide-code %}
## Border opacity ## 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> <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">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75"> <div class="border border-success p-2 mb-2 border-opacity-75">
This is 75% opacity success border 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 This is 25% opacity success border
</div> </div>
<div class="border border-success p-2 border-opacity-10">This is 10% 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"> <a href="{{ include.href }}" class="card">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
@@ -9,7 +9,7 @@
{%- endif -%} {%- endif -%}
<div class="col"> <div class="col">
<h3>{{ include.title }}</h3> <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> </div>
</div> </div>

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

@@ -3,7 +3,7 @@
<nav class="space-y" id="menu"> <nav class="space-y" id="menu">
{% for level1 in menu %} {% for level1 in menu %}
<div> <div>
<div class="subheader"> <div class="subheader mb-2">
{{ level1.data.title }} {{ level1.data.title }}
</div> </div>
{% if level1.children %} {% 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="container">
<div class="row flex-fill align-items-center"> <div class="row flex-fill align-items-center">
<div class="col"> <div class="col">