1 | /* pricing table */ |
---|
2 | .pricing-box { |
---|
3 | &:not(:first-child) { |
---|
4 | padding-left:7px; |
---|
5 | } |
---|
6 | &:not(:last-child) { |
---|
7 | padding-right:7px; |
---|
8 | } |
---|
9 | |
---|
10 | |
---|
11 | .price{ |
---|
12 | font-size:22px; |
---|
13 | line-height:20px; height:28px; |
---|
14 | text-align:center; |
---|
15 | color:#555; |
---|
16 | |
---|
17 | small { font-size:14px; } |
---|
18 | } |
---|
19 | |
---|
20 | .btn { font-size:16px; } /* the purchase button */ |
---|
21 | |
---|
22 | .widget-header {/* the title */ |
---|
23 | text-align:center; |
---|
24 | padding-left:0; |
---|
25 | } |
---|
26 | } |
---|
27 | @media only screen and (max-width: @screen-tablet) { |
---|
28 | .pricing-box { |
---|
29 | margin: 0; |
---|
30 | margin-bottom:16px; |
---|
31 | |
---|
32 | padding-left:0 !important; |
---|
33 | padding-right:0 !important; |
---|
34 | margin-left: -1px; |
---|
35 | |
---|
36 | &:nth-child(odd) { |
---|
37 | padding-left: @grid-gutter-width / 2 !important; |
---|
38 | } |
---|
39 | &:nth-child(even) { |
---|
40 | padding-right: @grid-gutter-width / 2 !important; |
---|
41 | } |
---|
42 | } |
---|
43 | } |
---|
44 | @media only screen and (max-width: @screen-topbar-down) { |
---|
45 | .pricing-box { |
---|
46 | margin: 0; |
---|
47 | margin-bottom:16px; |
---|
48 | width:100%; |
---|
49 | |
---|
50 | padding-left:@grid-gutter-width / 2 !important; |
---|
51 | padding-right:@grid-gutter-width / 2 !important; |
---|
52 | } |
---|
53 | } |
---|
54 | |
---|
55 | |
---|
56 | |
---|
57 | .pricing-table-header { |
---|
58 | padding-top:0; |
---|
59 | margin-top:0; |
---|
60 | text-align:left; |
---|
61 | > li { |
---|
62 | padding:7px 0 7px 11px; |
---|
63 | font-size:13px; |
---|
64 | } |
---|
65 | } |
---|
66 | |
---|
67 | .pricing-table { |
---|
68 | margin-top:0; |
---|
69 | > li { |
---|
70 | text-align:center; |
---|
71 | padding:7px 0; |
---|
72 | font-size:13px; |
---|
73 | } |
---|
74 | } |
---|
75 | |
---|
76 | |
---|
77 | .list-striped { |
---|
78 | > li { |
---|
79 | &:nth-child(odd) { |
---|
80 | background-color:#FFF; |
---|
81 | } |
---|
82 | &:nth-child(even) { |
---|
83 | background-color:#F2F3EB; |
---|
84 | } |
---|
85 | } |
---|
86 | |
---|
87 | &.pricing-table-header > li:nth-child(even) { |
---|
88 | background-color:#EEE; |
---|
89 | } |
---|
90 | } |
---|
91 | |
---|
92 | |
---|
93 | .pricing-box-small { |
---|
94 | box-shadow:none; |
---|
95 | margin-left:-2px; |
---|
96 | background-color:#FFF; |
---|
97 | |
---|
98 | position:relative; |
---|
99 | z-index:10; |
---|
100 | |
---|
101 | .price { |
---|
102 | line-height:20px; height:28px; |
---|
103 | text-align:center; |
---|
104 | .label { |
---|
105 | &:before, &:after { |
---|
106 | margin-top:-2px; |
---|
107 | .opacity(0.9); |
---|
108 | } |
---|
109 | } |
---|
110 | } |
---|
111 | |
---|
112 | &:hover { |
---|
113 | box-shadow:0 0 4px 2px rgba(0,0,0,0.15); |
---|
114 | |
---|
115 | z-index:11; |
---|
116 | .scale(1.04); |
---|
117 | //-webkit-transform:none;/*chrome blurs when scaled, so disable it!*/ |
---|
118 | |
---|
119 | .price > .label { |
---|
120 | .scale(0.96); |
---|
121 | //-webkit-transform:none; |
---|
122 | } |
---|
123 | } |
---|
124 | } |
---|
125 | |
---|
126 | |
---|
127 | |
---|
128 | |
---|
129 | .pricing-span { |
---|
130 | margin:0; |
---|
131 | width:19%; |
---|
132 | max-width:150px !important; |
---|
133 | min-width:110px !important; |
---|
134 | float:left !important; |
---|
135 | } |
---|
136 | .pricing-span-header { |
---|
137 | padding-right: 0; |
---|
138 | } |
---|
139 | |
---|
140 | |
---|
141 | @media only screen and (min-width: @screen-xs-min) { |
---|
142 | .pricing-span-body { |
---|
143 | padding-left: 0; |
---|
144 | padding-right: 0; |
---|
145 | } |
---|
146 | } |
---|
147 | @media only screen and (max-width: @screen-xs) { |
---|
148 | .pricing-span-header , .pricing-span-body { |
---|
149 | width: 100%; |
---|
150 | padding-right: @grid-gutter-width / 2; |
---|
151 | } |
---|
152 | } |
---|