deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-17 21:16:34 +02:00
Code Issues Projects Releases Wiki Activity

More spacing around remove buttons

Browse source
This commit is contained in:
Josh Johnson 2016-08-17 14:32:02 +01:00
parent ad0ea44c83
commit f3bfa847b1
5 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/scripts/dist/choices.min.js vendored
View file

File diff suppressed because one or more lines are too long

3
assets/scripts/src/choices.js
View file

@ -1656,8 +1656,7 @@ export default class Choices {
if (this.config.removeItemButton && this.passedElement.type !== 'select-one') {
return strToEl(`
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : ''} ${!data.disabled ? classNames.itemSelectable : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''} data-deletable>
${data.label}
<button class="${classNames.button}" data-button>Remove item</button>
${data.label}<button class="${classNames.button}" data-button>Remove item</button>
</div>
`);
}

7
assets/styles/css/choices.css
View file

@ -63,11 +63,14 @@
.choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button {
position: relative;
margin: -2px -4px -2px 4px;
padding: 4px 6px;
display: inline-block;
margin-left: 8px;
margin-right: -4px;
padding-left: 16px;
border-left: 1px solid #008fa1;
background-image: url("../../icons//cross.svg");
background-size: 8px;
width: 8px;
line-height: 1; }
.choices__inner {

2
assets/styles/css/choices.min.css vendored
View file

@ -1 +1 @@
.choices{font-size:16px;position:relative;margin-bottom:24px}.choices:last-child{margin-bottom:0}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices:focus{outline:none}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{background-image:url(../../icons//cross-inverse.svg);padding:0;background-size:8px;position:absolute;top:50%;right:15px;margin-top:-10px;margin-right:25px;height:20px;width:20px}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-one]:after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent transparent;border-width:5px;position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;margin:-2px -4px -2px 4px;padding:4px 6px;border-left:1px solid #008fa1;background-image:url(../../icons//cross.svg);background-size:8px;line-height:1}.choices__inner{background-color:#f9f9f9;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}.choices__list--multiple .choices__item.is-highlighted{background-color:#00a5bb;border:1px solid #008fa1}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;overflow:hidden}.choices__list--dropdown.is-active{display:block}.is-open .choices__list--dropdown{border-color:#b7b7b7}.is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item{position:relative;padding:10px;font-size:14px}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable{padding-right:100px}.choices__list--dropdown .choices__item--selectable:after{content:"Press to select";font-size:12px;opacity:0;position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__group .choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__input{background-color:#f9f9f9;font-size:14px;margin-bottom:5px;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:4px 0 4px 2px}.choices__input:focus{outline:0}
.choices{font-size:16px;position:relative;margin-bottom:24px}.choices:last-child{margin-bottom:0}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices:focus{outline:none}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{background-image:url(../../icons//cross-inverse.svg);padding:0;background-size:8px;position:absolute;top:50%;right:15px;margin-top:-10px;margin-right:25px;height:20px;width:20px}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-one]:after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent transparent;border-width:5px;position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin-left:8px;margin-right:-4px;padding-left:16px;border-left:1px solid #008fa1;background-image:url(../../icons//cross.svg);background-size:8px;width:8px;line-height:1}.choices__inner{background-color:#f9f9f9;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}.choices__list--multiple .choices__item.is-highlighted{background-color:#00a5bb;border:1px solid #008fa1}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;overflow:hidden}.choices__list--dropdown.is-active{display:block}.is-open .choices__list--dropdown{border-color:#b7b7b7}.is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item{position:relative;padding:10px;font-size:14px}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable{padding-right:100px}.choices__list--dropdown .choices__item--selectable:after{content:"Press to select";font-size:12px;opacity:0;position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__group .choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__input{background-color:#f9f9f9;font-size:14px;margin-bottom:5px;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:4px 0 4px 2px}.choices__input:focus{outline:0}

41
assets/styles/scss/choices.scss
View file

@ -11,6 +11,8 @@ $choices-keyline-color: #DDDDDD;
$choices-primary-color: #00BCD4;
$choices-disabled-color: #eaeaea;
$choices-button-icon-path: '../../icons/';
$choices-button-dimension: 8px;
$choices-button-offset: 8px;
.choices {
font-size: 16px;
@ -18,9 +20,9 @@ $choices-button-icon-path: '../../icons/';
margin-bottom: $choices-guttering;
&:last-child { margin-bottom: 0; }
&.is-disabled {
.choices__inner, .choices__input {
.choices__inner, .choices__input {
background-color: lighten(#DDDDDD, 5%);
cursor: not-allowed;
cursor: not-allowed;
user-select: none;
}
.choices__item { cursor: not-allowed; }
@ -31,7 +33,7 @@ $choices-button-icon-path: '../../icons/';
.choices[data-type*="select-one"] {
cursor: pointer;
.choices__inner { padding-bottom: 7.5px; }
.choices__input {
.choices__input {
display: block;
width: 100%;
padding: 10px;
@ -52,8 +54,8 @@ $choices-button-icon-path: '../../icons/';
height: 20px;
width: 20px;
}
&.is-open:after {
border-color: transparent transparent $choices-text-color transparent;
&.is-open:after {
border-color: transparent transparent $choices-text-color transparent;
margin-top: -7.5px;
}
&:after {
@ -66,20 +68,23 @@ $choices-button-icon-path: '../../icons/';
position: absolute;
right: 7.5px + 4px;
top: 50%;
margin-top: -2.5px;
margin-top: -2.5px;
pointer-events: none;
}
}
}
.choices[data-type*="select-multiple"], .choices[data-type*="text"] {
.choices__inner { cursor: text; }
.choices__button {
position: relative;
margin: -2px -4px -2px 4px;
padding: 4px 6px;
display: inline-block;
margin-left: $choices-button-offset;
margin-right: -$choices-button-offset/2;
padding-left: $choices-button-offset*2;
border-left: 1px solid darken($choices-primary-color, 10%);
background-image: url($choices-button-icon-path + '/cross.svg');
background-size: 8px;
background-size: $choices-button-dimension;
width: $choices-button-dimension;
line-height: 1;
}
}
@ -125,8 +130,8 @@ $choices-button-icon-path: '../../icons/';
color: #FFFFFF;
word-break: break-all;
&[data-deletable] { padding-right: 5px; }
&.is-highlighted {
background-color: darken($choices-primary-color, 5%);
&.is-highlighted {
background-color: darken($choices-primary-color, 5%);
border: 1px solid darken($choices-primary-color, 10%);
}
.is-disabled & {
@ -182,8 +187,8 @@ $choices-button-icon-path: '../../icons/';
transform: translateY(-50%);
}
}
&.is-highlighted {
background-color: mix(#000000, #FFFFFF, 5%);
&.is-highlighted {
background-color: mix(#000000, #FFFFFF, 5%);
&:after { opacity: .5; }
}
}
@ -191,19 +196,19 @@ $choices-button-icon-path: '../../icons/';
.choices__item { cursor: default; }
.choices__item--selectable { cursor: pointer; }
.choices__item--disabled {
cursor: not-allowed;
.choices__item--disabled {
cursor: not-allowed;
user-select: none;
opacity: .5;
}
.choices__group {
.choices__heading {
.choices__heading {
font-weight: 600;
font-size: 12px;
padding: 10px;
border-bottom: 1px solid lighten($choices-keyline-color, 10%);
color: lighten(#333, 30%);
color: lighten(#333, 30%);
}
}