JSFiddle - React, Tailwind, and code Playground

JIT Broadcast Help

by Meredith Crow

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/themes/ui-dialog/ui.themeroller.theme.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/jquery-ui.structure.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/bootstrap.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/yakabox5.css">
<div id="ybxBroadcastDialog" style="width: auto; min-height: 0px; max-height: none; height: 1156px;background: #05a5d1;" class="ui-dialog-content ui-widget-content">
  <style>
    #ybx-broadcast-content-body>.content-background {
      position: absolute;
      top: 0;
      width: calc(100% - 20px);
    }

  </style>

  <div id="ui-yakabox-broadcast-content">
    <div id="ybx-broadcast-modal-display" class="ui-yakabox-broadcaster-wrapper">
      <div id="ybx-broadcast-body-wrapper" class="container ybx-broadcast-container ui-bootstrap">
        <div class="ui-yakabox-broadcaster-header row">
          <div class="col-xs-8">
            <h4 style="margin:0;  white-space: nowrap; text-overflow: ellipsis; max-width:100%; overflow:hidden"><img style="height: 34px;" src="/images/yakaboxHeaderLogo.png"> <strong>STAGING:</strong> New updates have been added to your system. Check them out!</h4>
          </div>
          <div class="col-xs-4">
            <button id="jqBroadcastCloseBtn" class="btn btn-default pull-right" onclick="closeBroadcastWindow(this)"><i class="ui-icon ui-icon-close"></i> Close</button>
          </div>
 ...

SCSS

ui-widget-content {
     
		 }
		 
body {
	background:purple !important;
}
.control-label {
  color:#fff;
}
.form-group {
  border-color:lightblue;
}
.help-block {
  color: #fff;
  opacity:.7;
}
.list-group-item {
  color:black
}

.ui-dialog-title {
    float: left;
    margin: .1em .1em .1em .1em;
    white-space: nowrap;
    width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
		
		
}

.ui-widget-header {
    border: 1px solid gray;
    background: white;
    color: gray;
    font-weight: normal;
		vertical-align:middle;
}

		.ui-button {
    float: left;
		border: none;
    display: inline-block;
	 color: gray;
   padding-top: 0px;
   padding-bottom: 0px;
}
.contentAdd.ui-dialog.ui-yakabox-broadcast-alert {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 40px !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  background: transparent;
  z-index: 1028;
  -webkit-animation: fadein .3s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein .3s; /* Firefox < 16 */
  -ms-animation: fadein .3s; /* Internet Explorer */
  -o-animation: fadein .3s; /* Opera < 12.1 */
  animation: fadein .3s;
  opacity: 1;
  background: none;
  border: none !important;
  box-shadow:none !important;

  
  .ba-message .urn {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 17px;
    background: rgba(175,13,38,0.92);
    text-align: center;
    color: #fff;
    outline: none;
  }
  .ui-broadcast-dismiss-alert .btn-group {
    position: fixed;
    top: 10px;
    right: 27px;
    z-index:9999;
    .btn-link {
      color:#fff;
    }
    .dropdown-menu {
      left: auto;
      right: 0;
    }
  }
  .ui-dialog-titlebar {
    display: none;
  }
  .ui-resizable-handle {
    display:none !important;
  }
}
.ui-yakabox-banners-on {
  .contentAdd.ui-dialog.ui-yakabox-broadcast-alert .ba-message .urn {
    padding:10px;
  }
 ...