Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

navbar unify

Browse Source
This commit is contained in:
codecalm
2023-05-24 20:11:22 +02:00
parent 9801824732
commit a766a172f5
6 changed files with 71 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/_includes/layout/navbar-menu.html
View File

@@ -11,8 +11,8 @@
<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
{% for level-1 in menu %}
{% assign icon = level-1[1].icon %}
<li class="nav-item{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
<li class="nav-item{% if level-1[1].children %} dropdown{% endif %}">
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
{% unless hide-icons %}
<span class="nav-link-icon d-md-none d-lg-inline-block">{% include ui/icon.html icon=icon %}</span>
{% endunless %}

36
src/scss/_variables.scss
View File

@@ -60,6 +60,7 @@ $font-weight-bold: 600 !default;
$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
$headings-margin-bottom: var(--#{$prefix}spacer) !default;
$headings-color: var(--#{$prefix}body-color) color !default;
$font-weights: (
light: $font-weight-light,
@@ -350,13 +351,12 @@ $caret-width: 0.36em !default;
$caret-spacing: 0.4em !default;
//Sizing
$page-padding: var(--#{$prefix}spacer-3) !default;
$page-padding-sm: var(--#{$prefix}spacer-2) !default;
$page-padding-x: var(--#{$prefix}spacer-3) !default;
$page-padding-y: var(--#{$prefix}spacer-4) !default;
// Sizing
$container-padding-x: calc(var(--#{$prefix}page-padding) * 2) !default;
$grid-gutter-width: var(--#{$prefix}page-padding) !default;
$container-padding-x: calc(var(--#{$prefix}page-padding-x) * 2) !default;
$grid-gutter-width: var(--#{$prefix}page-padding-x) !default;
// Grid
$grid-gutter-width: 1rem !default;
@@ -576,7 +576,7 @@ $card-ribbon-font-size: $h6-font-size !default;
$card-header-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$cards-grid-gap: var(--#{$prefix}page-padding) !default;
$cards-grid-gap: var(--#{$prefix}page-padding-x) !default;
$cards-grid-breakpoint: lg !default;
// Carousel
@@ -674,11 +674,13 @@ $nav-link-padding-x: 0.75rem !default;
$nav-link-color: var(--#{$prefix}muted) !default;
$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
$nav-link-icon-size: $icon-size !default;
$nav-link-icon-color: var(--#{$prefix}icon-color) !default;
$nav-link-icon-color: inherit !default;
$nav-pills-link-active-color: var(--#{$prefix}primary) !default;
$nav-pills-link-active-bg: var(--#{$prefix}active-bg) !default;
$nav-underline-link-active-color: var(--#{$prefix}primary) !default;
$nav-bordered-border-color: var(--#{$prefix}border-color) !default;
$nav-bordered-border-width: var(--#{$prefix}border-width) !default;
$nav-bordered-link-active-color: var(--#{$prefix}primary) !default;
@@ -698,14 +700,17 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$navbar-height: 3.5rem !default;
$navbar-padding-y: 0.25rem !default;
$navbar-border-width: var(--#{$prefix}border-width) !default;
$navbar-border-color: var(--#{$prefix}border-color) !default;
$navbar-light-color: var(--#{$prefix}body-color) !default;
$navbar-light-bg: var(--#{$prefix}bg-surface) !default;
$navbar-light-color: var(--#{$prefix}muted) !default;
$navbar-light-brand-color: var(--#{$prefix}body-color) !default;
$navbar-light-active-color: var(--#{$prefix}body-color) color !default;
$navbar-light-border-color: var(--#{$prefix}border-color) !default;
$navbar-light-border-width: var(--#{$prefix}border-width) !default;
$navbar-light-active-color: var(--#{$prefix}body-color) !default;
$navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
$navbar-light-active-bg: rgba(0, 0, 0, 0.06) !default;
$navbar-light-hover-bg: $hover-bg !default;
$navbar-light-active-bg: null !default;
$navbar-light-active-border-color: var(--#{$prefix}primary) !default;
$navbar-light-active-color: red !default;
$navbar-dark-color: rgba($white, $text-muted-opacity) !default;
$navbar-dark-brand-color: $white !default;
@@ -726,9 +731,10 @@ $navbar-toggler-animation-time: 0.2s !default;
$navbar-toggler-focus-width: 0 !default;
$navbar-overlap-height: 9rem !default;
$navbar-nav-link-padding-x: $nav-link-padding-x !default;
$navbar-active-border-color: var(--#{$prefix}primary) !default;
// Navbar nav
$navbar-nav-gap: .25rem !default;
$navbar-nav-link-padding-x: .5rem !default;
$navbar-nav-link-padding-y: .5rem !default;
// Sidebar
$sidebar-width: 15rem !default;

73
src/scss/layout/_navbar.scss
View File

@@ -73,12 +73,13 @@
Navbar
*/
.navbar {
--#{$prefix}navbar-bg: var(--#{$prefix}bg-surface);
--#{$prefix}navbar-border-width: #{$navbar-border-width};
--#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
--#{$prefix}navbar-bg: #{$navbar-light-bg};
--#{$prefix}navbar-border-width: #{$navbar-light-border-width};
--#{$prefix}navbar-active-border-color: #{$navbar-light-active-border-color};
--#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
--#{$prefix}navbar-color: var(--#{$prefix}body-color);
--#{$prefix}navbar-border-color: #{$navbar-border-color};
--#{$prefix}navbar-hover-bg: #{$navbar-light-hover-bg};
--#{$prefix}navbar-border-color: #{$navbar-light-border-color};
--#{$prefix}navbar-nav-gap: #{$navbar-nav-gap};
align-items: stretch;
min-height: $navbar-height;
box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
@@ -118,9 +119,34 @@ Navbar
}
}
/**
Navbar nav
*/
.navbar-nav {
gap: var(--#{$prefix}navbar-nav-gap);
margin: 0;
padding: 0;
align-items: stretch;
.nav-item {
display: flex;
flex-direction: column;
justify-content: center;
}
.nav-link {
transition: $transition-time background-color;
&.active {
background-color: var(--#{$prefix}navbar-active-bg);
}
&:hover,
&:focus,
&.show {
background-color: var(--#{$prefix}navbar-hover-bg);
}
}
}
.navbar-expand {
@@ -139,19 +165,19 @@ Navbar
flex: 1 1 auto;
}
.nav-item.active {
position: relative;
// .nav-item.active {
// position: relative;
&:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -.25rem;
border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
border-bottom-width: 2px;
}
}
// &:after {
// content: "";
// position: absolute;
// left: 0;
// right: 0;
// bottom: -.25rem;
// border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
// border-bottom-width: 2px;
// }
// }
&.navbar-vertical {
box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
@@ -263,19 +289,6 @@ Navbar transparent
background: transparent !important;
}
/**
Navbar nav
*/
.navbar-nav {
align-items: stretch;
.nav-item {
display: flex;
flex-direction: column;
justify-content: center;
}
}
/**
Navbar side
*/

2
src/scss/layout/_page.scss
View File

@@ -38,7 +38,7 @@
.page-body-card {
background: var(--#{$prefix}bg-surface);
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
padding: var(--#{$prefix}page-padding) 0;
padding: var(--#{$prefix}page-padding-x) 0;
margin-bottom: 0;
flex: 1;

5
src/scss/layout/_root.scss
View File

@@ -44,11 +44,8 @@
--#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
--#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
--#{$prefix}page-padding: #{$page-padding};
--#{$prefix}page-padding-x: #{$page-padding-x};
--#{$prefix}page-padding-y: #{$page-padding-y};
@include media-breakpoint-down($cards-grid-breakpoint) {
--#{$prefix}page-padding: #{$page-padding-sm};
}
@each $name, $value in $font-weights {
--#{$prefix}font-weight-#{$name}: #{$value};

6
src/scss/ui/_timeline.scss
View File

@@ -15,14 +15,14 @@
position: relative;
&:not(:last-child) {
margin-bottom: var(--#{$prefix}page-padding);
margin-bottom: var(--#{$prefix}page-padding-x);
&:before {
content: "";
position: absolute;
top: var(--#{$prefix}timeline-icon-size);
left: calc(var(--#{$prefix}timeline-icon-size) / 2);
bottom: calc(-1 * var(--#{$prefix}page-padding));
bottom: calc(-1 * var(--#{$prefix}page-padding-x));
width: var(--#{$prefix}border-width);
background-color: var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}border-radius);
@@ -44,7 +44,7 @@
}
.timeline-event-card {
margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding));
margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding-x));
}
//