Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/_dropdown.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }