Merge branch 'valessiobrito-master'

Carlos Vieira
2 parents 17567bac 9c94d4e2
Showing 5 changed files with 51 additions and 39 deletions Show diff stats
README.md
app/templates/exemplo.html
recipes/default/assets/estilo-barra.scss
recipes/default/assets/estilo-footer.scss
recipes/default/assets/imagens/menu.png
@@ -29,9 +29,10 @@ Esses são comandos exemplos, por favor verifique no seu sistema como deve ser i
 		pip install flask
  * assetgen
 		pip install assetgen
-
  * config
 		pip install config
+ * tavutil
+		pip install tavutil
  * node.js
 		apt-get install python-software-properties python g++ make
@@ -51,7 +52,7 @@ Esses são comandos exemplos, por favor verifique no seu sistema como deve ser i
  * uglifyjs
 		npm install -g uglify-js
-
+		(Debian ou Ubuntu: apt-get install node-uglify)
  * zlib
@@ -5,6 +5,16 @@
         <title>Barra Brasil</title>
         <style type="text/css">
+body {
+	font-family: sans-serif, Arial;
+	margin: 0px;
+	padding: 0px;
+}
+
+#content {
+	padding: 50px;
+}
+
 #footer-brasil {
    background: none repeat scroll 0% 0% #00420c;
    padding: 1em 0px;
@@ -22,10 +32,10 @@
 		<li><a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize sua Barra de Governo</a></li>
 	</ul>
 </div>
-
+<div id="content">
         <h1>Barra Brasil</h1>
         <p>Veja as <a href="http://barra.governoeletronico.gov.br/">instruções de como usar a barra</a> no e-PWG.</p>
-		  <br>
+</div><!-- #content -->
 		  <div id="footer-brasil"></div>
  <script defer async src="barra.js" type="text/javascript"></script>
     </body>
@@ -8,7 +8,6 @@
   div, a, ul, li {
     margin: 0;
     padding: 0;
-    border: 0;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
@@ -96,53 +95,54 @@ div#wrapper-barra-brasil {
 #menu-icon {
 	display: hidden;
 	width: 35px;
-	height: 23px;
-	background: embed("imagens/menu.png") no-repeat center;
-}
-
-a:hover#menu-icon {
-	background-color: #dfdfdf;
-	border-radius: 4px 4px 0 0;
+	height: 22px;
+	background: #f1f1f1 embed("imagens/menu.png") no-repeat center;
+	border-bottom: 1px solid #DFDFDF;
 }
 @media only screen and (max-width: 959px)  {
-   #barra-brasil #menu-icon { display:inline-block;  float: right; margin: 5px;
-    background-size: 70%;}
-
-	#barra-brasil nav ul, #barra-brasil nav:active ul { 
-		display: none;
-		position: absolute;
-		padding: 0;
-		background: #fff;
-		width: 50%;
+	#barra-brasil #menu-icon {
+		display:inline-block;
+		float: right;
+		padding: 5px;
 	}
-	#barra-brasil .list {
-	    top: 24px;
-	    background: #EEE;
-	    width: auto;
+	#barra-brasil nav:hover #menu-icon,
+	#barra-brasil nav:active #menu-icon,
+	#barra-brasil nav:focus #menu-icon {
+		background-color: #DDD;
 	}
-	#barra-brasil .list a:hover li {
-   	 background: #DDD;
+	#barra-brasil ul.list,
+	#barra-brasil ul.list:active,
+	#barra-brasil ul.list:focus {
+		overflow: hidden;
+		height: 0px;
+		transition: 0.3s;
+		padding-top: 32px;
+		width: auto;
 	}
 	#barra-brasil .list-item {
-		 display: inline-block;
-		 height: 28px;
-		 padding: 0;
-       border: 2px solid #dfdfdf;
+		display: block;
+		text-align: center;
+		height: 30px;
+		background: #EEE;
+		padding: 0 15px;
+       		border: 1px solid #dfdfdf;
 	}
-	#barra-brasil nav li{
-		text-align: center;
-		width: 100%;
-		padding: 10px 0;
-		margin: 0;
+	#barra-brasil .list a:active li,
+	#barra-brasil .list a:focus li,
+	#barra-brasil .list a:hover li {
+   	 background: #DDD;
 	}
-   #barra-brasil nav:hover ul{
-		display: block;
+	#barra-brasil nav:active ul.list,
+	#barra-brasil nav:focus ul.list,
+	#barra-brasil nav:hover ul.list {
+		height: 150px;
+		transition: 0.5s;
 	}
 	div#wrapper-barra-brasil {
@@ -2,7 +2,8 @@ div#wrapper-footer-brasil {
     position: relative;
     overflow: hidden;
     margin: 0 auto;
-    width: 100%;
+    width: auto;
+    padding: 0 20px;
     max-width: 960px;
 }
 #wrapper-footer-brasil .logo-acesso-footer {