Стиль bootstrap для django-autocomplete-light

Django-Autocomplete-Light решает большие проблемы, возникающие, когда в форме существуют списки с огромным количеством элементов. Но стили прописаны жестко и не переделать их без костылей. Ниже стиль, немного упрощающий задачу:

    .select2-container .select2-selection--single {
        height: auto;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-search__field {
        display: block;
        width: 100%;
        height: 43px;
        padding: 10px 18px;
        font-size: 15px;
        line-height: 1.42857143;
        color: #333;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        -webkit-transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
        -o-transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
        transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 43px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #333 transparent transparent transparent;
        border-width: 7px 3px 0 3px;
    }
    .select2-selection__clear {
        display: none;
    }
    .select2-container--default .select2-selection--single {
        background-color: transparent;
        border: none;
        border-radius: 0;
    }
    .select2-container--default {
        width: 100%!important;
    }

Постараюсь выложить SCSS с использованием bootstrap-variables

Kamo Petrosyan Автор

Добавить комментарий

Ваш e-mail не будет опубликован.