Replace priority plus navigation with dropdowns
This commit is contained in:
Michael Rose
@@ -23,6 +23,7 @@
|
||||
|
||||
/* Components */
|
||||
@import "minimal-mistakes/buttons";
|
||||
@import "minimal-mistakes/dropdowns";
|
||||
@import "minimal-mistakes/notices";
|
||||
@import "minimal-mistakes/masthead";
|
||||
@import "minimal-mistakes/navigation";
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
//
|
||||
// Dropdown menus
|
||||
// --------------------------------------------------
|
||||
|
||||
$zindex-dropdown: 1000;
|
||||
$transition-collapse: height 0.35s ease !default;
|
||||
|
||||
.collapse {
|
||||
&:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.in {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
-webkit-transition: $transition-collapse;
|
||||
transition: $transition-collapse;
|
||||
}
|
||||
|
||||
// The dropdown wrapper (div)
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Prevent the focus on the dropdown toggle when closing dropdowns
|
||||
.dropdown-toggle:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// The dropdown menu (ul)
|
||||
.dropdown-menu {
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
z-index: $zindex-dropdown;
|
||||
float: left;
|
||||
min-width: 160px;
|
||||
padding: 5px;
|
||||
margin: 15px 0 0; // override default ul
|
||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||
list-style: none;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
background: $background-color;
|
||||
background-clip: padding-box;
|
||||
-webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16),
|
||||
0 2px 10px 0 rgba(#000, 0.12);
|
||||
box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
right: 10px;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: $border-color transparent;
|
||||
display: block;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 10px;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: $background-color transparent;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Links within the dropdown menu
|
||||
> li {
|
||||
display: block;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
> li > a {
|
||||
display: block;
|
||||
clear: both;
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
margin: 0;
|
||||
padding: $navbar-padding-vertical $navbar-padding-horizontal;
|
||||
font-size: $type-size-5;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: $masthead-link-color-hover;
|
||||
background: $navicon-link-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.dropdown-menu > .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Open state for the dropdown
|
||||
.open {
|
||||
// Show the menu
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Backdrop to catch body clicks on mobile, etc.
|
||||
.dropdown-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: ($zindex-dropdown - 10);
|
||||
}
|
||||
@@ -40,6 +40,7 @@
|
||||
}
|
||||
|
||||
.site-logo img {
|
||||
margin-right: 0.5rem;
|
||||
max-height: 2rem;
|
||||
}
|
||||
|
||||
@@ -69,20 +70,26 @@
|
||||
}
|
||||
|
||||
ul {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
clear: both;
|
||||
list-style-type: none;
|
||||
|
||||
@include breakpoint($medium) {
|
||||
height: $nav-height;
|
||||
line-height: $nav-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.masthead__menu-item {
|
||||
display: block;
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
a {
|
||||
color: $masthead-link-color;
|
||||
|
||||
&:hover {
|
||||
color: $masthead-link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&--lg {
|
||||
padding-right: 2em;
|
||||
font-weight: 700;
|
||||
.dropdown-menu {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,168 @@
|
||||
NAVIGATION
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Navigation bar
|
||||
========================================================================== */
|
||||
|
||||
.navbar {
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
|
||||
margin-bottom: $navbar-margin-bottom;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
clear: both;
|
||||
overflow-x: visible;
|
||||
border-top: 1px solid transparent;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&.in {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@include breakpoint($medium) {
|
||||
clear: none;
|
||||
float: right;
|
||||
width: auto;
|
||||
border-top: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
&.collapse {
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
padding-bottom: 0; // Override default setting
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
&.in {
|
||||
overflow-y: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar toggle
|
||||
//
|
||||
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
|
||||
// JavaScript plugin.
|
||||
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
float: right;
|
||||
height: $nav-toggle-height;
|
||||
padding: 9px 10px;
|
||||
margin-right: $navbar-padding-horizontal;
|
||||
background-color: transparent;
|
||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||
border: 1px solid transparent;
|
||||
|
||||
// We remove the `outline` here, but later compensate by attaching `:hover`
|
||||
// styles to `:focus`.
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@include breakpoint($medium) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar nav links
|
||||
//
|
||||
// Builds on top of the `.nav` components with its own modifier class to make
|
||||
// the nav the full height of the horizontal nav (above 768px).
|
||||
|
||||
.navbar-nav {
|
||||
margin: ($navbar-padding-vertical / 2) -$navbar-padding-horizontal;
|
||||
|
||||
> li > a {
|
||||
display: block;
|
||||
padding-top: $navbar-padding-vertical;
|
||||
padding-bottom: $navbar-padding-vertical;
|
||||
}
|
||||
|
||||
@include breakpoint(max-width $medium) {
|
||||
// Dropdowns get custom display when collapsed
|
||||
.open .dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
> li > a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Uncollapse the nav
|
||||
@include breakpoint($medium) {
|
||||
float: left;
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
|
||||
> a {
|
||||
padding: $navbar-padding-vertical $navbar-padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown menus
|
||||
|
||||
// Menu position and menu carets
|
||||
.navbar-nav > li > .dropdown-menu {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
// Menu position and menu caret support for dropups via extra dropup class
|
||||
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Component alignment
|
||||
//
|
||||
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
|
||||
// issues with parents and chaining. Only do this when the navbar is uncollapsed
|
||||
// though so that navbar contents properly stack and align in mobile.
|
||||
//
|
||||
// Declared after the navbar components to ensure more specificity on the margins.
|
||||
|
||||
@include breakpoint($medium) {
|
||||
.navbar-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
float: right;
|
||||
margin-right: -$navbar-padding-horizontal;
|
||||
|
||||
~ .navbar-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Breadcrumb navigation links
|
||||
========================================================================== */
|
||||
@@ -164,169 +326,6 @@
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/*
|
||||
Priority plus navigation
|
||||
========================================================================== */
|
||||
|
||||
.greedy-nav {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: $nav-height;
|
||||
background: $background-color;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: 0 1rem;
|
||||
color: $masthead-link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $masthead-link-color-hover;
|
||||
}
|
||||
|
||||
&.site-logo {
|
||||
margin-left: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.site-title {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
height: $nav-toggle-height;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.visible-links {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background: $primary-color;
|
||||
width: 100%;
|
||||
-webkit-transition: $global-transition;
|
||||
transition: $global-transition;
|
||||
-webkit-transform: scaleX(0) translate3d(0, 0, 0);
|
||||
transform: scaleX(0) translate3d(0, 0, 0); // hide
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
-webkit-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
transform: scaleX(1); // reveal
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-links {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 15px;
|
||||
padding: 5px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
background: $background-color;
|
||||
-webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16),
|
||||
0 2px 10px 0 rgba(#000, 0.12);
|
||||
box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
font-size: $type-size-5;
|
||||
|
||||
&:hover {
|
||||
color: $masthead-link-color-hover;
|
||||
background: $navicon-link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
right: 10px;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: $border-color transparent;
|
||||
display: block;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 10px;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: $background-color transparent;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-js {
|
||||
.greedy-nav {
|
||||
.visible-links {
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Navigation list
|
||||
========================================================================== */
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
}
|
||||
|
||||
.search__toggle {
|
||||
float: right;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
height: $nav-toggle-height;
|
||||
@@ -58,7 +59,8 @@
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
font-size: $type-size-3;
|
||||
|
||||
|
||||
@@ -58,7 +58,8 @@ body:hover .visually-hidden button {
|
||||
background: #fff;
|
||||
z-index: 100000;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -377,20 +378,6 @@ body:hover .visually-hidden button {
|
||||
}
|
||||
}
|
||||
|
||||
.greedy-nav__toggle:hover {
|
||||
.navicon,
|
||||
.navicon:before,
|
||||
.navicon:after {
|
||||
background: mix(#000, $primary-color, 25%);
|
||||
}
|
||||
|
||||
&.close {
|
||||
.navicon {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Sticky, fixed to top content
|
||||
========================================================================== */
|
||||
@@ -419,7 +406,8 @@ body:hover .visually-hidden button {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e3e3e3;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -459,7 +447,8 @@ body:hover .visually-hidden button {
|
||||
background: #fff;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
-webkit-box-shadow: $box-shadow;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
|
||||
@@ -152,7 +152,11 @@ $right-sidebar-width-wide: 400px !default;
|
||||
$border-radius: 4px !default;
|
||||
$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
|
||||
$nav-height: 2em !default;
|
||||
$nav-toggle-height: 2rem !default;
|
||||
$nav-toggle-height: $nav-height !default;
|
||||
$navbar-height: $nav-height;
|
||||
$navbar-margin-bottom: 0;
|
||||
$navbar-padding-horizontal: 0.75rem;
|
||||
$navbar-padding-vertical: 0.25rem;
|
||||
$navicon-width: 1.5rem !default;
|
||||
$navicon-height: 0.25rem !default;
|
||||
$global-transition: all 0.2s ease-in-out !default;
|
||||
|
||||
Reference in New Issue
Block a user