356 lines
8.8 KiB
SCSS
356 lines
8.8 KiB
SCSS
|
@charset "UTF-8";
|
||
|
|
$nav-small-screen-header-height: 3em;
|
||
|
|
@mixin main-nav( $nav-orientation: vertical,
|
||
|
|
$side: left,
|
||
|
|
$header-height: 7em,
|
||
|
|
$accountlinks-offset: 0,
|
||
|
|
$search-offset: 0,
|
||
|
|
$topbar-offset: 0,
|
||
|
|
$sidebar-width: 0
|
||
|
|
) {
|
||
|
|
|
||
|
|
#account-links {
|
||
|
|
position: absolute;
|
||
|
|
top: -$nav-small-screen-header-height;
|
||
|
|
white-space: nowrap;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-bar {
|
||
|
|
&.expanded {
|
||
|
|
z-index: 99;
|
||
|
|
}
|
||
|
|
|
||
|
|
.has-dropdown a, .toggle-topbar a {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* On small screens, this shows in the left corner of the menu bar so an account links
|
||
|
|
modal can be accessed */
|
||
|
|
#account-link-access, #login-form-access {
|
||
|
|
position: absolute;
|
||
|
|
left: 1em;
|
||
|
|
top: -1 * $topbar-height;
|
||
|
|
|
||
|
|
&:visited {
|
||
|
|
color: $link-color !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Adjustments to the account links display in the masthead */
|
||
|
|
@media #{$small-only}, print {
|
||
|
|
#account-links-userpic {
|
||
|
|
margin-top: -11px;
|
||
|
|
img {
|
||
|
|
max-height: $nav-small-screen-header-height;
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media print {
|
||
|
|
#account-links-text {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media #{$small-only} {
|
||
|
|
/* This makes the account links text into a modal when the screen is small */
|
||
|
|
#account-links-text {
|
||
|
|
@include reveal-modal-base(
|
||
|
|
// Provides reveal base styles, can be set to false to override.
|
||
|
|
$base-style:true,
|
||
|
|
// Sets reveal width Default: $reveal-default-width or 80%
|
||
|
|
$width:$reveal-default-width
|
||
|
|
);
|
||
|
|
@include reveal-modal-style(
|
||
|
|
// Sets background color of reveal modal. Default: $reveal-modal-bg or #fff
|
||
|
|
$bg:$reveal-modal-bg,
|
||
|
|
// Set reveal border style. Default: $reveal-border-style or solid
|
||
|
|
$border:true,
|
||
|
|
// Padding to apply to reveal modal. Default: $reveal-modal-padding.
|
||
|
|
$padding:$reveal-modal-padding,
|
||
|
|
// Width of border (i.e. 1px). Default: $reveal-border-width.
|
||
|
|
$border-style:$reveal-border-style,
|
||
|
|
// Color of border. Default: $reveal-border-color.
|
||
|
|
$border-width:$reveal-border-width,
|
||
|
|
// Color of border. Default: $reveal-border-color.
|
||
|
|
$border-color:$reveal-border-color,
|
||
|
|
// Choose whether or not to include the default box-shadow. Default: true, Options: false
|
||
|
|
$box-shadow:true,
|
||
|
|
// Default: $reveal-position-top or 50px
|
||
|
|
$top-offset:$reveal-position-top
|
||
|
|
);
|
||
|
|
|
||
|
|
.logout.button { display: block; margin-top: .5em; }
|
||
|
|
ul { list-style: none; margin-left: 0; }
|
||
|
|
button.close-reveal-modal {
|
||
|
|
@include reveal-close();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media #{$medium-up} {
|
||
|
|
#account-links {
|
||
|
|
top: $accountlinks-offset + 1em;
|
||
|
|
|
||
|
|
#account-links-text {
|
||
|
|
.close-reveal-modal { display: none; }
|
||
|
|
}
|
||
|
|
|
||
|
|
#account-links-text, .account-links-in-header, #nav-login-form {
|
||
|
|
float: $side;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
float: $side;
|
||
|
|
clear: both;
|
||
|
|
margin: 0;
|
||
|
|
font-size: .85rem;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
list-style: none;
|
||
|
|
float: left;
|
||
|
|
margin: 0 .5em;
|
||
|
|
|
||
|
|
&:after {
|
||
|
|
content: "•";
|
||
|
|
margin-left: .5em;
|
||
|
|
}
|
||
|
|
&:last-child:after {
|
||
|
|
content: "";
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
li.before-break:after {
|
||
|
|
content: "";
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
li.after-break {
|
||
|
|
clear: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ljuser {
|
||
|
|
font-size: 1.3rem;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ljuser img {
|
||
|
|
vertical-align: middle !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
form {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
label.inline {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logout.button {
|
||
|
|
padding: .15rem .5rem;
|
||
|
|
margin: 0;
|
||
|
|
vertical-align: .15rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#account-links-userpic {
|
||
|
|
max-height: 7em;
|
||
|
|
float: $side;
|
||
|
|
@if $side == left {
|
||
|
|
margin-right: 1em;
|
||
|
|
} @else {
|
||
|
|
margin-left: 1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#account-links-text {
|
||
|
|
text-align: $side;
|
||
|
|
}
|
||
|
|
|
||
|
|
#nav-login-form {
|
||
|
|
line-height: 1;
|
||
|
|
|
||
|
|
label, input {
|
||
|
|
margin-bottom: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
line-height: 2em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#nav-login-form {
|
||
|
|
#login-form, #login-other {
|
||
|
|
display: inline-block;
|
||
|
|
width: 49%;
|
||
|
|
vertical-align: top;
|
||
|
|
padding-left: .9375rem;
|
||
|
|
padding-right: .9375rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#header-search {
|
||
|
|
position: absolute;
|
||
|
|
top: $header-height + $search-offset;
|
||
|
|
right: 0;
|
||
|
|
padding-right: 2em;
|
||
|
|
|
||
|
|
ul {
|
||
|
|
list-style: none;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-search {
|
||
|
|
input, select {
|
||
|
|
margin: 0;
|
||
|
|
width: auto;
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
}
|
||
|
|
input {
|
||
|
|
padding: 1px .25em;
|
||
|
|
}
|
||
|
|
select {
|
||
|
|
padding: 1px 24px 1px .25rem; // leave room on right for dropdown arrow
|
||
|
|
}
|
||
|
|
input.button {
|
||
|
|
padding: 0 .5em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Header space
|
||
|
|
*/
|
||
|
|
#masthead {
|
||
|
|
height: $nav-small-screen-header-height + 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#logo img {
|
||
|
|
height: $nav-small-screen-header-height;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
margin-top: $nav-small-screen-header-height + $topbar-offset + 2 * $base-line-height !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media #{$medium-up} {
|
||
|
|
#masthead {
|
||
|
|
height: $header-height;
|
||
|
|
}
|
||
|
|
|
||
|
|
#logo {
|
||
|
|
line-height: $header-height - $base-line-height;
|
||
|
|
}
|
||
|
|
|
||
|
|
#logo img {
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
margin-top: $header-height + $search-offset + 2 * $base-line-height !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $nav-orientation == vertical {
|
||
|
|
.main-nav {
|
||
|
|
position: absolute;
|
||
|
|
top: $nav-small-screen-header-height + $topbar-offset;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media #{$medium-up} {
|
||
|
|
.main-nav {
|
||
|
|
top: $header-height + $topbar-offset;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media #{$topbar-media-query} {
|
||
|
|
.main-nav {
|
||
|
|
width: $sidebar-width;
|
||
|
|
|
||
|
|
section {
|
||
|
|
font-size: small;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subnav a,
|
||
|
|
.topnav a {
|
||
|
|
color: $topbar-link-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Reset top-bar styles so they don't apply to the sidebar
|
||
|
|
*/
|
||
|
|
.top-bar {
|
||
|
|
height: auto;
|
||
|
|
|
||
|
|
.js-generated {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
border-left: $sidebar-width solid $topbar-bg;
|
||
|
|
margin-left: 0; // so that it doesn't try to center the content on the page
|
||
|
|
padding-left: ($column-gutter/2);
|
||
|
|
min-height: 73rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
.main-nav {
|
||
|
|
position: absolute;
|
||
|
|
top: $nav-small-screen-header-height + $base-line-height;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Make top-level nav items match the color of their sub-menu when open.
|
||
|
|
/ Without this, it looks like you're hovering on both the top-level item
|
||
|
|
/ AND whichever sub-item you're actually hovering on.
|
||
|
|
*/
|
||
|
|
@media #{$topbar-media-query} {
|
||
|
|
.top-bar-section li:hover:not(.has-form) a:not(.button):not(:hover) {
|
||
|
|
background: $topbar-dropdown-link-bg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media #{$medium-up} {
|
||
|
|
.main-nav {
|
||
|
|
top: $header-height;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// shrink search form on smaller screen sizes
|
||
|
|
@media #{$small-up} and (max-width:57em) {
|
||
|
|
.nav-search input, .nav-search select { max-width: 8em; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@media #{$small-up} and (max-width:50em) {
|
||
|
|
.nav-search input, .nav-search select { max-width: 6em; }
|
||
|
|
|
||
|
|
.top-bar-section .has-dropdown a {
|
||
|
|
padding-right: $topbar-link-padding !important;
|
||
|
|
|
||
|
|
&:after { display: none; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|