Skip to content

Commit

Permalink
flatly: improve navbar active color styles, closes #1088
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomaspark
thomaspark committed Apr 5, 2021
1 parent 34901d5 commit c225f7b
Show file tree
Hide file tree
Showing 10 changed files with 8,569 additions and 59 deletions.
17 changes: 6 additions & 11 deletions dist/flatly/_bootswatch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,16 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0
// Navbar =======================================================================

.bg-primary {
.navbar-nav .active > .nav-link {
.navbar-nav .active > .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .show > .nav-link,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link.active {
color: $success !important;
}
}

.bg-dark {
&.navbar-dark .navbar-nav {
.nav-link:focus,
.nav-link:hover,
.active > .nav-link {
color: $primary !important;
}
}
}

// Buttons =====================================================================

.btn {
Expand Down
6 changes: 5 additions & 1 deletion dist/flatly/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,11 @@ $nav-tabs-border-color: $gray-200 !default;

$navbar-padding-y: 1rem !default;
$navbar-dark-color: $white !default;
$navbar-dark-hover-color: $success !default;
$navbar-dark-hover-color: $primary !default;
$navbar-dark-active-color: $primary !default;

$navbar-dark-brand-color: $white !default;
$navbar-dark-brand-hover-color: $navbar-dark-brand-color !default;

// Pagination

Expand Down
21 changes: 10 additions & 11 deletions dist/flatly/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4721,7 +4721,7 @@ input[type="button"].btn-block {
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
color: #18bc9c;
color: #2c3e50;
}

.navbar-dark .navbar-nav .nav-link.disabled {
Expand All @@ -4732,7 +4732,7 @@ input[type="button"].btn-block {
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
color: #fff;
color: #2c3e50;
}

.navbar-dark .navbar-toggler {
Expand All @@ -4749,11 +4749,11 @@ input[type="button"].btn-block {
}

.navbar-dark .navbar-text a {
color: #fff;
color: #2c3e50;
}

.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
color: #fff;
color: #2c3e50;
}

.card {
Expand Down Expand Up @@ -10304,16 +10304,15 @@ a.text-dark:hover, a.text-dark:focus {
}
}

.bg-primary .navbar-nav .active > .nav-link {
.bg-primary .navbar-nav .active > .nav-link,
.bg-primary .navbar-nav .nav-link:hover,
.bg-primary .navbar-nav .nav-link:focus,
.bg-primary .navbar-nav .show > .nav-link,
.bg-primary .navbar-nav .nav-link.show,
.bg-primary .navbar-nav .nav-link.active {
color: #18bc9c !important;
}

.bg-dark.navbar-dark .navbar-nav .nav-link:focus,
.bg-dark.navbar-dark .navbar-nav .nav-link:hover,
.bg-dark.navbar-dark .navbar-nav .active > .nav-link {
color: #2c3e50 !important;
}

.btn-secondary, .btn-secondary:hover, .btn-warning, .btn-warning:hover {
color: #fff;
}
Expand Down
2 changes: 1 addition & 1 deletion dist/flatly/bootstrap.min.css
View file

Large diffs are not rendered by default.

17 changes: 6 additions & 11 deletions docs/4/flatly/_bootswatch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,16 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0
// Navbar =======================================================================

.bg-primary {
.navbar-nav .active > .nav-link {
.navbar-nav .active > .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .show > .nav-link,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link.active {
color: $success !important;
}
}

.bg-dark {
&.navbar-dark .navbar-nav {
.nav-link:focus,
.nav-link:hover,
.active > .nav-link {
color: $primary !important;
}
}
}

// Buttons =====================================================================

.btn {
Expand Down
6 changes: 5 additions & 1 deletion docs/4/flatly/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,11 @@ $nav-tabs-border-color: $gray-200 !default;

$navbar-padding-y: 1rem !default;
$navbar-dark-color: $white !default;
$navbar-dark-hover-color: $success !default;
$navbar-dark-hover-color: $primary !default;
$navbar-dark-active-color: $primary !default;

$navbar-dark-brand-color: $white !default;
$navbar-dark-brand-hover-color: $navbar-dark-brand-color !default;

// Pagination

Expand Down
21 changes: 10 additions & 11 deletions docs/4/flatly/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4721,7 +4721,7 @@ input[type="button"].btn-block {
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
color: #18bc9c;
color: #2c3e50;
}

.navbar-dark .navbar-nav .nav-link.disabled {
Expand All @@ -4732,7 +4732,7 @@ input[type="button"].btn-block {
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
color: #fff;
color: #2c3e50;
}

.navbar-dark .navbar-toggler {
Expand All @@ -4749,11 +4749,11 @@ input[type="button"].btn-block {
}

.navbar-dark .navbar-text a {
color: #fff;
color: #2c3e50;
}

.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
color: #fff;
color: #2c3e50;
}

.card {
Expand Down Expand Up @@ -10304,16 +10304,15 @@ a.text-dark:hover, a.text-dark:focus {
}
}

.bg-primary .navbar-nav .active > .nav-link {
.bg-primary .navbar-nav .active > .nav-link,
.bg-primary .navbar-nav .nav-link:hover,
.bg-primary .navbar-nav .nav-link:focus,
.bg-primary .navbar-nav .show > .nav-link,
.bg-primary .navbar-nav .nav-link.show,
.bg-primary .navbar-nav .nav-link.active {
color: #18bc9c !important;
}

.bg-dark.navbar-dark .navbar-nav .nav-link:focus,
.bg-dark.navbar-dark .navbar-nav .nav-link:hover,
.bg-dark.navbar-dark .navbar-nav .active > .nav-link {
color: #2c3e50 !important;
}

.btn-secondary, .btn-secondary:hover, .btn-warning, .btn-warning:hover {
color: #fff;
}
Expand Down
2 changes: 1 addition & 1 deletion docs/4/flatly/bootstrap.min.css
View file

Large diffs are not rendered by default.

0 comments on commit c225f7b

Please sign in to comment.