Permalink
Fetching contributors…
Cannot retrieve contributors at this time
155 lines (132 sloc) 4.04 KB
// @page Pattern Library/Forms
// @name Selects
//
// @description
// Select boxes allow users to choose an option or options from a list of options.
//
// #### Best practices
// * Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.
// * It can be tempting to put many things in a select box for users to choose from. Try to keep the list of options to between 4 and 15 so the user doesn't become overwhelmed with choices.
//
// @state .us-form-select--multiple - Removes the drop down arrow and adjusts the padding of <option> elements. Useful when using <select> elements that have the size="" attribute set to anything higher than 1.
// @state .us-form-select--blocked - Fluid style.
// @state .us-form-select--error - Visual feedback for when the input has an error.
// @state .us-form-select--success - Visual feedback for when success needs to be communicated to the user.
// @state .us-form-select--disabled - Inactive state for select boxes. You may also just add the disabled attribute to the <select> element in order to achieve the same effect.
//
// @markup
// <select class="us-form-select {$modifiers}">
// <option>A select menu</option>
// <option>With lots of options</option>
// <option>And a few more</option>
// </select>
$select-default-color: $c-form-element-border !default;
$select-hover-color: $c-form-element-border-hover !default;
@function select-arrow($color) {
@return url("data:image/svg+xml;charset=utf-8;base64," + base64encode("<svg version='1.1' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='40px' height='6px' viewBox='0 0 40 6'><polygon fill='#{$color}' points='25.3,0 20.3,6 15.3,0 '/></svg>"));
}
@mixin select-background($color, $color--active: false) {
background-image: select-arrow($color);
&:hover,
&:focus {
background-image: select-arrow(if($color--active, $color--active, $color));
}
}
// [deprecated]
.us-form-select-wrap {
position: relative;
display: inline-block;
}
.us-form-select {
@extend %base-form-element;
@include select-background($select-default-color, $select-hover-color);
@include input-sizing();
max-width: 100%;
padding-right: 40px;
cursor: pointer;
background-position: 100% 50%;
background-repeat: no-repeat;
outline: 0;
// [nodoc] Fix for FF < 35 https://gist.github.com/joaocunha/6273016/
@-moz-document url-prefix() {
text-indent: .01px;
text-overflow: "";
-moz-appearance: none;
}
&:focus {
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $c-form-element-text;
}
}
&::-ms-expand {
display: none;
}
@if $media-query-legacy-support {
.ie8 & {
padding: $form-element-base-padding;
}
}
.ie9 & {
padding: $form-element-base-padding;
}
}
.us-form-select-wrap--multiple, // [deprecated]
.us-form-select--multiple,
.us-form-select[multiple],
.us-form-select[size] {
&,
.us-form-select {
height: auto;
overflow: hidden {
x: auto;
y: auto;
};
vertical-align: middle;
cursor: default;
background-image: none;
-webkit-overflow-scrolling: touch;
}
&:hover,
&:focus {
background-image: none;
}
option {
cursor: pointer;
}
&::-webkit-scrollbar {
width: 16px;
height: 16px;
&:window-inactive {
opacity: 0;
}
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .2);
border: 4px solid rgba(0, 0, 0, 0);
border-radius: 8px;
background-clip: padding-box;
}
&::-webkit-scrollbar-corner {
background-color: transparent;
}
}
.us-form-select-wrap--blocked, // [deprecated]
.us-form-select--blocked {
width: 100%;
}
.us-form-select-wrap--disabled, // [deprecated]
.us-form-select--disabled,
.us-form-select:disabled {
&,
.us-form-select {
@include form-element-disabled;
@include select-background($c-form-element-disabled-fg);
}
}
.us-form-select--error {
@extend %base-form-element--error;
}
.us-form-select--success {
@extend %base-form-element--success;
}