Skip to content

Instantly share code, notes, and snippets.

@sorahn

sorahn/SassMeister-input.scss

Created February 6, 2015 23:34
Show Gist options
  • Save sorahn/a7c0a70bf65c5e227fa1 to your computer and use it in GitHub Desktop.
Save sorahn/a7c0a70bf65c5e227fa1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Daryl Roberts created this gist Feb 6, 2015.
    71 changes: 71 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    // ----
    // Sass (v3.3.14)
    // Compass (v1.0.1)
    // ----

    @mixin appearance($var) {
    -webkit-appearance: $var;
    -moz-appearance: $var;
    appearance: $var;
    }

    @mixin clean-select($background: white, $color: black, $height: 30px, $use-font-awesome: true) {
    height: $height;
    position: relative;
    display: inline-block;
    background: $background;

    &::after {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    width: $height;
    height: $height;
    line-height: $height;
    text-align: center;
    pointer-events: none;
    color: $color;
    @if $use-font-awesome {
    content: "\f0d7";
    font-family: FontAwesome;
    }
    @else {
    content: "\0025BC";
    }
    }
    select {
    @include appearance(none);
    border-radius: 0;
    position: relative;
    z-index: 10;
    border: 0;
    line-height: $height;
    height: $height;
    background: transparent;
    padding: 0 $height 0 $height / 2;
    color: $color;
    cursor: pointer;
    &:focus {
    outline: 0;
    border: 0;
    &::-ms-value {
    background: transparent;
    color: $color;
    }
    }
    &:-moz-focusring {
    color: transparent;
    }
    &::-ms-expand {
    display: none;
    }
    }
    option {
    color: black;
    }
    }

    .select {
    @include clean-select(red, white, $use-font-awesome: false);
    }
    51 changes: 51 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    .select {
    height: 30px;
    position: relative;
    display: inline-block;
    background: red;
    }
    .select::after {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    pointer-events: none;
    color: white;
    content: "\0025BC";
    }
    .select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    position: relative;
    z-index: 10;
    border: 0;
    line-height: 30px;
    height: 30px;
    background: transparent;
    padding: 0 30px 0 15px;
    color: white;
    cursor: pointer;
    }
    .select select:focus {
    outline: 0;
    border: 0;
    }
    .select select:focus::-ms-value {
    background: transparent;
    color: white;
    }
    .select select:-moz-focusring {
    color: transparent;
    }
    .select select::-ms-expand {
    display: none;
    }
    .select option {
    color: black;
    }