$blue: #293138;
$orange: #F49C24;
$lightgrey: #EEE;
$midgrey: #DDD;
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
// Utilities
.btn {
border: none;
text-transform: uppercase;
cursor: pointer;
font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
font-weight: 600;
transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
padding: 0;
background: transparent;
&--primary {
background: $orange;
color: #fff;
padding: 1.5rem 2.5rem;
font-size: 3rem;
&:hover {
background: $blue;
}
}
&--secondary {
background: transparent;
color: $blue;
padding: 1.5rem 2.5rem;
font-size: 2rem;
text-decoration: underline;
&:hover {
background: transparent;
color: $orange;
}
}
&--first {
padding-left: 0;
}
&--right {
margin-left: auto;
padding-right: 0;
}
&--tertiary {
background: $orange;
color: #fff;
padding: 1.5rem 2.5rem;
font-size: 2rem;
&:hover {
background: $blue;
}
}
}
html {
font-size: 2vw;
font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
font-weight: 400;
@media (min-width: 280px) {
font-size: 6px;
}
@media (min-width: 400px) {
font-size: 7px;
}
@media (min-width: 768px) {
font-size: 8px;
}
@media (min-width: 1024px) {
font-size: 8px;
}
@media (min-width: 1920px) {
font-size: 9px;
}
}
.header {
width: 100%;
position: relative;
&__logo {
width: 13 * 0.75rem;
height: 11 * 0.75rem;
margin: 2rem;
position: absolute;
z-index: 1;
top: 0;
left: 0;
z-index: 9;
}
&__menubar {
background: $blue;
padding: 1.75rem;
padding-left: 13 * 0.75rem + 1.75rem + 1.75rem; //to clear the logo
width: 100%;
display: block;
text-align: right;
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
z-index: 6;
height: 6.35rem; //magic number to align with logo
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $blue;
z-index: -1;
}
&--secondary {
background: #fff;
z-index: 3;
&:before {
background: #fff;
}
}
}
}
.optionsmenu {
color: #fff;
font-size: 2rem;
text-transform: uppercase;
padding-left: 2rem;
&__toggle {
color: #fff;
font-size: 2rem;
background: none;
padding: 0;
&:hover, .active & {
color: $orange;
}
@media (min-width: 1440px) {
display: none;
}
}
&__menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
z-index: -2;
padding: 0.75rem 1.75rem;
padding-left: 13.25rem;
transform: translate3d(0,-100%,0);
transition: transform 0.3s ease;
font-size: 2rem;
.active & {
transform: translate3d(0,0,0);
}
@media (min-width: 768px) {
display: flex;
justify-content: flex-end;
}
@media (min-width: 1440px) {
position: static;
width: auto;
background: none;
z-index: initial;
padding: 0;
transform: translate3d(0,0,0);
}
}
&__btn {
padding: 1rem 0;
font-size: 2rem;
@media (min-width: 768px) {
margin-left: 3rem;
}
@media (min-width: 1440px) {
padding: 0;
color: #fff;
}
&:hover {
color: $orange;
}
}
}
.primarymenu {
color: #fff;
font-size: 2rem;
text-transform: uppercase;
position: fixed;
left: 0;
bottom: 0;
z-index: 3;
width: 100%;
display: flex;
@media (min-width: 768px) {
position: static;
display: block;
width: auto;
}
&__btn {
color: #fff;
font-size: 2rem;
background: $blue;
padding: 2rem;
width: 50%;
text-align: center;
&:hover {
color: $orange;
}
&--main {
background: $orange;
&:hover {
color: $blue;
}
}
@media (min-width: 768px) {
background: none;
margin-left: 3rem;
padding: 0;
width: auto;
text-align: left;
&--main {
color: $orange;
}
&:hover {
color: $orange;
}
}
}
}
.toolsmenu {
color: $blue;
font-size: 2rem;
text-transform: uppercase;
padding-left: 2rem;
&__toggle {
color: $blue;
font-size: 2rem;
background: none;
padding: 0;
&:hover, .active & {
color: $orange;
}
@media (min-width: 1440px) {
display: none;
}
}
&__menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
z-index: -2;
padding: 0.75rem 1.75rem;
transform: translate3d(0,-100%,0);
transition: transform 0.3s ease;
font-size: 2rem;
.active & {
transform: translate3d(0,0,0);
}
@media (min-width: 768px) {
display: flex;
justify-content: flex-end;
align-items: center;
}
@media (min-width: 1440px) {
position: static;
width: auto;
background: none;
z-index: initial;
padding: 0;
transform: translate3d(0,0,0);
}
}
&__zoom {
display: flex;
align-items: center;
padding-left: 2.5rem;
justify-content: flex-end;
i {
margin: 0 0.5rem;
}
}
&__btn {
padding: 1rem 0;
font-size: 2rem;
@media (min-width: 768px) {
margin-left: 3rem;
}
@media (min-width: 1440px) {
padding: 0;
}
&:hover, &.enabled {
color: $orange;
}
}
}
.search {
color: $blue;
font-size: 2rem;
text-transform: uppercase;
padding-left: 2rem;
&__toggle {
color: $blue;
font-size: 2rem;
background: none;
padding: 0;
&:hover, .active & {
color: $orange;
}
@media (min-width: 1550px) {
display: none;
}
}
&__label {
&--small {
font-size: 1rem;
@media (min-width: 400px) {
font-size: 1.5rem;
}
}
}
&__content {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
z-index: -2;
padding: 0.75rem 1.75rem 1.75rem;
transform: translate3d(0,-100%,0);
transition: transform 0.3s ease;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: flex-end;
.active & {
transform: translate3d(0,0,0);
}
@media (min-width: 1550px) {
position: relative;
top: -33%;
width: auto;
background: none;
z-index: initial;
padding: 0;
transform: translate3d(0,0,0);
}
}
&__input {
padding: 1rem;
font-size: 2rem;
border: 1px solid $lightgrey;
font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
font-weight: 400;
margin: 0 0 0 1rem;
background: #fff;
width: 25rem;
}
&__clear {
padding: 1rem 1.5rem;
font-size: 2rem;
font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
font-weight: 400;
margin: 0 1rem 0 0;
background: $orange;
color: #fff;
border: 1px solid $orange;
&:hover {
background-color: $blue;
border-color: $blue;
}
}
}
.rangemenu {
color: $blue;
font-size: 2rem;
text-transform: uppercase;
width: 100%;
padding: 1.75rem;
&__toggle {
color: $blue;
font-size: 2rem;
background: none;
padding: 0;
width: 100%;
text-align: left;
span {
float: right;
display: none; //clashes with caret on small screens
@media (min-width: 768px) {
display: block;
}
}
&:hover, .active > & {
color: $orange;
}
}
&.active span i {
transform: rotate(180deg);
}
&__menu {
width: 100%;
transition: max-height 0.3s ease;
font-size: 2rem;
max-height: 0;
overflow: hidden;
.active > & {
max-height: 25rem; //magic number to show 3 select items
}
li {
display: flex;
align-items: baseline;
@media (min-width: 768px) {
display: block;
}
}
}
&__btn {
padding: 1rem 0;
font-size: 2rem;
@media (min-width: 768px) {
margin-left: 3rem;
}
@media (min-width: 1440px) {
padding: 0;
}
&:hover {
color: $orange;
}
}
&__label {
padding: 1rem;
width: 40%;
display: block;
text-align: right;
@media (min-width: 768px) {
width: 100%;
text-align: left;
padding: 0.5rem;
padding-left: 0;
margin-top: 1rem;
font-size: 1.5rem;
}
@media (min-width: 1024px) {
font-size: 2rem;
}
}
&__select {
padding: 1rem;
font-size: 2rem;
border: 1px solid $lightgrey;
font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
font-weight: 400;
margin: 2rem 0 0;
width: 60%;
background: #fff;
display: block;
@media (min-width: 768px) {
margin: 0;
width: 100%;
font-size: 1.5rem;
padding: 0.5rem;
}
@media (min-width: 1024px) {
font-size: 2rem;
}
}
}
.sidemenu {
width: 100%;
background: $lightgrey;
height: calc(100vh - 13rem);
position: absolute;
left: 0;
z-index: 2;
transform: translate3d(-100%,0,0);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
&.active {
transform: translate3d(0,0,0);
}
@media (min-width: 768px) {
width: 40%;
}
@media (min-width: 1024px) {
width: 30%;
max-width: 50rem;
}
&__toggle {
position: absolute;
top: 0;
right: 0;
background: $blue;
color: #fff;
font-size: 2rem;
transform: translate3d(100%,0,0);
padding: 0.25rem 1rem;
&:hover {
color: $orange;
}
.active & {
transform: rotate(180deg);
}
@media (min-width: 768px) {
right: auto;
left: 100%;
transform: translate3d(0,0,0);
}
}
}
.mainmenu {
&__step {
background: $blue;
color: #fff;
font-size: 2rem;
width: 100%;
display: block;
text-align: left;
padding: 1.75rem;
i {
float: right;
}
&.active i {
transform: rotate(180deg);
}
&:hover, &.active {
color: $orange;
}
}
&__options {
max-height: 0;
overflow: hidden;
.active + & {
max-height: none;
}
}
li {
border-top: 1px solid $lightgrey;
}
}
.category {
width: 100%;
display: flex;
flex-wrap: wrap;
background: #fff;
overflow: hidden;
overflow-y: auto;
max-height: calc(100vh - 51rem); //magic number based on 4 steps
@media (min-width: 400px) {
max-height: calc(100vh - 51rem); //magig number based on 4 steps
}
@media (min-width: 768px) {
max-height: calc(100vh - 44rem); //magic number based on 4 steps
}
@media (min-width: 1024px) {
max-height: calc(100vh - 44rem); //magic number based on 4 steps
}
li {
width: 25%;
text-align: center;
padding: 1.75rem;
border: none;
@media (min-width: 768px) {
width: 33.33%;
}
}
&__img {
display: block;
margin: 0 auto 1rem;
max-width: 75%;
height: auto;
@media (min-width: 768px) {
max-width: 90%;
}
}
&__label {
font-size: 2rem;
@media (min-width: 768px) {
font-size: 1.5rem;
}
}
}
.modalbg {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
transition: opacity 0.3s ease;
opacity: 0;
z-index: 10;
&.active {
display: block;
opacity: 1;
}
}
.modal {
display: none;
position: absolute;
width: calc(100vw - 10rem);
top: 5rem;
left: 5rem;
margin-bottom: 5rem;
background: #fff;
transition: opacity 0.3s ease;
opacity: 0;
color: $blue;
text-align: left;
padding: 2rem;
z-index: 10;
h2 {
font-size: 3rem;
line-height: 1.25;
margin: 0 0 2rem;
font-weight: 600;
text-transform: uppercase;
width: 100%;
}
p {
font-size: 2rem;
line-height: 1.25;
margin: 0;
width: 100%;
}
@media (min-width: 768px) {
left: 50%;
transform: translateX(-50%);
padding: 4rem;
max-width: 100rem;
}
@media (min-width: 1024px) {
padding: 6rem;
}
&--narrow {
@media (min-width: 1024px) {
max-width: 60rem;
}
}
&.active {
display: block;
opacity: 1;
}
&__close {
position: absolute;
top: 0;
right: 0;
transform: translate3d(50%,-50%,0);
border: none;
padding: 1rem;
background: $blue;
color: #fff;
font-weight: 600;
font-size: 2rem;
cursor: pointer;
&:hover {
background: $orange;
}
}
&__cols {
display: flex;
flex-wrap: wrap;
margin-bottom: 2rem;
align-items: center;
&:last-child {
margin-bottom: 0;
}
}
&__col {
width: 100%;
padding-right: 2rem;
@media (min-width: 768px) {
width: 50%;
&:last-child {
padding-right: 0;
padding-left: 2rem;
}
}
}
&__button-group {
margin: 2rem 0 0;
}
&__label {
font-size: 2rem;
padding: 1rem;
display: block;
text-transform: uppercase;
width: 100%;
@media (min-width: 768px) {
padding: 0.5rem;
padding-left: 0;
margin-top: 1rem;
font-size: 1.5rem;
}
@media (min-width: 1024px) {
font-size: 2rem;
}
&--inline {
width: auto;
display: inline-block;
}
}
&__select {
padding: 1rem;
font-size: 2rem;
border: 1px solid $midgrey;
font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
font-weight: 400;
margin: 2rem 0 0;
width: 100%;
background: #fff;
display: block;
@media (min-width: 768px) {
margin: 0;
font-size: 1.5rem;
padding: 0.5rem;
}
@media (min-width: 1024px) {
font-size: 2rem;
}
}
}
img {
max-width: 100%;
height: auto;
}
.pan360 {
background: $midgrey;
text-align: center;
width: 100%;
height: 40rem;
font-size: 2rem;
align-items: center;
justify-content: center;
p {
width: 100%;
}
}
.full-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 3;
display: none;
border-top: 1px solid $midgrey;
&.active {
display: block;
}
&__wrap {
margin: 12rem 0;
border-top: 1px solid $midgrey;
width: 100%;
}
&__container {
margin: 0 auto;
width: 100%;
max-width: 160rem;
padding: 2rem;
font-size: 2rem;
@media (min-width: 768px) {
padding: 4rem;
}
@media (min-width: 1024px) {
padding: 6rem;
}
}
h2 {
font-size: 3rem;
line-height: 1.25;
font-weight: 600;
text-transform: uppercase;
margin: 0;
}
h3 {
font-size: 2rem;
line-height: 1.25;
font-weight: 600;
text-transform: uppercase;
margin: 0;
}
p {
font-size: 2rem;
line-height: 1.25;
margin: 0;
}
&__head {
display: flex;
align-items: center;
margin: 0 0 4rem;
text-transform: uppercase;
span {
margin-left: 2rem;
}
}
&__actions {
margin-left: auto;
}
}
.item-breakdown {
&__table {
width: 100%;
border-bottom: 1px solid $midgrey;
.btn {
padding: 0;
margin-left: 2rem;
}
th {
border-bottom: 1px solid $midgrey;
text-transform: uppercase;
}
td, th {
padding: 0.75rem;
text-align: left;
&:nth-child(1) {
width: 5%;
text-align: center;
}
&:nth-child(2) {
width: 20%;
}
&:nth-child(3) {
width: 25%;
}
&:nth-child(4) {
width: 15%;
text-align: right;
}
&:nth-child(5) {
width: 15%;
text-align: right;
}
&:nth-child(6) {
width: 20%;
text-align: right;
}
}
}
&__options {
display: flex;
margin-top: 2rem;
}
&__accessories {
width: 20%;
margin-right: 35%;
p {
display: flex;
margin: 1rem 0;
}
label {
width: 50%;
display: block;
padding: 1rem;
font-size: 2rem;
@media (min-width: 768px) {
font-size: 1.5rem;
padding: 0.5rem;
}
@media (min-width: 1024px) {
font-size: 2rem;
}
}
input {
display: block;
padding: 1rem;
font-size: 2rem;
border: 1px solid $lightgrey;
font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
font-weight: 400;
background: #fff;
display: block;
width: 8rem;
@media (min-width: 768px) {
font-size: 1.5rem;
padding: 0.5rem;
}
@media (min-width: 1024px) {
font-size: 2rem;
}
}
}
&__totals {
width: 25%;
h3 {
display: flex;
justify-content: space-between;
padding: 0 0.75rem 0 0;
}
p {
display: flex;
margin: 1rem 0;
justify-content: space-between;
}
label, span {
width: 50%;
display: block;
padding: 1rem;
font-size: 2rem;
@media (min-width: 768px) {
font-size: 1.5rem;
padding: 0.5rem;
}
@media (min-width: 1024px) {
font-size: 2rem;
}
}
span {
text-align: right;
}
input {
display: block;
padding: 1rem;
font-size: 2rem;
border: 1px solid $lightgrey;
font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
font-weight: 400;
background: #fff;
display: block;
width: 12rem;
text-align: right;
@media (min-width: 768px) {
font-size: 1.5rem;
padding: 0.5rem;
}
@media (min-width: 1024px) {
font-size: 2rem;
}
}
}
h3 {
border-bottom: 1px solid $midgrey;
padding-bottom: 2rem;
}
&__total {
color: $orange;
font-weight: 600;
text-transform: uppercase;
}
}
.newplan {
display: flex;
align-items: flex-end;
&__col {
width: 25%;
padding: 0 3rem 0 0;
&:last-child {
padding: 0;
}
}
&__label {
font-size: 2rem;
padding: 1rem;
display: block;
text-transform: uppercase;
width: 100%;
@media (min-width: 768px) {
padding: 0.5rem;
padding-left: 0;
margin-top: 1rem;
font-size: 1.5rem;
}
@media (min-width: 1024px) {
font-size: 2rem;
}
&--inline {
width: auto;
display: inline-block;
}
}
&__select {
padding: 1rem;
font-size: 2rem;
border: 1px solid $midgrey;
font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
font-weight: 400;
margin: 2rem 0 0;
width: 100%;
background: #fff;
display: block;
@media (min-width: 768px) {
margin: 0;
font-size: 1.5rem;
padding: 0.5rem;
}
@media (min-width: 1024px) {
font-size: 2rem;
}
}
}
.loadplan {
margin: 4rem 0 0;
&__table {
width: 100%;
border-bottom: 1px solid $midgrey;
.btn {
padding: 0;
margin-left: 2rem;
}
th {
border-bottom: 1px solid $midgrey;
text-transform: uppercase;
}
td, th {
padding: 0.75rem;
text-align: left;
&:nth-child(1) {
width: 15%;
}
&:nth-child(2) {
width: 15%;
}
&:nth-child(3) {
width: 25%;
}
&:nth-child(4) {
width: 15%;
}
&:nth-child(5) {
width: 15%;
}
&:nth-child(6) {
width: 15%;
}
}
}
}
/* Input type range */
$track-color: $midgrey !default;
$thumb-color: $orange !default;
$thumb-radius: 0 !default;
$thumb-height: 3rem !default;
$thumb-width: 3rem !default;
$thumb-shadow-size: 0rem !default;
$thumb-shadow-blur: 0rem !default;
$thumb-shadow-color: rgba(0, 0, 0, .2) !default;
$thumb-border-width: 0rem !default;
$thumb-border-color: $midgrey !default;
$track-width: 10rem !default;
$track-height: 0.5rem !default;
$track-shadow-size: 0rem !default;
$track-shadow-blur: 0rem !default;
$track-shadow-color: rgba(0, 0, 0, .2) !default;
$track-border-width: 0rem !default;
$track-border-color: $midgrey !default;
$track-radius: 0 !default;
$contrast: 5% !default;
$ie-bottom-track-color: darken($track-color, $contrast) !default;
@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
}
@mixin track {
cursor: default;
height: $track-height;
transition: all .2s ease;
width: $track-width;
}
@mixin thumb($adjustment: 0) {
@include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
background: $thumb-color;
border: $thumb-border-width solid $thumb-border-color;
border-radius: $thumb-radius;
cursor: default;
height: $thumb-height + $adjustment;
width: $thumb-width + $adjustment;
}
@mixin disabled {
cursor: not-allowed;
}
[type='range'] {
-webkit-appearance: none;
background: transparent;
margin: $thumb-height / 2 0;
width: $track-width;
&::-moz-focus-outer {
border: 0;
}
&:focus {
outline: 0;
&::-webkit-slider-runnable-track {
background: lighten($track-color, $contrast);
}
&::-ms-fill-lower {
background: $track-color;
}
&::-ms-fill-upper {
background: lighten($track-color, $contrast);
}
}
&::-webkit-slider-runnable-track {
@include track;
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
background: $track-color;
border: $track-border-width solid $track-border-color;
border-radius: $track-radius;
}
&::-webkit-slider-thumb {
@include thumb;
-webkit-appearance: none;
margin-top: ((-$track-border-width * 2 + $track-height) / 2 - $thumb-height / 2);
}
&::-moz-range-track {
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
@include track;
background: $track-color;
border: $track-border-width solid $track-border-color;
border-radius: $track-radius;
height: $track-height / 2;
}
&::-moz-range-thumb {
@include thumb(-4);
}
&::-ms-track {
@include track;
background: transparent;
border-color: transparent;
border-width: ($thumb-height / 2) 0;
color: transparent;
}
&::-ms-fill-lower {
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
background: $ie-bottom-track-color;
border: $track-border-width solid $track-border-color;
border-radius: ($track-radius * 2);
}
&::-ms-fill-upper {
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
background: $track-color;
border: $track-border-width solid $track-border-color;
border-radius: ($track-radius * 2);
}
&::-ms-thumb {
@include thumb(-4);
margin-top: $track-height / 4;
}
&:disabled {
&::-webkit-slider-thumb {
@include disabled;
}
&::-moz-range-thumb {
@include disabled;
}
&::-ms-thumb {
@include disabled;
}
&::-webkit-slider-runnable-track {
@include disabled;
}
&::-ms-fill-lower {
@include disabled;
}
&::-ms-fill-upper {
@include disabled;
}
}
}
.plan {
width: 100%;
background: $lightgrey;
height: calc(100vh - 13rem);
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/295139/exampleplan.png) center center no-repeat;
background-size: cover;
}
!
