JSFiddle - React, Tailwind, and code Playground

by jama5

HTML

<script src="https://raw.githubusercontent.com/myplanet/angular-deep-blur/master/angular-deep-blur.js"></script>
<div class="showcase-example" ng-app="demo">
  <div ng-init="isExpanded = true" deep-blur="isExpanded = false">
    <button ng-click="isExpanded = !isExpanded" ng-attr-expanded="{{ isExpanded }}">
      Toggle
    </button>
    <ul ng-show="isExpanded">
      <li>
        <button>One</button>
      </li>
      <li>
        <button>Two</button>
      </li>
      <li>
        <button>Three</button>
      </li>
    </ul>
  </div>
</div>

CSS

.showcase-example {
  padding: 8px;
  box-sizing: border-box;
}

.showcase-example > div {
  font-family: TradeGothic, sans-serif;
  font-size: 1em;
  color: #333;
}

.showcase-example button {
  font-family: TradeGothic, sans-serif;
  text-align: left;
  font-size: 1em;
  line-height: 1em;
  color: #333;
  cursor: pointer;
  background: transparent;
  border: none;
  margin: 0;
  padding: 0.5em;
  display: block;
  box-sizing: border-box;
  width: 100%;
}

.showcase-example button:focus {
  outline: none;
}

.showcase-example button:hover {
  background-color: #efefef;
}

.showcase-example > div > button {
  border: 1px solid #ddd;
  margin-bottom: -1px;
}

.showcase-example > div > button:after {
  content: '\25BC';
  color: #888;
  font-size: 0.5em;
  line-height: 0.5em;
  vertical-align: middle;
}

.showcase-example > div > button[expanded='true']:after {
  content: '\25B2';
}

.showcase-example ul {
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  list-style: none;
}

.showcase-example ul.ng-hide {
  display: block !important;
  visibility: hidden;
}

.showcase-example li {
  margin: 0;
  padding: 0;
}

.showcase-example li button:focus:after {
  content: ' \2714';
  color: #888;
  font-size: 0.75em;
  line-height: 0.75em;
  vertical-align: middle;
}

@media screen and (max-width: 1024px) {
  body {
    font-size: 130% !important;
  }
}

JavaScript

angular.module('demo', ['mp.deepBlur']);