Skip to content
Snippets Groups Projects
Commit 8c5b6893 authored by Ingrid's avatar Ingrid
Browse files

modal css

parent b4ff143c
No related branches found
No related tags found
1 merge request!13Fridge view
<template> <template>
<div v-if="visible" id="popup"> <div v-if="visible" id="popup">
<div id="exitBtn" @click="close"><Icon icon="mdi:alpha-x-box" :color="redIconColor" :style="{ fontSize: redIconSize }" /></div>
<h2>{{ fridgeItem }}</h2> <h2>{{ fridgeItem }}</h2>
<p>{{sliderValue}}</p> <p>{{sliderValue}}</p>
...@@ -8,14 +9,17 @@ ...@@ -8,14 +9,17 @@
<div id="buttons"> <div id="buttons">
<button @click="close">Ble kastet 🧺</button> <button @click="close">Ble kastet 🧺</button>
<button>Ble spist 😋</button> <button id="eatenBtn" @click="close" >Ble spist 😋</button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {Icon} from "@iconify/vue";
export default { export default {
name: "EatFridgeItemModal", name: "EatFridgeItemModal",
components: {Icon},
props: { props: {
fridgeItem: { fridgeItem: {
type: String, type: String,
...@@ -33,30 +37,65 @@ export default { ...@@ -33,30 +37,65 @@ export default {
this.$emit('closeModal',this); this.$emit('closeModal',this);
}, },
},
computed:{
redIconColor() {
return '#EE6D6D';
},
redIconSize() {
return '40px';
},
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
#popup { #popup {
background-color: turquoise; background-color: base.$white;
color: black; color: black;
width: 80%; width: 70%;
padding:2em;
display:flex; display:flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
border-radius: 2px;
} }
@media (min-width: 800px){ @media (min-width: 800px){
#popup { #popup {
width: 300px; width: 40%;
} }
} }
#buttons { #buttons {
justify-content: center; justify-content: center;
display: flex; display: flex;
margin: 1em;
margin-top: 3em;
}
#exitBtn{
width:100%;
display: flex;
justify-content: right;
}
button {
padding: .6em 2.4em;
margin:.3em;
font-weight: bolder;
font-size: larger;
background-color: base.$red;
color:white;
}
#eatenBtn {
background-color: base.$green;
} }
</style> </style>
\ No newline at end of file
<script setup> <script setup>
import EatFridgeItemModal from "@/components/EatFridgeItemModal.vue";
</script> </script>
<template> <template>
<main> <main>
<eat-fridge-item-modal></eat-fridge-item-modal>
<p>HALLO</p> <p>HALLO</p>
</main> </main>
</template> </template>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment