Add novo sass.

Augusto dos Anjos Almeida
1 parent c37d5578
Showing 12 changed files with 736 additions and 5 deletions Show diff stats
.gitignore
novo.css
novo.html
sass/novo.scss
sass/novo/_colors.scss
sass/novo/_nav.scss
sass/novo/_proposal_categories.scss
sass/novo/_proposal_detail.scss
sass/novo/_proposal_group.scss
sass/novo/_scaffolding.scss
sass/novo/_utilities.scss
sass/novo/_variables.scss
@@ -13,8 +13,4 @@ bower_components/
 bower.json
 sass/bootstrap.scss
 css/bootstrap.css
-html/
-novo.css
-novo.html
-sass/novo.scss
-sass/novo
 \ No newline at end of file
+html/
 \ No newline at end of file
@@ -0,0 +1,232 @@
+@charset "UTF-8";
+.hide {
+  display: none; }
+
+#proposal-result {
+  margin: 0 auto 40px;
+  width: 90%; }
+
+body {
+  color: #172938;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 400; }
+
+h1 {
+  border-bottom: 1px solid #d6dcd7;
+  font-size: 28px;
+  padding-bottom: 20px;
+  text-transform: uppercase; }
+  h1 a {
+    color: #03316f; }
+
+a {
+  color: #335277;
+  text-decoration: none; }
+
+nav ul {
+  font-size: 0;
+  list-style: none;
+  margin-bottom: 0;
+  padding: 0; }
+  nav ul li {
+    display: inline-block;
+    font-size: 16px;
+    text-align: center;
+    width: 50%; }
+    nav ul li a {
+      background-color: #03316f;
+      border-left: 1px solid #03316f;
+      border-right: 1px solid #03316f;
+      border-top: 1px solid #03316f;
+      color: #fff;
+      font-weight: 700;
+      display: block;
+      padding: 20px;
+      text-transform: uppercase; }
+      nav ul li a.active {
+        background-color: transparent;
+        color: #03316f; }
+
+.proposal-category-items-saude .description:before {
+  color: #fff;
+  content: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) atende a todos os brasileiros. Ele é universal, integral e de responsabilidade do Governo Federal, dos estados e dos municípios.";
+  font-size: 14px; }
+
+.proposal-category-items-seguranca .description:before {
+  color: #fff;
+  content: "A segurança pública é um direito fundamental, dever do Estado e responsabilidade de todos. Tem na proteção da vida, na disseminação da cultura de paz e na integração dos órgãos e instituições seus maiores compromissos.";
+  font-size: 14px; }
+
+.proposal-category-items-educacao .description:before {
+  color: #fff;
+  content: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis. Agora, o Plano Nacional de Educação (PNE) definiu metas quantitativas e qualitativas para os próximos 10 anos.";
+  font-size: 14px; }
+
+.proposal-category-items-reducao-da-pobreza .description:before {
+  color: #fff;
+  content: "Este governo escolheu como prioridade combater a pobreza e reduzir as desigualdades sociais. Por isso, o Brasil saiu do Mapa da Fome das Nações Unidas";
+  font-size: 14px; }
+
+#proposal-categories {
+  border-bottom: 1px solid #03316f;
+  border-left: 1px solid #03316f;
+  border-right: 1px solid #03316f;
+  list-style: none;
+  padding: 0; }
+  #proposal-categories-container {
+    font-size: 0;
+    padding-left: 20px;
+    padding-top: 20px;
+    text-align: center; }
+
+.proposal-category {
+  display: inline-block;
+  margin-bottom: 20px;
+  margin-right: 20px;
+  position: relative;
+  text-align: center; }
+  .proposal-category .proposal-link {
+    background-color: #000;
+    border-radius: 7px;
+    color: #fff;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 700;
+    padding-top: 100px;
+    width: 150px; }
+  .proposal-category-items {
+    border-radius: 7px;
+    font-size: 16px;
+    margin-bottom: 20px;
+    margin-right: 20px;
+    padding: 20px 20px 0;
+    text-align: left; }
+.proposal-list {
+  list-style: none;
+  margin-top: 20px;
+  padding: 0; }
+.proposal-item {
+  display: inline-block;
+  margin-bottom: 20px;
+  vertical-align: top;
+  width: 50%; }
+  .proposal-item:nth-child(odd) .item {
+    margin-right: 20px; }
+.proposal-link {
+  font-family: 'Asap', sans-serif;
+  font-size: 24px;
+  font-weight: 700; }
+
+.arrow-box {
+  border-bottom: 10px solid #000;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  bottom: -12px;
+  height: 0;
+  left: 50%;
+  margin-left: -7px;
+  position: absolute;
+  width: 0; }
+
+.name {
+  border-bottom: 2px solid #fff;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  padding: 10px 0; }
+
+.item {
+  background-color: #fff;
+  border: 1px solid #03316f;
+  border-radius: 7px;
+  font-size: 14px;
+  padding: 20px; }
+  .item p {
+    min-height: 60px; }
+
+.category {
+  border-top: 1px dotted #172938;
+  list-style: none;
+  padding-left: 0;
+  padding-top: 10px; }
+  .category li {
+    background-color: #000;
+    color: #fff;
+    display: inline-block;
+    font-family: 'Asap', sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    padding: 5px 12px 5px 32px; }
+
+#proposal-category-saude .proposal-link {
+  background-color: #00a9bd;
+  background-image: url(./images/icons/saude.png?3);
+  background-position: 50% 5px;
+  background-repeat: no-repeat; }
+#proposal-category-saude .arrow-box {
+  border-bottom-color: #00a9bd; }
+
+.proposal-category-items-saude {
+  background-color: #00a9bd; }
+
+li.category-saude {
+  background-color: #00a9bd;
+  background-image: url(./images/icons/saude.png?1);
+  background-position: 3px center;
+  background-repeat: no-repeat;
+  background-size: 22px; }
+
+#proposal-category-seguranca .proposal-link {
+  background-color: #e34748;
+  background-image: url(./images/icons/seguranca.png?3);
+  background-position: 50% 5px;
+  background-repeat: no-repeat; }
+#proposal-category-seguranca .arrow-box {
+  border-bottom-color: #e34748; }
+
+.proposal-category-items-seguranca {
+  background-color: #e34748; }
+
+li.category-seguranca {
+  background-color: #e34748;
+  background-image: url(./images/icons/seguranca.png?1);
+  background-position: 3px center;
+  background-repeat: no-repeat;
+  background-size: 22px; }
+
+#proposal-category-educacao .proposal-link {
+  background-color: #ffb400;
+  background-image: url(./images/icons/educacao.png?3);
+  background-position: 50% 5px;
+  background-repeat: no-repeat; }
+#proposal-category-educacao .arrow-box {
+  border-bottom-color: #ffb400; }
+
+.proposal-category-items-educacao {
+  background-color: #ffb400; }
+
+li.category-educacao {
+  background-color: #ffb400;
+  background-image: url(./images/icons/educacao.png?1);
+  background-position: 3px center;
+  background-repeat: no-repeat;
+  background-size: 22px; }
+
+#proposal-category-reducao-da-pobreza .proposal-link {
+  background-color: #51d0b3;
+  background-image: url(./images/icons/reducao-da-pobreza.png?3);
+  background-position: 50% 5px;
+  background-repeat: no-repeat; }
+#proposal-category-reducao-da-pobreza .arrow-box {
+  border-bottom-color: #51d0b3; }
+
+.proposal-category-items-reducao-da-pobreza {
+  background-color: #51d0b3; }
+
+li.category-reducao-da-pobreza {
+  background-color: #51d0b3;
+  background-image: url(./images/icons/reducao-da-pobreza.png?1);
+  background-position: 3px center;
+  background-repeat: no-repeat;
+  background-size: 22px; }
@@ -0,0 +1,262 @@
+<html lang="pt-br">
+  <head>
+    <meta charset="utf-8" />
+    <title>Dialoga Brasil</title>
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="css/bootstrap.min.css" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="novo.css" />
+
+  </head>
+  <body>
+
+    <div id='proposal-result'></div>
+ 
+    <script id='proposal-template' type='text/x-handlebars-template'>
+      <header>
+        <h1><a href="/">{{article.title}}</a></h1>
+        <a id='display-contrast' href='#'>Alto Contraste</a>
+      </header>
+  
+      <div id="content">
+        <p>{{{article.body}}}</p>
+      </div>
+  
+      <nav>
+        <ul>
+          <li id='nav-proposal-categories'>
+            <a href="#/temas" class="active">Temas</a>
+          </li>
+          <li id='nav-proposal-group'>
+            <a href="#/programas">Programas</a>
+          </li>
+        </ul>
+      </nav>
+
+      <ul id="proposal-categories">
+        <div id="proposal-categories-container">
+          {{#each article.categories}}
+            <li id='proposal-category-{{slug}}' class="proposal-category" data-category="{{slug}}">
+              <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">{{name}}</a>
+              <div class="arrow-box" style="display: none"></div>
+            </li>
+          {{/each}}
+          {{#each article.categories}}
+            <div id='proposal-item-{{id}}' class="proposal-category-items proposal-category-items-{{slug}} hide" data-category="{{slug}}">
+              <div class="header">
+                <div class="name">{{name}}</div>
+                <div class="description"></div>
+              </div>
+              <ul class="proposal-list">
+                {{#list_proposal ../article.children category=slug}}
+                  {{#link title id}}{{/link}}
+                {{/list_proposal}}
+              </ul>
+            </div>
+          {{/each}}
+        </div>
+      </ul>
+
+      <div id="proposal-group" class='hide'>
+        <label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>
+        <div id="search-input-container">
+          <input placeholder="palavra chave" id="search-input" type="text" name="search" />
+        </div>
+        <ul>
+
+          {{#list_proposal article.children}}
+            {{#link title id}}{{/link}}
+          {{/list_proposal}}
+        </ul>
+      </div>
+
+      {{#each article.children}}
+        <div class='proposal-detail hide' id="proposal-item-{{id}}">
+          <div class='categories {{#each categories}}{{slug}} {{/each}}'>
+            <ul class="select">
+              {{#each categories}}
+                <li class='category proposal-category' data-category="{{slug}}">
+                  <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">{{name}}</a>
+                  <button class="go-back btn btn-default pull-right">
+                    VOLTAR
+                    <span class="fa fa-reply"></span>
+                  </button>
+                  {{#select_proposal ../../article.children slug ../id}}{{/select_proposal}}
+                </li>
+              {{/each}}
+            </ul>
+
+            <div class='proposal-header'>
+              <div class='abstract'>
+                <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/>
+              </div>
+              <div class='title'>{{title}}</div>
+              <div class='abstract'>{{{abstract}}}</div>
+              <div class='show_body'>
+                <a href='#/programas/{{id}}/sobre-o-programa'><span>Conheça o Programa</span></a>
+              </div>
+            </div>
+
+            <div class='body proposal-detail-base hide'>
+              {{{body}}}
+              <div class='go-to-proposal-button'>
+                <a href="#/programas/{{id}}" data-target='proposal-item-{{id}}'>
+                  <span class='fa fa-reply'></span>
+                  Agora contribua para a melhoria desse programa
+                </a>
+              </div>
+              
+            </div>
+            <div class='make-proposal-container'>
+              <div class='make-proposal'>
+                <div class='container-title'>Faça Uma Proposta</div>
+                <div class='subtitle'>Qual a sua sugestão para melhorar este programa?</div>
+                <div class='info'>Ela se tornará pública em até 24 horas após o envio e poderá ser apoiada por outros participantes.</div>
+                <div class='send-proposal-button send-button'><a href='#'><span>Envie Sua Proposta</span></a></div>
+                <div class="login-container hide">Login</div>
+                <form class='make-proposal-form save-article-form hide' id='make-proposal-form-{{id}}'>
+                  <div class="message"></div>
+                  <div>
+                    <div><label for="article_abstract">Descrição</label></div>
+                    <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="200"></textarea>
+                  </div>
+                  <input id='content_type' name='content_type' value='ProposalsDiscussionPlugin::Proposal' type='hidden'>
+                  <input type='submit' id='make-proposal-button' class='make-proposal-button'  name='make-proposal-button' value='Enviar'>
+                </form>
+                <div class='success-proposal-sent success-sent hide send-button'>
+                  <p>Sua proposta foi encaminhada com sucesso!</p>
+                  <a href='#'>Encaminhar Nova Proposta</a>
+                </div>
+                <br style="clear: both;" />
+              </div>
+            </div>
+            <div class='support-proposal-container'>
+              <div class='support-proposal'>
+                <div class='container-title'> Apoie outras propostas</div>
+                <div class='subtitle'> Propostas da sociedade</div>
+                <div class="random-proposal"></div>
+                <div class="loading">Carregando...</div>
+                <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
+              </div>
+            </div>
+            <div class='results-container hide'></div>
+            <div class='experience-proposal-container'>
+              <div class='experience-proposal'>
+                <div class='container-title'>Conte sua experiência</div>
+                <p>Adoraríamos que você nos contasse a sua experiência com este programa ou a de alguém que você conhece.</p>
+                <p>Esta história pode nos ajudar a melhorar a nossa ação e não será divulgada.</p>
+                <div class='send-experience-button send-button'><a href='#'><span>Envie Sua Experiência</span></a></div>
+                <div class="login-container hide">Login</div>
+                <form class='make-experience-form save-article-form hide' id='make-experience-form-{{id}}'>
+                  <div class="message"></div>
+                  <div>
+                    <div><label for="article_abstract">Descrição</label></div>
+                    <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="5000"></textarea>
+                  </div>
+                  <input id='content_type' name='content_type' value='ProposalsDiscussionPlugin::Story' type='hidden'>
+                  <input type='submit' id='make-experience-button' class='make-experience-button'  name='make-experience-button' value='Enviar'>
+                </form>
+                <div class='success-experience-sent success-sent hide send-button'>
+                  <p>Sua experiência foi encaminhada com sucesso!</p>
+                  <a href='#'>Encaminhar Nova Experiência</a>
+                </div>
+              </div>
+            </div>
+            <div class='talk-proposal-container'>
+              <div class='talk-proposal'>
+                <div class='container-title'>Fale com os ministros</div>
+                <p>Confira as datas e horários disponíveis:</p>
+                <ul class='calendar'>
+                  <li>
+                    <span>Arthur Chioro</span>
+                    <span>Saúde</span>
+                    <div class='date'><i class="fa fa-calendar"></i> 22/04/2015</div><div class='time'><i class="fa fa-clock-o"></i> 09:00</div>
+                  </li>
+                  <li>
+                    <span>Teresa Campello</span>
+                    <span>Desenvolvimento Social</span>
+                    <div class='date'><i class="fa fa-calendar"></i> 22/04/2015</div><div class='time'><i class="fa fa-clock-o"></i> 09:00</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      {{/each}}
+    </script>
+
+    <script id='support-proposal-template' type='text/x-handlebars-template'>
+      <div class='abstract'><p>"{{trimString abstract 200}}"</p></div>
+      <div class="vote-actions">
+        <a href="#" class="like dislike" data-vote-value="-1"></a>
+        <a href="#" class="like" data-vote-value="1"></a>
+        <a href="#" class="skip">Pular</a>
+        <a href="#" class="vote-result">Resultados</a>
+      </div>
+    </script>
+
+    <script id="results" type='text/x-handlebars-template'>
+      <div class="loading">Carregando...</div>
+      <div class="results-content hide">
+        <a href="#" class="vote-result">Fechar</a>
+        <table>
+          <tr class="header">
+            <td class="abstract-text">Texto da Alternativa</td>
+            <td class="votes-for"></td>
+            <td class="votes-against"></td>
+            <td class="score">Pontuação</td>
+          </tr>
+          {{#each articles}}
+            <tr>
+              <td class="abstract-text"><div class="truncate"><p class="truncated">{{abstract}}</p></div></td>
+              <td class="votes-for">{{votes_for}}</td>
+              <td class="votes-against">{{votes_against}}</td>
+              <td class="score">{{#score .}}{{/score}}</td>
+            </tr>
+          {{/each}}
+        </table>
+      </div>
+    </script>
+
+    <script id='login' type='text/x-handlebars-template'>
+      <form id="login-form" class="login">
+        <div class="message"></div>
+        <div class="username">
+          <label for="user_name" class="label">Nome de Usuário / E-mail:</label>
+          <input id="user_name" name="login" type="text" placeholder="Nome do usuário / E-mail">
+        </div>
+        <div class="password">
+          <label for="user_password" class="label">Senha:</label>
+          <input id="user_password" name="password" type="password" placeholder="Senha">
+        </div>
+        <div class="actions">
+          <input type="submit" class="login-action" value="Acessar"/>
+          <a href="http://www.participa.br/account/forgot_password" target="_blank" class="forgot-password">Esqueci minha senha</a>
+        </div>
+        <div class="oauth">
+          <div class="label">Acessar com:</div>
+          <a href="/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook">Facebook</a>
+          <a href="/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=2" target="_blank" class="google">Google +</a>
+          <a href="http://www.participa.br/account/signup" target="_blank" class="new-user">Cadastrar</a>
+        </div>
+      </form>
+    </script>
+
+    <script src='js/jquery-2.1.3.min.js'></script>
+    <script src='js/jquery-ui-1.11.4.custom/jquery-ui.min.js'></script>
+    <script src='js/jquery.cookie.js'></script>
+    <script src='js/handlebars-v3.0.1.js'></script>
+    <script src='js/handlebars-helpers.js'></script>
+    <script src='js/jquery.dotdotdot.min.js'></script>
+    <script src='js/jquery.maxlength.min.js'></script>
+    <script src='js/layout.js'></script>
+
+    <script src='js/main.js'></script>
+  </body>
+
+</html>
@@ -0,0 +1,10 @@
+@import "utilities/variables";
+
+@import "novo/variables";
+@import "novo/utilities";
+@import "novo/scaffolding";
+@import "novo/nav";
+@import "novo/proposal_categories";
+@import "novo/proposal_group";
+@import "novo/proposal_detail";
+@import "novo/colors";
 \ No newline at end of file
@@ -0,0 +1,39 @@
+@import "../utilities/variables";
+
+@each $category, $color in $categories {
+  #proposal {
+    &-category {
+      &-#{$category} {
+        .proposal {
+          &-link {
+            background-color: $color;
+            background-image: url(./images/icons/#{$category}.png?3);
+            background-position: 50% 5px;
+            background-repeat: no-repeat;
+          }
+        }
+        .arrow-box {
+          border-bottom-color: $color;
+        }
+      }
+    }
+  }
+  .proposal {
+    &-category {
+      &-items {
+        &-#{$category} {
+          background-color: $color;
+        }
+      }
+    }
+  }
+  li.category {
+    &-#{$category} {
+      background-color: $color;
+      background-image: url(./images/icons/#{$category}.png?1);
+      background-position: 3px center;
+      background-repeat: no-repeat;
+      background-size: 22px;
+    }
+  }
+}
 \ No newline at end of file
@@ -0,0 +1,27 @@
+nav ul {
+  font-size: 0;
+  list-style: none;
+  margin-bottom: 0;
+  padding: 0;
+  li {
+    display: inline-block;
+    font-size: $default-font-size;
+    text-align: center;
+    width: 50%;
+    a {
+      background-color: $header-color;
+      border-left: 1px solid $header-color;
+      border-right: 1px solid $header-color;
+      border-top: 1px solid $header-color;
+      color: #fff;
+      font-weight: 700;
+      display: block;
+      padding: $default-spacing-size;
+      text-transform: uppercase;
+      &.active {
+        background-color: transparent;
+        color: $header-color;
+      }
+    }
+  }
+}
 \ No newline at end of file
@@ -0,0 +1,119 @@
+@import "utilities/variables";
+
+@each $category, $description in $categories-descriptions {
+  .proposal-category-items-#{$category} .description:before {
+    color: #fff;
+    content: "#{$description}";
+    font-size: $small-font-size;
+  }
+}
+
+#proposal {
+  &-categories {
+    border-bottom: 1px solid $header-color;
+    border-left: 1px solid $header-color;
+    border-right: 1px solid $header-color;
+    list-style: none;
+    padding: 0;
+    &-container {
+      font-size: 0;
+      padding-left: $default-spacing-size;
+      padding-top: $default-spacing-size;
+      text-align: center;
+    }
+  }
+}
+.proposal {
+  &-category {
+    display: inline-block;
+    margin-bottom: $default-spacing-size;
+    margin-right: $default-spacing-size;
+    position: relative;
+    text-align: center;
+    .proposal {
+      &-link {
+        background-color: #000;
+        border-radius: $default-radius-size;
+        color: #fff;
+        display: inline-block;
+        font-size: $small-font-size;
+        font-weight: 700;
+        padding-top: 100px;
+        width: 150px;
+      }
+    }
+    &-items {
+      border-radius: $default-radius-size;
+      font-size: $default-font-size;
+      margin-bottom: $default-spacing-size;
+      margin-right: $default-spacing-size;
+      padding: $default-spacing-size $default-spacing-size 0;
+      text-align: left;
+    }
+  }
+  &-list {
+    list-style: none;
+    margin-top: $default-spacing-size;
+    padding: 0;
+  }
+  &-item {
+    display: inline-block;
+    margin-bottom: $default-spacing-size;
+    vertical-align: top;
+    width: 50%;
+    &:nth-child(odd) {
+      .item {
+        margin-right: $default-spacing-size;
+      }
+    }
+  }
+  &-link {
+    font-family: 'Asap', sans-serif;
+    font-size: $proposal-link-size;
+    font-weight: 700;
+  }
+}
+.arrow-box {
+  border-bottom: 10px solid #000;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  bottom: -12px;
+  height: 0;
+  left: 50%;
+  margin-left: -7px;
+  position: absolute;
+  width: 0;
+}
+.name {
+  border-bottom: 2px solid #fff;
+  color: #fff;
+  font-size: $category-title-size;
+  font-weight: 700;
+  margin-bottom: 10px;
+  padding: 10px 0;
+}
+.item {
+  background-color: #fff;
+  border: 1px solid $header-color;
+  border-radius: $default-radius-size;
+  font-size: $small-font-size;
+  padding: $default-spacing-size;
+  p {
+    min-height: 60px;
+  }
+}
+.category {
+  border-top: 1px dotted $default-color;
+  list-style: none;
+  padding-left: 0;
+  padding-top: 10px;
+  li {
+    background-color: #000;
+    color: #fff;
+    display: inline-block;
+    font-family: 'Asap', sans-serif;
+    font-size: $default-font-size;
+    font-weight: 700;
+    padding: 5px 12px 5px 32px;
+  }
+}
 \ No newline at end of file
@@ -0,0 +1,20 @@
+body {
+  color: $default-color;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 400;
+}
+
+h1 {
+  border-bottom: 1px solid #d6dcd7;
+  font-size: $header-h1-size;
+  padding-bottom: $default-spacing-size;
+  text-transform: uppercase;
+  a {
+    color: $header-color;
+  }
+}
+
+a {
+  color: $link-color;
+  text-decoration: none;
+}
 \ No newline at end of file
@@ -0,0 +1,9 @@
+.hide {
+	display: none;
+}
+#proposal {
+	&-result {
+		margin: 0 auto 40px;
+		width: 90%;
+	}
+}
 \ No newline at end of file
@@ -0,0 +1,17 @@
+// colors
+$header-color: #03316f;
+$link-color: #335277;
+$default-color: #172938;
+
+// font sizes
+$default-font-size: 16px;
+$small-font-size: $default-font-size - 2;
+$header-h1-size: 28px;
+$category-title-size: 18px;
+$proposal-link-size: 24px;
+
+// radius sizes
+$default-radius-size: 7px;
+
+// padding defaults
+$default-spacing-size: 20px;
 \ No newline at end of file
...	...	@@ -13,8 +13,4 @@ bower_components/
13	13	bower.json
14	14	sass/bootstrap.scss
15	15	css/bootstrap.css
16		-html/
17		-novo.css
18		-novo.html
19		-sass/novo.scss
20		-sass/novo
21	16	\ No newline at end of file
	17	+html/
22	18	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,232 @@
	1	+@charset "UTF-8";
	2	+.hide {
	3	+ display: none; }
	4	+
	5	+#proposal-result {
	6	+ margin: 0 auto 40px;
	7	+ width: 90%; }
	8	+
	9	+body {
	10	+ color: #172938;
	11	+ font-family: 'Open Sans', sans-serif;
	12	+ font-weight: 400; }
	13	+
	14	+h1 {
	15	+ border-bottom: 1px solid #d6dcd7;
	16	+ font-size: 28px;
	17	+ padding-bottom: 20px;
	18	+ text-transform: uppercase; }
	19	+ h1 a {
	20	+ color: #03316f; }
	21	+
	22	+a {
	23	+ color: #335277;
	24	+ text-decoration: none; }
	25	+
	26	+nav ul {
	27	+ font-size: 0;
	28	+ list-style: none;
	29	+ margin-bottom: 0;
	30	+ padding: 0; }
	31	+ nav ul li {
	32	+ display: inline-block;
	33	+ font-size: 16px;
	34	+ text-align: center;
	35	+ width: 50%; }
	36	+ nav ul li a {
	37	+ background-color: #03316f;
	38	+ border-left: 1px solid #03316f;
	39	+ border-right: 1px solid #03316f;
	40	+ border-top: 1px solid #03316f;
	41	+ color: #fff;
	42	+ font-weight: 700;
	43	+ display: block;
	44	+ padding: 20px;
	45	+ text-transform: uppercase; }
	46	+ nav ul li a.active {
	47	+ background-color: transparent;
	48	+ color: #03316f; }
	49	+
	50	+.proposal-category-items-saude .description:before {
	51	+ color: #fff;
	52	+ content: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) atende a todos os brasileiros. Ele é universal, integral e de responsabilidade do Governo Federal, dos estados e dos municípios.";
	53	+ font-size: 14px; }
	54	+
	55	+.proposal-category-items-seguranca .description:before {
	56	+ color: #fff;
	57	+ content: "A segurança pública é um direito fundamental, dever do Estado e responsabilidade de todos. Tem na proteção da vida, na disseminação da cultura de paz e na integração dos órgãos e instituições seus maiores compromissos.";
	58	+ font-size: 14px; }
	59	+
	60	+.proposal-category-items-educacao .description:before {
	61	+ color: #fff;
	62	+ content: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis. Agora, o Plano Nacional de Educação (PNE) definiu metas quantitativas e qualitativas para os próximos 10 anos.";
	63	+ font-size: 14px; }
	64	+
	65	+.proposal-category-items-reducao-da-pobreza .description:before {
	66	+ color: #fff;
	67	+ content: "Este governo escolheu como prioridade combater a pobreza e reduzir as desigualdades sociais. Por isso, o Brasil saiu do Mapa da Fome das Nações Unidas";
	68	+ font-size: 14px; }
	69	+
	70	+#proposal-categories {
	71	+ border-bottom: 1px solid #03316f;
	72	+ border-left: 1px solid #03316f;
	73	+ border-right: 1px solid #03316f;
	74	+ list-style: none;
	75	+ padding: 0; }
	76	+ #proposal-categories-container {
	77	+ font-size: 0;
	78	+ padding-left: 20px;
	79	+ padding-top: 20px;
	80	+ text-align: center; }
	81	+
	82	+.proposal-category {
	83	+ display: inline-block;
	84	+ margin-bottom: 20px;
	85	+ margin-right: 20px;
	86	+ position: relative;
	87	+ text-align: center; }
	88	+ .proposal-category .proposal-link {
	89	+ background-color: #000;
	90	+ border-radius: 7px;
	91	+ color: #fff;
	92	+ display: inline-block;
	93	+ font-size: 14px;
	94	+ font-weight: 700;
	95	+ padding-top: 100px;
	96	+ width: 150px; }
	97	+ .proposal-category-items {
	98	+ border-radius: 7px;
	99	+ font-size: 16px;
	100	+ margin-bottom: 20px;
	101	+ margin-right: 20px;
	102	+ padding: 20px 20px 0;
	103	+ text-align: left; }
	104	+.proposal-list {
	105	+ list-style: none;
	106	+ margin-top: 20px;
	107	+ padding: 0; }
	108	+.proposal-item {
	109	+ display: inline-block;
	110	+ margin-bottom: 20px;
	111	+ vertical-align: top;
	112	+ width: 50%; }
	113	+ .proposal-item:nth-child(odd) .item {
	114	+ margin-right: 20px; }
	115	+.proposal-link {
	116	+ font-family: 'Asap', sans-serif;
	117	+ font-size: 24px;
	118	+ font-weight: 700; }
	119	+
	120	+.arrow-box {
	121	+ border-bottom: 10px solid #000;
	122	+ border-left: 7px solid transparent;
	123	+ border-right: 7px solid transparent;
	124	+ bottom: -12px;
	125	+ height: 0;
	126	+ left: 50%;
	127	+ margin-left: -7px;
	128	+ position: absolute;
	129	+ width: 0; }
	130	+
	131	+.name {
	132	+ border-bottom: 2px solid #fff;
	133	+ color: #fff;
	134	+ font-size: 18px;
	135	+ font-weight: 700;
	136	+ margin-bottom: 10px;
	137	+ padding: 10px 0; }
	138	+
	139	+.item {
	140	+ background-color: #fff;
	141	+ border: 1px solid #03316f;
	142	+ border-radius: 7px;
	143	+ font-size: 14px;
	144	+ padding: 20px; }
	145	+ .item p {
	146	+ min-height: 60px; }
	147	+
	148	+.category {
	149	+ border-top: 1px dotted #172938;
	150	+ list-style: none;
	151	+ padding-left: 0;
	152	+ padding-top: 10px; }
	153	+ .category li {
	154	+ background-color: #000;
	155	+ color: #fff;
	156	+ display: inline-block;
	157	+ font-family: 'Asap', sans-serif;
	158	+ font-size: 16px;
	159	+ font-weight: 700;
	160	+ padding: 5px 12px 5px 32px; }
	161	+
	162	+#proposal-category-saude .proposal-link {
	163	+ background-color: #00a9bd;
	164	+ background-image: url(./images/icons/saude.png?3);
	165	+ background-position: 50% 5px;
	166	+ background-repeat: no-repeat; }
	167	+#proposal-category-saude .arrow-box {
	168	+ border-bottom-color: #00a9bd; }
	169	+
	170	+.proposal-category-items-saude {
	171	+ background-color: #00a9bd; }
	172	+
	173	+li.category-saude {
	174	+ background-color: #00a9bd;
	175	+ background-image: url(./images/icons/saude.png?1);
	176	+ background-position: 3px center;
	177	+ background-repeat: no-repeat;
	178	+ background-size: 22px; }
	179	+
	180	+#proposal-category-seguranca .proposal-link {
	181	+ background-color: #e34748;
	182	+ background-image: url(./images/icons/seguranca.png?3);
	183	+ background-position: 50% 5px;
	184	+ background-repeat: no-repeat; }
	185	+#proposal-category-seguranca .arrow-box {
	186	+ border-bottom-color: #e34748; }
	187	+
	188	+.proposal-category-items-seguranca {
	189	+ background-color: #e34748; }
	190	+
	191	+li.category-seguranca {
	192	+ background-color: #e34748;
	193	+ background-image: url(./images/icons/seguranca.png?1);
	194	+ background-position: 3px center;
	195	+ background-repeat: no-repeat;
	196	+ background-size: 22px; }
	197	+
	198	+#proposal-category-educacao .proposal-link {
	199	+ background-color: #ffb400;
	200	+ background-image: url(./images/icons/educacao.png?3);
	201	+ background-position: 50% 5px;
	202	+ background-repeat: no-repeat; }
	203	+#proposal-category-educacao .arrow-box {
	204	+ border-bottom-color: #ffb400; }
	205	+
	206	+.proposal-category-items-educacao {
	207	+ background-color: #ffb400; }
	208	+
	209	+li.category-educacao {
	210	+ background-color: #ffb400;
	211	+ background-image: url(./images/icons/educacao.png?1);
	212	+ background-position: 3px center;
	213	+ background-repeat: no-repeat;
	214	+ background-size: 22px; }
	215	+
	216	+#proposal-category-reducao-da-pobreza .proposal-link {
	217	+ background-color: #51d0b3;
	218	+ background-image: url(./images/icons/reducao-da-pobreza.png?3);
	219	+ background-position: 50% 5px;
	220	+ background-repeat: no-repeat; }
	221	+#proposal-category-reducao-da-pobreza .arrow-box {
	222	+ border-bottom-color: #51d0b3; }
	223	+
	224	+.proposal-category-items-reducao-da-pobreza {
	225	+ background-color: #51d0b3; }
	226	+
	227	+li.category-reducao-da-pobreza {
	228	+ background-color: #51d0b3;
	229	+ background-image: url(./images/icons/reducao-da-pobreza.png?1);
	230	+ background-position: 3px center;
	231	+ background-repeat: no-repeat;
	232	+ background-size: 22px; }
...	...
...	...	@@ -0,0 +1,262 @@
	1	+<html lang="pt-br">
	2	+ <head>
	3	+ <meta charset="utf-8" />
	4	+ <title>Dialoga Brasil</title>
	5	+
	6	+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
	7	+ <meta name="viewport" content="width=device-width, initial-scale=1">
	8	+
	9	+ <link rel="stylesheet" href="css/bootstrap.min.css" />
	10	+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	11	+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
	12	+ <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
	13	+ <link rel="stylesheet" href="novo.css" />
	14	+
	15	+ </head>
	16	+ <body>
	17	+
	18	+ <div id='proposal-result'></div>
	19	+
	20	+ <script id='proposal-template' type='text/x-handlebars-template'>
	21	+ <header>
	22	+ <h1><a href="/">{{article.title}}</a></h1>
	23	+ <a id='display-contrast' href='#'>Alto Contraste</a>
	24	+ </header>
	25	+
	26	+ <div id="content">
	27	+ <p>{{{article.body}}}</p>
	28	+ </div>
	29	+
	30	+ <nav>
	31	+ <ul>
	32	+ <li id='nav-proposal-categories'>
	33	+ <a href="#/temas" class="active">Temas</a>
	34	+ </li>
	35	+ <li id='nav-proposal-group'>
	36	+ <a href="#/programas">Programas</a>
	37	+ </li>
	38	+ </ul>
	39	+ </nav>
	40	+
	41	+ <ul id="proposal-categories">
	42	+ <div id="proposal-categories-container">
	43	+ {{#each article.categories}}
	44	+ <li id='proposal-category-{{slug}}' class="proposal-category" data-category="{{slug}}">
	45	+ <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">{{name}}</a>
	46	+ <div class="arrow-box" style="display: none"></div>
	47	+ </li>
	48	+ {{/each}}
	49	+ {{#each article.categories}}
	50	+ <div id='proposal-item-{{id}}' class="proposal-category-items proposal-category-items-{{slug}} hide" data-category="{{slug}}">
	51	+ <div class="header">
	52	+ <div class="name">{{name}}</div>
	53	+ <div class="description"></div>
	54	+ </div>
	55	+ <ul class="proposal-list">
	56	+ {{#list_proposal ../article.children category=slug}}
	57	+ {{#link title id}}{{/link}}
	58	+ {{/list_proposal}}
	59	+ </ul>
	60	+ </div>
	61	+ {{/each}}
	62	+ </div>
	63	+ </ul>
	64	+
	65	+ <div id="proposal-group" class='hide'>
	66	+ <label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>
	67	+ <div id="search-input-container">
	68	+ <input placeholder="palavra chave" id="search-input" type="text" name="search" />
	69	+ </div>
	70	+ <ul>
	71	+
	72	+ {{#list_proposal article.children}}
	73	+ {{#link title id}}{{/link}}
	74	+ {{/list_proposal}}
	75	+ </ul>
	76	+ </div>
	77	+
	78	+ {{#each article.children}}
	79	+ <div class='proposal-detail hide' id="proposal-item-{{id}}">
	80	+ <div class='categories {{#each categories}}{{slug}} {{/each}}'>
	81	+ <ul class="select">
	82	+ {{#each categories}}
	83	+ <li class='category proposal-category' data-category="{{slug}}">
	84	+ <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">{{name}}</a>
	85	+ <button class="go-back btn btn-default pull-right">
	86	+ VOLTAR
	87	+ <span class="fa fa-reply"></span>
	88	+ </button>
	89	+ {{#select_proposal ../../article.children slug ../id}}{{/select_proposal}}
	90	+ </li>
	91	+ {{/each}}
	92	+ </ul>
	93	+
	94	+ <div class='proposal-header'>
	95	+ <div class='abstract'>
	96	+ <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/>
	97	+ </div>
	98	+ <div class='title'>{{title}}</div>
	99	+ <div class='abstract'>{{{abstract}}}</div>
	100	+ <div class='show_body'>
	101	+ <a href='#/programas/{{id}}/sobre-o-programa'><span>Conheça o Programa</span></a>
	102	+ </div>
	103	+ </div>
	104	+
	105	+ <div class='body proposal-detail-base hide'>
	106	+ {{{body}}}
	107	+ <div class='go-to-proposal-button'>
	108	+ <a href="#/programas/{{id}}" data-target='proposal-item-{{id}}'>
	109	+ <span class='fa fa-reply'></span>
	110	+ Agora contribua para a melhoria desse programa
	111	+ </a>
	112	+ </div>
	113	+
	114	+ </div>
	115	+ <div class='make-proposal-container'>
	116	+ <div class='make-proposal'>
	117	+ <div class='container-title'>Faça Uma Proposta</div>
	118	+ <div class='subtitle'>Qual a sua sugestão para melhorar este programa?</div>
	119	+ <div class='info'>Ela se tornará pública em até 24 horas após o envio e poderá ser apoiada por outros participantes.</div>
	120	+ <div class='send-proposal-button send-button'><a href='#'><span>Envie Sua Proposta</span></a></div>
	121	+ <div class="login-container hide">Login</div>
	122	+ <form class='make-proposal-form save-article-form hide' id='make-proposal-form-{{id}}'>
	123	+ <div class="message"></div>
	124	+ <div>
	125	+ <div><label for="article_abstract">Descrição</label></div>
	126	+ <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="200"></textarea>
	127	+ </div>
	128	+ <input id='content_type' name='content_type' value='ProposalsDiscussionPlugin::Proposal' type='hidden'>
	129	+ <input type='submit' id='make-proposal-button' class='make-proposal-button' name='make-proposal-button' value='Enviar'>
	130	+ </form>
	131	+ <div class='success-proposal-sent success-sent hide send-button'>
	132	+ <p>Sua proposta foi encaminhada com sucesso!</p>
	133	+ <a href='#'>Encaminhar Nova Proposta</a>
	134	+ </div>
	135	+ <br style="clear: both;" />
	136	+ </div>
	137	+ </div>
	138	+ <div class='support-proposal-container'>
	139	+ <div class='support-proposal'>
	140	+ <div class='container-title'> Apoie outras propostas</div>
	141	+ <div class='subtitle'> Propostas da sociedade</div>
	142	+ <div class="random-proposal"></div>
	143	+ <div class="loading">Carregando...</div>
	144	+ <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
	145	+ </div>
	146	+ </div>
	147	+ <div class='results-container hide'></div>
	148	+ <div class='experience-proposal-container'>
	149	+ <div class='experience-proposal'>
	150	+ <div class='container-title'>Conte sua experiência</div>
	151	+ <p>Adoraríamos que você nos contasse a sua experiência com este programa ou a de alguém que você conhece.</p>
	152	+ <p>Esta história pode nos ajudar a melhorar a nossa ação e não será divulgada.</p>
	153	+ <div class='send-experience-button send-button'><a href='#'><span>Envie Sua Experiência</span></a></div>
	154	+ <div class="login-container hide">Login</div>
	155	+ <form class='make-experience-form save-article-form hide' id='make-experience-form-{{id}}'>
	156	+ <div class="message"></div>
	157	+ <div>
	158	+ <div><label for="article_abstract">Descrição</label></div>
	159	+ <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="5000"></textarea>
	160	+ </div>
	161	+ <input id='content_type' name='content_type' value='ProposalsDiscussionPlugin::Story' type='hidden'>
	162	+ <input type='submit' id='make-experience-button' class='make-experience-button' name='make-experience-button' value='Enviar'>
	163	+ </form>
	164	+ <div class='success-experience-sent success-sent hide send-button'>
	165	+ <p>Sua experiência foi encaminhada com sucesso!</p>
	166	+ <a href='#'>Encaminhar Nova Experiência</a>
	167	+ </div>
	168	+ </div>
	169	+ </div>
	170	+ <div class='talk-proposal-container'>
	171	+ <div class='talk-proposal'>
	172	+ <div class='container-title'>Fale com os ministros</div>
	173	+ <p>Confira as datas e horários disponíveis:</p>
	174	+ <ul class='calendar'>
	175	+ <li>
	176	+ <span>Arthur Chioro</span>
	177	+ <span>Saúde</span>
	178	+ <div class='date'><i class="fa fa-calendar"></i> 22/04/2015</div><div class='time'><i class="fa fa-clock-o"></i> 09:00</div>
	179	+ </li>
	180	+ <li>
	181	+ <span>Teresa Campello</span>
	182	+ <span>Desenvolvimento Social</span>
	183	+ <div class='date'><i class="fa fa-calendar"></i> 22/04/2015</div><div class='time'><i class="fa fa-clock-o"></i> 09:00</div>
	184	+ </li>
	185	+ </ul>
	186	+ </div>
	187	+ </div>
	188	+ </div>
	189	+ </div>
	190	+ {{/each}}
	191	+ </script>
	192	+
	193	+ <script id='support-proposal-template' type='text/x-handlebars-template'>
	194	+ <div class='abstract'><p>"{{trimString abstract 200}}"</p></div>
	195	+ <div class="vote-actions">
	196	+ <a href="#" class="like dislike" data-vote-value="-1"></a>
	197	+ <a href="#" class="like" data-vote-value="1"></a>
	198	+ <a href="#" class="skip">Pular</a>
	199	+ <a href="#" class="vote-result">Resultados</a>
	200	+ </div>
	201	+ </script>
	202	+
	203	+ <script id="results" type='text/x-handlebars-template'>
	204	+ <div class="loading">Carregando...</div>
	205	+ <div class="results-content hide">
	206	+ <a href="#" class="vote-result">Fechar</a>
	207	+ <table>
	208	+ <tr class="header">
	209	+ <td class="abstract-text">Texto da Alternativa</td>
	210	+ <td class="votes-for"></td>
	211	+ <td class="votes-against"></td>
	212	+ <td class="score">Pontuação</td>
	213	+ </tr>
	214	+ {{#each articles}}
	215	+ <tr>
	216	+ <td class="abstract-text"><div class="truncate"><p class="truncated">{{abstract}}</p></div></td>
	217	+ <td class="votes-for">{{votes_for}}</td>
	218	+ <td class="votes-against">{{votes_against}}</td>
	219	+ <td class="score">{{#score .}}{{/score}}</td>
	220	+ </tr>
	221	+ {{/each}}
	222	+ </table>
	223	+ </div>
	224	+ </script>
	225	+
	226	+ <script id='login' type='text/x-handlebars-template'>
	227	+ <form id="login-form" class="login">
	228	+ <div class="message"></div>
	229	+ <div class="username">
	230	+ <label for="user_name" class="label">Nome de Usuário / E-mail:</label>
	231	+ <input id="user_name" name="login" type="text" placeholder="Nome do usuário / E-mail">
	232	+ </div>
	233	+ <div class="password">
	234	+ <label for="user_password" class="label">Senha:</label>
	235	+ <input id="user_password" name="password" type="password" placeholder="Senha">
	236	+ </div>
	237	+ <div class="actions">
	238	+ <input type="submit" class="login-action" value="Acessar"/>
	239	+ <a href="http://www.participa.br/account/forgot_password" target="_blank" class="forgot-password">Esqueci minha senha</a>
	240	+ </div>
	241	+ <div class="oauth">
	242	+ <div class="label">Acessar com:</div>
	243	+ <a href="/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook">Facebook</a>
	244	+ <a href="/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=2" target="_blank" class="google">Google +</a>
	245	+ <a href="http://www.participa.br/account/signup" target="_blank" class="new-user">Cadastrar</a>
	246	+ </div>
	247	+ </form>
	248	+ </script>
	249	+
	250	+ <script src='js/jquery-2.1.3.min.js'></script>
	251	+ <script src='js/jquery-ui-1.11.4.custom/jquery-ui.min.js'></script>
	252	+ <script src='js/jquery.cookie.js'></script>
	253	+ <script src='js/handlebars-v3.0.1.js'></script>
	254	+ <script src='js/handlebars-helpers.js'></script>
	255	+ <script src='js/jquery.dotdotdot.min.js'></script>
	256	+ <script src='js/jquery.maxlength.min.js'></script>
	257	+ <script src='js/layout.js'></script>
	258	+
	259	+ <script src='js/main.js'></script>
	260	+ </body>
	261	+
	262	+</html>
...	...
...	...	@@ -0,0 +1,10 @@
	1	+@import "utilities/variables";
	2	+
	3	+@import "novo/variables";
	4	+@import "novo/utilities";
	5	+@import "novo/scaffolding";
	6	+@import "novo/nav";
	7	+@import "novo/proposal_categories";
	8	+@import "novo/proposal_group";
	9	+@import "novo/proposal_detail";
	10	+@import "novo/colors";
0	11	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,39 @@
	1	+@import "../utilities/variables";
	2	+
	3	+@each $category, $color in $categories {
	4	+ #proposal {
	5	+ &-category {
	6	+ &-#{$category} {
	7	+ .proposal {
	8	+ &-link {
	9	+ background-color: $color;
	10	+ background-image: url(./images/icons/#{$category}.png?3);
	11	+ background-position: 50% 5px;
	12	+ background-repeat: no-repeat;
	13	+ }
	14	+ }
	15	+ .arrow-box {
	16	+ border-bottom-color: $color;
	17	+ }
	18	+ }
	19	+ }
	20	+ }
	21	+ .proposal {
	22	+ &-category {
	23	+ &-items {
	24	+ &-#{$category} {
	25	+ background-color: $color;
	26	+ }
	27	+ }
	28	+ }
	29	+ }
	30	+ li.category {
	31	+ &-#{$category} {
	32	+ background-color: $color;
	33	+ background-image: url(./images/icons/#{$category}.png?1);
	34	+ background-position: 3px center;
	35	+ background-repeat: no-repeat;
	36	+ background-size: 22px;
	37	+ }
	38	+ }
	39	+}
0	40	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,27 @@
	1	+nav ul {
	2	+ font-size: 0;
	3	+ list-style: none;
	4	+ margin-bottom: 0;
	5	+ padding: 0;
	6	+ li {
	7	+ display: inline-block;
	8	+ font-size: $default-font-size;
	9	+ text-align: center;
	10	+ width: 50%;
	11	+ a {
	12	+ background-color: $header-color;
	13	+ border-left: 1px solid $header-color;
	14	+ border-right: 1px solid $header-color;
	15	+ border-top: 1px solid $header-color;
	16	+ color: #fff;
	17	+ font-weight: 700;
	18	+ display: block;
	19	+ padding: $default-spacing-size;
	20	+ text-transform: uppercase;
	21	+ &.active {
	22	+ background-color: transparent;
	23	+ color: $header-color;
	24	+ }
	25	+ }
	26	+ }
	27	+}
0	28	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,119 @@
	1	+@import "utilities/variables";
	2	+
	3	+@each $category, $description in $categories-descriptions {
	4	+ .proposal-category-items-#{$category} .description:before {
	5	+ color: #fff;
	6	+ content: "#{$description}";
	7	+ font-size: $small-font-size;
	8	+ }
	9	+}
	10	+
	11	+#proposal {
	12	+ &-categories {
	13	+ border-bottom: 1px solid $header-color;
	14	+ border-left: 1px solid $header-color;
	15	+ border-right: 1px solid $header-color;
	16	+ list-style: none;
	17	+ padding: 0;
	18	+ &-container {
	19	+ font-size: 0;
	20	+ padding-left: $default-spacing-size;
	21	+ padding-top: $default-spacing-size;
	22	+ text-align: center;
	23	+ }
	24	+ }
	25	+}
	26	+.proposal {
	27	+ &-category {
	28	+ display: inline-block;
	29	+ margin-bottom: $default-spacing-size;
	30	+ margin-right: $default-spacing-size;
	31	+ position: relative;
	32	+ text-align: center;
	33	+ .proposal {
	34	+ &-link {
	35	+ background-color: #000;
	36	+ border-radius: $default-radius-size;
	37	+ color: #fff;
	38	+ display: inline-block;
	39	+ font-size: $small-font-size;
	40	+ font-weight: 700;
	41	+ padding-top: 100px;
	42	+ width: 150px;
	43	+ }
	44	+ }
	45	+ &-items {
	46	+ border-radius: $default-radius-size;
	47	+ font-size: $default-font-size;
	48	+ margin-bottom: $default-spacing-size;
	49	+ margin-right: $default-spacing-size;
	50	+ padding: $default-spacing-size $default-spacing-size 0;
	51	+ text-align: left;
	52	+ }
	53	+ }
	54	+ &-list {
	55	+ list-style: none;
	56	+ margin-top: $default-spacing-size;
	57	+ padding: 0;
	58	+ }
	59	+ &-item {
	60	+ display: inline-block;
	61	+ margin-bottom: $default-spacing-size;
	62	+ vertical-align: top;
	63	+ width: 50%;
	64	+ &:nth-child(odd) {
	65	+ .item {
	66	+ margin-right: $default-spacing-size;
	67	+ }
	68	+ }
	69	+ }
	70	+ &-link {
	71	+ font-family: 'Asap', sans-serif;
	72	+ font-size: $proposal-link-size;
	73	+ font-weight: 700;
	74	+ }
	75	+}
	76	+.arrow-box {
	77	+ border-bottom: 10px solid #000;
	78	+ border-left: 7px solid transparent;
	79	+ border-right: 7px solid transparent;
	80	+ bottom: -12px;
	81	+ height: 0;
	82	+ left: 50%;
	83	+ margin-left: -7px;
	84	+ position: absolute;
	85	+ width: 0;
	86	+}
	87	+.name {
	88	+ border-bottom: 2px solid #fff;
	89	+ color: #fff;
	90	+ font-size: $category-title-size;
	91	+ font-weight: 700;
	92	+ margin-bottom: 10px;
	93	+ padding: 10px 0;
	94	+}
	95	+.item {
	96	+ background-color: #fff;
	97	+ border: 1px solid $header-color;
	98	+ border-radius: $default-radius-size;
	99	+ font-size: $small-font-size;
	100	+ padding: $default-spacing-size;
	101	+ p {
	102	+ min-height: 60px;
	103	+ }
	104	+}
	105	+.category {
	106	+ border-top: 1px dotted $default-color;
	107	+ list-style: none;
	108	+ padding-left: 0;
	109	+ padding-top: 10px;
	110	+ li {
	111	+ background-color: #000;
	112	+ color: #fff;
	113	+ display: inline-block;
	114	+ font-family: 'Asap', sans-serif;
	115	+ font-size: $default-font-size;
	116	+ font-weight: 700;
	117	+ padding: 5px 12px 5px 32px;
	118	+ }
	119	+}
0	120	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,20 @@
	1	+body {
	2	+ color: $default-color;
	3	+ font-family: 'Open Sans', sans-serif;
	4	+ font-weight: 400;
	5	+}
	6	+
	7	+h1 {
	8	+ border-bottom: 1px solid #d6dcd7;
	9	+ font-size: $header-h1-size;
	10	+ padding-bottom: $default-spacing-size;
	11	+ text-transform: uppercase;
	12	+ a {
	13	+ color: $header-color;
	14	+ }
	15	+}
	16	+
	17	+a {
	18	+ color: $link-color;
	19	+ text-decoration: none;
	20	+}
0	21	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,9 @@
	1	+.hide {
	2	+ display: none;
	3	+}
	4	+#proposal {
	5	+ &-result {
	6	+ margin: 0 auto 40px;
	7	+ width: 90%;
	8	+ }
	9	+}
0	10	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,17 @@
	1	+// colors
	2	+$header-color: #03316f;
	3	+$link-color: #335277;
	4	+$default-color: #172938;
	5	+
	6	+// font sizes
	7	+$default-font-size: 16px;
	8	+$small-font-size: $default-font-size - 2;
	9	+$header-h1-size: 28px;
	10	+$category-title-size: 18px;
	11	+$proposal-link-size: 24px;
	12	+
	13	+// radius sizes
	14	+$default-radius-size: 7px;
	15	+
	16	+// padding defaults
	17	+$default-spacing-size: 20px;
0	18	\ No newline at end of file
...	...