frontend.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. /**
  2. * Pricing Table Columns
  3. *
  4. * Column layouts for pricing table
  5. */
  6. .fl-pricing-table:before,
  7. .fl-pricing-table:after {
  8. display: table;
  9. content: " ";
  10. }
  11. .fl-pricing-table:after {
  12. clear: both;
  13. }
  14. .fl-pricing-table {
  15. display: flex;
  16. margin-left: auto;
  17. margin-right: auto;
  18. }
  19. .fl-pricing-table-wrap {
  20. flex: 1;
  21. }
  22. .fl-pricing-table [class^='fl-pricing-table-col-'] {
  23. min-height: 1px;
  24. }
  25. .fl-pricing-table .fl-pricing-table-payment-frequency {
  26. text-align: center;
  27. margin: auto;
  28. padding-bottom: 30px;
  29. }
  30. .fl-pricing-table .fl-button-wrap {
  31. padding-bottom: 20px;
  32. }
  33. .fl-pricing-table .fl-button-wrap a.fl-button {
  34. margin: 0 15px;
  35. }
  36. .fl-pricing-table .second_option-price {
  37. display: none;
  38. }
  39. .fl-module-pricing-table .fl-builder-switch {
  40. position: relative;
  41. display: inline-block;
  42. vertical-align: middle;
  43. width: 60px;
  44. height: 34px;
  45. }
  46. .fl-module-pricing-table .fl-builder-switch .slider i {
  47. display: none;
  48. }
  49. .fl-module-pricing-table .fl-builder-switch input {
  50. opacity: 0;
  51. width: 0;
  52. height: 0;
  53. }
  54. .fl-module-pricing-table .slider {
  55. position: absolute;
  56. cursor: pointer;
  57. top: 0;
  58. left: 0;
  59. right: 0;
  60. bottom: 0;
  61. -webkit-transition: .4s;
  62. transition: .4s;
  63. }
  64. .fl-module-pricing-table .fl-builder-switch .slider:before {
  65. position: absolute;
  66. content: "";
  67. height: 26px;
  68. width: 26px;
  69. left: 4px;
  70. bottom: 4px;
  71. background-color: #fff;
  72. -webkit-transition: .4s;
  73. transition: .4s;
  74. }
  75. .fl-module-pricing-table .fl-builder-switch input:checked + .slider:before {
  76. -webkit-transform: translateX(26px);
  77. -ms-transform: translateX(26px);
  78. transform: translateX(26px);
  79. }
  80. /* Rounded sliders */
  81. .fl-module-pricing-table .fl-builder-switch .slider.round {
  82. -webkit-border-radius: 34px;
  83. -moz-border-radius: 34px;
  84. border-radius: 34px;
  85. }
  86. .fl-module-pricing-table .fl-builder-switch .slider.round:before {
  87. -webkit-border-radius: 50%;
  88. -moz-border-radius: 50%;
  89. border-radius: 50%;
  90. }
  91. /**
  92. * Pricing Box Spacing
  93. *
  94. * medium, large, and None
  95. *
  96. * Moved to frontend.css.php
  97. */
  98. /**
  99. * Pricing Boxes
  100. *
  101. * The actual pricing boxes
  102. */
  103. .fl-pricing-table .fl-pricing-table-column {
  104. text-align: center;
  105. position: relative;
  106. }
  107. .fl-pricing-table .fl-pricing-table-inner-wrap {
  108. position: relative;
  109. }
  110. .fl-pricing-table .fl-pricing-table-column .fl-pricing-table-price {
  111. padding: 13px 0;
  112. position: relative;
  113. z-index: 2;
  114. letter-spacing: -2px;
  115. }
  116. .fl-pricing-table .fl-pricing-table-column h2 {
  117. margin: 0;
  118. padding: 20px;
  119. }
  120. .fl-pricing-table .fl-pricing-table-column .fl-pricing-table-duration {
  121. font-size: .44em;
  122. display: inline-block;
  123. position: relative;
  124. bottom: 4px;
  125. letter-spacing: 0px;
  126. opacity: 0.85;
  127. }
  128. .fl-pricing-table .fl-pricing-table-features {
  129. margin: 20px 15px;
  130. list-style-type: none;
  131. padding: 0;
  132. }
  133. .fl-pricing-table .fl-pricing-table-features li {
  134. text-align: left;
  135. padding: 13px 4px;
  136. list-style-type: none;
  137. }
  138. .fl-pricing-table .fl-pricing-table-features li:last-child {
  139. border-bottom: 0;
  140. }
  141. .fl-pricing-table a.fl-button {
  142. margin: 0 15px;
  143. }
  144. .fl-pricing-table a.fl-button .fl-button-text {
  145. line-height: 18px;
  146. }
  147. /**
  148. * Pricing Box Borders
  149. *
  150. * Large, Medium, Small -- Moved to frontend.css.php in version 2.5.
  151. *
  152. */
  153. .fl-pricing-table .fl-pricing-table-features .fl-pricing-table-feature-item {
  154. display: flex;
  155. flex-direction: row;
  156. align-items: center;
  157. }
  158. .fl-pricing-table .fl-pricing-table-features .fl-feature-icon,
  159. .fl-pricing-table .fl-pricing-table-features .fl-feature-text,
  160. .fl-pricing-table .fl-pricing-table-features .fl-builder-tooltip {
  161. display: inline-block;
  162. }
  163. .fl-pricing-table .fl-pricing-table-features .fl-feature-icon {
  164. text-align: center;
  165. width: 1.25em;
  166. }
  167. body:not(.rtl) .fl-pricing-table .fl-pricing-table-features .fl-feature-icon {
  168. padding-right: 2em;
  169. }
  170. body.rtl .fl-pricing-table .fl-pricing-table-features .fl-feature-icon {
  171. padding-left: 2em;
  172. }
  173. .fl-pricing-table .fl-feature-text {
  174. margin-right: auto;
  175. }
  176. /* Tooltips */
  177. .fl-pricing-table .fl-builder-tooltip-icon {
  178. color: #999;
  179. cursor: pointer;
  180. padding: 5px;
  181. vertical-align: middle;
  182. position: static;
  183. }
  184. .fl-pricing-table .fl-builder-tooltip-text {
  185. box-sizing: border-box;
  186. background: #fff;
  187. border: 1px solid #ccc;
  188. box-shadow: 0 0 5px #ccc;
  189. -moz-box-shadow: 0 0 5px #ccc;
  190. -webkit-box-shadow: 0 0 5px #ccc;
  191. display: none;
  192. position: absolute;
  193. padding: 10px 13px;
  194. font-weight: normal;
  195. z-index: 1000;
  196. border-radius: 4px;
  197. width: 100%;
  198. left: 0;
  199. }
  200. .fl-builder-edit .fl-pricing-table .fl-builder-tooltip-text {
  201. display: none !important;
  202. }