Refact: header layout / css

Leonardo Merlin
1 parent 9d0280c6
Showing 4 changed files with 168 additions and 51 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/layout.scss
 <div class="app-navbar">
   <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">
-        <span class="sr-only">Alternar menu de navegação</span>
-        <span class="icon-bar" aria-hidden="true"></span>
-        <span class="icon-bar" aria-hidden="true"></span>
-        <span class="icon-bar" aria-hidden="true"></span>
-      </button>
-      <a class="navbar-brand" ui-sref="inicio">
-        <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />
-      </a>
+      <div class="row">
+        <div class="row-height">
+          <div class="col-xs-10 col-xs-height col-middle">
+            <a class="navbar-brand" ui-sref="inicio">
+              <img src="/assets/images/logo.png" class="img-responsive" alt="Dialoga Brasil | O país fica melhor quando você participa" />
+            </a>
+          </div>
+          <div class="col-xs-2 col-xs-height col-middle">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
+              <span class="sr-only">Alternar menu de navegação</span>
+              <span class="icon-bar" aria-hidden="true"></span>
+              <span class="icon-bar" aria-hidden="true"></span>
+              <span class="icon-bar" aria-hidden="true"></span>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
     <div id="navbar-collapse" class="collapse navbar-collapse">
@@ -28,7 +36,7 @@
     </div>
   </nav>
-  <div id="dialoga-nas-redes">
+  <div id="dialoga-nas-redes" class="hidden-xs">
     <div class="text text-right">
       <p>DIALOGA<br><b>NAS REDES</b></p>
     </div>
