+@charset "UTF-8";\r
+\r
:root{\r
--tagify-dd-color-primary:rgb(53,149,246);\r
--tagify-dd-bg-color:white\r
\r
.tagify{\r
--tags-border-color:#DDD;\r
+ --tags-disabled-bg:#F1F1F1;\r
+ --tags-hover-border-color:#CCC;\r
+ --tags-focus-border-color:#3595f6;\r
--tag-bg:#E5E5E5;\r
--tag-hover:#D3E2E2;\r
--tag-text-color:black;\r
--tag-invalid-color:#D39494;\r
--tag-invalid-bg:rgba(211, 148, 148, 0.5);\r
--tag-remove-bg:rgba(211, 148, 148, 0.3);\r
+ --tag-remove-btn-color:black;\r
--tag-remove-btn-bg:none;\r
--tag-remove-btn-bg--hover:#c77777;\r
+ --input-color:inherit;\r
--tag--min-width:1ch;\r
--tag--max-width:auto;\r
- --tag-hide-transition:.3s;\r
+ --tag-hide-transition:0.3s;\r
+ --placeholder-color:rgba(0, 0, 0, 0.4);\r
+ --placeholder-color-focus:rgba(0, 0, 0, 0.25);\r
--loader-size:.8em;\r
+ --readonly-striped:1;\r
display:flex;\r
align-items:flex-start;\r
flex-wrap:wrap;\r
border:1px solid #ddd;\r
border:1px solid var(--tags-border-color);\r
padding:0;\r
- line-height:1.1;\r
+ line-height:0;\r
cursor:text;\r
- outline:0;\r
- position:relative;\r
+ outline:0;position:relative;\r
+ box-sizing:border-box;\r
transition:.1s\r
}\r
\r
@keyframes tags--bump{\r
- 30%{transform:scale(1.2)}\r
+ 30%{\r
+ transform:scale(1.2)\r
+ }\r
}\r
+\r
@keyframes rotateLoader{\r
- to{transform:rotate(1turn)}\r
+ to{\r
+ transform:rotate(1turn)\r
+ }\r
}\r
\r
.tagify:hover{\r
- border-color:#ccc\r
+ border-color:#ccc;\r
+ border-color:var(--tags-hover-border-color)\r
}\r
- \r
+\r
.tagify.tagify--focus{\r
transition:0s;\r
- border-color:#3595f6\r
+ border-color:#3595f6;\r
+ border-color:var(--tags-focus-border-color)\r
}\r
\r
-.tagify[readonly]{\r
+.tagify[disabled]{\r
+ background:var(--tags-disabled-bg);\r
+ filter:saturate(0);\r
+ opacity:.5;\r
+ pointer-events:none\r
+}\r
+ \r
+.tagify[readonly].tagify--select{\r
+ pointer-events:none\r
+}\r
+\r
+.tagify[readonly]:not(.tagify--mix):not(.tagify--select){\r
cursor:default\r
}\r
\r
-.tagify[readonly]>\r
-.tagify__input{\r
+.tagify[readonly]:not(.tagify--mix):not(.tagify--select)>.tagify__input{\r
visibility:hidden;\r
width:0;\r
margin:5px 0\r
}\r
\r
-.tagify[readonly] \r
-.tagify__tag__removeBtn{\r
- display:none\r
-}\r
-\r
-.tagify[readonly] \r
+.tagify[readonly]:not(.tagify--mix):not(.tagify--select) \r
.tagify__tag>div{\r
padding:.3em .5em;\r
padding:var(--tag-pad)\r
}\r
\r
-.tagify[readonly] \r
+.tagify[readonly]:not(.tagify--mix):not(.tagify--select) \r
.tagify__tag>div::before{\r
- background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,\r
- var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;\r
- box-shadow:none;\r
- filter:brightness(.95)\r
+ animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused\r
+}\r
+\r
+@keyframes readonlyStyles{\r
+ 0%{\r
+ background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;\r
+ box-shadow:none;\r
+ filter:brightness(.95)\r
+ }\r
+}\r
+\r
+.tagify[readonly]\r
+.tagify__tag__removeBtn{\r
+ display:none\r
+}\r
+ \r
+.tagify--loading \r
+.tagify__input>br:last-child{\r
+ display:none\r
}\r
\r
.tagify--loading \r
\r
.tagify--loading \r
.tagify__input::after{\r
- content:'';\r
+ content:"";\r
vertical-align:middle;\r
- margin:-2px 0 -2px .5em;\r
opacity:1;\r
width:.7em;\r
height:.7em;\r
border:3px solid;\r
border-color:#eee #bbb #888 transparent;\r
border-radius:50%;\r
- animation:rotateLoader .4s infinite linear\r
+ animation:rotateLoader .4s infinite linear;\r
+ content:""!important;\r
+ margin:-2px 0 -2px .5em\r
}\r
-\r
+ \r
.tagify--loading \r
.tagify__input:empty::after{\r
margin-left:0\r
}\r
-\r
-.tagify+input,\r
\r
-.tagify+textarea{\r
- display:none!important\r
+.tagify+input,.tagify+textarea{\r
+ position:absolute!important;\r
+ left:-9999em!important;\r
+ transform:scale(0)!important\r
}\r
-\r
+ \r
.tagify__tag{\r
display:inline-flex;\r
align-items:center;\r
position:relative;\r
z-index:1;\r
outline:0;\r
+ line-height:normal;\r
cursor:default;\r
transition:.13s ease-out\r
}\r
-\r
+ \r
.tagify__tag>div{\r
vertical-align:top;\r
box-sizing:border-box;\r
max-width:100%;\r
padding:.3em .5em;\r
- padding:var(--tag-pad);\r
+ padding:var(--tag-pad,.3em .5em);\r
color:#000;\r
- color:var(--tag-text-color);\r
+ color:var(--tag-text-color,#000);\r
line-height:inherit;\r
border-radius:3px;\r
- -webkit-user-select:none;\r
- user-select:none;\r
+ white-space:nowrap;\r
transition:.13s ease-out\r
}\r
-\r
+ \r
.tagify__tag>div>*{\r
- white-space:nowrap;\r
+ white-space:pre-wrap;\r
overflow:hidden;\r
text-overflow:ellipsis;\r
display:inline-block;\r
vertical-align:top;\r
- min-width:var(--tag--min-width);\r
- max-width:var(--tag--max-width);\r
+ min-width:1ch;\r
+ max-width:auto;\r
+ min-width:var(--tag--min-width,1ch);\r
+ max-width:var(--tag--max-width,auto);\r
transition:.8s ease,.1s color\r
}\r
\r
}\r
\r
.tagify__tag>div::before{\r
- content:'';\r
+ content:"";\r
position:absolute;\r
border-radius:inherit;\r
- left:0;top:0;\r
+ left:0;\r
+ top:0;\r
right:0;\r
bottom:0;\r
z-index:-1;\r
transition:120ms ease;\r
animation:tags--bump .3s ease-out 1;\r
box-shadow:0 0 0 1.1em #e5e5e5 inset;\r
- box-shadow:0 0 0 calc(var(--tag-inset-shadow-size)) var(--tag-bg) inset\r
+ box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-bg,#e5e5e5) inset\r
}\r
\r
-.tagify__tag:hover:not([readonly]) \r
-div::before{\r
+.tagify__tag:focus div::before,.tagify__tag:hover:not([readonly]) div::before{\r
top:-2px;\r
right:-2px;\r
bottom:-2px;\r
left:-2px;\r
box-shadow:0 0 0 1.1em #d3e2e2 inset;\r
- box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-hover) inset\r
+ box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-hover,#d3e2e2) inset\r
+}\r
+\r
+.tagify__tag--loading{\r
+ pointer-events:none\r
+}\r
+\r
+.tagify__tag--loading \r
+.tagify__tag__removeBtn{\r
+ display:none\r
+}\r
+\r
+.tagify__tag--loading::after{\r
+ --loader-size:.4em;\r
+ content:"";\r
+ vertical-align:middle;\r
+ opacity:1;\r
+ width:.7em;\r
+ height:.7em;\r
+ width:var(--loader-size);\r
+ height:var(--loader-size);\r
+ border:3px solid;\r
+ border-color:#eee #bbb #888 transparent;\r
+ border-radius:50%;\r
+ animation:rotateLoader .4s infinite linear;\r
+ margin:0 .5em 0 -.1em\r
}\r
\r
-.tagify__tag\r
-.tagify--noAnim{\r
+.tagify__tag--flash div::before{\r
animation:none\r
}\r
\r
-.tagify__tag\r
-.tagify--hide{\r
- width: 0!important;\r
- padding-left: 0;\r
- padding-right: 0;\r
- margin-left: 0;\r
- margin-right: 0;\r
- opacity: 0;\r
- transform: scale(0);\r
- transition: .3s;\r
- transition: var(--tag-hide-transition);\r
- pointer-events: none\r
+.tagify__tag--hide{\r
+ width:0!important;\r
+ padding-left:0;\r
+ padding-right:0;\r
+ margin-left:0;\r
+ margin-right:0;\r
+ opacity:0;\r
+ transform:scale(0);\r
+ transition:.3s;\r
+ transition:var(--tag-hide-transition,.3s);\r
+ pointer-events:none\r
}\r
\r
-.tagify__tag\r
-.tagify--mark div::before{\r
- animation: none\r
+.tagify__tag--hide>div>*{\r
+ white-space:nowrap\r
}\r
\r
-.tagify__tag\r
-.tagify--notAllowed div>span{\r
- opacity: .5\r
+.tagify__tag.tagify--noAnim>div::before{\r
+ animation:none\r
}\r
\r
-.tagify__tag\r
-.tagify--notAllowed div::before{\r
- box-shadow: 0 0 0 1.1em rgba(211,148,148,.5) inset!important;\r
- box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-invalid-bg) inset!important;\r
- transition: .2s\r
+.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div>span{\r
+ opacity:.5\r
+}\r
+\r
+.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before{\r
+ box-shadow:0 0 0 1.1em rgba(211,148,148,.5) inset!important;\r
+ box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) \r
+ var(--tag-invalid-bg,rgba(211,148,148,.5)) inset!important;\r
+ transition:.2s\r
}\r
\r
.tagify__tag[readonly] \r
.tagify__tag__removeBtn{\r
- display: none\r
+ display:none\r
}\r
\r
.tagify__tag[readonly]>div::before{\r
- background: linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,\r
- var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;\r
- box-shadow: none;\r
- filter: brightness(.95)\r
+ animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused\r
+}\r
+ \r
+@keyframes readonlyStyles{\r
+ 0%{\r
+ background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;\r
+ box-shadow:none;\r
+ filter:brightness(.95)\r
+ }\r
}\r
\r
.tagify__tag--editable>div{\r
color:#000;\r
- color: var(--tag-text-color--edit)\r
+ color:var(--tag-text-color--edit,#000)\r
}\r
-\r
+ \r
.tagify__tag--editable>div::before{\r
- box-shadow: 0 0 0 2px #d3e2e2 inset!important;\r
- box-shadow: 0 0 0 2px var(--tag-hover) inset!important\r
+ box-shadow:0 0 0 2px #d3e2e2 inset!important;\r
+ box-shadow:0 0 0 2px var(--tag-hover,#d3e2e2) inset!important\r
+}\r
+ \r
+.tagify__tag--editable>.tagify__tag__removeBtn{\r
+ pointer-events:none\r
}\r
\r
-.tagify__tag--editable\r
-.tagify--invalid>div::before{\r
- box-shadow: 0 0 0 2px #d39494 inset!important;\r
- box-shadow: 0 0 0 2px var(--tag-invalid-color) inset!important\r
+.tagify__tag--editable>.tagify__tag__removeBtn::after{\r
+ opacity:0;\r
+ transform:translateX(100%) translateX(5px)\r
+}\r
+ \r
+.tagify__tag--editable.tagify--invalid>div::before{\r
+ box-shadow:0 0 0 2px #d39494 inset!important;\r
+ box-shadow:0 0 0 2px var(--tag-invalid-color,#d39494) inset!important\r
}\r
\r
.tagify__tag__removeBtn{\r
order:5;\r
display:inline-flex;\r
- align-items: center;\r
- justify-content: center;\r
- border-radius: 50px;\r
- cursor: pointer;\r
- font: 14px Serif;\r
- background: 0 0;\r
- background: var(--tag-remove-btn-bg);\r
+ align-items:center;\r
+ justify-content:center;\r
+ border-radius:50px;\r
+ cursor:pointer;\r
+ font:14px/1 Arial;\r
+ background:0 0;\r
+ background:var(--tag-remove-btn-bg,none);\r
color:#000;\r
- color: var(--tag-text-color);\r
- width: 14px;\r
- height: 14px;\r
- margin-right: 4.66667px;\r
- margin-left: -4.66667px;\r
- transition: .2s ease-out\r
+ color:var(--tag-remove-btn-color,#000);\r
+ width:14px;\r
+ height:14px;\r
+ margin-right:4.6666666667px;\r
+ margin-left:auto;\r
+ overflow:hidden;\r
+ transition:.2s ease-out\r
}\r
\r
.tagify__tag__removeBtn::after{\r
- content: "\00D7"\r
+ content:"×";\r
+ transition:.3s,color 0s\r
}\r
\r
.tagify__tag__removeBtn:hover{\r
color:#fff;\r
background:#c77777;\r
- background: var(--tag-remove-btn-bg--hover)\r
+ background:var(--tag-remove-btn-bg--hover,#c77777)\r
}\r
\r
.tagify__tag__removeBtn:hover+div>span{\r
}\r
\r
.tagify__tag__removeBtn:hover+div::before{\r
- box-shadow: 0 0 0 1.1em rgba(211,148,148,.3) inset!important;\r
- box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset!important;\r
- transition: .2s\r
+ box-shadow:0 0 0 1.1em rgba(211,148,148,.3) inset!important;\r
+ box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-remove-bg,rgba(211,148,148,.3)) inset!important;\r
+ transition:box-shadow .2s\r
}\r
-\r
-.tagify:not(.tagify--mix) \r
+ \r
+.tagify:not(.tagify--mix)\r
.tagify__input br{\r
display:none\r
}\r
\r
.tagify:not(.tagify--mix)\r
.tagify__input *{\r
- display: inline;\r
- white-space: nowrap\r
-}\r
- \r
-.tagify__input{\r
- display: block;\r
- min-width: 110px;\r
- margin: 5px;\r
- padding: .3em .5em;\r
- padding: var(--tag-pad,.3em .5em);\r
- line-height: inherit;\r
- position: relative;\r
- white-space: pre-line\r
+ display:inline;\r
+ white-space:nowrap\r
}\r
\r
-.tagify__input::before{\r
- display: inline-block;\r
- width: 0\r
+.tagify__input{\r
+ flex-grow:1;\r
+ display:inline-block;\r
+ min-width:110px;\r
+ margin:5px;\r
+ padding:.3em .5em;\r
+ padding:var(--tag-pad,.3em .5em);\r
+ line-height:normal;\r
+ position:relative;\r
+ white-space:pre-wrap;\r
+ color:inherit;\r
+ color:var(--input-color,inherit);\r
+ box-sizing:inherit\r
}\r
\r
-.tagify__input:empty::before{\r
- transition: .2s ease-out;\r
- opacity: .5;\r
- transform: none;\r
- width: auto\r
-}\r
- \r
.tagify__input:focus{\r
outline:0\r
}\r
-\r
+ \r
.tagify__input:focus::before{\r
- transition: .2s ease-out;\r
- opacity: 0;\r
- transform: translatex(6px)\r
+ transition:.2s ease-out;\r
+ opacity:0;\r
+ transform:translatex(6px)\r
}\r
\r
-@supports (-moz-appearance:none){\r
+@supports (-ms-ime-align:auto){\r
.tagify__input:focus::before{\r
display:none\r
}\r
\r
.tagify__input:focus:empty::before{\r
transition:.2s ease-out;\r
- opacity:.3;\r
- transform:none\r
+ opacity:1;\r
+ transform:none;\r
+ color:rgba(0,0,0,.25);\r
+ color:var(--placeholder-color-focus)\r
}\r
-\r
-@supports (-moz-appearance:none){\r
- .tagify__input:focus:empty::before{\r
- display:inline-block\r
+ \r
+@-moz-document url-prefix(){\r
+ .tagify__input:focus:empty::after{\r
+ display:none\r
}\r
}\r
-\r
+ \r
.tagify__input::before{\r
content:attr(data-placeholder);\r
- line-height:1.8;\r
- position:absolute;\r
- top:0;\r
+ height:1em;\r
+ line-height:1em;\r
+ margin:auto 0;\r
z-index:1;\r
- color:#000;\r
+ color:rgba(0,0,0,.4);\r
+ color:var(--placeholder-color);\r
white-space:nowrap;\r
pointer-events:none;\r
- opacity:0\r
-}\r
-\r
-.tagify--mix\r
-.tagify__input::before{\r
- position:static;\r
- line-height:inherit\r
-}\r
-\r
-@supports (-moz-appearance:none){\r
- .tagify__input::before{\r
- line-height:inherit;\r
- position:relative\r
- }\r
+ opacity:0;\r
+ position:absolute\r
}\r
\r
.tagify__input::after{\r
pointer-events:none;\r
max-width:100px\r
}\r
-\r
-.tagify__input\r
+ \r
+.tagify__input \r
.tagify__tag{\r
- margin:0\r
-}\r
-\r
-.tagify__input\r
-.tagify__tag>div{\r
- padding-top:0;\r
- padding-bottom:0\r
+ margin:0 1px\r
}\r
\r
.tagify--mix{\r
- line-height:1.7\r
+ display:block\r
}\r
-\r
-.tagify--mix\r
-.tagify__input{\r
+ \r
+.tagify--mix .tagify__input{\r
padding:5px;\r
margin:0;\r
width:100%;\r
height:100%;\r
+ line-height:1.5;\r
+ display:block\r
+}\r
+\r
+.tagify--mix \r
+.tagify__input::before{\r
+ height:auto;\r
+ display:none;\r
line-height:inherit\r
}\r
\r
}\r
\r
.tagify--select::after{\r
- content:'>';\r
+ content:">";\r
opacity:.5;\r
position:absolute;\r
top:50%;\r
.tagify--select[aria-expanded=true]::after{\r
transform:translate(-150%,-50%) rotate(270deg) scaleY(1.2)\r
}\r
-\r
+ \r
.tagify--select\r
.tagify__tag{\r
position:absolute;\r
width:100%\r
}\r
\r
+.tagify--empty \r
+.tagify__input::before{\r
+ transition:.2s ease-out;\r
+ opacity:1;\r
+ transform:none;\r
+ display:inline-block;\r
+ width:auto\r
+}\r
+ \r
+.tagify--mix \r
+.tagify--empty \r
+.tagify__input::before{\r
+ display:inline-block\r
+}\r
+\r
.tagify--invalid{\r
--tags-border-color:#D39494\r
}\r
- \r
+\r
.tagify__dropdown{\r
position:absolute;\r
z-index:9999;\r
\r
.tagify__dropdown[placement=top]{\r
margin-top:0;\r
- transform:translateY(-2px)\r
+ transform:translateY(-100%)\r
}\r
- \r
-.tagify__dropdown[placement=top] \r
+\r
+.tagify__dropdown[placement=top]\r
.tagify__dropdown__wrapper{\r
- border-top-width:1px;\r
+ border-top-width:1.1px;\r
border-bottom-width:0\r
}\r
\r
-.tagify__dropdown--text{\r
+.tagify__dropdown[position=text]{\r
box-shadow:0 0 0 3px rgba(var(--tagify-dd-color-primary),.1);\r
font-size:.9em\r
}\r
- \r
-.tagify__dropdown--text\r
+\r
+.tagify__dropdown[position=text] \r
.tagify__dropdown__wrapper{\r
border-width:1px\r
}\r
\r
.tagify__dropdown__wrapper{\r
max-height:300px;\r
- overflow:hidden;\r
+ overflow:auto;\r
background:#fff;\r
background:var(--tagify-dd-bg-color);\r
border:1px solid #3595f6;\r
border-color:var(--tagify-dd-color-primary);\r
+ border-bottom-width:1.33px;\r
border-top-width:0;\r
box-shadow:0 2px 4px -2px rgba(0,0,0,.2);\r
transition:.25s cubic-bezier(0,1,.5,1)\r
}\r
\r
-.tagify__dropdown__wrapper:hover{\r
- overflow:auto\r
-}\r
- \r
-.tagify__dropdown--initial\r
+.tagify__dropdown--initial \r
.tagify__dropdown__wrapper{\r
max-height:20px;\r
transform:translateY(-1em)\r
position:relative;\r
outline:0\r
}\r
-\r
+ \r
.tagify__dropdown__item--active{\r
background:#3595f6;\r
background:var(--tagify-dd-color-primary);\r
https://git.useribm.hu / mediacube.git / commitdiff