maj de la lib vue-next-select
This commit is contained in:
parent
764108f7d3
commit
fd148ce52b
2 changed files with 2 additions and 1831 deletions
|
|
@ -1,230 +1 @@
|
||||||
@keyframes loading {
|
@keyframes loading{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.icon.delete{display:flex;justify-content:center;align-items:center;padding:0;margin:0;border:0;background:0 0;height:8px;width:8px;min-height:8px;min-width:8px;max-height:8px;max-width:8px;cursor:pointer}.icon.arrow-downward{color:#999;border-style:solid;border-width:4px 4px 0;border-color:#999 transparent transparent;content:'';transition:transform .2s linear;cursor:pointer}.icon.arrow-downward.active{transform:rotate(180deg)}.vue-select{position:relative;display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;width:150px;border-radius:4px;border:1px solid #999;box-sizing:border-box;outline:0}.vue-select[aria-disabled=true]{background-color:rgba(239,239,239)}.vue-dropdown[data-removable=false] .vue-dropdown-item.selected:hover,.vue-select[aria-disabled=true] *,.vue-select[aria-disabled=true] input,.vue-tags[data-removable=false] .vue-tag.selected img:hover{cursor:not-allowed}.vue-select-header{display:flex;width:100%;align-items:center;justify-content:space-between}.vue-select-header .icon.arrow-downward,.vue-select-header .icon.loading,.vue-select-input-wrapper .icon.loading,.vue-tag span{margin-right:4px}.vue-tags{display:flex;flex-wrap:wrap;margin:0;padding:2px;min-height:calc(1rem + 4px);user-select:none}.vue-tags.collapsed{flex-wrap:nowrap;overflow:auto}.vue-tag,.vue-tag.selected{justify-content:center;background-color:#999;padding:0 4px;font-size:.8rem}.vue-tag{display:none;align-items:center;list-style-type:none;border-radius:4px;margin:2px;min-height:1rem}.vue-tag.selected{display:flex}.vue-select-input-wrapper{position:relative;display:flex;width:100%;align-items:center;justify-content:space-between}.vue-input,.vue-tag.selected{align-items:center;border-radius:4px}.vue-input{display:inline-flex;border:0;outline:0;max-width:100%;min-width:0;width:100%;box-sizing:border-box;padding:4px}.vue-select[data-is-focusing=false][aria-disabled=false] .vue-input input,input[readonly]{cursor:default}.vue-dropdown,.vue-input input{width:100%;min-width:0;padding:0}.vue-input input{border:0;outline:0;font-size:.8rem}.vue-input input[disabled]{background-color:rgba(239,239,239)}.vue-input input[readonly],.vue-select-header .vue-input input[disabled]{background-color:unset}.vue-dropdown{display:none;position:absolute;background-color:#fff;z-index:1;overflow-y:auto;margin:0;left:-1px;box-sizing:content-box;border:1px solid #999;list-style-type:none}.vue-select[aria-expanded=true] .vue-dropdown{display:unset}.vue-dropdown[data-visible-length='0']{border:0}.vue-dropdown-item{list-style-type:none;padding:4px;cursor:pointer;min-height:1rem}.vue-dropdown-item.highlighted{background-color:#41b883}.vue-dropdown-item.disabled{background-color:rgba(239,239,239);cursor:not-allowed}.vue-dropdown-item.selected{background-color:#f3f3f3}.vue-dropdown-item.selected.highlighted{background-color:#ff6a6a}.vue-dropdown[data-addable=false][data-multiple=true] .vue-dropdown-item:not(.selected):hover{cursor:not-allowed}.icon.loading{display:inline-block;position:relative;width:8px;min-width:8px;height:8px;min-height:8px}.icon.loading div{box-sizing:border-box;display:block;position:absolute;border:1px solid #999;width:8px;height:8px;border-radius:50%;animation:loading 1s cubic-bezier(.5,0,.5,1) infinite;border-color:#999 transparent transparent}.icon.loading div:nth-child(1){animation-delay:-.08s}.icon.loading div:nth-child(2){animation-delay:-.16s}.inline-flex{display:inline-flex}.vue-select[aria-expanded=true].direction-bottom{border-bottom-left-radius:0;border-bottom-right-radius:0}.vue-select[aria-expanded=true].direction-top{border-top-left-radius:0;border-top-right-radius:0}.vue-select.direction-top .vue-dropdown{bottom:100%;border-top-left-radius:3px;border-top-right-radius:3px}.vue-select.direction-bottom .vue-dropdown{top:100%;border-bottom-left-radius:3px;border-bottom-right-radius:3px}
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.icon.delete {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
background: 0 0;
|
|
||||||
height: 8px;
|
|
||||||
width: 8px;
|
|
||||||
min-height: 8px;
|
|
||||||
min-width: 8px;
|
|
||||||
max-height: 8px;
|
|
||||||
max-width: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.icon.arrow-downward {
|
|
||||||
color: #999;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 4px 4px 0;
|
|
||||||
border-color: #999 transparent transparent;
|
|
||||||
content: '';
|
|
||||||
transition: transform 0.2s linear;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.icon.arrow-downward.active {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
.vue-select {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 150px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #999;
|
|
||||||
box-sizing: border-box;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
.vue-select[aria-disabled='true'] {
|
|
||||||
background-color: rgba(239, 239, 239);
|
|
||||||
}
|
|
||||||
.vue-dropdown[data-removable='false'] .vue-dropdown-item.selected:hover,
|
|
||||||
.vue-select[aria-disabled='true'] *,
|
|
||||||
.vue-select[aria-disabled='true'] input,
|
|
||||||
.vue-tags[data-removable='false'] .vue-tag.selected img:hover {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.vue-select-header {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.vue-select-header .icon.arrow-downward,
|
|
||||||
.vue-select-header .icon.loading,
|
|
||||||
.vue-select-input-wrapper .icon.loading,
|
|
||||||
.vue-tag span {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
.vue-tags {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 0;
|
|
||||||
padding: 2px;
|
|
||||||
min-height: calc(1rem + 4px);
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.vue-tags.collapsed {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.vue-tag,
|
|
||||||
.vue-tag.selected {
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #999;
|
|
||||||
padding: 0 4px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
.vue-tag {
|
|
||||||
display: none;
|
|
||||||
align-items: center;
|
|
||||||
list-style-type: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin: 2px;
|
|
||||||
min-height: 1rem;
|
|
||||||
}
|
|
||||||
.vue-tag.selected {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.vue-select-input-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.vue-input,
|
|
||||||
.vue-tag.selected {
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.vue-input {
|
|
||||||
display: inline-flex;
|
|
||||||
border: 0;
|
|
||||||
outline: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
.vue-select[data-is-focusing='false'][aria-disabled='false'] .vue-input input,
|
|
||||||
input[readonly] {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
.vue-dropdown,
|
|
||||||
.vue-input input {
|
|
||||||
width: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.vue-input input {
|
|
||||||
border: 0;
|
|
||||||
outline: 0;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
.vue-input input[disabled] {
|
|
||||||
background-color: rgba(239, 239, 239);
|
|
||||||
}
|
|
||||||
.vue-input input[readonly],
|
|
||||||
.vue-select-header .vue-input input[disabled] {
|
|
||||||
background-color: unset;
|
|
||||||
}
|
|
||||||
.vue-dropdown {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
background-color: #fff;
|
|
||||||
z-index: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
margin: 0;
|
|
||||||
left: -1px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
border: 1px solid #999;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
.vue-select[aria-expanded='true'] .vue-dropdown {
|
|
||||||
display: unset;
|
|
||||||
}
|
|
||||||
.vue-dropdown[data-visible-length='0'] {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
.vue-dropdown-item {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 1rem;
|
|
||||||
}
|
|
||||||
.vue-dropdown-item.highlighted {
|
|
||||||
background-color: #41b883;
|
|
||||||
}
|
|
||||||
.vue-dropdown-item.disabled {
|
|
||||||
background-color: rgba(239, 239, 239);
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.vue-dropdown-item.selected {
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
}
|
|
||||||
.vue-dropdown-item.selected.highlighted {
|
|
||||||
background-color: #ff6a6a;
|
|
||||||
}
|
|
||||||
.vue-dropdown[data-addable='false'][data-multiple='true'] .vue-dropdown-item:not(.selected):hover {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.icon.loading {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
width: 8px;
|
|
||||||
min-width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
min-height: 8px;
|
|
||||||
}
|
|
||||||
.icon.loading div {
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
border: 1px solid #999;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: loading 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
||||||
border-color: #999 transparent transparent;
|
|
||||||
}
|
|
||||||
.icon.loading div:nth-child(1) {
|
|
||||||
animation-delay: -0.08s;
|
|
||||||
}
|
|
||||||
.icon.loading div:nth-child(2) {
|
|
||||||
animation-delay: -0.16s;
|
|
||||||
}
|
|
||||||
.inline-flex {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
.vue-select[aria-expanded='true'].direction-bottom {
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
.vue-select[aria-expanded='true'].direction-top {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
.vue-select.direction-top .vue-dropdown {
|
|
||||||
bottom: 100%;
|
|
||||||
border-top-left-radius: 3px;
|
|
||||||
border-top-right-radius: 3px;
|
|
||||||
}
|
|
||||||
.vue-select.direction-bottom .vue-dropdown {
|
|
||||||
top: 100%;
|
|
||||||
border-bottom-left-radius: 3px;
|
|
||||||
border-bottom-right-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue