Skip to content

Commit

Permalink
Dark mode fixes (#1322)
Browse files Browse the repository at this point in the history
  • Loading branch information
@codecalm
codecalm committed Oct 20, 2022
1 parent 65bf527 commit 1a3c208
Show file tree
Hide file tree
Showing 10 changed files with 97 additions and 85 deletions.
2 changes: 1 addition & 1 deletion src/pages/_includes/cards/card-tabs.html
View file
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
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
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
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
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
@@ -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
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
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
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
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;
}
}
}

0 comments on commit 1a3c208

Please sign in to comment.