poss finished front for mobile
This commit is contained in:
parent
848f2dfd65
commit
594cc89fa3
|
|
@ -13,6 +13,52 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--col-orange: hsl(25, 97%, 53%);
|
||||
|
||||
--col-white: hsl(0, 0%, 100%);
|
||||
--col-light-grey: hsl(217, 12%, 63%);
|
||||
--col-medium-grey: hsl(216, 12%, 54%);
|
||||
--col-very-dark-blue: hsl(216, 12%, 8%);
|
||||
--col-dark-blue: hsl(213, 19%, 18%);
|
||||
|
||||
--col-button: var(--col-orange);
|
||||
--col-button-hover: var(--col-white);
|
||||
--col-background-page: var(--col-very-dark-blue);
|
||||
--col-background-component: radial-gradient(
|
||||
98.96% 98.96% at 50% 0%,
|
||||
#232a34 0%,
|
||||
#181e27 100%
|
||||
);
|
||||
--col-background-rating: var(--col-dark-blue);
|
||||
--col-font-rating: var(--col-medium-grey);
|
||||
--col-font-selected-rating: var(--col-orange);
|
||||
--col-font-header: var(--col-white);
|
||||
--col-font-body: var(--col-light-grey);
|
||||
--col-background-button-hover: var(--col-white);
|
||||
--col-font-button-hover: var(--col-orange);
|
||||
|
||||
--col-font-selected-rating: var(--col-white);
|
||||
--col-background-selected-rating: var(--col-medium-grey);
|
||||
|
||||
/* Typography */
|
||||
--fs-header: 1.5rem;
|
||||
--lh-header: 125%;
|
||||
--fw-header: 700;
|
||||
|
||||
--fs-body: 0.875rem;
|
||||
--lh-body: 157%;
|
||||
--fw-body: 400;
|
||||
|
||||
--fs-rating: 0.875rem;
|
||||
--lh-rating: 171%;
|
||||
--ls-rating: 0.175px;
|
||||
|
||||
--fs-button: 0.875rem;
|
||||
--lh-button: 1.2857142857;
|
||||
--ls-button: 1.86667px;
|
||||
|
||||
--border-radius: 0.9375rem;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -22,9 +68,244 @@ body {
|
|||
/* margin: 0 auto; */
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
/* background-color: var(--col-background-page); */
|
||||
}
|
||||
|
||||
.rating-component {
|
||||
max-width: 327px;
|
||||
background: var(--col-background-component);
|
||||
border-radius: var(--border-radius);
|
||||
/* margin: 0 1.5rem; */
|
||||
padding: 24px 24px 32px 24px;
|
||||
}
|
||||
.rating-component-front {
|
||||
}
|
||||
|
||||
.star-icon {
|
||||
/* margin-top: 19px; */
|
||||
display: block;
|
||||
background-color: var(--col-dark-blue);
|
||||
/* width: 100px; */
|
||||
/* height: 100px; */
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
/* line-height: 100px; */
|
||||
vertical-align: middle;
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.star-icon:before {
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: var(--fs-header);
|
||||
line-height: var(--lh-header);
|
||||
color: var(--col-font-header);
|
||||
}
|
||||
|
||||
.body {
|
||||
font-size: var(--fs-body);
|
||||
line-height: var(--lh-body);
|
||||
color: var(--col-font-body);
|
||||
}
|
||||
|
||||
.rating-component__header {
|
||||
margin-top: 22px; /* 1rem;*/
|
||||
}
|
||||
.rating-component__body {
|
||||
margin-top: 17px;
|
||||
/* margin-top: 33px; */
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
#ratingForm {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
#ratingForm fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* #ratingForm input {
|
||||
visibility: hidden;
|
||||
} */
|
||||
|
||||
.radio_container {
|
||||
/* display: flex; */
|
||||
/* gap: 30px; */
|
||||
}
|
||||
|
||||
.ratingForm__label {
|
||||
display: inline-block;
|
||||
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
background-color: var(--col-background-rating);
|
||||
|
||||
font-size: var(--fs-rating);
|
||||
line-height: var(--lh-rating);
|
||||
letter-spacing: var(--ls-rating);
|
||||
|
||||
font-weight: 700;
|
||||
color: var(--col-font-rating);
|
||||
/* padding: 13px 18.12px 12px 17.29px; */
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
#ratingForm input[type="radio"] {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
#ratingForm label {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
#ratingForm label:last-of-type {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
#ratingForm label:hover {
|
||||
background-color: var(--col-orange);
|
||||
color: var(--col-white);
|
||||
}
|
||||
.radio_container input[type="radio"]:focus + label {
|
||||
outline: 2px dashed var(--col-white);
|
||||
color: var(--col-white);
|
||||
background-color: var(--col-medium-grey);
|
||||
}
|
||||
|
||||
.radio_container input[type="radio"]:checked + label {
|
||||
color: var(--col-white);
|
||||
background-color: var(--col-medium-grey);
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 22.5px;
|
||||
padding: 13px 110px 13px 107px;
|
||||
text-align: center;
|
||||
|
||||
font-family: "Overpass", sans-serif;
|
||||
font-size: var(--fs-button);
|
||||
line-height: var(--lh-button);
|
||||
letter-spacing: var(--ls-button);
|
||||
font-weight: 700;
|
||||
|
||||
text-transform: uppercase;
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
margin-top: 1.5rem;
|
||||
margin-inline: auto;
|
||||
|
||||
color: var(--col-white);
|
||||
background-color: var(--col-button);
|
||||
}
|
||||
|
||||
.btn-submit:where(:focus, :hover) {
|
||||
color: var(--col-orange);
|
||||
background-color: var(--col-background-button-hover);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: block;
|
||||
}
|
||||
/* for rating-component-back */
|
||||
|
||||
.rating-component-back {
|
||||
/* display: none; */
|
||||
padding: 34px 24px 37px 24px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thank-you-img {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.rating-component__rating {
|
||||
margin-top: 1.5rem;
|
||||
/* margin-inline: 45px; */
|
||||
|
||||
font-size: var(--fs-body);
|
||||
/* line-height: var(--lh-body); */
|
||||
color: var(--col-orange);
|
||||
|
||||
border-radius: 22.5px;
|
||||
background-color: var(--col-dark-blue);
|
||||
padding: 5px 12px;
|
||||
}
|
||||
|
||||
.rating-component__header-submitted {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.rating-component__body-submitted {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 62.5rem) {
|
||||
:root {
|
||||
/* Typography */
|
||||
--fs-header: 1.75rem;
|
||||
|
||||
--fs-body: 0.9375rem;
|
||||
--lh-body: 160%;
|
||||
|
||||
--fs-rating: 1rem;
|
||||
--lh-rating: 150%;
|
||||
--ls-rating: 0.2px;
|
||||
|
||||
--fs-button: 15px;
|
||||
--lh-button: 1.2666666667;
|
||||
--ls-button: 2px;
|
||||
}
|
||||
|
||||
.rating-component {
|
||||
max-width: 25.75rem;
|
||||
}
|
||||
|
||||
.rating-component-front {
|
||||
padding: 32px 39px 32px 32px;
|
||||
}
|
||||
|
||||
.rating-component__header {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.rating-component__body {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.rating-component-back {
|
||||
padding: 45px 40px 45px 32px;
|
||||
}
|
||||
|
||||
.rating-component__rating {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.rating-component__header-submitted {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.rating-component__body-submitted {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,27 +36,27 @@
|
|||
|
||||
<article class="rating-component">
|
||||
<!-- Rating state start -->
|
||||
<section class="component-front">
|
||||
<img src="images/icon-star.svg" alt="Image of a Star" aria-hidden="true">
|
||||
<h2 class="rating-component__header">How did we do?</h2>
|
||||
<p class="rating-component__body">
|
||||
<section class="rating-component-front" id="rating-component-front">
|
||||
<img class="star-icon" src="images/icon-star.svg" alt="Image of a Star" aria-hidden="true">
|
||||
<h2 class="header rating-component__header">How did we do?</h2>
|
||||
<p class="body rating-component__body">
|
||||
Please let us know how we did with your support request. All feedback is appreciated to help us improve our
|
||||
offering!
|
||||
</p>
|
||||
<form id="ratingForm">
|
||||
<fieldset>
|
||||
<!-- <legend>Please select your preferred contact method:</legend> -->
|
||||
<div>
|
||||
<div class="radio_container">
|
||||
<input type="radio" id="ratingScore1" name="rating" value="1">
|
||||
<label for="ratingScore1">1</label>
|
||||
<label class="ratingForm__label" for="ratingScore1">1</label>
|
||||
<input type="radio" id="ratingScore2" name="rating" value="2">
|
||||
<label for="ratingScore2">2</label>
|
||||
<label class="ratingForm__label" for="ratingScore2">2</label>
|
||||
<input type="radio" id="ratingScore3" name="rating" value="3">
|
||||
<label for="ratingScore3">3</label>
|
||||
<label class="ratingForm__label" for="ratingScore3">3</label>
|
||||
<input type="radio" id="ratingScore4" name="rating" value="4">
|
||||
<label for="ratingScore4">4</label>
|
||||
<label class="ratingForm__label" for="ratingScore4">4</label>
|
||||
<input type="radio" id="ratingScore5" name="rating" value="5">
|
||||
<label for="ratingScore5">5</label>
|
||||
<label class="ratingForm__label" for="ratingScore5">5</label>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-submit" type="submit">Submit</button>
|
||||
|
|
@ -66,16 +66,16 @@
|
|||
</section>
|
||||
<!-- Rating state end -->
|
||||
<!-- Thank you state start -->
|
||||
<section>
|
||||
<img src="images/illustration-thank-you.svg"
|
||||
<section class="rating-component-back hidden" id="rating-component-back">
|
||||
<img class="thank-you-img" src="images/illustration-thank-you.svg"
|
||||
alt="Image of an electronic box with paper coming out of it. A card is moving towards the box"
|
||||
aria-hidden="true">
|
||||
<p class="rating-component__rating">
|
||||
You selected <span id="ratingSpan"></span>
|
||||
<!-- Add rating here --> out of 5
|
||||
</p>
|
||||
<h2 class="rating-component__header">Thank you!</h2>
|
||||
<p class="rating-component__body">
|
||||
<h2 class="header rating-component__header-submitted">Thank you!</h2>
|
||||
<p class="body rating-component__body-submitted">
|
||||
We appreciate you taking the time to give a rating. If you ever need more support,
|
||||
don’t hesitate to get in touch!
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
const form = document.getElementById("ratingForm");
|
||||
const ratingSpan = document.getElementById("ratingSpan");
|
||||
|
||||
const frontSection = document.getElementById("rating-component-front");
|
||||
const backSection = document.getElementById("rating-component-back");
|
||||
|
||||
console.log(form);
|
||||
|
||||
form.addEventListener(
|
||||
|
|
@ -14,6 +17,8 @@ form.addEventListener(
|
|||
ratingSpan.innerText = output;
|
||||
|
||||
//hide first section, make second section visible
|
||||
frontSection.classList.add("hidden");
|
||||
backSection.classList.remove("hidden");
|
||||
//use a transition effect, plus a reduced motion version
|
||||
|
||||
event.preventDefault();
|
||||
|
|
|
|||
Loading…
Reference in New Issue