/ Text editor concept
/ Inspiration from https://dribbble.com/shots/1917567-Text-Editor-Concept
.topbar
  %i.fa.fa-apple

%button
  %i.fa.fa-file-text-o.fa-3x
  %br/
  %br/
  %span Untitled.txt
  
.app
  .top
    .buttons
      .circle
      .circle
      .circle
    .title
      Untitled.txt
    .info
      Saved
    .clear
  .main
    %p.words 220 words
    .content
      %h1 Title
      %p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
      %p Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
      %p.italic Nulla voluptatem vero quae ipsam, quis alias, eaque aliquam atque libero adipisci sint obcaecati cupiditate aut at voluptatum consequatur, repellat, amet earum.
      %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores rem quaerat fugiat odio vitae distinctio minima optio beatae deserunt excepturi velit nemo iste sint ullam, quam dicta, sed mollitia esse. Mauris placerat eleifend leo.

body {
  overflow:hidden;
  margin:0;
  background: 
 url(https://9to5mac.files.wordpress.com/2014/08/yosemite.jpg);
  background-size: cover;
     background-repeat: none;
  height: 100vh;
  font-family: 'Source Code Pro';
}

p {
  color:#444;
}

.italic {
  color: #999;
  font-style:italic;
}

h1 {
  color:#454647;
  font-size: 24px;
}

.topbar{
  padding-left: 25px;
  width:100%;
  background: rgba(255,255,255,0.8);
  height: 30px;
  font-size: 20px;
  line-height: 1.5;
}

.app {
  position:absolute;
  overflow:hidden;
  border-radius: 5px 5px 0 0;
  margin: 50px 200px;
  width: 700px;
  box-shadow: 0 0 20px #333;
}

.larger {
  width:1000px;
}

.top {
  cursor:move;
  position:relative;
  background: rgba(255,255,255,0.95);
  width: 100%;
  padding: 10px 20px;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}

.buttons {
  position:relative;
  float: left;
  width: 33%;
  z-index:1;
}

.circle {
  float:left;
  margin: 4px 16px 0 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  cursor:pointer;
}

.circle:nth-child(1){
  background: #FF5E51;
    &:hover { background: darken(#FF5E51, 20%);}
}

.circle:nth-child(2){
  background: #FEBB00;
    &:hover { background: darken(#FEBB00, 20%);}
}

.circle:nth-child(3){
  background: #18CF37;
    &:hover { background: darken(#18CF37, 20%);}
  
}

.clear {
  clear:left;
}

.title {
  z-index: 0;
  color: #888;
  float:left;
  width: 33%;
  text-align:center;
  margin-left: -10px;
}

.info {
  color: #BFBFCF;
  width: 33%;
  float: right;
  text-align: right;
}

.words {
  color: #ccc;
  margin-top:0;
  float:right;
}

.main {
  position:relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;   
  box-sizing: border-box;    
  padding: 20px 50px 40px;
  background: rgba(249, 248, 247, 1);
  width: 100%;
}

.content {
    margin-top:40px;
}

button {
  cursor: pointer;
  position: absolute;
  margin: 50px;
  background: rgba(255,255,255, 0.0);
  border: none;
  border-radius: 3px;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  text-shadow: 1px 1px #333;
  outline:0;
  &:hover {
      background: rgba(255,255,255, 0.4);
  }
  
  span{
    color:#FFF;
    font-size:14px;
    text-shadow: 0 0 8px #333;
  }
}

$(".app").draggable({
  handle: ".top",
  scroll: false
});

$("button").draggable({
  scroll: false,
  cancel: false
});


$('.circle:nth-child(1)').click(function(){
    $('.app').fadeOut();
    $('button').fadeIn();
});

$('.circle:nth-child(2)').click(function(){
    $('.app').fadeOut();
    $('button').fadeIn();
});

$('.circle:nth-child(3)').click(function(){
  $('.app').toggleClass('larger', 1000);
});

$('button').dblclick(function(){
   $('.app').fadeIn();
});

$('.content').each(function(){
    this.contentEditable = true;
});