Skip to content
Snippets Groups Projects
Commit baeb5f7a authored by Martin Leblanc's avatar Martin Leblanc
Browse files

changes to css for the menu breakout challenge

parent 054f3e34
No related branches found
No related tags found
1 merge request!89Feature istwcms4624 m26lebla menulinks overflow
Expand all Hide whitespace changes
Inline Side-by-side
css/styles.css
+ 7455
− 5392
View file @ baeb5f7a
This diff is collapsed.
css/styles.min.css
+ 1
− 1
View file @ baeb5f7a
Source diff could not be displayed: it is too large. Options to address this: view the blob.
source/_patterns/00-config/_design-tokens.artifact.scss
+ 1
− 1
View file @ baeb5f7a
......@@ -511,4 +511,4 @@ $gesso: (
xxl: 96px,
),
gutter-width: 40px,
);
\ No newline at end of file
);
source/_patterns/04-components/menu/menu--header/_menu--header.scss
+ 3
− 3
View file @ baeb5f7a
......@@ -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
+ 42
− 146
View file @ baeb5f7a
......@@ -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,69 +327,19 @@ $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{
@include medium {
min-height: 12rem;
}
}
&.has-submenu--medium .menu--subnav{
@include medium {
min-height: 24rem;
}
}
&.has-submenu--large .menu--subnav{
min-height:50rem;
@include large {
min-height: 36rem;
}
}
.menu--subnav{
//background: $menu-horizontal-drop-bg;
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: row;
flex-wrap: wrap;
//display: grid;
//gap:0.5rem;
//grid-template-columns: repeat(4, minmax(0,1fr));
height:auto;
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;
......@@ -408,14 +358,33 @@ $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-gap: 20px;
height: auto;
left: 3rem;
overflow-y:inherit;
padding:1.5rem 0.75rem;
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{
display:block;
position:relative;
.menu--subnav{
padding:0;
}
a{
font-family:$menu-horizontal-sub-font-bold;
font-weight:400;
......@@ -464,90 +433,9 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
@include medium {
flex:1 0 50%;
height:auto;
max-width: 50%;
padding-left: gesso-spacing(xs);
&:nth-of-type(1){
background: rgba(16, 207, 246, 1);
&::after{
bottom:0;
content:'1';
display: block;
position:absolute;
right:0;
}
}
&:nth-of-type(2){
background: rgba(232, 25, 95, 1);
&::after{
bottom:0;
content:'2';
display: block;
position:absolute;
right:0;
}
}
&:nth-of-type(3){
background: rgba(209, 117, 232, 1);
&::after{
bottom:0;
content:'3';
display: block;
position:absolute;
right:0;
}
}
&:nth-of-type(4){
background: rgba(144, 255, 136, 1);
&::after{
bottom:0;
content:'4';
display: block;
position:absolute;
right:0;
}
}
&:nth-of-type(5){
background: rgba(255, 201, 136, 1);
&::after{
bottom:0;
content:'5';
display: block;
position:absolute;
right:0;
}
}
&:nth-of-type(6){
background: rgb(115, 118, 27);
&::after{
bottom:0;
content:'6';
display: block;
position:absolute;
right:0;
}
}
&:nth-of-type(7){
background: rgb(94, 232, 129);
&::after{
bottom:0;
content:'7';
display: block;
position:absolute;
right:0;
}
}
&:nth-of-type(8){
background: rgb(82, 74, 72);
&::after{
bottom:0;
content:'8';
display: block;
position:absolute;
right:0;
}
}
width:100%;
.menu--item{
font-family:$menu-horizontal-sub-font;
font-weight:200;
......@@ -559,6 +447,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
padding:gesso-spacing(xxs);
}
.menu--item{
margin-top:inherit;
padding-left: gesso-spacing(sm);
a{
......@@ -566,6 +455,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
font-weight:200;
}
.menu--item{
margin-top:inherit;
padding-left: gesso-spacing(sm);
a{
......@@ -578,13 +468,11 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
@include large {
flex:1 0 24%;
height:auto;
max-width: 24%;
padding-left: gesso-spacing(sm);
}
&__parent{
padding:gesso-spacing(xxs) 0 gesso-spacing(xxs) gesso-spacing(xs);
.menu--link-parent {
display:inline-block;
position:relative;
......@@ -598,15 +486,16 @@ $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;
column-span: all;
max-width:inherit !important;
padding:gesso-spacing(xs) 0 gesso-spacing(xs) gesso-spacing(sm);
position: absolute;
width:100%;
.menu--link-parent {
font-size:rem(gesso-font-size(-1));
margin:0 0 gesso-spacing(xxs) 0;
&::after {
......@@ -617,10 +506,17 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
top:0;
width:100%;
}
}
}
}
.sub-1{
break-inside:avoid;
}
}
}
}
source/_patterns/04-components/menu/menu.twig
+ 9
− 3
View file @ baeb5f7a
......@@ -64,11 +64,15 @@
{# 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 %}
{% if item.menu_items_count >= 40 %}
{% set item_classes = item_classes|merge(['has-submenu--xlarge']) %}
{% elseif item.menu_items_count >= 25 %}
{% set item_classes = item_classes|merge(['has-submenu--large']) %}
{% elseif item.menu_items_count >= 10 %}
{% elseif item.menu_items_count >= 9 %}
{% set item_classes = item_classes|merge(['has-submenu--medium']) %}
......@@ -85,7 +89,9 @@
{% endif %}
{% if menu_level == 1 %}
{% set item_classes = item_classes|merge(['sub-1']) %}
{% endif %}
{% endif %}
{# Set the additional_item_attributes #}
......
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