Merge pull request #65 from konnected-io/fixes/dawnify-compare-kits

Fixes/dawnify compare kits

assets/k-compare-table.css

@@ -0,0 +1,123 @@
+.k-compare-table tr td:first-child {
+    line-height: 1.2em;
+    border-left: 0.1rem solid rgba(var(--color-foreground),.1);
+    border-top: 0.1rem solid rgba(var(--color-foreground),.1);
+    width: 35rem;
+}
+
+.k-compare-table tr td:last-child {
+    line-height: 1.2em;
+    border-right: .1rem solid rgba(var(--color-foreground),.1);
+}
+
+.k-compare-table table td:nth-child(odd) {
+    background: rgba(var(--color-foreground),.05);
+}
+
+.k-compare-table h2 {
+    text-align: left;
+    margin: 0;
+}
+
+.k-compare-table h3 {
+    margin: 0;
+}
+
+.heading-row {
+    background-color: rgb(var(--color-background));
+}
+
+.heading-row tr {
+    border: 0;
+}
+
+.heading-row td:first-child,.starting-row td:first-child {
+    border: 0 !important;
+    background: rgb(var(--color-background)) !important;
+}
+
+
+
+.heading-row td:not(:first-child) {
+    background: rgb(var(--color-button)) !important;
+    color: rgb(var(--color-background)) !important;
+}
+
+.starting-row td {
+    background: rgb(var(--color-background)) !important;
+}
+
+.heading-row td:nth-child(2) {
+    border-top-left-radius: 1rem;
+    border-left: 0;
+    border-top: 0;
+}
+
+.heading-row td {
+    border-top: 0 !important;
+}
+
+.heading-row td:last-child {
+    border-top-right-radius: 1rem;
+    border-right: 0;
+    border-top: 0;
+}
+
+.last-row td {
+    background: rgb(var(--color-background)) !important;
+}
+
+.column-heading {
+    display: block;
+}
+
+.k-compare-table p {
+    margin: 0;
+}
+
+.k-compare-table table th {
+    border: 0;
+    vertical-align: middle;
+    display: table-cell;
+}
+
+.k-compare-table .button {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-size: 1.6rem;
+    min-height: calc(3.5rem + var(--buttons-border-width) * 2);
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.icon-compare {
+    line-height: 1em;
+}
+
+.active-product {
+    border-left: 0.3rem solid rgba(var(--color-button),1) !important;
+    border-right: 0.3rem solid rgba(var(--color-button),1) !important;
+}
+
+.last-row td.active-product {
+    border-bottom: 0.3rem solid rgba(var(--color-button),1) !important;
+}
+
+@media (min-width: 750px) {
+    .icon-compare {
+        font-size: calc(var(--font-heading-scale) * 2rem);
+    }
+}
+
+@media (max-width: 749px) {
+    .k-compare-table table td {
+        background: rgba(var(--color-background),1) !important;
+    }
+    .k-compare-table table th {
+        min-width: 16rem;
+    }
+    .k-compare-table .medium-hide.large-up-hide td {
+        background: rgba(var(--color-foreground),.05) !important;
+    }
+}

assets/konnected.css

@@ -1011,6 +1011,23 @@ iframe#bwpFrame {
   background: rgb(var(--color-sale-badge));
 }
 
+.media-hover:hover .media {
+  transition: all ease .3s;
+  transform: scale(1.1);
+}
+
+.table-overflow {
+  overflow-x: auto;
+}
+
+.table-overflow table {
+  width: 100%;
+  border-spacing: 0;
+  table-layout: auto;
+  border: none;
+  box-shadow: none;
+}
+
 .table-price-chart {
   line-height: 1.2em;
   max-width: 50rem;