Implementando a barra compacta e o campo de busca com apenas um input text

src/assets/js/js.js

@@ -120,6 +120,50 @@ jQuery(document).ready(function( $ ) {
     jQuery('.button-high-contrast').on('click',function() {
         jQuery('body').toggleClass('contraste');
     });
+
+    /*
+     * BOTÃO DE EXIBIÇÃO DO FORMULÁRIO DE BUSCA
+    */
+    jQuery('.tainacan-search-button').on('click',function() {
+        var _elementoPai = jQuery(this).parents('.input-group');
+
+        if (!_elementoPai.hasClass('hover')) {
+            _elementoPai.addClass('hover');
+
+            return false;
+        } else {
+            if (jQuery('#tainacan-search-header').val() == '') {
+                _elementoPai.removeClass('hover');
+
+                return false;
+            }
+        }
+    });
+
+    jQuery('#tainacan-search-header').on({
+        'focus': function() {
+            jQuery(this).parents('.input-group').addClass('hover');
+        },
+        'blur': function() {
+            jQuery(this).parents('.input-group').removeClass('hover');
+        }
+    });
+
+    /*
+     * AO CLICAR EM QUALQUER LUGAR DA PÁGINA, O CAMPO DE BUSCA ABERTO É FECHADO
+    */
+    var _formBusca = jQuery('.tainacan-search-form'),
+        _formBuscaFilho = _formBusca.find('.input-group');
+
+    _formBusca.on('click',function(e) {
+        e.stopPropagation();
+    });
+
+    jQuery('body').on('click',function() {
+        if (_formBuscaFilho.hasClass('hover')) {
+            _formBuscaFilho.removeClass('hover');
+        }
+    });
 });
 jQuery(document).ready(function(e) {
         var t = e(".dotmore");

src/assets/scss/style.scss

@@ -104,9 +104,8 @@ nav{
             top: calc(100% + 2px);
             right: 0;
             width: 204px;
-            height: 27px;
             padding: 0;
-            left: inherit;
+            left: inherit; display: block;
             .input-group {
                 border: 0;
             }
@@ -246,20 +245,73 @@ nav{
             }
         }
         .form-control-feedback {
+            width: 34px;
+            height: 30px;
+            font-size: 1.1875rem !important;
+            color: #3596e0;
+            text-align: center;
+            line-height: 30px;
+            cursor: pointer;
+            display: block;
             position: absolute;
             top: 50%;
             right: 1px;
-            left: 5px;
+            border: none;
-            display: block;
+            background: none;
-            width: 34px;
+            z-index: 9;
-            height: 30px;
-            line-height: 30px;
-            text-align: center;
-            color: #3596e0;
-            cursor: pointer;
-            left: initial;
-            font-size: 1.1875rem;
             transform: translate(0,-50%);
+
+            span:before {
+                height: 29px;
+                line-height: 29px;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .navbar { z-index: 2; }
+    .tainacan-search-form .input-group {
+        .form-control {
+            width: 200px;
+            height: 38px;
+            padding: 1rem;
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            opacity: 0;
+            border-radius: .25rem;
+            border: 1px solid transparent;
+            background-clip: padding-box;
+            background-color: #fff;
+            z-index: -2;
+            transition: transform 0.35s, opacity 0.35s, border 0.35s, z-index 0s 0.35s;
+
+            &:focus {
+                width: 200px;
+                padding: 1rem;
+                opacity: 1;
+                border: 1px solid rgba(0,0,0,0.15);
+                z-index: 2;
+                transform: translate(0,50px);
+                transition: transform 0.35s, opacity 0.35s, border 0.35s;
+            }
+        }
+        &:hover, &.hover {
+            .form-control {
+                width: 200px;
+                padding: 1rem;
+                border: 1px solid rgba(0,0,0,0.15);
+            }
+        }
+        &.hover .form-control {
+            width: 200px;
+            padding: 1rem;
+            opacity: 1;
+            border: 1px solid rgba(0,0,0,0.15);
+            z-index: 2;
+            transform: translate(0,50px);
+            transition: transform 0.35s, opacity 0.35s, border 0.35s;
         }
     }
 }
@@ -562,7 +614,7 @@ nav{
     position: relative;
     border-bottom: 1px solid #01295C;
     background-color: #fff;
-    z-index: 2;
+    z-index: 4;
 }
 .accessibility-bar__container {
     width: 100%;
@@ -684,6 +736,35 @@ nav{
     .accessibility-options { margin-top: 20px; }
 }
 
+/* MODO COMPACTO DA BARRA DE ACESSIBILIDADE */
+
+.accessibility-bar.compact-mode {
+    position: absolute;
+    top: 0;
+    border: none;
+    background: none;
+    transform: translate(0,-100px);
+}
+.accessibility-bar.compact-mode .accessibility-options { display: none; }
+.accessibility-bar.compact-mode .accessibility-shortcuts a {
+    padding: 5px 10px;
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    opacity: 0;
+    background-color: #fff;
+    z-index: -2;
+    transform: translate(-50%,100px);
+}
+.accessibility-bar.compact-mode .accessibility-shortcuts a:focus {
+    opacity: 1;
+    z-index: 2;
+}
+
+@media screen and (max-width: 500px) {
+    .accessibility-bar.compact-mode .accessibility-shortcuts a:focus { transform: translate(-50%,160px); }
+}
+
 /*
 - ALTO CONTRASTE
 */

src/header.php

@@ -11,7 +11,7 @@
 </head>
 <body <?php body_class(); ?>>
     <!-- MENU DE ACESSIBILIDADE -->
-    <div class="accessibility-bar">
+    <div class="accessibility-bar compact-mode">
         <div class="accessibility-bar__container">
             <ul class="accessibility-shortcuts" role="menubar">
                 <li role="menuitem"><a href="#content" accesskey="c"><span>c</span> Ir para o conteúdo</a></li>
@@ -56,25 +56,13 @@
         <div class="container-fluid max-large px-0 margin-one-column" id="topNavbar">
             <?php echo tainacan_get_logo(); ?>
             <div class="btn-group ml-auto"> 
-                    <form class="form-horizontal my-2 my-md-0 tainacan-search-form d-none d-md-block" [formGroup]="searchForm" role="form" (keyup.enter)="onSubmit()">
+                <form class="form-horizontal my-2 my-md-0 tainacan-search-form" [formGroup]="searchForm" role="form" (keyup.enter)="onSubmit()">
                     <div class="input-group">
                         <label for="tainacan-search-header" class="sr-only">Digite o que procura</label>
                         <input type="text" name="s" placeholder="<?php _e('Search', 'tainacan-theme'); ?>" class="form-control" formControlName="searchText" size="50" id="tainacan-search-header">
-                            <span class="text-midnight-blue input-group-btn mdi mdi-magnify form-control-feedback"></span>
+                        <button type="submit" class="form-control-feedback tainacan-search-button"><span class="text-midnight-blue input-group-btn mdi mdi-magnify"></span></button>
                     </div>
                 </form>
-                    <div class="dropdown tainacan-form-dropdown d-md-none">
-                        <a class="btn btn-link text-midnight-blue px-1 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="mdi mdi-magnify"></i><span>Pesquisar</span></a>
-
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-                            <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
-                                <div class="input-group border">
-                                    <label for="tainacan-search-header-mobile" class="sr-only">Digite o que procura</label>
-                                    <input class="form-control py-2 border-0" type="search" name="s" placeholder="<?php _e('Search', 'tainacan-theme'); ?>" id="tainacan-search-header-mobile">
-                                </div>
-                            </form>
-                        </div>
-                    </div>
             </div>
         </div>
     </nav>

src/tainacan/single-items.php

@@ -27,7 +27,7 @@
                                 </div>
                             </header>
                             <?php if (tainacan_has_document()): ?>
-                                <h1 class="title-content-items"><?php _e('Document', 'tainacan-theme'); ?></h1>
+                                <h3 class="title-content-items"><?php _e('Document', 'tainacan-theme'); ?></h3>
                                 <section class="tainacan-content single-item-collection margin-two-column">
                                     <div class="single-item-collection--document">
                                         <?php tainacan_the_document(); ?>
@@ -52,7 +52,7 @@
 
                         <div class="mt-3 tainacan-single-post">
                             <article role="article">
-                                <h1 class="title-content-items"><?php _e('Attachments', 'tainacan-theme'); ?></h1>
+                                <h3 class="title-content-items"><?php _e('Attachments', 'tainacan-theme'); ?></h3>
                                 <section class="tainacan-content single-item-collection margin-two-column">
                                     <div class="single-item-collection--attachments">
                                         <?php foreach ( $attachment as $attachment ) { ?>
@@ -81,7 +81,7 @@
 
                     <div class="mt-3 tainacan-single-post">
                         <article role="article">
-                            <!-- <h1 class="title-content-items"><?php _e('Information', 'tainacan-theme'); ?></h1> -->
+                            <!-- <h3 class="title-content-items"><?php _e('Information', 'tainacan-theme'); ?></h3> -->
                             <section class="tainacan-content single-item-collection margin-two-column">
                                 <div class="single-item-collection--information justify-content-center">
                                     <div class="row">