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="container-fluid">

<div class="row">
<nav class="navbar-default"> 
  <div class="container"> 


<div class=""> 

   


<!--
      <div class="btn-group navbar-btn" role="group" aria-label="Preview">
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Phones"><span sytle="border:2px solid black; height:7px; width:7px; display:block; height:30px;" style="
    display: block;
    height: 14px;
    border: 2px solid #555;
    width: 20px;
    margin-top: 3px;
    margin-bottom: 3px;
"></span>  <span class="sr-only"> One</span></button>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tablets"><span sytle="border:2px solid black; height:7px; width:7px; display:block; height:30px;" style="
    display: block;
    height: 14px;
    border: 2px solid #555;
    width: 20px;
    margin-top: 3px;
    margin-bottom: 3px;
"></span>  <span class="sr-only">Two</span></button>
        <button type="button" class="btn btn-default active" data-toggle="tooltip" data-placement="top" title="Desktops"><span sytle="border:2px solid black; height:7px; width:7px; display:block; height:30px;" style="
    display: block;
    height: 14px;
    border: 2px solid #555;
    width: 20px;
    margin-top:...

SCSS

body {
  margin: 10px;
  background:black
}

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




.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;
 
  -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:...

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',...