Commits

felipi  committed 34e9b65

Styled top portion of timeline

  • Participants
  • Parent commits b187b91

Comments (0)

Files changed (4)

     xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
     xml:lang="en">
     <head>            
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
       <title>Communities of Practice</title>
       <link type="text/css" rel="stylesheet" href="stylesheets/styles.css"/>
       <script src="javascripts/jquery.js"></script>
                     <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
                         Capiroto<span class="caret"></span>
                     </button>
-                    <ul class="dropdown-menu" role="menu">
+                    <ul class="dropdown-menu pull-right" role="menu">
                         <li><a href="#">Action</a></li>
                         <li><a href="#">Another action</a></li>
                         <li><a href="#">Something else here</a></li>
             <div class="col-xs-11 col-xs-offset-2 col-sm-offset-0 col-md-14 description">
                 <h1>Crack - Curso Colaorativo de Atencao Basica</h1>
                 <p class="hidden-xs">When you put a bunch of really talented musicians together like this you get Dream Theater, so technical and well thought out and this song is such a masterpiece... it's a shame Portnoy left the band though, Mike Mangini is a top tier drummer and his style fits the band but I really liked what Mike Portnoy brought to the table in terms of their musical direction and lyrical themes.
+                <span class="caret right"></span>
                 </p>
             </div>  
         </div>
                 </div>
             </div>
             <div class="col-xs-16 col-md-10">
-                <div class="coppla_col"> CONTENT </div>
+                <div class="coppla_col coppla_contents">
+
+                    <div class="btn-group coppla_communities_filter">
+                        <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
+                            Ver todos<span class="caret"></span>
+                        </button>
+                        <ul class="dropdown-menu pull-right" role="menu">
+                            <li><a href="#">Ver todos</a></li>
+                            <li><a href="#">Minhas Comunidades</a></li>
+                            <li><a href="#">Etc</a></li>
+                        </ul>
+                    </div>
+
+                    <div  class="coppla_sharebox">
+                        <textarea class="form-control" rows="3" placeholder="O que voce quer compartilhar?"></textarea>
+                        <button type="button">Compartilhar</button>
+                    </div>
+
+                    <div class="coppla_searchbox">
+                            <input type="text" class="form-control" placeholder="Busca local" />
+                            <span class="icon glyphicon glyphicon-search"></span>
+                    </div>
+
+                </div>
             </div>
             <div class="col-xs-16 col-md-4">
                 <div class="coppla_col"> PORTLETS </div>

File sass/_base.scss

     font-size: $portal-top-fontsize;
     text-transform: lowercase;
 }
+
+
+
+.caret {
+  &.up {
+    border-bottom: 4px solid #000000;
+    border-top: none;
+  }
+  &.left {
+    border-top: 4px solid transparent;
+    border-right: 5px solid #000000;
+    border-bottom: 4px solid transparent;
+    border-left: none;
+  }
+  &.right {
+    border-top: 4px solid transparent;
+    border-right: none;
+    border-bottom: 4px solid transparent;
+    border-left: 5px solid #000000;
+  }
+}

File sass/styles.scss

 // customize bootstrap variables here:
 @import "variables";
 @import "compass/css3/border-radius";
