app/assets/sass/_plan.scss


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

$connector-height: 12px;
$connector-line: 2px solid darken($line-color, 10%);

.plan {
	padding-bottom: $padding-lg * 3;
   margin-left: 100px;

	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;
   }
}