Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark mode fixes #1322

Merged
merged 2 commits into from
Oct 20, 2022
Merged

Dark mode fixes #1322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d26a677
fix sidebar in dark mode
codecalm Oct 19, 2022
73ebb63
fix card header tabs in dark mode
codecalm Oct 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/pages/_includes/cards/card-tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
{% endcapture %}

<!-- Cards with tabs component -->
<div class="card-tabs {% if include.borderless %}border-0{% endif %}">
<div class="card-tabs{% if include.borderless %} border-0{% endif %}">
{% if include.bottom %}
{{ tabs-content-html }}
{{ tabs-html }}
Expand Down
64 changes: 35 additions & 29 deletions src/pages/_includes/cards/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,53 +9,59 @@
{% assign reverse = include.reverse | default: false %}

<div class="card">
<ul class="nav nav-tabs{% if include.alternative %} nav-tabs-alt{% endif %}{% if reverse %} flex-row-reverse{% endif %}{% if include.justified %} nav-fill{% endif %}" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-{{ id }}" class="nav-link active" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
</li>
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs{% if reverse %} flex-row-reverse{% endif %}{% if include.justified %} nav-fill{% endif %}" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-{{ id }}" class="nav-link active" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
</li>

{% if include.activity %}
<li class="nav-item">
<a href="#tabs-activity-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
</li>
{% endif %}
{% if include.activity %}
<li class="nav-item">
<a href="#tabs-activity-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
</li>
{% endif %}

{% if include.disabled %}
<li class="nav-item">
<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
</li>
{% endif %}
{% if include.disabled %}
<li class="nav-item">
<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
</li>
{% endif %}

