CS Select (SCSS)

cs_select.scss

/*
 *
 * NOTE:    There're some css3 features using @include and I'm not including (dumb I know).
 *          You can find all the css3 properties in here:
 *          https://gist.github.com/teledirigido/e7d346cc05b4d95b8c97
 *
 *          This file has been created to work with the following script:
 *          https://gist.github.com/teledirigido/fec00d9e9ae3ac46b79c (cs_select.js)
 *
 *
 */

$dropdown-bg: #FFF;
$dropdown-hover-bg: $text-color;
$dropdown-hover-color: #FFF;

.cs-select {
    @include user-select(none);
    @include transition( linear height .2s );
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: left;
    background: $dropdown-bg;
    z-index: 10;
    width: 100%;
    height:100%;
    -webkit-touch-callout: none;

    &:focus {
        outline: none;
    }

    select {
        display: none;
    }

    span {
        display: block;
        position: relative;
        cursor: pointer;
        // padding: 1em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Placeholder and selected option */
    & > span::after {
        @include transform( translateY(-50%) );
        @include transition( transform linear .3s );
        position: absolute;
        top: 50%;
        content: '\25BE';
        right: 1em;
         -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .cs-item {
        @include transition(background-color linear 0.2s , color linear 0.2s );
        background-color: $dropdown-bg;
        &:hover { cursor: pointer; }
    }

    .cs-options {
        @include transition( opacity 0.2s, visibility 0s 0.2s );
        width: 100%;
        height:0;
        background: $dropdown-bg;
        visibility: hidden;
        opacity: 0;
    }

    &.cs-active {
        & > span::after {
            -webkit-transform: translateY(-50%) rotate(180deg);
            transform: translateY(-50%) rotate(180deg);
        }

        .cs-options {
            @include transition( opacity 0.3s ease );
            visibility: visible;
            opacity: 1;
        }
    }

    ul {
        
        list-style: none;
        margin: 0; 
        padding: 0;

        li {
            
            &:hover {
                background: $dropdown-hover-bg;
                color:$dropdown-hover-color;
            }

        }

    }
}