packages/frontend/app/styles/components/ilios-navigation.scss
@use "../ilios-common/colors" as c;
@use "../ilios-common/constants";
@use "../ilios-common/mixins" as m;
/* stylelint-disable property-disallowed-list */
@use "sass:color";
.ilios-navigation {
background-color: c.$davysGrey;
display: grid;
grid-auto-flow: column;
grid-template-columns: 2rem auto;
ul {
align-items: center;
display: flex;
justify-content: space-evenly;
list-style-type: none;
margin: 0;
padding: 0;
li {
font-size: 4vmin;
height: 100%;
text-align: center;
width: 100%;
margin: 0;
line-height: 1.1;
@include m.for-laptop-and-up {
@include m.font-size("small");
height: auto;
text-align: left;
&:first-of-type {
padding-top: 2px;
border-top: 2px solid c.$davysGrey;
}
}
}
.text {
display: none;
}
.if-active {
display: none;
}
&.expand-navigation li {
display: flex;
flex-direction: column;
justify-content: center;
.expander {
color: c.$slightWhite;
&:hover {
background-color: c.$blueMunsell;
}
}
}
}
&.expanded {
@include m.for-smaller-than-laptop {
ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
li a {
padding: 0.5rem;
}
}
.text {
clear: left;
display: block;
}
}
}
.link-button {
height: inherit;
}
@include m.for-smaller-than-laptop {
a.active {
background-color: c.$blueMunsell;
}
}
@include m.for-laptop-and-up {
display: block;
border-bottom: calc(20px * constants.$golden-ratio-large) solid c.$orange;
ul {
display: inline;
.text {
clear: none;
display: inline;
}
}
.expand-navigation {
display: none;
}
}
a {
color: hsl(0, 0%, 92%);
display: block;
height: 100%;
text-decoration: none;
width: 100%;
font-weight: 400;
padding: 0.25rem 0.5rem;
@include m.for-laptop-and-up {
display: grid;
grid-template-columns: 1.3em 1fr 1.5em;
justify-content: start;
align-items: center;
padding: 0.25rem;
.text {
margin-left: 0.25rem;
color: hsl(0, 0%, 92%);
}
.if-active {
color: c.$blueMunsell;
justify-self: end;
font-weight: bold;
}
&.active {
.if-active {
display: inline;
}
color: c.$blueMunsell;
.text {
color: hsl(0, 0%, 92%);
}
}
}
&:hover {
background-color: c.$blueMunsell;
color: hsl(0, 0%, 92%);
.if-active {
color: hsl(0, 0%, 92%);
}
}
}
}