mirror of
https://github.com/jambonz/next-static-site.git
synced 2025-12-19 04:47:44 +00:00
db94b17829
* Adding latest news and banners * Adding first draft of cypress specs and github actions workflow * Adding sticky position for top banner * Tweak styles for new latest news section * Tweak styles for text__layout innerHTML * Fix Cypress homepage test spec * Fix mobile navi z-index with sticky top banner * Fix sticky banner z-index bug with mobile navi * Refactor markdown tools to support pages beyond developer docs * Adjust TADHACK text max-widths for small mobile * initial changes for open source copy * more copy * more copy * updated open source structure * minor * typo * more copy * Adjust styles for Open Source markdown small text * Update readme and remove floats from docs webhooks markdown * Add readme notes on Cypress and flesh out navi spec tests * Fix main navi highlight when on sub-sections of markdown pages Co-authored-by: Dave Horton <daveh@beachdognet.com>
148 lines
2.2 KiB
SCSS
148 lines
2.2 KiB
SCSS
.navi {
|
|
padding: 16px 0;
|
|
position: relative;
|
|
z-index: $navi-index;
|
|
|
|
&.mobile.active {
|
|
z-index: $navi-index + 2;
|
|
}
|
|
|
|
// Menu / X icons for mobile nav interactions
|
|
.icon {
|
|
width: $icon-size-3;
|
|
height: $icon-size-3;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
&__wrap,
|
|
&__links {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&__links {
|
|
transform: translateY(-4px);
|
|
font-family: $font-medium;
|
|
}
|
|
|
|
&__link {
|
|
text-decoration: none;
|
|
color: $charcoal;
|
|
margin-left: 32px;
|
|
|
|
&.active {
|
|
color: $jambonz;
|
|
}
|
|
}
|
|
|
|
&__icon,
|
|
&__login {
|
|
margin-left: auto;
|
|
}
|
|
|
|
&__links,
|
|
&__login {
|
|
.mobile & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
display: none;
|
|
line-height: 0;
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.mobile & {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&__mobile {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
transition: opacity $base-dur $base-ease,
|
|
z-index $base-dur $base-ease;
|
|
|
|
&.active {
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
z-index: $navi-index;
|
|
}
|
|
|
|
&__head {
|
|
padding: 16px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&__icon {
|
|
line-height: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__links,
|
|
&__footer {
|
|
text-align: center;
|
|
padding-top: 32px;
|
|
|
|
.navi__link {
|
|
color: $white;
|
|
font-size: $h6-size;
|
|
font-family: $font-medium;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&__links {
|
|
.navi__link {
|
|
padding: 4px 0;
|
|
margin: 12px 0;
|
|
display: inline-block;
|
|
|
|
&.active {
|
|
border-bottom: 2px solid $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
padding-top: 48px;
|
|
|
|
li {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.navi__link {
|
|
font-size: $m-size;
|
|
font-family: $font-regular;
|
|
}
|
|
}
|
|
|
|
&__support {
|
|
text-align: center;
|
|
padding: 32px 0;
|
|
|
|
// Force mobile padding size on button
|
|
.btn {
|
|
padding: 18px 46px;
|
|
}
|
|
}
|
|
}
|
|
} |