mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
scss spacing fix
This commit is contained in:
jonathanlei
@@ -31,9 +31,7 @@
|
||||
}
|
||||
|
||||
#benefits-list {
|
||||
@each $benefit in "public", "streamlined", "performance", "low-cost",
|
||||
"community", "reliability"
|
||||
{
|
||||
@each $benefit in "public", "streamlined", "performance", "low-cost", "community", "reliability" {
|
||||
##{$benefit} {
|
||||
content: url("../img/icons/#{$benefit}.svg");
|
||||
}
|
||||
@@ -41,8 +39,7 @@
|
||||
}
|
||||
|
||||
#advanced-features {
|
||||
$feature-cards: [ "pink-purple", "neutral-blue", "light-green", "orange",
|
||||
"purple-blue-2" ];
|
||||
$feature-cards: ["pink-purple", "neutral-blue", "light-green", "orange", "purple-blue-2"];
|
||||
@for $i from 1 through 5 {
|
||||
.card:nth-child(#{$i}) .card-footer {
|
||||
background-image: url("../img/cards/3col-#{nth($feature-cards, $i)}.svg");
|
||||
@@ -51,8 +48,7 @@
|
||||
}
|
||||
|
||||
#get-started {
|
||||
$gs-cards: [ "orange-yellow", "magenta-orange", "purple-blue-green",
|
||||
"light-blue", "green-blue" ];
|
||||
$gs-cards: ["orange-yellow", "magenta-orange", "purple-blue-green", "light-blue", "green-blue"];
|
||||
@for $i from 1 through 5 {
|
||||
.card:nth-child(#{$i}) .card-footer {
|
||||
background-image: url("../img/cards/3col-#{nth($gs-cards, $i)}.svg");
|
||||
@@ -61,6 +57,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.cta {
|
||||
position: absolute;
|
||||
&-top-left {
|
||||
@@ -77,7 +74,7 @@
|
||||
.landing-bg {
|
||||
opacity: 0.6;
|
||||
@include media-breakpoint-up(md) {
|
||||
opacity: 1;
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -95,7 +92,7 @@
|
||||
background-position-y: top;
|
||||
opacity: 0.6;
|
||||
@include media-breakpoint-up(md) {
|
||||
opacity: 1;
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -123,9 +120,7 @@
|
||||
|
||||
#top-exchanges {
|
||||
// Vector logos
|
||||
@each $exchange in "bitstamp", "kraken", "cex-io", "liquid", "lmax",
|
||||
"bitfinex", "etoro"
|
||||
{
|
||||
@each $exchange in "bitstamp", "kraken", "cex-io", "liquid", "lmax", "bitfinex", "etoro" {
|
||||
#exch-#{$exchange} {
|
||||
content: url("../img/exchanges/#{$exchange}.svg");
|
||||
}
|
||||
@@ -175,29 +170,24 @@
|
||||
&::before {
|
||||
background-image: url(../img/backgrounds/use-cases-blue.svg);
|
||||
}
|
||||
@each $usecase in "micropayments", "wallets", "exchanges", "stablecoins",
|
||||
"nft", "defi", "cbdc"
|
||||
{
|
||||
@each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
|
||||
##{$usecase} {
|
||||
content: url("../img/icons/#{$usecase}.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@each $company,
|
||||
$card-graphic
|
||||
in (
|
||||
"bitgo": "magenta-3",
|
||||
"bitpay": "blue-green",
|
||||
"coil": "purple-blue",
|
||||
"exodus": "green",
|
||||
"forte": "light-blue-2",
|
||||
"gatehub": "orange-3",
|
||||
"ripple": "blue-light-blue",
|
||||
"towo": "purple",
|
||||
"xrpl-labs": "magenta-2",
|
||||
"xrplorer": "green-purple"
|
||||
)
|
||||
{
|
||||
@each $company,$card-graphic in (
|
||||
"bitgo": "magenta-3",
|
||||
"bitpay": "blue-green",
|
||||
"coil": "purple-blue",
|
||||
"exodus": "green",
|
||||
"forte": "light-blue-2",
|
||||
"gatehub": "orange-3",
|
||||
"ripple": "blue-light-blue",
|
||||
"towo": "purple",
|
||||
"xrpl-labs": "magenta-2",
|
||||
"xrplorer": "green-purple"
|
||||
) {
|
||||
##{$company} {
|
||||
.card-footer {
|
||||
background-image: url("../img/cards/3col-#{$card-graphic}.svg");
|
||||
@@ -282,29 +272,26 @@
|
||||
|
||||
// Ambassadors
|
||||
.page-ambassadors {
|
||||
#benefits-list {
|
||||
@each $benefits in "benefits-01", "benefits-02", "benefits-03",
|
||||
"benefits-04", "benefits-05", "benefits-06"
|
||||
{
|
||||
##{$benefits} {
|
||||
content: url("../img/ambassadors/#{$benefits}.svg");
|
||||
|
||||
#benefits-list {
|
||||
@each $benefits in "benefits-01", "benefits-02", "benefits-03", "benefits-04", "benefits-05", "benefits-06" {
|
||||
##{$benefits} {
|
||||
content: url("../img/ambassadors/#{$benefits}.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#eligibility-list {
|
||||
@each $eligibility in "eligibility-01", "eligibility-02", "eligibility-03",
|
||||
"eligibility-04", "eligibility-05"
|
||||
{
|
||||
##{$eligibility} {
|
||||
content: url("../img/ambassadors/#{$eligibility}.svg");
|
||||
|
||||
#eligibility-list {
|
||||
@each $eligibility in "eligibility-01", "eligibility-02", "eligibility-03", "eligibility-04", "eligibility-05" {
|
||||
##{$eligibility} {
|
||||
content: url("../img/ambassadors/#{$eligibility}.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button has link out arrow.
|
||||
// Button has link out arrow.
|
||||
.btn {
|
||||
padding: 0.75rem;
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
@@ -329,47 +316,48 @@
|
||||
background-position: left 4px bottom 4px;
|
||||
}
|
||||
|
||||
|
||||
#container-scroll {
|
||||
height: 160px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height:160px;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
|
||||
.photobanner {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
overflow:hidden;
|
||||
white-space: nowrap;
|
||||
animation: bannermove 40s linear infinite;
|
||||
}
|
||||
|
||||
.photobanner-bottom {
|
||||
top: 112px;
|
||||
top:112px;
|
||||
}
|
||||
|
||||
.photobanner img {
|
||||
margin: 0 0.5em;
|
||||
|
||||
.photobanner img {
|
||||
margin: 0 0.5em
|
||||
}
|
||||
|
||||
|
||||
@keyframes bannermove {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Sliding Quotes
|
||||
#carouselSlidesOnly {
|
||||
// Sliding Quotes
|
||||
#carouselSlidesOnly{
|
||||
height: 392px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
#carouselSlidesOnly {
|
||||
#carouselSlidesOnly{
|
||||
height: 320px;
|
||||
margin-bottom: 104px;
|
||||
}
|
||||
@@ -378,7 +366,7 @@
|
||||
h6 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
// Arrow links after text
|
||||
// Arrow links after text
|
||||
.btn-arrow::after {
|
||||
display: inline-block;
|
||||
content: url(../img/icons/arrow-right-purple.svg);
|
||||
@@ -397,6 +385,7 @@
|
||||
background-position: left 4px bottom 4px;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Community Page
|
||||
@@ -414,12 +403,12 @@
|
||||
// Events page
|
||||
.page-events {
|
||||
#event-hero-image {
|
||||
height: 100%;
|
||||
min-height: 209px;
|
||||
background: url(../img/events/event-hero1@2x.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
min-height: 209px;
|
||||
background: url(../img/events/event-hero1@2x.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
#events-orange {
|
||||
position: absolute;
|
||||
@@ -428,107 +417,108 @@
|
||||
}
|
||||
|
||||
.event-hero {
|
||||
color: $gray-100;
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
color: $gray-100;
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.event-save-date {
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.event-small-gray {
|
||||
color: $gray-400;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
max-width: 311px;
|
||||
margin: 32px auto;
|
||||
transition: all 0.35s ease-out;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-clip: border-box;
|
||||
|
||||
background-color: $card-bg;
|
||||
box-shadow: 0px 5px 40px $black;
|
||||
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 8px;
|
||||
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: $gray-200;
|
||||
|
||||
.event-card-header {
|
||||
max-width: 311px;
|
||||
margin: 32px auto;
|
||||
transition: all 0.35s ease-out;
|
||||
position: relative;
|
||||
height: 176px;
|
||||
background-size: contain !important;
|
||||
width: 100%;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-clip: border-box;
|
||||
|
||||
.event-card-title {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
padding: 0 32px;
|
||||
color: $gray-100;
|
||||
background-color: $card-bg;
|
||||
box-shadow: 0px 5px 40px $black;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 8px;
|
||||
|
||||
.event-card-body {
|
||||
padding: 32px;
|
||||
}
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: $gray-200;
|
||||
|
||||
.event-card-footer {
|
||||
padding: 0 32px 32px;
|
||||
}
|
||||
.event-card-header {
|
||||
position: relative;
|
||||
height: 176px;
|
||||
background-size: contain !important;
|
||||
width: 100%;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.event-card-footer .icon::before {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
content: "";
|
||||
margin-right: 8px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.event-card-title {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
padding: 0 32px;
|
||||
color: $gray-100;
|
||||
|
||||
.icon-date::before {
|
||||
background: url(../img/events/event-date.svg);
|
||||
}
|
||||
.icon-location::before {
|
||||
background: url(../img/events/event-location.svg);
|
||||
}
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.event-card-body {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.event-card-footer {
|
||||
padding: 0 32px 32px;
|
||||
}
|
||||
|
||||
.event-card-footer .icon::before {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
content: "";
|
||||
margin-right: 8px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.icon-date::before {
|
||||
background: url(../img/events/event-date.svg);
|
||||
}
|
||||
.icon-location::before {
|
||||
background: url(../img/events/event-location.svg);
|
||||
}
|
||||
} //end event card
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.event-card {
|
||||
max-width: 347px;
|
||||
margin: 32px;
|
||||
}
|
||||
.event-card-header {
|
||||
height: 197px !important;
|
||||
}
|
||||
.event-card {
|
||||
max-width: 347px;
|
||||
margin: 32px;
|
||||
}
|
||||
.event-card-header {
|
||||
height: 197px !important;
|
||||
}
|
||||
}
|
||||
|
||||
a.event-card:hover {
|
||||
transform: translateY(-16px);
|
||||
text-decoration: none;
|
||||
transform: translateY(-16px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
padding-left: 8px;
|
||||
color: $white;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.events-filter h6 {
|
||||
@@ -545,7 +535,7 @@
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
|
||||
content: "";
|
||||
background: $blue-purple-500;
|
||||
border-radius: 4px;
|
||||
@@ -554,17 +544,17 @@
|
||||
border-style: solid;
|
||||
border-color: $blue-purple-500;
|
||||
}
|
||||
|
||||
|
||||
.events-filter[type="checkbox"]::after {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
|
||||
top: -20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
|
||||
content: "";
|
||||
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
border-radius: 4px;
|
||||
@@ -572,11 +562,11 @@
|
||||
border-style: solid;
|
||||
border-color: $blue-purple-500;
|
||||
}
|
||||
|
||||
|
||||
// .events-filter[type="checkbox"]:disabled::after {
|
||||
// -webkit-filter: opacity(0.4);
|
||||
// }
|
||||
|
||||
|
||||
.events-filter[type="checkbox"]:checked::after {
|
||||
background-image: url(../img/events/event-check.svg);
|
||||
background-repeat: no-repeat;
|
||||
@@ -586,7 +576,7 @@
|
||||
border-color: $blue-purple-500;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.events-filter[type="checkbox"]:not(:disabled):checked:hover::after {
|
||||
background-image: url(../img/events/event-check.svg);
|
||||
background-repeat: no-repeat;
|
||||
@@ -596,7 +586,7 @@
|
||||
border-color: $blue-purple-500;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.events-filter[type="checkbox"]:not(:disabled):hover::after {
|
||||
background: $blue-purple-600;
|
||||
border-width: 1px;
|
||||
@@ -604,7 +594,7 @@
|
||||
border-color: $blue-purple-600;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.events-filter[type="checkbox"]:not(:disabled):hover::before {
|
||||
background: $blue-purple-600;
|
||||
border-width: 1px;
|
||||
@@ -612,8 +602,14 @@
|
||||
border-color: $blue-purple-600;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#find-us-on-platforms .card-deck {
|
||||
.card:nth-child(1) .card-footer {
|
||||
background-image: url(../img/cards/4col-light-blue-3.svg);
|
||||
@@ -640,11 +636,14 @@
|
||||
background-image: url(../img/cards/4col-orange-2.svg);
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.page-faq {
|
||||
&::before {
|
||||
background-image: url(../img/backgrounds/faq-bg.svg);
|
||||
@@ -762,6 +761,7 @@
|
||||
right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -773,12 +773,12 @@
|
||||
.center-search {
|
||||
.input-group-text {
|
||||
height: 56px;
|
||||
padding: 0.75rem 0.75rem 0.75rem 1rem;
|
||||
padding: .75rem .75rem .75rem 1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.ds-input {
|
||||
height: 56px;
|
||||
padding: 0.75rem 1rem 0.75rem 0.5rem;
|
||||
padding: .75rem 1rem .75rem .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -834,6 +834,7 @@
|
||||
|
||||
.page-docs-index,
|
||||
.page-community {
|
||||
|
||||
#community-heading {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 5rem;
|
||||
@@ -855,7 +856,7 @@
|
||||
-o-transition: all 0.1s ease;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
|
||||
.one {
|
||||
top: 160px;
|
||||
left: 0%;
|
||||
@@ -876,6 +877,9 @@
|
||||
top: 120px;
|
||||
right: 0%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
#run-a-network-node .card-deck {
|
||||
@@ -901,6 +905,7 @@
|
||||
padding-bottom: 104px;
|
||||
}
|
||||
|
||||
|
||||
.text-cards {
|
||||
grid-gap: 40px;
|
||||
|
||||
@@ -915,7 +920,7 @@
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: none !important;
|
||||
}
|
||||
@@ -966,14 +971,13 @@
|
||||
padding-bottom: 208px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page-community {
|
||||
@each $platform in "github", "twitch", "stack-overflow", "twitter", "discord",
|
||||
"youtube", "devto"
|
||||
{
|
||||
@each $platform in "github", "twitch", "stack-overflow", "twitter", "discord", "youtube", "devto" {
|
||||
#platform-#{$platform} {
|
||||
content: url("../img/logos/#{$platform}.svg");
|
||||
content: url("../img/logos/#{$platform}.svg")
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1006,7 +1010,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.page-calculator {
|
||||
|
||||
.calculator-section-description {
|
||||
max-width: 458px;
|
||||
}
|
||||
@@ -1015,7 +1021,7 @@
|
||||
margin-right: 1px;
|
||||
}
|
||||
#data-selector li a {
|
||||
background: #22252b;
|
||||
background: #22252B;
|
||||
padding: 0.5rem 1.3rem;
|
||||
color: $white;
|
||||
white-space: nowrap;
|
||||
@@ -1050,7 +1056,7 @@
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: block;
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1125,7 +1131,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include media-breakpoint-up(xl){
|
||||
#data-selector li:first-child a {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
@@ -1153,12 +1159,8 @@
|
||||
margin-right: -1px;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
}
|
||||
.dot {
|
||||
height: 2px;
|
||||
@@ -1172,10 +1174,10 @@
|
||||
transform-origin: center center;
|
||||
}
|
||||
#kWh-btc-dot {
|
||||
background-color: #ff671a;
|
||||
background-color: #FF671A;
|
||||
}
|
||||
#kWh-eth-dot {
|
||||
background-color: #4f5664;
|
||||
background-color: #4F5664;
|
||||
}
|
||||
#kWh-xrp-dot {
|
||||
background-color: $primary;
|
||||
@@ -1192,7 +1194,7 @@
|
||||
|
||||
.dash:before {
|
||||
// content: url(../img/icons/dash-line.png);
|
||||
content: "|";
|
||||
content: '|';
|
||||
font-size: 7px;
|
||||
font-weight: bold;
|
||||
color: $gray-500;
|
||||
@@ -1201,22 +1203,23 @@
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
|
||||
width: 100%; /* Specific width is required for Firefox. */
|
||||
background: transparent; /* Otherwise white in Chrome */
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="range"]:focus {
|
||||
input[type=range]:focus {
|
||||
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
|
||||
}
|
||||
|
||||
input[type="range"]::-ms-track {
|
||||
input[type=range]::-ms-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user