minicolors

by chrischilcoat

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="ui-yakabox-appNav ui-theme-28 ui-yakabox-banner-layout-1 ui-yakabox-banner-theme-blue ui-yakabox-banner-size-desktop" style="" 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;
  background:black
}



.form-control {
  padding: 6px 4px;
    }

.colorpicker-alpha {display:none !important;} .colorpicker{ min-width:128px !important;}

.ui-yakabox-appNav {
  overflow:hidden;
}

.ui-yakabox-appNav h2 {color:inherit;}

@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 );
}




.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
    border: 0 solid #9e9e9e;
    background-color: #f0f0f0;
    background-image: -moz-linear-gradient(top,#fdfdfd,#ddd);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fdfdfd),to(#ddd));
    background-image: -webkit-linear-gradient(top,#fdfdfd,#ddd);
    background-image: -o-linear-gradient(top,#fdfdfd,#ddd);
    background-image: linear-gradient(to bottom,#fdfdfd,#ddd);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffdfdfd', endColorstr='#ffdddddd', GradientType=0);
    zoom: 1;
}


.btn-theme {
  width:30px;
  height:34px;
  border-radius:0;
  border:0px solid gray;
  margin:0 2px;
  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;
;
  border:6px solid #ffffff;
  border-radius:100%;
   outline: 0;
 box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  -moz-outline-style: none;
}
.btn-theme:focus,
.btn-theme:active,
.btn-theme:focus:hover { 
   outline: none !important;
 
  -moz-outline-style: none;
    -webkit-box-shadow:...

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').css("background","");
  //$('#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');
 ...