Mortgage calculator
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

201 lines
4.0 KiB

$font-family-sans-serif: "Open Sans", sans-serif;
$border-radius: .3rem;
$brand-primary: #008245;
$modal-lg: 800px;
$modal-md: 700px;
$modal-sm: 300px;
$enable-flex: false;
$modal-backdrop-bg: rgba(100, 100, 100, 0.5);
$table-bg-accent: #fff;
@import "bower_components/bootstrap/scss/variables";
@import "bower_components/bootstrap/scss/mixins";
@import "bower_components/bootstrap/scss/custom";
@import "bower_components/bootstrap/scss/modal";
@import "bower_components/bootstrap/scss/forms";
@import "bower_components/bootstrap/scss/animation";
@import "bower_components/bootstrap/scss/tables";
// Utility classes
@import "bower_components/bootstrap/scss/utilities";
.hidden {
display: none;
}
.hidden-sm-down {
@include media-breakpoint-down(sm) {
display: none;
};
}
@mixin make-block {
//display: flex;
}
@mixin borderedcell {
border-right: 1px solid #000;
}
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: transparent;
color: #111;
}
.form-mortgage {
max-width: 450px;
input {
text-align: left;
}
border: 1px solid #333;
padding: 3em;
.note {
font-family: $font-family-sans-serif;
font-weight: 300;
padding-left: 1em;
@include make-col(3, $grid-columns);
color: #555;
font-size: $font-size-base;
padding-top: $font-size-base * 0.4;
@include make-block();
}
}
.form-name,
.form-mortgage {
background-color: #f5f5f5;
.row {
@include make-row();
}
.narrow {
@include make-col(3, $grid-columns);
@include make-block();
}
.wide {
@include make-col(5, $grid-columns);
@include make-block();
}
label {
font-family: $font-family-sans-serif;
font-weight: 400;
@extend .col-form-label;
@include make-col(6, $grid-columns);
padding-right: 1em;
text-align: right;
@include make-block();
}
label::after {
content: ':';
}
}
.modal-header {
text-align: right;
padding: 0;
border-bottom: 0;
.close {
padding: 0.1em 0.5em;
background-color: transparent;
color: #777;
font-size: 24pt;
}
}
.mod-more {
text-align: center;
font-family: $font-family-sans-serif;
font-weight: 400;
margin-top: 1.5em;
a {
text-decoration: underline;
color: #333;
}
}
.form-mortgage-heading {
font-family: $font-family-sans-serif;
text-align: center;
width: 100%;
padding-bottom: 0.5em;
border-bottom: 1px solid #333;
font-weight: 300;
letter-spacing: 3px;
}
.mortgage-btn {
font-family: $font-family-sans-serif;
font-weight: 400;
font-size: 14pt;
margin: 0 auto;
padding: 0.5em 1.5em;
@include border-radius(5px);
display: block;
background-color: $brand-primary;
}
.arrow-down {
border: solid black;
border-width: 0 1px 1px 0;
padding: 7px;
display: inline-block;
transform: rotate(45deg);
}
#nameform,
#estimations {
.modal-content {
font-family: $font-family-sans-serif;
background-color: #f5f5f5;
}
}
#estimations {
.form-mortgage-heading {
font-size: $font-size-base * 2;
}
.modal-header {
border: none;
padding-bottom: 0;
}
.modal-body {
padding-top: 0;
}
.cost-card.narrow {
@include make-col(3, $grid-columns);
@include make-block();
}
.cost {
font-family: $font-family-sans-serif;
font-weight: 400;
text-align: center;
font-size: $font-size-base * 1.3;
}
.subtitle {
padding: 0 1em;
font-family: $font-family-sans-serif;
text-align: center;
font-weight: 300;
font-size: $font-size-base * 0.9;
margin-bottom: 2em;
}
#paymentdetails {
margin-top: 2em;
width: 100%;
overflow-x: auto;
td, th {
text-align: center;
}
th {
text-transform: uppercase;
}
th.tax {
width: 25%;
}
th:nth-child(1),
th:nth-child(2),
th:nth-child(3),
td:nth-child(1),
td:nth-child(2),
td:nth-child(3) {
@include borderedcell();
}
@include media-breakpoint-up(sm) {
th:nth-child(4),
td:nth-child(4) {
@include borderedcell();
}
};
}
}