Download as
Browse Code »

Commit 10073da65ba27eabfc78653640d81870003f0f94

Authored by Leonardo Merlin
1 parent ada42c18
Exists in master and in 6 other branches feature-captcha, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Fixes #23 and refact directive name from 'navbar' to 'app-navbar'

Showing 6 changed files with 360 additions and 329 deletions   Show diff stats
src/app/components/app-navbar/app-navbar.directive.js 0 → 100644
  Diff comments   View file @10073da
@@ -0,0 +1,37 @@ @@ -0,0 +1,37 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('appNavbar', appNavbar);
  7 +
  8 + /** @ngInject */
  9 + function appNavbar() {
  10 +
  11 + /** @ngInject */
  12 + function NavbarController($log) {
  13 + $log.debug('NavbarController');
  14 +
  15 + var vm = this;
  16 +
  17 + vm.scrollTo = function(hash) {
  18 + var $el = angular.element('#' + hash);
  19 + angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
  20 + };
  21 + }
  22 +
  23 + var directive = {
  24 + restrict: 'E',
  25 + templateUrl: 'app/components/app-navbar/app-navbar.html',
  26 + scope: {
  27 + creationDate: '='
  28 + },
  29 + controller: NavbarController,
  30 + controllerAs: 'vm',
  31 + bindToController: true
  32 + };
  33 +
  34 + return directive;
  35 + }
  36 +
  37 +})();
src/app/components/app-navbar/app-navbar.html 0 → 100644
  Diff comments   View file @10073da
@@ -0,0 +1,101 @@ @@ -0,0 +1,101 @@
  1 +<div class="app-navbar">
  2 + <nav id="navigation" class="header-navbar navbar" role="navigation">
  3 + <div class="navbar-header">
  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>
  21 + </div>
  22 +
  23 + <div id="navbar-collapse" class="collapse navbar-collapse">
  24 + <ul class="nav navbar-nav navbar-right">
  25 + <li ui-sref-active="active"><a ui-sref="sobre">Sobre</a></li>
  26 + <li ui-sref-active="active"><a ui-sref="programas">Programas</a></li>
  27 + <li ui-sref-active="active"><a ui-sref="propostas">Propostas</a></li>
  28 + <li ui-sref-active="active"><a ui-sref="ranking">Ranking</a></li>
  29 + <li ui-sref-active="active"><a ui-sref="duvidas">Dúvidas</a></li>
  30 + <li role="separator" class="divider hidden-xs hidden-sm"><span>|</span></li>
  31 + <li class="dropdown" style="border: none; margin: 20px 0;">
  32 + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Compartilhar <span aria-hidden="true" class="icon icon-social-share-small"></span></a>
  33 + <social-share class="dropdown-menu dropdown-menu-right" arrow-class="social-share--arrow"></social-share>
  34 + <div class="clearfix"></div>
  35 + </li>
  36 + <li class="hidden-sm hidden-md hidden-lg" style="border: none; padding-bottom: 10px !important;">
  37 + <div class="text text-right" style="padding-right: 20px;">DIALOGA <b>NAS REDES</b></div>
  38 + <ul class="social-share list-inline">
  39 + <li>
  40 + <a href="https://www.facebook.com/DialogaBrasil" target="_blank">
  41 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>
  42 + <span class="sr-only">Visitar perfil no Facebook</span>
  43 + </a>
  44 + </li>
  45 + <li>
  46 + <a href="https://twitter.com/dialogabrasil" target="_blank">
  47 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-twitter"><span class="icon icon-social-twitter"></span></span>
  48 + <span class="sr-only">Visitar perfil no Twitter</span>
  49 + </a>
  50 + </li>
  51 + <li>
  52 + <a href="https://www.youtube.com/channel/UCtjaJwOWwGu2legqFVAzhIA" target="_blank">
  53 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-youtube"><span class="icon icon-social-youtube"></span></span>
  54 + <span class="sr-only">Visitar canal no Youtube</span>
  55 + </a>
  56 + </li>
  57 + <li>
  58 + <a href="https://www.flickr.com/photos/dialogabrasil" target="_blank">
  59 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-flickr"><span class="icon icon-social-flickr"></span></span>
  60 + <span class="sr-only">Visitar canal no Flickr</span>
  61 + </a>
  62 + </li>
  63 + </ul>
  64 + <div class="clearfix"></div>
  65 + </li>
  66 + </ul>
  67 + </div>
  68 + </nav>
  69 +
  70 + <div id="dialoga-nas-redes" class="hidden-xs">
  71 + <div class="text text-right">
  72 + <p>DIALOGA<br><b>NAS REDES</b></p>
  73 + </div>
  74 + <ul class="social-share list-inline">
  75 + <li>
  76 + <a href="https://www.facebook.com/DialogaBrasil" target="_blank">
  77 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>
  78 + <span class="sr-only">Visitar perfil no Facebook</span>
  79 + </a>
  80 + </li>
  81 + <li>
  82 + <a href="https://twitter.com/dialogabrasil" target="_blank">
  83 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-twitter"><span class="icon icon-social-twitter"></span></span>
  84 + <span class="sr-only">Visitar perfil no Twitter</span>
  85 + </a>
  86 + </li>
  87 + <li>
  88 + <a href="https://www.youtube.com/channel/UCtjaJwOWwGu2legqFVAzhIA" target="_blank">
  89 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-youtube"><span class="icon icon-social-youtube"></span></span>
  90 + <span class="sr-only">Visitar canal no Youtube</span>
  91 + </a>
  92 + </li>
  93 + <li>
  94 + <a href="https://www.flickr.com/photos/dialogabrasil" target="_blank">
  95 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-flickr"><span class="icon icon-social-flickr"></span></span>
  96 + <span class="sr-only">Visitar canal no Flickr</span>
  97 + </a>
  98 + </li>
  99 + </ul>
  100 + </div>
  101 +</div>
