@bg-color: #fff; @popup-border-color: #F1F3F5; @close-size: 16px; @color-text: #172B4D; @close-color: #000; // Icon element a.jirainfo:before { content: ""; display: inline-block; background: url("src/icon.svg") no-repeat; width: 14px; height: 16px; background-size: 42px; } // Icon load .ji-popup-content .icon-load { content: " "; display: block; width: 16px; height: 16px; margin: 1px; border-radius: 50%; border: 3px solid #205081; border-color: #205081 transparent #205081 transparent; animation: dual-ring 1.2s linear infinite; } @keyframes dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ji-popup { min-width: 50px; min-height: 32px; max-width: 300px; border: 1px solid #ccc; border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); white-space: normal; z-index: 999; background-color: @bg-color; .ji-popup-content { padding: 9px 14px; overflow: auto; display: block; .ji-popup-content-body { transition: opacity 0.3s linear; opacity: 1; .ji-status { text-transform: uppercase; margin-bottom: 10px; span { padding: 3px; border-radius: 5px; font-size: 10px; &.color-green {background-color:#14892c;border-color:#14892c;color:#fff} &.color-yellow {background-color:#ffd351;border-color:#ffd351;color:#594300} &.color-brown {background-color:#815b3a;border-color:#815b3a;color:#fff} &.color-warm-red {background-color:#d04437;border-color:#d04437;color:#fff} &.color-blue-gray {background-color:#4a6785;border-color:#4a6785;color:#fff} &.color-medium-gray {background-color:#ccc;border-color:#ccc;color:#333} } } p.ji-summary { margin-bottom: 5px; color: #4a4a4a; } img.ji-priority, img.ji-issuetype { float: left; height: 18px; width: 18px; overflow: hidden; margin: 2px 4px 0 0; } div.ji-comment-circle { display: inline-block; background-color: @popup-border-color; border: 1px solid @popup-border-color; border-radius: 25%; margin-right: 5px; span.total-comments { margin: 0 3px; font-size: 85%; color: @color-text; } } a.ji-key-link { margin: 3px 0 0 10px; font-size: 12px; float: right; color: #3b73af; } } } // Arrow-element .ji-arrow { position: absolute; content: ''; width: 0; height: 0; border-style: solid; &.arrow-right { left: -12px; border-width: 10px 12px 10px 0; border-color: transparent #ccc transparent transparent; } &.arrow-right:after { top: -9px; left: 1px; border-width: 9px 11px 9px 0; border-color: transparent #fff transparent transparent; } &.arrow-left { right: -12px; border-width: 10px 0px 10px 12px; border-color: transparent transparent transparent #ccc; } &.arrow-left:after { top: -9px; right: 1px; border-width: 9px 0px 9px 11px; border-color: transparent transparent transparent #fff; } &.arrow-top { bottom: -12px; border-width: 12px 10px 0px 10px; border-color: #ccc transparent transparent transparent; } &.arrow-top:after { right: -9px; bottom: 1px; border-width: 11px 9px 0px 9px; border-color: #fff transparent transparent transparent; } &.arrow-bottom { top: -12px; border-width: 0px 10px 12px 10px; border-color: transparent transparent #ccc transparent; } &.arrow-bottom:after { top: 1px; right: -9px; border-width: 0px 9px 11px 9px; border-color: transparent transparent #fff transparent; } } .ji-arrow:after { position: absolute; content: ''; width: 0; height: 0; border-style: solid; } // Animation &.pop { -webkit-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); -o-transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); opacity: 0; filter: alpha(opacity=0); } &.pop-in { -webkit-transform: none; -o-transform: none; transform: none; opacity: 1; filter: alpha(opacity=100); } &.pop-out { -webkit-transition-property: "opacity,transform"; -o-transition-property: "opacity,transform"; transition-property: "opacity,transform"; -webkit-transition: 0.15s linear; -o-transition: 0.15s linear; transition: 0.15s linear; opacity: 0; filter: alpha(opacity=0); } &.fade { transition: opacity 0.15s linear; } &.fade-in { opacity: 1; } &.fade-out { opacity: 0; } }