mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 03:45:49 +00:00
661 lines
14 KiB
SCSS
661 lines
14 KiB
SCSS
/* Top navigation ----------------------------------------------------------- */
|
|
$nav-height: 80px;
|
|
$banner-height: 0; // Currently no pencil banner.
|
|
|
|
[data-component-name="layouts/RootLayout"] {
|
|
padding-top: $nav-height + $banner-height;
|
|
}
|
|
|
|
.top-nav {
|
|
background-color: $gray-900;
|
|
height: $nav-height;
|
|
padding: 0;
|
|
// Logo
|
|
.navbar-brand {
|
|
text-decoration: none;
|
|
white-space: pre;
|
|
-webkit-transition: opacity 0.2s ease, color 0.2s ease;
|
|
transition: opacity 0.2s ease, color 0.2s ease;
|
|
padding-left: 2rem;
|
|
|
|
.logo {
|
|
margin-left: 0;
|
|
content: url(../img/XRPLedger_DevPortal-white.svg);
|
|
width: 162px;
|
|
height: 40px;
|
|
display: block;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
@include media-breakpoint-down(md) {
|
|
padding-left: 2rem;
|
|
|
|
img {
|
|
width: 120px;
|
|
}
|
|
}
|
|
}
|
|
.nav-item {
|
|
font-weight: 600;
|
|
}
|
|
|
|
// Main Links ----------------------------------------------------------------
|
|
#topnav-pages {
|
|
@include media-breakpoint-up(lg) {
|
|
flex-grow: 1;
|
|
}
|
|
.nav-link {
|
|
color: $gray-100;
|
|
font-size: 1rem;
|
|
line-height: 1.25rem;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
// padding: .5rem 2rem;//TODO:checkme
|
|
}
|
|
}
|
|
|
|
// Dropdowns -----------------------------------------------------------------
|
|
// Shared styles
|
|
.dropdown-toggle {
|
|
position: relative;
|
|
}
|
|
.dropdown-menu {
|
|
border-width: 0;
|
|
|
|
h5 {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: $gray-400;
|
|
margin-bottom: 0;
|
|
}
|
|
.dropdown-item {
|
|
line-height: 1rem;
|
|
padding: 0.75rem 0;
|
|
white-space: normal;
|
|
|
|
&.dropdown-hero {
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 1rem 2rem;
|
|
|
|
> img {
|
|
width: 68px;
|
|
height: 68px;
|
|
background-color: $gray-800;
|
|
border-radius: $border-radius-sm;
|
|
flex-grow: 0;
|
|
padding: 0.75rem;
|
|
margin-right: 2rem;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
p {
|
|
font-size: 14px;
|
|
color: $gray-300;
|
|
margin: 0;
|
|
white-space: normal;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
&:hover {
|
|
h4 {
|
|
color: $blue-purple-400;
|
|
}
|
|
p {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
&:first-child {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
// > .dropdown-item { // Ungrouped, i.e. Community dropdown
|
|
// grid-column: 1/4;
|
|
// }
|
|
|
|
.col-for-get_started {
|
|
background-color: $gray-800;
|
|
}
|
|
|
|
a:hover {
|
|
color: $blue-purple-400;
|
|
background-color: inherit;
|
|
}
|
|
|
|
h5:hover {
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
|
|
#topnav-search {
|
|
flex-grow: 1;
|
|
.input-group {
|
|
flex-grow: 1;
|
|
flex-wrap: nowrap; // Fix search bar splitting into two lines on iPhone 5
|
|
}
|
|
|
|
@include media-breakpoint-down(md) {
|
|
.form-inline {
|
|
padding: $nav-link-padding-y $nav-link-padding-x;
|
|
}
|
|
}
|
|
|
|
.input-group-text {
|
|
height: 40px;
|
|
}
|
|
.ds-input {
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
#topnav-language {
|
|
.dropdown-item {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
// Desktop only styles -------------------------------------------------------
|
|
@include media-breakpoint-up(lg) {
|
|
padding: 0 2rem;
|
|
|
|
.navbar-brand {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
&::after {
|
|
display: none;
|
|
}
|
|
> span {
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
}
|
|
|
|
.dropdown .dropdown-toggle:hover > span:not(.chevron) {
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid $purple;
|
|
margin-bottom: -8px;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
border-radius: 0 0 $border-radius-lg $border-radius-lg;
|
|
padding: 2.5rem;
|
|
|
|
.dropdown-item {
|
|
&.dropdown-hero {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&.show {
|
|
display: grid;
|
|
gap: 40px;
|
|
|
|
&#topnav_dd_about {
|
|
grid-template-columns: 180px 180px 180px;
|
|
}
|
|
|
|
&#topnav_dd_docs {
|
|
grid-template-columns: 180px 180px 260px;
|
|
left: -200px;
|
|
}
|
|
|
|
&#topnav_dd_community {
|
|
grid-template-columns: 200px;
|
|
}
|
|
|
|
&#topnav_dd_resources {
|
|
grid-template-columns: 195px 180px 180px;
|
|
left: -200px;
|
|
}
|
|
|
|
.dropdown-hero {
|
|
grid-row: 1;
|
|
grid-column: 1 / 4;
|
|
}
|
|
#dropdown-hero-for-docs {
|
|
grid-column: 1 / 3;
|
|
}
|
|
|
|
// "About" dropdown placement
|
|
.col-for-xrp_ledger {
|
|
grid-row: 1 / 3;
|
|
grid-column: 1;
|
|
}
|
|
.col-for-xrp {
|
|
grid-column: 2;
|
|
}
|
|
.col-for-sustainability,
|
|
.col-for-持続可能性 {
|
|
grid-column: 2;
|
|
}
|
|
.col-for-about,
|
|
.col-for-概要 {
|
|
grid-row: 1 / 3;
|
|
grid-column: 3;
|
|
}
|
|
|
|
// "Docs" dropdown placement (desktop)
|
|
.col-for-article_types {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
.col-for-use_cases {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
}
|
|
.col-for-get_started {
|
|
grid-column: 3;
|
|
grid-row: 1 / 3;
|
|
margin: -40px -40px -40px 0;
|
|
padding: 40px;
|
|
}
|
|
|
|
// "Resources" dropdown placement
|
|
.col-for-development {
|
|
grid-column: 1;
|
|
}
|
|
.col-for-current-status,
|
|
.col-for-現在のステータス {
|
|
grid-column: 2;
|
|
}
|
|
.col-for-join-in,
|
|
.col-for-参加する {
|
|
grid-column: 3;
|
|
}
|
|
}
|
|
|
|
&.smaller-dropdown {
|
|
min-width: 180px;
|
|
padding: 1.25rem;
|
|
}
|
|
}
|
|
|
|
#topnav-pages {
|
|
flex-grow: 0;
|
|
@media (min-width: 992px) and (max-width: 1133px) {
|
|
// Part of the fix for top nav overflow in this range
|
|
.nav-link {
|
|
padding: $nav-link-padding-y 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
#topnav-language {
|
|
flex-grow: 0;
|
|
|
|
hr {
|
|
display: none;
|
|
}
|
|
|
|
#language_selector_header_btn {
|
|
padding-right: 0;
|
|
@media (min-width: 992px) and (max-width: 1133px) {
|
|
// Part of the fix for top nav overflow in this range
|
|
padding-left: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(xl) {
|
|
#topnav-search {
|
|
margin-left: 3.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
#topnav-language {
|
|
margin-right: 0.5rem;
|
|
}
|
|
#topnav-button {
|
|
margin-left: 0.2rem;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
} // End desktop styles
|
|
|
|
// Mobile only styles --------------------------------------------------------
|
|
@include media-breakpoint-down(md) {
|
|
.navbar-toggler {
|
|
border: 0;
|
|
padding: 30px 2rem;
|
|
font-size: 1rem;
|
|
display: inline-block;
|
|
|
|
.navbar-toggler-icon {
|
|
background: none;
|
|
height: 20px;
|
|
width: 20px;
|
|
position: relative;
|
|
|
|
&::after,
|
|
&::before,
|
|
div {
|
|
position: absolute;
|
|
content: " ";
|
|
background-color: $gray-100;
|
|
display: block;
|
|
width: 100%;
|
|
height: 3px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
&::before {
|
|
top: 0;
|
|
}
|
|
&::after {
|
|
bottom: 0;
|
|
}
|
|
div {
|
|
top: calc(50% - 1.5px);
|
|
}
|
|
}
|
|
|
|
&:not(.collapsed) {
|
|
.navbar-toggler-icon {
|
|
&::before {
|
|
transform: translateY(8px) rotate(135deg);
|
|
}
|
|
&::after {
|
|
transform: translateY(-9px) rotate(-135deg);
|
|
}
|
|
div {
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-nav {
|
|
align-items: unset !important; // Undo "browser-entry.css" rule
|
|
|
|
#topnav-button {
|
|
background-color: $gray-900;
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
|
|
#topnav-search {
|
|
[data-component-name="Search/SearchTrigger"] {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.navbar-nav .nav-link,
|
|
.navbar-collapse > .nav-item {
|
|
line-height: 150%;
|
|
background: $gray-900;
|
|
|
|
label {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.navbar-nav .nav-link {
|
|
padding: $nav-link-padding-y $nav-link-padding-x;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
margin: 0;
|
|
width: 100%;
|
|
overflow: auto;
|
|
transition: all 0.2s ease;
|
|
height: 0;
|
|
display: block;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
&.show {
|
|
// 80px = height of top nav element (with x)
|
|
// 52px = height of dropdown toggle (with <)
|
|
height: calc(100vh - 80px - 52px);
|
|
|
|
> :last-child {
|
|
// On iOS Safari, clicking too close to the bottom brings up the menu,
|
|
// so we need to give the last thing some extra space
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
&#topnav_dd_docs {
|
|
display: grid;
|
|
//grid-template-columns: 187px 187px;
|
|
grid-template-columns: minmax(187px, 1fr) minmax(187px, 1fr);
|
|
gap: 1px;
|
|
left: -200px;
|
|
|
|
.dropdown-hero {
|
|
grid-column: 1 / 3;
|
|
grid-row: 1;
|
|
}
|
|
|
|
// "Docs" dropdown placement (mobile)
|
|
.col-for-document_types
|
|
{
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
.col-for-use_cases
|
|
{
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
}
|
|
.col-for-get_started
|
|
{
|
|
grid-column: 1 / 3;
|
|
grid-row: 4;
|
|
margin: -1px;
|
|
padding-top: 33px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navcol {
|
|
padding: 1rem 2rem;
|
|
}
|
|
&.smaller-dropdown {
|
|
padding: 0 2rem;
|
|
&.show {
|
|
padding: 1rem 2rem;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.dropdown-hero:first-child {
|
|
padding-top: 1rem;
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle:not(.with-caret) {
|
|
&::before,
|
|
&::after {
|
|
border: 0;
|
|
font-family: FontAwesome;
|
|
color: $blue-purple-400;
|
|
font-size: 0.75rem;
|
|
transition: all 0.2s ease;
|
|
overflow: clip;
|
|
width: 1rem;
|
|
}
|
|
|
|
&::before {
|
|
content: "\f053"; // < chevron
|
|
display: inline-block;
|
|
margin-bottom: -5px; // fix weird placement on Chrome
|
|
}
|
|
&::after {
|
|
content: "\f054"; // > chevron
|
|
position: absolute;
|
|
right: 2rem;
|
|
}
|
|
}
|
|
.dropdown.show .dropdown-toggle::after {
|
|
text-indent: 5rem;
|
|
}
|
|
.dropdown:not(.show) .dropdown-toggle::before {
|
|
width: 0;
|
|
height: 0;
|
|
text-indent: -5rem;
|
|
}
|
|
|
|
.dropdown-toggle.with-caret {
|
|
&::after {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
// Move search to top of mobile menu ---------------------------------------
|
|
#top-main-nav {
|
|
background-color: $gray-800;
|
|
padding-top: 32px;
|
|
position: relative;
|
|
|
|
// Hide search and other sub-menus when one sub-menu is expanded
|
|
// (js required to add the class on the dropdown event)
|
|
&.submenu-expanded {
|
|
padding-top: 0;
|
|
|
|
.dropdown:not(.show) .dropdown-toggle {
|
|
display: none;
|
|
}
|
|
|
|
#topnav-search,
|
|
#topnav-language,
|
|
#topnav-theme {
|
|
// display: none;
|
|
height: 0;
|
|
overflow: clip;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
#topnav-search {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 105px;
|
|
|
|
.input-group {
|
|
flex-wrap: nowrap; // Fix search bar splitting into two lines on iPhone 5
|
|
}
|
|
}
|
|
|
|
#topnav-language {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 65px;
|
|
|
|
hr {
|
|
border-top: 1px solid $gray-800;
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
display: static;
|
|
}
|
|
}
|
|
|
|
#topnav-theme {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 26px;
|
|
}
|
|
} // end mobile specific styles ----------------------------------------------
|
|
|
|
}
|
|
|
|
// Fix so anchors don't jump under the fixed header ----------------------------
|
|
article h1:before,
|
|
article h2:before,
|
|
article h3:before,
|
|
article h4:before,
|
|
article h5:before,
|
|
article h6:before,
|
|
.interactive-block:before {
|
|
display: block;
|
|
content: " ";
|
|
margin-top: -24px;
|
|
height: 60px;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
article h1:first-of-type:before {
|
|
margin-top: -40px; // Add less space to page title (but don't overlap Edit button)
|
|
}
|
|
|
|
// Animated chevron (e.g. for language dropdown) -------------------------------
|
|
|
|
.chevron {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 0.75rem;
|
|
height: 0.5625rem;
|
|
|
|
span {
|
|
position: absolute;
|
|
top: 0.25rem;
|
|
display: inline-block;
|
|
width: 0.5rem;
|
|
height: 0.15rem;
|
|
background-color: $blue-purple-400;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
}
|
|
&:not(.expander) span {
|
|
&:first-of-type {
|
|
left: 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
&:last-of-type {
|
|
right: 0;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
span:first-of-type {
|
|
transform: rotate(-45deg);
|
|
}
|
|
span:first-of-type {
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown.show .chevron,
|
|
.expander:not(.collapsed) .chevron {
|
|
span:first-of-type {
|
|
transform: rotate(-45deg);
|
|
}
|
|
span:last-of-type {
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
#topnav-theme > div {
|
|
border-radius: var(--language-picker-border-radius);
|
|
color: var(--language-picker-text-color);
|
|
background-color: var(--language-picker-background-color);
|
|
border: 1px solid var(--language-picker-border-color);
|
|
padding: var(--language-picker-input-padding-vertical) var(--language-picker-input-padding-horizontal);
|
|
min-height: var(--language-picker-min-height);
|
|
}
|
|
|
|
// Fix dropdown box-shadows on mobile (language selector's shadow overlaps the
|
|
// rest of the menu, so it's offset more with a negative spread)
|
|
@include media-breakpoint-down(md) {
|
|
.navbar-collapse,
|
|
.dropdown-menu {
|
|
box-shadow: 0px 25px 40px -20px $black;
|
|
}
|
|
}
|