Commit baeb5f7a authored by Martin Leblanc's avatar Martin Leblanc
Browse files

changes to css for the menu breakout challenge

parent 054f3e34
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -511,4 +511,4 @@ $gesso: (
xxl: 96px,
),
gutter-width: 40px,
);
\ No newline at end of file
);
......@@ -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;
......
......@@ -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;
}
}
}
}
......@@ -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 #}
......
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