ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 11:45:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Temporary styles for new top nav

Browse Source
This commit is contained in:
mDuo13
2021-06-15 12:01:27 -07:00
parent 3e110f3852
commit d407d2103f
2 changed files with 10 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal2020.css
View File

File diff suppressed because one or more lines are too long

87
styles/_top-nav.scss
View File

@@ -20,6 +20,11 @@
} }
} }
// Fancy dropdown behavior ---------------------------------------------------
.top-nav-dropdown {
max-width: 840px;
}
// Main Links ---------------------------------------------------------------- // Main Links ----------------------------------------------------------------
.navbar-nav { .navbar-nav {
.nav-link { .nav-link {
@@ -28,12 +33,6 @@
line-height: 52px; line-height: 52px;
text-decoration: none; text-decoration: none;
&:hover {
background-color: transparent;
box-shadow: inset 0 -1px 0 0 #000;
text-decoration: none;
}
&.active a { &.active a {
font-weight: 700; font-weight: 700;
box-shadow: inset 0 -1px 0 0 #000; box-shadow: inset 0 -1px 0 0 #000;
@@ -90,9 +89,6 @@
.dropdown-toggle { .dropdown-toggle {
color: $gray-500; color: $gray-500;
} }
.dropdown-toggle::after {
border-color: $primary transparent transparent transparent;
}
} }
.dropdown-menu { .dropdown-menu {
border-width: 0; border-width: 0;
@@ -112,11 +108,6 @@
} }
// Desktop version // Desktop version
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
.dropdown-toggle::after {
border-width: 0;
top: 80%;
left: 50%;
}
.dropdown-toggle.with-caret::after { .dropdown-toggle.with-caret::after {
position: relative; position: relative;
@@ -138,17 +129,6 @@
position: relative; position: relative;
} }
.dropdown.show .dropdown-toggle:not(.with-caret)::after,
.dropdown-toggle:not(.with-caret):hover::after {
content: " ";
display: static;
border: 3px solid $primary;
border-radius: 50%;
font-size: 0;
height: 0;
width: 0;
}
.dropdown-menu { .dropdown-menu {
border-width: 1px; border-width: 1px;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
@@ -168,6 +148,10 @@
// Search bar & controls ----------------------------------------------------- // Search bar & controls -----------------------------------------------------
#navbar-search { #navbar-search {
.navbar-form {
padding: 1rem;
}
.input-group-text, .input-group-text,
.input-group > .input-group-append > .btn { .input-group > .input-group-append > .btn {
color: $white; color: $white;
@@ -183,59 +167,6 @@
border-color: $white; border-color: $white;
} }
@include media-breakpoint-up(lg) { // Desktop search styling ---------------
position: static; // allows search bar to be positioned screen-center
.dropdown-toggle {
position: relative;
}
.dropdown-menu {
padding: 0;
border-radius: $border-radius-lg;
width: 640px;
left: calc(50% - 320px);
background-color: $gray-900;
}
.input-group {
width: 100%;
}
#topsearchbox {
line-height: 24px;
height: 100%;
width: 100%;
&:not(:focus) {
border-right: 1px solid black;
}
}
}
@include media-breakpoint-down(md) { // Mobile search styling --------------
.form-inline label {
margin-bottom: 0;
.input-group-text {
line-height: 24px;
}
}
.dropdown-menu { // search box is always expanded
display: block;
position: static;
background-color: transparent;
border: 0 none;
box-shadow: none;
margin-top: 0;
width: 100%;
}
.dropdown-toggle { // no dropdown to expand search
display: none;
}
}
// Algolia Search results -------------------------------------------------- // Algolia Search results --------------------------------------------------
.algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] { .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
background-color: rgba(0,0,0,0.9); background-color: rgba(0,0,0,0.9);