|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 Pricing Table
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7 .pricing-box {
|
|
|
8 border: rem(1) solid $theme-border-color;
|
|
|
9 border-radius: em(4);
|
|
|
10 background: #fff;
|
|
|
11 margin: em(42) 0;
|
|
|
12 padding-bottom: em(15);
|
|
|
13 padding-top: em(10);
|
|
|
14
|
|
|
15 [class^="col-md-"] & {
|
|
|
16 margin-left: em(-5);
|
|
|
17 margin-right: em(-5);
|
|
|
18 }
|
|
|
19
|
|
|
20 .heading-basic {
|
|
|
21 background: #d0ecfd;
|
|
|
22 height: em(80);
|
|
|
23 width: em(80);
|
|
|
24 display: inline-block;
|
|
|
25 line-height: em(80);
|
|
|
26 margin: auto;
|
|
|
27 }
|
|
|
28
|
|
|
29 .heading-custom {
|
|
|
30 background: #f1f1f1;
|
|
|
31 height: em(80);
|
|
|
32 width: em(80);
|
|
|
33 line-height: em(80);
|
|
|
34 display: inline-block;
|
|
|
35 margin: auto;
|
|
|
36 }
|
|
|
37
|
|
|
38 li {
|
|
|
39 padding: em(7) 0;
|
|
|
40 }
|
|
|
41
|
|
|
42 hr {
|
|
|
43 width: 80%;
|
|
|
44 }
|
|
|
45
|
|
|
46 &.featured-pricing-box{
|
|
|
47 position: relative;
|
|
|
48 z-index: 1;
|
|
|
49 box-shadow: 0px 0px em(9) rgba(0,0,0,.1);
|
|
|
50
|
|
|
51 .heading-featured {
|
|
|
52 background: #d6f5d6;
|
|
|
53 height: em(40);
|
|
|
54 width: em(40);
|
|
|
55 line-height: em(40);
|
|
|
56 display: inline-block;
|
|
|
57 margin: 0;
|
|
|
58 }
|
|
|
59
|
|
|
60 [class^=col-md-] & {
|
|
|
61 margin-left: em(-30);
|
|
|
62 margin-right: em(-30);
|
|
|
63 margin-top: 0;
|
|
|
64 margin-bottom: 0;
|
|
|
65 }
|
|
|
66 }
|
|
|
67
|
|
|
68 &.featured-pricing-box-2{
|
|
|
69 // background: rgba(135,206,250,.7) !important;
|
|
|
70 h5,p,a,li {
|
|
|
71 color: #fff;
|
|
|
72 }
|
|
|
73
|
|
|
74
|
|
|
75 li {
|
|
|
76 color: #fff !important;
|
|
|
77 }
|
|
|
78
|
|
|
79 .btn-outline-default:hover {
|
|
|
80 background: #fff;
|
|
|
81 border-color: transparent;
|
|
|
82 color: rgba(135,206,250,.7);
|
|
|
83 }
|
|
|
84
|
|
|
85
|
|
|
86 }
|
|
|
87
|
|
|
88 header {
|
|
|
89 margin-top: em(30);
|
|
|
90
|
|
|
91 h5 {
|
|
|
92 font-weight: 700;
|
|
|
93 margin-bottom: em(20,18);
|
|
|
94 }
|
|
|
95
|
|
|
96 span {
|
|
|
97 sub {
|
|
|
98 font-size: em(15,42);
|
|
|
99 font-weight: 700;
|
|
|
100 position: relative;
|
|
|
101 top: 0;
|
|
|
102 }
|
|
|
103 }
|
|
|
104
|
|
|
105 .header-text {
|
|
|
106 font-size: em(15);
|
|
|
107 font-weight: 500;
|
|
|
108 margin-top: em(28);
|
|
|
109 }
|
|
|
110
|
|
|
111 .triangle-top-right {
|
|
|
112 display: inline-block;
|
|
|
113 width: 0;
|
|
|
114 height: 0;
|
|
|
115 border-style: solid;
|
|
|
116 border-width: 0 80px 80px 0;
|
|
|
117 border-color: transparent map-get($theme-colors, success) transparent transparent;
|
|
|
118 position: absolute;
|
|
|
119 top: em(5);
|
|
|
120 right: em(5);
|
|
|
121 &::before {
|
|
|
122 content: "\e9bf";
|
|
|
123 font-family: "feather";
|
|
|
124 color: #fff;
|
|
|
125 font-size: em(20);
|
|
|
126 position: absolute;
|
|
|
127 left: em(45,20);
|
|
|
128 top: em(10,20);
|
|
|
129 }
|
|
|
130 }
|
|
|
131 }
|
|
|
132
|
|
|
133 ul {
|
|
|
134 padding-right: 0;
|
|
|
135 }
|
|
|
136
|
|
|
137 .pricing-box-content {
|
|
|
138
|
|
|
139 li {
|
|
|
140 border: none;
|
|
|
141 color: #aaa;
|
|
|
142 background-color: transparent;
|
|
|
143 }
|
|
|
144
|
|
|
145 .btn {
|
|
|
146 width: 80%;
|
|
|
147 letter-spacing: em(2);
|
|
|
148 font-size: em(11);
|
|
|
149 font-weight: 700;
|
|
|
150 margin-bottom: em(25);
|
|
|
151 text-transform: uppercase;
|
|
|
152 }
|
|
|
153 }
|
|
|
154 }
|
