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}