+@import "compass/css3/images";
 
 @import "base";
 @import "bootstrap";
     .logo .logo_container {
         width: 100px;
         height: 100px;
-        border-radius: 50px;
+        @include border-radius(50px);
         overflow: hidden;
         margin: 12px;
     }
 
 .coppla_banner_info {
     font-size: 12px;
+    padding-bottom: 16px;
     .glyphicon {
         padding: 0 4px;
         font-size: 18px;
 }
 
 .coppla_columns {
+    .coppla_contents {
+        padding: 15px 20px;
+    }
     .coppla_col {
         min-height: 100px;
         background-color: #FFF;
         border: 1px solid #CFCFCF;
-        border-radius: 8px;
+        @include border-radius(8px);
         overflow: hidden;
         &.coppla_menu_full {
             width: 100px;
             margin: 0 auto;
         }
-        .coppla_menu_item {
-            display: block;
-            text-align: center;
-            text-transform: uppercase;
-            height: 80px;
-            padding: 10px 0;
-            font-size: 11px;
-            color: #666666;
-            &.selected {
-                background-color: #464647;
-                color: #FFF;
-            }
-            .icon {
-                display: block;
-                font-size: 42px;
-                padding-bottom: 6px;
-            }
+        .coppla_menu_item .icon {
+            font-size: 4em;
         }
+        .coppla_communities_filter {
+            float: right;
+            margin-bottom: 15px;
+        }    
+    }
+}
+
+.coppla_menu_item {
+    display: block;
+    text-align: center;
+    text-transform: uppercase;
+    height: 80px;
+    padding: 10px 0;
+    font-size: 0.7em;
+    color: #666666;
+    &.selected {
+        background-color: #464647;
+        color: #FFF;
+    }
+    .icon {
+        display: block;
+        font-size: 3.25em;
+        padding-bottom: 6px;
+    }
+}
+
+.coppla_sharebox {
+    clear:both;
+    background-color: #F1F1F1;
+    padding: 8px;
+    border: 1px solid #BCBCBC;
+    @include border-radius(4px);
+    
+    textarea {
+        border: none;
+    }
+    
+    button {
+        margin-top: 8px;
+        font-size: 0.75em;
+        text-transform: lowercase;
+        border: 1px solid #DFDFDF;
+        border-radius: 4px;
+        @include background-image(linear-gradient(#FCFCFC, #EEEEEF));
+    }
+}   
+
+.coppla_searchbox {
+    margin: 18px 0;
+    position: relative;
+    
+    input {
+        padding-right: 24px;
+    }
+
+    .icon {
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        margin-left: -22px;
+        margin-top: -6px;
     }
 }

File stylesheets/styles.css

   text-transform: lowercase;
 }
 
+/* line 22, ../sass/_base.scss */
+.caret.up {
+  border-bottom: 4px solid #000000;
+  border-top: none;
+}
+/* line 26, ../sass/_base.scss */
+.caret.left {
+  border-top: 4px solid transparent;
+  border-right: 5px solid #000000;
+  border-bottom: 4px solid transparent;
+  border-left: none;
+}
+/* line 32, ../sass/_base.scss */
+.caret.right {
+  border-top: 4px solid transparent;
+  border-right: none;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid #000000;
+}
+
 /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
 /* line 9, ../../../../../../Library/Ruby/Gems/1.8/gems/bootstrap-sass-3.1.1.1/vendor/assets/stylesheets/bootstrap/_normalize.scss */
 html {
   src: url("fonts/coppla/coppla-icon.eot?#iefix") format("embedded-opentype"), url("fonts/coppla/coppla-icon.woff") format("woff"), url("fonts/coppla/coppla-icon.ttf") format("truetype"), url("fonts/coppla/coppla-icon.svg#glyphicons_halflingsregular") format("svg");
 }
 
-/* line 23, ../sass/styles.scss */
+/* line 24, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar {
   min-height: 46px;
   background-color: white;
   top: -250px;
   transition-duration: 0.5s;
 }
-/* line 31, ../sass/styles.scss */
+/* line 32, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar.affix {
   width: 100%;
   top: 0;
   z-index: 150;
 }
-/* line 37, ../sass/styles.scss */
+/* line 38, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar .coppla_top_menu {
   padding: 0 !important;
 }
-/* line 40, ../sass/styles.scss */
+/* line 41, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar .coppla_menu_item {
   display: block;
   text-align: center;
   font-size: 11px;
   color: #666666;
 }
-/* line 47, ../sass/styles.scss */
+/* line 48, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar .coppla_menu_item.selected {
   background-color: #464647;
   color: #FFF;
 }
-/* line 51, ../sass/styles.scss */
+/* line 52, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar .coppla_menu_item .icon {
   display: block;
   padding-bottom: 6px;
 }
-/* line 57, ../sass/styles.scss */
+/* line 58, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar .logo img {
   max-height: 46px;
 }
-/* line 61, ../sass/styles.scss */
+/* line 62, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar > div:not(.logo) {
   padding-top: 16px;
 }
-/* line 65, ../sass/styles.scss */
+/* line 66, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar .btn {
   border: none;
   padding: 4px 10px;
   margin-top: -4px;
 }
-/* line 73, ../sass/styles.scss */
+/* line 74, ../sass/styles.scss */
 .portal_top_area .row.portal_banner {
   min-height: 80px;
   background-color: #efecd7;
 }
-/* line 76, ../sass/styles.scss */
+/* line 77, ../sass/styles.scss */
 .portal_top_area .row.portal_banner .portal_logo img {
   padding: 8px 28px;
   height: 77px;
 }
-/* line 81, ../sass/styles.scss */
+/* line 82, ../sass/styles.scss */
 .portal_top_area .row.portal_banner .portal_slogan h4 {
   font-size: 16px;
   padding-top: 12px;
   font-weight: 300;
   letter-spacing: 1px;
 }
-/* line 88, ../sass/styles.scss */
+/* line 89, ../sass/styles.scss */
 .portal_top_area .row.portal_banner .portal_slogan h6 {
   color: #c54340;
   font-weight: 300;
 }
-/* line 94, ../sass/styles.scss */
+/* line 95, ../sass/styles.scss */
 .portal_top_area .row.portal_breadcrumbs {
   height: 35px;
 }
-/* line 98, ../sass/styles.scss */
+/* line 99, ../sass/styles.scss */
 .portal_top_area .breadcrumb {
   text-transform: lowercase;
   font-size: 15px;
   line-height: 35px;
   margin-bottom: 0;
 }
-/* line 103, ../sass/styles.scss */
+/* line 104, ../sass/styles.scss */
 .portal_top_area .breadcrumb a {
   color: #999999;
 }
 
-/* line 109, ../sass/styles.scss */
+/* line 110, ../sass/styles.scss */
 .coppla_container {
   background-color: #e3e3e3;
   -webkit-border-radius: 5px;
   margin: 0 28px;
 }
 
-/* line 116, ../sass/styles.scss */
+/* line 117, ../sass/styles.scss */
 .coppla_banner .logo .logo_container {
   width: 100px;
   height: 100px;
+  -webkit-border-radius: 50px;
+  -moz-border-radius: 50px;
+  -ms-border-radius: 50px;
+  -o-border-radius: 50px;
   border-radius: 50px;
   overflow: hidden;
   margin: 12px;
 }
-/* line 124, ../sass/styles.scss */
+/* line 125, ../sass/styles.scss */
 .coppla_banner .description h1 {
   font-size: 28px;
   font-weight: 600;
   color: #444444;
   margin-top: 14px;
 }
-/* line 130, ../sass/styles.scss */
+/* line 131, ../sass/styles.scss */
 .coppla_banner .description p {
   font-weight: 300;
   font-size: 13px;
   line-height: 15px;
 }
 
-/* line 138, ../sass/styles.scss */
+/* line 139, ../sass/styles.scss */
 .coppla_banner_info {
   font-size: 12px;
+  padding-bottom: 16px;
 }
-/* line 140, ../sass/styles.scss */
+/* line 142, ../sass/styles.scss */
 .coppla_banner_info .glyphicon {
   padding: 0 4px;
   font-size: 18px;
 }
 
-/* line 147, ../sass/styles.scss */
+/* line 149, ../sass/styles.scss */
+.coppla_columns .coppla_contents {
+  padding: 15px 20px;
+}
+/* line 152, ../sass/styles.scss */
 .coppla_columns .coppla_col {
   min-height: 100px;
   background-color: #FFF;
   border: 1px solid #CFCFCF;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
   border-radius: 8px;
   overflow: hidden;
 }
-/* line 153, ../sass/styles.scss */
+/* line 158, ../sass/styles.scss */
 .coppla_columns .coppla_col.coppla_menu_full {
   width: 100px;
   margin: 0 auto;
 }
-/* line 157, ../sass/styles.scss */
-.coppla_columns .coppla_col .coppla_menu_item {
+/* line 162, ../sass/styles.scss */
+.coppla_columns .coppla_col .coppla_menu_item .icon {
+  font-size: 4em;
+}
+/* line 165, ../sass/styles.scss */
+.coppla_columns .coppla_col .coppla_communities_filter {
+  float: right;
+  margin-bottom: 15px;
+}
+
+/* line 172, ../sass/styles.scss */
+.coppla_menu_item {
   display: block;
   text-align: center;
   text-transform: uppercase;
   height: 80px;
   padding: 10px 0;
-  font-size: 11px;
+  font-size: 0.7em;
   color: #666666;
 }
-/* line 165, ../sass/styles.scss */
-.coppla_columns .coppla_col .coppla_menu_item.selected {
+/* line 180, ../sass/styles.scss */
+.coppla_menu_item.selected {
   background-color: #464647;
   color: #FFF;
 }
-/* line 169, ../sass/styles.scss */
-.coppla_columns .coppla_col .coppla_menu_item .icon {
+/* line 184, ../sass/styles.scss */
+.coppla_menu_item .icon {
   display: block;
-  font-size: 42px;
+  font-size: 3.25em;
   padding-bottom: 6px;
 }
+
+/* line 191, ../sass/styles.scss */
+.coppla_sharebox {
+  clear: both;
+  background-color: #F1F1F1;
+  padding: 8px;
+  border: 1px solid #BCBCBC;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+}
+/* line 198, ../sass/styles.scss */
+.coppla_sharebox textarea {
+  border: none;
+}
+/* line 202, ../sass/styles.scss */
+.coppla_sharebox button {
+  margin-top: 8px;
+  font-size: 0.75em;
+  text-transform: lowercase;
+  border: 1px solid #DFDFDF;
+  border-radius: 4px;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcfcfc), color-stop(100%, #eeeeef));
+  background-image: -webkit-linear-gradient(#fcfcfc, #eeeeef);
+  background-image: -moz-linear-gradient(#fcfcfc, #eeeeef);
+  background-image: -o-linear-gradient(#fcfcfc, #eeeeef);
+  background-image: linear-gradient(#fcfcfc, #eeeeef);
+}
+
+/* line 212, ../sass/styles.scss */
+.coppla_searchbox {
+  margin: 18px 0;
+  position: relative;
+}
+/* line 216, ../sass/styles.scss */
+.coppla_searchbox input {
+  padding-right: 24px;
+}
+/* line 220, ../sass/styles.scss */
+.coppla_searchbox .icon {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  margin-left: -22px;
+  margin-top: -6px;
+}