metro4/source/components/dropdown/dropdown.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

[data-role*=dropdown] {
    //display: block;
}

.dropdown-toggle {

    .toggle();

    &.drop-marker-light, &.marker-light  {
        &::before {
            border-color: @white;
        }
    }

    &.no-marker {
        &::before {
            display: none;
        }
    }

    &.active-toggle, &.active-container {
        &::before {
            .rotate(135deg);
            transition: @transition-short;
        }
    }

    &.marker-center {
        &::before {
            left: 50%;
            top: 50%;
            margin-left: 0;
            margin-top: 0;
            .translateX(-50%);
            .translateY(-50%);
            .rotate(-45deg);
        }
        &.active-toggle, &.active-container {
            &::before {
                .translateX(-50%);
                .translateY(-50%);
                .rotate(135deg);
                transition: @transition-short;
            }
        }
    }
}

.drop-left {
    right: 100%!important;
    top: 0!important;
}

.drop-right {
    left: 100%!important;
    top: 0!important;
}

.drop-up {
    top: auto!important;
    bottom: 100%!important;
}

.drop-up-left {
    top: auto!important;
    bottom: 100%!important;
    left: 0;
}

.drop-up-right {
    top: auto!important;
    bottom: 100%!important;
    right: 0!important;
}

.drop-down {
    top: 100%!important;
    bottom: auto!important;
}

.drop-down-left {
    top: 100%!important;
    bottom: auto!important;
    left: 0!important;
}

.drop-down-right {
    top: 100%!important;
    bottom: auto!important;
    right: 0!important;
}