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

Nav, link, & Bootstrap changes

Browse Source
This commit is contained in:
mDuo13
2021-06-29 18:46:30 -07:00
parent 11c742bbb7
commit 177b361d37
13 changed files with 206 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
styles/_buttons.scss
View File

@@ -97,8 +97,6 @@ p + .readmore {
right: 36px;
font-weight: 700;
z-index: 1000;
color: white;
background-color: transparent;
&::after {
display: none;

5
styles/_code-tabs.scss
View File

@@ -1,4 +1,4 @@
$code-bg: $gray-900;
$code-bg: $gray-800;
$code-padding: 2rem;
// Code Tabs -------------------------------------------------------------------
@@ -71,8 +71,9 @@ pre {
}
&:hover {
text-decoration: none;
background-color: $gray-900;
background-color: $code-bg;
color: $primary;
padding-bottom: 0.625rem;
}
}

27
styles/_colors.scss
View File

@@ -45,7 +45,7 @@ $blue-purple-600: #5F00E5;
$blue-purple-700: #4A00B2;
$blue-purple-800: #350080;
$blue-purple-900: #20004C;
$purple: $blue-purple-500;
$purple: $blue-purple-400;
$red-purple-100: #FBE5FF;
$red-purple-200: #F2B2FF;
@@ -92,24 +92,26 @@ $yellow-900: #4B4C00;
$yellow: $yellow-500;
// Common colors & colors used in Bootstrap ------------------------------------
$primary: $green-500;
$primary: $purple;
$secondary: $gray-200;
$light: $white;
$dark: $black;
$dark: $gray-900;
$success: $green-500;
$info: $blue-500;
$warning: $yellow-500; // "caution" callout style
$danger: $magenta-500; // "warning" callout style
// Bootstrap elements
$body-bg: $black;
$body-bg: $gray-900;
$navbar-light-color: $gray-600;
$code-color: $secondary;
$body-color: $white;
$headings-color: $white;
$text-muted: $gray-200;
$link-hover-color: $purple;
$link-color: $white;
$breadcrumb-bg: $black;
$breadcrumb-bg: $body-bg;
$breadcrumb-active-color: $gray-400;
$card-bg: $gray-800;
@@ -119,19 +121,22 @@ $dropdown-divider-bg: $black;
$dropdown-border-color: $gray-900;
$dropdown-color: $secondary;
$dropdown-link-color: $white;
$dropdown-link-hover-color: $blue-purple-500;
$dropdown-link-hover-color: $purple;
$dropdown-link-hover-bg: $gray-900;
$dropdown-link-active-bg: transparent;
$navbar-dark-color: $white;
$navbar-dark-hover-color: $blue-purple-500;
$navbar-dark-active-color: $primary;
$navbar-dark-hover-color: $purple;
$navbar-dark-active-color: $white;
$input-bg: $gray-900;
$input-disabled-bg: $gray-800;
$input-bg: $gray-800;
$input-disabled-bg: $gray-600;
$input-color: $white;
$input-border-color: transparent;
$input-box-shadow: inset 0 1px 1px rgba($primary, .075);
$input-box-shadow: none;
$btn-box-shadow: none;
$btn-active-box-shadow: none;
$btn-focus-box-shadow: none;
$input-placeholder-color: $gray-400;
$input-group-addon-bg: $gray-600;
$input-group-addon-color: $white;

27
styles/_external-links.scss
View File

@@ -4,9 +4,10 @@
background-image: url(../img/icons/arrow-up-right.svg);
background-repeat: no-repeat;
display: inline-block;
background-size: 1em;
padding: 0 .5em;
background-position: left 0 bottom .2em;
background-size: 10px;
padding: 0 4px 0 8px;
width: 14px;
background-position: left 0 bottom 4px;
transition: background-position 100ms ease-in-out;
// Note: the background position is based on the padding, so it might
@@ -16,7 +17,7 @@
}
&:hover::after {
background-position: left .2em bottom .4em;
background-position: left 4px bottom 8px;
}
.fa-external-link {
@@ -24,13 +25,15 @@
}
}
.top-nav .dropdown .external-link {
.top-nav .dropdown .external-link,
.xrpl-footer .external-link {
&::after {
background-position: left 0 bottom -.1em;
background-position: left 8px bottom 2px;
width: 2rem;
}
&:hover::after {
background-position: left .2em bottom .1em;
background-position: left 12px bottom 6px;
}
}
@@ -57,13 +60,3 @@
}
}
}
.xrpl-footer .external-link {
&::after {
background-position: left 0 bottom 0;
}
&:hover::after {
background-position: left .2em bottom .2em;
}
}

31
styles/_font.scss
View File

