Skip to content
GitLab
Commit 5f928d7a authored by Kevin Paxman's avatar Kevin Paxman
Browse files

Merge branch 'feature/ISTWCMS-4624-m26lebla-menulinks-overflow' into '3.0.x' 

Feature istwcms4624 m26lebla menulinks overflow

See merge request !89
parents 74142a50 71e5f726
Hide whitespace changes
Inline Side-by-side
css/styles.css
View file @ 5f928d7a
......@@ -7534,7 +7534,7 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
height: inherit;
overflow: inherit;
width: inherit;
z-index: 7;
z-index: 9;
}
.no-scroll .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu--horizontal > .menu--item[aria-expanded="true"] > a span {
display: block;
......@@ -7548,12 +7548,14 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
.uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
background: #f7f7f7;
border-width: 0;
-moz-column-count: 1;
column-count: 1;
display: inherit;
height: auto;
left: inherit;
min-height: auto;
min-width: 13rem;
padding: 1rem 0;
padding: 1rem 0.5rem;
right: 0;
top: inherit;
width: auto;
......@@ -8283,7 +8285,7 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
right: 0;
top: 0;
width: 2rem;
z-index: 7;
z-index: 9;
}
.no-scroll .uw-horizontal-nav--menu .menu--horizontal > .menu--item[aria-expanded="true"] > a span {
display: none;
......@@ -8297,25 +8299,9 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
text-transform: none;
width: 100%;
}
.uw-horizontal-nav--menu .menu--subnav li {
-webkit-animation: fadeIn ease 0.2s;
animation: fadeIn ease 0.2s;
}
@media (min-width: 48.06rem) {
.uw-horizontal-nav--menu .menu .submenu-active.has-submenu--small .menu--subnav {
min-height: 10rem;
} }
@media (min-width: 48.06rem) {
.uw-horizontal-nav--menu .menu .submenu-active.has-submenu--medium .menu--subnav {
min-height: 25rem;
} }
.uw-horizontal-nav--menu .menu .submenu-active.has-submenu--large .menu--subnav {
min-height: 50rem;
.uw-horizontal-nav--menu .menu .submenu-active[aria-expanded="true"] > a::after {
transform: scale(0.75, 0.75) rotate(-90deg);
}
@media (min-width: 63.1875rem) {
.uw-horizontal-nav--menu .menu .submenu-active.has-submenu--large .menu--subnav {
min-height: 35rem;
} }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
background: #f7f7f7;
display: block;
......@@ -8324,36 +8310,6 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
top: 0;
z-index: 7;
}
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav ~ .menu--subnav {
position: absolute;
top: inherit;
}
@media (min-width: 48.06rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
padding: 0 16px;
align-items: flex-start;
background: #f7f7f7;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.13);
display: flex;
flex-flow: wrap;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
left: 3rem;
overflow-y: inherit;
padding: 2.5rem 0.5rem 1rem;
top: 100%;
width: calc(100% - 6rem);
z-index: 7;
} }
@media (min-width: 48.06rem) and (min-width: 75rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
padding-left: 0;
padding-right: 0;
} }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--subnav {
align-items: inherit;
background: inherit;
......@@ -8375,9 +8331,40 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
width: inherit;
z-index: inherit;
}
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
display: block;
}
@media (min-width: 48.06rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
background: #f7f7f7;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.13);
-moz-column-break-inside: avoid;
break-inside: avoid;
-moz-column-count: 2;
column-count: 2;
-moz-column-fill: balance;
column-fill: balance;
-moz-column-gap: 2rem;
column-gap: 2rem;
height: auto;
left: 3rem;
overflow-y: inherit;
padding: 0 16px 24px 16px;
top: 100%;
width: calc(100% - 6rem);
z-index: 7;
} }
@media (min-width: 63.1875rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
-moz-column-count: 3;
column-count: 3;
} }
@media (min-width: 75rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
-moz-column-count: 4;
column-count: 4;
} }
@supports ((-moz-column-break-inside: avoid) or (break-inside: avoid-column)) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
display: block;
} }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--subnav {
padding: 0;
}
......@@ -8392,7 +8379,7 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
}
@media (min-width: 48.06rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item a {
padding: 8px;
padding: 8px 8px 8px 0;
} }
.no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent {
border-bottom: 1px solid #e6e6e6;
......@@ -8409,26 +8396,22 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
.no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item a {
font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-weight: 200;
padding-left: 32px;
}
.no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item a {
font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-weight: 200;
padding-left: 56px;
}
@media (min-width: 48.06rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
flex: 0 1;
height: auto;
max-width: 50%;
padding-left: 8px;
width: 100%;
}
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item {
font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-weight: 200;
margin-top: inherit;
max-width: inherit;
padding-left: 16px;
padding-left: 0.5rem;
}
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item a {
font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
......@@ -8436,7 +8419,7 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
}
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item {
margin-top: inherit;
padding-left: 16px;
padding-left: 0.5rem;
}
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item a {
font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
......@@ -8444,19 +8427,13 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
}
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item {
margin-top: inherit;
padding-left: 16px;
}
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item a {
font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-weight: 200;
} }
@media (min-width: 63.1875rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
max-width: 33%;
padding-left: 16px;
} }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent {
padding: 4px 0 4px 8px;
padding: 4px 0 4px 0;
top: 0;
width: 100%;
}
......@@ -8477,10 +8454,10 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
}
@media (min-width: 48.06rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent {
flex: 1 0 100%;
max-width: inherit;
padding: 8px 0 8px 16px;
position: absolute;
-moz-column-span: all;
column-span: all;
max-width: inherit !important;
padding: 8px 0 8px 0;
}
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent .menu--link-parent {
font-size: 0.88889rem;
......@@ -8489,6 +8466,15 @@ fieldset .fieldset-wrapper .webform-container-inline .fieldset-invisible,
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent .menu--link-parent::after {
right: -1rem;
} }
@media (min-width: 48.06rem) {
.uw-horizontal-nav--menu .menu .sub-1 {
/* for Chrome and Edge Brave Opera */
-moz-column-break-inside: avoid;
break-inside: avoid;
/* for Firefox */
display: inline-grid;
page-break-inside: avoid;
} }
.uw-horizontal-nav--secondary {
max-width: 100%;
......
css/styles.min.css
View file @ 5f928d7a
This source diff could not be displayed because it is too large. You can view the blob instead.
source/_patterns/00-config/_design-tokens.artifact.scss
View file @ 5f928d7a
......@@ -511,4 +511,4 @@ $gesso: (
xxl: 96px,
),
gutter-width: 40px,
);
\ No newline at end of file
);
source/_patterns/03-layouts/site-container/site-container.twig
View file @ 5f928d7a
......@@ -22,7 +22,7 @@
'items': footer_menu
}%}
{% if pattern_lab %}
{% include "@components/eu-cookie-compliance/eu-cookie-compliance.twig" %}
{# {% include "@components/eu-cookie-compliance/eu-cookie-compliance.twig" %}#}
{% endif %}
{% endblock %}
</div>
source/_patterns/04-components/menu/menu--header/_menu--header.scss
View file @ 5f928d7a
......@@ -79,8 +79,7 @@ $menu-horizontal-drop-bg: #f7f7f7;
height:inherit;
overflow:inherit;
width:inherit;
// Puts the content at z-index 7
z-index: gesso-z-index(dropdown);
z-index: gesso-z-index(overlay);
span{
display:block;
}
......@@ -98,12 +97,13 @@ $menu-horizontal-drop-bg: #f7f7f7;
.submenu-active .menu--subnav{
background: $menu-horizontal-drop-bg;
border-width:0;
column-count: 1;
display:inherit;
height:auto;
left:inherit;
min-height:auto;
min-width:13rem;
padding:1rem 0;
padding:1rem 0.5rem;
right:0;
top:inherit;
width:auto;
......
source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
View file @ 5f928d7a
......@@ -293,6 +293,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
}
}
}
.no-scroll & {
&[aria-expanded="true"]{
......@@ -306,8 +307,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
right:0;
top:0;
width:2rem;
// Puts the content at z-index 7
z-index: gesso-z-index(dropdown);
z-index: gesso-z-index(overlay);
span{
display:none;
}
......@@ -327,71 +327,24 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
font-size: $menu-horizontal-sub-font-size;
text-transform: none;
width:100%;
li{
animation: fadeIn ease 0.2s;
}
}
.submenu-active {
// Change the height of the tray based on the class assigned by the count of items.
&.has-submenu--small .menu--subnav{
//background: #ffd700 !important;
@include medium {
min-height: 10rem;
&[aria-expanded="true"]{
> a{
&::after {
transform: scale(0.75, 0.75) rotate(-90deg);
}
}
&.has-submenu--medium .menu--subnav{
//background: #00f !important;
@include medium {
min-height: 25rem;
}
}
&.has-submenu--large .menu--subnav{
//background: #800080 !important;
min-height:50rem;
@include large {
min-height: 35rem;
}
}
.menu--subnav{
background: $menu-horizontal-drop-bg;
display:block;
// Figure out better way than 100 vh? double check phones
height:calc(100vh - 7rem);
position: absolute;
top:0;
// Puts the dropdown at z-index 7
z-index: gesso-z-index(dropdown);
~ .menu--subnav{
position: absolute;
top:inherit;
}
@include medium {
@include uw-contained-width;
align-items: flex-start;
background: $menu-horizontal-drop-bg;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10), 0 6px 6px rgba(0, 0, 0, 0.13);
display: flex;
flex-flow: wrap;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
left: 3rem;
overflow-y:inherit;
padding:2.5rem 0.5rem 1rem;
top: 100%;
width:calc(100% - 6rem);
// Puts the dropdown at z-index 7
z-index: gesso-z-index(dropdown);
}
.menu--subnav{
align-items: inherit;
align-items:inherit;
background:inherit;
box-shadow:none;
column-count:inherit;
......@@ -410,12 +363,36 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
width:inherit;
z-index:inherit;
}
@include medium {
//@include uw-contained-width;
background: $menu-horizontal-drop-bg;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10), 0 6px 6px rgba(0, 0, 0, 0.13);
break-inside:avoid;
column-count: 2;
column-fill: balance;
column-gap: $grid-gap;
height: auto;
left: 3rem;
overflow-y:inherit;
padding: 0 gesso-spacing(sm) gesso-spacing(md) gesso-spacing(sm);
top: 100%;
width:calc(100% - 6rem);
// Puts the dropdown at z-index 7
z-index: gesso-z-index(dropdown);
}
@include large {
column-count: 3;
}
@include xl {
column-count: 4;
}
.menu--item{
@supports (break-inside: avoid-column) {
display:block;
}
.menu--subnav{
padding:0;
}
display:block;
a{
font-family:$menu-horizontal-sub-font-bold;
font-weight:400;
......@@ -425,8 +402,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
border-bottom:1px solid #e6e6e6;
}
@include medium{
padding:gesso-spacing(xs);
padding:gesso-spacing(xs) gesso-spacing(xs) gesso-spacing(xs) 0;
}
}
.no-scroll & {
......@@ -450,13 +426,11 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
a {
font-family:$menu-horizontal-sub-font;
font-weight:200;
padding-left: gesso-spacing(lg);
}
.menu--item {
a {
font-family:$menu-horizontal-sub-font;
font-weight:200;
padding-left: gesso-spacing(xl);
}
}
}
......@@ -464,24 +438,23 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
@include medium {
flex:0 1;
height:auto;
max-width: 50%;
padding-left: gesso-spacing(xs);
width:100%;
.menu--item{
font-family:$menu-horizontal-sub-font;
font-weight:200;
margin-top:inherit;
max-width:inherit;
padding-left: gesso-spacing(sm);
padding-left: 0.5rem;
a{
font-family:$menu-horizontal-sub-font;
padding:gesso-spacing(xxs);
}
.menu--item{
margin-top:inherit;
padding-left: gesso-spacing(sm);
padding-left: 0.5rem;
a{
font-family:$menu-horizontal-sub-font;
font-weight:200;
......@@ -489,7 +462,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.menu--item{
margin-top:inherit;
padding-left: gesso-spacing(sm);
a{
font-family:$menu-horizontal-sub-font;
font-weight:200;
......@@ -497,15 +470,14 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
}
}
}
@include large {
max-width: 33%;
padding-left: gesso-spacing(sm);
}
&__parent{
padding:gesso-spacing(xxs) 0 gesso-spacing(xxs) gesso-spacing(xs);
padding:gesso-spacing(xxs) 0 gesso-spacing(xxs) 0;
top:0;
width:100%;
.menu--link-parent {
display:inline-block;
position:relative;
......@@ -519,17 +491,13 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
right:0;
text-align: center;
top:gesso-spacing(xs);
}
}
@include medium {
flex: 1 0 100%;
max-width:inherit;
padding:gesso-spacing(xs) 0 gesso-spacing(xs) gesso-spacing(sm);
position: absolute;
column-span: all;
max-width:inherit !important;
padding:gesso-spacing(xs) 0 gesso-spacing(xs) 0;
.menu--link-parent {
font-size:rem(gesso-font-size(-1));
margin:0 0 gesso-spacing(xxs) 0;
&::after {
......@@ -538,16 +506,19 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
}
top:0;
width:100%;
}
}
}
}
.sub-1{
@include medium{
/* for Chrome and Edge Brave Opera */
break-inside: avoid;
/* for Firefox */
display: inline-grid;
page-break-inside: avoid;
}
}
}
}
}
source/_patterns/04-components/menu/menu.twig
View file @ 5f928d7a
......@@ -61,31 +61,13 @@
{# Check if we are in parent menu_level #}
{% if menu_level == 0 %}
{# Look to see if the menu_items_count is set so and use for menu dropdown class #}
{% if item.menu_items_count %}
{% if item.menu_items_count >= 30 %}
{% set item_classes = item_classes|merge(['has-submenu--large']) %}
{% elseif item.menu_items_count >= 10 %}
{% set item_classes = item_classes|merge(['has-submenu--medium']) %}
{% elseif item.menu_items_count > 0 %}
{% set item_classes = item_classes|merge(['has-submenu--small']) %}
{% endif %}
{# Add the link class #}
{% set link_classes = link_classes|merge(['menu--link__sub']) %}
{% endif %}
{% endif %}
{% if menu_level == 1 %}
{% set item_classes = item_classes|merge(['sub-1']) %}
{% endif %}
{% endif %}
{# Set the additional_item_attributes #}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment