mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00
Code Issues Releases Wiki Activity

Add .dropdown-menu-dark (#30171)

Browse Source 
* Add .dropdown-menu-dark

* Match background color to navbar dark

* Update docs to include a navbar example

* Update dropdowns.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto
2020-09-24 08:55:15 -07:00
committed by GitHub
parent 43b4252a34
commit 585b3ec532
3 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
scss/_dropdown.scss
View File

@@ -193,3 +193,44 @@
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
color: $dropdown-link-color;
}
// Dark dropdowns
.dropdown-menu-dark {
color: $dropdown-dark-color;
background-color: $dropdown-dark-bg;
border-color: $dropdown-dark-border-color;
@include box-shadow($dropdown-dark-box-shadow);
.dropdown-item {
color: $dropdown-dark-link-color;
&:hover,
&:focus {
color: $dropdown-dark-link-hover-color;
@include gradient-bg($dropdown-dark-link-hover-bg);
}
&.active,
&:active {
color: $dropdown-dark-link-active-color;
@include gradient-bg($dropdown-dark-link-active-bg);
}
&.disabled,
&:disabled {
color: $dropdown-dark-link-disabled-color;
}
}
.dropdown-divider {
border-color: $dropdown-dark-divider-bg;
}
.dropdown-item-text {
color: $dropdown-dark-link-color;
}
.dropdown-header {
color: $dropdown-dark-header-color;
}
}

13
scss/_variables.scss
View File

@@ -950,6 +950,19 @@ $dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
$dropdown-dark-color: $gray-300 !default;
$dropdown-dark-bg: $gray-800 !default;
$dropdown-dark-border-color: $dropdown-border-color !default;
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
$dropdown-dark-box-shadow: null !default;
$dropdown-dark-link-color: $dropdown-dark-color !default;
$dropdown-dark-link-hover-color: $white !default;
$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
$dropdown-dark-link-disabled-color: $gray-500 !default;
$dropdown-dark-header-color: $gray-500 !default;
// Pagination