{"id":76,"date":"2020-06-25T17:07:16","date_gmt":"2020-06-25T17:07:16","guid":{"rendered":"http:\/\/localhost:8888\/LD_style_guide\/?page_id=76"},"modified":"2021-04-07T20:11:03","modified_gmt":"2021-04-07T20:11:03","slug":"input-fields","status":"publish","type":"page","link":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/input-fields\/","title":{"rendered":"Input Fields"},"content":{"rendered":"\n<p>There are few kinds of search input fields on the site. <\/p>\n\n\n\n<h6 class=\"pt-5\">Search Bar (Large)<\/h6>\n\n\n\n<div class=\"mb-5\">\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-1-tab\" href=\"#example-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-1\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-1-tab\" href=\"#description-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-1\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-1-tab\" href=\"#code-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-1\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n    <!-- Tab panes -->\n    <div class=\"tab-content\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-1\" role=\"tabpanel\" aria-labelledby=\"example-1-tab\">\n            <div class=\"row mt-1 mb-5\">\n                <div id=\"largeSearch\" class=\"col-12\">\t\t\t\t\t\t\t\n                    <div id=\"memDocumentSearch\">\n\n                        <div id=\"hp_searchbar\">\n\n                            <div class=\"searchBackgroundGreen\">\n                                <div class=\"searchBox\">\n                                    <input autocapitalize=\"off\" name=\"tag\" id=\"tag\" type=\"search\" placeholder=\"Search documents...\" class=\"tag doc_search init italic ui-autocomplete-input\" autocomplete=\"off\">\n                                    <div class=\"menu-container\" style=\"width: 524px; max-width: 524px;\">\n\n                                    <\/div>\n                                <\/div>\n                                <div class=\"goContainer\">\n                                    <input name=\"go\" type=\"button\" class=\"goButton greenGradient\" value=\"Search\" searchfor=\"tag\">\t\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-1\" role=\"tabpanel\" aria-labelledby=\"description-1-tab\">\n            <div class=\"col-12\">\n                <p>The Large Search Bar is located on the home page. <\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-1\" role=\"tabpanel\" aria-labelledby=\"code-1-tab\">\n            <section>\n                <div class=\"col greyvalidator \">\n                    <pre><code>\n                        &lt;button class=\"hp_searchbar\"&gt;Search&lt;\/button&gt; \t\t\t\n                    <\/code><\/pre>\n\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<h6 class=\"pt-5\">Search Bar (Small)<\/h6>\n\n\n\n<div class=\"mb-5\">\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-2-tab\" href=\"#example-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-2\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-2-tab\" href=\"#description-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-2\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-2-tab\" href=\"#code-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-2\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n    <!-- Tab panes -->\n    <div class=\"tab-content\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-2\" role=\"tabpanel\" aria-labelledby=\"example-2-tab\">\n            <div class=\"row mt-1 mb-5\">\n                <div id=\"smallSearch\" class=\"col-12\">\n                \n                    <div class=\"LDTopMenu\">\n                        <div id=\"header_search\">\n                            <input type=\"search\" id=\"txtSearch\" class=\"search_input ui-autocomplete-input init\" placeholder=\"Search this site...\" autocomplete=\"off\" data-inittext=\"Search this site...\">\n                            <a id=\"btnSearch\" class=\"search_submit\">GO<\/a>\n                        <\/div>                              \n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-2\" role=\"tabpanel\" aria-labelledby=\"description-12-tab\">\n            <div class=\"col-12\">\n                <p>The small search bar is on the main menu on desktop.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-2\" role=\"tabpanel\" aria-labelledby=\"code-2-tab\">\n            <section>\n                <div class=\"col greyvalidator \">\n                    <pre><code>\n            &lt;div class=\"LDTopMenu\"&gt;\n                &lt;div id=\"header_search\"&gt;\n                    &lt;input type=\"text\" id=\"txtSearch\" class=\"search_input ui-autocomplete-input init\" value=\"Search this site...\" autocomplete=\"off\" data-inittext=\"Search this site...\"&gt;\n                    &lt;a id=\"btnSearch\" class=\"search_submit\"&gt;GO&lt;\/a&gt;\n                &lt;\/div&gt;                                \n            &lt;\/div&gt;              \n                    <\/code><\/pre>\n\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<h6 class=\"pt-5\">Input Fields &#8211; Text<\/h6>\n\n\n\n<!-- Tabs -->\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-3-tab\" href=\"#example-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-3\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-3-tab\" href=\"#description-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-3\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-3-tab\" href=\"#code-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-3\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-3\" role=\"tabpanel\" aria-labelledby=\"example-3-tab\">\n            <div class=\"row mt-1 mb-5\">\n\n\n\n<div class=\"col-12\">\t\n\n<div class=\"inputTextContainer\">\n\t\n\t<input class=\"inputText\" name=\"\" maxlength=\"16\" value=\"\" type=\"text\" autocomplete=\"off\" placeholder=\"\">\n\t<label class=\"queLabel\">Lorem Ipsum<\/label>\n\t\n<\/div>\n\n<\/div><!-- End col-12 -->\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-3\" role=\"tabpanel\" aria-labelledby=\"description-3-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>(a) Regular Input Field: (Label + Field Line)<br>(b) Numeric Input Field: (Label + Component in-front of Field Line)<br>!Important! &#8211; Questions to not be present in label form.<br>Active Label Text: Open Sans, 16px, SemiBold (600), #88ABAC<br>Pre-Label Text: Open Sans, 20px, Regular (400), #999999<br>Active Text: Open Sans, 20px, Regular (400), #333333<br>(Default Line: 1px, Solid, #333333) (Active Line: 2px, Solid, #88ABAC)<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-3\" role=\"tabpanel\" aria-labelledby=\"code-3-tab\">\n            <section>\n                <div class=\"col greyvalidator \">\n                    <pre><code>\n\t&lt;button class=\"largeActiveButton\"&gt;Cancel Subscription&lt;\/button&gt;\t\t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel Subscription&lt;\/button&gt; \t\n\t&lt;button class=\"largeActiveButton\"&gt;Submit&lt;\/button&gt; \t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel&lt;\/button&gt; \t\t\n\t<\/code><\/pre>\n\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Input Fields &#8211; Numeric<\/h6>\n\n\n\n<!-- Tabs -->\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-5-tab\" href=\"#example-5\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-5\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-5-tab\" href=\"#description-5\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-5\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-5-tab\" href=\"#code-5\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-5\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-5\" role=\"tabpanel\" aria-labelledby=\"example-5-tab\">\n            <div class=\"row mt-1 mb-5\">\n<div class=\"col-12\">\t\n\n\n\n<div class=\"inputTextContainer\">\n\t\n\t<span style=\"display: inline-block;\nposition: relative;\nfont-size: 22px;\ncolor: #333;\ntext-align: center;\nvertical-align: top;\npadding-right: 5px;\ncursor: default;\nfloat: none;\">$<\/span>\n<input class=\"inputText\" name=\"\" maxlength=\"16\" value=\"\" type=\"text\" autocomplete=\"off\" placeholder=\"\">\n\t<label style=\"left: 36px;\" class=\"queLabel\">Lorem Ipsum<\/label>\n\t\n<\/div>\n\n\n\n<\/div><!-- End col-12 -->\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-5\" role=\"tabpanel\" aria-labelledby=\"description-5-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Go to <a href=\"https:\/\/www.lawdepot.com\/contracts\/loan-agreement\/\">Loan Agreement<\/a> under <strong>Terms<\/strong> to see live version.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-5\" role=\"tabpanel\" aria-labelledby=\"code-5-tab\">\n            <section>\n                <div class=\"col greyvalidator \">\n                    <pre><code>\n\t&lt;button class=\"largeActiveButton\"&gt;Cancel Subscription&lt;\/button&gt;\t\t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel Subscription&lt;\/button&gt; \t\n\t&lt;button class=\"largeActiveButton\"&gt;Submit&lt;\/button&gt; \t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel&lt;\/button&gt; \t\t\n\t<\/code><\/pre>\n\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Input Fields &#8211; Percent<\/h6>\n\n\n\n        <!-- Tabs -->\n\n<ul class=\"nav nav-tabs mb-5\">\n\n<li class=\"nav-item\">\n\n<a class=\"nav-link active\" id=\"example-6-tab\" href=\"#example-6\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-6\" aria-selected=\"true\">Example<\/a>\n\n<\/li>\n\n<li class=\"nav-item\">\n\n<a class=\"nav-link\" id=\"description-6-tab\" href=\"#description-6\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-6\" aria-selected=\"false\">Description<\/a>\n\n<\/li>\n\n<li class=\"nav-item\">\n\n<a class=\"nav-link\" id=\"code-6-tab\" href=\"#code-6\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-6\" aria-selected=\"false\">Code<\/a>\n\n<\/li>\n\n<\/ul>\n\n\n\n<!-- Tab panes -->\n\n<div class=\"tab-content mb-5\">\n\n<!-- Tab Example -->\n\n<div class=\"tab-pane active\" id=\"example-6\" role=\"tabpanel\" aria-labelledby=\"example-6-tab\">\n\n<div class=\"row mt-1 mb-5\">\n\n<div class=\"col-12\">\n\n\n\n<input class=\"inputInline\"><span class=\"inputPercent\">%<\/span>\n\n\n\n<\/div>\n\n<!-- End col-12 -->\n\n<\/div>\n\n<\/div>\n\n\n\n<!-- Tab Description -->\n\n<div class=\"tab-pane\" id=\"description-6\" role=\"tabpanel\" aria-labelledby=\"description-6-tab\">\n\n<div class=\"col-12\">\n\n\n\n<p>Go to <a href=\"https:\/\/www.lawdepot.com\/contracts\/loan-agreement\/\">Loan Agreement<\/a> under <strong>Terms<\/strong> to see live version.<\/p>\n\n\n\n<\/div>\n\n<\/div>\n\n\n\n<!-- Tab Code -->\n\n<div class=\"tab-pane\" id=\"code-6\" role=\"tabpanel\" aria-labelledby=\"code-6-tab\">\n\n<section>\n\n<div class=\"col greyvalidator \">\n\n\n\n<pre><code>&lt;p&gt;Here is some code.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<\/div>\n\n<\/section>\n\n<\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are few kinds of search input fields on the site. Search Bar (Large) Example Description Code The Large Search Bar is located on the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/76"}],"collection":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":99,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/76\/revisions"}],"predecessor-version":[{"id":1313,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/76\/revisions\/1313"}],"wp:attachment":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/media?parent=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}