Skip to content

Commit

Permalink
morph: style buttons, navs, and dialogs for dark mode #1282
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomaspark
thomaspark committed Oct 23, 2023
1 parent c74d13f commit ee13d0b
Show file tree
Hide file tree
Showing 16 changed files with 466 additions and 88 deletions.
80 changes: 76 additions & 4 deletions dist/morph/_bootswatch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,26 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;70

$btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px rgba($white, .2) !default;

$box-shadow-dark: 5px 5px 10px rgba(darken($dark, 50%), .2), -5px -5px 10px rgba($white, .05) !default;

// Mixins

@mixin shadow($shadow: $box-shadow) {
background-color: $gray-200;
@mixin shadow($bg: $gray-200, $shadow: $box-shadow) {
background-color: $bg;
border: none;
box-shadow: $shadow;
transition: background-color .15s ease-in-out, border .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out;
}

@mixin shadow-outline($shadow: $box-shadow) {
@mixin shadow-outline($bg: $body-bg, $shadow: $box-shadow) {
position: absolute;
top: -.5rem;
right: -.5rem;
bottom: -.5rem;
left: -.5rem;
z-index: -1;
content: "";
background-color: $body-bg;
background-color: $bg;
border: 1px solid rgba($white, .1);
box-shadow: $shadow;
transition: background-color .15s ease-in-out, border .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out;
Expand Down Expand Up @@ -93,6 +95,13 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
}
}

@include color-mode(dark) {
.btn {
@include shadow($dark, $box-shadow-dark);
color: $navbar-dark-color;
}
}

.btn-outline {
@each $color, $value in $theme-colors {
&-#{$color} {
Expand Down Expand Up @@ -156,6 +165,14 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
}
}

@include color-mode(dark) {
.btn-group,
.btn-group-vertical {
@include shadow($dark, $box-shadow-dark);
color: $navbar-dark-color;
}
}

.btn-group {

> .btn:nth-child(n + 3),
Expand Down Expand Up @@ -254,6 +271,14 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
box-shadow: inset 0 3px 6px rgba($black, .2);
}

@include color-mode(dark) {
.btn-check:not(:checked) + .btn,
.btn-check:not(:checked) + .btn:active {
background-color: $dark;
color: $navbar-dark-color;
}
}

// Navs

.dropdown-menu {
Expand Down Expand Up @@ -306,6 +331,16 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
border-radius: $border-radius;
}

@include color-mode(dark) {
.nav-tabs,
.nav-pills,
.breadcrumb,
.pagination {
@include shadow($dark, $box-shadow-dark);
color: $navbar-dark-color;
}
}

// Forms

.input-group {
Expand Down Expand Up @@ -378,6 +413,22 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
box-shadow: $box-shadow;
}

@include color-mode(dark) {
.form-control {
&:disabled {
background-color: $gray-400;
}

&::file-selector-button {
box-shadow: 2px 2px 5px rgba($black, .2), inset 3px 3px 10px rgba(shade-color($form-range-thumb-bg, 50%), .1);
}
}

.form-select:not([multiple]) {
box-shadow: $box-shadow-dark;
}
}

// Indicators

.alert {
Expand Down Expand Up @@ -469,3 +520,24 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
.list-group-item {
background-color: transparent;
}

@include color-mode(dark) {

.card,
.list-group {
background-color: mix($black, $dark, 3%);
box-shadow: inset 2px 2px 6px rgba(shade-color($dark, 50%), .2), inset -3px -2px 4px rgba($white, .05);
}

.modal-content,
.popover,
.toast {
background-color: mix($white, $dark, 3%);
box-shadow: 8px 8px 40px rgba(0, 0, 0, 0.15), inset 1px 1px 3px rgba(255, 255, 255, 0.05), inset -5px -5px 20px rgba(0, 0, 0, 0.05)
}

.popover-header,
.toast-header {
color: $white;
}
}
15 changes: 3 additions & 12 deletions dist/morph/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,6 @@ $form-range-thumb-bg: $gray-100 !default;
$form-range-thumb-active-bg: $form-range-thumb-bg !default;
$form-range-thumb-disabled-bg: $gray-200 !default;

$form-file-button-bg: $gray-100 !default;

// Navs

$nav-link-color: $body-color !default;
Expand Down Expand Up @@ -152,7 +150,7 @@ $pagination-padding-y-sm: .5rem !default;
$pagination-padding-y-lg: 1.5rem !default;

$pagination-color: $gray-700 !default;
$pagination-bg: $body-bg !default;
$pagination-bg: transparent !default;

$pagination-active-color: darken($pagination-color, 20%) !default;
$pagination-active-bg: transparent !default;
Expand All @@ -166,22 +164,19 @@ $pagination-disabled-bg: $pagination-bg !default;
$card-spacer-y: 1.5rem !default;
$card-spacer-x: 1.5rem !default;
$card-cap-bg: transparent !default;
$card-bg: lighten($body-bg, 3%) !default;

// Tooltips

$tooltip-color: $body-color !default;
$tooltip-bg: $dropdown-bg !default;

// Popovers

$popover-bg: $dropdown-bg !default;

$popover-header-bg: transparent !default;

$popover-arrow-width: 0 !default;

// Toasts

$toast-background-color: $dropdown-bg !default;
$toast-border-width: 0 !default;

$toast-header-color: $body-color !default;
Expand All @@ -194,17 +189,13 @@ $badge-padding-x: 1.25em !default;

// Modals

$modal-content-bg: $dropdown-bg !default;

// Progress bars

$progress-height: 1.5rem !default;
$progress-border-radius: $border-radius-pill !default;

// List groups

$list-group-bg: $card-bg !default;

$list-group-hover-bg: transparent !default;
$list-group-active-color: $link-color !default;
$list-group-active-bg: transparent !default;
Expand Down

0 comments on commit ee13d0b

Please sign in to comment.