src/app/components/app-navbar/app-navbar.scss 0 → 100644
  Diff comments   View file @10073da
@@ -0,0 +1,222 @@ @@ -0,0 +1,222 @@
  1 +.app-navbar {
  2 +
  3 + border-bottom: 2px solid #f1f1f1;
  4 +
  5 + .navbar {
  6 + margin-bottom: 0;
  7 + border: none;
  8 + }
  9 +
  10 + .navbar-brand {
  11 + height: auto;
  12 + padding-bottom: 0;
  13 + padding-left: 0;
  14 +
  15 + @media screen and (max-width: $screen-md) {
  16 + padding: 20px 0;
  17 + margin: 20px 0;
  18 + }
  19 + }
  20 +
  21 + .navbar-toggle {
  22 + border-radius: 100%;
  23 + background-color: #5e749d;
  24 +
  25 + .icon-bar {
  26 + height: 3px;
  27 + background-color: #fff;
  28 + }
  29 +
  30 + @media screen and (max-width: $screen-md) {
  31 + padding: 12px 10px;
  32 + margin: 0;
  33 + }
  34 + }
  35 +
  36 + .navbar-nav .divider span {
  37 + display: block;
  38 +
  39 + @media screen and (max-width: $screen-md) {
  40 + display: none;
  41 + }
  42 + }
  43 +
  44 + .dropdown-menu {
  45 + padding: 0;
  46 + }
  47 +
  48 + .navbar-nav {
  49 +
  50 + li > a {
  51 + text-transform: uppercase;
  52 + color: #616161;
  53 + font-weight: bold;
  54 +
  55 + &:hover,
  56 + &:focus {
  57 + background: none;
  58 + }
  59 +
  60 + .contraste & {
  61 + color: #fff;
  62 + }
  63 + }
  64 +
  65 + li.active > a {
  66 + border-bottom: 2px solid #77BB34;
  67 + }
  68 + }
  69 +
  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;
  109 + text-align: right;
  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;
  139 + }
  140 +
  141 + .navbar-collapse {
  142 + position: absolute;
  143 + left: 0;
  144 + bottom: 0;
  145 + width: 100%;
  146 +
  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 + }
  168 + }
  169 + }
  170 + }
  171 + // >= Desktop
  172 + @media screen and (min-width: $screen-md) {
  173 +
  174 + li > a {
  175 + padding: 15px 0;
  176 + margin: 0 9px;
  177 + }
  178 +
  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;
  188 + }
  189 + }
  190 + }
  191 +
  192 + // > Desktop Large
  193 + @media screen and (min-width: $screen-lg) {
  194 + .navbar-brand {
  195 + margin-bottom: 30px;
  196 + }
  197 +
  198 + ul.navbar-nav {
  199 + position: absolute;
  200 + right: 0;
  201 + bottom: 0;
  202 + }
  203 +
  204 + li.divider span{
  205 + padding: 12px 6px;
  206 + }
  207 + }
  208 +}
  209 +
  210 +#dialoga-nas-redes {
  211 + position: absolute;
  212 + right: 0;
  213 + top: 0;
  214 + z-index: 1000;
  215 +
  216 + .text {
  217 + position: absolute;
  218 + top: 5px;
  219 + right: 210px;
  220 + width: 100px;
  221 + }
  222 +}