@@ -5,10 +5,7 @@ body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-size: $base-size;
background: $gray-900;
background-color: $gray-900;
line-height: 1.5;
color: $white;
font-family: 'Work Sans', sans-serif;
}
@@ -109,21 +106,19 @@ p {
line-height: 24px;
}
a {
color: inherit;
&:hover {
text-decoration: none;
}
}
p a {
color: $blue-purple-400;
&:hover {
color: $blue-purple-400;
text-decoration: none;
}
}
// a {
// color: inherit;
// &:hover {
// text-decoration: none;
// }
// }
// p a {
// color: $blue-purple-400;
// &:hover {
// color: $blue-purple-400;
// text-decoration: none;
// }
// }
.fs-base {
font-size: $base-size;

82
styles/_forms.scss
View File

@@ -17,7 +17,7 @@
&:focus {
box-shadow: none;
border-color: $white;
border-color: $purple;
}
}
@@ -30,46 +30,54 @@
z-index: 1100 !important;
}
// Algolia Search results --------------------------------------------------
.algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
background-color: rgba(0,0,0,0.9);
border: 1px solid $gray-900;
border-radius: $border-radius-lg;
}
.algolia-autocomplete .ds-dropdown-menu::before {
background-color: rgba(0,0,0,0.9);
border-color: $gray-900;
}
.algolia-docsearch-suggestion {
background-color: rgba(0,0,0,0.9);
}
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
color: $white;
border: 0 solid $secondary;
border-bottom-width: 1px;
font-weight: bold;
}
.xrp-ledger-dev-portal {
// The extra specificity makes this override the default Algolia styles.
// Algolia Search results --------------------------------------------------
.algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
background-color: $dropdown-bg;
border: 0;
border-radius: $border-radius-lg;
}
.algolia-autocomplete .ds-dropdown-menu::before {
background-color: $dropdown-bg;
border: 0;
}
.algolia-autocomplete .algolia-docsearch-suggestion {
background-color: $dropdown-bg;
}
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
color: $white;
border: 0;
border-bottom: 2px solid $blue-purple-500;
font-weight: bold;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
color: $white;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
color: $white;
}
.algolia-autocomplete .algolia-docsearch-suggestion--title {
color: $white;
}
.algolia-autocomplete .algolia-docsearch-suggestion--title {
color: $white;
}
.algolia-autocomplete .algolia-docsearch-suggestion--text {
font-size: 0.8rem;
color: $gray-200;
}
.algolia-autocomplete .algolia-docsearch-suggestion--text {
font-size: 0.8rem;
color: $gray-200;
}
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
color: $white;
background-color: $green-800;
}
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
color: $white;
background-color: $gray-700;
}
@include media-breakpoint-down(md) {
.algolia-autocomplete .ds-dropdown-menu {
min-width: unset;
.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight, .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight, .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
box-shadow: none;
background-color: $gray-700;
}
@include media-breakpoint-down(md) {
.algolia-autocomplete .ds-dropdown-menu {
min-width: unset;
}
}
}

9
styles/_landings.scss
View File

@@ -128,7 +128,9 @@
&:not(.external-link)::after {
content: " ";
background-image: url(../img/icons/arrow-right-purple.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: 1rem;
position: absolute;
right: 0;
width: 1.5rem;
@@ -142,9 +144,10 @@
&.external-link::after {
content: " ";
background-image: url(../img/icons/arrow-up-right.svg);
background-size: cover;
background-repeat: no-repeat;
position: absolute;
// right: .5rem;
background-position: center;
background-size: .75rem;
right: 7px;
width: 1.5rem;
height: 1.5rem;

11
styles/_top-nav.scss
View File

@@ -53,11 +53,6 @@
.dropdown-toggle {
position: relative;
}
.dropdown.show {
.dropdown-toggle {
color: $gray-500;
}
}
.dropdown-menu {
border-width: 0;
@@ -94,6 +89,10 @@
white-space: normal;
}
h4 {
font-size: 1.25rem;
}
&:hover {
h4 {
color: $blue-purple-400;
@@ -166,7 +165,7 @@
.dropdown .dropdown-toggle:hover > span:not(.chevron) {
padding-bottom: 8px;
border-bottom: 2px solid $blue-purple-400;
border-bottom: 2px solid $blue-purple-500;
margin-bottom: -8px;
}

2
styles/xrpl.scss
View File

@@ -14,7 +14,7 @@ $border-radius-lg: 8px;
$border-radius-sm: 4px;
$dropdown-border-width: 1px;
$enable-shadows: true;
$dropdown-box-shadow: 0px 5px 40px $gray-900;
$dropdown-box-shadow: 0px 5px 40px $black;
$card-spacer-x: 2rem;
$card-spacer-y: 2rem;
$card-deck-margin: 1.25rem;