metro4/less/third-party/select2.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";

.select2 {

}

.select2-container {

    .selection {
        .select2-selection--single {
            height: @inputHeight;
            border: 1px @inputBorder solid;

            .select2-selection__rendered {
                line-height: @inputHeight;
            }

            .select2-selection__arrow {
                height: 36px;
            }
        }

        .select2-selection--multiple {

            min-height: 36px;
            border: 1px @inputBorder solid;

            .select2-selection__rendered {

                display: block;

                .select2-selection__choice {
                    border-radius: 0;
                    background-color: @light;
                    font-size: 14px;
                    height: 26px;
                    line-height: 26px;
                }
                .select2-search--inline {
                    .select2-search__field {
                        margin-top: 0;
                    }
                }
            }
        }
    }

    .select2-selection, .select2-dropdown {
        border-radius: 0;
    }
}

.select2 {
    .selection {
        .select2-selection--single, .select2-selection--multiple {

            outline: none;

            &:hover {
                border-color: darken(@inputBorder, 10%);
            }

            &:focus, &.focused {
                box-shadow: 0 0 0 3px rgba(red(@lightGray), green(@lightGray), blue(@lightGray), 0.45);
            }

            &:disabled, &.disabled {
                pointer-events: none;
                border-color: darken(@light, 5%);
                background-color: @disabledBackground;
            }
        }
    }
}