mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 21:16:34 +02:00
Remove button styling on focus + minor tweaks
This commit is contained in:
Josh Johnson
parent
90e518df78
commit
aee1732873
4
assets/scripts/dist/choices.min.js
vendored
4
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1016,7 +1016,6 @@ export default class Choices {
|
|||
} else if (this.passedElement.type === 'select-one') {
|
||||
// Show dropdown if focus
|
||||
e.preventDefault();
|
||||
console.log('Show 1');
|
||||
this.showDropdown(true);
|
||||
}
|
||||
|
||||
|
|
@ -1103,7 +1102,6 @@ export default class Choices {
|
|||
|
||||
if (canAddItem.response === true) {
|
||||
if (!hasActiveDropdown) {
|
||||
console.log('Show 3');
|
||||
this.showDropdown();
|
||||
}
|
||||
} else if (!canAddItem.notice && hasActiveDropdown) {
|
||||
|
|
@ -1320,7 +1318,7 @@ export default class Choices {
|
|||
this.containerOuter.classList.add(this.config.classNames.focusState);
|
||||
|
||||
if (!this.focusAndHideDropdown && this.canSearch && document.activeElement !== this.input) {
|
||||
this.input.focus();
|
||||
this.showDropdown(true);
|
||||
} else {
|
||||
this.showDropdown();
|
||||
}
|
||||
|
|
@ -1369,6 +1367,7 @@ export default class Choices {
|
|||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||
const hasHighlightedItems = activeItems.some((item) => item.highlighted === true);
|
||||
|
||||
|
||||
switch (this.passedElement.type) {
|
||||
case 'text': {
|
||||
if (target === this.input) {
|
||||
|
|
@ -1382,27 +1381,23 @@ export default class Choices {
|
|||
if (hasActiveDropdown) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case 'select-one': {
|
||||
if (target === this.containerOuter) {
|
||||
if (hasActiveDropdown && this.focusAndHideDropdown && !this.canSearch) {
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
if (hasActiveDropdown && !this.canSearch) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
return;
|
||||
}
|
||||
|
||||
if (target === this.input) {
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
if (hasActiveDropdown) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
return;
|
||||
}
|
||||
|
||||
break;
|
||||
|
|
@ -1418,7 +1413,6 @@ export default class Choices {
|
|||
if (hasHighlightedItems) {
|
||||
this.unhighlightAll();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -42,9 +42,13 @@
|
|||
margin-right: 25px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
opacity: .5; }
|
||||
.choices[data-type*="select-one"] .choices__button:hover {
|
||||
opacity: .5;
|
||||
border-radius: 10em; }
|
||||
.choices[data-type*="select-one"] .choices__button:hover, .choices[data-type*="select-one"] .choices__button:focus {
|
||||
opacity: 1; }
|
||||
.choices[data-type*="select-one"] .choices__button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0px 0px 0px 2px #00BCD4; }
|
||||
.choices[data-type*="select-one"].is-open:after {
|
||||
border-color: transparent transparent #333333 transparent;
|
||||
margin-top: -7.5px; }
|
||||
|
|
|
|||
2
assets/styles/css/choices.min.css
vendored
2
assets/styles/css/choices.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -10,6 +10,7 @@ $choices-text-color: #333333;
|
|||
$choices-keyline-color: #DDDDDD;
|
||||
$choices-primary-color: #00BCD4;
|
||||
$choices-disabled-color: #eaeaea;
|
||||
$choices-highlight-color: $choices-primary-color;
|
||||
$choices-button-icon-path: '../../icons/';
|
||||
$choices-button-dimension: 8px;
|
||||
$choices-button-offset: 8px;
|
||||
|
|
@ -54,7 +55,12 @@ $choices-button-offset: 8px;
|
|||
height: 20px;
|
||||
width: 20px;
|
||||
opacity: .5;
|
||||
&:hover { opacity: 1; }
|
||||
border-radius: 10em;
|
||||
&:hover, &:focus { opacity: 1; }
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0px 0px 0px 2px $choices-highlight-color;
|
||||
}
|
||||
}
|
||||
&.is-open:after {
|
||||
border-color: transparent transparent $choices-text-color transparent;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<p>For all config options, visit the <a href="https://github.com/jshjohnson/Choices">GitHub repo</a>.</p>
|
||||
<hr>
|
||||
<h2>Text inputs</h2>
|
||||
<label for="choices-1">Limited to 5 values</label>
|
||||
<label for="choices-1">Limited to 5 values with remove button</label>
|
||||
<input class="form-control" id="choices-1" type="text" value="preset-1,preset-2" placeholder="Enter something">
|
||||
|
||||
<label for="choices-2">Unique values only, no pasting</label>
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
<label for="choices-12">Options from remote source (Fetch API)</label>
|
||||
<select class="form-control" name="choices-12" id="choices-12" placeholder="Pick an Arctic Monkeys record"></select>
|
||||
|
||||
<label for="choices-14">Options from remote source (XHR)</label>
|
||||
<label for="choices-14">Options from remote source (XHR) & remove button</label>
|
||||
<select class="form-control" name="choices-14" id="choices-14" placeholder="Pick a Smiths record"></select>
|
||||
|
||||
<label for="choices-13">Option groups</label>
|
||||
|
|
@ -157,7 +157,7 @@
|
|||
</select>
|
||||
|
||||
<label for="choices-15">Options added via config with no search</label>
|
||||
<select class="form-control" name="choices-15" id="choices-15" placeholder="This is a placeholder">
|
||||
<select class="form-control" name="choices-15" id="choices-15">
|
||||
<option value="0">Zero</option>
|
||||
</select>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue