You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.6 KiB
SCSS
76 lines
1.6 KiB
SCSS
@use '../utilities/main_utilities' as *;
|
|
|
|
/* Lists */
|
|
ol li,
|
|
ul li {
|
|
padding: 0.2rem 0;
|
|
}
|
|
|
|
.no-bullet-point{
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
/* Inline lists */
|
|
.inline-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-left: -0.5rem; /* To offset the start of li margin. Little jank */
|
|
}
|
|
|
|
.inline-list li {
|
|
display: inline-block;
|
|
margin: 0 0.5rem;
|
|
position: relative;
|
|
text-align: left;
|
|
}
|
|
.inline-list>li{ /* Only affects first level li */
|
|
padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
|
|
}
|
|
|
|
/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
|
|
/* Nav/inline-list Dropdown */
|
|
.inline-list li:hover ul {
|
|
display: block;
|
|
}
|
|
|
|
/* ?? maybe change */
|
|
.inline-list li ul {
|
|
background: $color-bg;
|
|
border: 1px solid $color-bg-secondary;
|
|
border-top: 10px solid transparent;
|
|
border-radius: $border-radius;
|
|
display: none;
|
|
height: auto;
|
|
padding: .5rem 1rem;
|
|
position: absolute;
|
|
top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */
|
|
white-space: nowrap;
|
|
width: auto;
|
|
z-index: 1;
|
|
|
|
/* Centre */
|
|
/* left: 50%;
|
|
transform: translate(-50%, 0); */
|
|
/* Left */
|
|
left: 0;
|
|
/* Right */
|
|
/* transform: translate(-50%, 0); */
|
|
}
|
|
|
|
.inline-list li ul::before {
|
|
/* fill gap above to make mousing over them easier */
|
|
/* background-color: green; */
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: -0.5rem;
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.inline-list li ul li,
|
|
.inline-list li ul li a {
|
|
display: block;
|
|
}
|