Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 09:54:24 +04:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev-navbar' of https://github.com/tabler/tabler into dev

Browse Source
This commit is contained in:
codecalm
2023-06-07 20:58:41 +02:00
parent 9020c26c0f 028ad6f433
commit c6aec6f444
7 changed files with 199 additions and 212 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 %}"> <ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
{% for level-1 in menu %} {% for level-1 in menu %}
{% assign icon = level-1[1].icon %} {% 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 %}"> <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[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 %}> <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 %} {% unless hide-icons %}
<span class="nav-link-icon d-md-none d-lg-inline-block">{% include ui/icon.html icon=icon %}</span> <span class="nav-link-icon d-md-none d-lg-inline-block">{% include ui/icon.html icon=icon %}</span>
{% endunless %} {% endunless %}

4
src/scss/_variables-dark.scss
View File

@@ -9,9 +9,9 @@ $border-dark-color-dark: lighten($dark, 4%) !default;
$border-color-active-dark: lighten($dark, 12%) !default; $border-color-active-dark: lighten($dark, 12%) !default;
//new bootsrap variables //new bootsrap variables
$body-color-dark: $light !default; $body-color-dark: rgba(255, 255, 255, .8) !default;
$body-emphasis-color-dark: $white !default; $body-emphasis-color-dark: $white !default;
$code-color-dark: var(--#{$prefix}gray-300) !default; $code-color-dark: var(--#{$prefix}gray-300) !default;
$text-secondary-dark: rgba(153, 159, 164, 1) !default; $body-secondary-color-dark: rgba(153, 159, 164, 1) !default;

108
src/scss/_variables.scss
View File

@@ -61,6 +61,7 @@ $font-weight-bold: 600 !default;
$headings-font-weight: var(--#{$prefix}font-weight-bold) !default; $headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
$headings-margin-bottom: var(--#{$prefix}spacer) !default; $headings-margin-bottom: var(--#{$prefix}spacer) !default;
$headings-color: var(--#{$prefix}body-color) color !default;
$font-weights: ( $font-weights: (
light: $font-weight-light, light: $font-weight-light,
@@ -179,19 +180,6 @@ $green: #2fb344 !default;
$teal: #0ca678 !default; $teal: #0ca678 !default;
$cyan: #17a2b8 !default; $cyan: #17a2b8 !default;
$color-blue: #0054a6;
$color-azure: #3586c9;
$color-indigo: #4263eb;
$color-purple: #ae3ec9;
$color-pink: #d6336c;
$color-red: #e73f3f;
$color-orange: #f76707;
$color-yellow: #f59f00;
$color-lime: #74b816;
$color-green: #2fb344;
$color-teal: #0ca678;
$color-cyan: #17a2b8;
$text-secondary: $gray-600 !default; $text-secondary: $gray-600 !default;
$text-secondary-light: $gray-500 !default; $text-secondary-light: $gray-500 !default;
$text-secondary-dark: $gray-700 !default; $text-secondary-dark: $gray-700 !default;
@@ -202,21 +190,14 @@ $border-color-translucent: rgba(4, 32, 69, 0.14);
$border-dark-color: $gray-400 !default; $border-dark-color: $gray-400 !default;
$border-dark-color-translucent: rgba(4, 32, 69, 0.27); $border-dark-color-translucent: rgba(4, 32, 69, 0.27);
$border-active-color: mix( $border-active-color: mix($text-secondary, #ffffff, percentage($border-active-opacity)) !default;
$text-secondary, $border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
#ffffff,
percentage($border-active-opacity)
) !default;
$border-active-color-translucent: rgba(
$text-secondary,
$border-active-opacity
) !default;
$active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default; $active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
$active-color: var(--#{$prefix}primary) !default; $active-color: var(--#{$prefix}primary) !default;
$active-border-color: var(--#{$prefix}primary) !default; $active-border-color: var(--#{$prefix}primary) !default;
$hover-bg: rgba(var(--#{$prefix}text-secondary-rgb), 0.04) !default; $hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.04) !default;
$disabled-bg: var(--#{$prefix}bg-surface-secondary) !default; $disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
$disabled-color: var(--#{$prefix}gray-300) !default; $disabled-color: var(--#{$prefix}gray-300) !default;
@@ -288,10 +269,7 @@ $gray-colors: (
gray-900: $gray-900, gray-900: $gray-900,
) !default; ) !default;
$theme-colors: map-merge( $theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));
$theme-colors,
map-merge($extra-colors, $social-colors)
);
// Borders // Borders
$border-width: 1px !default; $border-width: 1px !default;
@@ -319,9 +297,8 @@ $kbd-padding-x: 0.5rem !default;
$kbd-padding-y: 0.25rem !default; $kbd-padding-y: 0.25rem !default;
$kbd-font-weight: var(--#{$prefix}font-weight-medium) !default; $kbd-font-weight: var(--#{$prefix}font-weight-medium) !default;
$kbd-font-size: var(--#{$prefix}font-size-h5) !default; $kbd-font-size: var(--#{$prefix}font-size-h5) !default;
$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !default;
var(--#{$prefix}border-color) !default; $kbd-color: var(--#{$prefix}secondary-dark) !default;
$kbd-color: var(--#{$prefix}text-secondary-dark) !default;
$kbd-bg: var(--#{$prefix}code-bg) !default; $kbd-bg: var(--#{$prefix}code-bg) !default;
$kbd-border-radius: var(--#{$prefix}border-radius) !default; $kbd-border-radius: var(--#{$prefix}border-radius) !default;
@@ -338,8 +315,8 @@ $avatar-sizes: (
) !default; ) !default;
$avatar-border-radius: var(--#{$prefix}border-radius) !default; $avatar-border-radius: var(--#{$prefix}border-radius) !default;
$avatar-font-size: $h4-font-size !default; $avatar-font-size: $h4-font-size !default;
$avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
$avatar-list-spacing: -.5; $avatar-list-spacing: -.5;
$avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
$link-decoration: none !default; $link-decoration: none !default;
$link-hover-decoration: underline !default; $link-hover-decoration: underline !default;
@@ -353,13 +330,12 @@ $caret-width: 0.36em !default;
$caret-spacing: 0.4em !default; $caret-spacing: 0.4em !default;
//Sizing //Sizing
$page-padding: var(--#{$prefix}spacer-3) !default; $page-padding-x: var(--#{$prefix}spacer-3) !default;
$page-padding-sm: var(--#{$prefix}spacer-2) !default;
$page-padding-y: var(--#{$prefix}spacer-4) !default; $page-padding-y: var(--#{$prefix}spacer-4) !default;
// Sizing // Sizing
$container-padding-x: calc(var(--#{$prefix}page-padding) * 2) !default; $container-padding-x: calc(var(--#{$prefix}page-padding-x) * 2) !default;
$grid-gutter-width: var(--#{$prefix}page-padding) !default; $grid-gutter-width: var(--#{$prefix}page-padding-x) !default;
// Grid // Grid
$grid-gutter-width: 1rem !default; $grid-gutter-width: 1rem !default;
@@ -395,11 +371,7 @@ $spacers: (
8: $spacer-8, 8: $spacer-8,
) !default; ) !default;
$negative-spacers: if( $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
$enable-negative-margins,
negativify-map($spacers),
null
) !default;
// Sizes // Sizes
$size-spacers: ( $size-spacers: (
@@ -438,6 +410,7 @@ $aspect-ratios: (
// Shadows // Shadows
$box-shadow: rgba(var(--#{$prefix}body-color-rgb), 0.04) 0 2px 4px 0 !default; $box-shadow: rgba(var(--#{$prefix}body-color-rgb), 0.04) 0 2px 4px 0 !default;
$box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default;
$box-shadow-transparent: 0 0 0 0 transparent !default; $box-shadow-transparent: 0 0 0 0 transparent !default;
$box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default; $box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default;
$box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default; $box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
@@ -469,11 +442,7 @@ $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color
$transition-time: 0.3s !default; $transition-time: 0.3s !default;
// Overlay // Overlay
$overlay-gradient: linear-gradient( $overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !default;
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%
) !default;
// Accordion // Accordion
$accordion-bg: transparent !default; $accordion-bg: transparent !default;
@@ -581,7 +550,7 @@ $card-ribbon-font-size: $h6-font-size !default;
$card-header-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !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; $cards-grid-breakpoint: lg !default;
// Carousel // Carousel
@@ -650,10 +619,7 @@ $modal-fade-transform: translate(0, -1rem) !default;
$modal-content-border-color: transparent !default; $modal-content-border-color: transparent !default;
$modal-content-bg: var(--#{$prefix}bg-surface) !default; $modal-content-bg: var(--#{$prefix}bg-surface) !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default; $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract( $modal-content-inner-border-radius: subtract(var(--#{$prefix}modal-border-radius), 1px) !default;
var(--#{$prefix}modal-border-radius),
1px
) !default;
$modal-header-padding: 1.5rem !default; $modal-header-padding: 1.5rem !default;
$modal-header-height: 3.5rem !default; $modal-header-height: 3.5rem !default;
@@ -679,11 +645,13 @@ $nav-link-padding-x: 0.75rem !default;
$nav-link-color: var(--#{$prefix}secondary) !default; $nav-link-color: var(--#{$prefix}secondary) !default;
$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default; $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
$nav-link-icon-size: $icon-size !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-color: var(--#{$prefix}primary) !default;
$nav-pills-link-active-bg: var(--#{$prefix}active-bg) !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-color: var(--#{$prefix}border-color) !default;
$nav-bordered-border-width: var(--#{$prefix}border-width) !default; $nav-bordered-border-width: var(--#{$prefix}border-width) !default;
$nav-bordered-link-active-color: var(--#{$prefix}primary) !default; $nav-bordered-link-active-color: var(--#{$prefix}primary) !default;
@@ -693,8 +661,7 @@ $nav-bordered-margin-x: 1.25rem !default;
$nav-tabs-border-color: var(--#{$prefix}border-color) !default; $nav-tabs-border-color: var(--#{$prefix}border-color) !default;
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default; $nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color !default;
$nav-tabs-border-color !default;
$nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default; $nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
$nav-tabs-link-active-color: var(--#{$prefix}body-color) !default; $nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
$nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default; $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
@@ -703,14 +670,17 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$navbar-height: 3.5rem !default; $navbar-height: 3.5rem !default;
$navbar-padding-y: 0.25rem !default; $navbar-padding-y: 0.25rem !default;
$navbar-border-width: var(--#{$prefix}border-width) !default; $navbar-light-bg: var(--#{$prefix}bg-surface) !default;
$navbar-border-color: var(--#{$prefix}border-color) !default; $navbar-light-color: var(--#{$prefix}secondary) !default;
$navbar-light-color: var(--#{$prefix}body-color) !default;
$navbar-light-brand-color: var(--#{$prefix}body-color) !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-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-secondary-opacity) !default; $navbar-dark-color: rgba($white, $text-secondary-opacity) !default;
$navbar-dark-brand-color: $white !default; $navbar-dark-brand-color: $white !default;
@@ -731,9 +701,10 @@ $navbar-toggler-animation-time: 0.2s !default;
$navbar-toggler-focus-width: 0 !default; $navbar-toggler-focus-width: 0 !default;
$navbar-overlap-height: 9rem !default; $navbar-overlap-height: 9rem !default;
$navbar-nav-link-padding-x: $nav-link-padding-x !default; // Navbar nav
$navbar-nav-gap: 0.25rem !default;
$navbar-active-border-color: var(--#{$prefix}primary) !default; $navbar-nav-link-padding-x: 0.5rem !default;
$navbar-nav-link-padding-y: 0.5rem !default;
// Sidebar // Sidebar
$sidebar-width: 15rem !default; $sidebar-width: 15rem !default;
@@ -798,9 +769,7 @@ $table-th-color: var(--#{$prefix}secondary) !default;
$table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default; $table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$table-striped-order: even !default; $table-striped-order: even !default;
$table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default; $table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$table-group-separator-color: var( $table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
--#{$prefix}border-color-translucent
) !default;
$table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default; $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
$table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default; $table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
@@ -833,9 +802,7 @@ $list-group-active-color: inherit !default;
$input-bg: var(--#{$prefix}bg-forms) !default; $input-bg: var(--#{$prefix}bg-forms) !default;
$input-disabled-bg: $disabled-bg !default; $input-disabled-bg: $disabled-bg !default;
$input-border-color: var(--#{$prefix}border-color) !default; $input-border-color: var(--#{$prefix}border-color) !default;
$input-border-color-translucent: var( $input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
--#{$prefix}border-color-translucent
) !default;
$input-placeholder-color: $text-secondary-light !default; $input-placeholder-color: $text-secondary-light !default;
$input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default; $input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
@@ -844,13 +811,12 @@ $input-group-addon-color: var(--#{$prefix}secondary) !default;
$input-border-radius: var(--#{$prefix}border-radius) !default; $input-border-radius: var(--#{$prefix}border-radius) !default;
// Forms // Forms
$form-check-margin-bottom: .75rem !default; $form-check-margin-bottom: 0.75rem !default;
$form-check-padding-start: 2rem !default; $form-check-padding-start: 2rem !default;
$form-check-input-width: 1.25rem !default; $form-check-input-width: 1.25rem !default;
$form-check-input-bg: var(--#{$prefix}bg-forms) !default; $form-check-input-bg: var(--#{$prefix}bg-forms) !default;
$form-check-input-border: var(--#{$prefix}border-width) $form-check-input-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent !default;
var(--#{$prefix}border-style) $input-border-color-translucent !default;
$form-check-input-border-radius: var(--#{$prefix}border-radius) !default; $form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
$form-check-input-box-shadow: $input-box-shadow !default; $form-check-input-box-shadow: $input-box-shadow !default;

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

@@ -1,12 +1,68 @@
@mixin navbar-vertical {
width: $sidebar-width;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: $zindex-fixed;
align-items: flex-start;
overflow-y: scroll;
padding: 0;
@include transition(transform $transition-time);
&.navbar-right {
left: auto;
right: 0;
}
.navbar-brand {
padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
justify-content: center;
}
.navbar-collapse {
align-items: stretch;
}
.navbar-nav {
flex-direction: column;
flex-grow: 1;
min-height: auto;
.nav-link {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
> [class^="container"] {
flex-direction: column;
align-items: stretch;
min-height: 100%;
justify-content: flex-start;
padding: 0;
}
~ .page {
padding-left: $sidebar-width;
[class^="container"] {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
&.navbar-right ~ .page {
padding-left: 0;
padding-right: $sidebar-width;
}
@mixin navbar-vertical-nav {
.navbar-collapse { .navbar-collapse {
flex-direction: column; flex-direction: column;
[class^="container"] { [class^="container"] {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
padding: 0;
} }
.navbar-nav { .navbar-nav {
@@ -14,7 +70,7 @@
margin-right: 0; margin-right: 0;
.nav-link { .nav-link {
padding: .5rem calc(#{$container-padding-x} / 2); padding: 0.5rem calc(#{$container-padding-x} / 2);
justify-content: flex-start; justify-content: flex-start;
} }
} }
@@ -73,14 +129,16 @@
Navbar Navbar
*/ */
.navbar { .navbar {
--#{$prefix}navbar-bg: var(--#{$prefix}bg-surface); --#{$prefix}navbar-bg: #{$navbar-light-bg};
--#{$prefix}navbar-border-width: #{$navbar-border-width}; --#{$prefix}navbar-border-width: #{$navbar-light-border-width};
--#{$prefix}navbar-active-border-color: #{$navbar-active-border-color}; --#{$prefix}navbar-active-border-color: #{$navbar-light-active-border-color};
--#{$prefix}navbar-active-bg: #{$navbar-light-active-bg}; --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
--#{$prefix}navbar-color: var(--#{$prefix}body-color); --#{$prefix}navbar-hover-bg: #{$navbar-light-hover-bg};
--#{$prefix}navbar-border-color: #{$navbar-border-color}; --#{$prefix}navbar-border-color: #{$navbar-light-border-color};
--#{$prefix}navbar-nav-gap: #{$navbar-nav-gap};
--#{$prefix}navbar-height: #{$navbar-height};
align-items: stretch; align-items: stretch;
min-height: $navbar-height; min-height: var(--#{$prefix}navbar-height);
box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color); box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
background: var(--#{$prefix}navbar-bg); background: var(--#{$prefix}navbar-bg);
color: var(--#{$prefix}navbar-color); color: var(--#{$prefix}navbar-color);
@@ -97,30 +155,47 @@ Navbar
position: absolute; position: absolute;
z-index: $zindex-fixed; z-index: $zindex-fixed;
} }
}
/**
Navbar nav
*/
.navbar-nav { .navbar-nav {
min-height: subtract($navbar-height, 2 * $navbar-padding-y); 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 { .nav-link {
transition: $transition-time background-color;
position: relative; position: relative;
min-width: 2rem; min-width: 2rem;
min-height: 2rem; min-height: 2rem;
justify-content: center;
border-radius: var(--#{$prefix}border-radius); border-radius: var(--#{$prefix}border-radius);
.badge { .badge {
position: absolute; position: absolute;
top: .375rem; top: 0.375rem;
right: .375rem; right: 0.375rem;
transform: translate(50%, -50%); transform: translate(50%, -50%);
} }
}
} &.active {
background-color: var(--#{$prefix}navbar-active-bg);
} }
.navbar-nav { &:hover,
margin: 0; &:focus,
padding: 0; &.show {
background-color: var(--#{$prefix}navbar-hover-bg);
}
}
} }
.navbar-expand { .navbar-expand {
@@ -129,9 +204,9 @@ Navbar
$infix: breakpoint-infix($next, $grid-breakpoints); $infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} { &#{$infix} {
@include media-breakpoint-down(breakpoint-next($breakpoint)) { // @include media-breakpoint-down(breakpoint-next($breakpoint)) {
@include navbar-vertical-nav; // @include navbar-vertical;
} // }
@include media-breakpoint-up($next) { @include media-breakpoint-up($next) {
.navbar-collapse { .navbar-collapse {
@@ -139,36 +214,19 @@ Navbar
flex: 1 1 auto; flex: 1 1 auto;
} }
.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;
}
}
&.navbar-vertical { &.navbar-vertical {
box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color); box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
&.navbar-right { &.navbar-right {
box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color); box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
} }
}
&.navbar-vertical {
~ .navbar, ~ .navbar,
~ .page-wrapper { ~ .page-wrapper {
margin-left: $sidebar-width; margin-left: $sidebar-width;
} }
}
&.navbar-vertical.navbar-right { &.navbar-right {
~ .navbar, ~ .navbar,
~ .page-wrapper { ~ .page-wrapper {
margin-left: 0; margin-left: 0;
@@ -176,6 +234,39 @@ Navbar
} }
} }
} }
.navbar-nav {
.nav-link {
&:before {
content: "";
height: 100%;
left: 50%;
min-height: var(--#{$prefix}navbar-height);
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
}
&.active {
background-color: var(--#{$prefix}navbar-active-bg);
&:after {
content: "";
background: var(--#{$prefix}navbar-active-border-color);
border-radius: var(--#{$prefix}border-radius);
bottom: calc(50% - calc(var(--tblr-navbar-height) / 2));
height: 2px;
position: absolute;
right: 50%;
transform: translate(50%, -50%);
width: 100%;
z-index: 1;
}
}
}
}
}
} }
} }
} }
@@ -215,7 +306,12 @@ Navbar toggler
width: 1.25em; width: 1.25em;
background: currentColor; background: currentColor;
border-radius: 10px; border-radius: 10px;
@include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time); @include transition(
top $navbar-toggler-animation-time $navbar-toggler-animation-time,
bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
transform $navbar-toggler-animation-time,
opacity 0s $navbar-toggler-animation-time
);
position: relative; position: relative;
&:before, &:before,
@@ -232,11 +328,11 @@ Navbar toggler
} }
&:before { &:before {
top: -.45em; top: -0.45em;
} }
&:after { &:after {
bottom: -.45em; bottom: -0.45em;
} }
.navbar-toggler[aria-expanded="true"] & { .navbar-toggler[aria-expanded="true"] & {
@@ -263,19 +359,6 @@ Navbar transparent
background: transparent !important; background: transparent !important;
} }
/**
Navbar nav
*/
.navbar-nav {
align-items: stretch;
.nav-item {
display: flex;
flex-direction: column;
justify-content: center;
}
}
/** /**
Navbar side Navbar side
*/ */
@@ -299,65 +382,7 @@ Navbar vertical
&#{$infix} { &#{$infix} {
@include media-breakpoint-up($next) { @include media-breakpoint-up($next) {
width: $sidebar-width; @include navbar-vertical;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: $zindex-fixed;
align-items: flex-start;
@include transition(transform $transition-time);
overflow-y: scroll;
padding: 0;
&.navbar-right {
left: auto;
right: 0;
}
.navbar-brand {
padding: (($navbar-height - $navbar-brand-image-height) * .5) 0;
justify-content: center;
}
.navbar-collapse {
align-items: stretch;
}
.navbar-nav {
flex-direction: column;
flex-grow: 1;
min-height: auto;
.nav-link {
padding-top: .5rem;
padding-bottom: .5rem;
}
}
> [class^="container"] {
flex-direction: column;
align-items: stretch;
min-height: 100%;
justify-content: flex-start;
padding: 0;
}
~ .page {
padding-left: $sidebar-width;
[class^="container"] {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
&.navbar-right ~ .page {
padding-left: 0;
padding-right: $sidebar-width;
}
@include navbar-vertical-nav;
} }
} }
} }
@@ -365,7 +390,6 @@ Navbar vertical
} }
} }
.navbar-overlap { .navbar-overlap {
&:after { &:after {
content: ""; content: "";

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

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

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

@@ -48,11 +48,8 @@
--#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark}; --#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
--#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-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}; --#{$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 { @each $name, $value in $font-weights {
--#{$prefix}font-weight-#{$name}: #{$value}; --#{$prefix}font-weight-#{$name}: #{$value};

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

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