diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html index 119bbccc6bb..13e68c571da 100644 --- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html +++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html @@ -17,14 +17,14 @@ aria-label="Section navigation"> diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html index e5060a4c8be..a45babfbd4c 100644 --- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html +++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html @@ -21,10 +21,10 @@ - {{ svg_icon('plus-round') }} + {{ svg_icon('down') }} - {{ svg_icon('minus-round') }} + {{ svg_icon('up') }} diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less index 450d912f87d..3df707b5273 100644 --- a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less +++ b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less @@ -13,9 +13,10 @@ .respond-to-max( @bp-sm-max, { background-color: @gray-5; - border-bottom: 1px solid @gray-40; - border-top: 1px solid @gray-40; - margin-bottom: unit( @grid_gutter-width / 2 / @base-font-size-px, em ); + margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em ); + + // Add drop-shadow. + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); } ); // TODO - this will be updated to data-open='true' in newer expandables. diff --git a/cfgov/unprocessed/css/breadcrumbs.less b/cfgov/unprocessed/css/breadcrumbs.less index 221e9c7b839..5d512e1b141 100644 --- a/cfgov/unprocessed/css/breadcrumbs.less +++ b/cfgov/unprocessed/css/breadcrumbs.less @@ -1,18 +1,22 @@ -.breadcrumbs { +.m-breadcrumbs { // Mobile size. + position: relative; display: flex; - flex-wrap: wrap; gap: unit(10px / @base-font-size-px, rem); align-items: center; + flex-wrap: wrap; + font-size: unit(14px / @base-font-size-px, rem); padding-top: unit(15px / @base-font-size-px, rem); padding-bottom: unit(15px / @base-font-size-px, rem); - margin-left: unit(20px / @base-font-size-px, rem); - margin-right: unit(20px / @base-font-size-px, rem); + min-height: 33px; + width: calc(100vw - 65px); - .cf-icon-svg { - fill: @pacific; - margin-left: unit(-20px / @base-font-size-px, rem); + &_crumbs { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: block; } // Desktop size. @@ -24,30 +28,25 @@ // Hide on print. .respond-to-print( { - .breadcrumbs { + .m-breadcrumbs { display: none; } } ); // Right-to-left (RTL) layout. html[lang='ar'] { - .breadcrumbs { + .m-breadcrumbs { margin-right: unit(20px / @base-font-size-px, rem); margin-left: unit(20px / @base-font-size-px, rem); - - .cf-icon-svg { - margin-right: unit(-20px / @base-font-size-px, rem); - margin-left: initial; - } } } // TODO: When the layout-2-1 template is converted to use `u-layout-grid_wrapper`, this can be removed. -.content_wrapper .breadcrumbs { - margin-left: unit(35px / @base-font-size-px, rem); +.content_wrapper .m-breadcrumbs { + margin-left: unit(15px / @base-font-size-px, rem); // Tablet size only. .respond-to-range(@bp-sm-min, @bp-sm-max, { - margin-left: unit(50px / @base-font-size-px, rem); + margin-left: unit(30px / @base-font-size-px, rem); }); } diff --git a/cfgov/unprocessed/css/enhancements/layout-1-3.less b/cfgov/unprocessed/css/enhancements/layout-1-3.less index 039c1c9d2ea..385b8417eba 100644 --- a/cfgov/unprocessed/css/enhancements/layout-1-3.less +++ b/cfgov/unprocessed/css/enhancements/layout-1-3.less @@ -10,9 +10,28 @@ } } + // Tablet and below. + .respond-to-max(@bp-sm-max, { + .u-layout-grid { + &_breadcrumbs { + padding-left: unit(30px / @base-font-size-px, rem); + padding-right: unit(30px / @base-font-size-px, rem); + margin-left: unit(-30px / @base-font-size-px, rem); + margin-right: unit(-30px / @base-font-size-px, rem); + background: @gray-5; + border-bottom: 1px solid @gray-40; + } + } + }); + // Tablet .respond-to-range( @bp-sm-min, @bp-sm-max, { .u-layout-grid { + &_breadcrumbs { + padding-left: unit(15px / @base-font-size-px, rem); + padding-right: unit(15px / @base-font-size-px, rem); + } + &_secondary-nav { margin-left: unit(-30px / @base-font-size-px, rem); margin-right: unit(-30px / @base-font-size-px, rem); diff --git a/cfgov/unprocessed/css/organisms/secondary-nav.less b/cfgov/unprocessed/css/organisms/secondary-nav.less index 4f944b212df..6cc59acf000 100644 --- a/cfgov/unprocessed/css/organisms/secondary-nav.less +++ b/cfgov/unprocessed/css/organisms/secondary-nav.less @@ -12,14 +12,14 @@