@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v6/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v6/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v6/toadOcfmlt9b38dHJxOBGJ6-ys_j0H4QL65VLqzI3wI.woff) format('woff');
}

//=============== Demo Template Styles ================================================//
html, body { height: 100%; }
body {
  background-color: #12171A;
  color: lighten(#12171A, 30%);
  border:1px solid transparent;
  font-family: "Source Sans pro", sans-serif;
}
a{
  color: white;
  text-decoration: none;
  &:hover{
    color:inherit;
  }
}
header{
  position:fixed;
  top:0; left:0; right:0;
  width:100%;
  padding:10px 30px;
  background-color: rgba(black, .5);
}
h1{
  font-size:5em;
  font-weight:normal;
  text-align:center;
  margin:100px auto 30px;
  font-weight:300;
}
h2{
  font-size:2em;
  text-align: center;
  font-weight:300;
}
p{
  text-align:center;
}
.buttons-container{
  margin: 100px auto;
  text-align:center;
}

// =========== General button styles & variables =======================================//
button{
  display:inline-block;
  margin: 0 1em;
  border:none;
  background:none;
  
  span{
    display:block;
  }
}

$color : #ecf0f1;
$transition: .3s;// increase this to see the transformations happen in slow motion

// ==================================== grid button ====================================//

$base : 1rem;
$space : $base/4;

//common to both grid buttons
.grid-button {
  padding: $base*2;
  cursor: pointer;
  user-select: none;
}
//common to both grid buttons
.grid-button{
  .grid{
    width: $base;
    height: $base;
    background: $color;
    color: $color; /* Not in use when the colors are specified below */
    transition: $transition;
  }
}
.grid-button.close{
  .grid{
    -webkit-transform: rotate3d(0,0,1,-45deg)  scale3d(.8,.8,.8);
            transform: rotate3d(0,0,1,-45deg)  scale3d(.8,.8,.8);
  }
}
//grid rearrange only
.grid-button.rearrange {
  .grid{
    box-shadow:
      -($base+$space) 0 -($base+$space),
      0 0 -($base+$space),
      ($base+$space) (-($base + $space)),
      -($base+$space) 0,
      $base+$space 0,
      -($base+$space) ($base + $space),
      0 ($base+$space),
      ($base+$space) ($base + $space);
  }
}
.grid-button.rearrange.close { 
  .grid{
      box-shadow:
        0 0 -$base,
        0 0 -$base*2,
        $base 0,
        -$base*2 0,
        $base*2 0,
        -$base 0,
        0 $base*2,
        0 $base;
  }
}
.grid-button.collapse{
  .grid{
    box-shadow:
    -($base+$space) 0,
    -($base+$space) ($base+$space),
    $base+$space 0,
    ($base+$space) (-($base+$space)),
    0 0 -($base+$space),
    -($base+$space) 0 -($base+$space),
    0 ($base+$space),
    ($base+$space) ($base+$space);
  }
  
}
.grid-button.collapse.close {
  .grid{
    box-shadow:
    -$base 0,
    0 0 transparent,
    $base 0,
    0 0 transparent,
    0 0 -$base,
    0 0 transparent,
    0 $base,
    0 0 transparent;
  }
}


/* ====================== lines button ==================================================*/

$button-size : 4rem; 
//common to all three-liners
.lines-button {
  padding: $button-size/2 $button-size/4;
  transition: .3s;
  cursor: pointer;
  user-select: none;
  border-radius: $button-size/7;
/* */
  &:hover {
    opacity: 1;
  }
  &:active {
    transition: 0;
  }
}
//common to all three-liners
@mixin line {
  display: inline-block;
  width: $button-size;
  height: $button-size/7;
  background: $color;
  border-radius: $button-size/14; 
  transition: $transition;
}
//common to all three-liners
.lines {
  @include line;
  position: relative; 

  &:before, &:after {
   @include line;
    position: absolute;
    left:0;
    content: '';
    -webkit-transform-origin: $button-size/14 center;
            transform-origin: $button-size/14 center;
  }
  &:before { 
    top: $button-size/4; 
  }
  &:after { 
    top: -$button-size/4; 
  }
}

//common to all three-liners
.lines-button:hover {
  .lines {
    &:before { 
      top: $button-size/3.5; 
    }
    &:after { 
      top: -$button-size/3.5; 
    }
  }
}
.lines-button.close {
  -webkit-transform: scale3d(.8,.8,.8);
          transform: scale3d(.8,.8,.8);
}
// for both the arrow up and left icons
.lines-button.arrow.close {
    .lines {
      &:before,
      &:after {
        top: 0;
        width: $button-size/1.8;
      }
      &:before { 
        -webkit-transform: rotate3d(0,0,1,40deg); 
                transform: rotate3d(0,0,1,40deg); 
      }
      &:after { 
        -webkit-transform: rotate3d(0,0,1,-40deg); 
                transform: rotate3d(0,0,1,-40deg); 
      }
    }
}

//arrow up only: just rotate by 90degrees
.lines-button.arrow-up.close {
  -webkit-transform: scale3d(.8,.8,.8) rotate3d(0,0,1,90deg);
          transform: scale3d(.8,.8,.8) rotate3d(0, 0, 1,90deg);
}
//three-lines to minus only
.lines-button.minus.close{
  .lines {
    &:before, &:after{
      -webkit-transform: none;
              transform: none;
      top:0;
      width: $button-size;
    }
  }
}

//three-lines to x
.lines-button.x.close{
  .lines {
    background: transparent;
    &:before, &:after{
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      top:0;
      width: $button-size;
    }
    &:before{
      -webkit-transform: rotate3d(0,0,1,45deg); 
              transform: rotate3d(0,0,1,45deg); 
    }
    &:after{
      -webkit-transform: rotate3d(0,0,1,-45deg); 
              transform: rotate3d(0,0,1,-45deg); 
    }
  }
}

//three-lines to x method 2
.lines-button.x2{
    .lines{
      transition: background .3s .5s ease;

      &:before, &:after{
        //set transform origin
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
        transition: top .3s .6s ease, -webkit-transform .3s ease;
        transition: top .3s .6s ease, transform .3s ease;
      }
    }
}

.lines-button.x2.close{
  .lines {
    transition: background .3s 0s ease;
    background: transparent;

    &:before, &:after{
      transition: top .3s ease, -webkit-transform .3s .5s ease;//delay the formation of the x till the minus is formed  
      transition: top .3s ease, transform .3s .5s ease;//delay the formation of the x till the minus is formed  
      top:0;
      width: $button-size;
    }
    &:before{
      -webkit-transform: rotate3d(0,0,1,45deg); 
              transform: rotate3d(0,0,1,45deg); 
    }
    &:after{
      -webkit-transform: rotate3d(0,0,1,-45deg); 
              transform: rotate3d(0,0,1,-45deg); 
    }
  }
}
