Add 'Dialoga nas Redes' on header

Leonardo Merlin
1 parent e4bbb12f
Showing 4 changed files with 44 additions and 28 deletions Show diff stats
src/app/components/navbar/navbar.html
src/app/components/navbar/navbar.scss
src/app/components/social-share/social-share.scss
src/app/index.scss
 <div class="app-navbar">
+  <div id="dialoga-nas-redes">
+    <div class="text text-right">
+      <p>Dialoga<br>Nas Redes</p>
+    </div>
+    <social-share></social-share>
+  </div>
   <nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
@@ -103,3 +103,17 @@
         }
     }
 }
+
+#dialoga-nas-redes {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1000;
+
+    .text {
+        position: absolute;
+        top: 5px;
+        right: 210px;
+        width: 100px;
+    }
+}
 \ No newline at end of file
 .social-share {
+    min-width: 200px;
+    padding: 5px;
+    height: 47px;
+
+    &:after {
+        clear: both;
+    }
+
     &.list-inline {
         margin: 0;
     }
+    li {
+        float: left;
+        padding: 0;
+        margin: 0;
+        width: 45px;
+        text-align: center;
+
+        & > a {
+            padding: 0;
+        }
+
+        &:first-child {
+            // margin-left: 5px;
+        }
+    }
 }
+
@@ -155,34 +155,6 @@ body {
     }
 }
  
-
-.social-share {
-    min-width: 200px;
-    background-color: #eee;
-    padding: 5px;
-    height: 47px;
-
-    &:after {
-        clear: both;
-    }
-
-    li {
-        float: left;
-        padding: 0;
-        margin: 0;
-        width: 45px;
-        text-align: center;
-
-        & > a {
-            padding: 0;
-        }
-
-        &:first-child {
-            // margin-left: 5px;
-        }
-    }
-}
-
 .icon {
     display: inline-block;
     vertical-align: middle;
1	1	<div class="app-navbar">
	2	+ <div id="dialoga-nas-redes">
	3	+ <div class="text text-right">
	4	+ <p>Dialoga<br>Nas Redes</p>
	5	+ </div>
	6	+ <social-share></social-share>
	7	+ </div>
2	8	<nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">
3	9	<div class="navbar-header">
4	10	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
...	...
...	...	@@ -103,3 +103,17 @@
103	103	}
104	104	}
105	105	}
	106	+
	107	+#dialoga-nas-redes {
	108	+ position: absolute;
	109	+ right: 0;
	110	+ top: 0;
	111	+ z-index: 1000;
	112	+
	113	+ .text {
	114	+ position: absolute;
	115	+ top: 5px;
	116	+ right: 210px;
	117	+ width: 100px;
	118	+ }
	119	+}
106	120	\ No newline at end of file
...	...
1	1	.social-share {
	2	+ min-width: 200px;
	3	+ padding: 5px;
	4	+ height: 47px;
	5	+
	6	+ &:after {
	7	+ clear: both;
	8	+ }
	9	+
2	10	&.list-inline {
3	11	margin: 0;
4	12	}
	13	+ li {
	14	+ float: left;
	15	+ padding: 0;
	16	+ margin: 0;
	17	+ width: 45px;
	18	+ text-align: center;
	19	+
	20	+ & > a {
	21	+ padding: 0;
	22	+ }
	23	+
	24	+ &:first-child {
	25	+ // margin-left: 5px;
	26	+ }
	27	+ }
5	28	}
	29	+
...	...
...	...	@@ -155,34 +155,6 @@ body {
155	155	}
156	156	}
157	157
158		-
159		-.social-share {
160		- min-width: 200px;
161		- background-color: #eee;
162		- padding: 5px;
163		- height: 47px;
164		-
165		- &:after {
166		- clear: both;
167		- }
168		-
169		- li {
170		- float: left;
171		- padding: 0;
172		- margin: 0;
173		- width: 45px;
174		- text-align: center;
175		-
176		- & > a {
177		- padding: 0;
178		- }
179		-
180		- &:first-child {
181		- // margin-left: 5px;
182		- }
183		- }
184		-}
185		-
186	158	.icon {
187	159	display: inline-block;
188	160	vertical-align: middle;
...	...