blob: f93ee708c31da376f659b30262e32165eebfd019 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
$connector-height: 12px;
$connector-line: 2px solid darken($line-color, 10%);
.plan {
padding-bottom: $padding-lg * 3;
overflow: auto;
height: 100%;
min-height: 550px;
width: 100%;
ul {
display: flex;
padding-top: $connector-height;
position: relative;
margin: auto;
transition: all 0.5s;
margin-top: -5px;
// vertical connector
ul::before {
content: '';
position: absolute; top: 0; left: 50%;
border-left: $connector-line;
height: $connector-height;
width: 0;
}
li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: $connector-height $padding-sm 0 $padding-sm;
transition: all 0.5s;
// connectors
&:before, &:after {
content: '';
position: absolute; top: 0; right: 50%;
border-top: $connector-line;
width: 50%; height: $connector-height;
}
&:after {
right: auto; left: 50%;
border-left: $connector-line;
}
&:only-child {
padding-top: 0;
&:after, &:before {
display: none;
}
}
&:first-child::before, &:last-child::after {
border: 0 none;
}
&:last-child::before {
border-right: $connector-line;
border-radius: 0 $border-radius-lg 0 0;
}
&:first-child::after {
border-radius: $border-radius-lg 0 0 0;
}
//hovers
.plan-node:hover+ul::before {
border-color: $highlight-color;
}
.plan-node:hover+ul li::after,
.plan-node:hover+ul li::before,
.plan-node:hover+ul ul::before{
border-color: $highlight-color-dark;
}
}
}
}
.plan-stats {
display: flex;
font-size: $font-size-base;
margin: $padding-lg auto $padding-lg auto;
padding-bottom: $padding-lg;
border-bottom: 1px solid $line-color;
border-radius: $border-radius-lg*2;
width: 650px;
position: relative;
div {
padding-right: $padding-lg;
flex-grow: 1;
}
.stat-value {
display: block;
text-align: center;
font-size: $font-size-lg;
}
.stat-label {
display: block;
text-align: center;
font-size: $font-size-sm;
}
$triangle-size: 9px;
&:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: $triangle-size*-1;
width: 0;
height: 0;
border-top: solid $triangle-size $line-color;
border-left: solid $triangle-size transparent;
border-right: solid $triangle-size transparent;
}
.btn-close {
padding: $padding-base;
background-color: transparent;
font-size: $font-size-lg;
text-align: center;
@extend .text-muted;
margin-left: $padding-base;
cursor: pointer;
border: 0;
}
}
|
