{"id":1390,"date":"2023-05-03T16:40:07","date_gmt":"2023-05-03T13:40:07","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1390"},"modified":"2023-05-03T16:40:09","modified_gmt":"2023-05-03T13:40:09","slug":"neomorph-ui-kit","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/1390\/","title":{"rendered":"Neomorph UI Kit"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Neomorph UI Kit\" width=\"640\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/5NqaUhnPsxI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/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;body class=&quot;theme theme_font_neoskeuo theme_space_neoskeuo theme_color_neoskeuo&quot;&gt;\n\t\n    &lt;section class=&quot;decorator decorator_indent-b_3xl&quot;&gt;\n      &lt;h2 class=&quot;decorator decorator_indent-b_l&quot;&gt;Button&lt;\/h2&gt;\n      &lt;button class=&quot;button&quot;&gt;\n        Click me, babe!\n      &lt;\/button&gt;\n    &lt;\/section&gt;\n    \n    &lt;section class=&quot;decorator decorator_indent-b_3xl&quot;&gt;\n      &lt;h2 class=&quot;decorator decorator_indent-b_l&quot;&gt;Input&lt;\/h2&gt;\n      &lt;input type=&quot;text&quot; class=&quot;input decorator decorator_indent-b_xl&quot; placeholder=&quot;Place ur text here&quot; \/&gt;\n      &lt;input type=&quot;number&quot; inputmode=&quot;numeric&quot; class=&quot;input decorator decorator_indent-b_xl&quot; placeholder=&quot;000000&quot; \/&gt;\n      \n      &lt;div class=&quot;decorator decorator_distribute_left&quot;&gt;\n        &lt;input type=&quot;text&quot; class=&quot;input input_form_default-brick&quot; placeholder=&quot;Ur text&quot; \/&gt;\n        &lt;input type=&quot;text&quot; class=&quot;input input_form_brick-brick&quot; placeholder=&quot;Ur text&quot; \/&gt;\n        &lt;input type=&quot;number&quot; inputmode=&quot;numeric&quot; class=&quot;input input_form_brick-default&quot; placeholder=&quot;000000&quot; \/&gt;\n      &lt;\/div&gt;\n    &lt;\/section&gt;\n    \n    &lt;section class=&quot;decorator decorator_indent-b_3xl&quot;&gt;\n      &lt;h2 class=&quot;decorator decorator_indent-b_l&quot;&gt;Choice Group&lt;\/h2&gt;\n      &lt;div class=&quot;choice-group decorator_indent-r_xl&quot;&gt;\n        &lt;label for=&quot;CG-radio-1&quot; class=&quot;choice-group__item&quot;&gt;\n          &lt;input type=&quot;radio&quot; id=&quot;CG-radio-1&quot; name=&quot;choice-group&quot; class=&quot;choice-group__input&quot;&gt;\n          &lt;div type=&quot;button&quot; class=&quot;choice-group__button&quot;&gt;1 choice&lt;\/div&gt;\n        &lt;\/label&gt;\n        &lt;label for=&quot;CG-radio-2&quot; class=&quot;choice-group__item&quot;&gt;\n          &lt;input checked type=&quot;radio&quot; id=&quot;CG-radio-2&quot; name=&quot;choice-group&quot; class=&quot;choice-group__input&quot;&gt;\n          &lt;div type=&quot;button&quot; class=&quot;choice-group__button&quot;&gt;2 choice&lt;\/div&gt;\n        &lt;\/label&gt;\n        &lt;label for=&quot;CG-radio-3&quot; class=&quot;choice-group__item&quot;&gt;\n          &lt;input type=&quot;radio&quot; id=&quot;CG-radio-3&quot; name=&quot;choice-group&quot; class=&quot;choice-group__input&quot;&gt;\n          &lt;div type=&quot;button&quot; class=&quot;choice-group__button&quot;&gt;3 choice&lt;\/div&gt;\n        &lt;\/label&gt;\n      &lt;\/div&gt;\n      \n      &lt;div class=&quot;choice-group&quot;&gt;\n        &lt;label tabindex=&quot;-1&quot; class=&quot;choice-group__item&quot;&gt;\n          &lt;input type=&quot;checkbox&quot; class=&quot;choice-group__input&quot;&gt;\n          &lt;div type=&quot;button&quot; class=&quot;choice-group__button&quot; tabindex=&quot;-1&quot;&gt;1 choice&lt;\/div&gt;\n        &lt;\/label&gt;\n        &lt;label tabindex=&quot;-1&quot; class=&quot;choice-group__item&quot;&gt;\n          &lt;input checked type=&quot;checkbox&quot; class=&quot;choice-group__input&quot;&gt;\n          &lt;div type=&quot;button&quot; class=&quot;choice-group__button&quot; tabindex=&quot;-1&quot;&gt;2 choice&lt;\/div&gt;\n        &lt;\/label&gt;\n        &lt;label tabindex=&quot;-1&quot; class=&quot;choice-group__item&quot;&gt;\n          &lt;input checked type=&quot;checkbox&quot; class=&quot;choice-group__input&quot;&gt;\n          &lt;div type=&quot;button&quot; class=&quot;choice-group__button&quot; tabindex=&quot;-1&quot;&gt;3 choice&lt;\/div&gt;\n        &lt;\/label&gt;\n      &lt;\/div&gt;\n    &lt;\/section&gt;\n      \n    &lt;section class=&quot;decorator decorator_indent-b_3xl&quot;&gt;\n      &lt;h2 class=&quot;decorator decorator_indent-b_l&quot;&gt;Checkbox&lt;\/h2&gt;\n      &lt;label class=&quot;checkbox&quot;&gt;\n        &lt;input type=&quot;checkbox&quot; class=&quot;checkbox__input&quot;&gt;\n        &lt;div class=&quot;checkbox__box&quot;&gt;&lt;\/div&gt;\n        &lt;span class=&quot;checkbox__text&quot;&gt;Check me, baby!&lt;\/span&gt;\n      &lt;\/label&gt;\n      &lt;label class=&quot;checkbox decorator decorator_indent-l_4xl&quot;&gt;\n        &lt;input checked type=&quot;checkbox&quot; class=&quot;checkbox__input&quot;&gt;\n        &lt;div class=&quot;checkbox__box&quot;&gt;&lt;\/div&gt;\n        &lt;span class=&quot;checkbox__text&quot;&gt;Check me, baby!&lt;\/span&gt;\n      &lt;\/label&gt;\n      \n    &lt;\/section&gt;\n      \n    &lt;section class=&quot;decorator decorator_indent-b_3xl&quot;&gt;\n      &lt;h2 class=&quot;decorator decorator_indent-b_l&quot;&gt;Radio&lt;\/h2&gt;\n      &lt;label class=&quot;radio&quot;&gt;\n        &lt;input type=&quot;radio&quot; name=&quot;test&quot; class=&quot;radio__input&quot;&gt;\n        &lt;div class=&quot;radio__box&quot;&gt;&lt;\/div&gt;\n        &lt;span class=&quot;radio__text&quot;&gt;Check me, baby!&lt;\/span&gt;\n      &lt;\/label&gt;\n      &lt;label class=&quot;radio decorator decorator_indent-l_4xl&quot;&gt;\n        &lt;input checked type=&quot;radio&quot; name=&quot;test&quot; class=&quot;radio__input&quot;&gt;\n        &lt;div class=&quot;radio__box&quot;&gt;&lt;\/div&gt;\n        &lt;span class=&quot;radio__text&quot;&gt;Check me, baby!&lt;\/span&gt;\n      &lt;\/label&gt;\n    &lt;\/section&gt;\n      \n    &lt;section class=&quot;decorator decorator_indent-b_3xl&quot;&gt;\n      &lt;h2 class=&quot;decorator decorator_indent-b_l&quot;&gt;Switch&lt;\/h2&gt;\n      &lt;label class=&quot;switch&quot; for=&quot;switch_1&quot;&gt;\n        &lt;input id=&quot;switch_1&quot; type=&quot;checkbox&quot; class=&quot;switch__input&quot;&gt;\n        &lt;div class=&quot;switch__box&quot;&gt;&lt;\/div&gt;\n        &lt;span aria-hidden=&quot;true&quot;&gt;Click me&lt;\/span&gt;\n      &lt;\/label&gt;\n    &lt;\/section&gt;\n      \n    &lt;section class=&quot;decorator decorator_indent-b_3xl&quot;&gt;\n      &lt;h2 class=&quot;decorator decorator_indent-b_l&quot;&gt;Select&lt;\/h2&gt;\n      &lt;select class=&quot;select&quot;&gt;\n        &lt;option&gt;Option 1&lt;\/option&gt;\n        &lt;option&gt;Option 2&lt;\/option&gt;\n        &lt;option&gt;Looooong option 3&lt;\/option&gt;\n      &lt;\/select&gt;\n    &lt;\/section&gt;\n       \n    &lt;\/body&gt;<\/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;}\">body { \n\tpadding: 40px;\n\tbackground-color: var(--color-bg-default); \n}\n\nh2 { \n\tfont-size: 28px; \n\tfont-weight: bold;\n\tmargin: 3em 0 2em;\n}\n\n.theme_space_neoskeuo {\n\t--space-3xs: 2px;\n\t--space-2xs: 4px;\n\t--space-xs: 8px;\n\t--space-s: 12px;\n\t--space-m: 16px;\n\t--space-l: 20px;\n\t--space-xl: 24px;\n\t--space-2xl: 32px;\n\t--space-3xl: 40px;\n\t--space-4xl: 48px;\n\t--space-5xl: 72px;\n\t--space-6xl: 96px;\n}\n\n.theme { \n\t--radius-default: 16px;\n\t--radius-s: 12px;\n\t--radius-xs: 6px;\n}\n\n.theme_font_neoskeuo {\n\t--font-primary: 'Montserrat', 'Helvetica', 'Helvetica Neue', 'Segoe UI', 'Arial', sans-serif;\n\t--font-digital: 'Digital', monospace;\n\t\n\tfont-family: var(--font-primary);\n}\n\n.theme_color_neoskeuo {\n\t\n\t--color-bg-default: rgba(238,240,245,1);\n\t\n\t--color-typo-primary: rgba(48,52,84, 1);\n\t--color-typo-link: rgba(0, 80, 220, 1);\n\t\n\t--color-control-bg-default: rgba(240,242,247,1);\n\t--color-control-bg-action: hsla(220, 100%, 54%, 1);\n\t\n\t--color-shadow: 12,13,18;\n\t--color-light: 255, 255, 255;\n\t--color-glow: 0,150,255;\n}\n\n.button {\n\tdisplay: inline-block;\n\t-webkit-appearance: none;\n\t-moz-appearance: none;\n\t     appearance: none;\n\tpadding: var(--space-xl) var(--space-4xl);\n\tfont-size: 18px;\n\tfont-family: var(--font-primary);\n\tcolor: var(--color-typo-primary);\n\tborder: none;\n\tborder-radius: var(--radius-default);\n\tbackground-color: var(--color-bg-default);\n\tcursor: pointer;\n\toutline: none;\n\ttext-shadow: \n\t\t0 -1px 0 rgba( var(--color-shadow), 0.08 ),\n\t\t0 1px 0 rgba( var(--color-light), 1 );\n\tbox-shadow: \n\t\tinset 1px 1px 1px rgba( var(--color-light), 1 ),\n\t\t-2px -2px 2px rgba( var(--color-light), 0.9),\n\t\t-4px -4px 6px rgba( var(--color-light), 0.9),\n\t\t-8px -8px 16px rgba( var(--color-light), 0.9),\n\t\t-12px -12px 24px rgba( var(--color-light), 0.9),\n\t\tinset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),\n\t\t2px 2px 2px rgba( var(--color-shadow), 0.08),\n\t\t4px 4px 6px rgba( var(--color-shadow), 0.08),\n\t\t8px 8px 16px rgba( var(--color-shadow), 0.08),\n\t\t12px 12px 24px rgba( var(--color-shadow), 0.08);\n\ttransition: \n\t\tcolor 0.3s,\n\t\ttext-shadow 0.3s,\n\t\tbox-shadow 0.6s;\n\/* \t&amp;:active {\n\t\tbox-shadow: \n\t\t\tinset -1px -1px 1px rgba( var(--color-light), 1 ),\n\t\t\t3px 3px 3px rgba( var(--color-light), 1),\n\t\t\t5px 5px 6px rgba( var(--color-light), 1),\n\t\t\t10px 10px 16px rgba( var(--color-light), 1),\n\t\t\t14px 14px 24px rgba( var(--color-light), 1),\n\t\t\tinset 1px 1px 1px rgba( var(--color-shadow), 0.06 ),\n\t\t\t-3px -3px 3px rgba( var(--color-shadow), 0.085),\n\t\t\t-5px -5px 6px rgba( var(--color-shadow), 0.085),\n\t\t\t-10px -10px 16px rgba( var(--color-shadow), 0.085),\n\t\t\t-14px -14px 24px rgba( var(--color-shadow), 0.085);\n\t} *\/\n}\n\n.button:hover {\n\t\tcolor: var(--color-typo-link);\n\t\ttext-shadow: \n\t\t\t0 -1px 0 rgba( var(--color-shadow), 0.08 ),\n\t\t\t0 1px 0 rgba( var(--color-light), 1 ),\n\t\t\t0 0 1px rgba( var(--color-light), 0.7 ),\n\t\t\t0 0 4px rgba( var(--color-glow), 0.08 ),\n\t\t\t0 0 8px rgba( var(--color-glow), 0.08 );\n\t\tbox-shadow: \n\t\t\tinset 1px 1px 1px rgba( var(--color-light), 1 ),\n\t\t\t-3px -3px 3px rgba( var(--color-light), 1),\n\t\t\t-5px -5px 6px rgba( var(--color-light), 1),\n\t\t\t-10px -10px 16px rgba( var(--color-light), 1),\n\t\t\t-14px -14px 24px rgba( var(--color-light), 1),\n\t\t\tinset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),\n\t\t\t3px 3px 3px rgba( var(--color-shadow), 0.085),\n\t\t\t5px 5px 6px rgba( var(--color-shadow), 0.085),\n\t\t\t10px 10px 16px rgba( var(--color-shadow), 0.085),\n\t\t\t14px 14px 24px rgba( var(--color-shadow), 0.085);\n\t}\n\n\/* \t&amp;:active {\n\t\tbox-shadow: \n\t\t\tinset 1px 1px 1px rgba( var(--color-light), 1 ),\n\t\t\tinset 0px 0px 0 6px var(--color-bg-default),\n\t\t\tinset -5px -5px 6px 6px rgba( var(--color-light), 1 ),\n\t\t\t-3px -3px 3px rgba( var(--color-light), 1),\n\t\t\t-5px -5px 6px rgba( var(--color-light), 1),\n\t\t\t-10px -10px 16px rgba( var(--color-light), 1),\n\t\t\t-14px -14px 24px rgba( var(--color-light), 1),\n\t\t\tinset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),\n\t\t\tinset 3px 3px 3px 6px rgba( var(--color-shadow), 0.085 ),\n\t\t\tinset 5px 5px 6px 6px rgba( var(--color-shadow), 0.085 ),\n\t\t\t3px 3px 3px rgba( var(--color-shadow), 0.085),\n\t\t\t5px 5px 6px rgba( var(--color-shadow), 0.085),\n\t\t\t10px 10px 16px rgba( var(--color-shadow), 0.085),\n\t\t\t14px 14px 24px rgba( var(--color-shadow), 0.085);\n\t} *\/\n\n.button:active {\n\t\tbox-shadow: \n\t\t\t1px 1px 1px rgba( var(--color-light), 1 ),\n\t\t\tinset -2px -2px 2px rgba( var(--color-light), 0.9),\n\t\t\tinset -3px -3px 4px rgba( var(--color-light), 0.9),\n\t\t\tinset -6px -6px 12px rgba( var(--color-light), 0.9),\n\t\t\tinset -8px -8px 16px rgba( var(--color-light), 0.9),\n\t\t\t-1px -1px 1px rgba( var(--color-shadow), 0.06 ),\n\t\t\tinset 2px 2px 2px rgba( var(--color-shadow), 0.08),\n\t\t\tinset 3px 3px 4px rgba( var(--color-shadow), 0.08),\n\t\t\tinset 6px 6px 12px rgba( var(--color-shadow), 0.08),\n\t\t\tinset 8px 8px 16px rgba( var(--color-shadow), 0.08);\n\t}\n\n.input {\n\tdisplay: block;\n\theight: 60px;\n\tpadding: 0 var(--space-xl);\n\tbox-sizing: border-box;\n\tfont-family: var(--font-primary);\n\tfont-size: 18px;\n\tline-height: 60px;\n\tborder-radius: var(--radius-default);\n\tborder: none;\n\tcolor: var(--color-typo-primary);\n\tbackground: var(--color-control-bg-default);\n\tbox-shadow:\n\t\tinset 1px 1px 1px rgba( var(--color-light), 0.4 ),\n\t\tinset -1px -1px 1px rgba( var(--color-shadow), 0.04 ),\n\t\t\n\t\tinset 0 0 0 2px var(--color-bg-default),\n\t\t\n\t\tinset -2px -2px 2px 2px rgba( var(--color-light), 0.4), \n\t\tinset -4px -4px 4px 2px rgba( var(--color-light), 0.4),\n\t\t-1px -1px 4px 0px rgba( var(--color-light), 0.4), \n\t\t-2px -2px 8px 0px rgba( var(--color-light), 0.4),\n\n\t\tinset 2px 2px 2px 2px rgba( var(--color-shadow), 0.04),\n\t\tinset 4px 4px 4px 2px rgba( var(--color-shadow), 0.04),\n\t\t1px 1px 4px 0px rgba( var(--color-shadow), 0.04), \n\t\t2px 2px 8px 0px rgba( var(--color-shadow), 0.04)\n\t\t;\n}\n\n.input:focus {\n\t\toutline: none;\n\t}\n\n.input[type=&quot;number&quot;] {\n\t\tpadding-top: var(--space-xs);\n\t\tfont-family: var(--font-digital);\n\t\tfont-size: 40px;\n\t\tline-height: 40px;\n\t}\n\n.input[type=&quot;number&quot;]::-moz-placeholder {\n\t\t\tcolor: rgba(0, 0, 0, 0.2);\n\t\t}\n\n.input[type=&quot;number&quot;]:-ms-input-placeholder {\n\t\t\tcolor: rgba(0, 0, 0, 0.2);\n\t\t}\n\n.input[type=&quot;number&quot;]::placeholder {\n\t\t\tcolor: rgba(0, 0, 0, 0.2);\n\t\t}\n\n.input_form_brick-brick {\n\t\t\tborder-radius: 0;\n\t\t\tborder-right: 0;\n\t\t}\n\n.input_form_default-brick {\n\t\t\tborder-radius: var(--radius-default) 0 0 var(--radius-default);\n\t\t\tborder-right: 0;\n\t\t}\n\n.input_form_brick-default {\n\t\t\tborder-radius: 0 var(--radius-default) var(--radius-default) 0;\n\t\t}\n\n.choice-group {\n\tdisplay: inline-flex;\n\theight: 60px;\n\tpadding: var(--space-2xs);\n\tbox-sizing: border-box;\n\tborder-radius: var(--radius-default);\n\tbackground: var(--color-bg-default);\n\tbox-shadow: \n\t\tinset 1px 1px 1px rgba( var(--color-light), 0.6 ),\n\t\tinset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),\n\t\t\n\t\t-1px -1px 4px 0px rgba( var(--color-light), 0.6), \n\t\t-2px -2px 8px 0px rgba( var(--color-light), 0.6),\n\t\t\n\t\t1px 1px 4px 0px rgba( var(--color-shadow), 0.06), \n\t\t2px 2px 8px 0px rgba( var(--color-shadow), 0.06)\n\t\t;\n}\n\n.choice-group__input {\n\t\t-webkit-appearance: none;\n\t\t-moz-appearance: none;\n\t\t     appearance: none;\n\t\tposition: absolute;\n\t}\n\n.choice-group__button {\n\t\tpadding: 0 var(--space-l);\n\t\tbackground: transparent;\n\t\tborder: 0;\n\t\tborder-radius: var(--radius-s);\n\t\tcolor: var(--color-typo-primary);\n\t\tfont-family: var(--font-primary);\n\t\tfont-size: 18px;\n\t\tline-height: calc(60px - var(--space-2xs)*2);\n\t\ttext-shadow: \n\t\t\t0 -1px 0 rgba( var(--color-shadow), 0.08 ),\n\t\t\t0 1px 0 rgba( var(--color-light), 1 );\n\t\ttransition: \n\t\t\tcolor 0.3s,\n\t\t\tbackground-color 0.3s,\n\t\t\ttext-shadow 0.3s,\n\t\t\tbox-shadow 0.6s\n\t\t\t;\n\t}\n\n.choice-group__button:focus {\n\t\t\toutline: none;\n\t\t}\n\n.choice-group__button:hover {\n\t\t\tcolor: var(--color-typo-link);\n\t\t\ttext-shadow: \n\t\t\t\t0 -1px 0 rgba( var(--color-shadow), 0.08 ),\n\t\t\t\t0 1px 0 rgba( var(--color-light), 1 ),\n\t\t\t\t0 0 1px rgba( var(--color-light), 0.7 ),\n\t\t\t\t0 0 4px rgba( var(--color-glow), 0.08 ),\n\t\t\t\t0 0 8px rgba( var(--color-glow), 0.08 );\n\t\t}\n\n.choice-group__item {\n\t\tposition: relative;\n\t\theight: 100%;\n\t\tcursor: pointer;\n\t}\n\n.choice-group__item:not(:last-child) {\n\t\t\tmargin-right: var(--space-2xs);\n\t\t}\n\n.choice-group__input:checked + .choice-group__button  {\n\t\tcolor: var(--color-typo-link);\n\t\tbackground-color: var(--color-control-bg-default);\n\t\ttext-shadow: \n\t\t\t0 -1px 0 rgba( var(--color-shadow), 0.08 ),\n\t\t\t0 1px 0 rgba( var(--color-light), 1 ),\n\t\t\t0 0 1px rgba( var(--color-light), 0.7 ),\n\t\t\t0 0 4px rgba( var(--color-glow), 0.08 ),\n\t\t\t0 0 8px rgba( var(--color-glow), 0.08 )\n\t\t\t;\n\t\tbox-shadow: \n\t\t\tinset -2px -2px 2px 0px rgba( var(--color-light), 0.6), \n\t\t\tinset -4px -4px 4px 0px rgba( var(--color-light), 0.6),\n\n\t\t\tinset 2px 2px 2px 0px rgba( var(--color-shadow), 0.06),\n\t\t\tinset 4px 4px 4px 0px rgba( var(--color-shadow), 0.06)\n\t\t\t;\n\t}\n\n.checkbox {\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tfont-size: 18px;\n\tcolor: var(--color-typo-primary);\n\tcursor: pointer;\n}\n\n.checkbox__input {\n\t\t-webkit-appearance: none;\n\t\t-moz-appearance: none;\n\t\t     appearance: none;\n\t\tposition: absolute;\n\t}\n\n.checkbox__box {\n\t\tposition: relative;\n    box-sizing: border-box;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: var(--radius-xs);\n    background-color: var(--color-bg-default);\n\t\tbox-shadow: \n\t\t\tinset 1px 1px 1px rgba( var(--color-light), 0.6 ),\n\t\t\tinset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),\n\n\t\t\t-1px -1px 1px 0px rgba( var(--color-light), 0.6),\n\t\t\t-1px -1px 4px 0px rgba( var(--color-light), 0.6), \n\t\t\t-2px -2px 8px 0px rgba( var(--color-light), 0.6),\n\n\t\t\t1px 1px 1px 0px rgba( var(--color-shadow), 0.06),\n\t\t\t1px 1px 4px 0px rgba( var(--color-shadow), 0.06), \n\t\t\t2px 2px 8px 0px rgba( var(--color-shadow), 0.06)\n\t\t\t;\n\t}\n\n.checkbox__box::before {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\ttop: 5px;\n\t\t\tleft: 5px;\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t\tborder-radius: 3px;\n\t\t\tbackground-color: var(--color-control-bg-default);\n\t\t\ttransition: \n\t\t\t\tbackground-color 0.4s,\n\t\t\t\tbox-shadow 0.4s\n\t\t\t\t;\n\t\t}\n\n.checkbox__text {\n\t\tmargin-left: var(--space-m);\n    color: var(--color-typo-primary);\n\t}\n\n.checkbox__input:checked + .checkbox__box::before {\n\t\tbackground-color: var(--color-control-bg-action);\n\t\tbox-shadow: \n\t\t\tinset 0 0 0px 1px rgba(  var(--color-glow), 0.3),\n\t\t\tinset 0 0 4px 1px rgba(  var(--color-glow), 0.3),\n\t\t\tinset 0 0 8px 1px rgba(  var(--color-glow), 0.3),\n\t\t\t\n\t\t\tinset -1px -1px 1px 0px rgba( var(--color-light), 0.6),\n\t\t\tinset -2px -2px 2px 0px rgba( var(--color-light), 0.3),\n\n\t\t\tinset 1px 1px 1px 0px rgba( var(--color-shadow), 0.6),\n\t\t\tinset 2px 2px 2px 0px rgba( var(--color-shadow), 0.4)\n\t\t\t;\n\t}\n\n.radio {\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tfont-size: 18px;\n\tcolor: var(--color-typo-primary);\n\tcursor: pointer;\n}\n\n.radio__input {\n\t\t-webkit-appearance: none;\n\t\t-moz-appearance: none;\n\t\t     appearance: none;\n\t\tposition: absolute;\n\t}\n\n.radio__box {\n\t\tposition: relative;\n    box-sizing: border-box;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: 50%;\n    background-color: var(--color-bg-default);\n\t\tbox-shadow: \n\t\t\tinset 1px 1px 1px rgba( var(--color-light), 0.6 ),\n\t\t\tinset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),\n\n\t\t\t-1px -1px 1px 0px rgba( var(--color-light), 0.6),\n\t\t\t-1px -1px 4px 0px rgba( var(--color-light), 0.6), \n\t\t\t-2px -2px 8px 0px rgba( var(--color-light), 0.6),\n\n\t\t\t1px 1px 1px 0px rgba( var(--color-shadow), 0.06),\n\t\t\t1px 1px 4px 0px rgba( var(--color-shadow), 0.06), \n\t\t\t2px 2px 8px 0px rgba( var(--color-shadow), 0.06)\n\t\t\t;\n\t}\n\n.radio__box::before {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\ttop: 7px;\n\t\t\tleft: 7px;\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tborder-radius: 50%;\n\t\t\tbackground-color: var(--color-control-bg-default);\n\t\t\ttransition: \n\t\t\t\tbackground-color 0.4s 0.1s,\n\t\t\t\tbox-shadow 0.4s\n\t\t\t\t;\n\t\t}\n\n.radio__text {\n\t\tmargin-left: var(--space-m);\n    color: var(--color-typo-primary);\n\t}\n\n.radio__input:checked + .radio__box::before {\n\t\tbackground-color: var(--color-control-bg-action);\n\t\tbox-shadow: \n\t\t\tinset 0 0 0px 1px rgba(  var(--color-glow), 0.3),\n\t\t\tinset 0 0 4px 1px rgba(  var(--color-glow), 0.3),\n\t\t\tinset 0 0 8px 1px rgba(  var(--color-glow), 0.3),\n\t\t\t\n\t\t\tinset -1px -1px 1px 0px rgba( var(--color-light), 0.6),\n\t\t\tinset -2px -2px 2px 0px rgba( var(--color-light), 0.3),\n\n\t\t\tinset 1px 1px 1px 0px rgba( var(--color-shadow), 0.6),\n\t\t\tinset 2px 2px 2px 0px rgba( var(--color-shadow), 0.4)\n\t\t\t;\n\t}\n\n.select {\n\tposition: relative;\n\theight: 60px;\n\tpadding: 0 var(--space-4xl) 0 var(--space-xl);\n\tbox-sizing: border-box;\n\tfont-family: var(--font-primary);\n\tborder: 0;\n\tborder-radius: var(--radius-default);\n\tbackground-color: var(--color-bg-default);\n\tbackground-image: url('https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/1329536\/icon_select_s.svg');\n\tbackground-position: calc(100% - var(--space-m)) center;\n\tbackground-repeat: no-repeat;\n\tbox-shadow: \n\t\tinset 1px 1px 1px rgba( var(--color-light), 0.6 ),\n\t\tinset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),\n\t\t\n\t\t-1px -1px 4px 0px rgba( var(--color-light), 0.6), \n\t\t-2px -2px 8px 0px rgba( var(--color-light), 0.6),\n\t\t\n\t\t1px 1px 4px 0px rgba( var(--color-shadow), 0.06), \n\t\t2px 2px 8px 0px rgba( var(--color-shadow), 0.06);\n\tfont-size: 18px;\n\tline-height: 60px;\n\t-webkit-appearance: none;\n\t   -moz-appearance: none;\n\t        appearance: none;\n}\n\n.select::-ms-expand {\n\t\tdisplay: none;\n\t}\n\n.select:focus {\n\t\toutline: none;\n\t}\n\n.select option {\n\t\tfont-weight: normal;\n\t}\n\n.switch {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tcursor: pointer;\n}\n\n.switch__input {\n    position: absolute;\n\t\theight: 100%;\n    left: 0;\n    top: 0;\n    width: 100%;\n\t\tpointer-events: none;\n    opacity: .0001;\n\t}\n\n.switch__box {\n    height: 28px;\n    width: 52px;\n\t\tmargin-right: var(--space-m);\n\t\tbackground-color: var(--color-bg-default);\n    border-radius: var(--radius-xs);\n\t\tbox-shadow:\n\t\t\tinset -2px -2px 2px 0px rgba( var(--color-light), 0.6), \n\t\t\tinset -4px -4px 4px 0px rgba( var(--color-light), 0.6),\n\n\t\t\tinset 2px 2px 2px 0px rgba( var(--color-shadow), 0.06),\n\t\t\tinset 4px 4px 4px 0px rgba( var(--color-shadow), 0.06),\n\t\t\tinset 0 0 green;\n\t\ttransition: box-shadow 0.2s ease;\n\t}\n\n.switch__box::before {\n    content: '';\n    position: absolute;\n    top: 4px; left: 4px;\n    width: 20px;\n\t\theight: 20px;\n\t\tborder-radius: 4px;\n\t\tbackground-color: var(--color-control-bg-default);\n\t\tbox-shadow: \n\t\t\tinset 1px 1px 1px rgba( var(--color-light), 0.6 ),\n\t\t\tinset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),\n\n\t\t\t-1px -1px 1px 0px rgba( var(--color-light), 0.6),\n\t\t\t-1px -1px 4px 0px rgba( var(--color-light), 0.6), \n\t\t\t-2px -2px 8px 0px rgba( var(--color-light), 0.6),\n\n\t\t\t1px 1px 1px 0px rgba( var(--color-shadow), 0.06),\n\t\t\t1px 1px 4px 0px rgba( var(--color-shadow), 0.06), \n\t\t\t2px 2px 8px 0px rgba( var(--color-shadow), 0.06)\n\t\t\t;\n    transition: transform .1825s ease-in-out;\n\t}\n\n.switch__box::after {\n    content: '';\n    position: absolute;\n    top: 8px;\n\t\tleft: 8px;\n    width: 4px;\n\t\theight: 4px;\n\t\tborder-radius: 50%;\n\t\tbackground-color: var(--color-control-bg-default);\n\t\tbox-shadow:\n\t\t\t-1px -1px 1px 0px rgba( var(--color-light), 0.8),\n\t\t\t-1px -1px 4px 0px rgba( var(--color-light), 0.8), \n\t\t\t-2px -2px 8px 0px rgba( var(--color-light), 0.8),\n\n\t\t\t1px 1px 1px 0px rgba( var(--color-shadow), 0.1),\n\t\t\t1px 1px 4px 0px rgba( var(--color-shadow), 0.1), \n\t\t\t2px 2px 8px 0px rgba( var(--color-shadow), 0.1),\n\t\t\t\n\t\t\t8px 0px var(--color-control-bg-default),\n\t\t\t7px -1px 1px 0px rgba( var(--color-light), 0.8),\n\t\t\t6px -1px 4px 0px rgba( var(--color-light), 0.8), \n\t\t\t6px -2px 8px 0px rgba( var(--color-light), 0.8),\n\n\t\t\t9px 1px 1px 0px rgba( var(--color-shadow), 0.1),\n\t\t\t9px 1px 4px 0px rgba( var(--color-shadow), 0.1), \n\t\t\t10px 2px 8px 0px rgba( var(--color-shadow), 0.1),\n\t\t\t\n\t\t\t8px 8px var(--color-control-bg-default), \n\t\t\t7px 7px 1px 0px rgba( var(--color-light), 0.8),\n\t\t\t7px 7px 4px 0px rgba( var(--color-light), 0.8), \n\t\t\t6px 6px 8px 0px rgba( var(--color-light), 0.8),\n\n\t\t\t9px 9px 1px 0px rgba( var(--color-shadow), 0.1),\n\t\t\t9px 9px 4px 0px rgba( var(--color-shadow), 0.1), \n\t\t\t10px 10px 8px 0px rgba( var(--color-shadow), 0.1),\n\t\t\t\n\t\t\t0px 8px var(--color-control-bg-default),\n\t\t\t-1px 6px 1px 0px rgba( var(--color-light), 0.8),\n\t\t\t-1px 6px 4px 0px rgba( var(--color-light), 0.8), \n\t\t\t-2px 9px 8px 0px rgba( var(--color-light), 0.8),\n\n\t\t\t1px 9px 1px 0px rgba( var(--color-shadow), 0.1),\n\t\t\t1px 9px 4px 0px rgba( var(--color-shadow), 0.1), \n\t\t\t2px 10px 8px 0px rgba( var(--color-shadow), 0.1);\n    transition: transform .1825s ease-in-out;\n\t}\n\n.switch__input:checked + .switch__box::before, .switch__input:checked + .switch__box::after {\n    transform: translatex(24px);\n\t}\n\n.switch__input:checked + .switch__box::before {\n\t\tbox-shadow: \n\t\t\tinset 1px 1px 1px rgba( var(--color-light), 0.6 ),\n\t\t\tinset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),\n\t\t\t\n\t\t\tinset 0 0 0px 1px rgba(  var(--color-glow), 0.24),\n\t\t\tinset 0 0 4px 1px rgba(  var(--color-glow), 0.24),\n\n\t\t\t-1px -1px 1px 0px rgba( var(--color-light), 0.16),\n\t\t\t-1px -1px 4px 0px rgba( var(--color-light), 0.16), \n\t\t\t-2px -2px 8px 0px rgba( var(--color-light), 0.16),\n\n\t\t\t1px 1px 1px 0px rgba( var(--color-shadow), 0.06),\n\t\t\t1px 1px 4px 0px rgba( var(--color-shadow), 0.06), \n\t\t\t2px 2px 8px 0px rgba( var(--color-shadow), 0.06)\n\t\t\t;\n\t}\n\n.switch__input:checked + .switch__box {\n    box-shadow: \n\t\t\tinset -2px -2px 2px 0px rgba( var(--color-light), 0.12), \n\t\t\tinset -4px -4px 4px 0px rgba( var(--color-light), 0.12),\n\t\t\t\n\t\t\tinset 0 0 0px 1px rgba(  var(--color-glow), 0.3),\n\t\t\tinset 0 0 4px 1px rgba(  var(--color-glow), 0.3),\n\t\t\tinset 0 0 8px 1px rgba(  var(--color-glow), 0.3),\n\n\t\t\tinset 2px 2px 2px 0px rgba( var(--color-shadow), 0.06),\n\t\t\tinset 4px 4px 4px 0px rgba( var(--color-shadow), 0.06),\n\t\t\tinset 54px 0 var(--color-control-bg-action),\n\t\t\n\t\t\t0 0 4px 1px rgba(  var(--color-glow), 0.16),\n\t\t\t0 0 12px 1px rgba(  var(--color-glow), 0.16);\n\t}\n\n\n@font-face {\n    font-family: 'Digital';\n    src: url('https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/1329536\/subset-Digital-7Mono.woff2') format('woff2'),\n        url('https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/1329536\/subset-Digital-7Mono.woff') format('woff');\n    font-weight: normal;\n    font-style: normal;\n}\n\n@import url('https:\/\/fonts.googleapis.com\/css?family=Montserrat:400,400i,600,700,900&amp;display=swap');<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1391,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[16,70],"class_list":["post-1390","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other","tag-htmlcss","tag-ui-kit"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1390","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=1390"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1390\/revisions"}],"predecessor-version":[{"id":1392,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1390\/revisions\/1392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1391"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}