|
0
|
1 // The dropdown wrapper (`<div>`)
|
|
|
2 .dropup,
|
|
|
3 .dropdown {
|
|
|
4 position: relative;
|
|
|
5 }
|
|
|
6
|
|
|
7 .dropdown-toggle {
|
|
|
8 // Generate the caret automatically
|
|
|
9 &::after {
|
|
|
10 display: inline-block;
|
|
|
11 width: 0;
|
|
|
12 height: 0;
|
|
|
13 margin-left: $caret-width * .85;
|
|
|
14 vertical-align: $caret-width * .85;
|
|
|
15 content: "";
|
|
|
16 border-top: $caret-width solid;
|
|
|
17 border-right: $caret-width solid transparent;
|
|
|
18 border-left: $caret-width solid transparent;
|
|
|
19 }
|
|
|
20
|
|
|
21 &:empty::after {
|
|
|
22 margin-left: 0;
|
|
|
23 }
|
|
|
24 }
|
|
|
25
|
|
|
26 // Allow for dropdowns to go bottom up (aka, dropup-menu)
|
|
|
27 // Just add .dropup after the standard .dropdown class and you're set.
|
|
|
28 .dropup {
|
|
|
29 .dropdown-menu {
|
|
|
30 margin-top: 0;
|
|
|
31 margin-bottom: $dropdown-spacer;
|
|
|
32 }
|
|
|
33
|
|
|
34 .dropdown-toggle {
|
|
|
35 &::after {
|
|
|
36 border-top: 0;
|
|
|
37 border-bottom: $caret-width solid;
|
|
|
38 }
|
|
|
39 }
|
|
|
40 }
|
|
|
41
|
|
|
42 // The dropdown menu
|
|
|
43 .dropdown-menu {
|
|
|
44 position: absolute;
|
|
|
45 top: 100%;
|
|
|
46 left: 0;
|
|
|
47 z-index: $zindex-dropdown;
|
|
|
48 display: none; // none by default, but block on "open" of the menu
|
|
|
49 float: left;
|
|
|
50 min-width: $dropdown-min-width;
|
|
|
51 padding: $dropdown-padding-y 0;
|
|
|
52 margin: $dropdown-spacer 0 0; // override default ul
|
|
|
53 font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
|
|
|
54 color: $body-color;
|
|
|
55 text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
|
|
56 list-style: none;
|
|
|
57 background-color: $dropdown-bg;
|
|
|
58 background-clip: padding-box;
|
|
|
59 border: $dropdown-border-width solid $dropdown-border-color;
|
|
|
60 @include border-radius($border-radius);
|
|
|
61 @include box-shadow($dropdown-box-shadow);
|
|
|
62 }
|
|
|
63
|
|
|
64 // Dividers (basically an `<hr>`) within the dropdown
|
|
|
65 .dropdown-divider {
|
|
|
66 @include nav-divider($dropdown-divider-bg);
|
|
|
67 }
|
|
|
68
|
|
|
69 // Links, buttons, and more within the dropdown menu
|
|
|
70 //
|
|
|
71 // `<button>`-specific styles are denoted with `// For <button>s`
|
|
|
72 .dropdown-item {
|
|
|
73 display: block;
|
|
|
74 width: 100%; // For `<button>`s
|
|
|
75 padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
|
|
76 clear: both;
|
|
|
77 font-weight: $font-weight-normal;
|
|
|
78 color: $dropdown-link-color;
|
|
|
79 text-align: inherit; // For `<button>`s
|
|
|
80 white-space: nowrap; // prevent links from randomly breaking onto new lines
|
|
|
81 background: none; // For `<button>`s
|
|
|
82 border: 0; // For `<button>`s
|
|
|
83
|
|
|
84 @include hover-focus {
|
|
|
85 color: $dropdown-link-hover-color;
|
|
|
86 text-decoration: none;
|
|
|
87 background-color: $dropdown-link-hover-bg;
|
|
|
88 }
|
|
|
89
|
|
|
90 &.active,
|
|
|
91 &:active {
|
|
|
92 color: $dropdown-link-active-color;
|
|
|
93 text-decoration: none;
|
|
|
94 background-color: $dropdown-link-active-bg;
|
|
|
95 }
|
|
|
96
|
|
|
97 &.disabled,
|
|
|
98 &:disabled {
|
|
|
99 color: $dropdown-link-disabled-color;
|
|
|
100 background-color: transparent;
|
|
|
101 // Remove CSS gradients if they're enabled
|
|
|
102 @if $enable-gradients {
|
|
|
103 background-image: none;
|
|
|
104 }
|
|
|
105 }
|
|
|
106 }
|
|
|
107
|
|
|
108 // Open state for the dropdown
|
|
|
109 .show {
|
|
|
110 // Remove the outline when :focus is triggered
|
|
|
111 > a {
|
|
|
112 outline: 0;
|
|
|
113 }
|
|
|
114 }
|
|
|
115
|
|
|
116 .dropdown-menu.show {
|
|
|
117 display: block;
|
|
|
118 }
|
|
|
119
|
|
|
120 // Dropdown section headers
|
|
|
121 .dropdown-header {
|
|
|
122 display: block;
|
|
|
123 padding: $dropdown-padding-y $dropdown-item-padding-x;
|
|
|
124 margin-bottom: 0; // for use with heading elements
|
|
|
125 font-size: $font-size-sm;
|
|
|
126 color: $dropdown-header-color;
|
|
|
127 white-space: nowrap; // as with > li > a
|
|
|
128 }
|
