{"id":475,"date":"2023-03-08T16:22:52","date_gmt":"2023-03-08T13:22:52","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=475"},"modified":"2023-04-08T05:10:24","modified_gmt":"2023-04-08T02:10:24","slug":"input","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/elements\/475\/","title":{"rendered":"Input"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"366\" style=\"aspect-ratio: 798 \/ 366;\" width=\"798\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-08_14-21-03.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;div class=&quot;search&quot;&gt;\n  &lt;input type=&quot;checkbox&quot; id=&quot;trigger&quot; class=&quot;search__checkbox&quot; \/&gt;\n  &lt;label class=&quot;search__label-init&quot; for=&quot;trigger&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;search__label-active&quot; for=&quot;trigger&quot;&gt;&lt;\/label&gt;\n  &lt;div class=&quot;search__border&quot;&gt;&lt;\/div&gt;\n  &lt;input type=&quot;text&quot; class=&quot;search__input&quot; \/&gt;\n  &lt;div class=&quot;search__close&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n\/\/\u0410\u0432\u0442\u043e\u0440: Nikolay Talanov. @suez<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">*, *:before, *:after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nhtml, body {\n  font-size: 62.5%;\n  height: 100%;\n}\n\nbody {\n  background: #E62878;\n}\n\n.search {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  margin-left: -16rem;\n  margin-top: -3rem;\n  width: 32rem;\n  height: 6rem;\n}\n.search__border {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 6rem;\n  height: 100%;\n  border: 0.6rem solid #fff;\n  border-radius: 10rem;\n  transform: translate(-50%, -50%);\n  transition: width 0.4s 0.4s;\n}\n#trigger:checked ~ .search__border {\n  transition: width 0.4s 0.2s;\n  width: 100%;\n}\n#trigger:checked ~ .search__border:after {\n  width: 0;\n  transition: width 0.2s cubic-bezier(0.42, -0.7, 0.62, 1.25);\n}\n.search__border:after {\n  content: &quot;&quot;;\n  position: absolute;\n  bottom: -1.6rem;\n  right: -1.6rem;\n  width: 3rem;\n  height: 0.6rem;\n  background: #fff;\n  border-radius: 0.6rem;\n  transform-origin: 100% 50%;\n  transform: rotate(225deg) translateX(3rem);\n  transition: width 0.2s 0.8s;\n}\n.search__input {\n  position: relative;\n  width: 26rem;\n  height: 6rem;\n  padding: 0.9rem 0 0.9rem 2.4rem;\n  background: transparent;\n  outline: none;\n  border: none;\n  font-size: 2.4rem;\n  color: #fff;\n  z-index: -1;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n#trigger:checked ~ .search__input {\n  opacity: 1;\n  z-index: auto;\n  transition: opacity 0.2s 0.6s;\n}\n.search__checkbox {\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  opacity: 0;\n  z-index: -10;\n}\n.search__label-init {\n  z-index: 2;\n  position: absolute;\n  top: 0;\n  left: 13.12rem;\n  width: 6.8rem;\n  height: 6.4rem;\n  cursor: pointer;\n}\n#trigger:checked ~ .search__label-init {\n  transform: scale(0);\n}\n.search__label-active {\n  z-index: 3;\n  position: absolute;\n  top: 1.5rem;\n  right: 1.5rem;\n  width: 3rem;\n  height: 3rem;\n  cursor: pointer;\n  transform: scale(0);\n}\n#trigger:checked ~ .search__label-active {\n  tranition: transform 0 0.6s;\n  transform: scale(1);\n}\n.search__close {\n  position: absolute;\n  top: 1.5rem;\n  right: 1.5rem;\n  width: 3rem;\n  height: 3rem;\n  cursor: pointer;\n  z-index: -1;\n}\n#trigger:checked ~ .search__close {\n  z-index: auto;\n}\n#trigger:checked ~ .search__close:before {\n  transform: rotate(-45deg);\n  opacity: 1;\n  transition: transform 0.2s 0.6s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s 0.6s;\n}\n#trigger:checked ~ .search__close:after {\n  transform: rotate(45deg);\n  opacity: 1;\n  transition: transform 0.2s 0.8s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s 0.8s;\n}\n.search__close:before, .search__close:after {\n  content: &quot;&quot;;\n  position: absolute;\n  top: 1.2rem;\n  left: 0;\n  width: 100%;\n  height: 0.6rem;\n  background: #fff;\n  border-radius: 0.5rem;\n  opacity: 0;\n}\n.search__close:before {\n  transform: rotate(-45deg) translateX(2rem);\n  transition: transform 0.2s, opacity 0.1s 0.1s;\n}\n.search__close:after {\n  transform: rotate(45deg) translateX(2rem);\n  transition: transform 0.2s 0.2s, opacity 0.1s 0.3s;\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":478,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[16,37],"class_list":["post-475","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elements","tag-htmlcss","tag-input"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=475"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/475\/revisions"}],"predecessor-version":[{"id":1228,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/475\/revisions\/1228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/478"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}