superdesk/superdesk-client-core

View on GitHub
styles/sass/dropdowns/_navigation-dropdown.scss

Summary

Maintainability
Test Coverage
//navigation big dropdown
.dropdown.dropdown--big, 
.navbtn.dropdown {
    & > .dropdown__toggle {
        padding: 0 15px;
        display: block;
        color:$sd-text;
        height: $subnav-height;
        text-align: center;
        line-height: $subnav-height;
        font-size: 15px;
        position: relative;
        z-index: 2;
        background: transparent;
        &:hover {
            background: rgba(255,255,255,0);
        }
        &.condensed {
            padding: 0 14px;
        }
    }
    &.open {
        & > .dropdown__toggle {
            background: #fff;
            color:$sd-text;
            z-index: 3;
            &.sd-create-btn {
                .circle {
                    width: 32px;
                    height: 32px;
                    margin-block-start: 8px;
                    margin-inline-start: 0;
                }
            }
        }
    }

    .caret {
        margin-inline-start: 15px;
    }

    .dropdown__menu {
        border-radius: 0px;
        border:0;
        z-index: 2;
        margin-block-start: -1px;
        min-width: 200px;
        box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.35);
        padding: 10px 0;
        &:before {
            display: none;
        }
        li {
            > a, > button, > span {
                margin: 0;
                min-width: 225px;
                padding: 6px 16px;
                line-height: 19px;
            }
            > span {
                display: block;
                &:hover {
                    background: none;
                }
            }
      > .dropdown__menu-label {
          min-width: 205px;
      }
            button {
                &.full {
                    width: 100%;
                    margin: 0;
                    height: 41px;
                    padding: 10px 10px;
                    border-block-start: 1px solid var(--sd-colour-line--light);
                    @include border-radius(0px);
                    i {
                        margin-inline-end: 10px;
                    }
                    &:hover {
                        background: $sd-blue;
                        color: #fff;
                    }
                }
            }
            &:active {
                > button {
                    background: $sd-blue;
                    color: #fff;
                }
            }
        }
        .fieldset {
            button {
                display: inline-block;
                text-align: center;
                width: auto;
                min-width: 50px;
                clear: none;
                margin-inline-end: 10px;
                float: inline-end;
            }
        }
    }
}

.navbtn.dropdown {
    padding: 0;
}