JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<div id="trash" ng-app="myApp" ng-controller="test">
    <div class="trash-content" ng-class="{ 'h': ! showDetails }">
        <ul>
            <li class="trash-li" ng-repeat="e in elems"> <a>{{e.title}}</a>

            </li>
        </ul>
    </div>
    <button id="trash-btn" ng-click="showDetails = ! showDetails" ng-class="{ 'big': showDetails }">Trash</button>
</div>

CSS

#trash {
    position: fixed;
    bottom:10px;
    right:0;
    z-index: 999;
    font-family: Open Sans, Arial, sans-serif;
}
.trash-content {
    width: 300px;
    height: 400px;
    background-color: lightgrey;
    border: 1px solid #e0e0e0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px;
    color: rgb(102, 103, 105);
    transition: 1s linear all;
    -webkit-transition: 1s linear all;
    opacity: 1;
}
.h {
    max-height: 0;
    max-width: 0;
    opacity: 0;
}
.trash-content.hidden {
    max-height: 0;
    max-width: 0;
}
#trash-btn {
    float: right;
    border: none;
    color: white;
    fill: white;
    text-transform : uppercase;
    background-color: #f44336;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 10px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
}
#trash-btn:hover {
    background-color: #ef5350;
    padding-right: 15px;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    transition-duration: 0.2s;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
}
#trash-btn:active {
    background-color: #e57373;
}
#trash-btn:active, #trash-btn:focus, #trash-btn:visited {
    outline: none;
}
#trash-btn.big {
    width : 100%;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
}
.trash-content ul {
    list-style-type: none;
    margin: 0;
    padding : 0;
}
.trash-content ul .trash-li {
    max-width:100%;
    height : 40px;
    line-height: 40px;
    padding: 0 10px 0 10px;
    border-bottom: 1px solid #e0e0e0;
}
.trash-content ul .trash-li .restore, .trash-content ul .trash-li a {
    display: inline-block;
}
.trash-content ul .trash-li a {
    float: left;
   ...

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('test', ['$scope', function ($scope) {

    $scope.elems = [{
        title: 'Watch Out'
    }, {
        title: 'Eminem - Guilty Conscience ft. Dr. Dre'
    }, {
        title: 'Fifty Kay feat. Noah Caine'
    }, {
        title: 'Earl Sweatshirt - Mantra (I Don\'t Like S**t, I Don\'t Go Outside)'
    }];
}]);