mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
Merge branch 'dev-navbar' of https://github.com/tabler/tabler into dev
This commit is contained in:
codecalm
@@ -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 %}
|
||||
|
||||
@@ -9,9 +9,9 @@ $border-dark-color-dark: lighten($dark, 4%) !default;
|
||||
$border-color-active-dark: lighten($dark, 12%) !default;
|
||||
|
||||
//new bootsrap variables
|
||||
$body-color-dark: $light !default;
|
||||
$body-color-dark: rgba(255, 255, 255, .8) !default;
|
||||
$body-emphasis-color-dark: $white !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;
|
||||
|
||||
@@ -61,6 +61,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,
|
||||
@@ -179,19 +180,6 @@ $green: #2fb344 !default;
|
||||
$teal: #0ca678 !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-light: $gray-500 !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-translucent: rgba(4, 32, 69, 0.27);
|
||||
|
||||
$border-active-color: mix(
|
||||
$text-secondary,
|
||||
#ffffff,
|
||||
percentage($border-active-opacity)
|
||||
) !default;
|
||||
$border-active-color-translucent: rgba(
|
||||
$text-secondary,
|
||||
$border-active-opacity
|
||||
) !default;
|
||||
$border-active-color: mix($text-secondary, #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-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-color: var(--#{$prefix}gray-300) !default;
|
||||
@@ -288,10 +269,7 @@ $gray-colors: (
|
||||
gray-900: $gray-900,
|
||||
) !default;
|
||||
|
||||
$theme-colors: map-merge(
|
||||
$theme-colors,
|
||||
map-merge($extra-colors, $social-colors)
|
||||
);
|
||||
$theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));
|
||||
|
||||
// Borders
|
||||
$border-width: 1px !default;
|
||||
@@ -319,9 +297,8 @@ $kbd-padding-x: 0.5rem !default;
|
||||
$kbd-padding-y: 0.25rem !default;
|
||||
$kbd-font-weight: var(--#{$prefix}font-weight-medium) !default;
|
||||
$kbd-font-size: var(--#{$prefix}font-size-h5) !default;
|
||||
$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||
var(--#{$prefix}border-color) !default;
|
||||
$kbd-color: var(--#{$prefix}text-secondary-dark) !default;
|
||||
$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !default;
|
||||
$kbd-color: var(--#{$prefix}secondary-dark) !default;
|
||||
$kbd-bg: var(--#{$prefix}code-bg) !default;
|
||||
$kbd-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
|
||||
@@ -338,8 +315,8 @@ $avatar-sizes: (
|
||||
) !default;
|
||||
$avatar-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$avatar-font-size: $h4-font-size !default;
|
||||
$avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
|
||||
$avatar-list-spacing: -.5;
|
||||
$avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
|
||||
|
||||
$link-decoration: none !default;
|
||||
$link-hover-decoration: underline !default;
|
||||
@@ -353,13 +330,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;
|
||||
@@ -395,11 +371,7 @@ $spacers: (
|
||||
8: $spacer-8,
|
||||
) !default;
|
||||
|
||||
$negative-spacers: if(
|
||||
$enable-negative-margins,
|
||||
negativify-map($spacers),
|
||||
null
|
||||
) !default;
|
||||
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
|
||||
|
||||
// Sizes
|
||||
$size-spacers: (
|
||||
@@ -438,6 +410,7 @@ $aspect-ratios: (
|
||||
|
||||
// Shadows
|
||||
$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-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;
|
||||
@@ -469,11 +442,7 @@ $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color
|
||||
$transition-time: 0.3s !default;
|
||||
|
||||
// Overlay
|
||||
$overlay-gradient: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.6) 100%
|
||||
) !default;
|
||||
$overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !default;
|
||||
|
||||
// Accordion
|
||||
$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;
|
||||
|
||||
$cards-grid-gap: var(--#{$prefix}page-padding) !default;
|
||||
$cards-grid-gap: var(--#{$prefix}page-padding-x) !default;
|
||||
$cards-grid-breakpoint: lg !default;
|
||||
|
||||
// Carousel
|
||||
@@ -650,10 +619,7 @@ $modal-fade-transform: translate(0, -1rem) !default;
|
||||
$modal-content-border-color: transparent !default;
|
||||
$modal-content-bg: var(--#{$prefix}bg-surface) !default;
|
||||
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
|
||||
$modal-content-inner-border-radius: subtract(
|
||||
var(--#{$prefix}modal-border-radius),
|
||||
1px
|
||||
) !default;
|
||||
$modal-content-inner-border-radius: subtract(var(--#{$prefix}modal-border-radius), 1px) !default;
|
||||
|
||||
$modal-header-padding: 1.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-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;
|
||||
@@ -693,8 +661,7 @@ $nav-bordered-margin-x: 1.25rem !default;
|
||||
|
||||
$nav-tabs-border-color: var(--#{$prefix}border-color) !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-border-color !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-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-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-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}secondary) !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-secondary-opacity) !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-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: 0.25rem !default;
|
||||
$navbar-nav-link-padding-x: 0.5rem !default;
|
||||
$navbar-nav-link-padding-y: 0.5rem !default;
|
||||
|
||||
// Sidebar
|
||||
$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-striped-order: even !default;
|
||||
$table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
|
||||
$table-group-separator-color: var(
|
||||
--#{$prefix}border-color-translucent
|
||||
) !default;
|
||||
$table-group-separator-color: var(--#{$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-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-disabled-bg: $disabled-bg !default;
|
||||
$input-border-color: var(--#{$prefix}border-color) !default;
|
||||
$input-border-color-translucent: var(
|
||||
--#{$prefix}border-color-translucent
|
||||
) !default;
|
||||
$input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
|
||||
$input-placeholder-color: $text-secondary-light !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;
|
||||
|
||||
// Forms
|
||||
$form-check-margin-bottom: .75rem !default;
|
||||
$form-check-margin-bottom: 0.75rem !default;
|
||||
$form-check-padding-start: 2rem !default;
|
||||
|
||||
$form-check-input-width: 1.25rem !default;
|
||||
$form-check-input-bg: var(--#{$prefix}bg-forms) !default;
|
||||
$form-check-input-border: var(--#{$prefix}border-width)
|
||||
var(--#{$prefix}border-style) $input-border-color-translucent !default;
|
||||
$form-check-input-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent !default;
|
||||
$form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$form-check-input-box-shadow: $input-box-shadow !default;
|
||||
|
||||
|
||||
@@ -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 {
|
||||
flex-direction: column;
|
||||
|
||||
[class^="container"] {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
@@ -14,7 +70,7 @@
|
||||
margin-right: 0;
|
||||
|
||||
.nav-link {
|
||||
padding: .5rem calc(#{$container-padding-x} / 2);
|
||||
padding: 0.5rem calc(#{$container-padding-x} / 2);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -73,14 +129,16 @@
|
||||
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};
|
||||
--#{$prefix}navbar-height: #{$navbar-height};
|
||||
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);
|
||||
background: var(--#{$prefix}navbar-bg);
|
||||
color: var(--#{$prefix}navbar-color);
|
||||
@@ -97,30 +155,47 @@ Navbar
|
||||
position: absolute;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
min-height: subtract($navbar-height, 2 * $navbar-padding-y);
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
min-width: 2rem;
|
||||
min-height: 2rem;
|
||||
justify-content: center;
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: .375rem;
|
||||
right: .375rem;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
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;
|
||||
position: relative;
|
||||
min-width: 2rem;
|
||||
min-height: 2rem;
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 0.375rem;
|
||||
right: 0.375rem;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--#{$prefix}navbar-active-bg);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.show {
|
||||
background-color: var(--#{$prefix}navbar-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-expand {
|
||||
@@ -129,9 +204,9 @@ Navbar
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-down(breakpoint-next($breakpoint)) {
|
||||
@include navbar-vertical-nav;
|
||||
}
|
||||
// @include media-breakpoint-down(breakpoint-next($breakpoint)) {
|
||||
// @include navbar-vertical;
|
||||
// }
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
.navbar-collapse {
|
||||
@@ -139,40 +214,56 @@ Navbar
|
||||
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 {
|
||||
box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
|
||||
|
||||
&.navbar-right {
|
||||
box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-vertical {
|
||||
~ .navbar,
|
||||
~ .page-wrapper {
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
&.navbar-right {
|
||||
~ .navbar,
|
||||
~ .page-wrapper {
|
||||
margin-left: 0;
|
||||
margin-right: $sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-vertical.navbar-right {
|
||||
~ .navbar,
|
||||
~ .page-wrapper {
|
||||
margin-left: 0;
|
||||
margin-right: $sidebar-width;
|
||||
.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;
|
||||
background: currentColor;
|
||||
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;
|
||||
|
||||
&:before,
|
||||
@@ -232,11 +328,11 @@ Navbar toggler
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -.45em;
|
||||
top: -0.45em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: -.45em;
|
||||
bottom: -0.45em;
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded="true"] & {
|
||||
@@ -263,19 +359,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
|
||||
*/
|
||||
@@ -299,65 +382,7 @@ Navbar vertical
|
||||
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-up($next) {
|
||||
width: $sidebar-width;
|
||||
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;
|
||||
@include navbar-vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -365,7 +390,6 @@ Navbar vertical
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar-overlap {
|
||||
&:after {
|
||||
content: "";
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -48,11 +48,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};
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
Reference in New Issue
Block a user