pricing-tables.scss
1.9 KB
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
@import '../../global/_variables'; // global variables.
@import '../../global/components/_mixins'; // global mixings.
/***
Pricing table
***/
.pricing {
position:relative;
margin-bottom:15px;
border:3px solid #eee;
}
.pricing-active {
border:3px solid #36d7ac;
margin-top: -10px;
box-shadow: 7px 7px rgba(#36d7ac, 0.2);
}
.pricing:hover {
border:3px solid #36d7ac;
}
.pricing:hover h4 {
color:#36d7ac;
}
.pricing-head {
text-align:center;
}
.pricing-head h3,
.pricing-head h4 {
margin:0;
line-height:normal;
}
.pricing-head h3 span,
.pricing-head h4 span {
display:block;
margin-top:5px;
font-size:14px;
font-style:italic;
}
.pricing-head h3 {
font-weight: 300;
color:#fafafa;
padding:12px 0;
font-size:27px;
background:#36d7ac;
border-bottom:solid 1px #41b91c;
}
.pricing-head h4 {
color:#bac39f;
padding:5px 0;
font-size:54px;
font-weight:300;
background:#fbfef2;
border-bottom:solid 1px #f5f9e7;
}
.pricing-head-active h4 {
color:#36d7ac;
}
.pricing-head h4 i {
top:-8px;
font-size:28px;
font-style:normal;
position:relative;
}
.pricing-head h4 span {
top:-10px;
font-size:14px;
font-style:normal;
position:relative;
}
/*Pricing Content*/
.pricing-content li {
color:#888;
font-size:12px;
padding:7px 15px;
border-bottom:solid 1px #f5f9e7;
}
.pricing-content li i {
top:2px;
color:#36d7ac;
font-size:16px;
margin-right:5px;
position:relative;
}
/*Pricing Footer*/
.pricing-footer {
color:#777;
font-size:11px;
line-height:17px;
text-align:center;
padding:0 20px 19px;
}
/*Priceing Active*/
.price-active,
.pricing:hover {
z-index:9;
}
.price-active h4 {
color:#36d7ac;
}
.no-space-pricing .pricing:hover {
transition:box-shadow 0.2s ease-in-out;
}
.no-space-pricing .price-active .pricing-head h4,
.no-space-pricing .pricing:hover .pricing-head h4 {
color:#36d7ac;
padding:15px 0;
font-size:80px;
transition:color 0.5s ease-in-out;
}