joeblau/gitignore.io

@import "variables.less";

/*
 * @reference https://github.com/ttskch/select2-bootstrap4-theme/tree/master/src
 */

/******** layout.less ********/

// basic
.select2-container {
    display: block;

    *:focus {
        outline: 0;
    }
}

// input-group
.input-group {
    .select2-container--toptal {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: calc(100% - ~"@{button-width}" - 1px);
    }

    .input-group-append {
        width: @button-width;
        height: @input-height;
    }

    @media (max-width: 767px) {
        flex-direction: column;

        .select2-container--toptal {
            width: 100% !important;
            max-width: 100%;
        }

        .input-group-append {
            width: 100%;
            margin-top: 12px;
            margin-left: 0;
        }
    }
}

.select2-container--toptal {

    // input box
    .select2-selection {
        background-color: @input-bg;
        border-radius: 0;
        border: 1px solid @input-border-color;
        box-shadow: none;
        width: 100%;
        -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
                transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
                transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
                transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;

        .select2-search__field {
            font-size: 16px;
            line-height: 24px;
            height: 24px;
            margin: 10px 0;
            color: @input-text-color;
            caret-color: @input-caret-color;
            -webkit-appearance: none;
            border-radius: 0;

            @media (min-width: 768px) {
                font-size: 13px;
                line-height: 20px;
                height: 20px;
                margin: 12px 0;
            }

            &::-webkit-search-decoration {
                -webkit-appearance: none;
            }

            &::placeholder {
                color: @input-placeholder;
            }
            &::-webkit-input-placeholder {
                color: @input-placeholder;
            }
            &:-ms-input-placeholder {
                color: @input-placeholder;
            }
            &::-moz-placeholder {
                color: @input-placeholder;
            }
        }
    }

    // focused input box
    &.select2-container--focus {
        .select2-selection {
            box-shadow: none;
            border-color: @input-focus-border-color;
        }

        // when open, hide bottom border
        &.select2-container--open .select2-selection {
            // border-bottom: none;
            // border-bottom-left-radius: 0;
            // border-bottom-right-radius: 0;
        }
    }

    // dropdown
    .select2-dropdown {
        border: none;
        background-color: @dropdown-bg;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
        color: @dropdown-text-color;
        font-size: 13px;
        line-height: 16px;
        margin-top: 0;

        // dropdown opened above
        &.select2-dropdown--above {
            // border-top: 1px solid $input-border-color;
            // border-top-left-radius: $input-border-radius;
            // border-top-right-radius: $input-border-radius;
        }

        // selected item
        .select2-results__option[aria-selected=true] {
            background-color: @option-selected-color;
        }
    }

    .select2-results__option {
        padding: 10px;
    }

    // mouse hovered item
    .select2-results__message,
    .select2-results__option--highlighted,
    .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
        background-color: @option-highlighted-color;
    }

    // fixes vertical overflow
    .select2-results > .select2-results__options {
        max-height: @dropdown-max-height;
        overflow-y: auto;
    }
}
/******** end of layout.less ********/


/******** multiple.less ********/
.select2-container--toptal {
    .select2-selection--multiple {

        // height of input box
        min-height: @input-height;

        // input box
        .select2-selection__rendered {
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            list-style: none;
            margin: 0;
            padding: 0 10px;
            width: 100%;
            display: block;
        }

        // each selected item in input box
        .select2-selection__choice {
            font-size: 12px;
            font-weight: @weight-semibold;
            line-height: 22px;
            color: @tag-color;
            padding: 0 12px;
            border-radius: @tag-border-radius;
            border: 1px solid @tag-border-color;
            margin: 10px 6px 0 0;
            float: left;
            cursor: pointer;
        }

        // x button of each selected item in input box
        .select2-selection__choice__remove {
            color: @tag-remove-color;
            float: right;
            margin-left: 8px;
            font-size: 18px;
            font-weight: @weight-regular;

            &:hover {
                color: @tag-remove-color-hover;
            }
        }
    }
}
/******** end of multiple.less ********/



/******** button.less ********/
.input-group-append {
    & > .btn-gitignore {
        width: 100%;
        color: @button-text;
        background: @button-bg;
        -webkit-transition: background .35s cubic-bezier(0,0,.2,1);
        transition: background .35s cubic-bezier(0,0,.2,1);
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        border-radius: 0;

        &:focus {
            box-shadow: none;
            border-color: @input-focus-border-color;
        }
        &:hover {
            background: @button-bg-hover;
        }
    }
}
/******** end of button.less ********/