<section id="sect"> 
  <h1>Flexible<small>*</small> Radial Menu in CSS</h1>
  <nav>
    <ul>
      <li><span class="itm">
        <h2><a href="#" class="material-icons">menu</a></h2>
      </span></li>
      <li><span class="itm">
        <h2><a href="#" class="material-icons">alarm</a></h2>
      </span></li>
      <li><span class="itm">
        <h2><a href="#" class="material-icons">fingerprint</a></h2>
      </span></li>
      <li><span class="itm">
        <h2><a href="#" class="material-icons">power_settings_new</a></h2>
      </span></li>
      <li><span class="itm">
        <h2><a href="#" class="material-icons">opacity</a></h2>
      </span></li>
      <li><span class="itm">
        <h2><a href="#" class="material-icons">stars</a></h2>
      </span></li>
      <li><span class="itm">
        <h2><a href="#" class="material-icons">touch_app</a></h2>
      </span></li>
      <li><span class="itm">
        <h2><a href="#" class="material-icons">mic</a></h2>
      </span></li>
      <li><span class="itm">
        <h2><a href="#" class="material-icons">ring_volume</a></h2>
      </span></li>
      <li><span class="itm">
        <h2><a href="#" class="material-icons">wifi</a></h2>
      </span></li>
    <li><span class="itm">
        <h2><a href="#" class="material-icons">message</a></h2>
      </span></li>
    <li><span class="itm">
        <h2><a href="#" class="material-icons">gavel</a></h2>
      </span></li>
    <li><span class="itm">
        <h2><a href="#" class="material-icons">import_contacts</a></h2>
      </span></li>
    <li><span class="itm">
        <h2><a href="#" class="material-icons">bug_report</a></h2>
      </span></li>
    <!--    <li><span class="itm">
        <h2><a href="#" class="material-icons">dialpad</a></h2>
      </span></li>
    <li><span class="itm">
        <h2><a href="#" class="material-icons">mail_outline</a></h2>
      </span></li> -->
    </ul>
  </nav>
  <p>Proof of concept for a radial menu in full css, accomplished with some little help of <a href="http://alistapart.com/author/heydonworks">Heydon Pickerings'</a> article on <a href="http://alistapart.com/" target="_blank">A List Apart</a> about <a href="http://alistapart.com/article/quantity-queries-for-css"
      target="_blank">quantity queries.</a></p><br />
  <p>* Play around with the comment brackets <small>(&lt;!-- --&gt;)</small> in the &lt;nav&gt; menu to add or remove items to see how it works. <small>Numbers are for debug</small></p>
</section>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
  <defs>
    <filter id="filter-goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
      <feComposite in="SourceGraphic" operator="atop" in2="goo"></feComposite>
    </filter>
    <filter id="filter-goo2">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 29 -14" result="goo"></feColorMatrix>
      <feComposite in="SourceGraphic" noperator="atop" in2="goo"></feComposite>
    </filter>
  </defs>
</svg>

// vars

$random_color: rgba(random(255),random(255),random(255),.5);

$c: ( // colors 
  s: #000,
  w: #fff,
  gr: #F0F0EF,
  r: #EC7263,
  y: #FEBE7E,
  br: #A75265,
  li: #57385C,
  bg: rgba(46, 230, 11, 0.5), //$random_color,
);

// set in settings
$f: unquote("'Podkova', serif"); 
$fz: 16px;

@function clr($col) { // usage: clr(s) from $c
  @return get($c, $col);
};

// ------------- settings -------

$time: .3s;

// --------- defaults ---------
* {
  &:focus {
    outline: 0;
  }
  
  &, &:before, &:after {
    box-sizing: border-box;
  }
}
@include placeholder(){
    font-family: $f;
}
// --------------------
html {
  background-color: clr(s);
  
  body {
    font-family: $f;
    font-size: $fz;
    color: clr(w);
    background-color: clr(bg);
  }
  
  &, body {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
}

h1 {
  font-size: 1.3em;
  margin-bottom: .5em;
}
p {
  a {
    color: clr(w);
    text-decoration: none;
    text-shadow: .2em .2em 0 rgba(clr(s), .75);

    &:hover {
      text-decoration: underline;
    }
  }
}

small {
  font-size: .7em;
  
  h1 & {
    vertical-align: top;
  }
}

#sect {
  width: 20em;
  height: 20em;
  margin: 10vmin auto 0;
  padding: 1em;
  position: relative;
  border-radius: .5em;
  //background-color: clr(g);
}

