From cdd37a4b57782c166269eaf9a218d5089bd3fd3a Mon Sep 17 00:00:00 2001 From: codecalm Date: Mon, 3 Feb 2020 22:08:06 +0100 Subject: [PATCH] tabler dark mode, sidebar improvements, huge layout fixes --- pages/_includes/layout/navbar-menu.html | 37 +++-- pages/_includes/layout/navbar-primary.html | 2 +- pages/_includes/layout/navbar-secondary.html | 2 +- pages/tmp-layout.html | 37 +++-- scss/_dark.scss | 46 +++--- scss/_variables.scss | 4 +- scss/layout/_mainnav.scss | 144 +++++++++++++++---- scss/mixins/_mixins.scss | 8 +- scss/ui/_buttons.scss | 8 +- scss/ui/_dropdowns.scss | 35 +++-- 10 files changed, 214 insertions(+), 109 deletions(-) diff --git a/pages/_includes/layout/navbar-menu.html b/pages/_includes/layout/navbar-menu.html index 36976bba..7a0839aa 100644 --- a/pages/_includes/layout/navbar-menu.html +++ b/pages/_includes/layout/navbar-menu.html @@ -1,6 +1,21 @@ {% assign current-page = page.menu | default: layout.menu | split: '.' %} diff --git a/pages/tmp-layout.html b/pages/tmp-layout.html index ad62e539..73601ec0 100644 --- a/pages/tmp-layout.html +++ b/pages/tmp-layout.html @@ -3,6 +3,7 @@ tmp: true page-header: Layout test page-header-actions: buttons menu: home +body-class: theme-dark-auto ---
@@ -10,11 +11,13 @@ menu: home
- Toggle sidebar - Sidebar narrow - Sidebar left/right - Sidebar color - Toggle secondary + Toggle sidebar + Sidebar narrow + Sidebar left/right + Sidebar color + Secondary color + Toggle secondary + Dark mode
@@ -30,16 +33,19 @@ menu: home navbarSecondary = document.getElementById('navbar-secondary'); var events = { - 'navbar-vertical': function () { + 'primary-vertical': function () { navbarPrimary.classList.toggle('navbar-vertical'); }, - 'navbar-right': function () { + 'primary-right': function () { navbarPrimary.classList.toggle('navbar-right'); }, - 'navbar-vertical-narrow': function () { + 'primary-vertical-narrow': function () { navbarPrimary.classList.toggle('navbar-vertical-narrow'); }, - 'navbar-color': function () { + 'dark-mode': function () { + document.body.classList.toggle('theme-dark'); + }, + 'primary-color': function () { var classList = navbarPrimary.classList; if (classList.contains('navbar-light')) { @@ -50,7 +56,18 @@ menu: home classList.remove('navbar-dark'); } }, - 'navbar-secondary': function () { + 'secondary-color': function () { + var classList = navbarSecondary.classList; + + if (classList.contains('navbar-light')) { + classList.add('navbar-dark'); + classList.remove('navbar-light'); + } else { + classList.add('navbar-light'); + classList.remove('navbar-dark'); + } + }, + 'secondary-visible': function () { navbarSecondary.classList.toggle('d-none'); }, }; diff --git a/scss/_dark.scss b/scss/_dark.scss index 11cae3af..4d962cb7 100644 --- a/scss/_dark.scss +++ b/scss/_dark.scss @@ -1,50 +1,40 @@ // stylelint-disable declaration-no-important @mixin dark-mode { - &, - .modal-content, - .dropdown-menu { - color: $dark-body-color; + & { + color: #ffffff; background: $dark-body-bg; } .card, - .sidebar, - .topbar { - color: inherit; + .navbar-light { background: $dark; + color: inherit; } - .text-body { - color: #afbdd1 !important; - } - - .avatar-list-stacked .avatar { - box-shadow: 0 0 0 2px #222226; + .card { + border-color: transparent; } - .navbar-brand-logo { - filter: brightness(0) invert(1); + .btn-secondary { + @include button-variant($min-white, $border-color, $light, rgba($dark, 0), $border-color, $light); + background-image: none; } - .form-fieldset { - border-color: transparent; + .avatar-list-stacked .avatar { + box-shadow: 0 0 0 2px $dark; } - .form-control, - .form-select, - .form-check-input:not(:checked) { - background: transparent; - border-color: $dark-border-color; - color: inherit; + .apexcharts-text { + fill: #ffffff; } - .input-group-text { - border-color: $dark-border-color; + .apexcharts-legend-text { + color: inherit !important; } - .brand-logo { - filter: brightness(0) invert(1); + .navbar-brand-autodark { + @include autodark-image; } } @@ -55,7 +45,7 @@ } @media not print and (prefers-color-scheme: dark) { - .auto-theme-dark { + .theme-dark-auto { @include dark-mode; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index e8898c91..102732fa 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -59,9 +59,7 @@ $border-color: rgba($text-muted, .24) !default; $hover-bg: $light !default; $active-bg: rgba($blue, .06) !default; -$dark-body-bg: #222935 !default; -$dark-body-color: #afbdd1 !default; -$dark-border-color: rgba($dark-body-color, .4) !default; +$dark-body-bg: darken($dark, 3%) !default; $primary: $blue !default; $secondary: $text-muted !default; diff --git a/scss/layout/_mainnav.scss b/scss/layout/_mainnav.scss index bb194d42..1bf5b7d6 100644 --- a/scss/layout/_mainnav.scss +++ b/scss/layout/_mainnav.scss @@ -1,5 +1,23 @@ +@mixin navbar-horizontal { + .d-none-navbar-horizontal, + ~ * .d-none-navbar-vertical-narrow { + display: none; + } + + .dropdown-menu { + margin-top: -4px; + margin-right: -7px; + } +} + @mixin navbar-vertical-narrow { width: $sidenav-width-narrow; + overflow: visible; + + .d-none-navbar-vertical-narrow, + ~ * .d-none-navbar-vertical-narrow { + display: none; + } .navbar-nav { margin-top: 0; @@ -16,11 +34,9 @@ .nav-link-icon { margin: 0 auto; - } - - .d-none-navbar-vertical-narrow, - ~ * .d-none-navbar-vertical-narrow { - display: none; + font-size: 1.125rem; + width: 1.125rem; + height: 1.125rem; } .navbar-brand-logo-large { @@ -36,12 +52,39 @@ margin-left: $sidenav-width-narrow; } + .dropdown-toggle:after { + content: none; + } + + .dropdown-menu { + left: 100%; + top: 0; + margin: 0 0 0 -4px; + + &:before, + &:after { + content: none; + } + + &.dropdown-menu-right { + top: auto; + bottom: 0; + right: auto; + } + } + &.navbar-right { ~ .navbar, ~ .content { margin-left: 0; margin-right: $sidenav-width-narrow; } + + .dropdown-menu { + margin: 0 -4px 0 0; + left: auto; + right: 100%; + } } } @@ -112,7 +155,7 @@ .nav-item { &.active { - background: rgba($sidenav-active-accent-color, .032); + font-weight: 600; &:before { left: 0; @@ -150,27 +193,42 @@ } } - .dropdown-menu { - position: static; - background: inherit; - border: 0; - box-shadow: none; - padding: 0; - margin: 0; - color: inherit; - } + &:not(.navbar-vertical-narrow) { + .d-none-navbar-vertical-wide, + ~ * .d-none-navbar-vertical-wide { + display: none; + } - .dropdown-item { - color: inherit; - padding-left: add($sidenav-padding, 1.5rem); - } + .dropdown-menu { + position: static; + background: inherit; + border: 0; + box-shadow: none; + padding: 0; + margin: 0; + color: inherit; + columns: 1; + + &:before, + &:after { + content: none; + } + } - .dropdown-item-icon { - display: none; - } + .dropdown-item { + padding-left: add($sidenav-padding, 1.5rem); + opacity: $text-muted-opacity; - .dropdown-toggle:after { - margin-left: auto; + &:hover { + background: transparent; + color: inherit; + opacity: 1; + } + } + + .dropdown-toggle:after { + margin-left: auto; + } } &.navbar-vertical-narrow { @@ -282,6 +340,33 @@ Navbar brand /** Navbar colors */ +.navbar { + .navbar-nav { + .nav-link { + color: inherit; + opacity: $text-muted-opacity; + + &:hover { + color: inherit; + opacity: 1; + } + + &.disabled { + color: inherit; + opacity: $text-muted-opacity / 3; + } + } + + .show > .nav-link, + .active > .nav-link, + .nav-link.show, + .nav-link.active { + color: inherit; + opacity: 1; + } + } +} + .navbar-light { background: $white; box-shadow: inset 0 -1px 0 0 $border-color; @@ -291,6 +376,7 @@ Navbar colors .navbar-dark { background: $sidenav-dark-bg; color: $sidenav-dark-color; + box-shadow: inset 0 -1px 0 0 $border-color; @include scrollbar(true); .text-muted { @@ -299,7 +385,7 @@ Navbar colors } .navbar-brand-autodark { - filter: brightness(0) invert(1); + @include autodark-image; } .form-control { @@ -314,9 +400,7 @@ Navbar vertical */ @if $enable-navbar-vertical { .navbar:not(.navbar-vertical) { - .d-none-navbar-horizontal { - display: none; - } + @include navbar-horizontal; } .navbar-vertical { @@ -327,9 +411,7 @@ Navbar vertical } @include media-breakpoint-down-than($breakpoint) { - .d-none-navbar-horizontal { - display: none; - } + @include navbar-horizontal; } } } diff --git a/scss/mixins/_mixins.scss b/scss/mixins/_mixins.scss index af61ff7d..9bf1753c 100644 --- a/scss/mixins/_mixins.scss +++ b/scss/mixins/_mixins.scss @@ -41,9 +41,7 @@ } } -@mixin dark { - .bg-dark &, - .theme-dark & { - @content; - } + +@mixin autodark-image { + filter: brightness(0) invert(1); } diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss index 1a3daa50..27cf2f4f 100644 --- a/scss/ui/_buttons.scss +++ b/scss/ui/_buttons.scss @@ -1,13 +1,7 @@ .btn-secondary { @include button-variant($white, $border-color, $dark); - background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba($dark, .04) 100%); + background-image: linear-gradient(-180deg, rgba($dark, 0), rgba($dark, .04) 100%); box-shadow: none !important; - - .bg-dark &, - .theme-dark & { - @include button-variant($min-white, $border-color, $light, rgba(0, 0, 0, 0), $border-color, $light); - background-image: none; - } } .btn-outlined-secondary { diff --git a/scss/ui/_dropdowns.scss b/scss/ui/_dropdowns.scss index cab355f6..88e7f37b 100644 --- a/scss/ui/_dropdowns.scss +++ b/scss/ui/_dropdowns.scss @@ -1,9 +1,7 @@ .dropdown-menu { - min-width: 12rem; box-shadow: $box-shadow; user-select: none; margin: 0; - color: $text-muted; &.card { padding: 0; @@ -16,12 +14,23 @@ } } +.dropdown-item { + min-width: 12rem; + color: inherit; + display: flex; + align-items: center; + margin: 0; + + @at-root a#{&}:hover { + color: $body-color; + } +} + .dropdown-item-icon { width: 1rem; font-size: 1rem; margin-right: .5rem; - color: inherit; - opacity: .5; + opacity: .64; text-align: center; stroke-width: 2px; } @@ -38,14 +47,18 @@ overflow-x: hidden; } -.dropdown-item { - color: inherit; - display: flex; - align-items: center; - margin: 0; +.dropdown-menu-columns { + columns: 2; + column-gap: 0; - @at-root a#{&}:hover { - color: $body-color; + .dropdown-item { + display: inline-flex; + } +} + +@for $i from 2 through 4 { + .dropdown-menu-columns-#{$i} { + columns: $i; } } -- GitLab