diff --git a/boulder_base.libraries.yml b/boulder_base.libraries.yml index e575c797..1f188f8e 100644 --- a/boulder_base.libraries.yml +++ b/boulder_base.libraries.yml @@ -99,7 +99,7 @@ ucb-site-contact-info-footer: css: theme: css/ucb-site-contact-info-footer.css: {} - + ucb-hero-unit: version: 1.x js: diff --git a/css/ucb-menu.css b/css/ucb-menu.css index 063a4944..6c81271c 100644 --- a/css/ucb-menu.css +++ b/css/ucb-menu.css @@ -6,6 +6,10 @@ display: none; } +.ucb-menu .ucb-menu { + display: none; +} + @media only screen and (max-width: 600px) { .ucb-mobile-menu-button-div { line-height: 2em; @@ -26,7 +30,7 @@ line-height: 2rem; margin-left: 2px; } - .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region ≈, .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region .ucb-menu { + .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region, .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region .ucb-menu { gap: 0; } .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region { @@ -92,3 +96,90 @@ line-height: 2rem; } } + +.ucb-page-content .ucb-menu { + flex-direction: column; + margin-bottom: 20px; + --ucb-menu-indent-start: 10px; + --ucb-menu-indent-inc: 5px; + --ucb-menu-indent-border-width: 2px; +} + +.ucb-page-content .ucb-menu .ucb-menu { + margin: 0; +} + +.ucb-page-content .ucb-menu .expanded>.ucb-menu { + display: block; +} + +.ucb-page-content .ucb-menu .collapsed>.ucb-menu { + display: none; +} + +.ucb-page-content .ucb-menu li.menu-item { + border-bottom: 1px solid rgba(0, 0, 0, .09); +} + +.ucb-page-content .ucb-menu li.menu-item.active { + background-color: inherit; +} + +.ucb-page-content .ucb-menu .ucb-menu li.menu-item { + border-bottom: none; +} + +.ucb-page-content .ucb-menu li.menu-item:last-child { + border-bottom: none; +} + +.ucb-page-content .ucb-menu li.menu-item a.nav-link { + color: inherit; + font-size: 1em; + line-height: 1.2em; + border-radius: 0; + margin: 0; + padding: 10px 10px 10px var(--ucb-menu-indent-start); +} + +.ucb-page-content .ucb-menu li.menu-item a.nav-link:hover { + color: #000; + background-color: rgba(0, 0, 0, .09); +} + +.ucb-page-content .ucb-menu li.menu-item a.nav-link.is-active { + color: #000; + background-color: var(--ucb-gold); +} + +.ucb-page-content .ucb-menu .ucb-menu li.menu-item a.nav-link { + font-weight: 400; + font-size: .9em; + padding: 7px 10px 7px calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) - var(--ucb-menu-indent-border-width)); +} + +.ucb-page-content .ucb-menu .ucb-menu .ucb-menu li.menu-item a.nav-link { + padding-left: calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) * 2); +} + +.ucb-page-content .ucb-menu .ucb-menu .ucb-menu .ucb-menu li.menu-item a.nav-link { + padding-left: calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) * 3); +} + +.ucb-page-content .ucb-menu .ucb-menu .ucb-menu .ucb-menu .ucb-menu li.menu-item a.nav-link { + padding-left: calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) * 4); +} + +.ucb-page-content .ucb-menu .expanded.active>a.nav-link, +.ucb-page-content .ucb-menu .expanded.active>.ucb-menu { + border-left: var(--ucb-menu-indent-border-width) solid var(--ucb-gold); +} + +.ucb-page-content .ucb-menu .ucb-menu .expanded.active>a.nav-link, +.ucb-page-content .ucb-menu .ucb-menu .expanded.active>.ucb-menu { + border-left: none; +} + +.ucb-page-content .ucb-menu .expanded.active>a.nav-link { + padding-left: calc(var(--ucb-menu-indent-start) - var(--ucb-menu-indent-border-width)); +} diff --git a/templates/block/block--system-menu-block.html.twig b/templates/block/block--system-menu-block.html.twig index 812e4603..595b2386 100755 --- a/templates/block/block--system-menu-block.html.twig +++ b/templates/block/block--system-menu-block.html.twig @@ -6,13 +6,12 @@ #} {% set classes = [ - 'container', - 'block', - 'block-' ~ configuration.provider|clean_class, - 'block-' ~ plugin_id|clean_class, - bundle ? 'block--type-' ~ bundle|clean_class, - view_mode ? 'block--view-mode-' ~ view_mode|clean_class, - 'ucb-system-menu-block' + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + bundle ? 'block--type-' ~ bundle|clean_class, + view_mode ? 'block--view-mode-' ~ view_mode|clean_class, + 'ucb-system-menu-block' ] %} {% block content %} diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig index 636a85cd..db6c3ed6 100644 --- a/templates/layout/page.html.twig +++ b/templates/layout/page.html.twig @@ -50,7 +50,7 @@ {# HEADER CONTENT #} {% block page_header %} {{ attach_library('boulder_base/ucb-social-media') }} - + {{ attach_library('boulder_base/ucb-menu') }} {% set menu_style = drupal_config('boulder_base.settings', 'ucb_menu_style') %} {% if menu_style == 'highlight' %} {{ attach_library('boulder_base/ucb-menu-style-highlight') }} @@ -191,7 +191,7 @@ {% elseif page.left_sidebar|render %} -