diff options
author | Matthew Lemon <y@yulqen.org> | 2024-10-15 21:01:31 +0100 |
---|---|---|
committer | Matthew Lemon <y@yulqen.org> | 2024-10-15 21:01:31 +0100 |
commit | eeaddb27560d723ca7d61359744ceb2709fccd2d (patch) | |
tree | 04ddbc49ae7b73d5f5a9e1716d7227aecd3b9f85 /alphabetlearning/static/bootstrap/scss/_dropdown.scss | |
parent | 7a3044c859043837e6c7c95bb4894d04e9b2cbc2 (diff) |
Renamed from pyblackbird_cc to alphabetlearning - everywhere
Diffstat (limited to 'alphabetlearning/static/bootstrap/scss/_dropdown.scss')
-rw-r--r-- | alphabetlearning/static/bootstrap/scss/_dropdown.scss | 240 |
1 files changed, 240 insertions, 0 deletions
diff --git a/alphabetlearning/static/bootstrap/scss/_dropdown.scss b/alphabetlearning/static/bootstrap/scss/_dropdown.scss new file mode 100644 index 0000000..adc1143 --- /dev/null +++ b/alphabetlearning/static/bootstrap/scss/_dropdown.scss @@ -0,0 +1,240 @@ +// The dropdown wrapper (`<div>`) +.dropup, +.dropend, +.dropdown, +.dropstart { + position: relative; +} + +.dropdown-toggle { + white-space: nowrap; + + // Generate the caret automatically + @include caret(); +} + +// The dropdown menu +.dropdown-menu { + position: absolute; + z-index: $zindex-dropdown; + display: none; // none by default, but block on "open" of the menu + min-width: $dropdown-min-width; + padding: $dropdown-padding-y $dropdown-padding-x; + margin: 0; // Override default margin of ul + @include font-size($dropdown-font-size); + color: $dropdown-color; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + list-style: none; + background-color: $dropdown-bg; + background-clip: padding-box; + border: $dropdown-border-width solid $dropdown-border-color; + @include border-radius($dropdown-border-radius); + @include box-shadow($dropdown-box-shadow); + + &[data-bs-popper] { + top: 100%; + left: 0; + margin-top: $dropdown-spacer; + } +} + +// scss-docs-start responsive-breakpoints +// We deliberately hardcode the `bs-` prefix because we check +// this custom property in JS to determine Popper's positioning + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .dropdown-menu#{$infix}-start { + --bs-position: start; + + &[data-bs-popper] { + right: auto; + left: 0; + } + } + + .dropdown-menu#{$infix}-end { + --bs-position: end; + + &[data-bs-popper] { + right: 0; + left: auto; + } + } + } +} +// scss-docs-end responsive-breakpoints + +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// Just add .dropup after the standard .dropdown class and you're set. +.dropup { + .dropdown-menu[data-bs-popper] { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(up); + } +} + +.dropend { + .dropdown-menu[data-bs-popper] { + top: 0; + right: auto; + left: 100%; + margin-top: 0; + margin-left: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(end); + &::after { + vertical-align: 0; + } + } +} + +.dropstart { + .dropdown-menu[data-bs-popper] { + top: 0; + right: 100%; + left: auto; + margin-top: 0; + margin-right: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(start); + &::before { + vertical-align: 0; + } + } +} + + +// Dividers (basically an `<hr>`) within the dropdown +.dropdown-divider { + height: 0; + margin: $dropdown-divider-margin-y 0; + overflow: hidden; + border-top: 1px solid $dropdown-divider-bg; +} + +// Links, buttons, and more within the dropdown menu +// +// `<button>`-specific styles are denoted with `// For <button>s` +.dropdown-item { + display: block; + width: 100%; // For `<button>`s + padding: $dropdown-item-padding-y $dropdown-item-padding-x; + clear: both; + font-weight: $font-weight-normal; + color: $dropdown-link-color; + text-align: inherit; // For `<button>`s + text-decoration: if($link-decoration == none, null, none); + white-space: nowrap; // prevent links from randomly breaking onto new lines + background-color: transparent; // For `<button>`s + border: 0; // For `<button>`s + + // Prevent dropdown overflow if there's no padding + // See https://github.com/twbs/bootstrap/pull/27703 + @if $dropdown-padding-y == 0 { + &:first-child { + @include border-top-radius($dropdown-inner-border-radius); + } + + &:last-child { + @include border-bottom-radius($dropdown-inner-border-radius); + } + } + + &:hover, + &:focus { + color: $dropdown-link-hover-color; + text-decoration: if($link-hover-decoration == underline, none, null); + @include gradient-bg($dropdown-link-hover-bg); + } + + &.active, + &:active { + color: $dropdown-link-active-color; + text-decoration: none; + @include gradient-bg($dropdown-link-active-bg); + } + + &.disabled, + &:disabled { + color: $dropdown-link-disabled-color; + pointer-events: none; + background-color: transparent; + // Remove CSS gradients if they're enabled + background-image: if($enable-gradients, none, null); + } +} + +.dropdown-menu.show { + display: block; +} + +// Dropdown section headers +.dropdown-header { + display: block; + padding: $dropdown-header-padding; + margin-bottom: 0; // for use with heading elements + @include font-size($font-size-sm); + color: $dropdown-header-color; + white-space: nowrap; // as with > li > a +} + +// Dropdown text +.dropdown-item-text { + display: block; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; + color: $dropdown-link-color; +} + +// Dark dropdowns +.dropdown-menu-dark { + color: $dropdown-dark-color; + background-color: $dropdown-dark-bg; + border-color: $dropdown-dark-border-color; + @include box-shadow($dropdown-dark-box-shadow); + + .dropdown-item { + color: $dropdown-dark-link-color; + + &:hover, + &:focus { + color: $dropdown-dark-link-hover-color; + @include gradient-bg($dropdown-dark-link-hover-bg); + } + + &.active, + &:active { + color: $dropdown-dark-link-active-color; + @include gradient-bg($dropdown-dark-link-active-bg); + } + + &.disabled, + &:disabled { + color: $dropdown-dark-link-disabled-color; + } + } + + .dropdown-divider { + border-color: $dropdown-dark-divider-bg; + } + + .dropdown-item-text { + color: $dropdown-dark-link-color; + } + + .dropdown-header { + color: $dropdown-dark-header-color; + } +} |