Skip to content

Instantly share code, notes, and snippets.

@markcarrrr
Last active June 21, 2016 12:37
Show Gist options
  • Save markcarrrr/b911d74973c04336badcb305c61ab604 to your computer and use it in GitHub Desktop.
Save markcarrrr/b911d74973c04336badcb305c61ab604 to your computer and use it in GitHub Desktop.
.select2-selection__choice:first-child .select2-selection__choice__remove,
.select2-search--hide,
.select2-search {
display: none;
}
.select2-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute;
}
.select2-selection__choice__remove {
height: 30px;
line-height: 30px;
position: absolute;
right: 0;
width: 30px;
}
.select2-container {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: auto !important; // Overwrite style set with JS
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
margin: 0;
}
a {
cursor: pointer;
}
.select2-selection {
background-color: #aaa;
color: #000;
display: block;
padding: 9px 36px;
position: relative;
&:after,
&:before {
content: '';
height: 0;
position: absolute;
right: 10px;
width: 0;
}
&:after {
border-bottom: 5px solid $neutral-3;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 35%;
}
&:before {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid $neutral-3;
top: 60%;
}
}
label & {
span {
padding: 0;
}
}
}
.select2-dropdown {
background-color: #fff;
border: 1px solid #aaa;
display: block;
margin-top: -1px;
max-height: 320px;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: auto;
width: auto !important; // Overwrite style set with JS
}
.select2-results {
display: block;
li {
cursor: pointer;
padding: 5px 20px;
-webkit-touch-callout: none;
white-space: nowrap;
word-wrap: break-word;
&.selected,
&:hover,
&:focus {
@include linear-gradient($neutral-6, $neutral-7);
}
&[aria-disabled] {
color: #ccc;
cursor: default;
&:hover,
&:focus {
background: 0;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment