Warning, /iDDS/monitor/data/scss/bootstrap/_dropdown.scss is written in an unsupported language. File is not indexed.
0001 // The dropdown wrapper (`<div>`)
0002 .dropup,
0003 .dropend,
0004 .dropdown,
0005 .dropstart {
0006 position: relative;
0007 }
0008
0009 .dropdown-toggle {
0010 white-space: nowrap;
0011
0012 // Generate the caret automatically
0013 @include caret();
0014 }
0015
0016 // The dropdown menu
0017 .dropdown-menu {
0018 position: absolute;
0019 top: 100%;
0020 left: 0;
0021 z-index: $zindex-dropdown;
0022 display: none; // none by default, but block on "open" of the menu
0023 min-width: $dropdown-min-width;
0024 padding: $dropdown-padding-y $dropdown-padding-x;
0025 margin: $dropdown-spacer 0 0; // override default ul
0026 @include font-size($dropdown-font-size);
0027 color: $dropdown-color;
0028 text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
0029 list-style: none;
0030 background-color: $dropdown-bg;
0031 background-clip: padding-box;
0032 border: $dropdown-border-width solid $dropdown-border-color;
0033 @include border-radius($dropdown-border-radius);
0034 @include box-shadow($dropdown-box-shadow);
0035
0036 // Reset positioning when positioned with Popper
0037 &[style] {
0038 right: auto !important; // stylelint-disable-line declaration-no-important
0039 }
0040 }
0041
0042 // scss-docs-start responsive-breakpoints
0043 // We deliberately hardcode the `bs-` prefix because we check
0044 // this custom property in JS to determine Popper's positioning
0045
0046 @each $breakpoint in map-keys($grid-breakpoints) {
0047 @include media-breakpoint-up($breakpoint) {
0048 $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
0049
0050 .dropdown-menu#{$infix}-start {
0051 --bs-position: start;
0052 right: auto #{"/* rtl:ignore */"};
0053 left: 0 #{"/* rtl:ignore */"};
0054 }
0055
0056 .dropdown-menu#{$infix}-end {
0057 --bs-position: end;
0058 right: 0 #{"/* rtl:ignore */"};
0059 left: auto #{"/* rtl:ignore */"};
0060 }
0061 }
0062 }
0063 // scss-docs-end responsive-breakpoints
0064
0065 // Allow for dropdowns to go bottom up (aka, dropup-menu)
0066 // Just add .dropup after the standard .dropdown class and you're set.
0067 .dropup {
0068 .dropdown-menu {
0069 top: auto;
0070 bottom: 100%;
0071 margin-top: 0;
0072 margin-bottom: $dropdown-spacer;
0073 }
0074
0075 .dropdown-toggle {
0076 @include caret(up);
0077 }
0078 }
0079
0080 .dropend {
0081 .dropdown-menu {
0082 top: 0;
0083 right: auto;
0084 left: 100%;
0085 margin-top: 0;
0086 margin-left: $dropdown-spacer;
0087 }
0088
0089 .dropdown-toggle {
0090 @include caret(end);
0091 &::after {
0092 vertical-align: 0;
0093 }
0094 }
0095 }
0096
0097 .dropstart {
0098 .dropdown-menu {
0099 top: 0;
0100 right: 100%;
0101 left: auto;
0102 margin-top: 0;
0103 margin-right: $dropdown-spacer;
0104 }
0105
0106 .dropdown-toggle {
0107 @include caret(start);
0108 &::before {
0109 vertical-align: 0;
0110 }
0111 }
0112 }
0113
0114
0115 // Dividers (basically an `<hr>`) within the dropdown
0116 .dropdown-divider {
0117 height: 0;
0118 margin: $dropdown-divider-margin-y 0;
0119 overflow: hidden;
0120 border-top: 1px solid $dropdown-divider-bg;
0121 }
0122
0123 // Links, buttons, and more within the dropdown menu
0124 //
0125 // `<button>`-specific styles are denoted with `// For <button>s`
0126 .dropdown-item {
0127 display: block;
0128 width: 100%; // For `<button>`s
0129 padding: $dropdown-item-padding-y $dropdown-item-padding-x;
0130 clear: both;
0131 font-weight: $font-weight-normal;
0132 color: $dropdown-link-color;
0133 text-align: inherit; // For `<button>`s
0134 text-decoration: if($link-decoration == none, null, none);
0135 white-space: nowrap; // prevent links from randomly breaking onto new lines
0136 background-color: transparent; // For `<button>`s
0137 border: 0; // For `<button>`s
0138
0139 // Prevent dropdown overflow if there's no padding
0140 // See https://github.com/twbs/bootstrap/pull/27703
0141 @if $dropdown-padding-y == 0 {
0142 &:first-child {
0143 @include border-top-radius($dropdown-inner-border-radius);
0144 }
0145
0146 &:last-child {
0147 @include border-bottom-radius($dropdown-inner-border-radius);
0148 }
0149 }
0150
0151 &:hover,
0152 &:focus {
0153 color: $dropdown-link-hover-color;
0154 text-decoration: if($link-hover-decoration == underline, none, null);
0155 @include gradient-bg($dropdown-link-hover-bg);
0156 }
0157
0158 &.active,
0159 &:active {
0160 color: $dropdown-link-active-color;
0161 text-decoration: none;
0162 @include gradient-bg($dropdown-link-active-bg);
0163 }
0164
0165 &.disabled,
0166 &:disabled {
0167 color: $dropdown-link-disabled-color;
0168 pointer-events: none;
0169 background-color: transparent;
0170 // Remove CSS gradients if they're enabled
0171 background-image: if($enable-gradients, none, null);
0172 }
0173 }
0174
0175 .dropdown-menu.show {
0176 display: block;
0177 }
0178
0179 // Dropdown section headers
0180 .dropdown-header {
0181 display: block;
0182 padding: $dropdown-header-padding;
0183 margin-bottom: 0; // for use with heading elements
0184 @include font-size($font-size-sm);
0185 color: $dropdown-header-color;
0186 white-space: nowrap; // as with > li > a
0187 }
0188
0189 // Dropdown text
0190 .dropdown-item-text {
0191 display: block;
0192 padding: $dropdown-item-padding-y $dropdown-item-padding-x;
0193 color: $dropdown-link-color;
0194 }
0195
0196 // Dark dropdowns
0197 .dropdown-menu-dark {
0198 color: $dropdown-dark-color;
0199 background-color: $dropdown-dark-bg;
0200 border-color: $dropdown-dark-border-color;
0201 @include box-shadow($dropdown-dark-box-shadow);
0202
0203 .dropdown-item {
0204 color: $dropdown-dark-link-color;
0205
0206 &:hover,
0207 &:focus {
0208 color: $dropdown-dark-link-hover-color;
0209 @include gradient-bg($dropdown-dark-link-hover-bg);
0210 }
0211
0212 &.active,
0213 &:active {
0214 color: $dropdown-dark-link-active-color;
0215 @include gradient-bg($dropdown-dark-link-active-bg);
0216 }
0217
0218 &.disabled,
0219 &:disabled {
0220 color: $dropdown-dark-link-disabled-color;
0221 }
0222 }
0223
0224 .dropdown-divider {
0225 border-color: $dropdown-dark-divider-bg;
0226 }
0227
0228 .dropdown-item-text {
0229 color: $dropdown-dark-link-color;
0230 }
0231
0232 .dropdown-header {
0233 color: $dropdown-dark-header-color;
0234 }
0235 }