From 8b5bb13833a450714cd5bc4a5eb6280d39c2d76e Mon Sep 17 00:00:00 2001
From: Rafael Diego <rafael.gomes@serpro.gov.br>
Date: Tue, 22 Sep 2015 19:05:26 -0300
Subject: [PATCH] css do conteudo

---
 src/app/layout.scss | 363 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------------------------------------------------------------------------
 1 file changed, 232 insertions(+), 131 deletions(-)

diff --git a/src/app/layout.scss b/src/app/layout.scss
index 8d76b35..77b85ad 100644
--- a/src/app/layout.scss
+++ b/src/app/layout.scss
@@ -25,140 +25,144 @@
 }
 
 // @media (min-width: 480px) {
-.row-xs-height {
-    display: table;
-    table-layout: fixed;
-    height: 100%;
-    width: 100%;
-}
-.col-xs-height {
-    display: table-cell;
-    float: none;
-    height: 100%;
-}
-.col-xs-top {
-    vertical-align: top;
-}
-.col-xs-middle {
-    vertical-align: middle;
-}
-.col-xs-bottom {
-    vertical-align: bottom;
-}
-// }
-
-@media (min-width: 768px) {
-  .row-sm-height {
+  .row-xs-height {
     display: table;
     table-layout: fixed;
     height: 100%;
     width: 100%;
   }
-  .col-sm-height {
-    display: table-cell;
-    float: none;
-    height: 100%;
-  }
-  .col-sm-top {
-    vertical-align: top;
-  }
-  .col-sm-middle {
-    vertical-align: middle;
-  }
-  .col-sm-bottom {
-    vertical-align: bottom;
-  }
-}
 
-@media (min-width: 992px) {
-  .row-md-height {
-    display: table;
-    table-layout: fixed;
-    height: 100%;
-    width: 100%;
-  }
-  .col-md-height {
+  .col-xs-height {
     display: table-cell;
     float: none;
     height: 100%;
   }
-  .col-md-top {
+
+  .col-xs-top {
     vertical-align: top;
   }
-  .col-md-middle {
+
+  .col-xs-middle {
     vertical-align: middle;
   }
-  .col-md-bottom {
+
+  .col-xs-bottom {
     vertical-align: bottom;
   }
-}
 
-@media (min-width: 1200px) {
-  .row-lg-height {
+// }
+@media (min-width: 768px) {
+  .row-sm-height {
     display: table;
     table-layout: fixed;
     height: 100%;
     width: 100%;
   }
-  .col-lg-height {
+  .col-sm-height {
     display: table-cell;
-    float: none;
-    height: 100%;
-  }
-  .col-lg-top {
-    vertical-align: top;
-  }
-  .col-lg-middle {
-    vertical-align: middle;
-  }
-  .col-lg-bottom {
-    vertical-align: bottom;
-  }
-}
+        // float: none;
+        height: 100%;
+      }
+      .col-sm-top {
+        vertical-align: top;
+      }
+      .col-sm-middle {
+        vertical-align: middle;
+      }
+      .col-sm-bottom {
+        vertical-align: bottom;
+      }
+    }
 
-.vcenter {
-  display: inline-block;
-  vertical-align: middle;
-  float: none;
-  margin-right: -2px;
-  margin-left: -2px;
-}
+    @media (min-width: 992px) {
+      .row-md-height {
+        display: table;
+        table-layout: fixed;
+        height: 100%;
+        width: 100%;
+      }
+      .col-md-height {
+        display: table-cell;
+        // float: none;
+        height: 100%;
+      }
+      .col-md-top {
+        vertical-align: top;
+      }
+      .col-md-middle {
+        vertical-align: middle;
+      }
+      .col-md-bottom {
+        vertical-align: bottom;
+      }
+    }
 
-.vertical-padding {
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
+    @media (min-width: 1200px) {
+      .row-lg-height {
+        display: table;
+        table-layout: fixed;
+        height: 100%;
+        width: 100%;
+      }
+      .col-lg-height {
+        display: table-cell;
+        // float: none;
+        height: 100%;
+      }
+      .col-lg-top {
+        vertical-align: top;
+      }
+      .col-lg-middle {
+        vertical-align: middle;
+      }
+      .col-lg-bottom {
+        vertical-align: bottom;
+      }
+    }
 
-.no-space-left {
-  margin-left: 0;
-  padding-left: 0;
-}
+    .vcenter {
+      display: inline-block;
+      vertical-align: middle;
+      float: none;
+      margin-right: -2px;
+      margin-left: -2px;
+    }
 
-.no-space-right {
-  margin-right: 0;
-  padding-right: 0;
-}
+    .vertical-padding {
+      padding-top: 15px;
+      padding-bottom: 15px;
+    }
 
-.text-center-sm {
-  @media screen and (max-width: $screen-sm) {
-    text-align: center;
-  }
-}
+    .no-space-left {
+      margin-left: 0;
+      padding-left: 0;
+    }
 
-.btn-submit {
-  background-color: $defaultblue;
-  color: #fff;
-  font-weight: bold;
-  &:hover,
-  &:focus {
-    color: #fff;
-  }
-}
+    .no-space-right {
+      margin-right: 0;
+      padding-right: 0;
+    }
 
-.has-error {
-  border-color: #FF0000;
-  border-width: 1px;
-}
+    .text-center-sm {
+      @media screen and (max-width: $screen-sm) {
+        text-align: center;
+      }
+    }
+
+    .btn-submit {
+      background-color: $defaultblue;
+      color: #fff;
+      font-weight: bold;
+      &:hover,
+      &:focus {
+        color: #fff;
+      }
+    }
+
+    .has-error {
+      border-color: #FF0000;
+      border-width: 1px;
+    }
 
 // Está com o nome do termos de uso. Deixas genérico ou apenas aqui? Ver como vão ficar esses modais
 .modal-termos-uso {
@@ -229,23 +233,21 @@ ul.list-color li:before {
 }
 
 .page--program {
-    .program-content {
-        ul li {
-          padding-left: 2em;
-          padding-bottom: 15px;
-          text-indent: -0.7em;
-        }
-
-        .col-middle {
-            vertical-align: top;
-        }
-
-        @media screen and (min-width: $screen-lg) {
-            img {
-                width: 100%;
-            }
-        }
+  .program-content {
+    ul li {
+      padding-left: 2em;
+      padding-bottom: 15px;
+      text-indent: -0.7em;
+    }
+    .col-middle {
+      vertical-align: top;
     }
+    @media screen and (min-width: $screen-lg) {
+      img {
+        width: 100%;
+      }
+    }
+  }
 }
 
 .destaque-bg-cinza {
@@ -258,19 +260,26 @@ ul.list-color li:before {
 }
 
 .destaque-font {
-  font-size: 130%;
+  font-size: 130%!important;
 }
 
-.font-140 {
-  font-size: 140%;
-}
+.font {
+  line-height: normal!important;
 
-.font-115 {
-  font-size: 115%;
-}
+  &-140 {
+    @extend .font;
+    font-size: 140%!important;
+  }
 
-.font-180 {
-  font-size: 180%;
+  &-115 {
+    @extend .font;
+    font-size: 115%!important;
+  }
+
+  &-180 {
+    @extend .font;
+    font-size: 180%!important;
+  }
 }
 
 .destaque-bg-lightgray {
@@ -326,7 +335,6 @@ blockquote {
   margin: 0px;
   border-left: none;
   line-height: 28px;
-
   &:before {
     content: "⌜";
     font-size: 200px;
@@ -335,7 +343,8 @@ blockquote {
     top: -10px;
     left: -10px;
     font-weight: bolder;
-    @each $category, $color in $categories {
+    @each $category,
+    $color in $categories {
       .#{$category} & {
         color: $color;
       }
@@ -352,3 +361,95 @@ blockquote {
   }
   border-top: 20px solid;
 }
+
+.pad-right-0 {
+  padding-right: 0px!important;
+}
+
+.pad-left-0 {
+  padding-left: 0px!important;
+}
+
+.bloco-mais-especialidades {
+  @media (max-width: 480px) {
+    padding: 2% 0 0 5%;
+  }
+
+  @media (min-width: 768px) {
+    padding: 2% 0 0 10%;
+  }
+
+  @media (min-width: 992px) {
+    padding: 12% 0 0 10%;
+  }
+
+  @media (max-width: 1200px) {
+    padding: 10% 0 0 10%;
+  }
+}
+
+ul li:last-child {
+  padding-bottom: 0px!important;
+}
+
+// .destaque-esporte ul li {
+//   padding-bottom: 2px!important;
+// }
+
+.bloco1-preparacao-atletas {
+  @media (max-width: 480px) {
+    padding: 2% 0 0 5%;
+  }
+
+  @media (min-width: 768px) {
+    padding: 2% 0 0 10%;
+  }
+
+  @media (min-width: 992px) {
+    padding: 2% 10% 0 10%;
+  }
+
+  @media (min-width: 1200px) {
+    padding: 17% 10% 0 10%;
+  }
+}
+
+.bloco2-preparacao-atletas {
+  @media (min-width: 1200px) {
+    padding: 15% 0% 0 0%;
+  }
+}
+
+.bloco1-futebol {
+  @media (min-width: 992px) {
+    padding: 3% 5% 0 5%;
+  }
+}
+
+.bloco1-esporte-toda-vida {
+  @media (max-width: 992px) {
+    padding: 5% 10% 0 10%;
+  }
+
+  @media (min-width: 992px) {
+    padding: 10% 10% 0 10%;
+  }
+
+  @media (min-width: 1200px) {
+    padding: 18% 10% 0 10%;
+  }
+}
+
+.bloco2-esporte-toda-vida {
+  @media (max-width: 992px) {
+    padding: 5% 10% 0 10%;
+  }
+
+  @media (min-width: 992px) {
+    padding: 10% 10% 0 10%;
+  }
+
+  @media (min-width: 1200px) {
+    padding: 18% 10% 0 10%;
+  }
+}
--
libgit2 0.21.2