mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
Jeff Sagal
dc91310860
* - add autoprefixer - add cssnano - add postcss-loader - remove unused packages * create RTL scss module * add vs__ prefix to open-indicator, extract to module * module for dropdown-toggle * vs__clear module * vs__dropdown-menu module * rename `selected-tag` to `vs__selected` * remove rtl class * remove dropdown class * search-input scss module * move animations to global module * refactor dropdown list items * - spinner slot is now scoped with `loading` variable - move spinner to scss module * apply vs__search class directly to search input: if you're using the slot, you might not want default styles * finish global modules * make RTL a component state * - update component states to use vs-- prefix - rename dropdownClasses to stateClasses * remove unused property * Closes #760 * fix states * more state fixes * rename .close to vs__deselect * - simplify dev.html - start on 'sandbox' development * update build * - update webpack config - move Sandbox to VuePress folder * update external framework version links * assign grid areas, ensure 100% height outside of docs * limit specificity * first pass at assigning variables * assign 'darkest' * remove max-height prop * rename 'component' variables to 'state' * update badges * add deprecation notice to docs * bump travis config * add coveralls coverage reporter * bump netlify config * additional pass pulling up to variables * start converting to SVG icons * middle align action icons * update netlify config * netlify bump * fix travis * fix travis * try lcov * netlify attempt * prune old packages * bump travis config
55 lines
1.2 KiB
SCSS
55 lines
1.2 KiB
SCSS
/**
|
|
Dropdown Toggle
|
|
|
|
The dropdown toggle is the primary wrapper of the component. It
|
|
has two direct descendants: .vs__selected-options, and .vs__actions.
|
|
|
|
.vs__selected-options holds the .vs__selected's as well as the
|
|
main search input.
|
|
|
|
.vs__actions holds the clear button and dropdown toggle.
|
|
*/
|
|
|
|
$border-width: $vs-border-width;
|
|
$border-style: $vs-border-style;
|
|
$border-color: $vs-border-color;
|
|
$border-radius: $vs-border-radius;
|
|
|
|
.vs__dropdown-toggle {
|
|
appearance: none;
|
|
display: flex;
|
|
padding: 0 0 4px 0;
|
|
background: none;
|
|
border: $border-width $border-style $border-color;
|
|
border-radius: $border-radius;
|
|
white-space: normal;
|
|
}
|
|
|
|
.vs__selected-options {
|
|
display: flex;
|
|
flex-basis: 100%;
|
|
flex-grow: 1;
|
|
flex-wrap: wrap;
|
|
padding: 0 2px;
|
|
position: relative;
|
|
}
|
|
|
|
.vs__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4px 6px 0 3px;
|
|
}
|
|
|
|
/* Dropdown Toggle States */
|
|
.vs--searchable .vs__dropdown-toggle {
|
|
cursor: text;
|
|
}
|
|
.vs--unsearchable .vs__dropdown-toggle {
|
|
cursor: pointer;
|
|
}
|
|
.vs--open .vs__dropdown-toggle {
|
|
border-bottom-color: transparent;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|