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