Commit 8e548b5d authored by wodby's avatar wodby
Browse files

URNAV: css cherry pick of the previously branched gesso

parent 1f93ce43
......@@ -4,7 +4,8 @@ $menu-horizontal-sub-font: gesso-font-family(system);
$menu-horizontal-sub-font-bold: gesso-font-family(systembold);
$menu-horizontal-bar-font-size: rem(gesso-font-size(-2));
$menu-horizontal-sub-font-size: rem(gesso-font-size(-2));
$menu-horizontal-drop-bg: #f7f7f7;
$menu-horizontal-drop-bg: gesso-grayscale(gray-2);
$menu-horizontal-drop-bg-border: $uw-white;
// Colors
$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
@each $faculty in $faculties {
......@@ -55,7 +56,14 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.menu--item{
&__parent{
a{
border-bottom: 1px solid gesso-brand(org-default,uw-black,lvl4);
background-color: gesso-grayscale(gray-3);
color: gesso-brand(org-default,uw-black,lvl4);
}
a:hover{
background-color: gesso-brand(org-default,uw-white,lvl1);
@include medium {
border:1px solid $uw-gold;
}
}
}
}
......@@ -64,9 +72,14 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
li {
> a{
border:1px solid transparent;
color: gesso-brand(org-default,uw-black,lvl4);
&:focus{
background-color: gesso-grayscale(gray-3);
@include medium {
border:1px solid $uw-gold;
}
color: gesso-brand(org-default,uw-black,lvl4);
}
&.active{
......@@ -75,38 +88,44 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
&:hover{
background-color: gesso-brand(org-default,uw-white,lvl1);
@include medium {
border:1px solid $uw-gold;
}
color: gesso-brand(org-default,uw-black,lvl4);
}
}
.menu--subnav{
a{
background-color:transparent;
border-bottom:1px solid transparent;
border:1px solid transparent;
text-decoration:none;
&:focus {
background-color: inherit;
border-bottom: 1px solid gesso-brand(org-default,uw-black,lvl4);
@include medium {
border:1px solid $uw-gold;
}
color: gesso-brand(org-default,uw-black,lvl4);
}
&.active{
background-color:inherit;
border-bottom:1px solid gesso-brand(org-default,uw-black,lvl4);
background-color: gesso-grayscale(gray-3);
color: gesso-brand(org-default,uw-black,lvl4);
&::after{
display:none;
}
&:hover{
background-color:inherit;
border-bottom:1px solid gesso-grayscale(gray-3);
background-color:$menu-horizontal-drop-bg-border;
color: gesso-brand(org-default,uw-black,lvl4);
}
}
&:hover{
background-color:inherit;
border-bottom:1px solid gesso-grayscale(gray-3);
background-color:$menu-horizontal-drop-bg-border;
color: gesso-brand(org-default,uw-black,lvl4);
}
&:active{
@include medium {
border:1px solid $uw-gold;
}
}
}
}
}
......@@ -118,39 +137,29 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.#{$faculty} {
.uw-horizontal-nav {
.uw-site-home__link{
background-color:gesso-brand($faculty, lvl4);
border: 1.5px solid gesso-brand($faculty, lvl4);
svg{
.bg-circle{
fill:gesso-brand($faculty, primary);
stroke:gesso-brand($faculty, primary);
}
.house{
fill:gesso-brand(org-default,uw-white,lvl1);
}
fill:gesso-brand(org-default,uw-white,lvl1);
}
&:focus{
background-color: gesso-brand(org-default,uw-white,lvl1);
svg{
.bg-circle{
fill:gesso-brand(org-default,uw-white,lvl1);
stroke:gesso-brand($faculty, primary);
}
.house{
fill:gesso-brand($faculty, primary);
}
fill:gesso-brand($faculty, lvl4);
}
}
&:hover{
background-color:gesso-brand(org-default,uw-white,lvl1);
border:1px solid gesso-brand($faculty, lvl4);
svg{
.bg-circle{
fill:gesso-brand(org-default,uw-white,lvl1);
stroke:gesso-brand($faculty, primary);
}
.house{
fill:gesso-brand($faculty, primary);
}
fill:gesso-brand($faculty, lvl4);
}
}
}
.menu--horizontal {
> .is-active-trail {
background-color: gesso-grayscale(gray-3);
......@@ -160,8 +169,14 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.menu--item{
&__parent{
a{
border-bottom: 1px solid gesso-brand($faculty, primary);
color: gesso-brand($faculty, primary);
background-color: gesso-grayscale(gray-3);
color: gesso-brand(org-default,uw-black,lvl4);
}
a:hover{
background-color: gesso-brand(org-default,uw-white,lvl1);
@include medium {
border:1px solid transparent;
}
}
}
}
......@@ -170,6 +185,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
li {
> a{
border:1px solid transparent;
color: gesso-brand(org-default,uw-black,lvl4);
&:focus{
background-color: gesso-grayscale(gray-3);
......@@ -183,36 +199,44 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
background-color: gesso-brand(org-default,uw-white,lvl1);
color: gesso-brand(org-default,uw-black,lvl4);
}
&:active{
@include medium {
border:1px solid gesso-brand($faculty, lvl4);
}
}
}
.menu--subnav{
a{
background-color:transparent;
border-bottom:1px solid transparent;
border:1px solid transparent;
text-decoration:none;
&:focus {
background-color: inherit;
border-bottom:1px solid gesso-brand($faculty, primary);
@include medium {
border:1px solid gesso-brand($faculty, lvl4);
}
color: gesso-brand(org-default,uw-black,lvl4);
}
&.active{
background-color:inherit;
border-bottom:1px solid gesso-brand($faculty, primary);
color: gesso-brand($faculty, primary);
background-color: gesso-grayscale(gray-3);
color: gesso-brand(org-default,uw-black,lvl4);
&::after{
display:none;
}
&:hover{
background-color:inherit;
border-bottom:1px solid gesso-grayscale(gray-3);
background-color:$menu-horizontal-drop-bg-border;
color: gesso-brand(org-default,uw-black,lvl4);
}
}
&:hover{
background-color:inherit;
border-bottom:1px solid gesso-brand($faculty, primary);
color:gesso-brand($faculty, primary);
background-color:$menu-horizontal-drop-bg-border;
color: gesso-brand(org-default,uw-black,lvl4);
}
&:active{
@include medium {
border:1px solid gesso-brand($faculty, lvl4);
}
}
}
}
}
......@@ -232,13 +256,14 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
position:relative;
@include medium{
grid-template-columns: 3rem auto;
padding:0 gesso-spacing(xs);
padding: 0 gesso-spacing(sm);
}
@include xl{
padding:0;
@include xl {
padding: 0;
}
}
&--home{
display:none;
@include medium{
display:block;
......@@ -302,28 +327,28 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
a{
display:inline-block;
line-height:1.25rem;
padding:gesso-spacing(xs);
padding: 6px gesso-spacing(xs);
text-decoration:none;
width: 100%;
}
&.has-submenu {
> a{
padding-right:gesso-spacing(md);
position:relative;
padding-right:24px;
position:relative;
&::after {
content:'\e906';
display:block;
font-family: gesso-font-family(iconfont);
position:absolute;
right:gesso-spacing(xs);
text-align: center;
top:gesso-spacing(xs);
transform: scale(0.75, 0.75);
@include medium{
transform: scale(0.75, 0.75) rotate(90deg);
}
&::after {
content:'\e906';
display:block;
font-family: gesso-font-family(iconfont);
position:absolute;
right:gesso-spacing(xs);
text-align: center;
top:6px;
transform: scale(0.75, 0.75);
@include medium{
transform: scale(0.75, 0.75) rotate(90deg);
}
}
}
......@@ -360,7 +385,7 @@ $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%;
}
}
.submenu-active {
&[aria-expanded="true"]{
> a{
......@@ -379,6 +404,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.menu--subnav{
align-items:inherit;
background:inherit;
border:inherit;
box-shadow:none;
column-count:inherit;
display:inherit;
......@@ -399,17 +425,19 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
@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);
border:3px solid $menu-horizontal-drop-bg-border;
//box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10), 0 6px 6px rgba(0, 0, 0, 0.13);
box-shadow:0 4px 9px 7px rgba(0,0,0,0.15);
break-inside:avoid;
column-count: 2;
column-fill: balance;
column-gap: $grid-gap;
column-gap: 0.5rem;
height: auto;
left: 3rem;
overflow-y:inherit;
padding: 0 gesso-spacing(sm) gesso-spacing(md) gesso-spacing(sm);
top: 100%;
width:calc(100% - 6rem);
padding: 0;
top: auto;
width:calc(100% - 5.5rem);
// Puts the dropdown at z-index 7
z-index: gesso-z-index(dropdown);
}
......@@ -429,30 +457,25 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
a{
font-family:$menu-horizontal-sub-font-bold;
font-weight:400;
padding:gesso-spacing(xs);
padding-right: 24px;
.no-scroll &{
border-bottom:1px solid #e6e6e6;
}
@include medium{
padding:gesso-spacing(xs) gesso-spacing(xs) gesso-spacing(xs) 0;
padding-left: gesso-spacing(sm);
}
}
.no-scroll & {
&__parent{
border-bottom:1px solid #e6e6e6;
padding:0;
a{
border-bottom: 1px solid transparent;
}
}
.menu--item {
a {
font-family:$menu-horizontal-sub-font;
font-weight:200;
padding-left: gesso-spacing(sm);
}
.menu--item {
......@@ -471,72 +494,55 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
@include medium {
height:auto;
width:100%;
a{
padding-left:gesso-spacing(md);
}
.menu--item{
font-family:$menu-horizontal-sub-font;
font-weight:200;
margin-top:inherit;
max-width:inherit;
padding-left: 0.5rem;
a{
font-family:$menu-horizontal-sub-font;
padding:gesso-spacing(xxs);
padding-left: gesso-spacing(lg);
}
.menu--item{
margin-top:inherit;
padding-left: 0.5rem;
a{
font-family:$menu-horizontal-sub-font;
font-weight:200;
padding-left: gesso-spacing(xl);
}
.menu--item{
margin-top:inherit;
a{
font-family:$menu-horizontal-sub-font;
font-weight:200;
padding-left: gesso-spacing(xl);
}
}
}
}
}
@include large {
}
&__parent{
padding:gesso-spacing(xxs) 0 gesso-spacing(xxs) 0;
top:0;
width:100%;
.menu--link-parent {
display:inline-block;
@include medium {
min-width:calc(25% - 5px);
padding-left:1rem;
}
position:relative;
width:auto;
&::after {
content:'\e3b5';
display:block;
font-family: gesso-font-family(iconfont);
font-size:rem(gesso-font-size(0));
position:absolute;
right:0;
text-align: center;
top:gesso-spacing(xs);
}
}
@include medium {
column-span: all;
max-width:inherit !important;
padding:gesso-spacing(xs) 0 gesso-spacing(xs) 0;
.menu--link-parent {
font-size:rem(gesso-font-size(-1));
margin:0 0 gesso-spacing(xxs) 0;
&::after {
right:-1rem;
}
}
}
}
......
......@@ -20,8 +20,10 @@ $menu-horizontal-sub-font-size: rem(gesso-font-size(-2));
padding:0;
position:relative;
@include medium{
grid-template-columns: 4rem auto;
}
@include large{
grid-template-columns: 3rem auto;
padding:0 gesso-spacing(xs);
}
}
......
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