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);
}
	
	

.name-container{

	width: 100%;

	height: 32px;

	padding: 30px 15%;

	font-size: 29px;

	display: flex;

	justify-content: flex-start;

	align-items: center;

	margin-bottom: 30px;

}



.name-container img{

	width: 32px;

	height: 30px;

	transition: transform 0.3s;

}



.name-container img:hover{

	transform: scale(1.1);

}



.name-container img:active{

	transform: scale(0.9);

}



.name-container #name{

	padding: 0 10px 0 20px;

}



.name-container a{

	color: gray;

	text-decoration: none;

	font-size: 0.6em; 

	line-height: 35px;

}



.name-container a:hover{

	text-decoration: underline;

}



.name-container #firm{

	padding-left: 10px;

}



.info{
	position: relative;
	width: 70%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin:80px auto;
	padding: 30px 40px;
	border: 1px solid gray;
	border-radius: 8px;
	box-shadow: 2px 2px 25px 1px rgba(0, 0, 0, 0.1);
}



.info #title{
	position: absolute;
	top: -25px;
	left: 4%;
	color: gray;	
}

.info .area{
	width: 100%;
	height: 35px;
	line-height: 35px;
}

.info .area input{
	border: none;
	padding-left: 30px;
	width: calc(100% - 150px);
}

.info span{
	height: 30px;
	margin-bottom: 15px;
}


.info .values span:nth-child(even){
	color: navy;
}



.info .labels{

	width: 120px;

	color: gray;

	font-size: 0.9em;

}



	
	
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 .mail-modal-send{
	background: lime;
	border: 1px solid seagreen;
}

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

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

.mail-modal .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="center">
      <div class="tools">
        <button class="button edit">Düzenle</button>
        <button class="button delete">Sil</button>
        <button class="button add-note">Not Ekle </button>
        <button class="button send-mail">E-Posta </button>
        <div class="switch-pages"><a href="#">
            <div id="left"></div></a><a href="#" style="transform: rotaeY(180deg)">
            <div id="right"></div></a></div>
      </div>
      <div class="name-container">
      	<a href="/costumers">
      		<img src="https://cdn3.iconfinder.com/data/icons/social-productivity-line-art-3/128/arrow-left2-512.png" alt="back">
      	</a>
      	<span id="name">Gökhan Aslan </span>
      	<span> - </span>
      	<a id="firm" href="firm">Beymen</a>
      </div>
      <div class="personal info"><span id="title">Kişisel Bilgiler</span>
      	<div class="area"> 
      		<span>Doğum tarihi</span>
        	<input type="text" value="17-07-1992">
      	</div>
       <!-- <div class="labels">
        	<span>Unvan</span>
        	<span>Müşteri kaynağı</span>
        	<span>Telefon</span>
        	<span>Diğer Telefonu</span>
        	<span>Aranmak istiyor</span>
        	<span>Faks</span>
        	<span>E-Posta</span>
        	<span>İkinci E-Posta</span>
        	<span>E-Posta istiyor</span>
        	<span>Kayıt sahibi</span>
        </div>
        <div class="values">
        	<span>17/07/1992</span>
        	<span>Satış Danışmanı</span>
        	<span>Reklamlar</span>
        	<span>507 009 3558</span>
        	<span> </span>
        	<span>Evet</span>
        	<span> </span>
        	<span>gokhan@gokhanaslan.com.tr</span>
        	<span>gknasln@hotmail.com</span>
        	<span>Hayır</span>
        	<span>Murat Erat</span>
        </div>  -->
      </div>
      <div class="company info"><span id="title">Şirket Bilgileri</span>
        <div class="labels">
        	<span>Şirket ismi</span>
        	<span>Bölümü</span>
        	<span>Yöneticisi</span>
        	<span>Asistanı</span>
        	<span>Asistanın telefonu</span>
        </div>
        <div class="values"><span>Beymen</span><span>Satış</span><span>İpek Hitay</span><span> </span><span> </span></div>
      </div>
      <div class="contact info">
      	<span id="title">Adres Bilgisi</span>
        <div class="labels">
        	<span>Adres</span>
        	<span>Şehir  </span>
        	<span>İlçe</span>
        	<span>Ülke</span>
        	<span>Posta kodu</span>
        </div>
        <div class="values">
        	<span>Koru sok. no2/221 Zorlu Center AVM</span>
        	<span>İstanbul</span>
        	<span>Şişli</span>
        	<span>Türkiye</span>
        	<span>34440</span>
        </div>
      </div>
      <div class="register info">
      	<span id="title">Kayıt Bilgileri</span>
        <div class="labels">
        	<span style="margin-top: 7px">Oluşturan</span>
        	<span style="margin-top: 40px">Düzenleyen</span>
        </div>
        <div class="values">
        	<span>Gokhan Aslan <br> Pazartesi - 23 Temmuz 2018 03:21PM</span>
        	<span></span>
        	<span>Murat Erat <br> Salı - 24 Temmuz 2018 07:21PM</span>
       	</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":"","prefixfree":"1","page":"css"}