Commit a3bdf890 authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

initial css for showing the menu items in submenu

parent 74142a50
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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>
......@@ -337,28 +337,23 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.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;
min-height: 12rem;
}
}
&.has-submenu--medium .menu--subnav{
//background: #00f !important;
@include medium {
min-height: 25rem;
min-height: 24rem;
}
}
&.has-submenu--large .menu--subnav{
//background: #800080 !important;
min-height:50rem;
@include large {
min-height: 35rem;
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);
......@@ -372,14 +367,17 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
@include medium {
@include uw-contained-width;
align-items: flex-start;
//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%;
//display: flex;
//flex-flow: wrap;
//flex-direction: column;
//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;
......@@ -412,10 +410,12 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
.menu--item{
display:block;
position:relative;
.menu--subnav{
padding:0;
}
display:block;
a{
font-family:$menu-horizontal-sub-font-bold;
font-weight:400;
......@@ -464,10 +464,90 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
@include medium {
flex:0 1;
//flex:0 1;
height:auto;
max-width: 50%;
//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;
}
}
.menu--item{
font-family:$menu-horizontal-sub-font;
font-weight:200;
......@@ -479,7 +559,6 @@ $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{
......@@ -487,7 +566,6 @@ $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{
......@@ -500,12 +578,11 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
@include large {
max-width: 33%;
//max-width: 33%;
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;
......@@ -519,12 +596,10 @@ $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%;
//flex: 1 0 100%;
max-width:inherit;
padding:gesso-spacing(xs) 0 gesso-spacing(xs) gesso-spacing(sm);
position: absolute;
......@@ -540,14 +615,10 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
top:0;
width:100%;
}
}
}
}
}
}
}
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