<div id='container'>
  <v-style>
    .container {{selected.code}}
  </v-style>

  <div class='selectors'>
    <h1>Selectors </h1>
    <div>
      <h3>:nth-child()</h3>
      <span v-for='(s, index) in childSelectors' @click='setSelected(index, "child")' :class='{active: index == selectedIndex && selectorType =="child"}'>{{s.title}}</span>

      <h3>:nth-of-type()</h3>
      <span v-for='(s, index) in typeSelectors' @click='setSelected(index, "type")' :class='{active: index == selectedIndex && selectorType =="type"}'>{{s.title}}</span>
      
      <h4>Source</h4>
      <a href='http://nthmaster.com/' target='blank'>http://nthmaster.com/</a>
    </div>
  </div>
  <div class="demo-container">
    <div class="text">{{selected.text}}</div>
    <div class="code">
      <pre><code class='css'>{{selected.code}}</code></pre>
    </div>
    <div class="container">
      <ul>
        <component :is="getTag(index)" v-for='(count, index) in 30' :style='getTransition(index)'>{{count}}</component>
      </ul>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Poppins');

html {
  font-size: 1.5vmin;
  font-family: "Poppins";
}

$bg-color: #83d0c9;
$unselected:  rgba(255,255,255,0.1);
$selected: rgba(255,255,255,0.5);
$border-color: rgba(0,0,0,0.2);
$hover: rgba(255,255,255,0.3);
$text: darken($bg-color, 55%);

body {
  background-color: $bg-color;
  margin: 0;
  padding: 0;
  color: $text;
  
  * {
    box-sizing: border-box;

    &::after,
    &::before {
      box-sizing: border-box;
    }
  }
}

pre {
    background: rgba(255,255,255,0.5);
    padding: 1.5rem;
    border-radius: 0.3rem;
}

h1, h3 {
  margin: 0;
  margin-bottom: 1rem;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  display: flex;
  padding: 3rem 2rem;

  .selectors {
    width: 15%;
  
    div {
      
      span {
        cursor: pointer;
        padding: 0.5rem;
        margin: 0.2rem 0rem;
        transition: all 0.3s;
        border-radius: 0.3rem;
        display: block;
        &.active
        {
          background-color: $selected;
        }
        &:hover:not(.active)
        {
          background-color: $hover;
        }
      }
    }
  }
}
  .demo-container {
    padding: 0 3rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-grow: 1;
    
    .text {
      font-size: 1.5rem;
    }

    .code {
      font-size: 1.1rem;
    }

    .container {
      flex-grow: 1;

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
        height: 100%;
        grid-gap: 1rem;
        font-size: 1.4rem;
    
       
      }
      
       span, div {
          display: flex;
          justify-content: center;
          align-items: center;
          transition: background-color 0.3s;
          background-color:$unselected;
        }
        
        div
        {
          border-radius: 50%;
        }
    }
  }

Vue.component('v-style', {
  render: function(createElement) {
    return createElement('style', this.$slots.default)
  }
});

new Vue({
  el: "#container",
  data: {
    selectedIndex: 0,
    selectorType: "child",
    childSelectors: [{
        selector: "nth-child(2n)",
        code: `span:nth-child(2n) {
   background-color: #298EB2;
}`,
        text: "",
        title: "Specific"
      },
      {
        selector: "nth-child(n+5)",
        code: `span:nth-child(n+5) {
   background-color: #298EB2;
}`,
        text: "",
        title: "Positive range"
      },
      {
        selector: "nth-child(-n+9)",
        code: `span:nth-child(-n+9) {
   background-color: #298EB2;
}`,
        text: "",
        title: "Negative range"
      },
      {
        selector: "nth-child(n+4):nth-child(-n+8)",
        code: `span:nth-child(n+4):nth-child(-n+8) {
   background-color: #298EB2;
}`,
        text: "",
        title: "Generic Ranges"
      },
      {
        selector: "nth-child(n+2):nth-child(odd):nth-child(-n+9)",
        code: `span:nth-child(n+2):nth-child(odd):nth-child(-n+9) {
   background-color: #298EB2;
}`,
        text: "",
        title: "Advanced Generic Ranges"
      }
    ],
    typeSelectors: [{
      selector: ":nth-of-type(3)",
      code: `span:nth-of-type(3) {
   background-color: #298EB2;
}`,
      text: "",
      title: "Specific"
    },
    {
      selector: "span:nth-of-type(n+3)",
      code: `span:nth-of-type(n+3) {
   background-color: #298EB2;
}`,
      text: "",
      title: "Positive Type Ranges"
    },
    {
      selector: "span:nth-of-type(-n+4)",
      code: `span:nth-of-type(-n+4) {
   background-color: #298EB2;
}`,
      text: "",
      title: "Negative Type Ranges"
    },
    {
      selector: "span:nth-of-type(n+3):nth-of-type(-n+6)",
      code: `span:nth-of-type(n+3):nth-of-type(-n+6) {
   background-color: #298EB2;
}`,
      text: "",
      title: "Generic Type Ranges"
    }
    ]
  },
  methods: {
    setSelected: function(selectorIndex, type) {
      this.selectorType = type;
      this.selectedIndex = selectorIndex;
    },
    getTransition: function(index) {
      return {
        "transition-delay": 0.01 * index + "s"
      };
    },
    getTag: function(index){
      if(this.selectorType == 'child')
        return "span";
        
      if(this.selectorType == 'type')
        return (index % 2) ? "div" : "span";
        
    }
  },
  mounted: function() {

  },
  computed: {
    selected: function() {
      let selectorArray = this.childSelectors;
      if (this.selectorType == 'type')
        selectorArray = this.typeSelectors;

      return selectorArray.slice(this.selectedIndex, this.selectedIndex + 1)[0];
    },
    getStyle: function() {
      return ["li" + this.selected.selector];
    }
  }
})