<header>
  <h1>#1 - Dicey Loader With Flexbox</h1>
</header>

<!-- 
  Our Dice's Faces
-->
<div class="dice">
  
  <div class="face first-face">
    <div class="dot"></div>  
  </div>
  
  <div class="face second-face">
    <div class="dot"></div>  
    <div class="dot"></div>  
  </div>
  
  <div class="face third-face">
    <div class="dot"></div>  
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  
  <div class="face fourth-face">
    <div class="column">
      <div class="dot"></div>  
      <div class="dot"></div>  
    </div>
    <div class="column">
      <div class="dot"></div>  
      <div class="dot"></div>  
    </div>    
  </div>
  
  <div class="face fifth-face">
    <div class="column">
      <div class="dot"></div>  
      <div class="dot"></div>  
    </div>
    <div class="column">
      <div class="dot"></div>
    </div>
    <div class="column">
      <div class="dot"></div>  
      <div class="dot"></div>  
    </div>    
  </div>
  
  <div class="face sixth-face">
    <div class="column">
      <div class="dot"></div>  
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="column">
      <div class="dot"></div>  
      <div class="dot"></div>  
      <div class="dot"></div>
    </div>    
  </div>
  
</div>


<p>Wait, please...</p>

// DEMO SET-UP
$col-1: #F44336
$col-2: #E91E63
$col-3: #9C27B0
$col-4: #673AB7
$col-5: #3F51B5
$col-6: #2196F3

body
  font-family: 'Crafty Girls', cursive
  font-size: 16px 
h1
  padding: 3rem 1rem 0
  text-align: center
  line-height: 1.3
  letter-spacing: 4px
  font-size: 2em
p
  padding: 3rem 1rem 0
  text-align: center
  line-height: 1.3
  letter-spacing: 4px
  font-size: 1.125em

  
  
  

/******************************
 FLEXBOX STYLES
 ******************************/

// CENTERING OUR FACES
.dice
  display: flex
  margin-top: 4rem
  justify-content: center
 

// OUR DICE FACES
.face
  display: flex
  width: 3rem
  height: 3rem
  margin: 0 .7rem
  padding: .5rem
  border-radius: 5px
  opacity: 0
  .dot
    width: .8rem
    height: .8rem
    background: $col-1
    border-radius: 50% 
  &:nth-child(1)
    border: 2px solid $col-1
    animation: waves 5s linear infinite
    .dot
      background: $col-1
  &:nth-child(2)
    border: 2px solid $col-2
    animation: waves 5s .2s linear infinite
    .dot
      background: $col-2
  &:nth-child(3)
    border: 2px solid $col-3
    animation: waves 5s .4s linear infinite
    .dot
      background: $col-3
  &:nth-child(4)
    border: 2px solid $col-4
    animation: waves 5s .6s linear infinite
    .dot
      background: $col-4
  &:nth-child(5)
    border: 2px solid $col-5
    animation: waves 5s .8s linear infinite
    .dot
      background: $col-5
  &:nth-child(6)
    border: 2px solid $col-6
    animation: waves 5s 1s linear infinite
    .dot
      background: $col-6
// Vertical centering  
.first-face
  justify-content: center
  align-items: center

// Individual positioning (align-self)
.second-face
  justify-content: space-between
  .dot:last-of-type
    align-self: flex-end

// More individual positioning
.third-face
  justify-content: space-between
  .dot:nth-child(2)
    align-self: center
  .dot:last-of-type
    align-self: flex-end
    
    
// Nesting flex containers with different flex-direction
.fourth-face
  justify-content: space-between
  .column
    display: flex
    flex-direction: column
    justify-content: space-between

// more nesting  
.fifth-face
  justify-content: space-between
  .column
    display: flex
    flex-direction: column
    justify-content: space-between
    &:nth-child(2)
      justify-content: center

// Again nesting
.sixth-face
  justify-content: space-between
  .column
    display: flex
    flex-direction: column
    justify-content: space-between
    
    
/*******************************************************/
    
    
// Lets animate our faces!

@keyframes waves
  0%
    transform: translateY(0)
    opacity: 0
  4%
    transform: translateY(-25px)
    opacity: 1
  8%
    transform: translateY(0)
    opacity: 1
  70%
    opacity: 0

/***

Experimenting with Flexbox

Loading screen animation 

***/