]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
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; | |
14 | vertical-align: middle; | |
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 | // Prevent the focus on the dropdown toggle when closing dropdowns | |
22 | &:focus { | |
23 | outline: 0; | |
24 | } | |
25 | } | |
26 | ||
27 | .dropup { | |
28 | .dropdown-toggle { | |
29 | &::after { | |
30 | border-top: 0; | |
31 | border-bottom: $caret-width solid; | |
32 | } | |
33 | } | |
34 | } | |
35 | ||
36 | // The dropdown menu | |
37 | .dropdown-menu { | |
38 | position: absolute; | |
39 | top: 100%; | |
40 | left: 0; | |
41 | z-index: $zindex-dropdown; | |
42 | display: none; // none by default, but block on "open" of the menu | |
43 | float: left; | |
44 | min-width: $dropdown-min-width; | |
45 | padding: $dropdown-padding-y 0; | |
46 | margin: $dropdown-margin-top 0 0; // override default ul | |
47 | font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues | |
48 | color: $body-color; | |
49 | text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) | |
50 | list-style: none; | |
51 | background-color: $dropdown-bg; | |
52 | background-clip: padding-box; | |
53 | border: $dropdown-border-width solid $dropdown-border-color; | |
54 | @include border-radius($border-radius); | |
55 | @include box-shadow($dropdown-box-shadow); | |
56 | } | |
57 | ||
58 | // Dividers (basically an `<hr>`) within the dropdown | |
59 | .dropdown-divider { | |
60 | @include nav-divider($dropdown-divider-bg); | |
61 | } | |
62 | ||
63 | // Links, buttons, and more within the dropdown menu | |
64 | // | |
65 | // `<button>`-specific styles are denoted with `// For <button>s` | |
66 | .dropdown-item { | |
67 | display: block; | |
68 | width: 100%; // For `<button>`s | |
69 | padding: 3px $dropdown-item-padding-x; | |
70 | clear: both; | |
71 | font-weight: $font-weight-normal; | |
72 | color: $dropdown-link-color; | |
73 | text-align: inherit; // For `<button>`s | |
74 | white-space: nowrap; // prevent links from randomly breaking onto new lines | |
75 | background: none; // For `<button>`s | |
76 | border: 0; // For `<button>`s | |
77 | ||
78 | @include hover-focus { | |
79 | color: $dropdown-link-hover-color; | |
80 | text-decoration: none; | |
81 | background-color: $dropdown-link-hover-bg; | |
82 | } | |
83 | ||
84 | &.active, | |
85 | &:active { | |
86 | color: $dropdown-link-active-color; | |
87 | text-decoration: none; | |
88 | background-color: $dropdown-link-active-bg; | |
89 | } | |
90 | ||
91 | &.disabled, | |
92 | &:disabled { | |
93 | color: $dropdown-link-disabled-color; | |
94 | cursor: $cursor-disabled; | |
95 | background-color: transparent; | |
96 | // Remove CSS gradients if they're enabled | |
97 | @if $enable-gradients { | |
98 | background-image: none; | |
99 | } | |
100 | } | |
101 | } | |
102 | ||
103 | // Open state for the dropdown | |
104 | .show { | |
105 | // Show the menu | |
106 | > .dropdown-menu { | |
107 | display: block; | |
108 | } | |
109 | ||
110 | // Remove the outline when :focus is triggered | |
111 | > a { | |
112 | outline: 0; | |
113 | } | |
114 | } | |
115 | ||
116 | // Menu positioning | |
117 | // | |
118 | // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown | |
119 | // menu with the parent. | |
120 | .dropdown-menu-right { | |
121 | right: 0; | |
122 | left: auto; // Reset the default from `.dropdown-menu` | |
123 | } | |
124 | ||
125 | .dropdown-menu-left { | |
126 | right: auto; | |
127 | left: 0; | |
128 | } | |
129 | ||
130 | // Dropdown section headers | |
131 | .dropdown-header { | |
132 | display: block; | |
133 | padding: $dropdown-padding-y $dropdown-item-padding-x; | |
134 | margin-bottom: 0; // for use with heading elements | |
135 | font-size: $font-size-sm; | |
136 | color: $dropdown-header-color; | |
137 | white-space: nowrap; // as with > li > a | |
138 | } | |
139 | ||
140 | // Backdrop to catch body clicks on mobile, etc. | |
141 | .dropdown-backdrop { | |
142 | position: fixed; | |
143 | top: 0; | |
144 | right: 0; | |
145 | bottom: 0; | |
146 | left: 0; | |
147 | z-index: $zindex-dropdown-backdrop; | |
148 | } | |
149 | ||
150 | // Allow for dropdowns to go bottom up (aka, dropup-menu) | |
151 | // | |
152 | // Just add .dropup after the standard .dropdown class and you're set. | |
153 | ||
154 | .dropup { | |
155 | // Different positioning for bottom up menu | |
156 | .dropdown-menu { | |
157 | top: auto; | |
158 | bottom: 100%; | |
159 | margin-bottom: $dropdown-margin-top; | |
160 | } | |
161 | } |