mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 08:52:19 +02:00
Remove button styling on focus + minor tweaks
This commit is contained in:
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') {
|
} else if (this.passedElement.type === 'select-one') {
|
||||||
// Show dropdown if focus
|
// Show dropdown if focus
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log('Show 1');
|
|
||||||
this.showDropdown(true);
|
this.showDropdown(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1103,7 +1102,6 @@ export default class Choices {
|
||||||
|
|
||||||
if (canAddItem.response === true) {
|
if (canAddItem.response === true) {
|
||||||
if (!hasActiveDropdown) {
|
if (!hasActiveDropdown) {
|
||||||
console.log('Show 3');
|
|
||||||
this.showDropdown();
|
this.showDropdown();
|
||||||
}
|
}
|
||||||
} else if (!canAddItem.notice && hasActiveDropdown) {
|
} else if (!canAddItem.notice && hasActiveDropdown) {
|
||||||
|
@ -1320,7 +1318,7 @@ export default class Choices {
|
||||||
this.containerOuter.classList.add(this.config.classNames.focusState);
|
this.containerOuter.classList.add(this.config.classNames.focusState);
|
||||||
|
|
||||||
if (!this.focusAndHideDropdown && this.canSearch && document.activeElement !== this.input) {
|
if (!this.focusAndHideDropdown && this.canSearch && document.activeElement !== this.input) {
|
||||||
this.input.focus();
|
this.showDropdown(true);
|
||||||
} else {
|
} else {
|
||||||
this.showDropdown();
|
this.showDropdown();
|
||||||
}
|
}
|
||||||
|
@ -1369,6 +1367,7 @@ export default class Choices {
|
||||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||||
const hasHighlightedItems = activeItems.some((item) => item.highlighted === true);
|
const hasHighlightedItems = activeItems.some((item) => item.highlighted === true);
|
||||||
|
|
||||||
|
|
||||||
switch (this.passedElement.type) {
|
switch (this.passedElement.type) {
|
||||||
case 'text': {
|
case 'text': {
|
||||||
if (target === this.input) {
|
if (target === this.input) {
|
||||||
|
@ -1382,27 +1381,23 @@ export default class Choices {
|
||||||
if (hasActiveDropdown) {
|
if (hasActiveDropdown) {
|
||||||
this.hideDropdown();
|
this.hideDropdown();
|
||||||
}
|
}
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'select-one': {
|
case 'select-one': {
|
||||||
if (target === this.containerOuter) {
|
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.hideDropdown();
|
||||||
}
|
}
|
||||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (target === this.input) {
|
if (target === this.input) {
|
||||||
|
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||||
if (hasActiveDropdown) {
|
if (hasActiveDropdown) {
|
||||||
this.hideDropdown();
|
this.hideDropdown();
|
||||||
}
|
}
|
||||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
@ -1418,7 +1413,6 @@ export default class Choices {
|
||||||
if (hasHighlightedItems) {
|
if (hasHighlightedItems) {
|
||||||
this.unhighlightAll();
|
this.unhighlightAll();
|
||||||
}
|
}
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -42,9 +42,13 @@
|
||||||
margin-right: 25px;
|
margin-right: 25px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
opacity: .5; }
|
opacity: .5;
|
||||||
.choices[data-type*="select-one"] .choices__button:hover {
|
border-radius: 10em; }
|
||||||
|
.choices[data-type*="select-one"] .choices__button:hover, .choices[data-type*="select-one"] .choices__button:focus {
|
||||||
opacity: 1; }
|
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 {
|
.choices[data-type*="select-one"].is-open:after {
|
||||||
border-color: transparent transparent #333333 transparent;
|
border-color: transparent transparent #333333 transparent;
|
||||||
margin-top: -7.5px; }
|
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-keyline-color: #DDDDDD;
|
||||||
$choices-primary-color: #00BCD4;
|
$choices-primary-color: #00BCD4;
|
||||||
$choices-disabled-color: #eaeaea;
|
$choices-disabled-color: #eaeaea;
|
||||||
|
$choices-highlight-color: $choices-primary-color;
|
||||||
$choices-button-icon-path: '../../icons/';
|
$choices-button-icon-path: '../../icons/';
|
||||||
$choices-button-dimension: 8px;
|
$choices-button-dimension: 8px;
|
||||||
$choices-button-offset: 8px;
|
$choices-button-offset: 8px;
|
||||||
|
@ -54,7 +55,12 @@ $choices-button-offset: 8px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
opacity: .5;
|
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 {
|
&.is-open:after {
|
||||||
border-color: transparent transparent $choices-text-color transparent;
|
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>
|
<p>For all config options, visit the <a href="https://github.com/jshjohnson/Choices">GitHub repo</a>.</p>
|
||||||
<hr>
|
<hr>
|
||||||
<h2>Text inputs</h2>
|
<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">
|
<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>
|
<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>
|
<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>
|
<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>
|
<select class="form-control" name="choices-14" id="choices-14" placeholder="Pick a Smiths record"></select>
|
||||||
|
|
||||||
<label for="choices-13">Option groups</label>
|
<label for="choices-13">Option groups</label>
|
||||||
|
@ -157,7 +157,7 @@
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="choices-15">Options added via config with no search</label>
|
<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>
|
<option value="0">Zero</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue