wagtail/client/scss/overrides/_utilities.dropdowns.scss

// =============================================================================
//  Arrows
// =============================================================================
.u-arrow:before {
    content: '';
    border: solid 0.35rem transparent;
    display: block;
    position: absolute;
}

.u-arrow--tl:before {
    bottom: 100%;
    left: 1rem;
}

.dropup .u-arrow--tl:before {
    top: 100%;
    transform: rotateZ(180deg);
}

// =============================================================================
//  Default dropdown theme
// =============================================================================

// .t-default {

// }
.t-default .u-btn-current {
    border-color: rgba(0, 0, 0, 0.15);
    color: $color-teal;
}

.t-default .u-btn-current:hover {
    background: $color-teal;
    color: #fff;
    border-color: $color-teal;
}

.t-default .u-btn-current:active {
    background: #333;
    color: #fff;
    border-color: #333;
}

.t-inverted .u-btn-current {
    border-color: rgba(0, 0, 0, 0.35);
    color: #fff;
}

.t-inverted .u-btn-current:hover {
    background-color: $color-teal-darker;
    border-color: rgba(0, 0, 0, 0.35);
}

.t-inverted .u-btn-current:active {
    border-color: rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
}


// =============================================================================
// Dark theme
// =============================================================================
.t-dark .u-link {
    color: #fff;
}

.t-dark .u-link:hover {
    color: #aaa;
}

.t-dark .u-background {
    background: #333;
}

.t-dark .u-arrow:before {
    border-bottom-color: #333;
}

// =============================================================================
// Light theme
// =============================================================================
.t-light .u-link {
    color: #333;
}

.t-light .u-link:hover {
    color: #aaa;
}

.t-light .u-background {
    background: #fff;
    border-color: #ccc;
}

.t-light .u-arrow:before {
    border-bottom-color: #fff;
}

// =============================================================================
// States
// =============================================================================
.u-toggle {
    display: none;
}

.is-open .u-toggle {
    display: block;
}