gaf-mobile/app/styles/modules/fl-selectbox.less

GAF mobile Web site

@import (reference) '../themes/variables';

.form {
    .fl-selectbox-items-search {
        margin-bottom: 0;
    }
}

.fl-selectbox-items-container {
    position: relative;
}

.fl-selectbox-items-results {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    padding: 5px;
    border: 1px solid @septenary-color-xlight;
    border-top: 0;
    background-color: darken(@septenary-color-xxxlight, 1%);
}

.fl-selectbox-items-list {
    list-style: none;
    padding: 0;
}

.fl-selectbox-items-item {
    padding: 8px 12px;
    cursor: pointer;
    display: block;
    background-color: @septenary-color-xxxlight;
    color: @text-color-dark;
    outline: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    // Hover state is managed by JS
    &:hover  {
        text-decoration: none;
    }
    &.selected {
        background-color: @primary-color;
        color: @septenary-color-xxxlight;
    }
}

.fl-selectbox-selected-items {
    margin: 4px 0 10px 0;
}

.fl-selectbox-pill {
    position: relative;
    margin: 0 4px 4px 0;
    padding: 5px 28px 5px 10px;
    border: 1px solid @septenary-color-xlight;
    border-radius: 3px;
    background: darken(@septenary-color-xxxlight, 2%);
    color: @text-color-dark;
    font-size: @type-size-sml;
    font-weight: normal;
    outline: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    &:after {
        position: absolute;
        top: 5px;
        right: 7px;
        width: 16px;
        height: 16px;
        padding: 0;
        font-size: @type-size;
        color: @septenary-color-xlight;
        font-family: 'icomoon';
        content: "\e616";
    }
    &:active,
    &:focus,
    &.fl-touch-active,
    html.no-touch &:hover {
        color: @septenary-color-xxxlight;
        background-color: @secondary-color;
        border-color: darken(@secondary-color, 10%);
    }
}

@media only screen and (max-width : 440px) {
    .fl-selectbox-pill {
        width: auto;
    }
}