nav {
  display: block;
  padding: 2em 1em;
  margin: 0 auto;
  width: 5em;
  // filter: url(#filter-goo2);
}

ul {
  position: relative;
  background-color: rgba(clr(s), .5);
  border-radius: 50%;
  width: 3em;
  height: 3em;
  z-index: 100;
  transition: all $time $time;
  box-shadow: inset 0 -.1em 0 0 rgba(clr(w), 0), 0 0 0 0 rgba(clr(s), 0);
  
  &:hover {
    transition: all $time;
    box-shadow: inset 0 -.1em 0 0 rgba(clr(w), .1), 0 0 0 70em rgba(clr(s), .3);

    li:not(.closer) {
      opacity: 1;
      height: 200%;
      top: 0%;
      transition: all $time ease-out;
      
      .itm {
        box-shadow: 0 0 0 .25em rgba(clr(s), .3),  0 -.1em 0 rgba(clr(w), .2),  0 .1em 0 rgba(clr(s), .3);
        &:hover {
          background-color: clr(br);
          
            &:after {
              content: '';
              position: fixed;
              //background-color: rgba(red, .5);
              border-radius: 50%;
              width: 150%;
              height: 150%;
              top: -25%;
              left: -25%;
              z-index: -1;
            }
          }
      
        h2 {
          &:after {
            opacity: .5;
          }
        }
      }
    }
  }
  
  li {
    position: absolute;
    left: 0;
    height: 0%;
    top: 50%;
    display: inline-block;
    transform-origin: center bottom;
    transition: all $time ease-in $time/2;
    width: 3em;
    //margin-left: .5em;
    // background-color: red;
        
    &:not(:first-child) {
      opacity: 0;
    }
    &:first-child {
      .itm {
        box-shadow: 0 0 0 .15em rgba(clr(s), .3),
          0 -.1em 0 rgba(clr(w), .2),
          0 .1em 0 rgba(clr(s), .2);

      }
    }
    
    h2 {
      display: inline-block;
      white-space: nowrap;

      &:after {
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
        font-size: .6em;
        padding: 0 .3em;
        border-radius: 50%;
        background-color: clr(s);
        opacity: 0;
        line-height: 1;
        transition: all $time $time;
      }
      
      a {
        padding: .5em;
        color: rgba(clr(y), .5);
        text-decoration: none;
        transition: all $time;
        border-radius: 50%;
        
        &:hover {
          color: clr(y);
        }
        
        &:active {
          color: clr(w);
          box-shadow: inset .2em .2em .2em rgba(clr(s), .33);
        text-shadow: .2em .2em .2em rgba(clr(s), .33);
        }
      }
    }
    
    .itm {
      width: 3em;
      height: 3em;
      line-height: 3;
      vertical-align: middle;
      text-align: center;
      position: absolute;
      // overflow: hidden;
      top: 0;
      left: 50%;
      border-radius: 50%;
      background-color: clr(li);
      box-shadow: 0 0 0 0 rgba(clr(s), 0),  0 0 0 rgba(clr(w), 0),  0 .1em 0 rgba(clr(s), .3);
      display: inline-block;
      transition: all $time;
    }
  }
}
@for $i from 1 through 16 {
  li:nth-last-of-type(#{$i}):first-of-type, 
  li:nth-last-of-type(#{$i}):first-of-type ~ li {

    ul:hover & {
      height: 30% + ($i * 16);
    }
    
    
    @for $j from 1 through $i {

      ul:hover & {      
        &:nth-child(#{$j}) {
          //z-index: $j;
        }
      }
      
      &:nth-last-child(#{$j}) {
        z-index: $j;
        transform: rotate((-360deg / $i) * $j);
        
        .itm {
          transform: translate(-50%, -50%) rotate((360deg / $i) * $j);
                    
          h2 {
            &:after {
              content: ' #{($i - $j) +1}';
              position: fixed;
            }
          }
        
        }
      }
    }
  }
  
}