Current Sass Files

The Current Sass / scss development files.

static/sass/rangertbc/components/_print.scss

@@ -0,0 +1,17 @@
+// 
+// RangerTBC Style Components
+//
+
+// Print Styles components/_print.scss
+// Version: 0.1
+// Created By: Andrew Senetar
+// Date: May, 22 2013
+// Used: 
+
+//// Global Print Style 
+@media print {
+  // Hide iframes in .hide-on-print elements
+  .hide-on-print iframe{
+    display: none;
+  }
+}

static/sass/rangertbc/components/_scrollbar.scss

@@ -0,0 +1,47 @@
+// 
+// RangerTBC Style Components
+//
+
+// Scrollbar Component components/_scrollbar.scss
+// Version: 0.1
+// Created By: Andrew Senetar
+// Date: May, 22 2013
+// Used: Google+ Style as Starting Point
+
+//// Variables
+
+//// Mixins
+
+// this was going to be more cool?
+@mixin scrollbar(){
+  ::-webkit-scrollbar{
+    width: 12px;
+    height: 12px;
+  }
+  ::-webkit-scrollbar-button,{
+    height: 0;
+    width: 0;
+  }
+  ::-webkit-scrollbar-track{
+    border: solid transparent;
+    background-color: #f5f5f5;
+  }
+  ::-webkit-scrollbar-track-piece  {
+    background-color: #f5f5f5;
+    @include box-shadow(inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07));
+  }
+  ::-webkit-scrollbar-thumb {
+    min-height: 30px;
+    background-color: rgba(0,0,0,0.2);
+    border: none;
+    @include box-shadow(inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07));
+    &:hover{
+      background-color: rgba(0,0,0,0.4);
+    }
+  }
+}
+
+//// Style
+
+//scrollbar styling 
+@include scrollbar();

static/sass/rangertbc/components/_topbar.scss

@@ -0,0 +1,123 @@
+// 
+// RangerTBC Style Components
+//
+
+// Topbar Component components/_topbar.scss
+// Version: 0.1
+// Created By: Andrew Senetar
+// Date: May, 22 2013
+// Used: Foundation Topbar as starting point
+
+//// Top Bar Variables
+
+// Background color for the top bar
+$topbar-bg: rgba($primary-color,0.9) !default;
+
+// Height and margin
+$topbar-height: 45px !default;
+$topbar-margin-bottom: 0px !default;
+
+//Shadow Color
+$topbar-shadow-color: rgba(50, 50, 50, 0.4) !default;
+
+// Controlling the styles for the title in the top bar
+$topbar-title-weight:                  bold !default;
+$topbar-title-font-size:               emCalc(17px) !default;
+
+// Set the link colors and styles for top-level nav
+$topbar-link-color:                    #fff !default;
+$topbar-link-color-hover:              #fff !default;
+$topbar-link-color-active:             #fff !default;
+$topbar-link-weight:                   bold !default;
+$topbar-link-font-size:                emCalc(13px) !default;
+$topbar-link-hover-lightness:          -10% !default; // Darken by 10%
+
+//// Top Bar Style
+
+.top-bar {
+  overflow: hidden;
+  height: $topbar-height;
+  line-height: $topbar-height;
+  max-width: none;
+  background: $topbar-bg;
+  position: relative;
+  margin-bottom: $topbar-margin-bottom;
+  @include box-shadow(0 5px 5px $topbar-shadow-color);
+    
+  // Topbar Global list style
+  ul {
+    margin-bottom: 0;
+    list-style: none;
+  }
+  
+  .title-area { 
+    float: left;
+    position: relative; 
+    height: $topbar-height;
+    margin: 0;
+    line-height: $topbar-height;
+    font-size: $topbar-title-font-size;
+    margin: 0;
+    a {
+      font-weight: $topbar-title-weight;
+      color: $topbar-link-color;
+      width: auto;
+      display: block;
+      padding: 0 $topbar-height / 3;
+      &:hover{
+        color: $topbar-link-color-hover;
+      }
+      &:active{
+        color: $topbar-link-color-active;
+      }
+    }
+  }
+  
+  .social-area {
+    float: right;
+    width: auto;
+    height: auto;
+    display: inline;
+    li {
+      float: left;
+      a {
+        display: block;
+        color: $topbar-link-color;
+        height: $topbar-height;
+        line-height: $topbar-height;
+        width: 100%;
+        padding: 0 $topbar-height / 5;
+        font-size: $topbar-link-font-size;
+        font-weight: $topbar-link-weight;
+        &:hover { background: adjust-color($topbar-bg, $lightness: $topbar-link-hover-lightness); }
+      }
+    }
+  }
+}
+
+/// Fixed Topbar (at end to override default position)
+
+[class="fixed top-bar"] {
+  width: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  margin-bottom: 0;
+  z-index: 99;
+}
+
+/// Print Styles
+
+@media print{
+  .top-bar{
+    position: relative;  // stop from appearing all over the place when fixed
+    .title-area { 
+      i{
+        display: none; // no need to show menu button
+      }
+    }
+    .social-area{
+      display: none; // these icons are uesless as well
+    }
+  }
+}