src/app/components/navbar/navbar.directive.js
View file @ada42c1
@@ -1,37 +0,0 @@ @@ -1,37 +0,0 @@
1 -(function() {  
2 - 'use strict';  
3 -  
4 - angular  
5 - .module('dialoga')  
6 - .directive('appNavbar', appNavbar);  
7 -  
8 - /** @ngInject */  
9 - function appNavbar() {  
10 -  
11 - /** @ngInject */  
12 - function NavbarController($log) {  
13 - $log.debug('NavbarController');  
14 -  
15 - var vm = this;  
16 -  
17 - vm.scrollTo = function(hash) {  
18 - var $el = angular.element('#' + hash);  
19 - angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');  
20 - };  
21 - }  
22 -  
23 - var directive = {  
24 - restrict: 'E',  
25 - templateUrl: 'app/components/navbar/navbar.html',  
26 - scope: {  
27 - creationDate: '='  
28 - },  
29 - controller: NavbarController,  
30 - controllerAs: 'vm',  
31 - bindToController: true  
32 - };  
33 -  
34 - return directive;  
35 - }  
36 -  
37 -})();  
src/app/components/navbar/navbar.html
View file @ada42c1
@@ -1,70 +0,0 @@ @@ -1,70 +0,0 @@
1 -<div class="app-navbar">  
2 - <nav id="navigation" class="header-navbar navbar" role="navigation">  
3 - <div class="navbar-header">  
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>  
21 - </div>  
22 -  
23 - <div id="navbar-collapse" class="collapse navbar-collapse">  
24 - <ul class="nav navbar-nav navbar-right">  
25 - <li ui-sref-active="active"><a ui-sref="sobre">Sobre</a></li>  
26 - <li ui-sref-active="active"><a ui-sref="programas">Programas</a></li>  
27 - <li ui-sref-active="active"><a ui-sref="propostas">Propostas</a></li>  
28 - <li ui-sref-active="active"><a ui-sref="ranking">Ranking</a></li>  
29 - <li ui-sref-active="active"><a ui-sref="duvidas">Dúvidas</a></li>  
30 - <li role="separator" class="divider hidden-xs hidden-sm"><span>|</span></li>  
31 - <li class="dropdown">  
32 - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Compartilhar <span aria-hidden="true" class="icon icon-social-share-small"></span></a>  
33 - <social-share class="dropdown-menu dropdown-menu-right" arrow-class="social-share--arrow"></social-share>  
34 - </li>  
35 - </ul>  
36 - </div>  
37 - </nav>  
38 -  
39 - <div id="dialoga-nas-redes" class="hidden-xs">  
40 - <div class="text text-right">  
41 - <p>DIALOGA<br><b>NAS REDES</b></p>  
42 - </div>  
43 - <ul class="social-share list-inline">  
44 - <li>  
45 - <a href="https://www.facebook.com/DialogaBrasil" target="_blank">  
46 - <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>  
47 - <span class="sr-only">Visitar perfil no Facebook</span>  
48 - </a>  
49 - </li>  
50 - <li>  
51 - <a href="https://twitter.com/dialogabrasil" target="_blank">  
52 - <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-twitter"><span class="icon icon-social-twitter"></span></span>  
53 - <span class="sr-only">Visitar perfil no Twitter</span>  
54 - </a>  
55 - </li>  
56 - <li>  
57 - <a href="https://www.youtube.com/channel/UCtjaJwOWwGu2legqFVAzhIA" target="_blank">  
58 - <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-youtube"><span class="icon icon-social-youtube"></span></span>  
59 - <span class="sr-only">Visitar canal no Youtube</span>  
60 - </a>  
61 - </li>  
62 - <li>  
63 - <a href="https://www.flickr.com/photos/dialogabrasil" target="_blank">  
64 - <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-flickr"><span class="icon icon-social-flickr"></span></span>  
65 - <span class="sr-only">Visitar canal no Flickr</span>  
66 - </a>  
67 - </li>  
68 - </ul>  
69 - </div>  
70 -</div>  
src/app/components/navbar/navbar.scss
View file @ada42c1
@@ -1,222 +0,0 @@ @@ -1,222 +0,0 @@
1 -.app-navbar {  
2 -  
3 - border-bottom: 2px solid #f1f1f1;  
4 -  
5 - .navbar {  
6 - margin-bottom: 0;  
7 - border: none;  
8 - }  
9 -  
10 - .navbar-brand {  
11 - height: auto;  
12 - padding-bottom: 0;  
13 - padding-left: 0;  
14 -  
15 - @media screen and (max-width: $screen-md) {  
16 - padding: 20px 0;  
17 - margin: 20px 0;  
18 - }  
19 - }  
20 -  
21 - .navbar-toggle {  
22 - border-radius: 100%;  
23 - background-color: #5e749d;  
24 -  
25 - .icon-bar {  
26 - height: 3px;  
27 - background-color: #fff;  
28 - }  
29 -  
30 - @media screen and (max-width: $screen-md) {  
31 - padding: 12px 10px;  
32 - margin: 0;  
33 - }  
34 - }  
35 -  
36 - .navbar-nav .divider span {  
37 - display: block;  
38 -  
39 - @media screen and (max-width: $screen-md) {  
40 - display: none;  
41 - }  
42 - }  
43 -  
44 - .dropdown-menu {  
45 - padding: 0;  
46 - }  
47 -  
48 - .navbar-nav {  
49 -  
50 - li > a {  
51 - text-transform: uppercase;  
52 - color: #616161;  
53 - font-weight: bold;  
54 -  
55 - &:hover,  
56 - &:focus {  
57 - background: none;  
58 - }  
59 -  
60 - .contraste & {  
61 - color: #fff;  
62 - }  
63 - }  
64 -  
65 - li.active > a {  
66 - border-bottom: 2px solid #77BB34;  
67 - }  
68 - }  
69 -  
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;  
109 - text-align: right;  
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;  
139 - }  
140 -  
141 - .navbar-collapse {  
142 - position: absolute;  
143 - left: 0;  
144 - bottom: 0;  
145 - width: 100%;  
146 -  
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 - }  
168 - }  
169 - }  
170 - }  
171 - // >= Desktop  
172 - @media screen and (min-width: $screen-md) {  
173 -  
174 - li > a {  
175 - padding: 15px 0;  
176 - margin: 0 9px;  
177 - }  
178 -  
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;  
188 - }  
189 - }  
190 - }  
191 -  
192 - // > Desktop Large  
193 - @media screen and (min-width: $screen-lg) {  
194 - .navbar-brand {  
195 - margin-bottom: 30px;  
196 - }  
197 -  
198 - ul.navbar-nav {  
199 - position: absolute;  
200 - right: 0;  
201 - bottom: 0;  
202 - }  
203 -  
204 - li.divider span{  
205 - padding: 12px 6px;  
206 - }  
207 - }  
208 -}  
209 -  
210 -#dialoga-nas-redes {  
211 - position: absolute;  
212 - right: 0;  
213 - top: 0;  
214 - z-index: 1000;  
215 -  
216 - .text {  
217 - position: absolute;  
218 - top: 5px;  
219 - right: 210px;  
220 - width: 100px;  
221 - }  
222 -}