discourse/app/assets/stylesheets/desktop/header.scss

268 lines
5.1 KiB
SCSS
Raw Normal View History

2013-09-05 15:37:07 -04:00
// --------------------------------------------------
// Discourse header
// --------------------------------------------------
.d-header {
min-width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 2px 4px -2px rgba($header_primary, .25);
background-color: $header_background;
padding-top: 3px;
2013-09-05 15:37:07 -04:00
.docked & {
position: fixed;
}
.contents {
margin: 10px 0;
}
.title {
display: table;
float: left;
height: 40px;
> a {
display: table-cell;
vertical-align: middle;
}
}
#site-logo {
max-height: 40px;
2013-09-05 15:37:07 -04:00
}
2013-12-09 16:27:49 -05:00
.fa-home {
2013-09-05 15:37:07 -04:00
font-size: 20px;
line-height: 40px;
padding-right: 3px;
padding-top: 3px;
2013-09-05 15:37:07 -04:00
}
.panel {
float: right;
position: relative;
}
.current-username {
float: left;
a {
color: $header_primary;
2013-09-05 15:37:07 -04:00
font-size: 14px;
display:block;
margin-top: 10px;
2013-09-05 15:37:07 -04:00
}
}
button.login-button {
float: left;
margin-top: 7px;
padding: 6px 10px;
.fa { margin-right: 3px; }
2013-09-05 15:37:07 -04:00
}
.icons {
float: left;
text-align: center;
2014-04-01 14:09:41 -04:00
margin: 0 0 0 5px;
2013-09-05 15:37:07 -04:00
list-style: none;
> li {
float: left;
}
.icon {
display: block;
padding: 3px;
color: scale-color($header_primary, $lightness: 50%);
2013-09-05 15:37:07 -04:00
text-decoration: none;
cursor: pointer;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
2013-09-05 15:37:07 -04:00
&:hover {
color: $primary;
background-color: scale-color($primary, $lightness: 90%);
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
2013-09-05 15:37:07 -04:00
}
&:active {
color: $primary;
background-color: scale-color($primary, $lightness: 90%);
2013-09-05 15:37:07 -04:00
}
}
.active .icon {
position: relative;
color: #7b7b7b;
background-color: $secondary;
2013-09-05 15:37:07 -04:00
cursor: default;
border-top: 1px solid scale-color($primary, $lightness: 90%);
border-left: 1px solid scale-color($primary, $lightness: 90%);
border-right: 1px solid scale-color($primary, $lightness: 90%);
2013-09-05 15:37:07 -04:00
&:after {
display: block;
position: absolute;
top: 100%;
left: 0;
z-index: 1101;
width: 100%;
height: 0;
content: "";
border-top: 1px solid $secondary;
2013-09-05 15:37:07 -04:00
}
&:hover {
border-bottom: none;
}
2013-09-05 15:37:07 -04:00
}
2013-12-09 16:27:49 -05:00
[class^="fa fa-"] {
2013-09-05 15:37:07 -04:00
width: 32px;
height: 32px;
font-size: 20px;
line-height: 32px;
display: inline-block;
}
.notifications {
position: relative;
}
.badge-notification {
position: absolute;
top: -9px;
z-index: 1;
margin-left: 0;
}
.unread-notifications {
right: -4px;
2014-05-06 12:30:05 -04:00
background-color: scale-color($tertiary, $lightness: 50%);
2013-09-05 15:37:07 -04:00
}
.unread-private-messages {
left: -4px;
}
}
.flagged-posts {
background-color: $danger;
2013-09-05 15:37:07 -04:00
}
}
2014-05-14 01:27:04 -04:00
/* needs to be global, used in user-drop down and user page too */
.unread-private-messages {
background-color: $success;
}
2013-09-05 15:37:07 -04:00
#main {
position: relative;
}
#main-outlet {
2014-03-12 23:17:18 -04:00
padding-top: 82px;
2013-09-05 15:37:07 -04:00
}
// Dropdowns
// --------------------------------------------------
.d-dropdown {
display: none;
position: absolute;
width: 320px;
max-height: 417px;
2013-09-05 15:37:07 -04:00
top: 100%;
right: 0;
z-index: 1100;
overflow: auto;
border: 1px solid scale-color($primary, $lightness: 90%);
background-color: $secondary;
@include box-shadow(0 2px 2px rgba($primary, .4));
2013-09-05 15:37:07 -04:00
// Common
ul {
margin: 0;
list-style: none;
}
li {
padding: 5px;
font-size: 13px;
line-height: 16px;
2013-12-09 16:27:49 -05:00
.fa {
2013-09-05 15:37:07 -04:00
margin-right: 3px;
}
}
.heading {
border-top: 1px solid scale-color($primary, $lightness: 90%);
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
color: darken($primary, 40%);
2013-09-05 15:37:07 -04:00
font-weight: bold;
font-size: 12px;
line-height: 15px;
}
.selected {
2014-05-06 09:48:38 -04:00
background-color: scale-color($tertiary, $lightness: 90%);
2013-09-05 15:37:07 -04:00
}
// Notifications
&#notifications-dropdown {
2013-12-09 16:27:49 -05:00
.fa {
color: scale-color($primary, $lightness: 50%);
2013-09-05 15:37:07 -04:00
}
li {
2014-05-06 09:48:38 -04:00
background-color: scale-color($tertiary, $lightness: 90%);
2013-09-05 15:37:07 -04:00
}
.read {
background-color: $secondary;
2013-09-05 15:37:07 -04:00
}
.none {
padding: 5px;
}
.loading {
padding: 10px;
display: block;
color: scale-color($primary, $lightness: 50%);
font-size: 24px;
text-align: center;
}
2013-09-05 15:37:07 -04:00
}
// Search
input[type='text'] {
width: 298px;
height: 22px;
margin: 5px;
padding: 5px;
}
.searching {
display: block;
position: absolute;
top: 13px;
right: 13px;
color: scale-color($primary, $lightness: 50%);
2013-09-05 15:37:07 -04:00
font-size: 18px;
}
.no-results {
padding: 0 5px 5px;
}
.filter {
float: right;
}
// Categories
.category {
float: left;
background-color: transparent;
line-height: 20px;
}
2014-02-11 20:56:49 -05:00
&#user-dropdown {
width: 118px;
.user-dropdown-links {
text-align: right;
}
2014-02-11 20:56:49 -05:00
}
.btn {
padding: 2px 8px;
margin-bottom: 2px;
.fa {
margin-right: 5px;
}
}
2013-09-05 15:37:07 -04:00
}