mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-18 18:55:49 +00:00
Merge branch 'docs_landing' into 2021_refresh
This commit is contained in:
mDuo13
@@ -101,7 +101,7 @@ p + .readmore {
|
||||
background-color: transparent;
|
||||
|
||||
&::after {
|
||||
content: " ↑"
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -137,4 +137,3 @@ p + .readmore {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,31 +1,49 @@
|
||||
.card {
|
||||
background-color: transparent;
|
||||
.card-body > p,
|
||||
.card-body > p:last-child {
|
||||
padding: 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
width: 100%;
|
||||
/* Full-link cards */
|
||||
a.card {
|
||||
border: 0;
|
||||
}
|
||||
.card-b {
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
opacity: 1;
|
||||
// background: rgba(34, 37, 43, 0.5);
|
||||
// backdrop-filter: blur(3px);
|
||||
transition: all 0.35s ease-in-out;
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin: 10px;
|
||||
}
|
||||
&.not-hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
a.card:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
a.card:hover h3 {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.card-deck {
|
||||
display: block !important;
|
||||
.card-deck {
|
||||
margin-top: 2.5rem;
|
||||
.card {
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.card-deck .card {
|
||||
margin-bottom: 2.5rem !important;
|
||||
|
||||
a.card {
|
||||
transition: all 0.35s ease-out;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
-webkit-transform: translateY(-16px);
|
||||
-moz-transform: translateY(-16px);
|
||||
-ms-transform: translateY(-16px);
|
||||
-o-transform: translateY(-16px);
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-top: 2rem;
|
||||
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
&.row-cols-2 .card {
|
||||
margin: .75rem;
|
||||
max-width: calc(50% - 1.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -112,17 +112,19 @@ $text-muted: $gray-200;
|
||||
$breadcrumb-bg: $black;
|
||||
$breadcrumb-active-color: $gray-400;
|
||||
|
||||
$card-bg: $gray-800;
|
||||
|
||||
$dropdown-bg: $gray-900;
|
||||
$dropdown-divider-bg: $black;
|
||||
$dropdown-border-color: $gray-900;
|
||||
$dropdown-color: $secondary;
|
||||
$dropdown-link-color: $white;
|
||||
$dropdown-link-hover-color: $primary;
|
||||
$dropdown-link-hover-color: $blue-purple-500;
|
||||
$dropdown-link-hover-bg: $gray-900;
|
||||
$dropdown-link-active-bg: transparent;
|
||||
|
||||
$navbar-dark-color: $white;
|
||||
$navbar-dark-hover-color: $secondary;
|
||||
$navbar-dark-hover-color: $blue-purple-500;
|
||||
$navbar-dark-active-color: $primary;
|
||||
|
||||
$input-bg: $gray-900;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
background-position: left 0 bottom .2em;
|
||||
transition: background-position 100ms ease-in-out;
|
||||
|
||||
// TODO: the background position is based on the padding, so it might
|
||||
// Note: the background position is based on the padding, so it might
|
||||
// need adjustments for elements with more padding to make it line up
|
||||
// with the text. I thought background-origin: content-box might fix this
|
||||
// but it doesn't seem to.
|
||||
@@ -58,12 +58,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// /* Reduce external link icon size */
|
||||
// .fa.fa-external-link:before {
|
||||
// font-size: 80%;
|
||||
// }
|
||||
//
|
||||
// .external-link .fa-external-link,
|
||||
// .related-projects a .fa-external-link {
|
||||
// padding-left: 3px;
|
||||
// }
|
||||
.xrpl-footer .external-link {
|
||||
&::after {
|
||||
background-position: left 0 bottom 0;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background-position: left .2em bottom .2em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,71 +1,25 @@
|
||||
/* Footer ------------------------------------------------------------------- */
|
||||
|
||||
.xrpl-footer {
|
||||
>:first-child {
|
||||
border-top: 1px solid white;
|
||||
padding: 54px 48px 48px 48px;
|
||||
}
|
||||
|
||||
.absolute_bottom_footer {
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
padding: 7.5rem 3rem;
|
||||
background-image: url(../img/backgrounds/footer.svg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
.nav-link {
|
||||
padding: .75rem 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 0.75rem;
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: none;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
padding: 8px;
|
||||
|
||||
h5 i {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-grid .card {
|
||||
padding: 24px 48px 48px 48px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.curated-links li, .level-1 {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.absolute_bottom_footer span {
|
||||
margin-right: 25px;
|
||||
font-size: 0.75rem;
|
||||
.absolute-bottom-footer {
|
||||
font-size: 10px;
|
||||
line-height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,75 @@
|
||||
form {
|
||||
input {
|
||||
background: rgba(184, 189, 199, 0.1);
|
||||
border: 1px solid #B8BDC7;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
.search {
|
||||
.input-group-text {
|
||||
border-width: 0;
|
||||
color: $white;
|
||||
background-color: $gray-800;
|
||||
border-radius: $border-radius-sm 0 0 $border-radius-sm;
|
||||
padding: .5rem .5rem .5rem 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.ds-input {
|
||||
background-color: $gray-800;
|
||||
border-radius: 0 $border-radius-sm $border-radius-sm 0;
|
||||
padding: .75rem 1rem .75rem .5rem;
|
||||
width: 100%;
|
||||
border: 1px solid $gray-800;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-autocomplete {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#algolia-autocomplete-listbox-0 {
|
||||
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;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
|
||||
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--highlight {
|
||||
color: $white;
|
||||
background-color: $green-800;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.algolia-autocomplete .ds-dropdown-menu {
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -253,6 +253,10 @@
|
||||
padding-bottom: 5rem;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
.px-20 {
|
||||
padding-left: 5rem;
|
||||
padding-right: 5rem;
|
||||
}
|
||||
.pt-20 {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
@@ -408,3 +412,24 @@ br {
|
||||
.z-index-1 {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Arrow bouncing animation
|
||||
@keyframes arrowDance {
|
||||
0% { padding-left: 7px; }
|
||||
50% { padding-left: 14px; }
|
||||
100% { padding-left: 7px; }
|
||||
}
|
||||
|
||||
// Alt version for elements absolute-positioned to the right
|
||||
@keyframes arrowDance2 {
|
||||
0% { right: 0; }
|
||||
50% { right: 7px; }
|
||||
100% { right: 0; }
|
||||
}
|
||||
|
||||
// Diagonal up-right arrow bouncing (also for absolute-positioned to the right)
|
||||
@keyframes arrowDanceDiag {
|
||||
0% { right: 7px; margin-top: 0; }
|
||||
50% { right: 0; margin-top: -7px; }
|
||||
100% { right: 7px; margin-top: 0; }
|
||||
}
|
||||
|
||||
@@ -23,17 +23,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.content .children-display > ul > li {
|
||||
}
|
||||
|
||||
.content .label-links {
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Common list modules (children, curated links) -------------------------- */
|
||||
|
||||
.level-1,
|
||||
.level-2{
|
||||
margin-top: 0;
|
||||
@@ -46,32 +35,6 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card .curated-links a:hover,
|
||||
.card .children-display a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card .level-1 a,
|
||||
.card .curated-links li a {
|
||||
padding: 8px;
|
||||
display: block;
|
||||
margin: 0 -8px 0 -8px;
|
||||
}
|
||||
|
||||
.card .level-2 {
|
||||
position: relative;
|
||||
}
|
||||
.card .level-2 a {
|
||||
padding: 8px 8px 8px 28px;
|
||||
display: block;
|
||||
margin: 0 -8px 0 -8px;
|
||||
}
|
||||
|
||||
.card .blurb + .children-display,
|
||||
.card .blurb + .curated-links {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.section-hero .blurb {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.71em;
|
||||
@@ -107,12 +70,6 @@
|
||||
|
||||
/* Misc. ------------------------------------------------------------------ */
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.card {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.display-4 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@@ -122,43 +79,26 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-header h3.card-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#test-net-servers pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.card li {
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
// .card li {
|
||||
// list-style-type: none;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
|
||||
section:first-of-type {
|
||||
// padding-top: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
background: none;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.card-body > p {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// .card-header,
|
||||
// .card-footer {
|
||||
// background: none;
|
||||
// border-bottom: none;
|
||||
// border-top: none;
|
||||
// }
|
||||
|
||||
|
||||
#main_content_wrapper {
|
||||
@@ -173,29 +113,50 @@
|
||||
}
|
||||
}
|
||||
|
||||
// In-body nav blocks - show as a table with → arrows
|
||||
.nav {
|
||||
.nav-link {
|
||||
padding: 1rem 0;
|
||||
color: $gray-200;
|
||||
border-bottom: 1px solid $gray-800;
|
||||
position: relative;
|
||||
|
||||
.card .card-img-top {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
.image-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 16px;
|
||||
&:hover {
|
||||
color: $purple;
|
||||
}
|
||||
|
||||
&:not(.external-link)::after {
|
||||
content: " ";
|
||||
background-image: url(../img/icons/arrow-right-purple.svg);
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
&:not(.external-link):hover::after {
|
||||
animation: arrowDance2 1.2s infinite;
|
||||
}
|
||||
|
||||
&.external-link::after {
|
||||
content: " ";
|
||||
background-image: url(../img/icons/arrow-up-right.svg);
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
// right: .5rem;
|
||||
right: 7px;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
|
||||
&.external-link:hover::after {
|
||||
animation: arrowDanceDiag 1.2s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Full-link cards */
|
||||
a.card {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
a.card:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
a.card:hover h3 {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -247,7 +247,7 @@ $columns: 12; // Number of columns in the grid system
|
||||
@for $width from 1 through $columns {
|
||||
.col-new-#{$width} {
|
||||
flex-basis: $width / $columns * 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.col-new {
|
||||
background-position: bottom;
|
||||
@@ -263,7 +263,7 @@ $columns: 12; // Number of columns in the grid system
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin: 40px;
|
||||
}
|
||||
|
||||
|
||||
&#pink-purple {
|
||||
background-image: url(../../img/cards/pink-purple.svg);
|
||||
}
|
||||
@@ -273,6 +273,9 @@ $columns: 12; // Number of columns in the grid system
|
||||
&#light-green {
|
||||
background-image: url(../../img/cards/light-green.svg);
|
||||
}
|
||||
&#green {
|
||||
background-image: url(../../img/cards/green.svg);
|
||||
}
|
||||
&#orange {
|
||||
background-image: url(../../img/cards/orange.svg);
|
||||
}
|
||||
@@ -361,26 +364,6 @@ $columns: 12; // Number of columns in the grid system
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Grid Box Vertical numbers ------------------------------------------------ */
|
||||
.flag-vertical {
|
||||
color: $gray-200;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
right: 3em;
|
||||
width: 20px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
-ms-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
font-size: 0.833em;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
// Misc. layout styles ---------------------------------------------------------
|
||||
|
||||
.xrp-ledger-dev-portal.sidebar-primary .main {
|
||||
@@ -389,22 +372,6 @@ $columns: 12; // Number of columns in the grid system
|
||||
min-height: 700px;
|
||||
}
|
||||
|
||||
|
||||
.doc-index {
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.landing .card-grid .card,
|
||||
.landing .card-grid .card-body,
|
||||
.landing .card-grid .card-header {
|
||||
padding-left: 0;
|
||||
}
|
||||
.landing .doc-index {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive design for different viewscreens ------------------------------ */
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
@@ -28,6 +28,23 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.hc .h2 {
|
||||
height: 38px;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
#hc-1 {
|
||||
background-image: url(../../img/graphics/hc-1.png);
|
||||
border: 1px solid #FAFF1A;
|
||||
}
|
||||
#hc-2 {
|
||||
background-image: url(../../img/graphics/hc-2.png);
|
||||
border: 1px solid #FF1A8B;
|
||||
}
|
||||
#hc-3 {
|
||||
background-image: url(../../img/graphics/hc-3.png);
|
||||
border: 1px solid #974CFF;
|
||||
}
|
||||
|
||||
|
||||
.cta {
|
||||
position: absolute;
|
||||
@@ -157,10 +174,100 @@
|
||||
}
|
||||
|
||||
.page-docs-index {
|
||||
@include media-breakpoint-up(lg) {
|
||||
background: url(../img/backgrounds/bg-docs.png) no-repeat;
|
||||
background: url(../img/backgrounds/bg-docs.png) no-repeat;
|
||||
background-position-x: left -20vw;
|
||||
background-position-y: top;
|
||||
@include media-breakpoint-up(md) {
|
||||
background-position-x: left;
|
||||
background-position-y: 300px;
|
||||
}
|
||||
|
||||
.center-search {
|
||||
.input-group-text {
|
||||
height: 56px;
|
||||
padding: .75rem .75rem .75rem 1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.ds-input {
|
||||
height: 56px;
|
||||
padding: .75rem 1rem .75rem .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#docs-browse-by {
|
||||
@include media-breakpoint-up(lg) {
|
||||
.col:not(:first-child) {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
.col:not(:last-child) {
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
.col:not(:first-child) {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#software-and-sdks .card-deck {
|
||||
.card:nth-child(1) {
|
||||
background-image: url(../img/cards/4col-green.svg);
|
||||
}
|
||||
.card:nth-child(2) {
|
||||
background-image: url(../img/cards/4col-light-blue.svg);
|
||||
}
|
||||
.card:nth-child(3) {
|
||||
background-image: url(../img/cards/4col-orange.svg);
|
||||
}
|
||||
.card:nth-child(4) {
|
||||
background-image: url(../img/cards/4col-yellow.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.circled-logo {
|
||||
background-color: $gray-600;
|
||||
border-radius: 50%;
|
||||
padding: .75rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
#doc-types .card-deck {
|
||||
.card:nth-child(1) {
|
||||
background-image: url(../img/cards/4col-orange-yellow.svg);
|
||||
}
|
||||
.card:nth-child(2) {
|
||||
background-image: url(../img/cards/4col-magenta.svg);
|
||||
}
|
||||
.card:nth-child(3) {
|
||||
background-image: url(../img/cards/4col-blue-green.svg);
|
||||
}
|
||||
.card:nth-child(4) {
|
||||
background-image: url(../img/cards/4col-light-blue-2.svg);
|
||||
}
|
||||
}
|
||||
|
||||
#docs-hot-topic .longform {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-docs-index,
|
||||
.page-community {
|
||||
#run-a-network-node .card-deck {
|
||||
.card:nth-child(1) {
|
||||
background-image: url(../img/cards/4col-yellow-2.svg);
|
||||
}
|
||||
.card:nth-child(2) {
|
||||
background-image: url(../img/cards/4col-purple.svg);
|
||||
}
|
||||
.card:nth-child(3) {
|
||||
background-image: url(../img/cards/4col-magenta-2.svg);
|
||||
}
|
||||
.card:nth-child(4) {
|
||||
background-image: url(../img/cards/4col-light-green.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -219,3 +219,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-cloud {
|
||||
.list-inline-item {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,6 +127,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
#topnav-search {
|
||||
flex-grow: 1;
|
||||
.input-group {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop only styles -------------------------------------------------------
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: 0 3rem;
|
||||
@@ -154,8 +174,10 @@
|
||||
border-radius: 0 0 $border-radius-lg $border-radius-lg;
|
||||
padding: 2.5rem;
|
||||
|
||||
.dropdown-hero {
|
||||
padding: 0;
|
||||
.dropdown-item{
|
||||
&.dropdown-hero {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
@@ -261,92 +283,6 @@
|
||||
}
|
||||
} // End desktop styles
|
||||
|
||||
// Search bar & controls -----------------------------------------------------
|
||||
#topnav-search {
|
||||
flex-grow: 1;
|
||||
.input-group {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.form-inline {
|
||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-group-text {
|
||||
border-width: 0;
|
||||
color: $white;
|
||||
background-color: $gray-800;
|
||||
border-radius: $border-radius-sm 0 0 $border-radius-sm;
|
||||
height: 40px;
|
||||
padding: .5rem .5rem .5rem 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.algolia-autocomplete {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#topsearchbox {
|
||||
background-color: $gray-800;
|
||||
border-radius: 0 $border-radius-sm $border-radius-sm 0;
|
||||
padding: .75rem 1rem .75rem .5rem;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border: 1px solid $gray-800;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
|
||||
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--highlight {
|
||||
color: $white;
|
||||
background-color: $green-800;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.algolia-autocomplete .ds-dropdown-menu {
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile only styles --------------------------------------------------------
|
||||
@include media-breakpoint-down(md) {
|
||||
.navbar-brand {
|
||||
@@ -581,6 +517,12 @@
|
||||
margin-top: -80px;
|
||||
height: 80px;
|
||||
visibility: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
// Fix so links aren't unclickable underneath the header anchor-fix
|
||||
a {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Animated chevron (e.g. for language dropdown) -------------------------------
|
||||
|
||||
@@ -15,6 +15,11 @@ $border-radius-sm: 4px;
|
||||
$dropdown-border-width: 1px;
|
||||
$enable-shadows: true;
|
||||
$dropdown-box-shadow: 0px 5px 40px $gray-900;
|
||||
$card-spacer-x: 2rem;
|
||||
$card-spacer-y: 2rem;
|
||||
$card-deck-margin: 1.25rem;
|
||||
$card-border-radius: $border-radius-lg;
|
||||
$card-columns-gap: 2rem;
|
||||
$caret-width: .4em;
|
||||
|
||||
$input-btn-padding-y: 1rem;
|
||||
@@ -32,6 +37,7 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
|
||||
|
||||
// Import site styles
|
||||
@import "_font.scss";
|
||||
@import "_forms.scss";
|
||||
@import "_layout.scss";
|
||||
@import "_side-nav.scss";
|
||||
@import "_helpers.scss";
|
||||
@@ -48,6 +54,7 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
|
||||
@import "_external-links.scss";
|
||||
@import "_footer.scss";
|
||||
@import "_callouts.scss";
|
||||
@import "_cards.scss";
|
||||
@import "_breadcrumbs.scss";
|
||||
@import "_landings.scss";
|
||||
@import "_interactive-tutorials.scss";
|
||||
|
||||
Reference in New Issue
Block a user