Untitled

dabblet.css

* {
	box-sizing: border-box;
	font-family: 'Helvetica';
}  
 
 body{
	margin:0;
 }
.tools{
	width: 100%;
	height: 60px; 
	padding: 13px 30px 0 15%;
	border-bottom: 1px solid gray;
	background: lightgray;
	background: linear-gradient(to right bottom, rgb(200,200,200), rgb(240,240,240), rgb(200,200,200));
	background: -ms-linear-gradient(to right bottom, rgb(200,200,200), rgb(240,240,240), rgb(200,200,200));
	background: -webkit-linear-gradient(to right bottom, rgb(200,200,200), rgb(240,240,240), rgb(200,200,200));
	background: -moz-linear-gradient(to right bottom, rgb(200,200,200), rgb(240,240,240), rgb(200,200,200));
	background: linear-gradient(170deg, rgb(200, 200, 200), rgb(250, 250, 250), rgb(200, 200, 200));	
}

.button{
	padding: 8px 20px;
	border-radius: 3px;
	border:none;
	outline: none;
	margin-left: 20px;
}

.button:active{
	transform: scale(0.92);
}

.tools .edit{
	background: mediumspringgreen;
	border: 1px solid green;
}

.tools .edit:hover{
	background: mediumseagreen;
}

.tools .delete{
	background: red;
	border: darkred 1px solid;
}

.tools .delete:hover{
	background: indianred;
}

.tools .send-mail{
	border: 1px solid gray;
	margin-left: 40%;
}

.tools .send-mail:hover{
	background: rgb(140, 140, 140);
}

.tools .add-note{
	border: 1px solid gray;
}

.tools .add-note:hover{
	background: rgb(140, 140, 140);
}

.switch-pages{
	float: right;
	display: flex;
}

.switch-pages a{
	text-decoration: none;
	margin-right: 10px;
}

.switch-pages div{
	width: 25px;
	height: 25px;
	margin-top: 5px;
	transform: rotate(45deg);
	transition: transform 0.1s;
}

.switch-pages a #left{
	border-left: 2px solid black;
	border-bottom: 2px solid black;
}

.switch-pages a #right{
	border-top: 2px solid black;
	border-right: 2px solid black;
}

.switch-pages div:hover{
	transform: rotate(45deg) scale(1.15);
}

.switch-pages div:active{
	transform: rotate(45deg) scale(0.9);
}
	
section{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.2);
	justify-content: center;
	align-items: center;	
}

.mail-modal{
	min-width: 450px;
	width: 40%;
	min-height: 450px;
	height: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
	background: white;
	border-radius: 15px;
	border: lightgray 1px solid;
	box-shadow: 1px 5px 25px 5px rgba(0, 0, 0, 0.4);
	transform: scale(0);
	transform-origin: 100% 10%;
	transition: transform 0.6s;
}



.mail-modal #title{
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	}

.mail-modal textarea{
	width: 90%;
	height: calc(80% - 50px);
	padding: 10px;
	margin: 0 5% 5% 0; 
}

.mail-modal #button-container{
	margin-right: 5%;
}

.mail-modal .save{
	background: lime;
	border: 1px solid seagreen;
}

.mail-modal .save:hover{
	background: seagreen;
}

.mail-modal .cancel{
	background: red;
	border: 1px solid darkred;
}

.mail-modal .cancel:hover{
	background: indianred;
}

.animate-modal{
	transform: scale(1);
}

.open-mail-modal{
	display: flex !important;
}

.open-mail-modal .mail-modal{
	display: flex !important;
	
}

.open-note-modal{
	display: flex !important;
}

.open-note-modal .mail-modal{
	display: flex !important;
}

dabblet.html

<div class='tools'>
	<button class="button edit">Düzenle</button>
	<button class="button delete">Sil</button>
	<button class="button send-mail">E-Posta </button>
	<button class="button add-note">Not Ekle</button>
	<div class="switch-pages">
		<a href="#" id="">
			<div id="left"></div>
		</a>
		<a href="#" style="transform: rotaeY(180deg)">
			<div id="right"></div>	
		</a>
	</div>
</div>

<section style="display: none;">
	<div class="mail-modal" >
		<div id="title">E-Posta Gönder</div>
		<textarea></textarea>
		<div id="button-container" >
			<input type="submit" class="button mail-modal-send" value="Gönder"/>
			<input type="button" class="button mail-modal-cancel" value="İptal" />
		</div>
	</div>
</section>

dabblet.js

const sendMailButton = document.querySelector('.send-mail');

const modalContainer = document.querySelector('section'); 
const mailModal = modalContainer.querySelector('.mail-modal');
const saveButton = document.querySelector('.mail-modal-send');
const cancelButton = document.querySelector('.mail-modal-cancel');

//adding functionalty to add note
sendMailButton.onclick = function(){
	modalContainer.classList.add('open-mail-modal');
	setTimeout(function(){
		mailModal.classList.add('animate-modal');
	}, 100);
}

//adding functionalty to canccel button
cancelButton.onclick = function(){
	modalContainer.classList.remove('open-mail-modal');
	mailModal.classList.remove('animate-modal');
}

//when click on modal container close all modal
modalContainer.onclick = function(e){
	if(e.target.tagName === 'SECTION'){
		modalContainer.classList.remove('open-mail-modal');
		mailModal.classList.remove('animate-modal');
	}
}

settings.json

{"view":"split","fontsize":"100","seethrough":"1","prefixfree":"1","page":"css"}