Styling changes and styling for Modal
This commit is contained in:
parent
1febe56a50
commit
be4e97b476
1
public/assets/icons/close-button-white.svg
Normal file
1
public/assets/icons/close-button-white.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="49" xmlns="http://www.w3.org/2000/svg" height="49" id="screenshot-2eeb1bb6-24d8-8068-8004-52a064185289" viewBox="0 0 49 49" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2eeb1bb6-24d8-8068-8004-52a064185289" height="800px" width="800px" rx="0" ry="0" style="fill: rgb(255, 255, 255);"><g id="shape-2eeb1bb6-24d8-8068-8004-52a06419c052"><g class="fills" id="fills-2eeb1bb6-24d8-8068-8004-52a06419c052"><path d="M24.500,4.594C13.524,4.594,4.594,13.524,4.594,24.500C4.594,35.476,13.524,44.406,24.500,44.406C35.476,44.406,44.406,35.476,44.406,24.500C44.406,13.524,35.476,4.594,24.500,4.594ZZM31.707,29.543C32.111,29.926,32.275,30.498,32.135,31.036C31.996,31.575,31.575,31.996,31.036,32.135C30.498,32.275,29.926,32.111,29.543,31.707L24.500,26.666L19.457,31.707C18.855,32.279,17.907,32.267,17.320,31.680C16.733,31.093,16.721,30.145,17.293,29.543L22.334,24.500L17.293,19.457C16.721,18.855,16.733,17.907,17.320,17.320C17.907,16.733,18.855,16.721,19.457,17.293L24.500,22.334L29.543,17.293C30.145,16.721,31.093,16.733,31.680,17.320C32.267,17.907,32.279,18.855,31.707,19.457L26.666,24.500Z" style="fill: none;"/></g><g id="strokes-2eeb1bb6-24d8-8068-8004-52a06419c052" class="strokes"><g class="outer-stroke-shape"><defs><mask id="outer-stroke-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" x="-2.6488906871192848" y="-2.6488906871192848" width="54.29778137423857" height="54.29778137423857" maskUnits="userSpaceOnUse"><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" style="fill: none; stroke: white; stroke-width: 6;"/><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" style="fill: black; stroke: none;"/></mask><path d="M24.500,4.594C13.524,4.594,4.594,13.524,4.594,24.500C4.594,35.476,13.524,44.406,24.500,44.406C35.476,44.406,44.406,35.476,44.406,24.500C44.406,13.524,35.476,4.594,24.500,4.594ZZM31.707,29.543C32.111,29.926,32.275,30.498,32.135,31.036C31.996,31.575,31.575,31.996,31.036,32.135C30.498,32.275,29.926,32.111,29.543,31.707L24.500,26.666L19.457,31.707C18.855,32.279,17.907,32.267,17.320,31.680C16.733,31.093,16.721,30.145,17.293,29.543L22.334,24.500L17.293,19.457C16.721,18.855,16.733,17.907,17.320,17.320C17.907,16.733,18.855,16.721,19.457,17.293L24.500,22.334L29.543,17.293C30.145,16.721,31.093,16.733,31.680,17.320C32.267,17.907,32.279,18.855,31.707,19.457L26.666,24.500Z" id="stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0"/></defs><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" mask="url(#outer-stroke-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0)" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" style="fill: none; stroke-width: 3; stroke: none; stroke-opacity: 1;"/></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@ -19,17 +19,21 @@
|
||||
</div>
|
||||
|
||||
<Modal :isModalOpen="isModalOpen">
|
||||
<form method="post" @submit.prevent="create">
|
||||
<h1>Create your character</h1>
|
||||
<div>
|
||||
<label for="name">Name</label>
|
||||
<input v-model="name" name="name" id="name">
|
||||
</div>
|
||||
<div>
|
||||
<button @click="create">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
<button @click="isModalOpen = false">Cancel</button>
|
||||
<template #modal-header>
|
||||
<h2 class="modal-title">Create your character</h2>
|
||||
</template>
|
||||
<template #modal-body>
|
||||
<form method="post" @submit.prevent="create" class="modal-form">
|
||||
<div class="form-fields">
|
||||
<label for="name">Name</label>
|
||||
<input v-model="name" name="name" id="name">
|
||||
</div>
|
||||
<div class="submit">
|
||||
<button @click="create">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
<button @click="isModalOpen = false">Cancel</button>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
@ -108,8 +112,7 @@ function create() {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: rgba($purple, 0.6);
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
// hide the radio buttons
|
||||
@ -137,10 +140,17 @@ function create() {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
button {
|
||||
padding: 5px 12px;
|
||||
padding: 10px 16px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
<Teleport to="body" v-if="isModalOpen">
|
||||
<div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }">
|
||||
<div class="modal-header" @mousedown="startDrag">
|
||||
<h3>Modal</h3>
|
||||
<button @click="close">X</button>
|
||||
<slot name="modal-header"/>
|
||||
<button @click="close"><img src="/assets/icons/close-button-white.svg"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<slot />
|
||||
<slot name="modal-body"/>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
@ -79,21 +79,76 @@ onUnmounted(() => {
|
||||
left: 0;
|
||||
width: 30%;
|
||||
height: 40%;
|
||||
border-radius: 30px;
|
||||
background-color: #cfcfcf;
|
||||
border-radius: 20px;
|
||||
background-color: rgba($white, 0.8);
|
||||
z-index: 999;
|
||||
|
||||
// make draggable
|
||||
.modal-header {
|
||||
cursor: move;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 3px 15px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
background-color: rgba($purple, 0.6);
|
||||
color: $white;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
height: 3.75rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
border-radius: 100%;
|
||||
background-color: $lilac;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 15px;
|
||||
button {
|
||||
padding: 10px 16px;
|
||||
background-color: rgba($purple, 0.75);
|
||||
border: 2px solid rgba($white, 0.5);
|
||||
border-radius: 5px;
|
||||
color: $white;
|
||||
}
|
||||
.modal-form {
|
||||
.form-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
input {
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user