Commit 8fac6ac0952d7c4f795a49edeca8b9321e53c8e4

Authored by Melissa Wen
1 parent cd756d5d

fix global header and footer style to be use with others themes on environment

_globalfooter.sass
... ... @@ -1,41 +0,0 @@
1   -#global-footer
2   - width: 100%
3   -
4   -#footer-content
5   - background: #fff
6   -
7   -#footer-logos
8   - background: #F28F00
9   - height: 49px
10   - max-width: 100%
11   - padding: 2em 0
12   - div
13   - margin: 0 auto
14   - max-width: 960px
15   - a
16   - display: block
17   - float: left
18   - height: 49px
19   - span
20   - display: none
21   - .logo-acesso
22   - background: transparent url(images/acesso-a-informacao.png) center center no-repeat
23   - width: 107px
24   - .logo-brasil
25   - background: transparent url(images/brasil.png) center center no-repeat
26   - width: 153px
27   - .logo-sgpr
28   - background: transparent url(images/sgpr.png) center center no-repeat
29   - margin-right: 30px
30   - width: 187px
31   - .institucionais
32   - float: right
33   -
34   -#footer-license
35   - margin: 0 auto
36   - max-width: 960px
37   - text-align: left
38   - padding: 19px
39   - p
40   - color: #F28F00
41   - text-align: left
_globalheader.sass
... ... @@ -1,244 +0,0 @@
1   -#global-header
2   - height: auto
3   - margin: auto
4   - width: 100%
5   - a:link
6   - text-decoration: none
7   -
8   -.header-content
9   - *
10   - list-style: none
11   - margin: 0
12   - padding: 0
13   - vertical-align: baseline
14   - li
15   - display: inline
16   -
17   -#header
18   - background-color: #fcdd4e //(amarelo-claro)
19   - // Old browsers
20   - background-color: #f9c404 // (amarelo-escuro)
21   - background-image: -moz-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%) // (amarelo-claro)(amarelo-escuro)
22   - // FF3.6+
23   - background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#fcdd4e), color-stop(100%,#f9c404))
24   - // Chrome,Safari4+
25   - background-image: -webkit-radial-gradient(center, ellipse cover, #fcdd4e 1%,#f9c404 100%)
26   - // Chrome10+,Safari5.1+
27   - background-image: -o-radial-gradient(center, ellipse cover, #fcdd4e 1%,#f9c404 100%)
28   - // Opera 12+
29   - background-image: -ms-radial-gradient(center, ellipse cover, #fcdd4e 1%,#f9c404 100%)
30   - // IE10+
31   - background-image: radial-gradient(ellipse at center, #fcdd4e 1%,#f9c404 100%)
32   - // IE6-9 fallback on horizontal gradient
33   - color: #fff
34   - padding: 13px 0 0 0
35   - &>div
36   - margin: 0 auto
37   - max-width: 960px
38   -
39   -#accessibility
40   - display: block
41   - float: left
42   - font-family: Arial
43   - font-size: 10px
44   - list-style: none
45   - width: 45%
46   - a
47   - color: #00500f
48   - margin-right: 8px
49   - span
50   - background: none repeat scroll 0 0 #497B16
51   - color: #FFFFFF
52   - padding: 0 4px
53   -
54   -#portal-siteactions
55   - display: block
56   - float: right
57   - font-size: 10px
58   - margin-top: -4px
59   - text-align: right
60   - width: 30%
61   - a
62   - border-bottom: 1px dotted #00500f
63   - color: #00500f
64   - font-family: 'Open Sans', Arial, Helvetica, sans-serif
65   - padding: 2px 0px
66   - text-decoration: none
67   - text-transform: uppercase
68   - &:hover
69   - color: #03316f
70   - li
71   - display: inline
72   - margin: 0px 0px 0px 15px
73   -
74   -#user
75   - float: right
76   - height: auto
77   - margin-top: -4px
78   - position: relative
79   - right: 0
80   - top: 0
81   - width: auto
82   - #top-search
83   - display: none
84   - #homepage-link i
85   - display: block
86   - a
87   - margin-left: 15px
88   - i
89   - display: none
90   - strong
91   - color: #00500f
92   - font-family: 'Open Sans'
93   - font-size: 10px
94   - font-weight: 300
95   - text-transform: uppercase
96   - .welcome, .or
97   - display: none
98   -
99   -#logo
100   - float: left
101   - padding: 0
102   - width: 70%
103   - a
104   - display: block
105   - color: #03316f
106   - margin: 1em 0px
107   - text-decoration: none
108   - width: 100%
109   - span
110   - display: block
111   - #portal-title
112   - margin: 29px 0px 46px 0px
113   - color: #03316f
114   - font-size: 40px
115   - font-family: 'Open Sans Extrabold', Arial, Helvetica, sans-serif
116   - font-weight: normal
117   - line-height: 1em
118   - letter-spacing: -0.05em
119   - #portal-description
120   - font-size: 1.2em
121   - text-transform: uppercase
122   -
123   -#sobre
124   - #header &
125   - clear: both
126   - background: #f8c300
127   - font-size: 12px
128   - line-height: 20px
129   - margin: 0
130   - max-width: 100%
131   - padding: 5px 0
132   - ul
133   - max-width: 960px
134   - margin: 0 auto
135   - text-align: right
136   - a
137   - color: #00500f
138   - font-family: 'Open Sans', Arial, Helvetica, sans-serif
139   - #link-faq a
140   - border-right: 1px solid #00500f
141   - padding: 0 10px
142   - #link-contact a
143   - padding-left: 10px
144   -
145   -// Searchbox
146   -.LSBox
147   - border: none
148   - margin: 0
149   - padding: 0
150   -
151   -input.searchField
152   - -moz-appearance: none
153   -
154   -#portal-searchbox
155   - background: #fff
156   - border: 1px solid #CCCCCC
157   - border-radius: 5px
158   - -moz-border-radius: 5px
159   - -webkit-border-radius: 5px
160   - clear: right
161   - float: right
162   - font-size: 80%
163   - margin: 31px 0 14px
164   - padding: 2px
165   - text-align: right
166   - .searchField
167   - border: none
168   - padding: 0.45em
169   - width: 170px
170   - form
171   - white-space: nowrap
172   - label
173   - font-weight: normal
174   - #searchGadget
175   - margin: 0
176   - width: 170px
177   - input.searchButton
178   - background-image: url("images/search-button.gif")
179   - background-position: 8px 2px
180   - background-repeat: no-repeat
181   - background-color: #ffffff
182   - border: none
183   - padding: 4px 15px
184   - text-indent: -2000px
185   - input.searchField
186   - margin-bottom: 1em
187   - -moz-appearance: searchfield
188   -
189   -#LSResult
190   - margin-top: 0.5%
191   - z-index: 1
192   -
193   -// Search Button
194   -#search-button
195   - a
196   - display: inline-block
197   - height: 25px
198   - margin-right: 3px
199   - margin-top: 10px
200   - width: 29px
201   - &:hover
202   - opacity: 0.6
203   - #sb_search
204   - background-image: url(images/search.png)
205   - background-size: 100% 100%
206   - span
207   - display: none
208   -
209   -// Social Buttons
210   -#social-icons
211   - clear: right
212   - float: right
213   - margin: 0px
214   - ul
215   - display: table-row
216   - li
217   - float: right
218   - width: 20px
219   - margin-left: 4px
220   - a
221   - width: 20px
222   - height: 20px
223   - padding: 0px
224   - display: inline-block
225   - background-repeat: no-repeat
226   - #sb_face
227   - background-image: url(images/icone-verde-facebook.png)
228   - &:hover
229   - background: url(images/icone-verde-facebook.png) 0 20px
230   - #sb_tweet
231   - background-image: url(images/icone-verde-twitter.png)
232   - &:hover
233   - background: url(images/icone-verde-twitter.png) 0 20px
234   - #sb_youtb
235   - background-image: url(images/icone-verde-youtube.png)
236   - &:hover
237   - background: url(images/icone-verde-youtube.png) 0 20px
238   - #sb_flickr
239   - background-image: url(images/icone-verde-flickr.png)
240   - &:hover
241   - background: url(images/icone-verde-flickr.png) 0 20px
242   - span
243   - display: none
244   -// END social Buttons
global.css 0 → 100644
... ... @@ -0,0 +1,291 @@
  1 +@font-face {
  2 + font-family: "Open Sans";
  3 + font-style: normal;
  4 + font-weight: 400;
  5 + src: local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff"); }
  6 +@font-face {
  7 + font-family: "Open Sans";
  8 + font-style: normal;
  9 + font-weight: 700;
  10 + src: local("Open Sans Bold"), local("OpenSans-Bold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format("woff"); }
  11 +@font-face {
  12 + font-family: "Open Sans";
  13 + font-style: normal;
  14 + font-weight: 800;
  15 + src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) format("woff"); }
  16 +#global-header {
  17 + height: auto;
  18 + margin: auto;
  19 + width: 100%; }
  20 + #global-header a:link {
  21 + text-decoration: none; }
  22 +
  23 +.header-content * {
  24 + list-style: none;
  25 + margin: 0;
  26 + padding: 0;
  27 + vertical-align: baseline; }
  28 +.header-content li {
  29 + display: inline; }
  30 +
  31 +#header {
  32 + background-color: #fcdd4e;
  33 + background-color: #f9c404;
  34 + background-image: -moz-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
  35 + background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%, #fcdd4e), color-stop(100%, #f9c404));
  36 + background-image: -webkit-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
  37 + background-image: -o-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
  38 + background-image: -ms-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
  39 + background-image: radial-gradient(ellipse at center, #fcdd4e 1%, #f9c404 100%);
  40 + color: #fff;
  41 + padding: 13px 0 0 0; }
  42 + #header > div {
  43 + margin: 0 auto;
  44 + max-width: 960px; }
  45 +
  46 +#accessibility {
  47 + display: block;
  48 + float: left;
  49 + font-family: arial;
  50 + font-size: 10px;
  51 + list-style: nonei;
  52 + width: 45%; }
  53 + #accessibility a {
  54 + color: #00500f;
  55 + margin-right: 8px; }
  56 + #accessibility span {
  57 + background: none repeat scroll 0 0 #497B16;
  58 + color: #FFFFFF;
  59 + padding: 0 4px; }
  60 +
  61 +#portal-siteactions {
  62 + display: block;
  63 + float: right;
  64 + font-size: 10px;
  65 + margin-top: -2px;
  66 + text-align: right;
  67 + width: 30%; }
  68 + #portal-siteactions a {
  69 + border-bottom: 1px dotted #00500f;
  70 + color: #00500f;
  71 + font-family: "Open Sans", Arial, Helvetica, sans-serif;
  72 + padding: 2px 0px;
  73 + text-decoration: none;
  74 + text-transform: uppercase; }
  75 + #portal-siteactions a:hover {
  76 + color: #03316f; }
  77 + #portal-siteactions li {
  78 + display: inline;
  79 + margin: 0px 0px 0px 15px; }
  80 +
  81 +#header #user {
  82 + float: right;
  83 + height: auto;
  84 + margin-top: -2px;
  85 + position: relative;
  86 + right: 0;
  87 + top: 0;
  88 + width: auto; }
  89 + #header #user #top-search {
  90 + display: none; }
  91 + #header #user a#homepage-link {
  92 + margin-left: 35px; }
  93 + #header #user a#homepage-link i {
  94 + display: block; }
  95 + #header #user a {
  96 + margin-left: 15px; }
  97 + #header #user a i {
  98 + display: none; }
  99 + #header #user a strong {
  100 + color: #00500f;
  101 + font-family: "Open Sans";
  102 + font-size: 10px;
  103 + font-weight: 300;
  104 + text-transform: uppercase; }
  105 + #header #user .welcome, #header #user .or {
  106 + display: none; }
  107 +
  108 +#logo {
  109 + float: left;
  110 + padding: 0;
  111 + width: 70%; }
  112 + #logo a {
  113 + display: block;
  114 + color: #03316f;
  115 + margin: 1em 0px;
  116 + text-decoration: none;
  117 + width: 100%; }
  118 + #logo span {
  119 + display: block; }
  120 + #logo #portal-title {
  121 + margin: 30px 0px 46px 0px;
  122 + color: #03316f;
  123 + font-size: 40px;
  124 + font-family: "Open Sans", Arial, Helvetica, sans-serif;
  125 + font-weight: 800;
  126 + line-height: 1em;
  127 + letter-spacing: -0.05em; }
  128 + #logo #portal-description {
  129 + font-size: 1.2em;
  130 + text-transform: uppercase; }
  131 +
  132 +#header #sobre {
  133 + clear: both;
  134 + background: #f8c300;
  135 + font-size: 12px;
  136 + line-height: 20px;
  137 + margin: 0;
  138 + max-width: 100%;
  139 + padding: 5px 0; }
  140 +#sobre ul {
  141 + max-width: 960px;
  142 + margin: 0 auto;
  143 + text-align: right; }
  144 +#sobre a {
  145 + color: #00500f;
  146 + font-family: "Open Sans", Arial, Helvetica, sans-serif; }
  147 +#sobre #link-faq a {
  148 + border-right: 1px solid #00500f;
  149 + padding: 0 10px; }
  150 +#sobre #link-contact a {
  151 + padding-left: 10px; }
  152 +
  153 +.LSBox {
  154 + border: none;
  155 + margin: 0;
  156 + padding: 0; }
  157 +
  158 +input.searchField {
  159 + -moz-appearance: none; }
  160 +
  161 +#portal-searchbox {
  162 + background: #fff;
  163 + border: 1px solid #CCCCCC;
  164 + border-radius: 5px;
  165 + -moz-border-radius: 5px;
  166 + -webkit-border-radius: 5px;
  167 + clear: right;
  168 + float: right;
  169 + font-size: 80%;
  170 + margin: 30px 0 14px;
  171 + padding: 2px;
  172 + text-align: right; }
  173 + #portal-searchbox .searchField {
  174 + border: none;
  175 + padding: 0.45em;
  176 + width: 170px; }
  177 + #portal-searchbox form {
  178 + white-space: nowrap; }
  179 + #portal-searchbox label {
  180 + font-weight: normal; }
  181 + #portal-searchbox #searchGadget {
  182 + margin: 0;
  183 + width: 13em; }
  184 + #portal-searchbox input.searchButton {
  185 + background-image: url("images/search-button.gif");
  186 + background-position: 8px 2px;
  187 + background-repeat: no-repeat;
  188 + background-color: #ffffff;
  189 + border: none;
  190 + padding: 4px 15px;
  191 + text-indent: -2000px; }
  192 + #portal-searchbox input.searchField {
  193 + margin-bottom: 1em;
  194 + -moz-appearance: searchfield; }
  195 +
  196 +#LSResult {
  197 + margin-top: 0.5%;
  198 + z-index: 1; }
  199 +
  200 +#search-button a {
  201 + display: inline-block;
  202 + height: 25px;
  203 + margin-right: 3px;
  204 + margin-top: 10px;
  205 + width: 29px; }
  206 + #search-button a:hover {
  207 + opacity: 0.6; }
  208 +#search-button #sb_search {
  209 + background-image: url(images/search.png);
  210 + background-size: 100% 100%; }
  211 +#search-button span {
  212 + display: none; }
  213 +
  214 +#social-icons {
  215 + clear: right;
  216 + float: right;
  217 + margin: 0px; }
  218 + #social-icons ul {
  219 + display: table-row; }
  220 + #social-icons li {
  221 + float: right;
  222 + width: 20px;
  223 + margin-left: 4px; }
  224 + #social-icons li a {
  225 + width: 20px;
  226 + height: 20px;
  227 + padding: 0px;
  228 + display: inline-block;
  229 + background-repeat: no-repeat; }
  230 + #social-icons #sb_face {
  231 + background-image: url(images/icone-verde-facebook.png); }
  232 + #social-icons #sb_face:hover {
  233 + background: url(images/icone-verde-facebook.png) 0 20px; }
  234 + #social-icons #sb_tweet {
  235 + background-image: url(images/icone-verde-twitter.png); }
  236 + #social-icons #sb_tweet:hover {
  237 + background: url(images/icone-verde-twitter.png) 0 20px; }
  238 + #social-icons #sb_youtb {
  239 + background-image: url(images/icone-verde-youtube.png); }
  240 + #social-icons #sb_youtb:hover {
  241 + background: url(images/icone-verde-youtube.png) 0 20px; }
  242 + #social-icons #sb_flickr {
  243 + background-image: url(images/icone-verde-flickr.png); }
  244 + #social-icons #sb_flickr:hover {
  245 + background: url(images/icone-verde-flickr.png) 0 20px; }
  246 + #social-icons span {
  247 + display: none; }
  248 +
  249 +#global-footer {
  250 + width: 100%; }
  251 +
  252 +#footer-content {
  253 + background: #fff; }
  254 +
  255 +#footer-logos {
  256 + background: #F28F00;
  257 + height: 49px;
  258 + max-width: 100%;
  259 + padding: 2em 0; }
  260 + #footer-logos div {
  261 + margin: 0 auto;
  262 + max-width: 960px; }
  263 + #footer-logos a {
  264 + display: block;
  265 + float: left;
  266 + height: 49px; }
  267 + #footer-logos span {
  268 + display: none; }
  269 + #footer-logos .logo-acesso {
  270 + background: transparent url(images/acesso-a-informacao.png) center center no-repeat;
  271 + width: 107px; }
  272 + #footer-logos .logo-brasil {
  273 + background: transparent url(images/brasil.png) center center no-repeat;
  274 + width: 153px; }
  275 + #footer-logos .logo-sgpr {
  276 + background: transparent url(images/sgpr.png) center center no-repeat;
  277 + margin-right: 30px;
  278 + width: 187px; }
  279 + #footer-logos .institucionais {
  280 + float: right; }
  281 +
  282 +#footer-license {
  283 + margin: 0 auto;
  284 + max-width: 960px;
  285 + text-align: left;
  286 + padding: 19px; }
  287 + #footer-license p {
  288 + color: #F28F00;
  289 + text-align: left; }
  290 +
  291 +/*# sourceMappingURL=global.css.map */
