Skip to content
GitLab
Commit 743303b5 authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

changes to css for the menu breakout challenge

parent fa5c3cdd
Expand all Hide whitespace changes
Inline Side-by-side
css/styles.css
View file @ 743303b5
This diff is collapsed.
css/styles.min.css
View file @ 743303b5
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 @ 743303b5
......@@ -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
View file @ 743303b5
......@@ -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 @ 743303b5
......@@ -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
View file @ 743303b5
......@@ -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