diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index dbbc2a4337..ae42df7a02 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -4,6 +4,7 @@ $prefix: "tblr-" !default; $enable-social-colors: true !default; $enable-extra-colors: true !default; $enable-gradients: false !default; +$enable-shadows: true !default; $enable-navbar-vertical: true !default; $enable-dark-mode: true !default; $enable-negative-margins: false !default; @@ -408,6 +409,7 @@ $shadow-button: 0 1px 0 rgba(var(--#{$prefix}body-color-rgb), .04) !default; $shadow-button-inset: inset 0 -1px 0 rgba(var(--#{$prefix}body-color-rgb), .2) !default; $shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), .04) !default; $shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), .16) 0 2px 16px 0 !default; +$shadow-dropdown: 0px 16px 24px 2px rgb(0 0 0 / 7%), 0px 6px 30px 5px rgb(0 0 0 / 6%), 0px 8px 10px -5px rgb(0 0 0 / 10%) !default; $shadows: ( shadow: $shadow, @@ -416,6 +418,7 @@ $shadows: ( shadow-button-inset: $shadow-button-inset, shadow-card: $shadow-card, shadow-card-hover: $shadow-card-hover, + shadow-dropdown: $shadow-dropdown, ) !default; // Transitions @@ -482,6 +485,7 @@ $input-btn-padding-y-lg: .5rem !default; $input-btn-focus-width: .25rem !default; // Inputs +$input-box-shadow: none !default; $input-height: null !default; $input-height-sm: null !default; $input-height-lg: null !default; @@ -566,6 +570,7 @@ $dropdown-max-width: 25rem !default; $dropdown-scrollable-height: 13rem !default; $dropdown-link-active-color: var(--#{$prefix}primary) !default; $dropdown-link-active-bg: var(--#{$prefix}active-bg) !default; +$dropdown-box-shadow: var(--#{$prefix}shadow-dropdown) !default; // Tooltip $tooltip-bg: var(--#{$prefix}bg-surface-dark) !default; diff --git a/src/scss/ui/_dropdowns.scss b/src/scss/ui/_dropdowns.scss index f011da2ed0..ea90d7bfd3 100644 --- a/src/scss/ui/_dropdowns.scss +++ b/src/scss/ui/_dropdowns.scss @@ -1,7 +1,5 @@ .dropdown-menu { - box-shadow: $box-shadow; user-select: none; - margin: 0 !important; &.card { padding: 0;