mirror of
https://github.com/tabler/tabler.git
synced 2026-07-24 03:54:42 +04:00
dark theme navbar
This commit is contained in:
codecalm
@@ -2,6 +2,6 @@
|
||||
|
||||
<div{% if include.class %} class="{{ include.class }}"{% endif %}>
|
||||
<form action="." method="get">
|
||||
{% include ui/form/input-icon.html prepend=true icon-class="text-muted" dark=include.dark rounded=include.rounded %}
|
||||
{% include ui/form/input-icon.html prepend=true dark=include.dark rounded=include.rounded %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
}
|
||||
|
||||
.card,
|
||||
.navbar-light,
|
||||
.footer,
|
||||
.modal-content,
|
||||
.modal-header,
|
||||
@@ -47,10 +46,6 @@
|
||||
background-color: $dark-mode-darken;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: 0 0 0 1px $dark-mode-darken;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: $dark-mode-darken;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
|
||||
@import "layout/core";
|
||||
@import "layout/navbar";
|
||||
@import "layout/sidebar";
|
||||
@import "layout/page";
|
||||
@import "layout/footer";
|
||||
|
||||
|
||||
+156
-66
@@ -1,3 +1,76 @@
|
||||
@mixin navbar-color($bg-color: transparent, $text-color: $body-color, $link-color: $text-muted, $link-hover-color: $body-color, $link-disabled-color: rgba($link-color, .4)) {
|
||||
background: $bg-color;
|
||||
color: $text-color;
|
||||
|
||||
.navbar-brand {
|
||||
color: $text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $link-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $link-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $link-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: escape-svg($navbar-light-toggler-icon-bg);
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $text-color;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin navbar-dark() {
|
||||
box-shadow: none;
|
||||
@include navbar-color($dark, $white, rgba($white, .7), $white);
|
||||
|
||||
.input-icon-addon {
|
||||
color: rgba($white, .7);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
|
||||
&::placeholder {
|
||||
color: rgba($white, .7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Navbar
|
||||
*/
|
||||
@@ -5,6 +78,12 @@ Navbar
|
||||
min-height: $navbar-height;
|
||||
align-items: stretch;
|
||||
|
||||
@include navbar-color();
|
||||
|
||||
@include dark-mode {
|
||||
@include navbar-dark();
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
min-height: subtract($navbar-height, 2 * $navbar-padding-y);
|
||||
|
||||
@@ -19,64 +98,8 @@ Navbar
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.navbar-light):not(.navbar-dark) {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
.navbar-brand {
|
||||
color: $navbar-light-brand-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-light-brand-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-light-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-light-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $navbar-light-color;
|
||||
border-color: $navbar-light-toggler-border-color;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: escape-svg($navbar-light-toggler-icon-bg);
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-light-color;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
@@ -159,8 +182,6 @@ Navbar
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
Navbar brand
|
||||
*/
|
||||
@@ -196,16 +217,12 @@ Navbar light
|
||||
Navbar dark
|
||||
*/
|
||||
.navbar-dark {
|
||||
color: $white;
|
||||
background-color: $dark;
|
||||
box-shadow: none;
|
||||
|
||||
.text-muted {
|
||||
color: $navbar-dark-color !important;
|
||||
}
|
||||
@include navbar-dark();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
Navbar nav
|
||||
*/
|
||||
.navbar-nav {
|
||||
align-items: stretch;
|
||||
|
||||
@@ -214,4 +231,77 @@ Navbar dark
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
Navbar vertical
|
||||
*/
|
||||
@if $enable-navbar-vertical {
|
||||
.navbar-vertical {
|
||||
&.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
&#{$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;
|
||||
transition: .3s transform;
|
||||
|
||||
&.navbar-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: (($navbar-height - $navbar-brand-image-height) / 2) 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.nav-link {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
> [class*="container"] {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
min-height: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
~ .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
.navbar-vertical {
|
||||
&.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
&#{$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;
|
||||
transition: .3s transform;
|
||||
|
||||
&.navbar-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: (($navbar-height - $navbar-brand-image-height) / 2) 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.nav-link {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
>[class*="container"] {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
min-height: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
~.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.sidebar-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
@@ -34,7 +34,7 @@
|
||||
background: $gray-500;
|
||||
|
||||
@if ($is-dark) {
|
||||
background: mix(#fff, $dark, 20%);
|
||||
background: mix(#ffffff, $dark, 20%);
|
||||
} @else {
|
||||
background: $gray-500;
|
||||
}
|
||||
@@ -48,15 +48,29 @@
|
||||
|
||||
@mixin dark-mode {
|
||||
@if $enable-dark-mode {
|
||||
$selector: &;
|
||||
|
||||
@media not print {
|
||||
.theme-dark {
|
||||
@content
|
||||
@if ($selector) {
|
||||
.theme-dark & {
|
||||
@content
|
||||
}
|
||||
} @else {
|
||||
.theme-dark {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media not print and (prefers-color-scheme: dark) {
|
||||
.theme-dark-auto {
|
||||
@content
|
||||
@if ($selector) {
|
||||
.theme-dark-auto & {
|
||||
@content
|
||||
}
|
||||
} @else {
|
||||
.theme-dark-auto {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user