Created
September 9, 2015 14:26
-
-
Save fuhlig/19b437e73d85bdffc65d to your computer and use it in GitHub Desktop.
custom select
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*------------------------------------*\ | |
| #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 */ | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment