JSFiddle - React, Tailwind, and code Playground

Column View Options

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">Column Options: Status</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:20px 8px 0;">
            <div class="col-xs-12">
              <div class="panel panel-default">
                <div class="panel-heading"><strong>Status</strong></div>
                <div class="panel-body ui-yakabox-colopts-backgrounds">
                  <ul class="list-group">
                    <li class="list-group-item list-group-item-success"><button class="btn btn-sm"><span cl</button>
                    
                    </button>Added</li>
                    <li class="list-group-item list-group-item-info">Assigned</li>
                    <li class="list-group-item list-group-item-warning">Completed</li>
                    <li...

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