[{"created":"20211108175810238","text":"
\n \n
\n\n<$reveal state=\"$:/temp/new-search\" type=\"nomatch\" text=\"\" tag=div style=\"margin:auto; max-width:450px;\">\n<$list filter=\"[{$:/temp/new-search}minlength[3]]\" variable=ignore>\n<$list filter=\"[all[tiddlers]!is[system]search{$:/temp/new-search}]\" template=\"$:/core/ui/ListItemTemplate\"/>\n$list>\n$reveal>","tags":"","title":"search-animation/test","modified":"20211108182501821"},{"created":"20211108175249090","text":"/* Credits: https://codepen.io/melnik909/pen/BZpJLN\n*/\n\n/*\n=====\nRESET STYLES\n=====\n*/\n\n.field__input{ \n --uiFieldPlaceholderColor: var(--fieldPlaceholderColor, #767676);\n \n background-color: transparent;\n border-radius: 0;\n border: none;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n\n font-family: inherit;\n font-size: inherit;\n}\n\n.field__input:focus::-webkit-input-placeholder{\n color: var(--uiFieldPlaceholderColor);\n}\n\n.field__input:focus::-moz-placeholder{\n color: var(--uiFieldPlaceholderColor);\n}\n\n/*\n=====\nCORE STYLES\n=====\n*/\n\n.field{\n --uiFieldBorderWidth: var(--fieldBorderWidth, 2px);\n --uiFieldPaddingRight: var(--fieldPaddingRight, 1rem);\n --uiFieldPaddingLeft: var(--fieldPaddingLeft, 1rem); \n --uiFieldBorderColorActive: var(--fieldBorderColorActive, rgba(22, 22, 22, 1));\n\n display: var(--fieldDisplay, inline-flex);\n position: relative;\n font-size: var(--fieldFontSize, 1rem);\n}\n\n.field__input{\n box-sizing: border-box;\n width: var(--fieldWidth, 100%);\n height: var(--fieldHeight, 3rem);\n padding: var(--fieldPaddingTop, 1.25rem) var(--uiFieldPaddingRight) var(--fieldPaddingBottom, .5rem) var(--uiFieldPaddingLeft);\n border-bottom: var(--uiFieldBorderWidth) solid var(--fieldBorderColor, rgba(0, 0, 0, .25)); \n}\n\n.field__input:focus{\n outline: none;\n}\n\n.field__input::-webkit-input-placeholder{\n opacity: 0;\n transition: opacity .2s ease-out;\n}\n\n.field__input::-moz-placeholder{\n opacity: 0;\n transition: opacity .2s ease-out;\n}\n\n.field__input:focus::-webkit-input-placeholder{\n opacity: 1;\n transition-delay: .2s;\n}\n\n.field__input:focus::-moz-placeholder{\n opacity: 1;\n transition-delay: .2s;\n}\n\n.field__label-wrap{\n box-sizing: border-box;\n pointer-events: none;\n cursor: text;\n\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.field__label-wrap::after{\n content: \"\";\n box-sizing: border-box;\n width: 100%;\n height: 0;\n opacity: 0;\n\n position: absolute;\n bottom: 0;\n left: 0;\n}\n\n.field__input:focus ~ .field__label-wrap::after{\n opacity: 1;\n}\n\n.field__label{\n position: absolute;\n left: var(--uiFieldPaddingLeft);\n top: calc(50% - .5em);\n\n line-height: 1;\n font-size: var(--fieldHintFontSize, inherit);\n\n transition: top .2s cubic-bezier(0.9, -0.15, 0.1, 1.15), opacity .2s ease-out, font-size .2s ease-out;\n will-change: bottom, opacity, font-size;\n}\n\n.field__input:focus ~ .field__label-wrap .field__label,\n.field__input:not(:placeholder-shown) ~ .field__label-wrap .field__label{\n --fieldHintFontSize: var(--fieldHintFontSizeFocused, .75rem);\n\n top: var(--fieldHintTopHover, .25rem);\n}\n\n/* \neffect 1\n*/\n\n.field_v1 .field__label-wrap::after{\n border-bottom: var(--uiFieldBorderWidth) solid var(--uiFieldBorderColorActive);\n transition: opacity .2s ease-out;\n will-change: opacity;\n}\n\n/*\n=====\nLEVEL 4. SETTINGS\n=====\n*/\n\n.field{\n --fieldBorderColor: #D1C4E9;\n --fieldBorderColorActive: #673AB7;\n}\n\n\n.page{\n box-sizing: border-box;\n width: 100%;\n max-width: 480px;\n margin: auto;\n padding: 1rem;\n\n display: grid;\n grid-gap: 30px;\n}\n","tags":"$:/tags/Stylesheet","title":"search-animation/style","modified":"20211108182339844","type":"text/css"}]