Skip to content

Instantly share code, notes, and snippets.

@fuhlig

fuhlig/custom-select.scss

Created September 9, 2015 14:26
Show Gist options
  • Save fuhlig/19b437e73d85bdffc65d to your computer and use it in GitHub Desktop.
Save fuhlig/19b437e73d85bdffc65d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fuhlig created this gist Sep 9, 2015.
    187 changes: 187 additions & 0 deletions custom-select.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,187 @@
    /*------------------------------------*\
    #CUSTOM-SELECT
    \*------------------------------------*/

    ////
    /// Custom Select
    /// @group components.select
    ////

    /// consistent height for form inputs
    /// @requires {variable} $form-input-height
    /// @type {number}
    $custom-select-height: $form-input-height !default;

    /// select text-color
    /// @type {color}
    $custom-select-color: $form-input-color !default;

    /// select background-color
    /// @type {color}
    $custom-select-background: $white !default;

    /// select border-color
    /// @type {color}
    $custom-select-border-color: $form-input-border-color !default;

    /// select border-width
    /// @type {number}
    $custom-select-border-width: $form-input-border-width !default;

    /// select border-style
    /// @type {String}
    $custom-select-border-style: solid !default;

    /// select border
    /// @type {String}
    /// @requires {variable} $custom-select-border-width
    /// @requires {variable} $custom-select-border-style
    /// @requires {variable} $custom-select-border-color
    $custom-select-border: $custom-select-border-width $custom-select-border-style $custom-select-border-color !default;

    /// select carret icon
    /// @type {String}
    $custom-select-icon: $icon-arrow--down !default;

    /// select carret icon-color
    /// @type {color}
    $custom-select-icon-color: $color-primary !default;

    /// select carret icon-size
    /// @type {number}
    $custom-select-icon-size: 1em !default;

    /// add 'shadow' to prevent option text cutoff
    /// @type {Boolean}
    $custom-select-enable-overflow-shadow: true !default;

    /// color stop for gradient
    /// @type {number}
    $custom-select-overflow-shadow-stop: 30% !default;


    /// Map includes icons to alter select carrot for custom appearance
    /// @type {map}
    /// ---
    /// @example
    /// <div class="[ custom-select custom-select--user ]">
    /// <select>
    /// <option value="1">1</option>
    /// <option value="2">2</option>
    /// </select>
    /// </div>
    /// ---
    $custom-select-icons: (
    user: $icon-user
    ) !default;

    .custom-select {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0;
    height: $custom-select-height;
    background-color: $custom-select-background;
    }

    /**
    * icon
    * [1] position inside select container
    * [2] align vert
    */
    .custom-select:before {
    font-family: $icon-font-name;
    content: $custom-select-icon;
    color: $custom-select-icon-color;
    position: absolute; // [1]
    top: 0; // [1]
    right: 0; // [1]
    z-index: -1; // TODO // ie<10 z-index: 0
    height: $custom-select-height;
    width: $custom-select-height;
    border: $custom-select-border;
    border-left: 0;
    padding: 0.3em;
    text-align: center;
    line-height: 2.3; // [2]
    font-size: $custom-select-icon-size;
    // background-color: $custom-select-background;

    @if($custom-select-enable-overflow-shadow) {
    background: linear-gradient(to right, rgba($custom-select-background, 0) 0%, $custom-select-background $custom-select-overflow-shadow-stop);
    width: $custom-select-height * 1.5;
    text-align: right;
    padding-right: 1em;
    z-index: 5;
    pointer-events: none;
    }
    }

    @each $name, $icon in $custom-select-icons {
    .custom-select--#{$name} {

    &:before {
    content: $icon;
    }
    }
    }

    .custom-select:hover {
    // border-color: #999;
    }

    .select--disabled {
    // opacity: $form-disable-opacity;
    cursor: not-allowed;
    }

    /**
    * [1] spacing for icon
    */
    .custom-select select {
    background: none;
    background-color: transparent !important;
    border: $custom-select-border;
    box-shadow: none;
    color: $custom-select-color;
    display: block;
    line-height: normal;
    margin: 0;
    padding: .5em;
    padding-right: $custom-select-height; // [1]
    width: 100% !important; // overwrite inline style
    height: $custom-select-height;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;

    &:disabled {
    cursor: not-allowed;
    }

    @if($custom-select-enable-overflow-shadow) {
    padding-right: 0;
    }
    }

    .custom-select select::-ms-expand,
    select::-ms-expand {
    display: none; /* to ie 10 */
    }

    .custom-select select:focus {
    outline: none;
    }

    /* little trick for custom select elements in mozilla firefox 17/06/2014 @rodrigoludgero */

    /* pseudo class https://developer.mozilla.org/en-US/docs/Web/CSS/:any */

    @if($custom-select-enable-overflow-shadow == false) {
    :-moz-any(.custom-select):before {
    background-color: $custom-select-background; /* this is necessary for overcome the caret default browser */
    pointer-events: none; /* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events */
    z-index: 1; /* this is necessary for overcome the pseudo element */
    }
    }