// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com
- 
  let boxes = [
    {
      "headline": "1",
      "content": "🙈"
    },
    {
      "headline": "2",
      "content": "🙉"
    },
    {
      "headline": "3",
      "content": "🙊"
    },
  ];
  
.headline
  h1 Flex-Gap SASS Mixin
  p Why is there no grid-gap property in flexbox!? Let's just go for it and create a flex-gap property, by using SASS mixin functionality! <a style="text-decoration:underline" href="http://bit.ly/2kMFuY8" target="_blank">(for more details read the related Article)</a>.
  p // NOTE: in the meantime there is a gap property in flex-box! ^^

.stage.column
  .container--grid.row 
    each box in boxes
      .box
        p= box.headline
        p.emoj= box.content
  .container--flex.row 
    each box in boxes
      .box
        p= box.headline
        p.emoj= box.content

.switch-container
  p flex-row
  .switch
  p flex-column

.article
  a( href='http://bit.ly/2kMFuY8' target="_blank" ) 🔗 Read related Article

a( href='http://bit.ly/2JPuBjx' target="_blank" class='reference' ) 👋 Ali Soueidan

// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com


$gap: 20px

//
// Here are the two mixins related to the article
//


=flexGap( $gap, $direction: row, $element: div )
  > #{$element}
    @if $direction == row
      margin: 0 $gap/2
      &:first-child
        margin-left: 0
      &:last-child
        margin-right: 0
    @if $direction == column
      margin: $gap/2 0
      &:first-child
        margin-top: 0
      &:last-child
        margin-bottom: 0
      
//
// Here you can see how to use the mixins
//

body 
  display: flex
  flex-direction: column
  justify-content: space-around 
  align-items: center
  +flexGap( $gap, column )
    
.stage
  &.column
    display: flex
    flex-direction: column
    +flexGap( $gap*2, column )
  &.row
    display: flex
    +flexGap( $gap*2 )

.container--grid
  &.row
    display: grid 
    grid-gap: $gap*2
    grid-template-columns: repeat(3, 1fr)
  &.column
    display: grid 
    grid-gap: $gap*2

.container--flex
  &.row
    display: flex
    +flexGap($gap*2, row, "div")
  &.column
    display: flex 
    flex-direction: column
    +flexGap($gap*2, column)

.container--grid, .container--flex
  transition: .4s ease
  .box  
    // transition: .4s ease
      
      
     
//
// Some editional styling 
//

*
  margin: 0px
  padding: 0px
  box-sizing: border-box
  border: 0px
  outline: 0
  background-repeat: no-repeat
  appearance: none
  border-radius: 0
  vertical-align: middle
  font-weight: inherit
  font-style: inherit
  font-family: inherit
  text-decoration: none
  list-style: none
  user-select: text
  line-height: 1.333em

body 
  height: 100vh
  
.container--grid
  &:before 
    content: "I am a grid container"
  
.container--flex
  &.row
    &:before 
      content: "I am a flex container"
    &:after 
      content: ""flex
  &.column
    &:before 
      content: ""
    &:after 
      content: "I am a flex container"
  
.container--superFlex
  &:before 
    content: "I am a super-flex container"
  
.container--flex, .container--grid, .container--superFlex
  position: relative
  &:before 
    position: absolute
    width: 200px
    top: 50%
    left: 0 
    transform: translate(calc(-100% - 40px), -50%)
    text-align: right
    font-family: 'roboto'
    font-weight: 300
  &:after 
    position: absolute
    width: 200px
    top: 50%
    right: 0 
    transform: translate(calc(100% + 40px), -50%)
    text-align: left
    font-family: 'roboto'
    font-weight: 300
  .box
    position: relative
    padding: $gap
    height: 120px
    width: 120px
    box-shadow: 0 0 20px hsla(0, 0, 0, .25)
    background: hsla(0, 100, 100, .75)
    border: 1px solid #ddd
    border-radius: 5px
  &:hover 
    cursor: pointer
    background: hsla(249, 90, 77, 1)
    .box
      box-shadow: 0 0 0 hsla(0, 0, 0, 0)
      border-radius: 0
  
.headline
  width: 600px
  
h1, p, a
  font-family: 'roboto'
h1
  font-weight: 900
  margin-bottom: $gap/2
  color: #000
p 
  font-weight: 300
  color: #000
  &.emoj
    position: absolute
    bottom: 50%
    right: 50%
    transform: translate(50%,50%)
    font-size: 50px
    filter: grayScale(100%)
  
a 
  color: #000
    
    
.switch-container
  display: flex 
  justify-content: flex-start 
  align-items: center
  +flexGap( $gap*2 )
  p
    margin: 0
  .switch
    display: flex
    width: 60px
    background: hsla(0, 0, 0, .25)
    border: 3px solid hsla(0, 0, 0, .5)
    border-radius: $gap*4
    cursor: pointer
    transition: .4s ease
    &:before
      content: ""
      display: flex
      justify-content: center 
      align-items: center
      width: 30px
      height: 30px
      color: hsla(0, 100, 100, 1)
      background: hsla(0, 0, 0, .75)
      border-radius: 50%
      font-size: 15px
      transition: .2s ease
    &.on
      &:before
        transform: translateX( 24px ) rotate(360deg)

.reference
  position: absolute
  right: 24px 
  bottom: 24px
  color: #000
  text-decoration: none

// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com

// Setup swicth functions
const Switch = document.querySelector(".switch");
const FlexContainer = document.querySelector(".container--flex");
const GridContainer = document.querySelector(".container--grid");
const Stage = document.querySelector(".stage");

Switch.addEventListener("click", function() {
  if ( this.classList.contains("on") ){
    this.classList.remove("on");
    FlexContainer.classList.remove("column");
    FlexContainer.classList.add("row");
    GridContainer.classList.remove("column");
    GridContainer.classList.add("row");
    Stage.classList.remove("row");
    Stage.classList.add("column");
  } else {
    this.classList.add("on");
    FlexContainer.classList.remove("row");
    FlexContainer.classList.add("column");
    GridContainer.classList.remove("row");
    GridContainer.classList.add("column");
    Stage.classList.remove("column");
    Stage.classList.add("row");
  }
});