talos

1
// The dropdown wrapper (`<div>`)
2
.dropup,
3
.dropright,
4
.dropdown,
5
.dropleft {
6
  position: relative;
7
}
8

9
.dropdown-toggle {
10
  white-space: nowrap;
11

12
  // Generate the caret automatically
13
  @include caret();
14
}
15

16
// The dropdown menu
17
.dropdown-menu {
18
  position: absolute;
19
  top: 100%;
20
  left: 0;
21
  z-index: $zindex-dropdown;
22
  display: none; // none by default, but block on "open" of the menu
23
  float: left;
24
  min-width: $dropdown-min-width;
25
  padding: $dropdown-padding-y $dropdown-padding-x;
26
  margin: $dropdown-spacer 0 0; // override default ul
27
  @include font-size($dropdown-font-size);
28
  color: $dropdown-color;
29
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
30
  list-style: none;
31
  background-color: $dropdown-bg;
32
  background-clip: padding-box;
33
  border: $dropdown-border-width solid $dropdown-border-color;
34
  @include border-radius($dropdown-border-radius);
35
  @include box-shadow($dropdown-box-shadow);
36
}
37

38
@each $breakpoint in map-keys($grid-breakpoints) {
39
  @include media-breakpoint-up($breakpoint) {
40
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
41

42
    .dropdown-menu#{$infix}-left {
43
      right: auto;
44
      left: 0;
45
    }
46

47
    .dropdown-menu#{$infix}-right {
48
      right: 0;
49
      left: auto;
50
    }
51
  }
52
}
53

54
// Allow for dropdowns to go bottom up (aka, dropup-menu)
55
// Just add .dropup after the standard .dropdown class and you're set.
56
.dropup {
57
  .dropdown-menu {
58
    top: auto;
59
    bottom: 100%;
60
    margin-top: 0;
61
    margin-bottom: $dropdown-spacer;
62
  }
63

64
  .dropdown-toggle {
65
    @include caret(up);
66
  }
67
}
68

69
.dropright {
70
  .dropdown-menu {
71
    top: 0;
72
    right: auto;
73
    left: 100%;
74
    margin-top: 0;
75
    margin-left: $dropdown-spacer;
76
  }
77

78
  .dropdown-toggle {
79
    @include caret(right);
80
    &::after {
81
      vertical-align: 0;
82
    }
83
  }
84
}
85

86
.dropleft {
87
  .dropdown-menu {
88
    top: 0;
89
    right: 100%;
90
    left: auto;
91
    margin-top: 0;
92
    margin-right: $dropdown-spacer;
93
  }
94

95
  .dropdown-toggle {
96
    @include caret(left);
97
    &::before {
98
      vertical-align: 0;
99
    }
100
  }
101
}
102

103
// When Popper is enabled, reset the basic dropdown position
104
// stylelint-disable-next-line no-duplicate-selectors
105
.dropdown-menu {
106
  &[x-placement^="top"],
107
  &[x-placement^="right"],
108
  &[x-placement^="bottom"],
109
  &[x-placement^="left"] {
110
    right: auto;
111
    bottom: auto;
112
  }
113
}
114

115
// Dividers (basically an `<hr>`) within the dropdown
116
.dropdown-divider {
117
  @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
118
}
119

120
// Links, buttons, and more within the dropdown menu
121
//
122
// `<button>`-specific styles are denoted with `// For <button>s`
123
.dropdown-item {
124
  display: block;
125
  width: 100%; // For `<button>`s
126
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
127
  clear: both;
128
  font-weight: $font-weight-normal;
129
  color: $dropdown-link-color;
130
  text-align: inherit; // For `<button>`s
131
  text-decoration: if($link-decoration == none, null, none);
132
  white-space: nowrap; // prevent links from randomly breaking onto new lines
133
  background-color: transparent; // For `<button>`s
134
  border: 0; // For `<button>`s
135

136
  // Prevent dropdown overflow if there's no padding
137
  // See https://github.com/twbs/bootstrap/pull/27703
138
  @if $dropdown-padding-y == 0 {
139
    &:first-child {
140
      @include border-top-radius($dropdown-inner-border-radius);
141
    }
142

143
    &:last-child {
144
      @include border-bottom-radius($dropdown-inner-border-radius);
145
    }
146
  }
147

148
  @include hover-focus() {
149
    color: $dropdown-link-hover-color;
150
    text-decoration: none;
151
    @include gradient-bg($dropdown-link-hover-bg);
152
  }
153

154
  &.active,
155
  &:active {
156
    color: $dropdown-link-active-color;
157
    text-decoration: none;
158
    @include gradient-bg($dropdown-link-active-bg);
159
  }
160

161
  &.disabled,
162
  &:disabled {
163
    color: $dropdown-link-disabled-color;
164
    pointer-events: none;
165
    background-color: transparent;
166
    // Remove CSS gradients if they're enabled
167
    @if $enable-gradients {
168
      background-image: none;
169
    }
170
  }
171
}
172

173
.dropdown-menu.show {
174
  display: block;
175
}
176

177
// Dropdown section headers
178
.dropdown-header {
179
  display: block;
180
  padding: $dropdown-header-padding;
181
  margin-bottom: 0; // for use with heading elements
182
  @include font-size($font-size-sm);
183
  color: $dropdown-header-color;
184
  white-space: nowrap; // as with > li > a
185
}
186

187
// Dropdown text
188
.dropdown-item-text {
189
  display: block;
190
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
191
  color: $dropdown-link-color;
192
}
193