Project

General

Profile

1
.metrics {
2
  position: relative;
3
  display: inline-block;
4
}
5

    
6
.metrics .widget {
7
  position: absolute;
8
  left: 50%;
9
  transform: translateX(-85%);
10
  margin-top: 20px;
11
  margin-left: 20px;
12
  width: 350px;
13
  z-index: 3;
14
}
15

    
16
.metrics .widget:after {
17
  position: absolute;
18
  left: 80%;
19
  transform: translateX(-65%);
20
  top: -10px;
21
  width: 0;
22
  height: 0;
23
  content: '';
24
  border-left: 10px solid transparent;
25
  border-right: 10px solid transparent;
26
  border-bottom: 10px solid #2E2D7A;
27
}
28

    
29
.metrics .m-badge .number {
30
  font-size: 18px;
31
  color: #222080;
32
  font-weight: 700;
33
  text-align: center;
34
}
35

    
36
.metrics .widget > .body {
37
  box-shadow: 0 3px 6px #00000029;
38
  border-radius: 4px 4px 0 4px;
39
  padding: 10px 18px;
40
  background: #2E2D7A no-repeat padding-box;
41
  color: white;
42
  font-size: 12px;
43
  height: inherit;
44
}
45

    
46
.metrics .widget > .body > div {
47
  opacity: 0;
48
  height: inherit;
49
  overflow: hidden;
50
}
51

    
52
.metrics .widget > .body .charts {
53
  margin-top: 10px;
54
  opacity: 0;
55
}
56

    
57
.metrics .widget > .body .charts .uk-slidenav {
58
  background-color: #bbbbca;
59
  color: #49494f;
60
  padding: 5px 10px;
61
  border-radius: 50%;
62
}
63

    
64
.metrics .widget > .footer {
65
  background: #FFFFFF;
66
  box-shadow: 0 3px 6px #00000029;
67
  border-radius: 0 0 4px 4px;
68
  font-size: 11px;
69
  padding: 5px 10px;
70
  color: rgba(126, 126, 126, 0.80);
71
  display: inline-block;
72
  float: right;
73
  position: relative;
74
  z-index: -1;
75
  transform: translateY(-80px);
76
}
77

    
78
.metrics .widget .footer > *:first-child {
79
  margin-right: 10px;
80
  line-height: 33px;
81
  vertical-align: middle;
82
}
83

    
84
.metrics .widget .number {
85
  color: currentColor;
86
  font-weight: 700;
87
  font-size: 18px;
88
}
89

    
90
.metrics .uk-grid-divider>:not(.uk-first-column)::before {
91
  border-left: 1px solid #ffffff;
92
}
93

    
94
.metrics ul.uk-slider-items > li {
95
  background-color: white;
96
}
97

    
98
.metrics .uk-table {
99
  color: #1a1a1a;
100
}
101

    
102
.metrics .uk-table th  {
103
  color: rgba(26, 26, 26, 0.8);
104
}
(1-1/3)