1@bg-color: #fff; 2@popup-border-color: #F1F3F5; 3@close-size: 16px; 4@color-text: #172B4D; 5@close-color: #000; 6// Icon element 7a.jirainfo:before { 8 content: ""; 9 display: inline-block; 10 background: url("src/icon.svg") no-repeat; 11 width: 14px; 12 height: 16px; 13 background-size: 42px; 14} 15// Icon load 16.ji-popup-content .icon-load { 17 content: " "; 18 display: block; 19 width: 16px; 20 height: 16px; 21 margin: 1px; 22 border-radius: 50%; 23 border: 3px solid #205081; 24 border-color: #205081 transparent #205081 transparent; 25 animation: dual-ring 1.2s linear infinite; 26} 27@keyframes dual-ring { 28 0% { transform: rotate(0deg); } 29 100% { transform: rotate(360deg); } 30} 31 32.ji-popup { 33 min-width: 50px; 34 min-height: 32px; 35 max-width: 300px; 36 border: 1px solid #ccc; 37 border-radius: 5px; 38 -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); 39 -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); 40 box-shadow: 0 5px 10px rgba(0,0,0,.2); 41 white-space: normal; 42 z-index: 999; 43 background-color: @bg-color; 44 .ji-popup-content { 45 padding: 9px 14px; 46 overflow: auto; 47 display: block; 48 .ji-popup-content-body { 49 transition: opacity 0.3s linear; 50 opacity: 1; 51 .ji-status { 52 text-transform: uppercase; 53 margin-bottom: 10px; 54 span { 55 padding: 3px; 56 border-radius: 5px; 57 font-size: 10px; 58 &.color-green {background-color:#14892c;border-color:#14892c;color:#fff} 59 &.color-yellow {background-color:#ffd351;border-color:#ffd351;color:#594300} 60 &.color-brown {background-color:#815b3a;border-color:#815b3a;color:#fff} 61 &.color-warm-red {background-color:#d04437;border-color:#d04437;color:#fff} 62 &.color-blue-gray {background-color:#4a6785;border-color:#4a6785;color:#fff} 63 &.color-medium-gray {background-color:#ccc;border-color:#ccc;color:#333} 64 } 65 } 66 p.ji-summary { 67 margin-bottom: 5px; 68 color: #4a4a4a; 69 } 70 img.ji-priority, 71 img.ji-issuetype { 72 float: left; 73 height: 18px; 74 width: 18px; 75 overflow: hidden; 76 margin: 2px 4px 0 0; 77 } 78 div.ji-comment-circle { 79 display: inline-block; 80 background-color: @popup-border-color; 81 border: 1px solid @popup-border-color; 82 border-radius: 25%; 83 margin-right: 5px; 84 span.total-comments { 85 margin: 0 3px; 86 font-size: 85%; 87 color: @color-text; 88 } 89 } 90 a.ji-key-link { 91 margin: 3px 0 0 10px; 92 font-size: 12px; 93 float: right; 94 color: #3b73af; 95 } 96 } 97} 98// Arrow-element 99 .ji-arrow { 100 position: absolute; 101 content: ''; 102 width: 0; 103 height: 0; 104 border-style: solid; 105 &.arrow-right { 106 left: -12px; 107 border-width: 10px 12px 10px 0; 108 border-color: transparent #ccc transparent transparent; 109 } 110 &.arrow-right:after { 111 top: -9px; 112 left: 1px; 113 border-width: 9px 11px 9px 0; 114 border-color: transparent #fff transparent transparent; 115 } 116 &.arrow-left { 117 right: -12px; 118 border-width: 10px 0px 10px 12px; 119 border-color: transparent transparent transparent #ccc; 120 } 121 &.arrow-left:after { 122 top: -9px; 123 right: 1px; 124 border-width: 9px 0px 9px 11px; 125 border-color: transparent transparent transparent #fff; 126 } 127 &.arrow-top { 128 bottom: -12px; 129 border-width: 12px 10px 0px 10px; 130 border-color: #ccc transparent transparent transparent; 131 } 132 &.arrow-top:after { 133 right: -9px; 134 bottom: 1px; 135 border-width: 11px 9px 0px 9px; 136 border-color: #fff transparent transparent transparent; 137 } 138 &.arrow-bottom { 139 top: -12px; 140 border-width: 0px 10px 12px 10px; 141 border-color: transparent transparent #ccc transparent; 142 } 143 &.arrow-bottom:after { 144 top: 1px; 145 right: -9px; 146 border-width: 0px 9px 11px 9px; 147 border-color: transparent transparent #fff transparent; 148 } 149 } 150 .ji-arrow:after { 151 position: absolute; 152 content: ''; 153 width: 0; 154 height: 0; 155 border-style: solid; 156 } 157// Animation 158 &.pop { 159 -webkit-transform: scale(0.8); 160 -o-transform: scale(0.8); 161 transform: scale(0.8); 162 -webkit-transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); 163 -o-transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); 164 transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); 165 opacity: 0; 166 filter: alpha(opacity=0); 167 } 168 &.pop-in { 169 -webkit-transform: none; 170 -o-transform: none; 171 transform: none; 172 opacity: 1; 173 filter: alpha(opacity=100); 174 } 175 &.pop-out { 176 -webkit-transition-property: "opacity,transform"; 177 -o-transition-property: "opacity,transform"; 178 transition-property: "opacity,transform"; 179 -webkit-transition: 0.15s linear; 180 -o-transition: 0.15s linear; 181 transition: 0.15s linear; 182 opacity: 0; 183 filter: alpha(opacity=0); 184 } 185 &.fade { 186 transition: opacity 0.15s linear; 187 } 188 &.fade-in { 189 opacity: 1; 190 } 191 &.fade-out { 192 opacity: 0; 193 } 194}