CMS STYLES

by Greggg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit-icons.min.js"></script>
<script src="https://rawgit.com/tovic/color-picker/master/color-picker.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tovic/color-picker/master/color-picker.css">
<h3>GLOBAL STYLES</h3>

<div class="uk-flex uk-flex-middle uk-visible-toggle uk-position-relative">
  <div class="yo-style-reset"></div>
  <div class="uk-width-expand uk-text-truncate uk-text-capitalize">Primary color</div>
  <div class="uk-width-auto ">
    <a class="yo-colorpicker" href="#">
      <div class="yo-colorpicker-color variable-primary-color"></div>
    </a>
  </div>

</div>

<div class="uk-flex uk-flex-middle uk-visible-toggle uk-position-relative">
  <div class="yo-style-reset"></div>
  <div class="uk-width-expand uk-text-truncate uk-text-capitalize">Secondary color</div>
  <div class="uk-width-auto ">
    <a class="yo-colorpicker" href="#">
      <div class="yo-colorpicker-color variable-secondary-color"></div>
    </a>
  </div>
</div>

CSS

body {
  padding: 40px;
}

.variable-primary-color {
  background-color: #1e87f0;
}

.variable-secondary-color {
  background-color: #222;
}


.yo-style-reset {
  position: absolute;
  top: calc(50% - 8px);
  right: calc(100% + 5px);
  width: 16px;
  height: 16px;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiAgICA8Y2lyY2xlIGZpbGw9IiNiYmIiIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuNSI+PC9jaXJjbGU+PC9zdmc+) 50% 50% no-repeat;
  cursor: pointer;
}

.yo-style-reset:hover {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiAgICA8cGF0aCBzdHJva2U9IiM0NDQiIHN0cm9rZS13aWR0aD0iMS4xIiBkPSJNOCw4IEwxLDEiPjwvcGF0aD4gICAgPHBhdGggc3Ryb2tlPSIjNDQ0IiBzdHJva2Utd2lkdGg9IjEuMSIgZD0iTTgsMSBMMSw4Ij48L3BhdGg+PC9zdmc+) 50% 50% no-repeat;
}

.yo-colorpicker {
  width: 20px;
  border-radius: 500px;
  overflow: hidden;
  position: relative;
  display: block;
  cursor: pointer;
}

.yo-colorpicker-color {
  height: 20px;
}

JavaScript

let target = document.querySelectorAll('.yo-colorpicker-color');
let alpha = document.createElement('input');



alpha.type = 'range';
alpha.min = 0;
alpha.max = 1;
alpha.step = .1;
alpha.value = 1; // opaque
//alpha.onchange = change;
//alpha.oninput = change;



// set hooks for each target element
    for (var i = 0, len = target.length; i < len; ++i) {
        (new CP(target[i])).on("change", function(color) {
            this.target.style.backgroundColor = "#" + color;
        });
    }