Download as
Browse Code »

Commit 07eb7bf86aa5f921dcb239f18944e278e99ba8f6

Authored by Leonardo Merlin
1 parent 9d0280c6
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Refact: header layout / css

Showing 4 changed files with 168 additions and 51 deletions   Show diff stats
src/app/components/navbar/navbar.html
  Diff comments   View file @07eb7bf
1 1 <div class="app-navbar">
2 2 <nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">
3 3 <div class="navbar-header">
4   - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
5   - <span class="sr-only">Alternar menu de navegação</span>
6   - <span class="icon-bar" aria-hidden="true"></span>
7   - <span class="icon-bar" aria-hidden="true"></span>
8   - <span class="icon-bar" aria-hidden="true"></span>
9   - </button>
10   - <a class="navbar-brand" ui-sref="inicio">
11   - <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />
12   - </a>
  4 + <div class="row">
  5 + <div class="row-height">
  6 + <div class="col-xs-10 col-xs-height col-middle">
  7 + <a class="navbar-brand" ui-sref="inicio">
  8 + <img src="/assets/images/logo.png" class="img-responsive" alt="Dialoga Brasil | O país fica melhor quando você participa" />
  9 + </a>
  10 + </div>
  11 + <div class="col-xs-2 col-xs-height col-middle">
  12 + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
  13 + <span class="sr-only">Alternar menu de navegação</span>
  14 + <span class="icon-bar" aria-hidden="true"></span>
  15 + <span class="icon-bar" aria-hidden="true"></span>
  16 + <span class="icon-bar" aria-hidden="true"></span>
  17 + </button>
  18 + </div>
  19 + </div>
  20 + </div>
13 21 </div>
14 22  
15 23 <div id="navbar-collapse" class="collapse navbar-collapse">
... ... @@ -28,7 +36,7 @@
28 36 </div>
29 37 </nav>
30 38  
31   - <div id="dialoga-nas-redes">
  39 + <div id="dialoga-nas-redes" class="hidden-xs">
32 40 <div class="text text-right">
33 41 <p>DIALOGA<br><b>NAS REDES</b></p>
34 42 </div>
... ...
src/app/components/navbar/navbar.scss
  Diff comments   View file @07eb7bf
... ... @@ -19,8 +19,6 @@
19 19 }
20 20  
21 21 .navbar-toggle {
22   - padding: 12px 10px;
23   - margin-top: 20px;
24 22 border-radius: 100%;
25 23 background-color: #5e749d;
26 24  
... ... @@ -30,13 +28,12 @@
30 28 }
31 29  
32 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 36 .navbar-nav .divider span {
38   - padding: 0 0 10px 0;
39   - margin: 53px 10px 0 10px;
40 37 display: block;
41 38  
42 39 @media screen and (max-width: $screen-md) {
... ... @@ -48,11 +45,9 @@
48 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 51 text-transform: uppercase;
57 52 color: #616161;
58 53 font-weight: bold;
... ... @@ -65,41 +60,149 @@
65 60 .contraste & {
66 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 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 219 right: 210px;
117 220 width: 100px;
118 221 }
119   -}
120 222 \ No newline at end of file
  223 +}
... ...
src/app/components/social-share/social-share.scss
  Diff comments   View file @07eb7bf
... ... @@ -10,6 +10,7 @@
10 10 &.list-inline {
11 11 margin: 0;
12 12 }
  13 +
13 14 li {
14 15 float: left;
15 16 padding: 0;
... ... @@ -33,7 +34,7 @@
33 34 background-color: #E0E0E0;
34 35 border-radius: 5px;
35 36  
36   - @media screen and (max-width: $screen-xs) {
  37 + @media screen and (max-width: $screen-sm) {
37 38 background-color: #fff;
38 39 }
39 40  
... ... @@ -58,6 +59,11 @@
58 59 right: 20px;
59 60 border-width: 0 10px 10px;
60 61 border-bottom-color: #E0E0E0;
  62 +
  63 +
  64 + @media screen and (max-width: $screen-sm) {
  65 + border-bottom-color: #fff;
  66 + }
61 67 }
62 68  
63 69 @media screen and (max-width: $screen-xs) {
... ...
src/app/layout.scss
  Diff comments   View file @07eb7bf
... ... @@ -24,28 +24,28 @@
24 24 vertical-align: bottom;
25 25 }
26 26  
27   -@media (min-width: 480px) {
28   - .row-xs-height {
  27 +// @media (min-width: 480px) {
  28 +.row-xs-height {
29 29 display: table;
30 30 table-layout: fixed;
31 31 height: 100%;
32 32 width: 100%;
33   - }
34   - .col-xs-height {
  33 +}
  34 +.col-xs-height {
35 35 display: table-cell;
36 36 float: none;
37 37 height: 100%;
38   - }
39   - .col-xs-top {
  38 +}
  39 +.col-xs-top {
40 40 vertical-align: top;
41   - }
42   - .col-xs-middle {
  41 +}
  42 +.col-xs-middle {
43 43 vertical-align: middle;
44   - }
45   - .col-xs-bottom {
  44 +}
  45 +.col-xs-bottom {
46 46 vertical-align: bottom;
47   - }
48 47 }
  48 +// }
49 49  
50 50 @media (min-width: 768px) {
51 51 .row-sm-height {
... ...