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

style: Update badge positioning and size in navbar and adjust SCSS variables for consistency

Browse Source
This commit is contained in:
codecalm
2025-11-15 13:37:14 +01:00
parent 5018aa9113
commit ba7bb880c4
5 changed files with 14 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/scss/_variables.scss
View File

@@ -589,7 +589,7 @@ $badge-line-height: $code-line-height !default;
$badge-font-weight: var(--#{$prefix}font-weight-medium) !default; $badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
$badge-padding-y: 0.25em !default; $badge-padding-y: 0.25em !default;
$badge-padding-x: 0.5em !default; $badge-padding-x: 0.5em !default;
$badge-empty-size: 10px !default; $badge-empty-size: .5rem !default;
$badge-color: var(--#{$prefix}secondary) !default; $badge-color: var(--#{$prefix}secondary) !default;
$badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default; $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;

4
core/scss/layout/_navbar.scss
View File

@@ -117,8 +117,8 @@ Navbar
.badge { .badge {
position: absolute; position: absolute;
top: 0.375rem; top: .5rem;
right: 0.375rem; right: .5rem;
transform: translate(50%, -50%); transform: translate(50%, -50%);
} }
} }

8
shared/includes/layout/navbar-side-apps.html
View File

@@ -1,10 +1,8 @@
<!-- BEGIN APPS --> <!-- BEGIN APPS -->
<div class="nav-item dropdown d-none d-md-flex"> <div class="nav-item dropdown d-none d-md-flex">
<span data-bs-toggle="tooltip" title="Apps" data-bs-placement="bottom"> <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show app menu" data-bs-auto-close="outside" aria-expanded="false">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show app menu" data-bs-auto-close="outside" aria-expanded="false"> {% include "ui/icon.html" icon="apps" %}
{% include "ui/icon.html" icon="apps" %} </a>
</a>
</span>
<!-- BEGIN NAVBAR APPS --> <!-- BEGIN NAVBAR APPS -->
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card"> <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
{% include "cards/navbar-apps.html" %} {% include "cards/navbar-apps.html" %}

10
shared/includes/layout/navbar-side-language.html
View File

@@ -1,11 +1,9 @@
<!-- BEGIN LANGUAGE SELECTOR --> <!-- BEGIN LANGUAGE SELECTOR -->
<div class="nav-item dropdown d-none d-md-flex"> <div class="nav-item dropdown d-none d-md-flex">
<span data-bs-toggle="tooltip" title="Select language" data-bs-placement="bottom"> <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Select language"
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Select language" data-bs-auto-close="outside" aria-expanded="false">
data-bs-auto-close="outside" aria-expanded="false"> EN
EN </a>
</a>
</span>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end"> <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end">
{% for language in languages %} {% for language in languages %}
<a class="dropdown-item" href="#" data-lang="{{ language.code }}"> <a class="dropdown-item" href="#" data-lang="{{ language.code }}">

10
shared/includes/layout/navbar-side-notifications.html
View File

@@ -1,11 +1,9 @@
<!-- BEGIN NOTIFICATIONS --> <!-- BEGIN NOTIFICATIONS -->
<div class="nav-item dropdown d-none d-md-flex"> <div class="nav-item dropdown d-none d-md-flex">
<span data-bs-toggle="tooltip" title="Notifications" data-bs-placement="bottom"> <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" data-bs-auto-close="outside" aria-expanded="false">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" data-bs-auto-close="outside" aria-expanded="false"> {% include "ui/icon.html" icon="bell" %}
{% include "ui/icon.html" icon="bell" %} <span class="badge bg-red"></span>
<span class="badge bg-red"></span> </a>
</a>
</span>
<!-- BEGIN NAVBAR NOTIFICATIONS --> <!-- BEGIN NAVBAR NOTIFICATIONS -->
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card"> <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
{% include "cards/navbar-notifications.html" %} {% include "cards/navbar-notifications.html" %}