page.pricing.less 2.5 KB

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