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>

SCSS

body {
  margin: 10px;
  background:black
}

.ui-inverse .navbar-inverse {
background: #424242;
.btn-default {
         background: black;
    border: 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 black;
  -moz-box-shadow: 0px 0px 1px 1px black;
  box-shadow: 0px 0px 1px 1px black;

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