CMS STYLES

by Greggg

HTML

<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.38/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.38/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.38/js/uikit.min.js"></script>
<div class="pb-sidebar">

  <div class="pb-sidebar-content">

    <div class="pb-sidebar-styles">

      <a href="#" class="uk-button uk-button-small uk-flex uk-flex-middle pb-sidebar-back-button">
        <span class="" data-uk-icon="icon: chevron-left"></span>Design
      </a>

      <div class="uk-margin-large-top" uk-grid>
        <div class="uk-width-expand">
          <h3 class="uk-margin-remove-bottom">Styles</h3>
        </div>
      </div>
      <hr class="uk-margin-small-top">


      <h4 class="">Typography</h4>
            <div class="uk-flex uk-flex-middle uk-visible-toggle uk-position-relative pb-margin-xsmall">
        <div class="pb-style-reset"></div>
        <div class="uk-width-expand uk-text-truncate uk-text-capitalize">Heading 1</div>
        <div class="uk-width-auto ">
          <input class="uk-input uk-form-blank" type="text" value="26px">
        </div>
      </div>

      <div class="uk-flex uk-flex-middle uk-visible-toggle uk-position-relative pb-margin-xsmall">
        <div class="pb-style-reset"></div>
        <div class="uk-width-expand uk-text-truncate uk-text-capitalize">Text transform</div>
        <div class="uk-width-auto ">
          <div uk-form-custom="target: true">
            <select>
              <option value="none">None</option>
              <option value="lowercase">Lowercase</option>
              <option value="uppercase">Uppercase</option>
              <option value="capitalize">Capitalize</option>
              <option...

CSS

html {
  background: #444;
  overflow: hidden;
  
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pb-sidebar-back-button .uk-icon {
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.pb-sidebar-back-button:hover .uk-icon {
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px);
}

h3 {
  text-transform: uppercase;
  font-size: 1rem;
}

h4 {
  text-transform: uppercase;
  font-size: 0.875rem;
}

.pb-sidebar-content h3,
.pb-sidebar-content h4,
.pb-sidebar-content >:not(.pb-sidebar-home) li a {
  padding-left: 20px
}

.pb-sidebar-content .uk-flex {
  padding: 0 20px;
  font-size: 0.875rem;
}

.pb-sidebar {
  background: #eee;
  box-sizing: border-box;
  display: block;
  position: fixed;
  min-width: 350px;
  max-width: 600px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.pb-sidebar-content {
  box-sizing: border-box;
  position: absolute;
  top: 45px;
  right: 0;
  bottom: 45px;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overflow: hidden;
}

.pb-sidebar-styles {
  box-sizing: border-box;
  width: 350px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transition: left 0.2s ease-in-out;
  transition: left 0.2s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.pb-sidebar-device-tools {
  box-sizing: border-box;
  position: absolute;
  min-width: 350px;
  max-width: 600px;
  height: 60px;
  right: 0;
  //bottom: 45px;
  bottom: 0;
  left: 0;
  background: #eee;
  margin: 0;
  padding: 15px;
}

.pb-style-form {
  padding-right: 20px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDIwIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwb2x5bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNhMGEwYTAiIHN0cm9rZS13aWR0aD0iMiIgcG9pbnRzPSI1LjUgMiAxMCA2LjUgMTQuNSAyIj48L3BvbHlsaW5lPjwvc3ZnPg==);
  background-repeat:...

JavaScript

let colorpickers = document.querySelectorAll('.pb-colorpicker-color');
let sidebar = document.querySelector('.pb-sidebar-styles');



// set hooks for each target element
colorpickers.forEach(function(colorpicker) {
  let color = window.getComputedStyle(colorpicker).getPropertyValue('background-color');
  colorpicker.setAttribute('data-color', color);
  new CP(colorpicker);
});

CP.each(function($) {
  $.picker.classList.add('uk-card', 'uk-card-default', 'uk-card-body');

  // Create dom
  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;

  let field = document.createElement('input');
  field.type = 'text';
  field.classList.add('cp-text-input');

  let wrapper = document.createElement('div'),
    alphawrapper = document.createElement('div'),
    box_1 = document.createElement('div'),
    box_2 = document.createElement('div');

  wrapper.className = 'wrapper';
  alphawrapper.className = 'alphawrapper';
  box_1.className = 'color-view';
  box_2.className = 'color-view';
  alpha.className = 'alpha-channel';

  var test2 = $.picker.appendChild(alphawrapper)
  test2.appendChild(alpha);
  //$.picker.appendChild(alpha);
  var test = $.picker.appendChild(wrapper);
  test.appendChild(box_1);
  test.appendChild(box_2);
  $.picker.appendChild(field);
  
   $.on("fit", function() {
    let currentPickerTop = $.picker.getBoundingClientRect().top,
        currentPickerLeft = $.picker.getBoundingClientRect().left,
        currentPickerWidth = $.picker.getBoundingClientRect().width,
        currentTargetTop = $.target.getBoundingClientRect().top,
        currentTargetWidth = $.target.getBoundingClientRect().width;
    $.picker.style.left = (currentPickerLeft  - currentPickerWidth + currentTargetWidth) + 'px';
    $.picker.style.top =  (currentTargetTop + currentTargetWidth) + 'px';
  	sidebar.addEventListener('scroll',...