Merge pull request #739 from enricodias/dev

src/pages/_includes/cards/card-tabs.html

@@ -28,7 +28,12 @@
 {% endcapture %}
 
 <!-- Cards with tabs component -->
-<div class="card-tabs">
+<div class="
+   card-tabs 
+   {% if include.borderless %}
+   border-0
+   {% endif %}
+">
    {% if include.bottom %}
       {{ tabs-content-html }}
       {{ tabs-html }}

src/pages/cards.html

@@ -8,6 +8,7 @@ menu: base.cards
 	<div class="col-md-6 col-xl-4">
 		<div class="row row-cards">
 			<div class="col-12">{% include cards/card.html body="This is some text within a card body." %}</div>
+			<div class="col-12 border-0">{% include cards/card.html body="This is a borderless card." %}</div>
 			<div class="col-12">{% include cards/card.html img-bottom=true title="Card with bottom image" %}</div>
 			<div class="col-12">{% include cards/card.html active=true body="This is a card with active state." %}</div>
 			<div class="col-12">{% include cards/card.html inactive=true body="This is some text inactive state." %}</div>
@@ -18,6 +19,7 @@ menu: base.cards
 			<div class="col-12">{% include cards/card.html progress=true title="Card with progress bar" %}</div>
 			<div class="col-12">{% include cards/card.html empty=true %}</div>
 			<div class="col-12">{% include cards/card-tabs.html count=4 %}</div>
+			<div class="col-12">{% include cards/card-tabs.html count=4 borderless=true id="borderless" %}</div>
 			<div class="col-12">{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}</div>
 		</div>
 	</div>

src/scss/ui/_cards.scss

+.border-0 {
+
+  .card, .nav-link {
+    border: 0 !important;
+  }
+
+  .card-stacked::after {
+    border: 1px solid rgba($text-muted, 0.07) !important;
+  }
+
+}
+
 .card {
   box-shadow: $card-shadow;
   border: $card-border-width solid $card-border-color;
@@ -42,6 +54,7 @@
 .card-active {
   position: relative;
   background-color: rgba($primary, .03);
+  z-index: 1;
 
   &:before {
     position: absolute;