Commit a69b3a76 authored by Zhai Zirun's avatar Zhai Zirun

finished styling extension

parent 6f903144
......@@ -5,14 +5,18 @@ function openCustomTab() {
document.getElementById("load").className = "content";
document.getElementById("load-button").className = "tablinks";
document.getElementById("submitted").className = "content";
document.getElementById("custom").className = "content-active";
document.getElementById("custom-button").className += "-active";
document.getElementById("custom-button").className = "tablinks-active";
}
function openLoadTab() {
document.getElementById("custom").className = "content";
document.getElementById("custom-button").className = "tablinks";
document.getElementById("submitted").className = "content";
document.getElementById("load").className = "content-active";
document.getElementById("load-button").className += "-active";
document.getElementById("load-button").className = "tablinks-active";
}
\ No newline at end of file
......@@ -22,22 +22,54 @@
<button class="tablinks" id="load-button">Get an order on us</button>
<script src="button.js"></script>
</div>
<p>Please select the ingredients you'd like to avoid!</p>
<div class="content-active" id="custom">
Dairy : <input type="checkbox" id="Dairy"><br>
Meat : <input type="checkbox" id="Meat"><br>
Corn : <input type="checkbox" id="Corn"><br>
Gluten : <input type="checkbox" id="Gluten"><br>
<h1 class="instr">Please select the ingredients you'd like to avoid!</h1>
<table style="padding-top: 20px; padding-bottom:15px">
<tr>
<td class="columns">
<label class="container">Dairy
<input type="checkbox" id="Dairy">
<span class="checkmark"></span>
</label>
</td>
<td class="columns">
<label class="container">Corn
<input type="checkbox" id="Corn">
<span class="checkmark"></span>
</label>
</td>
</tr>
<button type="button" id="submit">Submit</button>
<tr>
<td class="columns">
<label class="container">Meat
<input type="checkbox" id="Meat">
<span class="checkmark"></span>
</label>
</td>
<td class="columns">
<label class="container">Gluten
<input type="checkbox" id="Gluten">
<span class="checkmark"></span>
</label>
</td>
</tr>
</table>
<div class="submit-button"><button class="submission" id="submit">Submit</button></div>
<script src="popup.js"></script>
</div>
<div class="content" id="load">
blah
<h1 class="instr">Coming Soon!</h1>
</div>
<div class="content" id="submitted">
<h1 class="instr">Thank you for submitting! Please refresh the page to change your preferences.</h1>
</div>
</body>
</html>
......@@ -13,5 +13,13 @@ document.getElementById("submit").onclick = function() {
});
});
document.body.innerHTML = "Thank you for submitting! Please refresh the page to change your preferences";
document.getElementById("load").className = "content";
document.getElementById("load-button").className = "tablinks";
document.getElementById("custom").className = "content";
document.getElementById("custom-button").className = "tablinks-active";
document.getElementById("submitted").className = "content-active";
// document.body.innerHTML = "Thank you for submitting! Please refresh the page to change your preferences";
}
......@@ -77,6 +77,7 @@ body {
border-bottom: 5px solid #51C2A9;
color: #51C2A9;
}
/* ----- main-window -----*/
.content {
......@@ -97,6 +98,95 @@ body {
height: 250px;
}
.instr {
color: #51C2A9;
font-size: 17px;
text-align: center;
}
/*----- checkboxes -----*/
.columns {
width: 210px;
}
.container {
display: block;
position: relative;
padding-left: 45%;
margin-bottom: 20px;
cursor: pointer;
font-size: 15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #494949;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 20%;
height: 18px;
width: 18px;
background-color: white;
border: 1px solid #adadad;
border-radius: 50%;
box-shadow: 0 0 1px #adadad;
}
.container:hover input ~ .checkmark {
background-color: #d4d4d4;
transition: ease 0.3s;
}
.container input:checked ~ .checkmark {
background-color: #df1b1b;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
vertical-align: center;
}
/*----- submit button -----*/
.submit-button {
width: 275px;
vertical-align: middle;
}
.submission {
background-color: #51C2A9;
width: 275px;
border: none;
color: #f5f5f5;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: "Nunito", sans-serif;
font-size: 15px;
box-shadow: 0 0 1px #adadad;
}
.nameWrapper___4c05X {
background-color: #ffffff;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment