comindware.ui/resources/styles/popout.css

Comindware Core UI provides the basic components like editors, lists, dropdowns, popups that we so desperately need while creating Marionette-based single-page applications.

.popout {
    position: relative;
    display: inline-block;
}

.popout__action {
    height: 26px;
    margin: 0;
    padding: 0 20px 0 0;
    color: #182026;
    font-size: 14px;
    line-height: 26px;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    position: relative;
    white-space: nowrap;
    z-index: 5;
}

.popout__wrp {
    width: auto;
    font-size: 12px;
    position: fixed;
    background: #fff;
    border: 1px solid #c2c2c2;
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,.2);
    box-shadow: 0 0 8px rgba(0,0,0,.2);
    z-index: 600;
}

.popout__wrp.popout__down {
    margin-top: 5px;
}

.popout__wrp.popout__up {
    margin-top: -5px;
}

.popout__wrp.popout__flow-right {
    margin-left: -17px;
}

.popout__wrp.popout__flow-left {
    margin-right: -17px;
}

.popout__wrp:after {
    content: '';
    width: 14px;
    height: 10px;
    position: absolute;
}

.popout__down.popout__wrp:after {
    top: -10px;
    background: no-repeat 0 100% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAQAAAAu0KdMAAAArUlEQVQY02NggABGBiYGZgYWIGQGshgZkABIipWBY1fVrhoGDiALSRoixb0+9eS/U/82FjBwM7DBpKFSCwKO/fry/9v/E39WJgOlobpBUlwz3A5/+/QfBL78P/prUShUGugEzk7jg2/e/IeBT/8Pf5vlwcAFlGbgLFffd//5f2Tw7v/BTxNtgNJx8nuvP/qPDl7/P/i605hh95Hb/7GB5//3PWK4/v/ff+zg8X8An0aTj+nOW2IAAAAASUVORK5CYII=);
}

.popout__up.popout__wrp:after {
    bottom: -10px;
    background: no-repeat 0 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNkFBNUVCMDM1MjcxMUU1QTdBQkUxQ0UwMUM3RDlDQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowNkFBNUVCMTM1MjcxMUU1QTdBQkUxQ0UwMUM3RDlDQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA2QUE1RUFFMzUyNzExRTVBN0FCRTFDRTAxQzdEOUNDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA2QUE1RUFGMzUyNzExRTVBN0FCRTFDRTAxQzdEOUNDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+I8z4wgAAAOpJREFUeNqUkDFqhEAUhp82nspmIYEt0lik2QvsBXKIvULa3COFFtorajESwUKDiizqYEJw9n+wBuIqZn+Y4THv//43MxRFkRrHUd2jLMuUXpble5Ik9F8VRUEfkI7ayvPcR8omVFUVCSE+UT7qpmmeuUjTVHDampqmoTiOz7jpAxjBEwkFE3uklXVd30Bt21IYhhLQHl6fz/SpySloPCFVsnFS3/cUBME3PtCCx/1twPxn2ba9c133q+s6JaVUnuf94Ox57tN4m8txnINhGG+aptEwDEdMep17FsEr/MJPAXRa6q+CW7oIMABj8s2b/zfY7AAAAABJRU5ErkJggg==');
}

.popout__flow-left.popout__wrp:after {
    right: 10px;
}

.popout__flow-right.popout__wrp:after {
    left: 10px;
}

.popout__wrp.popout__down.popout__displacement-right, .popout__down.popout__displacement-left {
    margin-top: -17px;
}

.popout__wrp.popout__up.popout__displacement-right, .popout__up.popout__displacement-left {
    margin-top: 17px;
}

.popout__wrp.popout__displacement-right {
    margin-left: 10px;
}

.popout__wrp.popout__displacement-left {
    margin-right: 10px;
}

.popout__wrp.popout__displacement-right:after{
    transform: rotate(-90deg);
    left: -12px;
    top: 10px
}

.popout__wrp.popout__up.popout__displacement-right:after{
    transform: rotate(90deg);
    bottom: 10px;
    top: auto;
}

.popout__wrp.popout__displacement-left:after{
    transform: rotate(90deg);
    left: auto;
    right: -12px;
    top: 10px
}

.popout__wrp.popout__up.popout__displacement-left:after{
    transform: rotate(-90deg);
    bottom: 10px;
    top: auto;
}

.anchor {
    position: absolute;
    top:0;
    right:0;
    height: 100%;
    width: 20px;
    background: no-repeat 50% 50% url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4RThBN0M0NTE5MDMxMUU2OEEyQTlFN0NEMURGREJGMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4RThBN0M0NjE5MDMxMUU2OEEyQTlFN0NEMURGREJGMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhFOEE3QzQzMTkwMzExRTY4QTJBOUU3Q0QxREZEQkYxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhFOEE3QzQ0MTkwMzExRTY4QTJBOUU3Q0QxREZEQkYxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+kM2ITAAAAFVJREFUeNpMTYkNgEAMglinchpncAB7o+liyL2RhDThK/frFYkEUExImLjN3OI4aS3Rjedv1lK4kV6AujBhjUVSxpjtIV+wCmhm9WK0V6gVuF7iE2AAM+okJuwfTuIAAAAASUVORK5CYII=');
}

.popout__up .anchor {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUFDN0ExM0QxQzNEMTFFNkI1REQ5ODRCNTVBQUEyNUEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUFDN0ExM0MxQzNEMTFFNkI1REQ5ODRCNTVBQUEyNUEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhFOEE3QzQ1MTkwMzExRTY4QTJBOUU3Q0QxREZEQkYxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhFOEE3QzQ2MTkwMzExRTY4QTJBOUU3Q0QxREZEQkYxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+GyhEXQAAAE5JREFUeNpUjVEKwDAIQ19AduL9115tF3O2WsbyISEvEl33Q5DKI+FtvUKwaLNg+oGqAVW2H/w+XRlGhNuGNIRJa8EzMfa2CvbkKforwAAaHCJFi6TttAAAAABJRU5ErkJggg==');
}

.open .anchor:after{
   display: block;
}

.anchor_inline, .popout__up .anchor_inline{
    position: relative;
    display: inline-block;
    width: auto;
    background: transparent;
}

.anchor_date, .popout__up .anchor_date{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 14px;
}

.popout__action-btn {
    white-space: nowrap;
    cursor: pointer;
}

.popout__action-btn + .popout__wrp_right {
    left: auto;
    right: -10px;
}

.users-list:not([name="assignee"]) .l-field-user .popout__action-btn + .popout__wrp {
    top: 40px;
    left: 0;
}
.toolbar__field .popout__action-btn {
    line-height: inherit;
}

.popout__action-input {
    width: 250px;
    height: 16px;
    margin: 5px;
    padding: 0 13px 0 0;
    line-height: 16px;
    white-space: nowrap;
    color: #45525c;
    position: relative;
    outline: solid 1px #e7ebee;
    outline-offset: 5px;
    cursor: pointer;
}
.popout__action-input:hover {
    outline: solid 1px #ced3d7;
}
.popout__action-input:before {
    content: '';
    width: 0;
    margin-top: -2px;
    display: block;
    position: absolute;
    right: 9px;
    top: 50%;
    border: solid 5px transparent;
    border-top-color: #0575bd;
}

.popout__wrp_right {
    left: auto;
    right: -10px;
}

/* popout-menu */
.popout-menu {
    position: relative;
}
.popout-menu {
    min-width: 120px;
    max-width: 300px;
    max-height: 227px;
    padding: 1px;
    font-size: 12px;
    overflow-y: auto;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    text-align: left;
}
.popout-menu, .popout-menu:hover .popout-menu {
    display: block;
}
.popout-menu__i {
    line-height: 18px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
}
.popout-menu__i:hover {
    background: #edf3fb;
}
.popout-menu__txt {
    padding: 5px 7px 5px 10px;
    display: inline-block;
    cursor: pointer;
    width: 100%;
    color: #636262;
}
.popout-menu__txt:hover {
    color: #000;
    text-decoration: none;
}