krystalcampioni

angular.element(document).ready(function(){

    angular.module('myApp',[])
        .controller('myCtrl', ['$scope','store',function ($scope,store) {

            
            $scope.categories = store.getCategories();
            $scope.products = store.getProducts();
            
            $scope.filterProductsByCategory = function(category){

krystalcampioni

.color-wheel
  .lighten-colors
    ul
      each i in new Array(12)
        li   
  .default-colors
    ul
      each i in new Array(12)
        li  
  .darken-colors

krystalcampioni

$main-color : #13a3c7;
$how-dark: 25%;
$how-light: 25%;
$angle : 30;

krystalcampioni

@for $i from 1 through 12 {
  $new-angle:$angle*$i; // every time the loop starts again the $new-angle is updated with $angle * the current position of the list
  $new-color:adjust-hue($main-color,$new-angle);
  ul li:nth-of-type(#{$i}){
    border-left: 205px solid transparent;// this creates a triangle
    border-top: 120px solid  $new-color;// this creates a triangle
    height: 0;
    left: 50%;
    list-style: none;
    position: absolute;

krystalcampioni

.color-wheel{
  position: relative;
  div {
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
  }
} 

krystalcampioni

@for $i from 1 through 12 {
  $new-angle:$angle*$i; // every time the loop starts again the $new-angle is updated with $angle * the current position of the list
  ul li:nth-of-type(#{$i}){
    border-left: 205px solid transparent;// this creates a triangle
    border-top: 120px solid  $main-color;// this creates a triangle
    height: 0;
    left: 50%;
    list-style: none;
    position: absolute;
    top: 50%;

krystalcampioni

.protractor {
  @for $i from 1 through 24 {
    $new-angle: 15*$i;
    ul li:nth-of-type(#{$i}){   
      transform: rotate(#{$new-angle}deg);
      &:after {
        content: "#{$new-angle}°";
      }
    }
  }

krystalcampioni

.square-colors {
  @for $i from 1 through 3 {
    $new-angle: 90*$i;
    $new-color:adjust-hue($main-color,$new-angle);
    ul li:nth-of-type(#{$i}){
      background: $new-color;
    }
  }
}

krystalcampioni

.square-colors {
  @for $i from 1 through 3 {
    $new-angle: 90*$i;
    $new-color:adjust-hue($main-color,$new-angle);
    ul li:nth-of-type(#{$i}){
      background: $new-color;
    }
  }
}

krystalcampioni

<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 200">