... ...
global_footer.html.erb
... ... @@ -17,3 +17,10 @@
17 17 </div>
18 18  
19 19 <script src="http://barra.brasil.gov.br/barra.js" type="text/javascript"></script>
  20 +
  21 +<script>
  22 + // Abreviar opcões de administração
  23 + $('#user #homepage-link strong').text('Perfil');
  24 + $('#user .ctrl-panel strong').text('Painel');
  25 + $('#user .admin-link strong').text('Adm');
  26 +</script>
... ...
style.sass
... ... @@ -18,24 +18,6 @@
18 18 font-style: italic
19 19 src: url('fonts/Ubuntu-RI.ttf')
20 20  
21   -@font-face
22   - font-family: 'Open Sans'
23   - font-style: normal
24   - font-weight: 400
25   - src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')
26   -
27   -@font-face
28   - font-family: 'Open Sans Bold'
29   - font-style: normal
30   - font-weight: 700
31   - src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')
32   -
33   -@font-face
34   - font-family: 'Open Sans Extrabold'
35   - font-style: normal
36   - font-weight: 800
37   - src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) format('woff')
38   -
39 21 body
40 22 background: #fff
41 23  
... ... @@ -47,8 +29,6 @@ body
47 29 font-family: Arial, Helvetica, sans-serif !important
48 30 width: 960px
49 31  
50   -@import globalheader
51   -
52 32 #site-title, #theme-header, #wrap-2 #user, #theme-footer
53 33 display: none
54 34  
... ... @@ -81,5 +61,3 @@ body
81 61  
82 62 @import tagscloud
83 63  
84   -@import globalfooter
85   -
... ...
theme.js
1   -function shortAdminButtonLabels() {
2   - // Abreviar opcões de administração
3   - $('#user #homepage-link strong').text('Perfil');
4   - $('#user .ctrl-panel strong').text('Painel');
5   - $('#user .admin-link strong').text('Adm');
6   -}
  1 +(function($){
  2 + function addSubtitles(){
  3 + $('div.container-block-plugin_container-block > .block-inner-1').children('.block-inner-2').children('.block-title').wrap('<div class="block-header"></div>');
  4 + $($('div.block-header')[0]).children('.block-title').append('<span class="subtitle">Colabore no passo a passo das consultas públicas e discussões de políticas públicas</span>');
  5 + $($('div.block-header')[1]).children('.block-title').append('<span class="subtitle">Confira as últimas novidades do Participa.br</span>');
  6 + $($('div.block-header')[2]).children('.block-title').append('<span class="subtitle">Faça parte</span>')
  7 + }
7 8  
8   -function addSubtitles(){
9   - $('div.container-block-plugin_container-block > .block-inner-1').children('.block-inner-2').children('.block-title').wrap('<div class="block-header"></div>');
10   - $($('div.block-header')[0]).children('.block-title').append('<span class="subtitle">Colabore no passo a passo das consultas públicas e discussões de políticas públicas</span>');
11   - $($('div.block-header')[1]).children('.block-title').append('<span class="subtitle">Confira as últimas novidades do Participa.br</span>');
12   - $($('div.block-header')[2]).children('.block-title').append('<span class="subtitle">Faça parte</span>')
13   -}
  9 + function addReadMoreOnTrackCards(){
  10 + var cards = $('div.item_card');
  11 + cards.each(function(){
  12 + var link = $(this).children().attr('href');
  13 + var readMore = $('<div class="read_more"><a><span>Leia mais</span></a></div>');
  14 + $(readMore).children().attr('href', link);
  15 + $($(this).find('.track_stats')).append(readMore);
  16 + });
  17 + }
14 18  
15   -function addReadMoreOnTrackCards(){
16   - var cards = $('div.item_card');
17   - cards.each(function(){
18   - var link = $(this).children().attr('href');
19   - var readMore = $('<div class="read_more"><a><span>Leia mais</span></a></div>');
20   - $(readMore).children().attr('href', link);
21   - $($(this).find('.track_stats')).append(readMore);
22   - });
23   -}
24   -
25   -function translateButtons(){
26   - $('div.community-track-plugin_track-card-list-block').find('div.more a').text("Todas as Trilhas");
27   - $('a.view-all').each(function(){$(this).text('Veja todos');});
28   -}
  19 + function translateButtons(){
  20 + $('div.community-track-plugin_track-card-list-block').find('div.more a').text("Todas as Trilhas");
  21 + $('a.view-all').each(function(){$(this).text('Veja todos');});
  22 + }
29 23  
30   -$(document).ready(function(){
31   - shortAdminButtonLabels();
32   - addSubtitles();
33   - addReadMoreOnTrackCards();
  24 + $(document).ready(function(){
  25 + addSubtitles();
  26 + addReadMoreOnTrackCards();
  27 + translateButtons();
  28 + });
34 29 })(jQuery);
... ...