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

Style search for mobile

Browse Source
This commit is contained in:
mDuo13
2020-09-10 16:37:30 -07:00
parent d32b7b9d19
commit 547a1683f0
5 changed files with 55 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
styles/_colors.scss
View File

@@ -107,8 +107,10 @@ $code-color: $secondary;
$body-color: $white;
$headings-color: $white;
$text-muted: $gray-200;
$breadcrumb-bg: $black;
$breadcrumb-active-color: $gray-400;
$dropdown-bg: rgba(0,0,0,0.9);
$dropdown-divider-bg: $black;
$dropdown-border-color: $gray-900;
@@ -117,6 +119,16 @@ $dropdown-link-color: $white;
$dropdown-link-hover-color: $primary;
$dropdown-link-hover-bg: $gray-900;
$dropdown-link-active-bg: transparent;
$navbar-dark-color: $white;
$navbar-dark-hover-color: $secondary;
$navbar-dark-active-color: $primary;
$input-bg: $gray-900;
$input-disabled-bg: $gray-800;
$input-color: $white;
$input-border-color: transparent;
$input-box-shadow: inset 0 1px 1px rgba($primary, .075);
$input-placeholder-color: $gray-200;
$input-group-addon-bg: $gray-600;
$input-group-addon-color: $white;

50
styles/_top-nav.scss
View File

@@ -148,7 +148,17 @@
// Search bar & controls -----------------------------------------------------
#navbar-search {
@include media-breakpoint-up(lg) {
.input-group-text,
.input-group > .input-group-append > .btn {
color: $white;
background-color: transparent;
border-width: 0;
}
.algolia-autocomplete {
flex-grow: 1;
}
@include media-breakpoint-up(lg) { // Desktop search styling ---------------
position: static; // allows search bar to be positioned screen-center
.dropdown-toggle {
position: relative;
@@ -166,13 +176,6 @@
width: 100%;
}
#topsearchbox,
.input-group-text,
.input-group > .input-group-append > .btn {
color: $white;
background-color: transparent;
border-width: 0;
}
#topsearchbox {
line-height: 24px;
height: 100%;
@@ -182,9 +185,30 @@
.input-group > .input-group-append > .btn {
border-left: 1px solid black;
}
.algolia-autocomplete {
flex-grow: 1;
}
@include media-breakpoint-down(lg) { // 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 --------------------------------------------------
@@ -224,6 +248,12 @@
color: $white;
background-color: $green-800;
}
@include media-breakpoint-down(md) {
.algolia-autocomplete .ds-dropdown-menu {
min-width: unset;
}
}
}
// Mobile --------------------------------------------------------------------