Flyout experiment

by samih

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
<div class="flyout-container">
    <button>Click Me</button>
    <div class="flyout" style="display: none;" >
        <div class="flyout-bar">
            <div class="flyout-arrow"></div>
        </div>
        Testing
    </div>
</div>

CSS

@borderRadius: 5px;
@backgroundColor: rgba(175, 175, 175, 0.5);

.flyout-container {
    position: relative;
    margin-left: 80px;

    .flyout {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: @backgroundColor;
        top: 50px;
        left: -60px;
        border: 1px solid black;
        border-radius: @borderRadius;
        
        .flyout-bar {
            position: relative;
            top: -21px;
            left: 40%;
            width: 40px;
            height: 20px;
            border-bottom: 1px solid rgb(175, 175, 175);
            overflow: hidden;
            
            .flyout-arrow {
                position: relative;
            }
            
            .flyout-arrow:before, .flyout-arrow:after {
                content:'';
                position: relative;
                z-index: -1;
                top: 0;
                width: 0;
                border-top: 20px solid transparent;
            }
            
            .flyout-arrow:before {
                border-left: 20px solid @backgroundColor;
                left: 20px;
                width: 50%;
                    
            }
            .flyout-arrow:after {
                border-right: 20px solid @backgroundColor;
                left: 0px;
                width: 50%;
            }
        }
        
        .flyout-bar:before, .flyout-bar:after {
            content:'';
            position: relative;
            top: -21px;
            height: 0;
            border-top: 0px solid transparent;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
              -ms-box-sizing: border-box;
                  box-sizing: border-box;
        }
        
        .flyout-bar:before {
            left: 0;
            width: 70%;
            border-right: 30px solid transparent;
        }
        
        .flyout-bar:after {
            right:0;
            width: 30%;
            border-left:...

JavaScript

/**
    LESS SHIM
*/
(function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); }());

$('.flyout-container button').on('click', function(event){
    $('.flyout').toggle();
});