diff options
Diffstat (limited to 'app/assets/stylesheets/app/shared/_headers.scss')
-rw-r--r-- | app/assets/stylesheets/app/shared/_headers.scss | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/app/assets/stylesheets/app/shared/_headers.scss b/app/assets/stylesheets/app/shared/_headers.scss new file mode 100644 index 0000000..6f8f0fe --- /dev/null +++ b/app/assets/stylesheets/app/shared/_headers.scss @@ -0,0 +1,145 @@ +// Headers +// ---------------------------------------- + +// -- File Variables ---------------------- + +$border-light:#74B8EA; +$background: #F0F0F3; +$user-context-width:227px; + + +// ---------------------------------------- + +.ext-texture { + background:transparent image-url('gradients/white-texture-x63.png') left top repeat-x; +} + +.ext-header { + max-width:$site-total-width - 2px; // Minus the borders + height:63px; + @extend .ext-bradius; +} + + +// Header Object +// ---------------------------------------- + +header#main { + @extend .ext-header; + background:$background image-url('gradients/light-to-dark-blue-x63.png') left top repeat-x; + margin:$vertical-margin 0; + border:1px solid $border-light; + border-bottom:1px solid #518CBC; + border-top:1px solid lighten(saturate($border-light, 5%), 9%); + @include box-shadow(0px 1px 2px darken(#F0F0F3, 20%)); + position:relative; + overflow:hidden; + .light { + @extend .ext-header; + @extend .ext-texture; + height:62px; + border-bottom:1px solid $border-light; + + // Used as a spacer for the width + padding:0 $user-context-width 0 0; + } + + // Resizable Navigation Items. + span { + @include debug; + float:left; + margin-left:15px; + font-size:size(17px); + line-height:62px; + display:inline; + float:left; + margin-right:7px; + } + + .message { + margin-left:206px; + } + + a { + @include text-shadow(1px 1px 0px darken(#518CBC, 12%)); + color:#fff; + &:active, &:hover { + color:#FFFF70; + text-decoration:none; + } + } +} + +// User Context Object +// ---------------------------------------- + +.user-context { + @include pos(0 10px); + @include size(200px); + padding-left:12px; + text-align:center; + font-size:size(17px); + line-height:62px; + color:#DDDDDD; + border-left:1px solid $border-light; + @include box-shadow(-1px -1px 0px #3A91DE); + // Logged out version of this little guy. + .display { + @extend .ext-bradius-inner; + @include box-shadow(0 -1px 0px #518CBC, 0 1px 0 #74B8EA); + vertical-align: middle; + margin: -2px 7px 0 0; + } + .logged-out { + @include box-shadow(none); + } + .user { + width: 170px; + display: block; + text-align:left; + } + .logout { + display: block; + position: absolute; + top: 0; + right: 0; + } +} + + +// Logo Object +// ---------------------------------------- + +.gemeinschaft-logo { + @include logo('logo.png'); + @include pos(2px 0 0 10px); + @include debug; +} + + +// Search Box Object +// ---------------------------------------- + +.search-box { + @extend .ext-bradius-inner; + float: left; + margin-left: 200px; + margin-top: 18px; + border-bottom: 1px solid #74B7EB; + position: relative; + input.text { + z-index: 0; + @extend .ext-bradius-inner; + background: #fff image-url('gradients/white-gray-x29-reverse.png') left top repeat-x; + line-height: 25px; + height: 25px; + border: 1px solid #3472B2; + @include size(160px, 25px, 0 23px 0 12px); + } + input[type="submit"] { + @include pos(5px 6px 0 0); + @include image-replace('icons/search-13x16.png'); + border:0; + } +} + |