Skip to content
Snippets Groups Projects
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
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
+ 5496
− 7606
View file @ a3bdf890
This diff is collapsed.
css/styles.min.css
+ 1
− 1
View file @ a3bdf890
Source diff could not be displayed: it is too large. Options to address this: view the blob.
source/_patterns/03-layouts/site-container/site-container.twig
+ 1
− 1
View file @ a3bdf890
......@@ -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--horizontal/_menu--horizontal.scss
+ 100
− 29
View file @ a3bdf890
......@@ -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%;
}
}
}
}
}
}
}
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