mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-06 17:27:57 +00:00
Merge pull request #1610 from XRPLF/search-bar-UI-change
Search bar UI change
This commit is contained in:
Rome Reginelli
File diff suppressed because one or more lines are too long
@@ -13,6 +13,9 @@ $gray-700: #343437;
|
||||
$gray-800: #232325;
|
||||
$gray-900: #111112;
|
||||
$black: #000000;
|
||||
$black-10: $gray-100;
|
||||
$black-40: $gray-400;
|
||||
$black-60: $gray-600;
|
||||
|
||||
$green-100: #D6FAE7;
|
||||
$green-200: #ADF5CE;
|
||||
|
||||
@@ -35,7 +35,99 @@
|
||||
// Algolia Search results --------------------------------------------------
|
||||
.DocSearch-Modal {
|
||||
top: 85px;
|
||||
background-color: #232325;
|
||||
box-shadow: none;
|
||||
}
|
||||
.DocSearch-Form {
|
||||
box-shadow: inset 0 0 0 2px $blue-purple-400;
|
||||
background-color: #232325;
|
||||
}
|
||||
.DocSearch-Hit-source {
|
||||
color: $blue-purple-400;
|
||||
}
|
||||
.DocSearch-Hits mark {
|
||||
color: $blue-purple-400;
|
||||
}
|
||||
.DocSearch-Hit-source,
|
||||
.DocSearch-Hit-Container,
|
||||
.DocSearch-Footer {
|
||||
background-color: #232325;
|
||||
}
|
||||
.DocSearch-Hit a {
|
||||
background-color: #232325;
|
||||
box-shadow: none;
|
||||
}
|
||||
.DocSearch-Hit-source {
|
||||
color: $black-40;
|
||||
}
|
||||
.DocSearch-Input {
|
||||
color: $white;
|
||||
}
|
||||
.DocSearch-Hit-title,
|
||||
.DocSearch-Hit-path,
|
||||
.DocSearch-Label,
|
||||
.DocSearch-Help {
|
||||
color: $black-10 !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected="true"] a {
|
||||
background: $gray-700;
|
||||
.DocSearch-Hit-Container {
|
||||
background-color: $gray-700;
|
||||
}
|
||||
mark {
|
||||
color: $blue-purple-400 !important;
|
||||
}
|
||||
}
|
||||
.DocSearch-Prefill {
|
||||
color: $blue-purple-400;
|
||||
}
|
||||
.DocSearch-Button {
|
||||
background: $gray-800;
|
||||
width: 100%;
|
||||
}
|
||||
.DocSearch-Button:hover {
|
||||
background: $gray-800;
|
||||
border-radius: 40px;
|
||||
box-shadow: inset 0 0 0 2px $blue-purple-400;
|
||||
.DocSearch-Button-Placeholder {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.DocSearch-Search-Icon {
|
||||
color: $white !important;
|
||||
}
|
||||
.DocSearch-Modal {
|
||||
margin-top: -20px;
|
||||
max-width: 55%;
|
||||
margin-right: 13.5em;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.algolia-autocomplete .ds-dropdown-menu {
|
||||
min-width: unset;
|
||||
}
|
||||
.DocSearch-Modal {
|
||||
top: 127px;
|
||||
max-width: 100%;
|
||||
margin-left: 10px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.DocSearch-Container {
|
||||
z-index: 99999 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.DocSearch-Logo svg {
|
||||
.cls-1,
|
||||
.cls-2 {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
.DocSearch-Commands-Key {
|
||||
color: $gray-800;
|
||||
}
|
||||
|
||||
#centersearchboxcontainer {
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -57,7 +149,7 @@
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
|
||||
color: $white;
|
||||
border: 0;
|
||||
border-bottom: 2px solid $blue-purple-500;
|
||||
border-bottom: 2px solid $blue-purple-400;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -93,37 +185,6 @@
|
||||
box-shadow: none;
|
||||
background-color: $gray-700;
|
||||
}
|
||||
.DocSearch-Button {
|
||||
background: $gray-800;
|
||||
width: 700px;
|
||||
}
|
||||
.DocSearch-Button:hover {
|
||||
background: $gray-800;
|
||||
.DocSearch-Button-Placeholder {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.DocSearch-Search-Icon {
|
||||
color: $white !important;
|
||||
}
|
||||
.DocSearch-Modal {
|
||||
margin-top: -15px;
|
||||
max-width: 700px !important;
|
||||
margin-right: 13.75em;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.algolia-autocomplete .ds-dropdown-menu {
|
||||
min-width: unset;
|
||||
}
|
||||
.DocSearch-Modal {
|
||||
top: 128px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.DocSearch-Container {
|
||||
z-index: 99999 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
#xrp-ledger-dev-portal {
|
||||
|
||||
@@ -113,10 +113,18 @@ h6,
|
||||
|
||||
// Algolia search results
|
||||
.xrp-ledger-dev-portal {
|
||||
.DocSearch-Modal {
|
||||
background: $white;
|
||||
}
|
||||
.DocSearch-Prefill{
|
||||
color: $blue-purple-500;
|
||||
}
|
||||
.DocSearch-Button {
|
||||
background: var(--docsearch-searchbox-background);
|
||||
}
|
||||
.DocSearch-Button:hover {
|
||||
box-shadow: inset 0 0 0 2px $blue-purple-500;
|
||||
border-radius: 40px;
|
||||
background: var(--docsearch-searchbox-background);
|
||||
.DocSearch-Button-Placeholder {
|
||||
color: var(--docsearch-text-color);
|
||||
@@ -125,6 +133,75 @@ h6,
|
||||
.DocSearch-Search-Icon {
|
||||
color: var(--docsearch-text-color) !important;
|
||||
}
|
||||
.DocSearch-Input{
|
||||
color: $gray-900;
|
||||
}
|
||||
.DocSearch-Hit-Select-Icon{
|
||||
color: $gray-900;
|
||||
}
|
||||
.DocSearch-Form {
|
||||
box-shadow: inset 0 0 0 2px $blue-purple-500;
|
||||
background-color: var(--docsearch-searchbox-focus-background);
|
||||
}
|
||||
.DocSearch-Hit-source {
|
||||
color: $blue-purple-500;
|
||||
background: $white;
|
||||
}
|
||||
.DocSearch-Hits mark {
|
||||
color: $blue-purple-500;
|
||||
}
|
||||
.DocSearch-Hit-Container {
|
||||
background: $white;
|
||||
}
|
||||
.DocSearch-Hit a {
|
||||
background-color: $white;
|
||||
}
|
||||
.DocSearch-Hit-content-wrapper {
|
||||
.DocSearch-Hit-title {
|
||||
color: $black !important;
|
||||
}
|
||||
.DocSearch-Hit-path {
|
||||
color: $black-60 !important;
|
||||
}
|
||||
}
|
||||
.DocSearch-Logo svg{
|
||||
.cls-1, .cls-2{
|
||||
fill:var(--docsearch-logo-color);;
|
||||
}
|
||||
}
|
||||
.DocSearch-Hit-title,
|
||||
.DocSearch-Hit-path,
|
||||
.DocSearch-Label,
|
||||
.DocSearch-Help {
|
||||
color: $black-60 !important;
|
||||
}
|
||||
.DocSearch-Hit[aria-selected="true"] a {
|
||||
background: $black-10;
|
||||
.DocSearch-Hit-Container {
|
||||
background-color: $black-10;
|
||||
}
|
||||
.DocSearch-Hit-content-wrapper {
|
||||
.DocSearch-Hit-title {
|
||||
color: $black !important;
|
||||
}
|
||||
.DocSearch-Hit-path {
|
||||
color: $black-60 !important;
|
||||
}
|
||||
}
|
||||
.DocSearch-Hit-icon svg {
|
||||
color: $black !important;
|
||||
}
|
||||
.DocSearch-Hit-action .DocSearch-Hit-action-button svg {
|
||||
color: $black !important;
|
||||
}
|
||||
mark {
|
||||
color: $blue-purple-500 !important;
|
||||
}
|
||||
}
|
||||
.DocSearch-Footer {
|
||||
background: var(--docsearch-footer-background);
|
||||
}
|
||||
|
||||
// The extra specificity makes this override the default Algolia styles.
|
||||
.algolia-autocomplete {
|
||||
.ds-dropdown-menu [class^="ds-dataset-"] {
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
"node-sass": "^7.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v12.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v12.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2022-v12.css --output-style compressed --source-map true"
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v13.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v13.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2022-v13.css --output-style compressed --source-map true"
|
||||
},
|
||||
"dependencies": {
|
||||
"sass": "^1.26.10"
|
||||
|
||||
16501
styles/xrpl.css
16501
styles/xrpl.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -53,7 +53,7 @@
|
||||
{% if target.lang=="ja" %}
|
||||
<link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
|
||||
{% endif %}
|
||||
<link href="{{currentpage.prefix}}assets/css/devportal2022-v12.css" rel="stylesheet" />
|
||||
<link href="{{currentpage.prefix}}assets/css/devportal2022-v13.css" rel="stylesheet" />
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user