{% if include.dropdown %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
{% include ui/dropdown-menu.html %}
</li>
{% endif %}
{% if include.settings %}
<li class="nav-item {% if reverse %}me-auto{% else %}ms-auto{% endif %}">
<a href="#tabs-settings-{{ id }}" class="nav-link" title="Settings" data-bs-toggle="tab">{% include ui/icon.html icon="settings" %}</a>
</li>
{% endif %}
</ul>
{% if include.dropdown %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
{% include ui/dropdown-menu.html %}
</li>
{% endif %}
{% if include.settings %}
<li class="nav-item {% if reverse %}me-auto{% else %}ms-auto{% endif %}">
<a href="#tabs-settings-{{ id }}" class="nav-link" title="Settings" data-bs-toggle="tab">{% include ui/icon.html icon="settings" %}</a>
</li>
{% endif %}
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane{% if include.animation %} fade{% endif %} active show" id="tabs-home-{{ id }}">
<h4>Home tab</h4>
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-profile-{{ id }}">
<h4>Profile tab</h4>
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
{% if include.settings %}
<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-settings-{{ id }}">
<h4>Settings tab</h4>
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
</div>
{% endif %}
{% if include.activity %}
<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-activity-{{ id }}">
<h4>Activity tab</h4>
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
</div>
{% endif %}
Expand Down
3 changes: 0 additions & 3 deletions src/pages/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,6 @@
<div class="col-md-4">{% include cards/tabs.html settings=true %}</div>
<div class="col-md-4">{% include cards/tabs.html reverse=true settings=true %}</div>
<div class="col-md-4">{% include cards/tabs.html icons=true %}</div>
<div class="col-md-4">{% include cards/tabs.html alternative=true settings=true %}</div>
<div class="col-md-4">{% include cards/tabs.html alternative=true reverse=true settings=true %}</div>
<div class="col-md-4">{% include cards/tabs.html alternative=true icons=true %}</div>
<div class="col-md-4">{% include cards/tabs.html dropdown=true %}</div>
<div class="col-md-4">{% include cards/tabs.html justified=true activity=true %}</div>
<div class="col-md-4">{% include cards/tabs.html justified=true disabled=true %}</div>
Expand Down
8 changes: 7 additions & 1 deletion src/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -494,6 +494,8 @@ $card-ribbon-margin: .25rem !default;
$card-ribbon-border-radius: var(--#{$prefix}border-radius) !default;
$card-ribbon-font-size: $h6-font-size !default;

$card-header-tabs-bg: var(--#{$prefix}bg-surface-secondary) !default;

$cards-grid-gap: 1rem !default;
$cards-grid-breakpoint: lg !default;

Expand Down Expand Up @@ -595,9 +597,11 @@ $nav-bordered-link-active-border-width: 2 * $border-width !default;
$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-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-secondary) !default;


// Navbar
Expand All @@ -611,11 +615,13 @@ $navbar-light-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-disabled-color: var(--#{$prefix}disabled-color) !default;
$navbar-light-active-bg: rgba(0, 0, 0, .06) !default;

$navbar-dark-color: rgba($white, $text-muted-opacity) !default;
$navbar-dark-brand-color: $white !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: var(--#{$prefix}disabled-color) !default;
$navbar-dark-active-bg: rgba(255, 255, 255, .06) !default;

$navbar-brand-padding-y: $nav-link-padding-y !default;
$navbar-brand-image-height: 2rem !default;
Expand All @@ -628,12 +634,12 @@ $navbar-toggler-padding-x: 0 !default;
$navbar-toggler-padding-y: 0 !default;
$navbar-toggler-animation-time: .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-overlap-height: 9rem !default;

// Sidebar
$sidebar-width: 15rem !default;
Expand Down
6 changes: 3 additions & 3 deletions src/scss/layout/_dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ body:not(.theme-dark) .hide-theme-light {
--#{$prefix}card-bg-rgb: #{to-rgb($dark-mode-darken)};
--#{$prefix}card-color: #{$dark-mode-text};

--#{$prefix}border-color: #{$dark-mode-border-color};
--#{$prefix}border-color-light: #{$dark-mode-border-color-light};
--#{$prefix}border-color-active: #{$dark-mode-border-color-active};
--#{$prefix}border-color: var(--#{$prefix}dark-mode-border-color);
--#{$prefix}border-color-light: var(--#{$prefix}dark-mode-border-color-light);
--#{$prefix}border-color-active: var(--#{$prefix}dark-mode-border-color-active);

--#{$prefix}btn-color: #{$dark-mode-darken};

Expand Down
60 changes: 25 additions & 35 deletions src/scss/layout/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
@mixin navbar-color($bg-color: transparent, $color: $navbar-light-color, $brand-color: $navbar-light-brand-color, $link-active-color: $navbar-light-active-color, $link-disabled-color: $navbar-light-disabled-color) {
background: $bg-color;
@mixin navbar-color($bg-color: transparent, $color: $navbar-light-color, $brand-color: $navbar-light-brand-color, $link-active-color: $navbar-light-active-color, $link-disabled-color: $navbar-light-disabled-color, $link-active-bg: $navbar-light-active-bg) {
--#{$prefix}navbar-active-bg: #{$link-active-bg};
--#{$prefix}navbar-bg: #{$bg-color};
color: $color;

@include scrollbar;

//.text-muted {
// color: rgba($color, $text-muted-opacity) !important;
//}

.navbar-brand {
color: $brand-color;

Expand Down Expand Up @@ -57,21 +52,10 @@
}

@mixin navbar-dark {
@include navbar-color($dark, $navbar-dark-color, $navbar-dark-brand-color, $navbar-dark-active-color, $navbar-dark-disabled-color);
--#{$prefix}navbar-border-color: #{$dark-mode-border-color};
--#{$prefix}navbar-bg: #{$dark};
@include navbar-color($dark, $navbar-dark-color, $navbar-dark-brand-color, $navbar-dark-active-color, $navbar-dark-disabled-color, $navbar-dark-active-bg);
@include scrollbar;

.input-icon-addon {
color: rgba($dark-mode-text, .64);
}

.form-control {
border-color: transparent;
background-color: rgba(0, 0, 0, .1);

&::placeholder {
color: rgba($dark-mode-text, .64);
}
}
}

@mixin navbar-vertical-nav {
Expand Down Expand Up @@ -114,6 +98,11 @@
width: auto;
padding-left: add(calc($container-padding-x / 2), 1.75rem);
color: inherit;

&.active,
&:active {
background: var(--#{$prefix}navbar-active-bg);
}
}

.dropdown-menu .dropdown-item {
Expand Down Expand Up @@ -143,11 +132,14 @@
Navbar
*/
.navbar {
--#{$prefix}navbar-border-color: #{$navbar-border-color};
--#{$prefix}navbar-border-width: #{$navbar-border-width};
--#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
--#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
--#{$prefix}navbar-bg: transparent;
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);
background: var(--#{$prefix}navbar-bg);

.navbar-collapse & {
flex-grow: 1;
Expand Down Expand Up @@ -209,15 +201,6 @@ Navbar
flex: 1 1 auto;
}

//&.navbar-dark,
//.navbar-dark {
// .nav-item.active {
// .nav-link {
// background-color: rgba($black, .1);
// }
// }
//}

&.navbar-light,
.navbar-light {
.nav-item.active {
Expand Down Expand Up @@ -340,8 +323,8 @@ Navbar toggler
Navbar light
*/
.navbar-light {
box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
background-color: $white;
--#{$prefix}navbar-border-color: #{$navbar-border-color};
--#{$prefix}navbar-bg: var(--#{$prefix}bg-surface);
}

/**
Expand All @@ -351,6 +334,14 @@ Navbar dark
@include navbar-dark;
}

/**
Navbar transparent
*/
.navbar-transparent {
--#{$prefix}navbar-border-color: transparent !important;
background: transparent !important;
}

/**
Navbar nav
*/
Expand Down Expand Up @@ -380,7 +371,6 @@ Navbar vertical
*/
@if $enable-navbar-vertical {
.navbar-vertical {

&.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
Expand Down
4 changes: 4 additions & 0 deletions src/scss/layout/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@
--#{$prefix}code-color: #{$code-color};
--#{$prefix}code-bg: #{$code-bg};

--#{$prefix}dark-mode-border-color: #{$dark-mode-border-color};
--#{$prefix}dark-mode-border-color-light: #{$dark-mode-border-color-light};
--#{$prefix}dark-mode-border-color-active: #{$dark-mode-border-color-active};


@each $name, $value in $font-weights {
--#{$prefix}font-weight-#{$name}: #{$value};
Expand Down
13 changes: 10 additions & 3 deletions src/scss/ui/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,20 @@
//
@each $color, $value in $theme-colors {
.btn-#{$color} {
--#{$prefix}btn-border-color: transparent;
@if $color == 'dark' {
--#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-color-active);
--#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-color-active);
} @else {
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-active-border-color: transparent;
}

--#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-bg: var(--#{$prefix}#{$color});
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-hover-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
--#{$prefix}btn-active-border-color: transparent;
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
--#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
Expand Down
4 changes: 3 additions & 1 deletion src/scss/ui/_cards.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,8 +201,10 @@ Stacked card
}

.card-header-tabs {
background: $card-header-tabs-bg;
flex: 1;
margin: (- $card-spacer-y * .5) (- $card-spacer-x * .5) (- $card-spacer-y );
margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
padding: calc(var(--#{$prefix}card-cap-padding-y) * .5) calc(var(--#{$prefix}card-cap-padding-x) * .5) 0;
}

.card-header-pills {
Expand Down
18 changes: 9 additions & 9 deletions src/scss/ui/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
.nav-link {
padding-left: 0;
padding-right: 0;
margin: 0 0 (- $nav-bordered-border-width );
margin: 0 0 (- $nav-bordered-border-width);
border: 0;
border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
color: $text-muted;
Expand All @@ -50,14 +50,6 @@

}

.nav-tabs-alt {
.nav-link {
font-size: 13px;
font-weight: var(--#{$prefix}font-weight-bold);
text-transform: uppercase;
}
}

.nav-link {
display: flex;
@include transition(color $transition-time);
Expand Down Expand Up @@ -89,4 +81,12 @@
display: block;
height: 100%;
}
}

.nav-fill {
.nav-item {
.nav-link {
justify-content: center;
}
}
}