header_footer.scss in pwb-0.0.2

- old
+ new

@@ -5,10 +5,11 @@
   /*background: #232323
   replaced with fondo_secundario
   */
 }
 
+
 /*footer {
   padding-bottom: 5px;
 }
 */
 
@@ -50,50 +51,148 @@
   .top_header {
     font-family: 'PT Sans', sans-serif;
   }
 }
 
-
 header.top_header {
   min-height: 25px;
 }
 
+
 /*start sticky footer*/
+
+
 /*http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page*/
+
 html,
 body {
-   margin:0;
-   padding:0;
-   height:100%;
+  margin: 0;
+  padding: 0;
+  height: 100%;
 }
-.body-wrap {
-   min-height:100%;
-   position:relative;
+
+.sticky-wrap {
+  min-height: 100%;
+  position: relative;
 }
+
+.sticky-body {
+  /*below is enough space for footer  */
+  padding-bottom: 200px;
+}
+
+
 /*#header {
    background:#ff0;
    padding:10px;
-}
-section.slice {
-   padding:10px;
-   padding-bottom:60px;  
 }*/
+
 .fondo_footer {
-   position:absolute;
-   bottom:0;
-   width:100%;
-   height:60px;   /* Height of the footer */
-   /*background:#6cf;*/
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 200px;
+  /*background:#6cf;*/
 }
+
+
 /*end sticky footer*/
 
+.social-default {
+  margin-top: 25px;
+  .fa {
+    padding-right: 4px;
+  }
+}
 
+footer {
+  .footer-extra {
+    color: #ccc;
+    font-size: 13px;
+    /*margin-bottom: 10px;*/
+    /*display: flex;*/
+    margin-top: auto;
+  }
+  .social-default i {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    padding: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+    color: #333;
+    border-radius: 2px;
+  }
+}
 
+footer .col.reset {
+  margin: 0
+}
+
+footer h4 {
+  margin-top: 20px;
+  color: #ccc;
+  margin-bottom: 20px;
+  text-transform: capitalize;
+  font-size: 14px;
+  font-weight: 500
+}
+
+footer .col p {
+  color: #ccc;
+  font-size: 13px;
+  margin-bottom: 10px
+}
+
+footer a {
+  color: #ccc;
+  text-decoration: none
+}
+
+footer a:hover {
+  text-decoration: none
+}
+
+footer .col ul {
+  margin: 0;
+  padding: 0;
+  list-style: none
+}
+
+footer .col ul li {
+  color: #8f8f8f
+}
+
+footer .col ul li span {
+  color: #fff
+}
+
+footer .col address {
+  color: #ddd;
+  padding: 8px 0
+}
+
+footer .company-info {
+  font-size: 10px;
+  text-align: justify
+}
+
+footer .company-info h2 {
+  font-size: 14px;
+  font-weight: 600
+}
+
+
 /*breadcrumbs row - strictly speaking not header*/
 
 .pg-opt {
+  /*margin-top: 70px;*/
   border-bottom: 1px solid #e0eded;
+  border-top: 1px solid #e0eded;
   background: #fcfcfc;
   color: #333
 }
 
 .pg-opt h2 {
@@ -126,16 +225,21 @@
 .pg-opt .breadcrumb li.active {
   color: #333
 }
 
 @media only screen and (max-width:767px) {
+  /*for xs screens*/
+/*  .sticky-body {
+    below is enough space for footer  
+    padding-bottom: 300px;
+  }*/
   .pg-opt .pg-nav {
     float: left;
     margin-bottom: 10px
   }
   .pg-opt h2 {
-    padding: 20px 0 0 0
+    /*padding: 20px 0 0 0*/
   }
 }
 
 
 /* menu */
@@ -168,7 +272,5 @@
 }
 
 ul.navbar-right li.selected a:hover:after {
   display: none;
 }
-
-