JSFiddle - React, Tailwind, and code Playground

Config Windows

by chrischilcoat

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/themes/darkly/ui_dark.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<div class="ui-yakabox-dashboard-graph-config">
  <div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block;">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="myModalLabel">New Features!</h4>
        </div>
        <div class="modal-body clearfix">
          <div class="row" style="border-bottom: 1px solid rgb(229, 229, 229); background:#efefef url('https://www.reabilityamd.com.br/wp-content/themes/reability/images/textures/worn_dots.png'); margin:-20px -20px 20px; padding: 0;">
            <div>
              <div class="">
                <div class="">
                <img class="" style="width:100%;" src="https://childev8.yakabod.net/prototype/folders_broadcast/ui-draganddrop.png"/>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <h4>Drag and Drop</h4>
              <p>You can now upload new files or update existing ones by dropping them into folders.</p>
              <p><a href="#">Find out More...</a></p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn...

SCSS

.ui-yakabox-dashboard-graph-config {
  
  .control-label {
    text-align:left !important;
  }
  .modal-dialog {
    max-width:600px;
  }
  .chart {
    margin: 0 auto;
    width: 250px;
    height: 250px;
    position: relative;
  }
  .doughnutTip {
    position: absolute;
    float: left;
    min-width: 30px;
    max-width: 300px;
    padding: 5px 15px;
    border-radius: 1px;
    background: rgba(0,0,0,.8);
    color: #ddd;
    font-size: 17px;
    text-shadow: 0 1px 0 #000;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    letter-spacing: .06em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transform: all .3s;
    pointer-events: none;
  }
  .doughnutTip:after {
    position: absolute;
    left: 50%;
    bottom: -6px;
    content: "";
    height: 0;
    margin: 0 0 0 -6px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 6px solid rgba(0,0,0,.7);
    line-height: 0;
  }
  .doughnutSummary {
    display:none;
  }
  .doughnutSummaryTitle {
    display:none;
  }
  .doughnutTypeTitle {
    display:none;
  }
  .doughnutSummaryNumber {
    display:none;
  }
  .chart path:hover { 
    opacity: .65; 
  }
  .ui-chart {
    .list-group {
         text-align: center;
    margin: 0;
    bottom: 20px;
    position: absolute;
    width: 100%;
    left: -1px;;
    display:none;

      .list-group-item {
        display:inline-block;
        border:none;
        text-align:center;
        padding:0;
      }
    }
  }
  .form-group {
    .list-group {
     // text-align:center;
      margin:0;
      .list-group-item {
        //display:inline-block;
        border:none;
        //text-align:center;
        padding:0;
        .fa {
        }
      }
    }
  }
  
}


.ui-chart div {
  font: 10px sans-serif;
  background-color: #35a8ff;
  text-align: right;
  margin: 0 20px;
  width:13px;
  display: inline-block;
}
.ui-chart {
  padding-left: 3px;
  height: 230px;
  padding: 20px 20px 50px 40px;
 ...

JavaScript

var $btnLH = $(".btnLH"),
  $btnLA = $(".btnLA"),
  $btnLV = $(".btnLV"),
  $btnLL = $(".btnLL"),
  $chart = $(".ui-chart"),
  $chartLL = $('.ui-chart-label-left'),
  $chartLB = $('.ui-chart-label-bottom'),
  $inputLL = $('.inputLL'),
  $inputLB = $('.inputLB'),
  $selectLB = $('.temp-select-LB'),
  $selectLL = $('.temp-select-LL'),
  $groupLL = $('.group-LL')
  resetChart = function() {
    $chart
      .removeClass('angle')
      .removeClass('vert')
      .removeClass('legend');
      
  },
  resetLabelBtns = function() {
    $btnLH.removeClass('active');
    $btnLA.removeClass('active');
    $btnLV.removeClass('active');
    $btnLL.removeClass('active');
    $(this).addClass('active');
  },
  setupLabels = function(e) {
    switch (e) {
      case 'Horizontal':
        resetLabelBtns();
        resetChart();
        $('.ui-chart .list-group').hide();
        $btnLH.addClass('active');
        break;
      case 'Angled':
        resetLabelBtns();
        resetChart();
         $('.ui-chart .list-group').hide();
        $chart.addClass('angle');
        $btnLA.addClass('active');
        break
      case 'Vertical':
        resetLabelBtns();
        resetChart();
        $('.ui-chart .list-group').hide();
        $chart.addClass('vert');
        $btnLV.addClass('active');
        break;
      case 'Legend':
        resetLabelBtns();
        resetChart();
        $('.ui-chart .list-group').show();
        $chart.addClass('legend');
        $btnLL.addClass('active');
        break;
      default:

    }
  };

$btnLH.on('click', function() {
  setupLabels('Horizontal');
  event.preventDefault();
});
$btnLA.on('click', function() {
  setupLabels('Angled');
  event.preventDefault();
});
$btnLV.on('click', function() {
  setupLabels('Vertical');
  event.preventDefault();
});
$btnLL.on('click', function() {
  setupLabels('Legend');
  $groupLL.fadeIn();
  event.preventDefault();
});
$selectLL.change(function() {
  var $v = $(this).val();
  $inputLL.val($v);
 ...