@@ -19,8 +19,6 @@
     }
     .navbar-toggle {
-        padding: 12px 10px;
-        margin-top: 20px;
         border-radius: 100%;
         background-color: #5e749d;
@@ -30,13 +28,12 @@
         }
         @media screen and (max-width: $screen-md) {
-            margin-top: 45px;
+            padding: 12px 10px;
+            margin: 0;
         }
     }
     .navbar-nav .divider span {
-        padding: 0 0 10px 0;
-        margin: 53px 10px 0 10px;
         display: block;
         @media screen and (max-width: $screen-md) {
@@ -48,11 +45,9 @@
         padding: 0;
     }
-    .navbar-nav > li {
+    .navbar-nav {
-        & > a {
-            padding: 0 0 10px 0;
-            margin: 55px 10px 0 10px;
+        li > a {
             text-transform: uppercase;
             color: #616161;
             font-weight: bold;
@@ -65,41 +60,149 @@
             .contraste & {
                 color: #fff;
             }
+        }
+
+        li.active > a {
+            border-bottom: 2px solid #77BB34;
+        }
+    }
-            @media screen and (max-width: $screen-md) {
-                margin-top: 5px;
+    .contraste & {
+        .nav > li > a:hover,
+        .nav > li > a:focus {
+            color: #fff;
+        }
+
+        .active a {
+            border-bottom-color: #fff;
+        }
+    }
+
+    // <= Mobile
+    @media screen and (max-width: ($screen-sm - 1)) {
+        .navbar-collapse {
+            margin: 0 -15px;
+        }
+
+        .navbar-nav {
+            background-color: #eee;
+
+            & > li {
+                // border-top: 1px solid #ccc;
+                -moz-border-image: -moz-linear-gradient(left, #eee 0%, #ccc 100%);
+                -webkit-border-image: -webkit-linear-gradient(left, #eee 0%, #ccc 100%);
+                border-image: linear-gradient(to right, #eee 0%, #ccc 100%);
+                border-image-slice: 1;
+
+                border-top: 1px solid #ccc;
+                border-bottom: 0px solid #ccc;
+                border-left: 0px solid #ccc;
+                border-right: 0px solid #ccc;
+                &:last-child {
+                    border-bottom: 1px solid #ccc;
+                }
+            }
+
+            & > li > a {
+                padding: 12px 20px;
+                margin: 0;
                 text-align: right;
             }
+
+            & > li.active > a {
+                border-bottom: none;
+                border-right: 4px solid #77BB34;
+            }
+
+            .dropdown-toggle {
+                margin-top: 0px;
+
+            }
+            .dropdown-menu {
+                position: relative;
+                margin-right: 10px;
+            }
+
+            .social-share {
+                float: right;
+            }
+        }
+
+    }
+
+    // >= Table, < Destop
+    @media screen and (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
+        .navbar-brand {
+            padding-top: 0;
+            margin-top: 0;
+            margin-bottom: 60px;
         }
-        &.active > a {
-            border-bottom: 3px solid #77BB34;
+        .navbar-collapse {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
-            @media screen and (max-width: $screen-md) {
-                border: none;
-                background-color: #eee;
-                padding: 10px 30px 10px 0px;
-                border-right: 3px solid #77BB34;
+            ul.navbar-nav {
+                width: 100%;
+                float: none;
+            }
+
+            li > a {
+                margin: 0 10px;
+                padding: 0 0 10px 0;
+            }
+
+            li.dropdown {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+
+                .dropdown-toggle {
+                    position: relative;
+                    width: 160px;
+                    margin: 0 5px 5px 0;
+                    padding: 0;
+                }
             }
         }
+    }
+    // >= Desktop
+    @media screen and (min-width: $screen-md) {
-        .dropdown-toggle {
-            margin-top: 50px;
+        li > a {
+            padding: 15px 0;
+            margin: 0 9px;
+        }
-            @media screen and (max-width: $screen-md) {
-                margin-top: 0px;
+        li.divider span{
+            padding: 12px 0;
+            line-height: 20px;
+        }
+
+        li.dropdown {
+            .dropdown-toggle {
+                padding: 6px 10px;
+                margin: 0;
             }
         }
     }
-    .contraste & {
-        .nav > li > a:hover,
-        .nav > li > a:focus {
-            color: #fff;
+    // > Desktop Large
+    @media screen and (min-width: $screen-lg) {
+        .navbar-brand {
+            margin-bottom: 30px;
         }
-        .active a {
-            border-bottom-color: #fff;
+        ul.navbar-nav {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+        }
+
+        li.divider span{
+            padding: 12px 6px;
         }
     }
 }
@@ -116,4 +219,4 @@
         right: 210px;
         width: 100px;
     }
-}
 \ No newline at end of file
+}
@@ -10,6 +10,7 @@
     &.list-inline {
         margin: 0;
     }
+
     li {
         float: left;
         padding: 0;
@@ -33,7 +34,7 @@
         background-color: #E0E0E0;
         border-radius: 5px;
-        @media screen and (max-width: $screen-xs) {
+        @media screen and (max-width: $screen-sm) {
             background-color: #fff;
         }
@@ -58,6 +59,11 @@
         right: 20px;
         border-width: 0 10px 10px;
         border-bottom-color: #E0E0E0;
+
+
+        @media screen and (max-width: $screen-sm) {
+            border-bottom-color: #fff;
+        }
     }
     @media screen and (max-width: $screen-xs) {
@@ -24,28 +24,28 @@
   vertical-align: bottom;
 }
-@media (min-width: 480px) {
-  .row-xs-height {
+// @media (min-width: 480px) {
+.row-xs-height {
     display: table;
     table-layout: fixed;
     height: 100%;
     width: 100%;
-  }
-  .col-xs-height {
+}
+.col-xs-height {
     display: table-cell;
     float: none;
     height: 100%;
-  }
-  .col-xs-top {
+}
+.col-xs-top {
     vertical-align: top;
-  }
-  .col-xs-middle {
+}
+.col-xs-middle {
     vertical-align: middle;
-  }
-  .col-xs-bottom {
+}
+.col-xs-bottom {
     vertical-align: bottom;
-  }
 }
+// }
 @media (min-width: 768px) {
   .row-sm-height {
	@@ -19,8 +19,6 @@		@@ -19,8 +19,6 @@
19	}	19	}
20		20
21	.navbar-toggle {	21	.navbar-toggle {
22	- padding: 12px 10px;
23	- margin-top: 20px;
24	border-radius: 100%;	22	border-radius: 100%;
25	background-color: #5e749d;	23	background-color: #5e749d;
26		24
	@@ -30,13 +28,12 @@		@@ -30,13 +28,12 @@
30	}	28	}
31		29
32	@media screen and (max-width: $screen-md) {	30	@media screen and (max-width: $screen-md) {
33	- margin-top: 45px;	31	+ padding: 12px 10px;
		32	+ margin: 0;
34	}	33	}
35	}	34	}
36		35
37	.navbar-nav .divider span {	36	.navbar-nav .divider span {
38	- padding: 0 0 10px 0;
39	- margin: 53px 10px 0 10px;
40	display: block;	37	display: block;
41		38
42	@media screen and (max-width: $screen-md) {	39	@media screen and (max-width: $screen-md) {
	@@ -48,11 +45,9 @@		@@ -48,11 +45,9 @@
48	padding: 0;	45	padding: 0;
49	}	46	}
50		47
51	- .navbar-nav > li {	48	+ .navbar-nav {
52		49
53	- & > a {
54	- padding: 0 0 10px 0;
55	- margin: 55px 10px 0 10px;	50	+ li > a {
56	text-transform: uppercase;	51	text-transform: uppercase;
57	color: #616161;	52	color: #616161;
58	font-weight: bold;	53	font-weight: bold;
	@@ -65,41 +60,149 @@		@@ -65,41 +60,149 @@
65	.contraste & {	60	.contraste & {
66	color: #fff;	61	color: #fff;
67	}	62	}
		63	+ }
		64	+
		65	+ li.active > a {
		66	+ border-bottom: 2px solid #77BB34;
		67	+ }
		68	+ }
68		69
69	- @media screen and (max-width: $screen-md) {
70	- margin-top: 5px;	70	+ .contraste & {
		71	+ .nav > li > a:hover,
		72	+ .nav > li > a:focus {
		73	+ color: #fff;
		74	+ }
		75	+
		76	+ .active a {
		77	+ border-bottom-color: #fff;
		78	+ }
		79	+ }
		80	+
		81	+ // <= Mobile
		82	+ @media screen and (max-width: ($screen-sm - 1)) {
		83	+ .navbar-collapse {
		84	+ margin: 0 -15px;
		85	+ }
		86	+
		87	+ .navbar-nav {
		88	+ background-color: #eee;
		89	+
		90	+ & > li {
		91	+ // border-top: 1px solid #ccc;
		92	+ -moz-border-image: -moz-linear-gradient(left, #eee 0%, #ccc 100%);
		93	+ -webkit-border-image: -webkit-linear-gradient(left, #eee 0%, #ccc 100%);
		94	+ border-image: linear-gradient(to right, #eee 0%, #ccc 100%);
		95	+ border-image-slice: 1;
		96	+
		97	+ border-top: 1px solid #ccc;
		98	+ border-bottom: 0px solid #ccc;
		99	+ border-left: 0px solid #ccc;
		100	+ border-right: 0px solid #ccc;
		101	+ &:last-child {
		102	+ border-bottom: 1px solid #ccc;
		103	+ }
		104	+ }
		105	+
		106	+ & > li > a {
		107	+ padding: 12px 20px;
		108	+ margin: 0;
71	text-align: right;	109	text-align: right;
72	}	110	}
		111	+
		112	+ & > li.active > a {
		113	+ border-bottom: none;
		114	+ border-right: 4px solid #77BB34;
		115	+ }
		116	+
		117	+ .dropdown-toggle {
		118	+ margin-top: 0px;
		119	+
		120	+ }
		121	+ .dropdown-menu {
		122	+ position: relative;
		123	+ margin-right: 10px;
		124	+ }
		125	+
		126	+ .social-share {
		127	+ float: right;
		128	+ }
		129	+ }
		130	+
		131	+ }
		132	+
		133	+ // >= Table, < Destop
		134	+ @media screen and (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
		135	+ .navbar-brand {
		136	+ padding-top: 0;
		137	+ margin-top: 0;
		138	+ margin-bottom: 60px;
73	}	139	}
74		140
75	- &.active > a {
76	- border-bottom: 3px solid #77BB34;	141	+ .navbar-collapse {
		142	+ position: absolute;
		143	+ left: 0;
		144	+ bottom: 0;
		145	+ width: 100%;
77		146
78	- @media screen and (max-width: $screen-md) {
79	- border: none;
80	- background-color: #eee;
81	- padding: 10px 30px 10px 0px;
82	- border-right: 3px solid #77BB34;	147	+ ul.navbar-nav {
		148	+ width: 100%;
		149	+ float: none;
		150	+ }
		151	+
		152	+ li > a {
		153	+ margin: 0 10px;
		154	+ padding: 0 0 10px 0;
		155	+ }
		156	+
		157	+ li.dropdown {
		158	+ position: absolute;
		159	+ right: 0;
		160	+ bottom: 0;
		161	+
		162	+ .dropdown-toggle {
		163	+ position: relative;
		164	+ width: 160px;
		165	+ margin: 0 5px 5px 0;
		166	+ padding: 0;
		167	+ }
83	}	168	}
84	}	169	}
		170	+ }
		171	+ // >= Desktop
		172	+ @media screen and (min-width: $screen-md) {
85		173
86	- .dropdown-toggle {
87	- margin-top: 50px;	174	+ li > a {
		175	+ padding: 15px 0;
		176	+ margin: 0 9px;
		177	+ }
88		178
89	- @media screen and (max-width: $screen-md) {
90	- margin-top: 0px;	179	+ li.divider span{
		180	+ padding: 12px 0;
		181	+ line-height: 20px;
		182	+ }
		183	+
		184	+ li.dropdown {
		185	+ .dropdown-toggle {
		186	+ padding: 6px 10px;
		187	+ margin: 0;
91	}	188	}
92	}	189	}
93	}	190	}
94		191
95	- .contraste & {
96	- .nav > li > a:hover,
97	- .nav > li > a:focus {
98	- color: #fff;	192	+ // > Desktop Large
		193	+ @media screen and (min-width: $screen-lg) {
		194	+ .navbar-brand {
		195	+ margin-bottom: 30px;
99	}	196	}
100		197
101	- .active a {
102	- border-bottom-color: #fff;	198	+ ul.navbar-nav {
		199	+ position: absolute;
		200	+ right: 0;
		201	+ bottom: 0;
		202	+ }
		203	+
		204	+ li.divider span{
		205	+ padding: 12px 6px;
103	}	206	}
104	}	207	}
105	}	208	}
	@@ -116,4 +219,4 @@		@@ -116,4 +219,4 @@
116	right: 210px;	219	right: 210px;
117	width: 100px;	220	width: 100px;
118	}	221	}
119	-}
120	\ No newline at end of file	222	\ No newline at end of file
		223	+}