mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-19 19:25:51 +00:00
SCSS: use breakpoint mixins, avoid tabs
This commit is contained in:
mDuo13
@@ -52,15 +52,13 @@ p + .readmore {
|
||||
font-weight: 700;
|
||||
z-index: 1000;
|
||||
color: white;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.jump-to-top {
|
||||
|
||||
&::after {
|
||||
content: " ↑"
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn.jump-to-top::after {
|
||||
content: " ↑"
|
||||
}
|
||||
|
||||
@@ -116,27 +116,28 @@ td:nth-child(1) {
|
||||
}
|
||||
.square {
|
||||
position: relative;
|
||||
flex-basis: calc(25% - 30px);
|
||||
flex-basis: calc(50% - 30px); // Mobile
|
||||
margin: 15px;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
&-50 {
|
||||
flex-basis: calc(50% - 30px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.square {
|
||||
flex-basis: calc(50% - 30px);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-basis: calc(25% - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
.square:before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
.card-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -144,7 +145,7 @@ td:nth-child(1) {
|
||||
padding: 2rem;
|
||||
background: rgba(34, 37, 43, 0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
@media (max-width: 768px) {
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
@@ -158,7 +159,7 @@ td:nth-child(1) {
|
||||
margin-left: -32px;
|
||||
transform-origin: top left;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
@include media-breakpoint-down(md) {
|
||||
.card-deck {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
form {
|
||||
input {
|
||||
background: rgba(184, 189, 199, 0.1);
|
||||
border: 1px solid #B8BDC7;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
}
|
||||
input {
|
||||
background: rgba(184, 189, 199, 0.1);
|
||||
border: 1px solid #B8BDC7;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
@@ -1,158 +1,158 @@
|
||||
/* HEIGHT AND WIDTH HELPERS */
|
||||
.h32 {
|
||||
height: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.w32 {
|
||||
width: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
.h36 {
|
||||
height: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.w36 {
|
||||
width: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
.w40 {
|
||||
width: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
.w44 {
|
||||
width: 44px;
|
||||
width: 44px;
|
||||
}
|
||||
.w48 {
|
||||
width: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
.min-vh100 {
|
||||
min-height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.vw100 {
|
||||
width: 100vw;
|
||||
min-width: 100%;
|
||||
width: 100vw;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
/* SPACING HELPERS */
|
||||
/* To create new margin classes, multiply by 4px */
|
||||
.mt-8 {
|
||||
margin-top: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.mt-9 {
|
||||
margin-top: 2.25rem;
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
.mb-9 {
|
||||
margin-bottom: 2.25rem;
|
||||
margin-bottom: 2.25rem;
|
||||
}
|
||||
.mt-10 {
|
||||
margin-top: 2.5rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
.mb-10 {
|
||||
margin-bottom: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.my-10 {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.mt-12 {
|
||||
margin-top: 3rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.mb-12 {
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.my-12 {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.mt-13 {
|
||||
margin-top: 3.25rem;
|
||||
margin-top: 3.25rem;
|
||||
}
|
||||
.mb-13 {
|
||||
margin-bottom: 3.25rem;
|
||||
margin-bottom: 3.25rem;
|
||||
}
|
||||
.mt-14 {
|
||||
margin-top: 3.5rem;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
.mt-16 {
|
||||
margin-top: 4rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.mb-16 {
|
||||
margin-bottom: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.mb-18 {
|
||||
margin-bottom: 4.5rem;
|
||||
margin-bottom: 4.5rem;
|
||||
}
|
||||
.mt-20 {
|
||||
margin-top: 5rem;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
.mb-20 {
|
||||
margin-bottom: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
.my-20 {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
.mb-30 {
|
||||
margin-bottom: 7.5rem;
|
||||
margin-bottom: 7.5rem;
|
||||
}
|
||||
.mt-30 {
|
||||
margin-top: 7.5rem;
|
||||
margin-top: 7.5rem;
|
||||
}
|
||||
.mt-40 {
|
||||
margin-top: 10rem;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
.mb-40 {
|
||||
margin-bottom: 10rem;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
.my-40 {
|
||||
margin-top: 10rem;
|
||||
margin-bottom: 10rem;
|
||||
margin-top: 10rem;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
.mb-49 {
|
||||
margin-bottom: 12.25rem;
|
||||
margin-bottom: 12.25rem;
|
||||
}
|
||||
.mb-50 {
|
||||
margin-bottom: 12.5rem;
|
||||
margin-bottom: 12.5rem;
|
||||
}
|
||||
.pt-40 {
|
||||
padding-top: 10rem;
|
||||
padding-top: 10rem;
|
||||
}
|
||||
.pb-40 {
|
||||
padding-bottom: 10rem;
|
||||
padding-bottom: 10rem;
|
||||
}
|
||||
.pb-50 {
|
||||
padding-bottom: 12.5rem;
|
||||
padding-bottom: 12.5rem;
|
||||
}
|
||||
.pt-50 {
|
||||
padding-top: 12.5rem;
|
||||
padding-top: 12.5rem;
|
||||
}
|
||||
.py-50 {
|
||||
padding-bottom: 12.5rem;
|
||||
padding-top: 12.5rem;
|
||||
padding-bottom: 12.5rem;
|
||||
padding-top: 12.5rem;
|
||||
}
|
||||
.top-10 {
|
||||
top: 2.5rem;
|
||||
top: 2.5rem;
|
||||
}
|
||||
|
||||
/* TEXT HELPERS */
|
||||
.va-middle {
|
||||
vertical-align: middle;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ls-none {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.align-items-stretch {
|
||||
align-items: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.overflow-xs {
|
||||
overflow: scroll;
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
.overflow-xs {
|
||||
overflow: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
/* COLOR ELEMENTS */
|
||||
.border-green {
|
||||
border: 1px solid $primary;
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
.grey-400 {
|
||||
color: $gray-400
|
||||
color: $gray-400
|
||||
}
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@include media-breakpoint-down(md) {
|
||||
.landing .card {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
@@ -165,7 +165,7 @@ section {
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@include media-breakpoint-down(md) {
|
||||
.landing .card-grid .card,
|
||||
.landing .card-grid .card-body,
|
||||
.landing .card-grid .card-header {
|
||||
|
||||
@@ -1,51 +1,51 @@
|
||||
/* HOME STYLINGS */
|
||||
#home-hero-marker {
|
||||
top: unset;
|
||||
bottom: 64px;
|
||||
top: unset;
|
||||
bottom: 64px;
|
||||
}
|
||||
#home-hero-marker:after {
|
||||
position: absolute;
|
||||
content: " ➝";
|
||||
box-sizing: initial;
|
||||
position: absolute;
|
||||
content: " ➝";
|
||||
box-sizing: initial;
|
||||
animation: arrowDance 1.2s infinite;
|
||||
}
|
||||
#bg-home-1 {
|
||||
background-image: url(../../img/graphics/home-bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../../img/graphics/home-bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 90%;
|
||||
background-position: 90px -180px;
|
||||
}
|
||||
@media only screen and (max-width: 992px) {
|
||||
#bg-home-1 {
|
||||
background-size: cover;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
#bg-home-1 {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.hc {
|
||||
background: black;
|
||||
padding: 2.25rem 1.875rem 7.75rem;
|
||||
color: $white;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 70px;
|
||||
@media (max-width: 991px) {
|
||||
padding-left: 2rem !important;
|
||||
}
|
||||
background: black;
|
||||
padding: 2.25rem 1.875rem 7.75rem;
|
||||
color: $white;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 70px;
|
||||
@include media-breakpoint-down(md) {
|
||||
padding-left: 2rem !important;
|
||||
}
|
||||
}
|
||||
.hc .h2 {
|
||||
height: 38px;
|
||||
padding-bottom: 5rem;
|
||||
height: 38px;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
#hc-1 {
|
||||
background-image: url(../../img/graphics/hc-1.png);
|
||||
border: 1px solid #FAFF1A;
|
||||
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;
|
||||
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;
|
||||
background-image: url(../../img/graphics/hc-3.png);
|
||||
border: 1px solid #974CFF;
|
||||
}
|
||||
@keyframes arrowDance {
|
||||
0% { padding-left: 7px; }
|
||||
@@ -57,49 +57,49 @@
|
||||
|
||||
|
||||
#hero-impact {
|
||||
width: 100vw;
|
||||
width: 100vw;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
@include media-breakpoint-up(md) {
|
||||
#hero-impact {
|
||||
margin-top: -120px;
|
||||
}
|
||||
margin-top: -120px;
|
||||
}
|
||||
}
|
||||
#page-impact-bg {
|
||||
background-image: url(../img/backgrounds/bg-impact-top.png);
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../img/backgrounds/bg-impact-top.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 250px;
|
||||
background-size: contain;
|
||||
}
|
||||
#page-business-bg {
|
||||
background-image: url(../img/backgrounds/bg-business-mid.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 72.5%;
|
||||
background-image: url(../img/backgrounds/bg-business-mid.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 72.5%;
|
||||
}
|
||||
#page-business-top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#page-business-bot {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: -505px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: -505px;
|
||||
z-index: -1;
|
||||
}
|
||||
#page-exchanges-bg {
|
||||
background-image: url(../img/backgrounds/bg-exchanges-top.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 25%;
|
||||
background-image: url(../img/backgrounds/bg-exchanges-top.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 25%;
|
||||
}
|
||||
#page-exchanges-bot {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: -446px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: -446px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.page-wallets {
|
||||
#main_content_body {
|
||||
background: url(../img/backgrounds/bg-wallets-bot.png) bottom right no-repeat;
|
||||
background: url(../img/backgrounds/bg-wallets-bot.png) bottom right no-repeat;
|
||||
}
|
||||
|
||||
.fullwidth-bg {
|
||||
@@ -108,33 +108,33 @@
|
||||
}
|
||||
|
||||
#page-wallets-bot {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: -778px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: -778px;
|
||||
z-index: -1;
|
||||
}
|
||||
#page-contribute-bot {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: -199px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: -199px;
|
||||
z-index: -1;
|
||||
}
|
||||
#page-overview-bg {
|
||||
background-image: url(../img/backgrounds/bg-overview-top.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0;
|
||||
background-image: url(../img/backgrounds/bg-overview-top.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0;
|
||||
}
|
||||
|
||||
#page-history-bg {
|
||||
background-image: url(../img/backgrounds/bg-history-mid.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 60%;
|
||||
background-image: url(../img/backgrounds/bg-history-mid.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 60%;
|
||||
}
|
||||
|
||||
#page-history-top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 302px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 302px;
|
||||
}
|
||||
|
||||
.sustainability-bg {
|
||||
@@ -155,150 +155,150 @@
|
||||
.page-calculator {
|
||||
/* CALCULATOR STYLING */
|
||||
#data-selector li a {
|
||||
background: #22252B;
|
||||
padding: 0.5rem 1.3rem;
|
||||
color: $white;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
background: #22252B;
|
||||
padding: 0.5rem 1.3rem;
|
||||
color: $white;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: -7px;
|
||||
margin-right: -7px;
|
||||
margin-left: -7px;
|
||||
margin-right: -7px;
|
||||
}
|
||||
#data-selector li.active a {
|
||||
background: $primary;
|
||||
color: $black;
|
||||
background: $primary;
|
||||
color: $black;
|
||||
}
|
||||
.tab-content div {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.d-output {
|
||||
display: none;
|
||||
margin: 0 12px;
|
||||
max-width: 188px;
|
||||
width: 33%;
|
||||
@media only screen and (max-width: 992px) {
|
||||
width: auto;
|
||||
}
|
||||
display: none;
|
||||
margin: 0 12px;
|
||||
max-width: 188px;
|
||||
width: 33%;
|
||||
@include media-breakpoint-down(md) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.d-output.active {
|
||||
display: block;
|
||||
animation-fill-mode: forwards;
|
||||
animation: fadeIn 1s ease-in-out;
|
||||
@media only screen and (max-width: 992px) {
|
||||
display: inline-block;
|
||||
}
|
||||
display: block;
|
||||
animation-fill-mode: forwards;
|
||||
animation: fadeIn 1s ease-in-out;
|
||||
@include media-breakpoint-down(md) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 576px) and (max-width: 1200px){
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-top: 1px solid $black;
|
||||
border-bottom: 1px solid $black;
|
||||
}
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-top: 1px solid $black;
|
||||
border-bottom: 1px solid $black;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 576px) {
|
||||
.d-output {
|
||||
display: none;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.viz-wrapper {
|
||||
margin-bottom: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.d-output[data-comp="kWh"].active {
|
||||
display: inline-flex;
|
||||
}
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-top: 1px solid $black;
|
||||
border-bottom: 1px solid $black;
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
.d-output {
|
||||
display: none;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.viz-wrapper {
|
||||
margin-bottom: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.d-output[data-comp="kWh"].active {
|
||||
display: inline-flex;
|
||||
}
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-top: 1px solid $black;
|
||||
border-bottom: 1px solid $black;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 992px) {
|
||||
#calculator-inputs-offset.offset {
|
||||
height: 248px;
|
||||
width: 100%;
|
||||
}
|
||||
#calculator-inputs-offset {
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.d-output {
|
||||
margin: 16px;
|
||||
}
|
||||
#calculator-mobile-toggle.show {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 9999999;
|
||||
}
|
||||
#calculator-mobile-toggle.hide {
|
||||
display: none;
|
||||
}
|
||||
#calculator-inputs.sticky {
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
width: calc(100% - 30px);
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
background: $black;
|
||||
display: none;
|
||||
}
|
||||
#calculator-inputs.sticky.show .calc-inputs-wrapper {
|
||||
display: block;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#calculator-inputs.sticky.show {
|
||||
display: block;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
#calculator-inputs-offset.offset {
|
||||
height: 248px;
|
||||
width: 100%;
|
||||
}
|
||||
#calculator-inputs-offset {
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.d-output {
|
||||
margin: 16px;
|
||||
}
|
||||
#calculator-mobile-toggle.show {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 9999999;
|
||||
}
|
||||
#calculator-mobile-toggle.hide {
|
||||
display: none;
|
||||
}
|
||||
#calculator-inputs.sticky {
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
width: calc(100% - 30px);
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
background: $black;
|
||||
display: none;
|
||||
}
|
||||
#calculator-inputs.sticky.show .calc-inputs-wrapper {
|
||||
display: block;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#calculator-inputs.sticky.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.viz-wrapper {
|
||||
position: relative;
|
||||
height: 204px;
|
||||
width: 184px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
height: 204px;
|
||||
width: 184px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.viz-wrapper img {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
}
|
||||
.dot {
|
||||
height: 2px;
|
||||
width: 2px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 98px;
|
||||
left: 68px;
|
||||
transform-origin: center center;
|
||||
height: 2px;
|
||||
width: 2px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 98px;
|
||||
left: 68px;
|
||||
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;
|
||||
background-color: $primary;
|
||||
}
|
||||
#kWh-pap-dot {
|
||||
}
|
||||
|
||||
.dash:before {
|
||||
content: url(../img/icons/dash-line.png);
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
margin-left: 13px;
|
||||
content: url(../img/icons/dash-line.png);
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
|
||||
@@ -359,8 +359,8 @@
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
}
|
||||
input[type="range"] {
|
||||
background: $primary;
|
||||
height: 3px;
|
||||
background: $primary;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/** FF*/
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
/* TABLE STYLING */
|
||||
.dblue {
|
||||
color: #656E81;
|
||||
color: #656E81;
|
||||
}
|
||||
#table-overview {
|
||||
td:nth-child(1){
|
||||
width: 40%;
|
||||
}
|
||||
td:nth-child(1){
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
#calculator-table {
|
||||
width: 100%;
|
||||
thead {
|
||||
border-bottom: 3px solid $white;
|
||||
}
|
||||
td {
|
||||
padding: 0.25rem 0.5rem;
|
||||
line-height: 1;
|
||||
@media only screen and (max-width: 768px) {
|
||||
font-size: $base-size;
|
||||
}
|
||||
}
|
||||
tbody td {
|
||||
padding: 2rem 0.5rem;
|
||||
}
|
||||
tbody tr {
|
||||
border-bottom: 1px solid $white;
|
||||
}
|
||||
td:first-child{
|
||||
width: 40%;
|
||||
}
|
||||
.ratio {
|
||||
font-size: .075rem;
|
||||
color: #656E81;
|
||||
}
|
||||
@media only screen and (max-width: 992px) {
|
||||
.ratio {
|
||||
display: block;
|
||||
}
|
||||
table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
table .fs-5-5 {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
table .fs-6 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
table td:first-child {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
width: 100%;
|
||||
thead {
|
||||
border-bottom: 3px solid $white;
|
||||
}
|
||||
td {
|
||||
padding: 0.25rem 0.5rem;
|
||||
line-height: 1;
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: $base-size;
|
||||
}
|
||||
}
|
||||
tbody td {
|
||||
padding: 2rem 0.5rem;
|
||||
}
|
||||
tbody tr {
|
||||
border-bottom: 1px solid $white;
|
||||
}
|
||||
td:first-child{
|
||||
width: 40%;
|
||||
}
|
||||
.ratio {
|
||||
font-size: .075rem;
|
||||
color: #656E81;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
.ratio {
|
||||
display: block;
|
||||
}
|
||||
table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
table .fs-5-5 {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
table .fs-6 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
table td:first-child {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
line-height: 125%;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
@include media-breakpoint-down(md) {
|
||||
.wrap-button {
|
||||
padding: 1.5rem 0;
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
}
|
||||
}
|
||||
// Desktop version
|
||||
@media(min-width: 992px) {
|
||||
@include media-breakpoint-up(lg) {
|
||||
.dropdown-toggle::after {
|
||||
border-width: 0;
|
||||
top: 80%;
|
||||
@@ -148,7 +148,7 @@
|
||||
|
||||
// Search bar & controls -----------------------------------------------------
|
||||
#navbar-search {
|
||||
@media(min-width: 992px) {
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: static; // allows search bar to be positioned screen-center
|
||||
.dropdown-toggle {
|
||||
position: relative;
|
||||
@@ -227,7 +227,7 @@
|
||||
}
|
||||
|
||||
// Mobile --------------------------------------------------------------------
|
||||
@media (max-width: 991px) {
|
||||
@include media-breakpoint-down(md) {
|
||||
.navbar-brand {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user