minicolors

by DugSohn

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/9b5e646591ad0eecda388878bec13155.css?yakabox-vne-5.27.9-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>
<div class="container">
   <div class="ui-yakabox-appNav ui-theme-28 ui-yakabox-banner-layout-1 ui-yakabox-banner-theme-blue" style="display:;" role="tabpanel" aria-labelledby="headingOne" id="ybx-app-banner-28">
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-9 col-sm-9">
               <div class="row">
                  <div class="col-md-2 col-sm-3 col-xs-4">
                     <div id="IconUploaderWidget1556635357" class="IconUploaderWidget ui-yakabox-iconUploaderWidget"><img id="IUWThumbnail1556635357" class="IUWThumbnail" src="https://yakabod.yakabox.com/images/userupload/resourcetype/thumbnail_VM.png?v=20190430" style=""><button type="button" id="IUWEdit1556635357" class="btn btn-primary" title="Click to Edit Icon"><span class="fa fa-edit"></span>Edit</button></div>
                  </div>
                  <div class="col-md-10 col-sm-9 col-xs-8">
                     <img id="IUWThumbnail1556635357" class="IUWThumbnail" src="https://yakabod.yakabox.com/images/userupload/resourcetype/thumbnail_VM.png?v=20190430" style="width:70px;">
                     <h2 contenteditable="true">Windows Test VM Tracker</h2>
                     <div class="ui-app-banner-description">
                        <p contenteditable="true">Keep track of who is...

SCSS

body {
  margin: 10px;
}

.tooltip {
  min-width:200px;
}

.form-control {

    padding: 6px 4px;
    }

@mixin btnTheme($primary, $secondary) {
  background: $primary; /* Old browsers */
  background: -moz-linear-gradient(-45deg, $primary 0%, $primary 50%, $secondary 50%, $secondary 100%);
  background: -webkit-linear-gradient(-45deg, $primary 0%,$primary 50%,$secondary 50%,$secondary 100%);
  background: linear-gradient(135deg, $primary 0%,$primary 50%,$secondary 50%,$secondary 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$primary, endColorstr=$secondary,GradientType=1 );
}


.btn-theme {
  width:30px;
  height:34px;
  border-radius:0;
  border:0px solid gray;
  margin-bottom:4px;
  background:red;
  -webkit-box-shadow: 0px 0px 1px 1px #ccc;
  -moz-box-shadow: 0px 0px 1px 1px #ccc;
  box-shadow: 0px 0px 1px 1px #ccc;
  margin-right:10px;
  margin-bottom:15px;
  border:6px solid #ffffff;
  border-radius:100%;
   outline: 0;
 
  -moz-outline-style: none;
}
.btn-theme:focus,
.btn-theme:active,
.btn-theme:focus:hover { 
   outline: none !important;
 
  -moz-outline-style: none;
    -webkit-box-shadow: 0px 0px 1px 4px #66afe9;
  -moz-box-shadow: 0px 0px 1px 4px #66afe9;
  box-shadow: 0px 0px 1px 4px #66afe9;
}
.btn-theme:hover {
  -webkit-box-shadow: 0px 0px 1px 4px #adadad;
  -moz-box-shadow: 0px 0px 1px 4px #adadad;
  box-shadow: 0px 0px 1px 4px #adadad;
}
.btn-green {
  $primary: #21AC90;
  $secondary: #036D3D;
  @include btnTheme($primary, $secondary);
}
.btn-lightgreen {
  $primary: #40B56B;
  $secondary: #0B721F;
  @include btnTheme($primary, $secondary);
}
.btn-purple {
  $primary: #8F53A2;
  $secondary: #3B185C;
  @include btnTheme($primary, $secondary);
}
.btn-blue {
  $primary: #338ac3;
  $secondary: #3FA1E5;
  @include btnTheme($primary, $secondary);
}
.btn-orange {
  $primary: #E9B125;
  $secondary: #DB6E00;
  @include btnTheme($primary, $secondary);
}
.btn-darkorange {
  $primary: #DA742B;
  $secondary: #AD1F02;
  @include...

JavaScript

$('.btn-green').on('click', function() {
  removeThemes();
  $('.ui-yakabox-appNav').addClass('ui-yakabox-appNav ui-yakabox-banner-theme-green');
  $('#cp1').colorpicker('setValue', '#21AC90');
  $('#cp2').colorpicker('setValue', '#aaefe1');
});
$('.btn-lightgreen').on('click', function() {
  removeThemes();
  $('.ui-yakabox-appNav').addClass('ui-yakabox-appNav ui-yakabox-banner-theme-lightgreen');
  $('#cp1').colorpicker('setValue', '#40B56B');
  $('#cp2').colorpicker('setValue', '#d2efdd');
});
$('.btn-purple').on('click', function() {
  removeThemes();
  $('.ui-yakabox-appNav').addClass('ui-yakabox-appNav ui-yakabox-banner-theme-purple');
  $('#cp1').colorpicker('setValue', '#8F53A2');
  $('#cp2').colorpicker('setValue', '#e6d7ea');
});
$('.btn-blue').on('click', function() {
  removeThemes();
  $('.ui-yakabox-appNav').addClass('ui-yakabox-appNav ui-yakabox-banner-theme-blue');
  $('#cp1').colorpicker('setValue', '#338ac3');
  $('#cp2').colorpicker('setValue', '#cfe5f3');
});
$('.btn-orange').on('click', function() {
  removeThemes();
  $('.ui-yakabox-appNav').addClass('ui-yakabox-appNav ui-yakabox-banner-theme-orange');
  $('#cp1').colorpicker('setValue', '#E9B125');
  $('#cp2').colorpicker('setValue', '#fcf3de');
});
$('.btn-darkorange').on('click', function() {
  removeThemes();
  $('.ui-yakabox-appNav').addClass('ui-yakabox-appNav ui-yakabox-banner-theme-darkorange')
  $('#cp1').colorpicker('setValue', '#DA742B');
  $('#cp2').colorpicker('setValue', '#f8e6d9');
});
$('.btn-red').on('click', function() {
  removeThemes();
  $('.ui-yakabox-appNav').addClass('ui-yakabox-appNav ui-yakabox-banner-theme-red');
  $('#cp1').colorpicker('setValue', '#AD1F02');
  $('#cp2').colorpicker('setValue', '#fe937d');
});
$('.btn-lightgray').on('click', function() {
  removeThemes();
  $('.ui-yakabox-appNav').addClass('ui-yakabox-appNav ui-yakabox-banner-theme-lightgray');
  $('#cp1').colorpicker('setValue', '#DCE0E3');
  $('#cp2').colorpicker('setValue',...