/*-------------------------------------------*\ 2.17. Dropdown \*-------------------------------------------*/ /* Disable content revealing on page load */ .dropdown-unfold { &[aria-labelledby] { opacity: 0; } &[aria-labelledby][role="tabpanel"] { display: block; opacity: 1; } &[aria-labelledby].u-unfold--css-animation, &[aria-labelledby].u-unfold--jquery-slide { display: block; opacity: 1; } &.u-unfold--css-animation.u-unfold--hidden { display: none; opacity: 0; visibility: hidden; } } .u-unfold--css-animation.u-unfold--hidden { display: none; opacity: 0; visibility: hidden; } .dropdown-unfold.show { display: block; opacity: 1; } /* Menu */ .dropdown-menu { margin-top: .5rem; font-size: ($font-size-base * .875); padding-top: $dropdown-padding-y; padding-bottom: $dropdown-padding-y; box-shadow: $dropdown-box-shadow; } /* Nav Link */ .dropdown-nav-link { color: $dropdown-link-color; font-weight: $dropdown-link-font-weight; font-size: $dropdown-link-font-size; &:hover { color: $dropdown-link-hover-color; } &-dark { color: $dark; } } /* Item */ .dropdown-item { font-size: $dropdown-item-font-size; &:hover { color: $dropdown-item-states; } &.active { color: $dropdown-item-states; } &-icon { display: inline-block; vertical-align: middle; text-align: center; font-size: $dropdown-icon-font-size; min-width: $dropdown-icon-width; max-width: $dropdown-icon-width; margin-right: .5rem; } } /* Toggle */ .dropdown-toggle{ &::after { display: inline-block; font-family: $font-family-font-awesome-icon; font-size: 80%; font-weight: 900; content: $dropdown-toggle-pseudo-content; margin-left: .5rem; } &-collapse { &::after { transition: $dropdown-toggle-arrow-transition; } &[aria-expanded="true"] { &::after { transform: $dropdown-toggle-arrow-collapse-rotation; } } } } /* Positions */ .dropdown-menu { &-right { right: 0; left: auto !important; } &-bottom { top: auto; bottom: 0; } } // Small Devices @include media-breakpoint-up(sm) { .dropdown-menu { &-sm-right { right: 0; left: auto !important; } } } // Medium Devices @include media-breakpoint-up(md) { .dropdown-menu { &-md-right { right: 0; left: auto !important; } } } // Large Devices @include media-breakpoint-up(lg) { .dropdown-menu { &-lg-right { right: 0; left: auto !important; } } } .dropdown-menu-right.dropdown-menu-right-fix { &[class*="dropdown-menu-right-fix"] { right: 0 !important; } @each $breakpoint in map-keys($grid-breakpoints) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); &#{$infix} { @each $dropdown-position in $dropdown-positions { &-#{$dropdown-position} { @include media-breakpoint-up($breakpoint) { right: $dropdown-position * 1% !important; } } } } } } .destination-dropdown { display: none; a { font-size: 1rem; padding-left: 0 !important; padding-right: 0 !important; color: $white; } } .dropdown:hover { .destination-dropdown { display: block; } } .footer { .list-group-item-action { color:$gray-1; &:hover { color: $primary; } } } .bootstrap-select__custom { .filter-option-inner-inner { color:$gray-1; } .dropdown-menu { @include media-breakpoint-up(md) { left: auto !important; right: 0; } } .dropdown-menu { overflow: unset !important; margin-bottom: 1.25rem; min-width: 15rem; border-radius: 2px; @include media-breakpoint-up(xl) { &::after { content: ''; display: block; position: absolute; bottom: -10px; right: 24px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid $white; } } } li { margin: 0 2rem; } a{ padding: 2rem 0; } .active{ a{ span { width:100%; } &::after { display: inline-block; font-family: "Font Awesome 5 Free"; font-size: 80%; font-weight: 900; content: "\f00c"; margin-left: -0.5rem; } } } } .bootstrap-select { &__custom-nav { .dropdown-toggle .filter-option { position: relative; top: 0; left: 0; padding-top: inherit; padding-right: inherit; padding-bottom: inherit; padding-left: inherit; height: 100%; width: 100%; text-align: left; padding: 0; margin-right: 25px; } } } [class*="u-header--bg-transparent"]:not(.js-header-fix-moment) .dropdown-connector { @each $breakpoint in map-keys($grid-breakpoints) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); &#{$infix} { > a.active:before { @include media-breakpoint-up($breakpoint) { position: absolute; display: block; pointer-events: none; border: 10px solid transparent; border-bottom-color: #fff; content: ''; height: 0; left: 50%; width: 0; top: 100%; transform: translateY(-100%); animation-name: slideInUp; animation-duration: 210ms; } } &.shopping-cart > a.active:before { left: 0; } } } } .tab-dropdown { border-bottom: 2px solid $gray-2; &.show{ border-bottom: 2px solid $primary; } .dropdown-toggle { &::after { display: none; } &.bs-placeholder { color:$dark; } } .dropdown-item { color:$gray-1; &:hover { color: $primary; } } .dropdown-menu { li { margin: 0 2rem; } a { padding: 0.8rem 0; } } } .dropdown-custom { .dropdown-menu { left: auto !important; } .dropdown-nav-link { border-bottom: 2px solid $gray-2; &.active { border-bottom: 2px solid $primary; } } .dropdown-toggle::after { margin-left: auto !important; display: flex; align-items:center; font-size: 16px; font-weight:bold; color: $black; } &_white { .dropdown-toggle::after { color: $white; } .dropdown-nav-link.active { border-color: $white; } } } .collapse_custom { .collapsed .card-btn-arrow { transform: rotate(-180deg); } } .custom-dropdown { .dropdown-toggle { padding: .475rem 1.7rem !important; &::before { display: inline-block; font-family: $font-family-font-awesome-icon; font-size: 70%; font-weight: 900; content: $dropdown-toggle-pseudo-content-1; color: $gray-6; margin-right: .4rem; } &::after { display: none; } &-collapse { &::before { transition: $dropdown-toggle-arrow-transition; } &[aria-expanded="true"] { border-left: 2px solid $primary !important; span { color: $primary !important; } &::before { transform: $dropdown-toggle-arrow-collapse-rotation-1; color: $primary; } } } } .dropdown-item { padding: .475rem 2.5rem; } .list-item { margin-bottom: .5rem; } }