com.arcbees.chosen.client.resources.css.mobile.gss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of gwtchosen Show documentation
GwtChosen is the GWT port of the Chosen javascript plugin that makes long, unwieldy select boxes much more user-friendly.
There is a newer version: 3.0.1
Show newest version
@require "chosen-colors";
@require "gsss-mixins";

.chzn-mobile-container {
    font-size: 13px;

    display: inline-block;
    zoom: 1;

    position: relative;
}

.chzn-mobile-container .chzn-drop {
    background: CHZN_C_PRIMARY;

    border: 1px solid CHZN_C_BORDER;
    border-top: 0;
    padding: 25px 0 0;

    position: fixed;
    z-index: 5100;
    top: 0;
    left: 0;
}

.chzn-mobile-container .chzn-search {
    width: 100%;

    position: relative;
}

.chzn-mobile-container .chzn-search > input {
    width: calc(100% - 80px);
    padding: 10px;
    margin: 0 15px;
}

.chzn-mobile-container .chzn-search > i {
    font-size: 175%;

    position: absolute;
    top: 8px;
    right: 10px;
}

.chzn-mobile-container .chzn-search > i:hover {
    cursor: pointer;
    
    @mixin scale(1.2, 1.2);
}

.chzn-mobile-container .chzn-search > i:active {
    @mixin scale(.9, .9);
}

.chzn-mobile-container .chzn-results-holder {
    overflow: auto;
    height: calc(100% - 110px);
    width: 100%;

    position: absolute;
    top: 80px;
    left: 0;
}

.chzn-mobile-container .chzn-results {
    margin: 0;
    overflow-x: auto;
    text-overflow: ellipsis;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;

    position: relative;

    list-style-type: none;
}

.chzn-mobile-container .chzn-results li {
    display: none;
}

.chzn-mobile-container .chzn-results li.active-result {
    color: CHZN_C_TEXT;

    display: list-item;
    padding: 10px 15px;
    margin: 0;
    border-bottom: 1px solid #ddd;

    -webkit-align-items: stretch;
    align-items: stretch;
}

.chzn-mobile-container .chzn-results li:hover {
    background-color: CHZN_C_SECONDARY;
    color: CHZN_C_PRIMARY;
    
    cursor: pointer;
}

.chzn-mobile-container .chzn-results li em {
    background-color: CHZN_C_HIGHLIGHT;
}

.chzn-mobile-container .chzn-results li:hover em {
    background-color: CHZN_C_SECONDARY_DARK;
}

.chzn-mobile-container .result-selected {
    -webkit-order: -1;
    order: -1;
}

.chzn-mobile-container .result-selected::before {
    content: "\f00c";
    font-family: "icons";

    display: inline-block;
    margin-right: .5em;
}

.chzn-mobile-container.chzn-container-multi .result-selected:hover::before {
    content: "\e600";
}

.chzn-mobile-container .chzn-single {
    color: CHZN_C_TEXT;
    background-color: CHZN_C_PRIMARY;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='CHZN_C_PRIMARY', endColorstr='CHZN_C_PRIMARY_STEP2', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, CHZN_C_PRIMARY), color-stop(50%, CHZN_C_PRIMARY_STEP1), color-stop(52%, CHZN_C_PRIMARY_STEP2), color-stop(100%, CHZN_C_PRIMARY_STEP1));
    /* @alternate */ background-image: -webkit-linear-gradient(top, CHZN_C_PRIMARY 20%, CHZN_C_PRIMARY_STEP1 50%, CHZN_C_PRIMARY_STEP2 52%, CHZN_C_PRIMARY_STEP1 100%);
    /* @alternate */ background-image: -moz-linear-gradient(top, CHZN_C_PRIMARY 20%, CHZN_C_PRIMARY_STEP1 50%, CHZN_C_PRIMARY_STEP2 52%, CHZN_C_PRIMARY_STEP1 100%);
    /* @alternate */ background-image: -o-linear-gradient(top, CHZN_C_PRIMARY 20%, CHZN_C_PRIMARY_STEP1 50%, CHZN_C_PRIMARY_STEP2 52%, CHZN_C_PRIMARY_STEP1 100%);
    /* @alternate */ background-image: -ms-linear-gradient(top, CHZN_C_PRIMARY 20%, CHZN_C_PRIMARY_STEP1 50%, CHZN_C_PRIMARY_STEP2 52%, CHZN_C_PRIMARY_STEP1 100%);
    /* @alternate */ background-image: linear-gradient(top, CHZN_C_PRIMARY 20%, CHZN_C_PRIMARY_STEP1 50%, CHZN_C_PRIMARY_STEP2 52%, CHZN_C_PRIMARY_STEP1 100%);
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;

    display: block;
    overflow: hidden;
    height: 23px;
    padding: 0 0 0 8px;
    border: 1px solid CHZN_C_BORDER;

    position: relative;

    -webkit-box-shadow: 0 0 3px CHZN_C_PRIMARY inset, 0 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 3px CHZN_C_PRIMARY inset, 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 3px CHZN_C_PRIMARY inset, 0 1px 1px rgba(0, 0, 0, 0.1);
    @mixin bgclip();
    @mixin rounded(5px);
}

.chzn-mobile-container .chzn-default {
    color: CHZN_C_TEXT_LIGHT;
}

.chzn-mobile-container .chzn-single span {
    white-space: nowrap;

    display: block;
    overflow: hidden;
    margin-right: 26px;

    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.chzn-mobile-container .chzn-single abbr {
    font-size: 12px;
    color: CHZN_C_TEXT_LIGHT;

    display: block;
    width: 12px;
    height: 13px;

    position: absolute;
    right: 20px;
    top: 6px;
}

.chzn-mobile-container .chzn-single abbr::before {
    @mixin transition(all, 0.2s);
}

.chzn-mobile-container .chzn-single abbr:hover {
    color: CHZN_C_TEXT;
}

.chzn-mobile-container.chzn-disabled .chzn-single abbr:hover {
    color: CHZN_C_TEXT_LIGHT;
}

.chzn-mobile-container .chzn-single div {
    display: block;
    height: 100%;
    width: 18px;

    position: absolute;
    right: 0;
    top: 0;
}

.chzn-mobile-container .chzn-single div b {
    font-size: 140%;

    display: block;
    width: 100%;
    height: 100%;

    position: relative;
}

.chzn-mobile-container .chzn-single div b::before {
    position: absolute;
    top: 3px;
    right: 1px;

    @mixin transition(all, 0.2s);
}

.chzn-mobile-container .is-open {}