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

updated calculator styling for mobile

Browse Source
This commit is contained in:
Calvin Jhunjhnuwala
2020-08-31 14:00:42 -07:00
parent 60ae973546
commit 3a3b3949fb
4 changed files with 94 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
styles/_marketing.scss
View File

@@ -180,11 +180,27 @@
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;
}
}
}
@@ -214,11 +230,59 @@
margin: 0 12px;
max-width: 188px;
width: 33%;
@media only screen and (max-width: 992px) {
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;
}
}
@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 #000;
border-bottom: 1px solid #000;
}
}
@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 #000;
border-bottom: 1px solid #000;
}
}
@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;
}
}
.viz-wrapper {
position: relative;