new: Pricing table (#1117)

src/pages/_data/menu.yml

@@ -156,6 +156,9 @@ extra:
     pricing:
       url: pricing.html
       title: Pricing cards
+    pricing-table:
+      url: pricing-table.html
+      title: Pricing table
     faq:
       url: faq.html
       title: FAQ

src/pages/pricing-table.html

@@ -0,0 +1,102 @@
+---
+title: Pricing table
+page-header: Pricing table
+menu: extra.pricing-table
+---
+
+<div class="card">
+	<table class="table table-vcenter table-bordered card-table">
+		<thead>
+		<tr>
+			<td class="w-50">
+				<h2>Pricing plans for teams of all sizes</h2>
+				<div class="text-muted">
+					Choose an affordable plan that comes with the best features to engage your audience, create customer loyalty and increase sales.
+				</div>
+			</td>
+			<td class="text-center">
+				<div class="text-uppercase text-muted font-weight-medium">Starter</div>
+				<div class="display-6 fw-bold my-3">$0</div>
+				<a href="#" class="btn w-100">Choose plan</a>
+			</td>
+			<td class="text-center">
+				<div class="text-uppercase text-muted font-weight-medium">Professional</div>
+				<div class="display-6 fw-bold my-3">$9</div>
+				<a href="#" class="btn btn-green w-100">Choose plan</a>
+			</td>
+			<td class="text-center">
+				<div class="text-uppercase text-muted font-weight-medium">Business</div>
+				<div class="display-6 fw-bold my-3">$16</div>
+				<a href="#" class="btn w-100">Choose plan</a>
+			</td>
+		</tr>
+		</thead>
+		<tbody>
+		<tr class="bg-light">
+			<th colspan="4">Features</th>
+		</tr>
+		<tr>
+			<td>Some info about feature</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+		</tr>
+		<tr>
+			<td>Online payment gateway</td>
+			<td class="text-center">{% include ui/icon.html icon="x" class="text-red" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+		</tr>
+		<tr>
+			<td>Unlimited products can be sold</td>
+			<td class="text-center">{% include ui/icon.html icon="x" class="text-red" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="x" class="text-red" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+		</tr>
+		<tr class="bg-light">
+			<th colspan="4">Reporting</th>
+		</tr>
+		<tr>
+			<td>Free hosting and domain name</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+		</tr>
+		<tr>
+			<td>Admin dashboard to control items</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+		</tr>
+		<tr class="bg-light">
+			<th colspan="4">Support</th>
+		</tr>
+		<tr>
+			<td>Email marketing and service</td>
+			<td class="text-center">{% include ui/icon.html icon="x" class="text-red" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="x" class="text-red" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+		</tr>
+		<tr>
+			<td>24/7 customer support online</td>
+			<td class="text-center">{% include ui/icon.html icon="x" class="text-red" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+			<td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
+		</tr>
+		</tbody>
+		<tfoot>
+		<tr>
+			<td></td>
+			<td>
+				<a href="#" class="btn w-100">Choose plan</a>
+			</td>
+			<td>
+				<a href="#" class="btn btn-green w-100">Choose plan</a>
+			</td>
+			<td>
+				<a href="#" class="btn w-100">Choose plan</a>
+			</td>
+		</tr>
+		</tfoot>
+	</table>
+</div>

src/scss/_variables.scss

@@ -66,7 +66,7 @@ $display-font-sizes: (
   3: 4rem,
   4: 3.5rem,
   5: 3rem,
-  6: 2.5rem
+  6: 2rem
 ) !default;
 
 $lead-font-size: $font-size-base !default;
@@ -261,7 +261,9 @@ $size-spacers: (
 
 $size-values: map-merge($spacers, (
   25: 25%,
+  33: 33.33333%,
   50: 50%,
+  66: 66.66666%,
   75: 75%,
   100: 100%,
   auto: auto
@@ -549,7 +551,7 @@ $spinner-border-width-sm: 1px !default;
 
 //tables
 $table-color: inherit !default;
-$table-cell-padding-x: .5rem !default;
+$table-cell-padding-x: .75rem !default;
 $table-cell-padding-y: .75rem !default;
 $table-border-color: $border-color-transparent !default;
 $table-th-border-color: $border-color-transparent !default;

src/scss/ui/_cards.scss

@@ -412,40 +412,37 @@ Card table
   margin-bottom: 0 !important;
 
   tr {
-    .card-header ~ .table-responsive &,
-    .card-header ~ & {
-      &:first-child td {
-        //border-top: 0;
-      }
-    }
-
     td,
     th {
-      //border-top: 1px solid $border-color;
-
       &:first-child {
         padding-left: $card-spacer-x;
+        border-left: 0;
       }
 
       &:last-child {
         padding-right: $card-spacer-x;
+        border-right: 0;
       }
     }
   }
 
-  thead {
+  thead,
+  tbody,
+  tfoot {
     tr {
       &:first-child {
+        border-top: 0;
+
         td,
         th {
           border-top: 0;
         }
       }
     }
-  }
 
-  tbody {
     tr:last-child {
+      border-bottom: 0;
+
       td,
       th {
         border-bottom: 0;

src/scss/utils/_colors.scss

@@ -3,7 +3,6 @@
 // All colors
 @each $color, $value in theme-colors() {
   .bg-#{"" + $color} {
-    color: #ffffff !important;
     background: $value !important;
   }