maj du plugin vue next select
This commit is contained in:
parent
912fca76e1
commit
e1632bb86d
2 changed files with 1831 additions and 2 deletions
|
|
@ -1 +1,230 @@
|
|||
@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[data-is-focusing=true]:not([data-visible-length='0']){border-bottom-left-radius:0;border-bottom-right-radius:0}.vue-select.disabled{background-color:rgba(239,239,239)}.vue-dropdown[data-removable=false] .vue-dropdown-item.selected:hover,.vue-select.disabled *,.vue-select.disabled 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-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{align-items:center;justify-content:center;background-color:#999;border-radius:4px;padding:0 4px;font-size:.8rem}.vue-tag{display:none;list-style-type:none;margin:2px;min-height:1rem}.vue-tag.selected{display:flex}.vue-dropdown,.vue-input{min-width:0;box-sizing:border-box}.vue-input,.vue-input>input{border:0;outline:0;width:100%}.vue-input{display:flex;align-items:center;border-radius:4px;max-width:100%;padding:4px}.vue-input>input{min-width:0;font-size:.8rem;padding:0}.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{position:absolute;background-color:#fff;z-index:1;max-height:300px;overflow-y:auto;width:inherit;left:-1px;margin:0;padding:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border:1px solid #999;list-style-type:none}.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:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.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}
|
||||
@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 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