UJHIJL export scheme

by PhilQ

HTML

<div class="m0">
  <div class="f0">
    <div class="q0">&nbsp;</div>
    <div class="q1">&nbsp;</div>
  </div>
  <div class="f1">
    <div class="q0">&nbsp;</div>
    <div class="q1">&nbsp;</div>
  </div>
</div>
<div class="m1">
  <div class="f0">
    <div class="q0">&nbsp;</div>
    <div class="q1">&nbsp;</div>
  </div>
  <div class="f1">
    <div class="q0">&nbsp;</div>
    <div class="q1">&nbsp;</div>
  </div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
}
html {
  background-color: #fff;
}
body {
  //opacity: 0.5;
}
div {
  float: left;
  display: inline-block;
  width: 50%;
  box-sizing: content-box;
  height: 35px;
  padding-top: 35px;
  position: relative;
}

//$m0: #e67e22;
//$m1: #8e44ad;
$m0: #f0b47e;
$m1: #ba87d0;

//$f0: 5deg;
//$f1: -5deg;
$f0: 10%;
$f1: 20%;

// $q0: 3%;
// $q1: -3%;
$q0: 5%;
$q1: 10%;

.m0 {
  background-color: $m0;
  
  .f0 {
    background-color: adjust-color($m0, $lightness: $f0);
    
    .q0 {
      background-color: adjust-color($m0, $lightness: ($f0+$q0));
    }
    
    .q1 {
      background-color: adjust-color($m0, $lightness: ($f0+$q1));
    }
  }
  
  .f1 {
    background-color: adjust-color($m0, $lightness: $f1);
    
    .q0 {
      background-color: adjust-color($m0, $lightness: ($f1+$q0));
    }
    
    .q1 {
      background-color: adjust-color($m0, $lightness: ($f1+$q1));
    }
  }
}

.m1 {
  background-color: $m1;
  
  .f0 {
    background-color: adjust-color($m1, $lightness: $f0);
    
    .q0 {
      background-color: adjust-color($m1, $lightness: ($f0+$q0));
    }
    
    .q1 {
      background-color: adjust-color($m1, $lightness: ($f0+$q1));
    }
  }
  
  .f1 {
    background-color: adjust-color($m1, $lightness: $f1);
    
    .q0 {
      background-color: adjust-color($m1, $lightness: ($f1+$q0));
    }
    
    .q1 {
      background-color: adjust-color($m1, $lightness: ($f1+$q1));
    }
  }
}

JavaScript

/*

.m0 {
  background-color: $m0;
  
  .f0 {
    background-color: adjust-color($m0, $hue: $f0);
    
    .q0 {
      background-color: adjust-color($m0, $hue: $f0, $lightness: $q0);
    }
    
    .q1 {
      background-color: adjust-color($m0, $hue: $f0, $lightness: $q1);
    }
  }
  
  .f1 {
    background-color: adjust-color($m0, $hue: $f1);
    
    .q0 {
      background-color: adjust-color($m0, $hue: $f1, $lightness: $q0);
    }
    
    .q1 {
      background-color: adjust-color($m0, $hue: $f1, $lightness: $q1);
    }
  }
}
.m1 {
  background-color: $m1;
  
  .f0 {
    background-color: adjust-color($m1, $hue: $f1);
    
    .q0 {
      background-color: adjust-color($m1, $hue: $f1, $lightness: $q0);
    }
    
    .q1 {
      background-color: adjust-color($m1, $hue: $f1, $lightness: $q1);
    }
  }
  
  .f1 {
    background-color: adjust-color($m1, $hue: $f0);
    
    .q0 {
      background-color: adjust-color($m1, $hue: $f0, $lightness: $q0);
    }
    
    .q1 {
      background-color: adjust-color($m1, $hue: $f0, $lightness: $q1);
    }
  }
}


*/