Last active
December 19, 2015 14:29
-
-
Save alekseyg/5969701 to your computer and use it in GitHub Desktop.
This file contains 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
form.awesome { | |
// Defaults for custom inputs | |
.custom { | |
display: inline-block; | |
width: 16px; | |
height: 16px; | |
position: relative; | |
top: 2px; | |
border: solid 1px $custom-form-border-color; | |
background: $custom-form-bg; | |
} | |
// Custom radio button and checkbox | |
input[type="radio"], | |
input[type="checkbox"] { | |
position: absolute; | |
left: -100000px; | |
+ label { | |
&:before { | |
@extend .custom; | |
content: ""; | |
margin-right: 0.5em; | |
} | |
} | |
} | |
input[type="radio"] { | |
+ label { | |
position: relative; | |
&:before { | |
@include radius(1000px); | |
} | |
} | |
&:checked { | |
+ label:after { | |
content: ""; | |
display: block; | |
width: 8px; | |
height: 8px; | |
@include radius(1000px); | |
background: $custom-form-check-color; | |
position: absolute; | |
top: 6px; | |
#{$default-float}: 4px; | |
} | |
} | |
} | |
input[type="checkbox"] { | |
+ label:before { | |
content: "\00d7"; | |
display: inline-block; | |
line-height: 0.8; | |
text-align: center; | |
top: 0; | |
#{$default-float}: 0; | |
font-size: 16px; | |
font-weight: normal; | |
color: $custom-form-bg; | |
} | |
&:checked { | |
+ label:before { | |
color: $custom-form-check-color; | |
} | |
} | |
} | |
// Custom select box | |
.dropdown { | |
display: block; | |
position: relative; | |
top: 0; | |
height: $custom-select-height; | |
margin-bottom: $custom-select-margin-bottom; | |
margin-top: 0px; | |
padding: 0px; | |
width: 100%; | |
background: $custom-dropdown-bg; | |
background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%); | |
background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%); | |
background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%); | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
font-size: emCalc(14px); | |
vertical-align: top; | |
.selector { | |
cursor:default; | |
position: absolute; | |
width: $form-spacing * 1.5; | |
height: $custom-select-height - emCalc(2px); | |
display: block; | |
#{$opposite-direction}: 0; | |
top: 0; | |
// Add background to selector to hide the ugly little non-WebKit dropdown arrow | |
background: $custom-dropdown-bg; | |
background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%); | |
background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%); | |
background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%); | |
// Remove the background in WebKit since WebKit doesn't render the ugly arrow | |
@media screen and (-webkit-min-device-pixel-ratio:0) { | |
background: none; | |
} | |
// Pass clicks through the selector to the select element in WebKit and Mozilla | |
pointer-events: none; | |
&:after { | |
content: ""; | |
display: block; | |
@include css-triangle(5px, $custom-select-triangle-color, top); | |
position: absolute; | |
left: 0; | |
top: 50%; | |
margin-top: -3px; | |
} | |
} | |
&:hover, | |
:focus + { | |
.selector { | |
&:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); } | |
} | |
} | |
:disabled { | |
color: $custom-select-disabled-color; | |
&:hover { | |
background: transparent; | |
color: $custom-select-disabled-color; | |
&:after { display: none; } | |
} | |
} | |
select { | |
// Make sure we're doing sizing in a sane manner | |
@include box-sizing(border-box); | |
// Set appearance to none in order to style the select | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
// Reset the form element | |
margin: 0; | |
padding: 0; | |
font-size: 100%; | |
line-height: inherit; | |
font-family: inherit; | |
vertical-align: middle; | |
// Get rid of backgrounds and borders | |
border: none; | |
background: none; | |
// Modified version of Foundation's style for the selected item display | |
color: $input-font-color; | |
line-height: emCalc(24px); | |
height: $custom-select-height - emCalc(2px); | |
padding: ($custom-select-height - emCalc(24px)) / 2 | |
$form-spacing / 2; | |
padding-right: 0; | |
// Make sure text does not leak under the dropdown arrow in WebKit | |
@media screen and (-webkit-min-device-pixel-ratio:0) { | |
padding-right: 2em; | |
} | |
} | |
} | |
} | |
// Make things look sane in IE | |
.lt-ie9 form.awesome { | |
input[type="radio"], | |
input[type="checkbox"] { | |
position: static; | |
+ label:before { | |
content: none; | |
} | |
} | |
} | |
.lt-ie8 form.awesome { | |
.custom.dropdown { | |
overflow: hidden; | |
.selector { | |
display: none; | |
} | |
select { | |
margin: -2px; | |
height: $custom-select-height + emCalc(4px); | |
} | |
} | |
} |
This file contains 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
wrapSelects = -> | |
$('form.awesome select:not(.is-wrapped)') | |
.addClass('is-wrapped') | |
.wrap('<div class="custom dropdown select" />') | |
.after('<span class="selector"></span>') | |
$(wrapSelects) |
You're welcome. Thanks for the nice comment!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for documenting this! Really, really helpful.