fix colors and alignment everywhere
don't ask
This commit is contained in:
@@ -14,7 +14,7 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap");
|
||||
|
||||
*,
|
||||
*::before,
|
||||
@@ -30,7 +30,7 @@ export default {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: space-between;
|
||||
background-color: #213737;
|
||||
background-color: #006064;
|
||||
}
|
||||
|
||||
.text {
|
||||
@@ -83,7 +83,7 @@ h1::after{
|
||||
}
|
||||
|
||||
h1::before{
|
||||
background: #213737;
|
||||
background: #006064;
|
||||
animation: shifteffect 4s steps(22) forwards;
|
||||
}
|
||||
|
||||
|
||||
@@ -35,13 +35,64 @@
|
||||
<!-- input field -->
|
||||
|
||||
<div class="field-header-box">
|
||||
<div class="inputField-header">
|
||||
<input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"
|
||||
@keyup.enter="addItem"/>
|
||||
<label for="inputTextField" class="formLabel">
|
||||
Add here ...
|
||||
</label>
|
||||
</div>
|
||||
<!-- <div class="inputField-header">-->
|
||||
<!-- <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"-->
|
||||
<!-- @keyup.enter="addItem"/>-->
|
||||
<!-- <label for="inputTextField" class="formLabel">-->
|
||||
<!-- Add here ...-->
|
||||
<!-- </label>-->
|
||||
<v-row>
|
||||
<v-col cols="3">
|
||||
<v-text-field
|
||||
label="Ingredient"
|
||||
value=""
|
||||
v-model="newItem"
|
||||
@keyup.enter="addItem"
|
||||
require
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="2">
|
||||
<v-text-field
|
||||
label="Quantity"
|
||||
required
|
||||
v-model="newQuantity"
|
||||
@keyup.enter="addItem"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="1">
|
||||
<p>Unit</p>
|
||||
|
||||
<v-btn-toggle
|
||||
v-model="newUnit"
|
||||
tile
|
||||
color="deep-purple accent-3"
|
||||
group
|
||||
mandatory
|
||||
|
||||
>
|
||||
<v-btn value="units">
|
||||
units
|
||||
</v-btn>
|
||||
|
||||
<v-btn value="g">
|
||||
g
|
||||
</v-btn>
|
||||
|
||||
<v-btn value="ml">
|
||||
ml
|
||||
</v-btn>
|
||||
|
||||
</v-btn-toggle>
|
||||
</v-col>
|
||||
<v-col cols="1">
|
||||
<!-- <v-btn-->
|
||||
<!-- elevation="2"-->
|
||||
<!-- fab-->
|
||||
<!-- @click="addItem"-->
|
||||
<!-- ><v-icon>mdi-plus</v-icon>-->
|
||||
<!-- </v-btn>-->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<!-- response element -->
|
||||
@@ -197,7 +248,7 @@ export default Items
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #213737;
|
||||
background-color: #006064;
|
||||
}
|
||||
|
||||
.main {
|
||||
@@ -208,7 +259,7 @@ body{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.25vh;
|
||||
background-color: #213737;
|
||||
background-color: #006064;
|
||||
}
|
||||
|
||||
/* navbar-background */
|
||||
@@ -218,7 +269,7 @@ body{
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
background: #213737;
|
||||
background: #006064;
|
||||
width: 100vw;
|
||||
height: 15vh;
|
||||
}
|
||||
@@ -226,15 +277,7 @@ body{
|
||||
/* input field styling */
|
||||
|
||||
.field-header-box{
|
||||
z-index: 3;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 5vh;
|
||||
left: 0;
|
||||
top: 10vh;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
color: white
|
||||
}
|
||||
|
||||
.inputField-header {
|
||||
@@ -258,7 +301,7 @@ body{
|
||||
outline: none;
|
||||
padding: 0.5vh;// size of font
|
||||
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font
|
||||
background: #213737;
|
||||
background: #006064;
|
||||
}
|
||||
|
||||
.newItemName:hover {
|
||||
|
||||
@@ -114,7 +114,7 @@ export default {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #213737;
|
||||
background: #006064;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
@@ -215,7 +215,7 @@ export default Recipes
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #213737;
|
||||
background-color: #006064;
|
||||
}
|
||||
|
||||
.main {
|
||||
@@ -226,7 +226,7 @@ body{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.25vh;
|
||||
background-color: #213737;
|
||||
background-color: #006064;
|
||||
}
|
||||
|
||||
/* navbar-background */
|
||||
@@ -236,30 +236,30 @@ body{
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
background: #213737;
|
||||
background: #006064;
|
||||
width: 100vw;
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
/* input field styling */
|
||||
|
||||
.field-header-box{
|
||||
z-index: 3;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 5vh;
|
||||
left: 0;
|
||||
top: 10vh;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
//.field-header-box{
|
||||
// z-index: 3;
|
||||
// position: center;
|
||||
// width: 200vw;
|
||||
// height: 5vh;
|
||||
// left: 0;
|
||||
// top: 10vh;
|
||||
// display: grid;
|
||||
// align-content: center;
|
||||
// justify-content: center;
|
||||
//}
|
||||
|
||||
.inputField-header {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
width: 20vh;
|
||||
height: 3vh;
|
||||
height: 2vh;
|
||||
}
|
||||
|
||||
.newItemName {
|
||||
@@ -276,7 +276,7 @@ body{
|
||||
outline: none;
|
||||
padding: 0.5vh;// size of font
|
||||
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font
|
||||
background: #213737;
|
||||
background: #006064;
|
||||
}
|
||||
|
||||
.newItemName:hover {
|
||||
|
||||
Reference in New Issue
Block a user