1
0
mirror of https://github.com/arsenetar/pelican-red.git synced 2024-10-30 11:55:57 +00:00
pelican-red/static/sass/rangertbc/components/_topbar.scss
Andrew Senetar 068ad9ec39 Current Sass Files
The Current Sass / scss development files.
2013-05-27 22:16:02 -04:00

123 lines
2.8 KiB
SCSS

//
// 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
}
}
}