popover.less

/*  Colors */
@lightCharcoal: #777779;
@lighterGrey: #FAFAFA;
@lightGrey: #F1F2F2;
@darkGrey: #CCCCCC;
@grey: #E6E6E6;

@charcoal: #333335;
@orange: #D9591E;
@black: #000000;
@white: #ffffff;
@green: #5aad52;
@blue: #488FCD;
@red: #d06268;

@popoverHeaderHeight: 45px;
@popoverCarrotHeight: 18px;
@popoverCarrotWidth: 18px;

@hoverOpacity: .5;

.hoverColor (@color: @white, @strength: 10%){
    background-color: darken(@color, @strength);
}

html{
    font-size: 100%;
}

.borderBox {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.hover(){
     &:hover {
         opacity: @hoverOpacity;
     }
 }

#popoverWrapper {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    position: fixed;
    height: 100%;
    width: 305px;
    padding-top: @popoverCarrotHeight - 4;
    visibility: hidden;
    top: 0;
    left: 0;
    .borderBox;
    z-index: 10;
    //pointer-events allows click-throughs to popover. Possibly find better fix in the future.
    pointer-events: none;
    //-webkit-transform: translateZ(0);
}

#popover {
    position: relative;
    .borderBox;
    height: 100%;
    width: 100%;
    color: @charcoal;
    visibility: visible !important;
    z-index: 10;
    //-webkit-transform: translateZ(0);

    a {
        color: @charcoal;
    }
}

#popoverHeader {
    position: absolute;
    z-index:1;
    .borderBox;
    width: 100%;
    overflow: hidden;
    //border-bottom: 1px solid @charcoal;
    line-height: @popoverHeaderHeight;
    font-size: .8em;
    background: @white;
    border-bottom: 1px solid @darkGrey;
    visibility: visible;
    border-right: 1px solid @darkGrey;
    border-left: 1px solid @darkGrey;
    height: 49px;
    pointer-events: auto;
    border-top: 1px solid @darkGrey;
    .roundedCornersTop;
}

#popoverArrow {
    position: absolute;
    float: left;
    margin-top: -1* @popoverCarrotHeight+3;
    margin-left: -1 * (@popoverCarrotWidth / 2)-2; /* Half width */
    visibility: visible;
    left: 50%;
    z-index: 2;
    line-height: 20px;

    height: @popoverCarrotHeight;
    width: @popoverCarrotWidth;

    font-size: 18px;
    color: #fff;
    -webkit-transform: scale(2, 1);
    -moz-transform: scale(2, 1);
    -ms-transform: scale(2, 1);
    -o-transform: scale(2, 1);
    transform: scale(2, 1);
    text-shadow: 0 -1px 1px #ccc;
    //background: url('popupSprite1.png') no-repeat 0px 0px;
}

.flipArrow{
    text-shadow: 0 1px 1px #ccc !important;
    //background: url('popupSprite1.png') no-repeat 0px -20px !important;
    //-webkit-transform: rotate(180deg);
    //-moz-transform: rotate(180deg);
    //filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

.hover(){
    &:hover {
        opacity: @hoverOpacity;
    }
}

#popoverClose, #popoverBack{
    position: absolute;
    cursor: pointer;
    height: 49px;
    line-height: 49px;
    font-size: 1.25em;
}

#popoverCloseIcon, #popoverBackIcon{
    display: inline-block;
    color: #555;
    margin: -2px 10px;
    font-weight: 800;
}

#popoverClose {
    top: 0;
    right: 0;
}

#popoverCloseIcon{
    font-size: 1.05em;
}

#popoverBackIcon {
    position: relative;
    top: -2px;
    font-size: .975em;
    -webkit-transform: scale(.75,1);
    -moz-transform: scale(.75, 1);
    -ms-transform: scale(.75, 1);
    -o-transform: scale(.75, 1);
    transform: scale(.75, 1);
}

#popoverBackIcon:hover, #popoverCloseIcon:hover{
    color: #333335;
}

#popoverTitle{
    white-space: nowrap;
    text-align: center;
    max-width: 225px;
    overflow: hidden;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    .borderBox;
}

#popoverContentWrapper {
    position: relative;
    overflow: visible !important;
    padding-top: 0px;
    height: 100%;
    width: 100%;
    .borderBox;
}

.roundedCornersTop{
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -ms-border-top-left-radius: 5px;
    -o-border-top-left-radius: 5px;
    border-top-left-radius: 5px;

    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -ms-border-top-right-radius: 5px;
    -o-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

.roundedCornersBot{
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    -ms-border-bottom-left-radius: 5px;
    -o-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;

    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -ms-border-bottom-right-radius: 5px;
    -o-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#popoverContent {
    border-top: 1px solid @darkGrey;
    visibility: visible;
    position: relative;
    overflow: auto;
    min-height: 43px;
    max-height: 100%;
    width: 100%;
    text-align: left;
    font-size: .75em;
    background: @white;
    box-shadow: 0px 12px 15px -6px #888;
    border-right: 1px solid @darkGrey;
    border-left: 1px solid @darkGrey;
    border-bottom: 1px solid @darkGrey;
    .roundedCornersBot;
    .roundedCornersTop;
    .borderBox;
    .last {
        border-bottom: none;
        padding-bottom: 13px;
    }
}

.popoverContentRow {
    display: block;
    cursor: pointer;
    padding: 12px 23px;
    border-bottom: 1px solid @lightGrey;
}

.popoverContentRow:hover{
    background: @grey;
}

@media only screen and (max-width:390px) {
    #popoverWrapper {
        //width: 90%;
    }
}

// ========================================================================
//                        jScrollPane Specific Css
// ========================================================================
#popoverContentWrapper .jspPane{
    width: 100% !important;
    //border-radius: 8px;
    -webkit-box-shadow: 0 0 10px @lightCharcoal;
    box-shadow: 0 0 10px @lightCharcoal;
}

#popoverContentWrapper .jspContainer {
    //TODO: Find better fix.
    //overflow: visible;
}
#popoverContentWrapper .jspDrag {
    background: @lightCharcoal;
}

#popoverContentWrapper .jspCapTop {
    display: block;
    height: @popoverHeaderHeight+4;
}
#popoverContentWrapper .jspCapBottom {
    display: block;
    height: 2px;
}

#popoverWrapper, #popover, #popoverContentWrapper .jspContainer{
    pointer-events: none;
}

#popoverWrapper .jspPane, #popoverWrapper .jspVerticalBar, #popoverHeader, #popoverContent{
    pointer-events: auto;
}